core/templates/css/oppia.css - develop - githubmirror/oppia

core/templates/css/oppia.css
4 178 строк82 KB
Mosin Shaikh
[GSoC 2026] M2.9 and M2.10 - Fix Part of #24717: Created UI for TimeExpiredModalComponent and UnansweredQuestionModalComponent (#26968)
09 авг 2026, 22:13
Не верифицирован
09 авг 2026, 22:13e221b58
/*
  Copyright 2014 The Oppia Authors. All Rights Reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
      http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/*
  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. */
mat-input-group.long > input {
  height: 45px;
  width: 100%;
}

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

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

/* When AngularFire is in emulator mode, it appends the following element to
the <body> of every page:

    <div class="firebase-emulator-warning"
         style="background-color: rgb(255, 255, 255);
                border: 0.1em solid rgb(0, 0, 0);
                bottom: 0px;
                color: rgb(255, 0, 0);
                left: 0px;
                margin: 0px;
                position: fixed;
                text-align: center;
                width: 100%;
                z-index: 10000;">
      Running in emulator mode. Do not use with production credentials.
    </div>
*/
.firebase-emulator-warning {
  /* Enhance the contrast of the text to improve accessibility. We need to use
   `!important` here because inline style rules have a higher priority than CSS
   style rules, but we only want these CSS rules to be respected. */
  background-color: #fff !important;
  color: #c00 !important;
  /* Do not allow the element to swallow pointer/mouse events. */
  pointer-events: none;
}

/* 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;
}

.embedded-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: absolute;
  width: 100%;
}

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

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

.mat-button-success {
  color: #00645c;
}

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

.mat-button.mat-default-theme.mat-raised:not([disabled]):hover,
.mat-button.mat-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);
}

.mat-bottom-sheet-container {
  border-radius: 28px 28px 0 0;
}

.oppia-focus-indicator-blue:focus {
  outline: 2px solid rgb(23, 23, 255);
}

.oppia-focus-indicator-white:focus {
  outline: 2px solid rgb(255, 255, 255);
}

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

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

.oppia-learner-confirm-button.oppia-learner-submit-answer-button.mat-button {
  border-radius: 2px;
  font: 16px;
  line-height: 22px;
  margin: 0;
  min-width: 55px;
}

.oppia-length-validation-error {
  align-items: center;
  background-color: #f8d7da;
  border: 0.0625rem solid #dc3545;
  border-radius: 0.25rem;
  color: #dc3545;
  display: flex;
  justify-content: center;
  padding: 0.25rem;
}

.mat-button.oppia-learner-confirm-button,
.mat-button.oppia-learner-got-it-button,
.mat-button.oppia-learner-hint-solution-button {
  background: #0d48a1;
  color: #fff;
  padding: 6px 12px;
}

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

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

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

.mat-button.oppia-learner-confirm-button:focus,
.mat-button.oppia-learner-confirm-button:hover,
.mat-button.oppia-learner-got-it-button:focus,
.mat-button.oppia-learner-got-it-button:hover,
.mat-button.oppia-learner-hint-solution-button:focus,
.mat-button.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%;
  /* 
    Added this line because Bootstrap 5 added smooth scroll default behavior.
    Reference: https://katalon-inc.my.site.com/support/article/Test-case-failures-due-to-auto-scrolling-in-Bootstrap-5-and-how-to-fix 
  */
  scroll-behavior: auto !important;
}
/* Override Bootstrap 5's .row rule */
.container {
  max-width: 1140px !important;
}

.row > * {
  margin-top: revert;
  padding-left: revert;
  padding-right: revert;
}

.row button {
  width: auto;
}

.btn-close {
  color: #000;
  float: right;
  height: auto;
  opacity: 0.7;
  width: auto;
}
button.btn-close {
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  padding: 5px;
}
.modal-header .btn-close {
  height: 5px;
  margin-top: -2px;
  width: 3px;
}
.modal-footer {
  flex-wrap: unset;
}
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;
  /* 
   Match Bootstrap 4 default body alignment ensures text starts left-aligned
   instead of relying on --bs-body-text-align in Bootstrap 5 
  */
  text-align: left;
  width: 100%;
}

