text:
/*
  Animation keyframes. These must be placed at the top of the file
  in order to work in IE.
*/
@-webkit-keyframes dot {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes dot {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes dot {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* Angular material overrides. */
md-input-group.long > input {
  height: 45px;
  width: 100%;
}

label {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 5px;
  max-width: 100%;
}

md-input-group.md-default-theme label {
  font-size: 16px;
  font-weight: 200;
  margin-bottom: 0;
}

/* The following classes' styles are overriden by Guppy's OSK stylesheet and
they end up rotating the tooltips which are placed on the left or right. This is
why they need to be overriden.  */
.left, .right {
  -webkit-transform: none !important;
  transform: none !important;
}

.md-button {
  font-size: 16px;
  line-height: 22px;
  min-height: 22px;
  min-width: 22px;
  padding: 6px;
}

.md-button.md-default.theme {
  border-radius: 3px;
}

.md-button-success {
  color: #009688;
}

.md-shadow-bottom-z-1, .md-button.md-raised:not([disabled]),
.md-button.md-fab {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
}

.md-button.md-default-theme.md-raised:not([disabled]):hover,
.md-button.md-raised:not([disabled]):hover {
  background-color: rgba(158,158,158,0.3);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
  transform: translate3d(0,-1px,0);
}

.oppia-learner-confirm-button.protractor-test-submit-answer-button.md-button[disabled] {
  background-color: transparent;
  color: rgba(0,0,0,0.38);
  cursor: default;
}

.oppia-learner-confirm-button.protractor-test-submit-answer-button.md-button[disabled]:hover {
  text-decoration: none;
}

.oppia-learner-confirm-button.protractor-test-submit-answer-button.md-button {
  font: 16px;
  margin: 0;
  min-width: 55px;
}

.md-button.oppia-learner-confirm-button,
.md-button.oppia-learner-got-it-button,
.md-button.oppia-learner-hint-solution-button {
  background: #0D48A1;
  color: #ffffff;
  padding: 6px 12px;
}

.md-button.oppia-learner-confirm-button:hover {
  background-color: #115fd4;
}

.md-button.oppia-learner-reload-image-button {
  background: #ffffff;
  border: 2px solid;
  border-color: #0D48A1;
  color: #0D48A1;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
}

.md-button.md-default-theme.oppia-learner-reload-image-button:focus,
.md-button.md-default-theme.oppia-learner-reload-image-button:hover {
  background-color: rgba(224,242,241,1);
  text-decoration: none;
}

.md-button.md-default-theme.oppia-learner-confirm-button:focus,
.md-button.md-default-theme.oppia-learner-confirm-button:hover,
.md-button.md-default-theme.oppia-learner-got-it-button:focus,
.md-button.md-default-theme.oppia-learner-got-it-button:hover,
.md-button.md-default-theme.oppia-learner-hint-solution-button:focus,
.md-button.md-default-theme.oppia-learner-hint-solution-button:hover {
  background-color: #115FD4;
  text-decoration: none;
}

.btn.btn-secondary.oppia-revert-button {
  min-width: 130px;
}

.oppia-learner-got-it-button {
  margin-bottom: 25px;
  margin-right: 20px;
}

/* Attributes for material-icons. */
.material-icons {
  line-height: 1;
  vertical-align: middle;
}
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-32 {
  font-size: 32px;
}
.material-icons.md-40 {
  font-size: 40px;
}
.material-icons.md-100 {
  font-size: 100px;
}
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

/* Bootstrap overrides and additions. */
html {
  background-color: #e8e7e3;
  /*
    The HTML font-size is set to 62.5% in order to make 'em' units easier to
    work with. Modern browsers set their default font-size to 16px. This means
    that 1em = 16px, which is a difficult base to work with (for example,
    1.6em = 25.6px, which is not rounded). By setting the html's font-size to
    62.5%, the base font-size becomes 10px, so 1em = 10px, and 1.6em = 16px.
    The reason for making 'em' easier to work with is that 'em's scale with
    the user's font-size preferences that they set in the browser, while
    'px' is a fixed unit of measurement that doesn't scale.
  */
  font-size: 62.5%;
  height: 100%;
}

body {
  background-color: #e8e7e3;
  color: rgba(0,0,0,0.87);
  font-family: "Roboto", Arial, sans-serif;
  /*
    A font-size of 1.6em sets the default font-size on Oppia to 16px, though
    this will scale depending on the user's font-size preferences set via
    their browser preferences.
  */
  font-size: 1.6em;
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
}

legend {
  border-bottom: 1px solid #e5e5e5;
  font-size: 21px;
  margin-bottom: 20px;
}

.form-control {
  font-size: 14px;
  min-height: 35px;
  padding: 6px 12px 6px 12px;
}

.form-group select {
  margin-right: 5px;
}

.d-xl-inline-flex {
  width: 100%;
}

.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}

.oppia-search-bar-dropdown-menu {
  width: 170px;
}
.oppia-skip-to-content {
  left: -10000px;
  padding: 6px;
  position: absolute;
  top: auto;
  transition-duration: 1s;
  transition-property: color left;
  transition-timing-function: ease-in;
  z-index: 99999;
}
.oppia-skip-to-content:active,
.oppia-skip-to-content:hover,
.oppia-skip-to-content:focus {
  background-color: #e8e7e3;
  border-bottom: 1px solid black;
  border-bottom-right-radius: 5px;
  border-right: 1px solid black;
  color: #23527e;
  height: auto;
  left: 0;
  position: absolute;
  transition-duration: .5s;
  transition-property: color left;
  transition-timing-function: ease-out;
  width: auto;
}

.oppia-stop-scroll {
  overflow-y: hidden;
}
/* According to the Angular documentation - https://docs.angularjs.org/api/ng/directive/ngCloak -
   the following rule needs to be added to the css file in order for ng-cloak to work.  */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

/* Select2 dropdown corners should not be rounded */
.select2-container .select2-choice,
.select2-container .select2-choice .select2-arrow {
  border-radius: 0;
}

/* Fix for Select2 to show full placeholder text */
.select2-selection--multiple .select2-search--inline .select2-search__field {
  width: auto !important;
}

.oppia-dashboard-container {
  margin: 0 auto 30px auto;
  max-width: 800px;
}

.oppia-learner-dashboard-icon {
  color: white;
  float: right;
  font-size: 19px;
  margin-left: -16px;
  position: relative;
  right: 13px;
  top: 13px;
  z-index: 10;
}

.oppia-dashboard-container .exp-private-text {
  color: #aaa;
  font-style: italic;
}

.oppia-activity-summary-tile.oppia-activity-playlist-tile {
  border-bottom: 1px solid #C0C0C0;
  height: 145px;
  margin: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .headroom {
    transition: transform 200ms linear;
    will-change: transform;
  }

  .headroom--pinned {
    transform: translateY(0%);
  }

  .headroom--unpinned {
    transform: translateY(-100%);
  }
}

h1 {
  color: #000;
  font-size: 2em;
}

h2 {
  color: #000;
  font-size: 1.5em;
  margin: .83em 0;
}

h3 {
  color: #222;
  font-size: 1.17em;
  font-weight: bold;
  line-height: 1.1;
  margin: 18px 0 18px 0;
}

a {
  color: #0844aa;
  cursor: pointer;
}

a:hover {
  color: #3f2c76;
}

a:focus {
  outline-style: none;
}

/* Change all the borders of an input to red when there is validation errors. */
input.ng-dirty.ng-invalid, md-input-group.md-default-theme input.ng-dirty.ng-invalid {
  border-color: #F44336;
}

::-webkit-input-placeholder {
  font-style: italic;
}
::-moz-placeholder {
  font-style: italic;
}
::-ms-input-placeholder {
  font-style: italic;
}

.oppia-issues-learner-action-table td,
.oppia-issues-learner-action-table th {
  border: 1px solid black;
}

/* Change the color of odd-numbered lines in a table. */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f0f0f0;
}

.oppia-form-error {
  color: red;
}

.oppia-serious-warning-text {
  color: red;
}

.oppia-disabled-contenteditable {
  background-color: #eee;
  cursor: not-allowed;
  opacity: 1;
  padding: 10px 5px;
}

p {
  line-height: 1.2;
  margin-bottom: 18px;
  text-align: start;
  word-spacing: 0;
  word-wrap: break-word;
}

p:last-child {
  margin: 0;
}

.oppia-long-text p {
  line-height: 1.4;
  /* The following should be the same as the line-height (1.4). */
  margin: 1.4em 0;
}
.oppia-dashboard-container a {
  color: black;
}
.oppia-activity-summary-tile a,
.oppia-activity-summary-tile-mobile a {
  color: inherit;
  text-decoration: none;
}
.oppia-footer-container a {
  color: #fff;
}
.oppia-sidebar-footer a {
  display: inline;
  margin-top: 5px;
  padding: 0 10px 0 0;
}
.open > a {
  outline: 0;
}
.oppia-share-dropdown-menu li > a {
  font-weight: bolder;
  padding: 10px;
  text-align: center;
}
.nav > li > a {
  display: block;
  padding: 10px 15px;
  position: relative;
}
.oppia-activity-summary-tile a:focus,
.oppia-activity-summary-tile-mobile a:focus {
  box-shadow: 0 6px 13px rgba(0,0,0,0.17), 0 4px 6px rgba(0,0,0,0.23);
}
.oppia-dashboard-container a:hover,
.oppia-dashboard-container a:active,
.oppia-dashboard-container a:visited {
  color: black;
}
.oppia-activity-summary-tile a:hover,
.oppia-activity-summary-tile-mobile a:hover,
.oppia-activity-summary-tile a:active,
.oppia-activity-summary-tile-mobile a:active,
.oppia-activity-summary-tile a:visited,
.oppia-activity-summary-tile-mobile a:visited {
  color: inherit;
  text-decoration: none;
}

.oppia-sidebar-footer a:hover {
  background: none;
}

.oppia-navbar-nav .open > a {
  background-color: #fff;
  color: #009688;
}
.oppia-dashboard-container a:hover {
  text-decoration: underline;
}

.oppia-navbar-tabs > li:hover > a {
  background-color: #fff;
  color: #009688;
}
.oppia-activity-summary-tile span {
  vertical-align: middle;
}

/* This will prevent the enlargement of the text in the RTE. A span tag gets
   introduced when a user selects the text from the end of first line, goes to the
   second one and then writes some text to replace that. The span tag carries
   along with it a style=font-size:1.6em;, due to which the text is enlarged.
   This size seems to be taken from the font-size from the body element's
   CSS class, but we do not know what JS code is causing it to be inlined in the
   span tag. There is as such no way to remove !important as of now, it's a
   CKEditor bug (issue #6206 on Oppia). */
.oppia-rte p span {
  font-size: 1em !important;
}

.oppia-rte-editor {
  border: none;
  outline: none;
}

.oppia-rte-editor p span {
  font-size: 1em !important;
}

.oppia-rte p {
  line-height: 1.2;
  margin-bottom: 18px;
  margin-top: 0px;
}

.oppia-rte ol, .oppia-rte ul, .oppia-rte-editor ol, .oppia-rte-editor ul {
  line-height: 1.846;
  margin-bottom: 18px;
}

.oppia-long-text-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

.label, .badge {
  margin: auto 4px;
}
.label-default, .badge-default {
  background-color: #888;
}
.label-info, .badge-info {
  background-color: #18447E;
}
.label-success, .badge-success {
  background-color: #009688;
}

/*
  The following rule ensures that, as the viewport gets
  smaller, any media will scale down according to its
  container's width.
*/
img, video, canvas {
  max-width: 100%;
}

textarea {
  width: 90%;
}

/*
  Styles for the development mode indicator
*/
.oppia-dev-mode {
  background-color: DarkSlateGray;
  border-bottom-right-radius: 0.5em;
  border-top-right-radius: 0.5em;
  bottom: 100px;
  color: white;
  left: 0;
  opacity: 0.85;
  padding: 4px 8px;
  /* This allows clicks to 'pass through' the element. */
  pointer-events: none;
  position: fixed;
  z-index: 100;
}

/*
  Styles for BackgroundMaskService.
*/
.oppia-background-mask {
  background: rgba(0,0,0,0.33);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 30;
}

/*
  Styles for the global navigation sidebar menu.
*/
.oppia-base-container {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  position: relative;
}

/*
  Style for the oppia reload symbol in reload image button.
*/
.oppia-reload-image-symbol {
  padding-bottom: 10px;
  padding-left: 16px;
  position: relative;
}

/*
  Note that adding "overflow-y: scroll;" will break infinite scrolling in the
  search results page.
*/
.oppia-content-container {
  height: 100%;
  left: 0;
  position: relative;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.oppia-correctness-label-editor {
  margin-left: 4px;
  margin-top: 18px;
}
.oppia-sidebar-menu-open .oppia-sidebar-menu {
  box-shadow: 1px 0 3px rgba(0,0,0,0.12), 1px 0 2px rgba(0,0,0,0.24);
  height: 110vh;
  overflow-y: scroll;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.oppia-sidebar-menu-open .oppia-sidebar-menu::after {
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  width: 0;
}

.oppia-sidebar-menu-open .oppia-content-container::after {
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 100%;
}
.oppia-sidebar-menu-closed .oppia-content-container::after {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.oppia-sidebar-logo {
  height: 32px;
  margin-bottom: 5px;
  margin-left: 15px;
}

.oppia-sidebar-footer {
  bottom: 10px;
  color: #777;
  left: 25px;
  position: absolute;
}

.oppia-sidebar-footer div {
  margin-bottom: 10px;
}

.oppia-footer {
  background-color: #094142;
  bottom: 0;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  position: relative;
  width: 100%;
}

.oppia-footer-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 30px 80px;
}

.oppia-navbar-nav {
  float: left;
}
.nav-link {
  display: block;
  font-size: 14px;
  position: relative;
}
.oppia-navbar-nav > .nav-link {
  padding: 10px 5px;
}
.oppia-same-row-container {
  float: left;
}
.oppia-navbar-dropdown .nav-link {
  color: #009688;
}
.modal-body .nav-link {
  color: #00609C;
  font-size: 16px;
  font-weight: bold;
}
.oppia-navbar-dropdown .nav-link:hover {
  color: #888;
}

.input-group-addon.oppia-search-bar-icon {
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  padding: 7px 12px;
  text-align: center;
}
.oppia-help-dropdown .uib-popover {
  color: white;
  font-size: 14px;
  max-width: 200px;
  text-align: center;
}
.oppia-help-dropdown .popover-inner {
  max-width: 140px;
}
/*
  Styles for footer
*/

.oppia-footer-container h4 {
  font-size: 1em;
  font-weight: bold;
  margin: 1.33em 0;
  text-transform: uppercase;
}

.oppia-footer-container ul {
  padding-left: 0;
}

.oppia-footer-container li {
  list-style-position: inside;
  list-style-type: none;
}

.oppia-language-selector:focus {
  outline: 1px dotted #FFF;
  outline: auto 5px -webkit-focus-ring-color;
}
.oppia-footer-padding {
  height: 198px;
}

.oppia-footer-padding-below-banner {
  height: 300px;
}

@media (max-width: 768px) {
  .oppia-footer-padding {
    height: 554px;
  }
  .oppia-footer-container {
    padding: 30px;
  }

}
@media only screen and (min-width: 700px) and (max-width: 768px) {
  .oppia-footer-padding-below-banner {
    height: 270px;
  }
}
@media (max-width: 440px) {
  .oppia-footer-padding-below-banner {
    height: 270px;
  }
}
/*
  This is needed for proper display of tabs. See
  https://github.com/angular-ui/bootstrap/commit/8620aedba99b05822311
*/
.navbar-nav, .uib-pagination {
  cursor: pointer;
}

.navbar {
  border: 0;
  margin-bottom: 0;
  padding: 0;
  width: 100%;
}
.navbar-form {
  padding-left: 15px;
}

.nav {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.nav > li {
  display: block;
  position: relative;
}

.dropdown-menu {
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  font-size: 14px;
  margin: 2px 0 0;
  max-width: 220px;
  min-width: 160px;
  padding: 5px 0;
}

.open > .dropdown-menu {
  display: block;
}

.float-right > .dropdown-menu {
  left: auto;
  right: 0;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: transparent;
}
.oppia-navbar-profile-picture-container .caret {
  margin: 4px;
  margin-left: 10px;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-bottom: 4px solid;
  border-top: 0;
  content: "";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  bottom: 100%;
  margin-bottom: 2px;
  top: auto;
}
.nav-item {
  display: block;
  position: relative;
}

.nav-link.dropdown-item {
  padding: 3px 20px 2px 20px;
}
.navbar-nav.oppia-navbar-nav .nav-link {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  height: 56px;
  padding-top: 13px;
}
.navbar-light .navbar-nav .nav-link {
  color: white;
  text-align: center;
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: white;
  text-align: center;
}
.navbar-light .navbar-nav .nav-link:focus {
  color: white;
}
.navbar-light .navbar-nav .nav-link:hover {
  background-color: white;
  color: #06b9ac;
}
.navbar-fixed-top,.navbar-fixed-bottom {
  left: 0;
  position: fixed;
  right: 0;
  z-index: 1030;
}
.navbar-fixed-top {
  border-width: 0 0 1px;
  top: 0;
}
.navbar-fixed-bottom {
  border-width: 1px 0 0;
  bottom: 0;
  margin-bottom: 0;

}
.oppia-navbar-breadcrumb {
  color: #fff;
  cursor: default;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 20px;
  padding-top: 13px;
}

.oppia-navbar-breadcrumb-separator {
  margin-right: 8px;
}
.oppia-navbar-breadcrumb-separator:after {
  content: ">";
}

.oppia-navbar-breadcrumb-icon {
  height: 20px;
  margin: 0 12px 4px 12px;
  width: 20px;
}

.oppia-activity-summary-tile.oppia-dashboard-collection-tile a:hover {
  text-decoration: none;
}

.navbar-collapse {
  align-items: unset;
}

.navbar-light .navbar-container {
  background: #00645C;
  height: 56px;
  width: 100%;
}

.navbar-light .uib-dropdown-menu {
  background: #fff;
  margin-top: 0;
}

/* In Bootstrap, the link at the top of the default dropdown menu cannot be
   clicked -- so, in such cases (e.g. for the 'Sign in' link at the top right),
   we use this instead.
*/

.oppia-top-right-menu-item-separator {
  margin-bottom: 5px;
  margin-top: 5px;
  min-width: 160px;
}

.oppia-share-dropdown-menu {
  min-width: 30px;
  width: 46px;
}

.oppia-share-dropdown-menu:hover .oppia-share-dropdown-toggle {
  background-color: white;
  color: #009688;
}

.oppia-navbar-nav .uib-dropdown-menu {
  left: auto;
  right: 0;
  white-space: normal;
  word-wrap: break-word;
}

.oppia-dropdown-submenu > .uib-dropdown-menu {
  -moz-border-radius: 0 6px 6px;
  -webkit-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
  left: 100%;
  margin-left: -1px;
  margin-top: -6px;
  top: 0;
}
.oppia-dropdown-submenu:hover > .uib-dropdown-menu {
  display: block;
}
.oppia-dropdown-submenu.float-left > .uib-dropdown-menu {
  -moz-border-radius: 6px 0 6px 6px;
  -webkit-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
  left: -100%;
  margin-left: 10px;
}
.nav .uib-dropdown:hover > .uib-dropdown-menu {
  border: none;
}

@media(max-width: 768px) {
  .oppia-navbar-breadcrumb > li, .oppia-navbar-breadcrumb {
    float: left;
  }
  .oppia-navbar-breadcrumb {
    margin-left: 5px;
    margin-top: 0;
  }
  ul.nav.navbar-nav.oppia-navbar-nav.float-right {
    display: flex;
    float: right;
    margin: 0;
  }
}

@media(max-width: 600px) {
  .oppia-navbar-breadcrumb {
    margin-top: 3px;
  }
}

/* Show the navbar submenu dropdowns on-hover rather than on-click, if the
   screen size is large enough. */
@media (min-width: 768px) {
  .nav .uib-dropdown:hover > .uib-dropdown-menu {
    display: block;
  }
  .nav .uib-dropdown:hover > .uib-dropdown-menu > li > a {
    color: #009688;
  }
  .nav .uib-dropdown:hover > .uib-dropdown-menu > li > a:hover {
    background-color: #eee;
    color: #888;
  }
}

.oppia-main-content {
  margin: 10px;
  padding: 10px;
  width: 100%;
}

#oppia-main-content:focus {
  outline: 0;
}

.oppia-align-center {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.oppia-exploration-ctrl {
  margin: 15px 0;
}

.oppia-loading-fullpage {
  border: 1px;
  border-radius: 5px;
  font-size: 2em;
  height: 100%;
  position: fixed;
  top: 35%;
  width: 100%;
  z-index: 1000;
}
.oppia-loading-dot-one {
  -moz-animation: dot 1.5s infinite;
  -webkit-animation: dot 1.5s infinite;
  animation: dot 1.5s infinite;
  -moz-animation-delay: 0.0s;
  -webkit-animation-delay: 0.0s;
  animation-delay: 0.0s;
  opacity: 0;
}
.oppia-loading-dot-two {
  -moz-animation: dot 1.5s infinite;
  -webkit-animation: dot 1.5s infinite;
  animation: dot 1.5s infinite;
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  opacity: 0;
}
.oppia-loading-dot-three {
  -moz-animation: dot 1.5s infinite;
  -webkit-animation: dot 1.5s infinite;
  animation: dot 1.5s infinite;
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  opacity: 0;
}

.oppia-navbar-button-container {
  border-radius: 0;
  margin-top: 10px;
}
/* In Bootstrap, white-space for dropdown list is no-wrap. Use this instead
   to align ticks and dropdown options.
*/
.navbar-collapse > ul {
  float: right;
}

@media (max-width: 767px) {
  .oppia-navbar-hide-on-small-width {
    display: none;
  }
}
@media (max-width: 1023px) {
  div.navbar-container .oppia-navbar-hide-on-medium-width {
    display: none;
  }
}

.btn.oppia-unresolved-answer-button {
  background-color: white;
  border-radius: 12px;
  color: black;
  font-size: 14px;
  margin: 4px;
  padding: 8px 18px;
  text-align: left;
  width: auto;
}

.btn.oppia-unresolved-answer-button:hover {
  background-color: #eee;
}

.oppia-exp-summary-tiles-container {
  display: block;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 928px;
  min-height: 300px;
  padding-bottom: 24px;
  padding-top: 24px;
  width: 100vw;
}

/* Ensure that the summary tiles tiles remain centered. Note that these values
   would need to be updated if the summary tiles are changed. */
@media (max-width: 844px) {
  .oppia-exp-summary-tiles-container {
    margin-left: 5vw;
    margin-right: 5vw;
    max-width: 89vw;
    width: initial;
  }
}
@media (max-width: 632px) {
  .oppia-exp-summary-tiles-container {
    margin-left: 2vw;
    margin-right: 2vw;
    max-width: 96vw;
  }
}

.oppia-story-tile {
  display: block;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  min-height: 300px;
  width: 100vw;
}

.oppia-input-box-subtitle {
  color: #595959;
  font-size: 0.79em;
}

.oppia-fractions-landing-page-generic-title {
  color: inherit;
  font-weight: 500;
  line-height: 1.1;
}

.oppia-fractions-landing-page-bubble {
  background-color: #fdfdfd;
  border: #faebcc solid 1px;
  border-color: rgb(250, 235, 204);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border-width: 1px;
  font-size: 15px;
  height: 120px;
  padding: 20px;
  position: relative;
  width: 250px;
}

.oppia-fractions-landing-page-pointer {
  border-color: transparent #fdfdfd;
  border-style: solid;
  border-width: 13px 28px 13px 0;
  content: '';
  display: block;
  left: -28px;
  margin-top: -13px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 1;
}

.oppia-dashboard-aggregated-stats {
  padding-top: 55px;
}

.oppia-dashboard-aggregated-stats md-card {
  background: #fff;
  margin: 0 7.5px 70px 7.5px;
  padding: 8px;
}
.stats-card h1 {
  margin-bottom: 24px;
}

.oppia-dashboard-aggregated-stats .stats-card {
  border-right: 1px solid #bbb;
  margin: 10px 0;
  padding-left: 35px;
  width: 50%;
}
.oppia-dashboard-aggregated-stats .stats-card:last-child {
  border: none;
}

.stats-card p {
  color: #555;
}

.stats-card .stat-value {
  margin: 2px 0;
}

span.sort-explorations-select {
  display: inline-block;
  margin-right: auto;
  width: auto;
}

span.sort-explorations-select .sort-by-text,
span.sort-explorations-select .sort-options,
span.sort-explorations-select .sort-order {
  display: inline-block;
}

span.sort-explorations-select .sort-by-text {
  margin: 8px 8px 0;
}

span.sort-explorations-select .sort-options {
  background: #fff;
  border-color: #ddd;
  height: 32px;
  margin: 7px 7px 0 0;
}

span.sort-explorations-select .sort-order {
  cursor: pointer;
  margin: 14px 8px 0 0;
}

/* Rules for the tiles in the creator dashboard. */

.oppia-dashboard-intro-button {
  background-color: #015c53;
  border-radius: 0;
  color: #fff;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 14px;
  margin-top: 10px;
  text-transform: uppercase;
  width: 200px;
}
.oppia-dashboard-intro-button:hover,
.oppia-dashboard-intro-button:focus,
.oppia-dashboard-intro-button:active {
  background-color: rgba(5, 190, 178, 1);
  color: #fff;
}

md-card.oppia-dashboard-tile {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  color: #888;
  height: 120px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.oppia-dashboard-tile:hover {
  background-color: #f9f9f9;
}

.oppia-dashboard-tile-container-link {
  height: 100%;
  width: 100%;
}

.oppia-dashboard-tile-contents {
  height: 100%;
  padding: 23px 58px;
  width: 100%;
}
.oppia-dashboard-tile-contents:hover {
  text-decoration: none;
}

.oppia-dashboard-tile-image-container {
  height: 120px;
  left: 0;
  top: 0;
  width: 120px;
}
/* This centers the image horizontally and vertically. */
.oppia-dashboard-tile-image {
  height: 120px;
  width: 120px;
}
.oppia-dashboard-tile-image-private {
  opacity: 0.2;
}
.oppia-dashboard-tile-details {
  padding-left: 100px;
  padding-top: 5px;
}
.oppia-dashboard-tile-first-row {
  margin-bottom: 8px;
}
.oppia-dashboard-tile-title {
  color: #333;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-weight: bold;
}
@media (max-width: 365px) {
  .oppia-dashboard-tile-image-container {
    display: none;
  }
  .oppia-dashboard-tile-details {
    padding-left: 0;
  }
}

.oppia-dashboard-tile-second-row {
  color: rgba(0,0,0,0.65);
  font-size: 0.9em;
}

.oppia-signup-page-title {
  color: #222;
  font-size: 1.6em;
  margin: 0 0 30px 0;
}

.oppia-content {
  margin: 0 auto;
  max-width: 630px;
  -webkit-overflow-scrolling: touch;
  width: 80%;
}

.oppia-toast-container {
  position: fixed;
  z-index: 1000;
}

.oppia-toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.oppia-toast {
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  margin: auto;
  margin-top: 5px;
  opacity: 0.8;
  overflow: hidden;
  padding: 15px 15px 15px 50px;
  position: relative;
  top: 60px;
  width: 500px;
}
.oppia-toast-container > :hover {
  -moz-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;
  box-shadow: 0 0 12px #000000;
  cursor: pointer;
  opacity: 1;
}
.oppia-toast:before {
  align-items: center;
  bottom: 0;
  color: #FFFFFF;
  display: flex;
  float: left;
  font-family: 'Material Icons', sans-serif;
  font-size: 24px;
  margin: auto 5px auto -37px;
  position: absolute;
  top: 0;
}
.toast-warning:before {
  content: "\e002";
}

@media all and (max-width: 240px) {
  .oppia-toast {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .oppia-toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  .oppia-toast {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .oppia-toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  .oppia-toast {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

.oppia-form input.ng-invalid.ng-dirty {
  border: 2px solid #FA787E;
}

.oppia-help {
  height: 16px;
  width: 16px;
}

.oppia-main-body {
  height: 100%;
  margin: 0 auto;
  min-height: 100%;
}

.oppia-wide-panel {
  border: 1px solid #dde0FF;
  border-radius: 20px;
  width: 100%;
}

.oppia-error-wide-container {
  margin-bottom: 30px;
}

.oppia-wide-panel-content {
  font-size: large;
  margin: 5px auto;
  min-height: 400px;
  padding: 20px;
}

.oppia-placeholder {
  color: #707070;
  font-style: italic;
}

.oppia-save-draft-button.btn-success,
.oppia-save-changes-button.btn-success,
.oppia-editor-publish-button.btn-success {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}
.oppia-save-draft-button.btn-success:hover,
.oppia-save-changes-button.btn-success:hover,
.oppia-editor-publish-button.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  color: #fff;
}

.oppia-save-draft-button, .oppia-editor-publish-button {
  height: 34px;
}

.oppia-save-changes-button, .oppia-editor-publish-button {
  height: 34px;
}

@media(max-width: 1099px) {
  .oppia-editor-publish-button,
  .oppia-save-draft-button,
  .oppia-save-changes-button {
    padding-bottom: 3px;
  }
}

@media(min-width: 1100px) {
  .material-icons.oppia-save-publish-button-icon,
  .oppia-save-publish-loading.oppia-save-publish-button-icon {
    display: none;
  }

  .oppia-editor-publish-button,
  .oppia-save-draft-button,
  .oppia-save-changes-button {
    padding-bottom: 6px;
  }
}

.oppia-save-publish-loading.oppia-save-publish-button-icon {
  font-size: 30px;
  font-style: normal;
  letter-spacing: -4px;
  line-height: 14px;
  text-align: center;
}

@media(max-width: 1099px) {
  .oppia-save-publish-button-label {
    display: none;
  }
}

.oppia-state-name-container {
  background: #eee;
  border-bottom-left-radius: 5px;
  margin: 2px 7px;
  padding: 6px;
}

.oppia-editor-page-container {
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .oppia-editor-page-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.oppia-editor-header {
  font-size: 16px;
  margin-top: 35px;
}

.oppia-editor-cards-container {
  margin: auto;
  max-width: 700px;
}
.oppia-editor-card-with-avatar {
  background: rgb(255,255,255);
  margin: 20px auto 0 auto;
  max-width: 700px;
  padding: 0;
}

.oppia-editor-card-avatar {
  height: 36px;
  left: -18px;
  position: absolute;
  top: 28px;
  width: 36px;
}

.oppia-editor-card {
  background: rgb(255,255,255);
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  max-width: 800px;
  padding: 32px;
  padding-bottom: 40px;
}

.oppia-editor-avatar {
  height: 24px;
  left: -43px;
  position: absolute;
  width: 24px;
}

.pop-over-text p {
  line-height: 1.846;
}

.popover p, #pop-over-text {
  font-size: 14px;
  line-height: 1.5;
  padding: 0 12px 0 12px;
}

pre.oppia-pre-wrapped-text {
  white-space: pre-wrap;
}

.oppia-editor-card-body {
  position: relative;
}
.oppia-editor-card-body h3 {
  font-size: 1.8em;
  margin: 0;
}
.oppia-editor-card-body form {
  margin: 0;
}

.oppia-editor-card-section-container {
  background: rgba(5,140,166,0.1);
  padding-bottom: 1px;
}

.oppia-editor-card-section {
  padding: 20px 50px 20px 35px;
  word-wrap: break-word;
}

.oppia-state-content {
  min-height: 20px;
  padding: 5px 0 15px 10px;
}

.oppia-state-content-display, .oppia-param-changes-display {
  max-width: 610px;
  text-align: left;
}

.oppia-about-static-content p {
  margin: 1.5em 0;
}
.oppia-static-content p {
  line-height: 1.84;
  margin: 1.5em 0;
}

.oppia-info-card-content p {
  display: block;
  font-size: 1.0em;
  line-height: 1;
  padding: 12px 0 24px 0;
  position: relative;
  word-spacing: 0;
}

/* Bootstrap overides of buttons */
.btn {
  border-radius: 4px;
  font-size: 14px;
  padding: 6px 12px 6px 12px;
}
.btn-sm, .btn-group-sm > .btn {
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px;
}
.btn-lg, .btn-group-lg > .btn {
  border-radius: 6px;
  font-size: 18px;
  line-height: 1.3333333;
  padding: 10px 16px;
}
.btn-group > .btn + .dropdown-toggle {
  padding: 6px 6px 6px 3px;
}
.btn.oppia-navbar-button {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
  color: rgba(255,255,255,1.0);
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 14px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 6px 12px 6px 12px;
  text-transform: uppercase;
}
.btn.oppia-navbar-button:hover,
.btn.oppia-navbar-button:focus {
  background-color: rgba(5, 190, 178, 1);
  color: rgba(255,255,255,1);
}
.btn:focus, .btn:active:focus {
  outline: 0;
}
.skipBtn {
  height: 25px;
  width: 50px;
}
.btn-secondary {
  background-color: #fff;
  border-color: #ccc;
  color: #333;
}
.btn-secondary:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333;
}
.btn-secondary.disabled, .btn-secondary:disabled {
  background-color: #fff;
  border-color: #ccc;
  color: rgb(51, 51, 51);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333;
}
.btn-primary {
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #fff
}
.oppia-back-arrow > .btn-sm {
  padding: 1px 5px 1px 5px;
}
.btn-primary:hover {
  background-color: #286090;
  border-color: #204d74
}

/* Bootstrap override for popovers & tooltip */
.oppia-help-dropdown .uib-popover.bottom > .arrow {
  border-bottom-color: #000;
}
.oppia-help-dropdown .uib-popover.bottom > .arrow:after {
  border-bottom-color: #000;
}

.toast {
  background-color: #F89406;
  font-size: 16px;
  max-width: 550px;
}

.toast-success {
  background-color: #28a745;
}

.toast-info {
  background-color: #337ab7;
}

.tooltip {
  font-size: 12px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip-arrow {
  border-color: transparent;
  border-style: solid;
  height: 0;
  position: absolute;
  width: 0;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #000;
  border-width: 0 5px 5px;
  left: 50%;
  margin-left: -5px;
  top: 0;
}

/* Line-height is set to 1.846 to ensure that the line-spacing inside
   a paragraph is consistent both in the editor mode while editing and
   after saving. The value 1.846 came from
   /third_party/generated/css/third_party.css.
*/

.oppia-rte-editor > p, .oppia-rte-viewer > p {
  line-height: 1.846;
}

.oppia-rte-content > div > p {
  line-height: 1.846;
}

.oppia-shadow-preview-card .oppia-rte-viewer > p {
  line-height: 1.846;
}

/* Add inter-paragraph spacing to the ng-joyride tutorial contents. */
.popover-content {
  padding: 10px;
}
.popover.ng-joyride {
  padding: 1px;
  width: 245px;
}
.popover.ng-joyride .col-md-8 {
  padding: 0;
}
.popover.ng-joyride .col-md-8 > div {
  float: left !important;
}
.pop-over-text.joyride-popover-text {
  font-size: 14px;
}
.ng-joyride .popover-content p {
  margin-top: 10px;
}

.popover-body.container-fluid {
  padding: 10px;
}
.popover-content .md-button, .md-button[disabled] {
  font-size: 13px;
}
/* The eight rules below should be in sync. */
.oppia-rte-editor > p:first-child {
  margin-top: 0;
}
.oppia-rte-editor > p:last-child {
  margin-bottom: 0;
}

.oppia-rte-viewer > p:first-child {
  margin-top: 0;
}
.oppia-rte-viewer > p:last-child {
  margin-bottom: 0;
}

.oppia-rte p:last-child {
  margin: 0px;
}

.oppia-shadow-preview-card .oppia-rte-viewer > p:first-child {
  margin-top: 0;
}
.oppia-shadow-preview-card .oppia-rte-viewer > p:last-child {
  margin-bottom: 0;
}

.form-control.oppia-rte-content > div > p:first-child {
  margin-top: 0;
}
.form-control.oppia-rte-content > div > p:last-child {
  margin-bottom: 0;
}

.oppia-rte-viewer, .oppia-shadow-preview-card .oppia-rte-viewer {
  border-radius: 2px;
  display: inline-block;
  max-width: 100%;
  position: relative;
  text-align: left;
}

.oppia-prevent-selection {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.oppia-save-state-item-button {
  margin-left: 5px;
}

.oppia-editable-section {
  cursor: pointer;
  position: relative;
}

/* this classes below are used to graymask
 * outcome section when one hovers and
 * editable section when one hovers over them
 */

.oppia-editable-section .oppia-rule-preview-section-mask,
.oppia-editable-section .oppia-editable-section-mask {
  background-color: #eee;
  bottom: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.oppia-editable-section:hover .oppia-rule-preview-section-mask,
.oppia-editable-section:hover .oppia-editable-section-mask {
  border-radius: 4px;
  opacity: 0.4;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.oppia-interaction-preview {
  height: 100%;
  opacity: 0.5;
  padding: 4px;
  position: absolute;
  width: 100%;
}

.oppia-editable-section:hover .oppia-interaction-preview {
  background: rgba(5, 140, 166, 0.5);
  border-radius: 4px;
  /* The z-index value of leaflet map zoom control is 1000, to make it go lower
     in stack we have used 1001.
  */
  z-index: 1001;
}

.oppia-editor-edit-icon {
  font-size: 16px;
  opacity: 0.2;
  position: absolute;
  right: -22px;
  top: 3px;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.oppia-editable-section:hover .oppia-editor-edit-icon {
  opacity: 0.8;
}

.oppia-click-to-start-editing {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 50;
}

.oppia-clear {
  clear: both;
}

.oppia-form-error-text {
  color: #ff0000;
  font-size: smaller;
}

.oppia-editor-trash-icon {
  opacity: 0.2;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.oppia-editor-trash-icon:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* Styles for the state graph vizualization. */

.oppia-state-graph-container,
.oppia-translation-state-graph-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 400px;
  overflow-y: hidden;
  position: relative;
}

.oppia-state-graph-animate-show {
  opacity: 1;
}
.oppia-state-graph-animate-show.ng-hide-add, .oppia-state-graph-animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}
.oppia-state-graph-animate-show.ng-hide {
  opacity: 0;
}

/* Styles for the loading indicator or try again shown while image is loading or failed to load respectively */
.oppia-image-container {
  align-items: center;
  background-color: rgba(224,242,241,1);
  display: flex;
}

/* Style to center an element */
.center-element-horizontally {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Styles for the exploration learner view */

.oppia-learner-view-card-top-section {
  padding: 0 20px;
  position: relative;
}

.oppia-learner-view-card {
  background: #fff;
  border-radius: 2px;
  max-width: 100vw;
  padding-bottom: 18px;
  padding-left: 0;
  padding-top: 20px;
  text-align: left;
}

.oppia-learner-view-card-top-content {
  background-color: rgba(224,242,241,1);
  border-top-left-radius: 0;
  margin-bottom: 12px;
  padding: 12px;
  width: 100%;
}

.oppia-learner-view-card-content {
  word-wrap: break-word;
}

/* Styles for the collections learner view */

.oppia-collection-player-tiles-container {
  height: 100%;
  margin: 0 auto;
  max-width: 975px;
  min-height: 500px;
  padding-bottom: 25px;
  padding-top: 30px;
  position: relative;
}

.oppia-story-player-tiles-container {
  height: 100%;
  margin: 0 auto;
  max-width: 975px;
  min-height: 500px;
  padding-bottom: 25px;
  padding-top: 30px;
  position: relative;
}

.oppia-page-heading {
  margin-bottom: 5px;
}
.oppia-collection-player-tiles-container .oppia-page-heading {
  color: #005048;
  text-align: center;
  width: 100%;
}

.oppia-story-player-tiles-container .oppia-page-heading {
  color: #005048;
  text-align: center;
  width: 100%;
}

.oppia-collection-player-tile-section {
  margin-bottom: 24px;
}

.oppia-collection-player-small-text {
  color: #005048;
  font-size: 1em;
  font-style: italic;
  margin-bottom: 6px;
  margin-top: 12px;
}

.oppia-collection-player-title-font {
  font-family: Capriola, Roboto, Arial, sans-serif;
  font-size: 45px;
}

/* Styles for the statistics page. */

.oppia-back-arrow {
  float: left;
  margin-right: 5px;
}

.oppia-add-interaction-button,
.oppia-add-response-button,
.oppia-add-fallback-button,
.oppia-add-hint-button {
  background-color: #008098;
  border: 0;
  border-radius: 2px;
  color: #FFF;
  font-weight: bold;
  padding: 7px 15px;
}

.oppia-add-interaction-button:active,
.oppia-add-interaction-button:focus,
.oppia-add-interaction-button:hover,
.oppia-add-response-button:active,
.oppia-add-response-button:focus,
.oppia-add-response-button:hover,
.oppia-add-fallback-button:active,
.oppia-add-fallback-button:focus,
.oppia-add-fallback-button:hover,
.oppia-add-hint-button:active,
.oppia-add-hint-button:focus,
.oppia-add-hint-button:hover {
  background-color: rgba(5,140,166,1);
  color: white;
  opacity: 1;
}

/* Workaround to ensure that single-line paragraphs comprising multiple-choice
   options are displayed inline. */
.oppia-interaction-tile {
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
  width: 20%;
}
@media screen and (max-width: 768px) {
  .oppia-interaction-tile {
    width: 42%;
  }
}
.oppia-interaction-tile:hover {
  outline: 2px solid #009688;
}
.oppia-interaction-tile-name {
  background-color: #E0F2F1;
  border: 1px solid #aaa;
  border-radius: 0 0 5px 5px;
  font-size: 15px;
  padding: 6px;
  position: relative;
  text-align: center;
}
.oppia-interaction-customization-label {
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 6px;
}

.oppia-small-delete-button {
  padding-top: 3px;
}

.oppia-delete-interaction-button,
.oppia-close-popover-button {
  background: none;
  border: 0;
  color: #000;
  cursor: pointer;
  height: 30px;
  opacity: 0.5;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
}
.oppia-delete-interaction-button:hover,
.oppia-close-popover-button:hover {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .oppia-delete-interaction-button {
    top: 60px;
  }
}
.oppia-close-popover-button:focus {
  outline: 1px dotted #212121;
  outline: auto 5px -webkit-focus-ring-color;
}

.nav-pills > li > a.oppia-rule-tab {
  background: rgba(0,0,0,0.05);
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  color: #444;
  padding: 7px 15px;
  width: 100%;
}
.nav-pills > li > a.oppia-rule-tab-disabled {
  cursor: default;
}
.nav-pills > li:hover > a.oppia-rule-tab {
  background: rgba(0,0,0,0.1);
}
.nav-pills > li:hover > a.oppia-rule-tab-disabled {
  background: rgba(0,0,0,0.05);
}
.nav-pills > li.active > a.oppia-rule-tab-active {
  background: rgba(5,140,166,0.1);
  border-right: 0;
  color: #333;
}

.oppia-default-rule-tab {
  border-left: 1px solid #ddd;
}

.oppia-rule-body-container {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.oppia-readonly-rule-tile {
  border-radius: 4px;
  margin-bottom: 0;
  margin-left: 0;
  padding: 4px;
}

.oppia-readonly-rule-tile img, .oppia-rule-tab img {
  max-height: 50px;
  object-fit: contain;
}

.oppia-rule-dest-link {
  margin-left: 5px;
  position: absolute;
  width: 400px;
  /* This must be larger than the z-index in
     .oppia-interactive-section-click-handler, so that the rule does not
     switch to edit mode when the destination link is clicked.
  */
  z-index: 200;
}

.oppia-rule-save-cancel-buttons {
  margin-bottom: 5px;
  margin-top: 2px;
}

.oppia-rule-block {
  background-color: white;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.oppia-rule-block.active {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  margin: -2px;
  position: relative;
  z-index: 100;
}

.oppia-rule-sort-handle, .oppia-fallback-sort-handle, .oppia-hint-sort-handle, .oppia-learner-playlist-sort-handle, .oppia-worked-example-sort-handle {
  cursor: move;
  left: 10px;
  margin-left: 5px;
  opacity: 1;
  position: absolute;
  top: 6px;
  width: 25px;
  /* This is needed for the sort handle to be above the rule tile. */
  z-index: 1;
}

.oppia-rule-header-warning-placement {
  left: -0.5em;
  position: absolute;
  top: 6px;
  z-index: 2;
}

.oppia-rule-header-warning-style {

  background-color: yellow;
  border: 1px solid black;
  color: firebrick;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  height: 22px;
  line-height: 22px;
  text-align: center;

  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 22px;
}

.oppia-rule-details-header {
  margin-bottom: 6px;
  width: 100%;
}

.about-tabs {
  margin-bottom: 0;
}

/* Styles for parameter labels. */
oppia-parameter {
  background-color: #18447E;
  border-radius: .25em;
  color: white;
  display: inline;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  margin: auto 4px;
  padding: .2em .6em .3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.oppia-tutorial-tooltip {
  min-width: 400px !important;
}

/* Hide the search icon in the rule destination dropdown. */
.oppia-rule-dest-select2 .select2-search input {
  background: none;
}

.oppia-dashboard-status-green {
  color: #009688;
  font-weight: bold;
  text-transform: capitalize;
}

.oppia-dashboard-status-grey {
  color: #888;
  text-transform: capitalize;
}

.oppia-dashboard-status-orange {
  color: #f7a541;
  font-weight: bold;
  text-transform: capitalize;
}

.oppia-dashboard-tile-metadata-parent {
  float: right;
  padding-top: 15px;
  width: 30%;
}

.oppia-dashboard-tile-metadata {
  border-left-color: #DADADA;
  border-left-style: ridge;
  border-left-width: thin;
  color: #888;
  font-size: 0.85em;
  height: 85px;
  margin-left: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.stat-block .heading-text span {
  float: right;
}

.stat-block .stat-block-values {
  background: #ddd;
  font-size: 0.9em;
  margin: 8px -18px -11px;
  padding: 10px 18px;
  word-wrap: break-word;
}

/* Bootstrap overides for modals */
.modal-header h3 {
  margin-bottom: 18.7px;
  margin-top: 18.7px;
}
.modal-header {
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px;
  padding: 15px;
}

.fade.in {
  opacity: 1;
}
.modal-backdrop.fade {
  opacity: .5;
}

@media(min-width: 768px) {
  .modal-content, .modal-dialog {
    min-width: 590px;
  }
}
.modal-content {
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
  outline: 0;
  position: relative;
}

.modal-body {
  padding: 15px;
  position: relative;
}
.oppia-large-modal-window .modal-dialog {
  max-width: 900px;
  width: 80%;
}

.oppia-modal-information-card .modal-dialog {
  margin: 100px auto;
  max-width: 35%;
  min-width: 200px;
  width: 400px;
}
.skill-select-modal .modal-xl {
  width: 1000px;
}
@media (min-width: 768px) {
  .skill-select-modal .modal-xl {
    margin: 1.75rem auto;
    width: 1000px;
  }
}

@media (max-width: 576px) {
  .skill-select-modal .modal-xl {
    margin: 1.75rem auto;
    max-width: 500px;
  }
}

.oppia-save-exploration-wide-modal .modal-dialog {
  max-width: 1200px;
  width: 90%;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
}

@media(min-width: 768px) {
  .modal-dialog {
    margin: 30px auto;
    width: 600px;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5)
  }
  .modal-sm {
    width: 300px
  }
}

@media(min-width: 1024px) {
  .modal-lg {
    width: 900px;
  }
}

.oppia-large-modal-window .modal-body {
  height: 60vh;
}

.oppia-version-mismatch-modal .oppia-content {
  max-height: 700px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.oppia-vcenter {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

.oppia-disabled-link {
  opacity: 0.6;
  pointer-events: none;
}

.oppia-disabled-image-link {
  pointer-events: none;
}

/* CSS3 Animations */
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.oppia-animate-spin {
  -webkit-animation-duration: 1000ms;
  -moz-animation-duration: 1000ms;
  -ms-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: spin;

  -moz-animation-name: spin;

  -ms-animation-name: spin;

  animation-name: spin;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

oppia-expression-error-tag {
  background-color: #d9534f;
  border-radius: .25em;
  color: white;
  display: inline;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  margin: auto 4px;
  padding: .2em .6em .3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}
oppia-expression-error-tag:after {
  content: "Expression parsing error!";
}

/* Adjust the z-index for the tutorial components so that they do not go
   above the navbar.
*/
.ng-joyride-element-static[data-original-title],
div.ng-joyride-title {
  z-index: 999;
}
.ng-joyride.uib-popover.sharp-borders {
  z-index: 1002;
}
div#ng-curtain {
  z-index: 997;
}

.oppia-navbar {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  cursor: default;
  height: 56px;
  left: -2%;
  padding-left: 2%;
  padding-right: 2%;
  position: fixed;
  width: 104%;
  /* This is larger than the editor tutorial's z-index, but smaller than
     the z-index for Bootstrap modals.
  */
  z-index: 1005;
}

.oppia-top-of-page-padding {
  /* This ensures that content is not tucked behind the fixed navbar. */
  height: 56px;
}

.oppia-navbar-brand-name {
  float: right;
  height: 56px;
  line-height: 20px;
  margin-left: -10px;
  padding: 0;
}

.oppia-logo {
  display: inline-block;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  height: 40px;
  margin-top: 8px;
}
.oppia-logo-wide {
  margin-left: 25px;
}
.oppia-logo-small {
  margin-left: 6px;
}

.oppia-navbar-back-button {
  color: white;
  padding: 6px;
}

.oppia-navbar-tabs {
  white-space: nowrap;
}
.nav, .oppia-navbar-tabs > li, .oppia-navbar-tabs > create-activity-button {
  vertical-align: top;
}

.oppia-clickable-navbar-element:hover {
  display: inline-block;
}
.navbar-header {
  /* Prevent whitespace from inline-block elements from adding space. */
  font-size: 0;
}
.nav-link.oppia-navbar-tab,
.nav-item > div.oppia-navbar-tab {
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 14px;
  padding: 17px 12px 10px 12px;
  text-transform: uppercase;
}
.oppia-option-list {
  display: block;
  vertical-align: initial;
}
.oppia-navbar-dropdown-toggle,
.oppia-navbar-tab {
  color: #fff;
  height: 56px;
  padding: 10px;
}

.oppia-navbar-dropdown-toggle:focus {
  background-color: #fff;
  color: #009688;
}

.oppia-navbar-dropdown {
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.oppia-navbar-profile-picture-container {
  margin-left: 10px;
  text-align: right;
}
.oppia-navbar-profile-picture {
  height: 32px;
  width: 32px;
}

.oppia-select {
  background: white;
  border: #ddd solid 1px;
  border-radius: 4px;
  color: #555;
  padding: 5px;
}

.oppia-editor-sidebar {
  max-width: 500px;
  padding: 7px 5px 0 5px;
  position: absolute;
  right: 15px;
  top: 28px;
  width: 100%;
}
.oppia-editor-sidebar uib-accordion .card {
  border-radius: 0;
}
.oppia-editor-sidebar uib-accordion .card .card-heading {
  background-color: #ddd;
  border-radius: 0;
  padding: 3px 10px;
}
.oppia-editor-sidebar uib-accordion .card .card-title {
  font-weight: bold;
}
.oppia-editor-sidebar uib-accordion .card .card-body {
  border-radius: 0;
  padding-right: 25px;
}
.oppia-editor-sidebar-section-header {
  background-color: #ddd;
  font-size: 0.75em;
  font-weight: bold;
  padding: 3px 10px;
}
.oppia-editor-sidebar-section-body {
  background-color: #fff;
  margin-bottom: 5px;
  padding: 0 10px;
  padding-right: 25px;
}

.oppia-editor-warnings-indicator {
  border-style: inset;
  border-width: 0 9px 14px 9px;
  bottom: 10px;
  font-size: 0.7em;
  font-weight: bold;
  height: 0;
  position: absolute;
  right: 5px;
  width: 0;
}
.oppia-editor-warnings-error-color {
  border-color: transparent transparent #FFCC00 transparent;
  color: #333;
}
.oppia-editor-warnings-critical-color {
  border-color: transparent transparent rgb(231,15,15) transparent;
  color: #fff;
}
.oppia-editor-warnings-count {
  margin-left: -3px;
}

.uib-dropdown-menu.oppia-editor-warnings-box {
  background: #fcf8e3;
  overflow: hidden;
}
.oppia-editor-warnings-header {
  font-size: 0.8em;
  font-weight: bold;
  margin: 0 5px;
}
.oppia-editor-warnings-text {
  font-size: 0.9em;
  padding: 2px 5px;
  width: 250px;
}
.oppia-editor-warnings-separator {
  margin: 0;
}

/* Adding multilevel submenu functionality to Bootstrap's dropdown
    See http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
*/
.oppia-dropdown-submenu {
  position: relative;
}

.oppia-dropdown-submenu > a:after {
  border-color: transparent;
  border-left-color: #ccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;
  height: 0;
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}

.oppia-dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}

.oppia-dropdown-submenu.float-left {
  float: none;
}

.oppia-page-cards-container {
  margin: auto;
  max-width: 95%;
  position: relative;
  width: 660px;
}

.oppia-page-card {
  background: rgb(255,255,255);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding: 30px 55px 30px 45px;
  position: relative;
}
.oppia-page-card li {
  margin-bottom: 10px;
}

.oppia-privacy-terms-anchor {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
}

/* Hide the 'Skip' icon on the editor tutorial. */
.skipBtn i {
  display: none;
}

.oppia-rating-star-active,
.oppia-rating-star:focus {
  color: #FFD700;
}

.oppia-transition-200 {
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

/* Styles for the feedback popover component in the learner view. */
.oppia-feedback-popover-submit-btn-enabled {
  color: #009688;
  font-size: 13px;
}

.oppia-rte-toolbar-image {
  padding-bottom: 8px;
  padding-top: 8px;
}

.ta-scroll-window.oppia-rte-content {
  width: 100%;
}

.ta-editor.form-control.oppia-rte-content, .ta-scroll-window.form-control.oppia-rte-content {
  font-family: inherit;
  font-size: 100%;
  height: auto;
  min-height: 80px;
  overflow: hidden;
}

.ta-editor .placeholder-text {
  color: #999;
  font-size: 0.9em;
}

.form-control.oppia-rte-content > .ta-bind {
  height: auto;
  min-height: 80px;
}

.form-control.oppia-rte-content img.block-element {
  display: block;
  margin: auto;
}

/* Styles for the editor training interfaces. */

.preview-conversation-skin-card-row-container {
  margin-bottom: 17px;
  table-layout: fixed;
  width: 100%;
}

.preview-conversation-skin-card-row {
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
}

.preview-conversation-skin-row-avatar {
  padding-right: 10px;
  width: 30px;
}

.preview-conversation-skin-row-avatar-img {
  height: 24px;
  max-width: 24px;
}

.preview-conversation-skin-oppia-content {
  padding-left: 15px;
  padding-top: 2px;
}

.preview-conversation-skin-learner-input {
  padding-left: 15px;
}

.oppia-profile-container md-card.md-default-theme {
  background-color: transparent;
}

md-card.preview-conversation-skin-inline-interaction {
  background-color: #f6f6f6;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: -20px auto;
  max-width: 560px;
}

md-card.preview-conversation-skin-supplemental-card {
  background-color: #f6f6f6;
  margin: -5px 0;
  max-width: 560px;
}

.preview-conversation-skin-supplemental-interaction {
  margin: 0 auto;
  max-width: 560px;
}

.trained-feedback-selection-form-container {
  margin-top: -5px;
  max-height: 250px;
  overflow-y: scroll;
}

.trained-feedback-selection-container {
  border-bottom: thin solid #EEEEEE;
  margin-bottom: 5px;
}

.oppia-settings-container .form-group > label {
  padding-left: 0;
  padding-right: 0;
}
.trained-feedback-selection-container md-input-group.md-default-theme label {
  border-bottom: 0;
}

.trained-feedback-selection {
  background: none;
  border: none;
  color: rgba(0,0,0,0.5);
  margin: 0;
  padding-left: 9px;
  padding-top: 9px;
  text-align: left;
  /* This is needed so that images stay bounded by the container in Firefox. */
  width: 100%;
}

.trained-feedback-selection:hover {
  color: #00897B;
}

.trained-feedback-selected {
  background: whitesmoke;
  border-radius: 5px;
  color: #00897B;
}

.oppia-share-publish-modal > .modal-header {
  align-items: center;
  flex-direction: column;
}
.oppia-modal-information-card .modal-dialog .modal-content {
  border-radius: 0;
  min-width: 200px;
}

.oppia-modal-information-card .modal-dialog .modal-content md-card {
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.oppia-improvement-task {
  background-color: #fff;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 32px 32px 24px 32px;
}

.oppia-improvement-closed-task {
  background-color: #dadada;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 32px 32px 24px 32px;
}

.oppia-improvement-task-header {
  display: flex;
  padding: 0 0 24px 0;
}

.oppia-improvement-closed-task-header {
  display: flex;
  padding: 0;
}

.oppia-improvement-task-header-title {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  padding-right: 32px;
}

.oppia-improvement-task-header-status-pill {
  flex-grow: 0;
  text-align: right;
}

.oppia-improvement-task-footer {
  padding: 24px 0 0 0;
  text-align: right;
}

.oppia-lost-changes > li {
  margin: 5px 0 5px 10px;
}

.oppia-lost-changes > li > .state-edit-desc {
  margin: 3px auto auto 25px;
}

.oppia-lost-changes > li .state-edit-desc .content > *,
.oppia-lost-changes > li .state-edit-desc .feedback > * {
  padding: 4px 0 0 20px;
}

.oppia-lost-changes > li > .state-edit-desc > .sub-edit {
  margin-left: 20px;
}
.oppia-about-tabs li {
  display: -webkit-flex;
  display: flex;
  margin-bottom: 0;
  width: -webkit-calc(100% / 3);
  width: -moz-calc(100% / 3);
  width: -o-calc(100% / 3);
  width: calc(100% / 3);
}
.oppia-about-teach-tabs ul li {
  width: -webkit-calc(100% / 2);
  width: -moz-calc(100% / 2);
  width: -o-calc(100% / 2);
  width: calc(100% / 2);
}
.oppia-info-card-content .card-metrics li {
  font-size: 14px;
  list-style-type: none;
  text-align: center;
}
.oppia-activity-summary-tile .metrics li,
.oppia-activity-summary-tile-mobile .metrics li {
  font-size: 0.75em;
  list-style-type: none;
  text-align: center;
}
.oppia-navbar-nav.oppia-navbar-profile > li:hover {
  background-color: #00645C
}
.oppia-activity-summary-tile.small-width .metrics li {
  display: block;
  font-size: 0.7em;
  text-align: left;
}
.oppia-lost-changes > li > .state-edit-desc > .rules-list > li {
  margin-left: 20px;
}

.oppia-info-card-title {
  bottom: 0;
  color: white;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  margin: 12px 0;
  padding: 0;
  position: absolute;
}

.oppia-info-card-bg-image {
  left: 50%;
  margin-right: -50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
}

.oppia-info-card-logo-thumbnail {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  padding: 20px;
  position: relative;
}

.oppia-info-card-content {
  padding: 10px 20px 10px 20px;
}

.oppia-info-card-content .card-metrics {
  margin-top: 10px;
  padding: 0;
}

.oppia-info-card-content .card-metrics li .far {
  font-size: 24px;
  margin-right: 5px;
  vertical-align: middle;
}
.oppia-info-card-bottom-row ul li a img {
  height: 20px;
  width: 20px;
}
.oppia-info-card-content .card-metrics ul img {
  height: 24px;
  margin-right: 2px;
  width: 24px;
}

.oppia-info-card-content .card-metrics ul li .oppia-contributors-circle {
  height: 20px;
  width: 20px;
}

.oppia-contributors-more-circle {
  background: #888;
  border-radius: 10%;
  color: #fff;
  height: 20px;
  min-width: 20px;
  width: auto;

}

.oppia-info-card-bottom-row {
  margin-top: 20px
}

.oppia-info-card-bottom-row md-chips md-chip {
  cursor: default;
  font-size: 12px;
  line-height: 1em;
  margin: 0;
  padding: 0;
}

.oppia-info-card-tooltip-more {
  color: blue;
}

/* This is necessary so that long usernames don't overflow the tooltip. */
.oppia-info-card-content .tooltip-inner {
  max-width: none;
}

.oppia-info-card-tag-icon {
  padding-top: 6px;
  width: 28px;
}

.oppia-info-card-exploration-contributors-profile {
  padding: 0;
}

.oppia-info-card-exploration-contributors-profile li a:focus .rounded-circle {
  outline: 1px dotted #212121;
  outline: auto 5px -webkit-focus-ring-color;
}

.oppia-info-card-community-editable-icon {
  color: #009688;
}

.oppia-suggestion-review-container {
  height: 350px;
  padding: 10px;
  width: 100%;
}

.oppia-suggestion-review-panel-container {
  height: 100%;
  width: 49%;
}

.oppia-suggestion-review-panel {
  border: 1px solid black;
  height: 100%;
  overflow: scroll;
  width: 100%;
}

.oppia-suggestion-review-error {
  color: red;
  margin-bottom: 10px;
  text-align: right;
  width: 100%;
}

/* New Splash page */

.oppia-splash-section-one {
  background-color: #afd2eb;
  overflow: hidden;
}

.oppia-splash-h1, .oppia-splash-h2 {
  color: #005c5e;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  padding-top: 1em;
}

.oppia-splash-h1 {
  margin: 0 auto;
  padding-bottom: 1em;
}

.oppia-splash-h2-container {
  margin: 0 auto;
  max-width: 900px;
}

.oppia-splash-h2 {
  line-height: 1.6em;
  margin: 0 auto;
  padding-bottom: 72px;
}

@media (min-width: 630px) {
  .oppia-splash-h1 {
    font-size: 3em;
  }
  .oppia-splash-h2 {
    font-size: 1.8em;
    padding-top: 130px;
  }
}
@media (max-width: 629px) {
  .oppia-splash-h1 {
    font-size: 2em;
  }
  .oppia-splash-h2 {
    font-size: 1.5em;
    padding-top: 80px;
  }
}

.oppia-splash-background-icon-row {
  margin-bottom: 0;
  margin-left: -webkit-calc((100% - 2700px) / 2);
  margin-left: -moz-calc((100% - 2700px) / 2);
  margin-left: -o-calc((100% - 2700px) / 2);
  margin-left: calc((100% - 2700px) / 2);
  margin-right: -webkit-calc((100% - 2700px) / 2);
  margin-right: -moz-calc((100% - 2700px) / 2);
  margin-right: -o-calc((100% - 2700px) / 2);
  margin-right: calc((100% - 2700px) / 2);
  margin-top: 0;
  position: relative;
  text-align: center;
  width: 2700px;
}

.oppia-splash-background-icon {
  margin: -1px;
  max-width: 96px;
  width: 10%;
}

.oppia-splash-books {
  left: 50%;
  position: absolute;
  top: 95px;
  z-index: 5;
}
@media (min-width: 630px) {
  .oppia-splash-books {
    margin-left: -300px;
    width: 600px;
  }
}
@media (max-width: 629px) {
  .oppia-splash-books {
    margin-left: -250px;
    width: 500px;
  }
}

.oppia-splash-section-two {
  color: #2c4841;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.oppia-splash-button {
  background-color: #015c53;
  border-radius: 0;
  color: #fff;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 16px;
  margin-top: -20px;
  min-width: 360px;
  padding: 10px;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.oppia-splash-button:hover,
.oppia-splash-button:focus,
.oppia-splash-button:active {
  background-color: rgba(5, 190, 178, 1);
  color: #fff;
}

@media only screen and (max-width: 500px) {
  button.btn.oppia-splash-button {
    font-size: 3.6vw;
  }
}

.oppia-splash-button-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  position: relative;
  transform: translate(-150px, 10px);
  width: 100%;
  z-index: 10;
}

@media (min-width: 768px) {
  .oppia-splash-button-browse {
    left: -webkit-calc(50% - 200px);
    left: -moz-calc(50% - 200px);
    left: -o-calc(50% - 200px);
    left: calc(50% - 200px);
  }
  .oppia-splash-button-create {
    /* Need double math to prevent issues with addition after minification.
      https://github.com/yui/yuicompressor/issues/59#issuecomment-35528166
    */
    left: -webkit-calc(50% - -200px);
    left: -moz-calc(50% - -200px);
    left: -o-calc(50% - -200px);
    left: calc(50% - -200px);
  }
  .oppia-splash-button-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    position: relative;
    transform: translate(-150px, 10px);
    width: 100%;
  }

  .oppia-splash-section-two-content {
    padding-top: 80px;
  }
}

@media (max-width: 768px) {
  .oppia-splash-button-browse {
    left: 50%;
  }
  .oppia-splash-button-create {
    left: 50%;
    margin-top: 50px;
  }
  .oppia-splash-button-container {
    max-width: none;
    position: absolute;
    transform: translate(0, 0);
    width: 100%;
    z-index: 10;
  }
  .oppia-splash-button-heading {
    left: -webkit-calc(-70px - -15%);
    left: -moz-calc(-70px - -15%);
    left: -o-calc(-70px - -15%);
    left: calc(-70px - -15%);
    position: relative;
  }

  .oppia-splash-section-two-content {
    padding-top: 160px;
  }
}

@media (min-width: 575px) {
  .oppia-splash-button {
    left: -webkit-calc(130px - -15%);
    left: -moz-calc(130px - -15%);
    left: -o-calc(130px - -15%);
    left: calc(130px - -15%);
  }
}

@media (max-width: 365px) {
  .oppia-splash-button {
    min-width: 95%;
  }
}

.oppia-splash-bullet {
  margin: 0 auto 80px;
  max-width: 900px;
  overflow: hidden;
  position: relative;
  width: 80%;
}

.oppia-splash-column {
  text-align: center;
}
.oppia-splash-bullet-block {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1.17em;
  line-height: 128%;
  margin-bottom: 10px;
  max-width: 500px;
  text-align: left;
  width: 100%;
}

@media (min-width: 610px) {
  .oppia-splash-bullet-block {
    display: inline-block;
    width: 48%;
  }

  .oppia-splash-block-left-image {
    float: left;
  }
  .oppia-splash-block-right-image {
    float: right;
  }

  .oppia-splash-block-left-text {
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .oppia-splash-block-right-text {
    float: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Styles for the popover on the exploration and collection summary tiles. */
.oppia-activity-summary-popover .uib-popover.right {
  bottom: -10px;
  min-width: 200px;
}
.oppia-activity-summary-popover .uib-popover.top {
  margin-top: 10px;
  /*
    This moves the base of the popover down to the second line of the
    objective. Unfortunately, the !important is needed here because the styles
    on the popover are set inline, so they override any CSS selectors in this
    file regardless of how specific they are.
  */
  top: 100px !important;
}
.oppia-activity-summary-popover .popover-content {
  padding: 8px 8px;
}
.oppia-activity-summary-popover .uib-popover {
  font-size: 14px;
  line-height: 1.42857143;
}

.oppia-activity-summary-tile {
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  cursor: pointer;
  display: inline-block;
  height: inherit;
  /*
    The margin setting is so that exploration summary tiles and collection
    summary tiles would be the same widths (214px).
  */
  margin: 8px 5.5px;
  padding: 0;
  position: relative;
  text-align: left;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  vertical-align: top;
  white-space: normal;
  width: 197px;
}

.oppia-activity-summary-tile-mobile {
  background-color: #fff;
  cursor: pointer;
  display: inline-block;
  height: inherit;
  margin: 8px 5.5px;
  padding: 0 0 20px 0;
  position: relative;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  width: 250px;
}

@media only screen and (max-width: 500px) {
  .oppia-activity-summary-tile {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.oppia-dashboard-container .oppia-highlighted-link,
.oppia-dashboard-container .oppia-highlighted-link:hover,
.oppia-dashboard-container .oppia-highlighted-link:active,
.oppia-dashboard-container .oppia-highlighted-link:visited {
  color: #009688;
}

.oppia-activity-summary-tile-mobile,
.oppia-activity-summary-tile-mobile .title-section {
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}
.oppia-activity-summary-tile:hover,
.oppia-activity-summary-tile-mobile:hover {
  /*
    This is based on the levels defined on the following page:
    https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.22sskepri
    Level 2 seemed too subtle, but level 3 seemed too strong. This line
    therefore tries to average both of them.
  */
  box-shadow: 0 6px 13px rgba(0,0,0,0.17), 0 4px 6px rgba(0,0,0,0.23);
}

.oppia-activity-summary-tile .title-section {
  height: 10em;
  position: relative;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  width: 100%;
}

.oppia-activity-summary-tile-mobile .title-section {
  height: 12em;
  position: relative;
  width: 100%;
}

.oppia-activity-summary-tile.oppia-activity-playlist-tile .title-section {
  display: inline-block;
  height: 7em;
  margin: 16px 0 10px 16px;
  min-width: 163px;
  width: 27%;
}

.oppia-activity-summary-tile.oppia-activity-playlist-tile .summary-section {
  display: inline-block;
  float: right;
  margin-top: 3%;
  width: 67%;
}
.oppia-activity-summary-tile .activity-title,
.oppia-activity-summary-tile-mobile .activity-title {
  bottom: 0;
  color: white;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 1em;
  font-weight: normal;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: 1.2em;
  margin: 0.3em;
  overflow-wrap: break-word;
  padding: 0.3em;
  position: absolute;
  width: inherit;
  word-wrap: break-word;
}
.oppia-activity-summary-tile.oppia-activity-playlist-tile .activity-title {
  font-size: 0.85em;
  text-align: center;
}

@media (min-width: 744px) and (max-width: 895px) {
  .oppia-activity-summary-tile.oppia-activity-playlist-tile .summary-section {
    width: 55%;
  }
}

@media (min-width: 630px) and (max-width: 743px) {
  .oppia-activity-summary-tile.oppia-activity-playlist-tile .thumbnail-image {
    width: 45px;
  }

  .oppia-activity-summary-tile.oppia-activity-playlist-tile .activity-title {
    font-size: 0.75em;
  }

  .oppia-activity-summary-tile.oppia-activity-playlist-tile .title-section {
    height: 7em;
    min-width: 140px;
  }

  .oppia-activity-summary-tile.oppia-activity-playlist-tile .summary-section {
    width: 50%;
  }
}

@media(max-width: 629px) {
  .oppia-activity-summary-tile.oppia-activity-playlist-tile .title-section {
    height: 7em;
    min-width: 115px;
  }

  .oppia-activity-summary-tile.oppia-activity-playlist-tile .summary-section {
    width: 47%;
  }
}

.oppia-activity-summary-tile .exploration-summary-avatars,
.oppia-activity-summary-tile-mobile .exploration-summary-avatars {
  left: 140px;
  padding-bottom: 4px;
  padding-right: 5px;
  position: absolute;
  top: 3px;
  width: 31px;
  z-index: 11;
}

.oppia-activity-summary-tile .exploration-summary-tile-mask {
  background-color: #eee;
  height: 258px;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 10;
}

.oppia-activity-summary-tile:hover .title-section-mask {
  background-color: #eee;
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.oppia-activity-summary-tile-mobile:hover .title-section-mask,
.oppia-activity-summary-tile-mobile a:focus .title-section-mask {
  background-color: #eee;
  height: 192px;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.oppia-activity-summary-tile .exploration-black-profile,
.oppia-activity-summary-tile-mobile .exploration-black-profile {
  background-color: black;
  border-radius: 50%;
  height: 26px;
  width: 26px;
}

.oppia-activity-summary-tile .exploration-summary-avatars profile-link-image,
.oppia-activity-summary-tile-mobile .exploration-summary-avatars profile-link-image {
  display: block;
  margin-bottom: 3px;
}

.oppia-activity-summary-tile .contributor-indicator,
.oppia-activity-summary-tile-mobile .contributor-indicator {
  border-radius: 10%;
  bottom: 10px;
  height: 13px;
  position: absolute;
  right: 5px;
  text-align: center;
  width: 16px;
}

.oppia-activity-summary-tile .contributor-indicator-background,
.oppia-activity-summary-tile-mobile .contributor-indicator-background {
  background-color: #4078C0;
}

.oppia-activity-summary-tile .all-avatars .num-remaining-avatars,
.oppia-activity-summary-tile-mobile .all-avatars .num-remaining-avatars {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 0.7em;
  font-weight: normal;
  left: 7px;
  position: absolute;
  top: 5px;
}

.oppia-activity-summary-tile .exploration-category,
.oppia-activity-summary-tile-mobile .exploration-category {
  color: #fff;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 0.65em;
  margin-left: 12px;
  margin-top: 8px;
  position: absolute;
  text-transform: uppercase;
}

.oppia-activity-summary-tile .thumbnail-image {
  display: block;
  height: 75px;
  margin: 0 auto;
  position: relative;
  top: 15%;
  width: 75px;
}

.oppia-activity-summary-tile-mobile .thumbnail-image {
  display: block;
  height: 100px;
  margin: 0 auto;
  position: relative;
  top: 15%;
  width: 100px;
}
.oppia-activity-summary-tile .objective {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.85em;
  height: 70px;
  -webkit-line-clamp: 3; /* Truncating to 3 lines. */
  line-height: 1.26;
  /* `max-height` is calculated as: 1.26 (line-height) * 3 (lines) / 0.85
  (font-size). An additional (1.26 (line-height) * 0.85 (font-size) * 0.25) is added
  to account for letters (like y,j and g) that fall beneath the baseline.
  This is done to limit the text to 3 lines for non-webkit browsers. */
  max-height: 4.71em;
  overflow: hidden;
  padding: 12px;
  text-overflow: ellipsis;
}
.oppia-activity-summary-tile-pre-hover-preview {
  margin-bottom: 35px;
}

.oppia-activity-summary-tile-mobile .objective {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.85em;
  height: 75px;
  padding: 12px;
}

.oppia-activity-summary-tile .rating-disabled,
.oppia-activity-summary-tile-mobile .rating-disabled {
  opacity: 0.5;
}

.oppia-activity-summary-tile [section="right-section"],
.oppia-activity-summary-tile-mobile [section="right-section"] {
  display: inline-block;
  float: left;
  height: 80px;
  position: relative;
  text-align: center;
  width: 30%;
}

.oppia-activity-summary-tile .metrics,
.oppia-activity-summary-tile-mobile .metrics {
  margin: 5px 12px 0;
  min-height: 30px;
  padding: 0;
}

.oppia-dashboard-card-statistic-icon {
  padding-top: 3px;
  position: absolute;
}

.oppia-activity-summary-tile .metrics li .fab,
.oppia-activity-summary-tile-mobile .metrics li .fab {
  font-size: 1.1em;
  margin-right: 2px;
  vertical-align: initial;
}
/* Accessibility workaround for icon buttons and links
  Taken from:
  https://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/
  Use for all links and buttons that only use an icon */
.oppia-icon-accessibility-label {
  display: inline-block;
  font-size: 0;
  height: 1px;
  overflow: hidden;
  width: 0;
}

.oppia-activity-summary-tile .recently-updated,
.oppia-activity-summary-tile-mobile .recently-updated {
  color: rgb(19,105,193);
  font-size: 1.1em;
  font-weight: bold;
  padding: 5px 8px 4px 8px;
}

.oppia-subscription-card {
  background-color: #fff;
  display: inline-block;
  height: 90px;
  margin: 8px 4px;
  padding: 0;
  width: 191px;
}

.oppia-dashboard-total-elements {
  display: inline-block;
  margin-top: 14px;
}

.oppia-subscription-profile-link {
  display: block;
  height: inherit;
  width: 100%;
}

.oppia-subscription-card-profile-picture {
  float: left;
  margin-left: 14px;
  margin-top: 14px;
  width: 60px;
}

.oppia-subscription-card-summary {
  float: left;
  margin-left: 11px;
  margin-top: 19.5px;
}

.oppia-activity-summary-tile.oppia-dashboard-collection-tile {
  margin-left: 7.5px;
  margin-right: 7.5px;
}

@media(max-width: 815px) {
  .oppia-dashboard-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .oppia-dashboard-aggregated-stats .stats-card {
    font-size: 12px;
    padding-left: 10px;
  }
}

/* Styles for small-width screens. */

.oppia-activity-summary-tile.small-width {
  height: 80px;
  width: 95%;
}

.oppia-activity-summary-tile.small-width .title-section {
  float: left;
  height: 80px;
  width: 70%;
}

.oppia-activity-summary-tile.small-width .exploration-summary-tile-mask {
  width: 70%;
}

.oppia-activity-summary-tile.small-width:hover .title-section-mask {
  height: 80px;
  width: 70%;
}

.oppia-activity-summary-tile.small-width .thumbnail-image {
  height: 20px;
  margin: 8px;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.oppia-activity-summary-tile.small-width .exploration-title {
  margin: 10px;
  top: 0;
  width: 75%;
}

.oppia-activity-summary-tile.small-width .metrics {
  display: inline-block;
  margin-top: 12px;
}

.oppia-activity-summary-tile.small-width .metrics li .far {
  margin-bottom: 10px;
}

.oppia-activity-summary-tile.small-width .recently-updated {
  background-color: rgb(19,105,193);
  border-radius: 8px;
  color: white;
  font-size: 0.6em;
  font-weight: bold;
  padding: 5px 8px 4px 8px;
}

@media (max-width: 420px) {
  .oppia-activity-summary-tile.small-width .metrics li {
    font-size: 0.6em;
  }
  .oppia-activity-summary-tile.small-width .recently-updated {
    display: none;
  }
}

/*
  About / learners / creators pages
*/

.oppia-static-header {
  align-items: center;
  display: flex;
  height: 210px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.oppia-static-header h1 {
  color: #01645C;
  display: inline;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 3em;
  left: 50%;
  position: relative;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 80%;
  z-index: 1;
}

.oppia-static-content {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  position: relative;
  top: 0;
  width: 60%;
}

.oppia-static-content-below-banner {
  position: relative;
  top: 250px;
}

.oppia-about-extra-container {
  position: relative;
  top: 50px;
  width: 100%;
}

@media(max-width: 700px) {
  .oppia-about-extra-container {
    margin-bottom: -10px;
  }
}
@media(max-width: 440px) {
  .oppia-about-extra-container {
    margin-bottom: 30px;
  }
}

.oppia-static-extra-content {
  margin: 0 auto;
  position: relative;
  top: 0;
  width: 60%;
}

.oppia-about-otter-speech-bubble {
  background: #fff;
  border-left: none;
  border-radius: 5px;
  margin: 1em 0 3em;
  padding: 20px 10px;
  position: relative;
  text-align: center;
}

.oppia-about-otter-speech-bubble:before {
  background: #fff;
  border-bottom-right-radius: 80px 50px;
  bottom: -1.7em;
  content: "";
  display: block;
  height: 30px;
  left: 1em;
  position: absolute;
  width: 50px;
  z-index: 10;
}

.oppia-about-otter-speech-bubble:after {
  background: #eee;
  border-bottom-right-radius: 40px 50px;
  bottom: -1.7em;
  content: "";
  display: block;
  height: 30px;
  left: 1em;
  position: absolute;
  width: 20px;
  z-index: 10;
}

.oppia-about-extra-container h3 {
  color: #fff;
  text-align: center;
}

.oppia-about-otter-speech-bubble h3 {
  color: #000;
  margin: 20px 0 20px 0;
}

.oppia-static-card-content {
  margin: 0 auto;
  max-width: 600px;
  padding: 4% 0 1% 0;
}

.oppia-page-card h3 {
  text-align: start;
}

.oppia-static-card-content-wide {
  width: 90%;
}

.oppia-static-card-content-narrow {
  width: 70%;
}

.oppia-about-extra-info {
  background-color: #009788;
  color: #fff;
  height: 245px;
  width: 100%;
}

.oppia-about-tab-content {
  display: none;
}

.oppia-about-visible-content {
  display: block;
  position: relative;
}

.oppia-static-content ol,
.oppia-static-content ul {
  padding: 0;
}

.oppia-static-content h2 {
  text-align: center;
}

.oppia-about-tabs {
  border-bottom: 1px solid #eee;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 0;
  text-align: center;
}
.oppia-about-tabs-text {
  border-bottom: none;
  color: #009688;
  padding: 10px;
  text-decoration: none;
  width: 100%;
}
.oppia-about-tabs-active .oppia-about-tabs-text,
.oppia-about-tabs-text:focus {
  border-bottom: 2px solid #009688;
  color: #009688;
}

.oppia-about-tabs-text:hover,
.oppia-about-tabs-text:focus {
  color: #009688;
  text-decoration: none;
}

.oppia-about-button {
  background-color: rgb(0, 121, 109);
  color: rgba(255,255,255,1.0);
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 18px;
  margin: 0 15px 15px 15px;
  max-width: 90%;
  min-width: 200px;
  padding: 15px;
  text-transform: uppercase;
  white-space: normal;
  width: 366px;
}

.oppia-about-button:hover,
.oppia-about-button:focus {
  background-color: rgba(5,190,178,1);
  color: rgba(255,255,255,1);
}

.oppia-about-buttons-container {
  text-align: center;
}

.oppia-about-extra-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.oppia-on-off-switch {
  position: relative;
  width: 70px;
}
.oppia-on-off-switch-checkbox {
  display: none;
}
.oppia-on-off-switch-label {
  border: 2px solid #999999;
  border-radius: 20px;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.oppia-on-off-switch-inner {
  display: block;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
  width: 200%;
}
.oppia-on-off-switch-inner:before, .oppia-on-off-switch-inner:after {
  box-sizing: border-box;
  color: white;
  display: block;
  float: left;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  padding: 0;
  width: 50%;
}
.oppia-on-off-switch-inner:before {
  background-color: #04857C;
  color: #FFFFFF;
  content: "ON";
  padding-left: 10px;
}
.oppia-on-off-switch-inner:after {
  background-color: #EEEEEE;
  color: #999999;
  content: "OFF";
  padding-right: 10px;
  text-align: right;
}
.oppia-on-off-switch-main {
  background: #FFFFFF;
  border: 2px solid #999999;
  border-radius: 20px;
  bottom: 0;
  display: block;
  height: 17px;
  margin: 3.5px;
  position: absolute;
  right: 41px;
  top: 0;
  transition: all 0.3s ease-in 0s;
  width: 18px;
}
.oppia-on-off-switch-checkbox:checked + .oppia-on-off-switch-label .oppia-on-off-switch-inner {
  margin-left: 0;
}
.oppia-on-off-switch-checkbox:checked + .oppia-on-off-switch-label .oppia-on-off-switch-main {
  right: 0;
}

.oppia-settings-container .form-text {
  color: #737373;
  display: inline-block;
  margin-top: 5px;
}

/* Styles for exploration settings */
.oppia-settings-container .has-error .form-text {
  color: #a94442;
}

.oppia-settings-container .col-sm-10 {
  max-width: 100%;
  padding-right: 0;
}
.oppia-settings-container .col-sm-10  > select {
  width: 85%;
}
/*
  about/learners/creators media queries
*/

@media only screen and (min-width: 1400px) {
  .oppia-about-extra-info {
    height: 245px;
  }
  .oppia-static-content, .oppia-static-extra-content {
    width: 960px;
  }

}

.oppia-mobile-back-to-parent {
  display: none;
}
@media only screen and (max-width: 768px) {
  .oppia-static-content, .oppia-static-extra-content {
    width: 90%;
  }
  .oppia-about-otter-speech-bubble {
    padding: 10px;
  }
  .oppia-mobile-collapsible-card {
    margin: 40px 0 0;
    padding: 0;
  }
  .oppia-mobile-collapsible-card-header {
    padding: 18px 15px;
  }
  .oppia-mobile-collapsible-card-content {
    border-top: 1px solid #999999;
    padding: 20px 26px 15px;
  }
  .oppia-mobile-back-to-parent {
    color: #007bff;
    display: block;
    font-size: 18px;
    margin-left: 3%;
  }
  .oppia-mobile-back-to-parent i {
    color: #007bff;
    font-size: 18px;
    margin-left: 3%;
  }
}

@media only screen and (max-width: 500px) {
  .oppia-static-header h1 {
    font-size: 2.5em;
  }
  .oppia-about-tabs li, .oppia-about-teach-tabs ul li {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-right: none;
    width: 100%;
  }
  .oppia-static-card-content-wide, .oppia-static-card-content-narrow {
    width: 80%;
  }
  .oppia-about-buttons {
    margin: 20px 0 0 0;
    width: 100%;
  }
  .oppia-about-buttons:first-child {
    margin: 0;
  }
}

.oppia-save-exploration-wide-modal .diff-graph {
  margin-top: 50px;
}
.oppia-save-exploration-wide-modal .legend-graph {
  right: -25px;
}

.oppia-rte-component-container {
  position: relative;
}

.oppia-rte {
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  height: auto;
  min-height: 80px;
  padding: 8px;
  word-wrap: break-word;
}

.oppia-rte:focus {
  border: 1px solid #66afe9;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
  height: auto;
  min-height: 80px;
  padding: 8px;
}

span.learner-action {
  margin-bottom: 2em;
}

div.oppia-issues-learner-action {
  display: block;
  margin-bottom: 2em;
}

.oppia-issues-playthrough-rectangle-text {
  color: white;
  font-size: 20px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1000;
}

.oppia-issues-playthrough-modal-btn {
  background-color: #009A8B;
  border: none;
  border-radius: 15px;
  box-shadow: 10px 0 #008080;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  height: 150px;
  outline: none;
  padding: 20px 15px;
  text-align: center;
}

.oppia-issues-playthrough-modal-btn:hover {
  background-color: #00b3a0;
}

.oppia-issues-playthrough-modal-btn:active {
  background-color: #00b3a0;
  box-shadow: 0 10px #008080;
  transform: translateY(4px);
}

.oppia-issues-playthrough-rectangle {
  background-color: transparent;
  color: white;
  font-size: 20px;
  font-weight: bold;
  height: 90px;
  margin: 15px 0;
  position: relative;
  transform: scale(0.5);
  width: 200px;
}

.oppia-issues-playthrough-rectangle:before,
.oppia-issues-playthrough-rectangle:after {
  background-color: inherit;
  content: "";
  height: 141.42px;
  left: 27.2893px;
  position: absolute;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  width: 141.42px;
  z-index: -1;
}

.oppia-issues-playthrough-rectangle:before {
  top: -70.7107px;
}

.oppia-issues-playthrough-rectangle:after {
  bottom: -70.7107px;
}

.oppia-issues-content {
  width: 66%;
}

.oppia-issues-border-gray {
  border: 2px solid #b2b2bb;
}

.issueNav:hover {
  cursor: pointer;
}

.oppia-issues-bor-btm {
  border-bottom: 2px solid #b2b2bb;
}

.oppia-issues-bor-right {
  border-right: 1px solid #b2b2bb;
}

.oppia-issues-bor-left {
  border-left: 1px solid #b2b2bb;
}

.oppia-issues-clr-green {
  color: #66A79D;
}

.oppia-issues-bg-clr {
  background: #469689;
}

.oppia-issues-suggestion-header {
  color: red;
  margin-left: 10px;
}

.oppia-issues-tips {
  list-style-type: square;
}

.oppia-issues-playthrough-content {
  color: white;
  font-size: 1.3em;
}

.oppia-issues-btn-arrow {
  background-color: white;
  border: none;
  cursor: pointer;
  margin: auto;
}

.oppia-issues-highlight {
  background-color: #cfffe1;
  opacity: 0.5;
}

.oppia-issues-btn-resolve {
  border-radius: 10px !important;
  padding: .35rem 1.2rem;
}

.oppia-ft-14 {
  font-size: 14px;
}

.oppia-issues-state-link {
  color: blue;
  text-decoration: underline;
}

.oppia-issues-row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.oppia-issues-text-white {
  color: white;
}

.oppia-pt2 {
  padding-top: .5rem;
}

.oppia-pt4 {
  padding-top: 1.5rem;
}

.oppia-pb2 {
  padding-bottom: .5rem;
}

.oppia-issues-issue-dir {
  font-family: montserrat, sans-serif;
}

.oppia-issues-learner-action-table {
  border: 1px solid black;
  margin-bottom: 2em;
  width: 100%;
}

/* To fix the shifting of tooltip when text is too long. */
.nav .tooltip-inner {
  max-width: none;
  white-space: nowrap;
}

.oppia-rule-preview {
  word-wrap: break-word;
}

.fx-row {
  display: flex;
  flex-direction: row;
}

.fx-col {
  display: flex;
  flex-direction: column;
}

.fx-main-start {
  justify-content: start;
}

.fx-main-center {
  justify-content: center;
}

.fx-main-end {
  justify-content: end;
}

.fx-main-space-evenly {
  justify-content: space-evenly;
}

.fx-main-space-around {
  justify-content: space-around;
}

.fx-main-pace-between {
  justify-content: space-between;
}

.fx-cross-start {
  align-items: start;
}

.fx-cross-center {
  align-items: center;
}

.fx-cross-end {
  align-items: end;
}