.carousel-indicators {
  cursor: pointer;
  display: flex;
  justify-content: center;
  left: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-50%);
}

.carousel-indicators li {
  margin: 0 3px;
}

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

/*
In Bootstrap 5, <select> elements use .form-select instead of .form-control.
This separates select styling from input/textarea styling, 
ensuring proper spacing, custom dropdown arrow, and consistent appearance 
across browsers. Use .form-select for all <select> fields.
*/
.form-select {
  font-size: 14px;
  min-height: 35px;
  padding: 6px 12px 6px 12px;
}

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

.study-guide-heading-field .form-control {
  width: 100% !important;
}

.mb-3 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: #555;
  font-style: italic;
}

@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;
  text-decoration: none
}

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, textarea.ng-dirty.ng-invalid, mat-form-field.ng-invalid .mat-form-field-outline {
  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-form-error-container {
  color: #f00;
  margin-top: 5px;
}

.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;
}
.show > a {
  outline: 0;
}

.mobile-activity-summary-card a {
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  padding-left: 10px;
  width: 100%;
}

.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-navbar-nav .show > a {
  background-color: #fff;
  color: #00645c;
}
.oppia-dashboard-container a:hover {
  text-decoration: underline;
}

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

.oppia-profile-user-stat span {
  display: block;
}

/* 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: 0;
}

.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, .bg-secondary {
  background-color: #888;
}
.label-info, .bg-info {
  background-color: #18447e;
}
.label-success, .bg-success {
  background-color: #00645c;
}

/*
  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 {
  padding: 5px 6px;
  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;
}

.oppia-correctness-label-editor {
  margin-left: 4px;
  margin-top: 18px;
}

.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-navbar-nav {
  float: left;
}
.nav-link {
  display: block;
  font-size: 14px;
  padding: 0.5rem 1rem;
  position: relative;
}
.nav-tabs .nav-link {
  background-color: #e9ecef;
  border: 1px solid #dee2e6;
  border-bottom-color: transparent;
}
.oppia-navbar-nav > .nav-link {
  padding: 10px 5px;
}
.oppia-same-row-container {
  float: left;
}
.modal-body .nav-link {
  color: #00609c;
  font-size: 16px;
  font-weight: bold;
}

.oppia-help-dropdown .popover {
  color: white;
  font-size: 14px;
  max-width: 200px;
  text-align: center;
}
.oppia-help-dropdown .popover-inner {
  max-width: 140px;
}

.oppia-language-selector:focus {
  outline: 1px dotted #fff;
  outline: auto 5px -webkit-focus-ring-color;
}

.oppia-topic-selector:focus {
  outline: 1px dotted #fff;
  outline: auto 5px -webkit-focus-ring-color;
}

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

@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, .pagination {
  cursor: pointer;
}

.navbar {
  border: 0;
  margin-bottom: 0;
  padding: 0;
  width: 100%;
}

.nav {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 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: 245px;
  min-width: 160px;
  padding: 5px 0;
}

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

.float-end > .dropdown-menu {
  left: auto;
  right: 0;
}

.dropdown-item {
  color: var(--bs-dropdown-link-color) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: transparent;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-bottom: 4px solid;
  border-top: 0;
  content: "";
}

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

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

.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 li {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.oppia-navbar-breadcrumb-rtl .oppia-navbar-breadcrumb-separator {
  margin-left: 8px;
  margin-right: 8px;
}

.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%;
}

/* 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;
}

.nav .dropdown:hover > .dropdown-menu {
  border: none;
}

@media(max-width: 1050px) {
  .oppia-navbar-breadcrumb {
    display: 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-end {
    display: flex;
    flex-direction: row;
    float: right;
    margin: 0;
  }
}
@media (min-width: 767px) and (max-width: 992px) {
  ul.nav.navbar-nav.oppia-navbar-nav.float-end {
    display: flex;
    flex-direction: row;
    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 .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .nav .dropdown:hover > .dropdown-menu > li > a {
    color: #009688;
  }
  .nav .dropdown:hover > .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-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 mat-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-inline-end: 1px solid #bbb;
  margin: 10px 0;
  padding-inline-start: 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: #00645c;
  border-radius: 4px;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  margin-top: 10px;
  text-transform: uppercase;
  width: 200px;
}
.oppia-dashboard-intro-button:hover,
.oppia-dashboard-intro-button:active {
  background-color: rgba(5, 190, 178, 1);
  color: #fff;
}

.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: 1020;
}

.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 #999;
  -webkit-box-shadow: 0 0 12px #999;
  box-shadow: 0 0 12px #999;
  color: #fff;
  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 #000;
  -webkit-box-shadow: 0 0 12px #000;
  box-shadow: 0 0 12px #000;
  cursor: pointer;
  opacity: 1;
}
.oppia-toast:before {
  align-items: center;
  bottom: 0;
  color: #fff;
  display: flex;
  float: left;
  font-family: 'Material Icons', sans-serif;
  font-size: 24px;
  margin: auto 5px auto -37px;
  position: absolute;
  top: 0;
}

@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: #24883e;
  border-color: #24883e;
  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 {
  font-size: 30px;
  font-style: normal;
  letter-spacing: -4px;
  line-height: 14px;
  text-align: center;
}

.oppia-save-publish-button-icon {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 19px;
  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);
  border: 1px solid #ccc;
  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-break: break-word;
  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;
}

/* 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: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  margin-left: 5px;
  margin-right: 0;
  padding: 6px 12px 6px 12px;
  text-transform: uppercase;
}
.oppia-language-dropdown-button {
  border: 2px solid white;
}
.btn.oppia-navbar-button:hover,
.btn.oppia-navbar-button:focus {
  background-color: #fff;
  color: #009688;
}
.btn:focus, .btn:active:focus {
  outline: 1px solid #000;
}
.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 .popover.bottom > .arrow {
  border-bottom-color: #000;
}
.oppia-help-dropdown .popover.bottom > .arrow:after {
  border-bottom-color: #000;
}

.toast {
  background-color: #f89406;
  display: block !important;
  font-size: 16px;
  max-width: 550px;
  transition: none !important;
}

.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 tutorial contents. */
.popover-content {
  padding: 10px;
}

.popover-body.container-fluid {
  padding: 10px;
}
.popover-content .mat-button, .mat-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: 0;
}

.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-rte-keyboard-accessibility-text {
  color: #757575;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0;
}

.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%;
  left: 23px;
  opacity: 0.5;
  outline: none;
  padding: 4px;
  position: absolute;
  width: 90%;
}

.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: 12px;
  opacity: 0.2;
  position: absolute;
  right: -22px;
  top: 3px;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

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

.oppia-autofocus:focus {
  border: 1px solid #66afe9;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
  -moz-box-shadow: inset 0 1px 1px #00000013,0 0 8px #66afe999;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

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

.oppia-clear {
  clear: both;
}

.oppia-form-error-text {
  color: #f00;
  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;
}

/* 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;
  object-fit: contain;
}

/* 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,
.oppia-add-skill-button,
.oppia-change-skill-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,
.oppia-add-skill-button:hover,
.oppia-add-skill-button:active,
.oppia-add-skill-button:focus,
.oppia-change-skill-button:hover,
.oppia-change-skill-button:active,
.oppia-change-skill-button:focus {
  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;
  height: 67px;
  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;
  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: 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-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;
}

.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 {
  align-items: unset;
  border-bottom: 1px solid #e5e5e5;
  justify-content: space-between;
  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-certificate-result-modal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.oppia-certificate-result-modal .modal-body {
  background: transparent !important;
  padding: 0 !important;
}

.oppia-time-expired-modal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.oppia-unanswered-question-modal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.oppia-modal-lesson-information-card .modal-dialog {
  margin: 25px auto;
  max-width: 400px;
  min-width: 320px;
}

.oppia-modal-lesson-information-card {
  height: fit-content;
}

.oppia-progress-reminder-modal .modal-dialog {
  margin: 100px auto;
  max-width: 400px;
  min-width: 320px;
}

.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: 350px;
  }
}

.oppia-save-exploration-wide-modal .modal-dialog {
  max-width: 1200px;
  width: 90%;
}

.oppia-welcome-modal .modal-dialog {
  height: 70%;
  width: 70%;
}

.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: 1000px;
  }
  .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(max-width:540px) {
  .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    width: 95vw;
  }
}
@media(min-width: 1024px) {
  .modal-lg {
    width: 900px;
  }

  /* Prevents misalignment of subtopic card in smaller screen sizes */
  .subtopics-list .subtopic-card {
    width: 150px;
  }
}

.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.
*/
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: 1015;
}

.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-inline-start: -10px;
  padding: 0;
}
[dir="rtl"] .oppia-navbar-brand-name {
  float: left;
}

.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-small {
  margin-left: 6px;
}

.oppia-navbar-back-button {
  color: white;
  font-size: 20px;
  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 {
  display: flex;
  /* 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: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  padding: 17px 12px 10px;
  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 {
  color: #00645c;
}
.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: 27%;
  width: 100%;
}
.oppia-editor-sidebar ngb-accordion .card {
  border-radius: 0;
}
.oppia-editor-sidebar ngb-accordion .card .card-heading {
  background-color: #ddd;
  border-radius: 0;
  padding: 3px 10px;
}
.oppia-editor-sidebar ngb-accordion .card .card-title {
  font-weight: bold;
}
.oppia-editor-sidebar ngb-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 15px 17px 15px;
  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 #fc0 transparent;
  color: #333;
}
.oppia-editor-warnings-critical-color {
  border-color: transparent transparent rgb(231,15,15) transparent;
  color: #fff;
}
.oppia-editor-warnings-count {
  display: flex;
  justify-content: center;
  margin-bottom: -3px;
  padding-left: 0.5px;
  padding-top: 3px;
  text-align: center;
}

.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-start {
  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;
}

.mat-card.oppia-page-card {
  padding: 30px 55px 30px 45px;
}

.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 mat-card.mat-mdc-card {
  background-color: transparent;
}

mat-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;
}

mat-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;
}

.oppia-settings-container .mb-3 > label {
  padding-left: 0;
  padding-right: 0;
}

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

.trained-feedback-selection-container {
  border-bottom: thin solid #eee;
  margin-bottom: 5px;
}
.trained-feedback-selection-container mat-form-field.mat-form-field-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-welcome-modal .modal-content {
  border-radius: 0;
  height: 100%;
  min-height: 450px;
}

.oppia-modal-lesson-information-card .modal-dialog .modal-content {
  border-radius: 4px;
  height: 600px;
  min-width: 270px;
  overflow-y: scroll;
}

.oppia-modal-lesson-information-card .modal-dialog .modal-content::-webkit-scrollbar {
  display: none;
}

.oppia-modal-lesson-information-card .modal-dialog .modal-content .mat-card {
  margin: 0;
  padding: 0;
}

.oppia-progress-reminder-modal .modal-dialog .modal-content {
  border-radius: 0;
  min-width: 270px;
}

/*
  The following class is to be used for forcing right align in RTL languages,
  hence the !important tag.
*/
.oppia-force-right-align {
  text-align: right !important;
}

.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-activity-summary-tile .metrics li,
.oppia-activity-summary-tile .metrics .row-three,
.oppia-activity-summary-tile-mobile .metrics .row-three {
  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-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%;
}

oppia-noninteractive-link {
  margin-right: -4px;
}

.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 .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 .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 .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;
  word-break: break-word;
}
.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.8;
}

.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;
}

.mobile-activity-summary-card {
  height: 85px;
  margin-bottom: 13px;
  width: 350px;
}

.mobile-activity-card-details {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 15px 15px;
  width: 270px;
}

.mobile-activity-card-details h3 {
  font-size: 1em;
  margin-bottom: auto;
  margin-top: 0;
}

.mobile-activity-card-summary-section {
  align-self: flex-end;
  color: black;
  width: 100%;
}

.mobile-activity-card-summary-elements {
  align-items: flex-end;
  display: flex;
  margin-bottom: -5px;
  padding-left: 0;
  width: 100%;
}

.bullet-separator {
  font-size: 9px;
  margin: -3px 13px 0 16px;
  opacity: 30%;
  vertical-align: middle;
}

.mobile-activity-card-summary-elements li::marker {
  color: transparent;
}

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

  .oppia-dashboard-aggregated-stats .stats-card {
    font-size: 12px;
    padding-inline-start: 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: 610px) {
  .oppia-activity-summary-tile.small-width .metrics li .far {
    margin-top: 10px;
  }
}

@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;
  }
  .oppia-activity-summary-tile.small-width .metrics li .fas {
    margin-bottom: 4px;
  }
}

/*
  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-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-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-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 #999;
  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: #fff;
  content: "ON";
  padding-left: 10px;
}
.oppia-on-off-switch-inner:after {
  background-color: #eee;
  color: #999;
  content: "OFF";
  padding-right: 10px;
  text-align: right;
}
.oppia-on-off-switch-main {
  background: #fff;
  border: 2px solid #999;
  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-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-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 #999;
    padding: 20px 26px 15px;
  }
  .oppia-mobile-back-to-parent {
    color: #015f9c;
    display: block;
    font-size: 18px;
    margin-left: 3%;
  }
  .oppia-mobile-back-to-parent i {
    color: #015f9c;
    font-size: 18px;
    margin-left: 3%;
  }
}

@media only screen and (max-width: 500px) {
  .oppia-static-header h1 {
    font-size: 2.5em;
  }
  .oppia-static-card-content-wide, .oppia-static-card-content-narrow {
    width: 80%;
  }
}

.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;
  text-align: start;
  word-break: break-word;
  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: #fff;
  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;
}

.practice-tab-mat-checkbox .mat-checkbox-label {
  font-weight: normal;
}

/*
  The following style is required so as to prevent multi-word texts from being
  split into multiple lines in the link text in the editor and shouldn't be
  removed.
*/
.cke_widget_inline.cke_widget_oppiaskillreview {
  display: inline;
}
.cke_widget_inline.cke_widget_oppialink {
  display: inline;
}
/*
  When a modal is opened on top of another modal, after closing the second one,
  the first becomes unscrollable. This is required to fix that issue.
*/
.modal {
  overflow: auto !important;
}

/*
  TODO(#12768): Remove the .forced-modal-stack style once the
  rte-component-modal is migrated to Angular. Currently, this style is used for
  correctly stacking AngularJS modal on top of Angular modal.
*/
.forced-modal-stack {
  z-index: 1035 !important;
}

/*
  The .forced-modal-stack-over and .forced-modal-backdrop-stack-over styles may be
  removed once rte-helper-service is migrated to Angular. Currently, these styles
  are used for correctly stacking AngularJS modals on top of Angular modals.
*/
.forced-modal-stack-over {
  z-index: 1080 !important;
}

.forced-modal-backdrop-stack-over {
  z-index: 1075 !important;
}

.oppia-profile-picture {
  position: relative;
}

@media (max-width: 610px) {
  .oppia-subscription-button {
    margin-top: 10px;
  }
}

/*
 For issue #12165 The following style is required so as to prevent long
 description texts for questions getting overflowed in the editor because
 of fixed height given which exceeds after word-break and breaks the view.
*/
.mat-radio-group-questions .mat-radio-button .mat-radio-label {
  align-items: flex-start;
}

.mat-radio-group-questions .mat-radio-button .mat-radio-label .mat-list-item {
  height: auto;
}

@media (max-width: 610px) {
  .oppia-profile-picture-container {
    float: left;
    height: auto;
    width: 100%;
  }
}

.oppia-profile-picture .oppia-profile-picture-mask {
  background-color: #eee;
  bottom: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.oppia-profile-picture:hover .oppia-profile-picture-mask,
.oppia-profile-preferences:focus .oppia-profile-picture-mask {
  border-radius: 4px;
  opacity: 0.7;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.conversation-skin-help-card-content {
  max-height: 235px;
  overflow-y: auto;
  width: 270px;
}

.oppia-welcome-modal .modal-body {
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  height: 100%;
  margin: 0 auto;
  top: 10%;
  width: 95%;
}

.oppia-welcome-modal .oppia-welcome-modal-h1 {
  color: #015c53;
}

.oppia-welcome-modal .oppia-welcome-modal-p {
  font-size: 0.9em;
  margin-bottom: 6px;
  margin-top: 0;
}

.oppia-welcome-modal .oppia-welcome-modal-button {
  background-color: #015c53;
  border-radius: 4px;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  margin-top: 10px;
  text-transform: uppercase;
  width: 260px;
}

.oppia-welcome-modal .oppia-welcome-modal-left-button {
  margin-right: 10px;
}
.oppia-welcome-modal .oppia-welcome-modal-button:hover,
.oppia-welcome-modal .oppia-welcome-modal-button:focus,
.oppia-welcome-modal .oppia-welcome-modal-button:active {
  background-color: rgba(5, 190, 178, 1);
  color: #fff;
}

.oppia-welcome-modal .oppia-welcome-modal-img {
  min-width: 100px;
}

@media (max-width: 770px) {
  .oppia-welcome-modal .modal-body {
    top: 5%;
  }

  .oppia-welcome-modal .modal-dialog {
    margin: 10% auto;
    width: 95%;
  }
}

@media (max-width: 780px) {
  /* Prevents misalignment of subtopic card in smaller screen sizes */
  .subtopics-list .subtopics-container .subtopic-card {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .oppia-welcome-modal .modal-dialog {
    margin: 1.75rem auto;
    max-width: 900px;
  }
}

.oppia-modify-translations-modal {
  align-content: center;
}

@media (max-width: 400px) {
  /* Prevents overlapping with the mobile navbar elements. */
  oppia-mark-translations-as-needing-update-modal {
    margin-bottom: 25px;
  }
}

.oppia-typeahead-form .dropdown-item.active {
  color: #212529;
}

/*
 * This ensures that when mat select is invoked from a modal, the mat options
 * are not covered by the it.
 */
.cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 10000 !important;
}

.oppia-exploration-summary-tile {
  margin-left: 10px;
}

.conversation-skin-oppia-avatar, .conversation-skin-user-avatar {
  height: 36px;
  position: absolute;
  top: 0;
  width: 36px;
  z-index: 1;
}


/*
    This CSS block is for ensuring that only a response from a multi-line text input preserves newlines.
    Leveraging the parent class ".conversation-skin-learner-answer-content" will render newlines in the
    other interactions (ie; Multiple Choice, Item Selection) which is not necessary.
*/
oppia-response-text-input {
  white-space: pre-wrap;
}

mat-tooltip-component .mat-tooltip.oppia-mat-tooltip-list {
  font-size: 12px;
  white-space: pre-wrap;
}

.oppia-save-draft-warning {
  color: #fc0;
  margin-left: 5px;
}

.hidden-element {
  outline: 0;
}