/* Top Navigation */
.topnav {
  width: 100%;
  overflow: hidden;
  background-color: rgb(192, 192, 140);
}
.topnav a {
  float: left;
  color: #4e0d0d;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1.1em;
}
.topnav a.pull-right {
  float: right;
  color: #4e0d0d;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1.1em;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 1.1em; 
  border: none;
  outline: none;
  color: #4e0d0d;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(192, 192, 140);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* content of the page */
 .content {
     background-color: rgba(192, 189, 189, 0.355);
     margin: auto;
     font-size: 1.07em;
     width: 100%;
     min-width: 300px;
     /* max-width: 1200px; */
    /* min-height: 25px;
     */
     padding: 10px 0px 0px 0px;
     min-height: calc(100vh - 70px);
}
.khenpo-quote {
   text-align: center;
   font-size: 1em;
   color: rgb(92, 79, 4);
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 90%;
   min-width: 200px;
   padding: 10px 10px 10px 10px;
}
 .footer {
    /* background-color: rgb(175, 79, 41);
     */
     margin: auto;
     width: 100%;
    /* font-size: 1.5em;
     */
     min-width: 300px;
     /* max-width: 1200px; */
     text-align: center;
     height: 30px;
    /* margin-bottom: 10px;
     */
    margin-top: 10px;
}
.js-cd-top {
  position: fixed;
  bottom: 20px;
  right: 15px;
  display: none;
  /* The copyright line below it is position:relative with no z-index, so at the
     very bottom of a page it painted over this link and swallowed the click. */
  z-index: 1000;
  padding: 4px 8px;
  background-color: rgba(251, 249, 239, 0.9);
  border-radius: 4px;
}
.js-cd-top-show {
  display: block;
}
.lowercase {
  text-transform: lowercase;
}
.iframe-style {
    background-color: rgba(192, 189, 189, 0.418);
    padding-top: 10px;
    width: 100%;
    float:left;
}
.html-text-style {
    background-color:rgba(231, 230, 230);
    padding: 15px; 
    font-size: 1.3em;
}
.html-text-style-wechat {
    background-color:rgba(231, 230, 230);
    padding: 15px;
    font-size: 1em;
    width: 70%;
}
.html-text-style-wechat img {
    margin-left: auto;
    margin-right: auto;
}
/* styled-textarea */
 .styled-textarea {
     background-color: rgba(228, 244, 248, 0.582);
     font-size: 0.9em;
     width: 100%;
}
/* float styles and float cards */
 .floatstyle {
     background-color: rgba(192, 189, 189, 0.192);
     padding-top: 10px;
     padding-left: 10px;
     width: 100%;
     /* float:left; */
     /* content: ""; */
     display: table;
     clear: both;
}
 .float-card-2-cols {
     background-color: rgba(192, 189, 189, 0.192);
     margin: 10px 10px 10px 10px;
     width: 47%;
     min-height: 160px;
     max-height: 160px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: table-row;
     float:left;
}
.float-card-2-cols:hover{
    overflow: visible;
    white-space: normal;
    transition:0.5s;
    max-height: 600px;
    box-shadow: 0 8px 16px 0 rgba(11, 39, 80, 0.685);
   /* just added this line */
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  background-color: rgba(192, 189, 189, 0.192);
  width: 95%;
  gap: 10px;
  padding: 10px;
  margin: auto;
  align-items: flex-start;
  justify-items: center;
}
.video-card {
    background-color: #c0bdbd94;
    padding: 10px;
  /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    */  
    width: 290px;
    min-height: 215px;
}
.video-card:hover{
  box-shadow: 0 8px 16px 0 rgba(11, 39, 80, 0.685);
}
.video-card img { 
  height: 170px;
  width: 290px;
}
.video {
   display: inline-block; 
   width: 100%; 
   height: 100%;
}
/* Previous and Next Buttons */
 .button-href {
     text-decoration: none;
     display: inline-block;
    /* padding: 4px 8px;
     */
}
 .button-href:hover {
     background-color: #ddd;
     text-decoration: none;
     color: rgb(16, 133, 51);
}
 .button-previous {
     background-color: #db7474;
     color: white;
    /* color: black; */
}
 .button-next {
     background-color: rgb(102, 151, 103);
     color: white;
}
/* visible on hover */
 .hoverShow {
     display: none;
}
 .hoverWrapper:hover .hoverShow {
     display: inline-block;
}
/* collapsible */
.collapsible {
    background-color: rgb(189, 190, 192);
    color: rgb(11, 56, 116);
    font-size: 1em;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
  }
  
  .collapsible-active, .collapsible:hover {
    background-color: rgb(138, 137, 137);
    color: rgb(213, 216, 41);
  }
  
  .collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .collapsible-active:after {
    content: "\2212";
  }
  
  .collapsible-content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
  }

/* tooltips */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: rgb(141, 131, 131);
    color: #fff;
    text-align: center;
    font-size: 0.9em;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
/*  progress bar */
.my-progress {
    width: 100%;
    background-color: rgb(209, 212, 205);
 }
  
.my-bar-light-green {
    height: 25px;
    background-color: rgb(118, 180, 118);
    text-align: center;
    line-height: 25px;
    color: white;
}
  
.my-bar-grey {
    height: 25px;
    background-color:rgb(187, 181, 104);
    text-align: center;
    line-height: 25px;
    color: white;
}
/* tabs */
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
.tablinks {
    font-size: 1em;
}
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    font-size: 1em;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }

  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
/* messages / notes */
.message {
    list-style-type: none;
    text-align: center;
    font-size: 1em;
}
.error {
    background-color: #ffdddd;
    /* border-left: 6px solid #f44336; */
    font-size: 1em;
}
.answer-or-marking-saved-alert {
    font-size: 1em;
    display: none;
    margin-bottom: 10px;
    padding: 6px 16px;
    border-radius: 5px;
    background-color: #ddffdd;
    color: #2e7d32;
}
.answer-or-marking-saved-alert:not(:empty) {
    display: inline-block;
}
.answer-or-marking-saved-alert.alert-error {
    background-color: #ffdddd;
    color: #c62828;
}
.exam-link-copied-alert {
    background-color: #ffdddd;
    font-size: 1em;
    display:inline-block;
    margin-bottom: 10px;
    padding: 0 30px;
}
.answer-for-marking {
    font-size: 1.1em;
    padding: 5px;
    display:inline-block; 
    margin: 15px; 
}
.answer-for-marking span {
    font-size: 1.1em;
    color: darkgoldenrod;
}
  
.success {
    background-color: #ddffdd;
    /* border-left: 6px solid #4CAF50; */
    font-size: 1em;
}

.info {
    background-color: #e7f3fe;
    /* border-left: 6px solid #2196F3; */
    font-size: 1em;
}
.warning {
    background-color: #ffffcc;
    /* border-left: 6px solid #ffeb3b; */
    font-size: 1em;
}
.closebtn {
    margin-left: 15px;
    color: rgb(192, 118, 180);
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: black;
}
/* toggle switch */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
  }
  
  .toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(211, 163, 163);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color:white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .toggle-slider {
    background-color: #2196F3;
  }
  
  input:focus + .toggle-slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .toggle-slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }

  /* checkmark icons */
  .checkmark {
    font-size: 16px; /* this determines the size of the list text and therefore checkmark size */
    list-style-type: none; /*  remove default list style */
    margin-bottom: 0; /*  lists need to be able to breathe */
    padding: 0em 0 0 2.5em; /* make room for the circle */
    position: relative; /* because we want to position the circle in an absolute fashion */
  }
  .checkmark:before {
    content: " "; /* the circle itself is empty */
    display: block;
     /* border: solid 0.8em #660a5e; create a colored area... */
    border: solid 0.8em #756b0a; /* create a colored area... */
    border-radius: .8em; /* ... and turn it into a circle */
    height: 0;
    width: 0;
    position: absolute; /* the circle is then put into place */
    left: 0.5em;
    top: 40%; 
    margin-top: -0.5em;
  }
  .checkmark:after {
    content: " ";
    display: block;
    width: 0.3em; /* the short bar of the mark is half as long as the long bar */
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0; /* creates the inverted "L" shape */
    position: absolute;
    left: 1em;
    top: 40%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg); /* tilts the shape */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* Rounded sliders */
  .toggle-slider.toggle-round {
    border-radius: 24px;
  }
  
  .toggle-slider.toggle-round:before {
    border-radius: 50%;
  }
/* miscellaneous */
 .input {
     background-color: rgb(183, 203, 214);
     color: rgb(54, 62, 167);
     font-size: 1.1em;
     padding: 3px;
     width: 50%;
     margin-bottom: 10px;
     margin-left: 10px;
}
 .no_text_decroration {
     text-decoration: none;
}
.not-completed-or-not-accepted{
  background-color: rgb(235, 218, 164);
}
 .button {
     background: rgb(66, 184, 221);
     color: white;
     text-align: center;
     float: right;
     font-size: 1.1em;
}
 .styled-button {
     padding: 8px 16px;
     background: rgb(76, 140, 161);
     color: rgb(200, 223, 163);
     text-align: center;
     font-size: 1.1em;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     text-decoration: none;
     display: inline-block;
     transition: background-color 0.2s, transform 0.1s;
}
.styled-button:hover {
     background: rgb(56, 120, 141);
     color: white;
}
.styled-button:active {
     transform: scale(0.97);
}
 .available {
     color: green;
}
 .full {
     color: rgb(173, 25, 94);
}
 .right, .pull-right {
     text-align: right;
     float: right;
}
 .pull-left {
    text-align: left;
    float: left;
}
 .text-center {
    position: relative;
}
 .text-center > .pull-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
}
 .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
 .flex-between > .pull-right,
 .flex-between > .pull-left {
    float: none;
}
.align-right {
    text-align: right;
}
.align-left {
   text-align: left;
}
 .long-text {
     white-space: nowrap;
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
     max-width: 270px;
}
 .long-text:hover{
     overflow: visible;
     white-space: normal;
     transition:0.5s;
     height:auto;
}
.medium-text {
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    max-width: 200px;
}
.medium-text:hover{
    overflow: visible;
    white-space: normal;
    transition:0.5s;
    height:auto;
}
 .centered-form{
     margin-left: 15%;
     margin-right: 15%;
}
 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}
.center-logo {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 30%;
}
 .text-center {
    text-align: center;
    font-size: 1em;
}
 .vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
 .vertical-padding-top {
    padding-top: 100px;
 }
/* flip cards */
 .flip-card {
     background-color: transparent;
     width: 300px;
     height: 300px;
     perspective: 1000px;
}
 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.6s;
     transform-style: preserve-3d;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
}
 .flip-card-front, .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
}
 .flip-card-front {
     background-color: #bbb;
     color: black;
}
 .flip-card-back {
     background-color: #2980b9;
     color: white;
     transform: rotateY(180deg);
}
/* text selection effects */
 ::-moz-selection {
    /* Code for Firefox */
     color: red;
     background: yellow;
}
 ::selection {
     color: red;
     background: yellow;
}

/* search by keywords */
.search-instructions {
  text-align: center;
  font-size: 1em;
  padding-left: 10px; 
  padding-right: 10px; 
  padding-bottom: 25px;
}

.search-result-summary {
  text-align: left;
  /* A block that shrinks to its text: it hugs the content like the old
     float did, without being pulled out of flow (where it overlapped
     whatever followed) and without inheriting a centred parent's alignment. */
  display: block;
  width: fit-content;
  margin-right: auto;
  margin-left: 10px;
  margin-bottom: 4px;
  padding: 2px 6px;
  background-color: #e7f3fe;
  font-size: 0.95em;
}

/* pagination */
.pagination-container {
  /* One compact row: page links and the jump box share the line */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 10px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination__disabled,
.pagination__gap {
  display: block;
  /* Big enough to hit with a thumb without hunting */
  min-width: 34px;
  padding: 6px 8px;
  text-align: center;
  color: black;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination__disabled,
.pagination__gap {
  color: #a9a9a9;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: rgb(229, 190, 190);
  border-radius: 5px;
}

/* Jumping straight to a page beats clicking through a thousand of them */
.pagination-jump {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
  color: #6b6b5a;
}

/* The number spinner is drawn inside the field, so on a four-digit page number it
   sat on top of the digits. Nothing here needs stepping one page at a time - the
   reader types the number and submits - so the spinner goes and the digits get the
   whole box. */
.pagination-jump input {
  appearance: textfield;
  -moz-appearance: textfield;
  text-align: center;
  /* Four digits, which covers the longest list on the site; the old 5.5em was
     sized around a spinner that is now gone. */
  width: 4em;
  padding: 2px 4px;
}

.pagination-jump input::-webkit-outer-spin-button,
.pagination-jump input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination-jump button {
  background: #fff;
  border: 1px solid rgb(169, 169, 169);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0 10px;
}

.pagination-jump button:hover {
  border-color: #8a8a72;
}

/* One height for the pair: the shared form stylesheet pads inputs for stacked
   forms with an `!important`, which left the field half again as tall as the
   button next to it. */
.pagination-jump input,
.pagination-jump button {
  box-sizing: border-box;
  height: 30px;
  line-height: 1.2;
}

@media screen and (max-width: 600px) {
  /* Keep the bar to one row on a phone: arrows lose their labels */
  .pagination__word {
    display: none;
  }
}
/* Links that leave the site for a Google Drive folder. The trailing arrow is the
   usual sign for "this opens somewhere else"; small and muted so a column of them
   does not shout. (Font Awesome's brand set is subsetted here and has no Drive
   glyph, so the solid arrow is also the one that actually renders.) */
.drive-link__icon {
  font-size: 0.75em;
  margin-left: 5px;
  opacity: 0.65;
  vertical-align: baseline;
}

/* Type and sort chips above the downloads list. They are links, not a form: one
   click, a real URL the reader can bookmark or go back from, and no JavaScript to
   keep the control in sync with what the page is actually showing. */
.dl-facets {
  margin: 0 auto;
  max-width: 760px;
  padding: 6px 10px 0;
}

.dl-facets__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-bottom: 4px;
}

.dl-facets__label {
  color: #7a7a6a;
  font-size: 0.85em;
}

.dl-chip {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid #ccc;
  border-radius: 12px;
  color: #1a5276;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.5;
  padding: 2px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.dl-chip:hover {
  border-color: #8a8a72;
}

.dl-chip--on {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.dl-chip__icon {
  margin-right: 5px;
  opacity: 0.75;
}

/* Downloads list. Each result is a card, not a table row: the names are long and
   the numbers are short, so a table gave most of its width to empty space beside
   the one thing anybody reads, and pinned that name to the far left of a very wide
   screen. A card grid puts the names where the eye already is and lets the folder
   breadcrumb wrap downwards instead of stretching the row sideways. */
.dl-cards {
  display: grid;
  /* auto-fill rather than a fixed count: four columns on a desktop, one on a
     phone, and nothing to keep in sync with a media query. */
  /* min(310px, 100%) rather than a bare 310px: on a 320px phone the track would
     otherwise be wider than the screen and push the whole page sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* The page wrapper is .text-center, which cards do not want. */
  text-align: left;
}

.dl-card {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 8px;
  display: flex;
  /* A column so the footer can be pushed to the bottom edge: the cards in a grid
     row are the same height anyway, and a footer floating mid-card looks broken. */
  flex-direction: column;
  padding: 11px 13px;
}

.dl-card:hover {
  border-color: #b9b99f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dl-card__head {
  display: flex;
  gap: 8px;
}

.dl-card__index {
  color: #a8a894;
  flex: none;
  font-size: 0.8em;
  padding-top: 0.3em;
}

.dl-file {
  font-size: 1.02em;
  /* Three lines at most. A handful of files are named like a paragraph and would
     otherwise set the height of every card in their row. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.dl-file__icon {
  margin-right: 7px;
  width: 1.1em;
}

/* Format colours, borrowed from the apps that own these files, so a long list can
   be skimmed by shape and colour before anyone reads a label. */
.dl-file__icon--pdf { color: #c0392b; }
.dl-file__icon--doc { color: #2b5797; }
.dl-file__icon--slide { color: #d35400; }
.dl-file__icon--sheet { color: #1e7145; }
.dl-file__icon--audio { color: #7d5ba6; }
.dl-file__icon--video { color: #b03a5b; }
.dl-file__icon--image { color: #1a7f8e; }
.dl-file__icon--archive { color: #8a6d3b; }
.dl-file__icon--book { color: #6b4f2a; }
.dl-file__icon--text,
.dl-file__icon--folder,
.dl-file__icon--other { color: #7a7a6a; }

/* The folder path. Two lines of chips, then it stops - these paths run to five or
   six levels on the deepest folders and would otherwise be the tallest thing on
   the card, which is backwards for something nobody came here to read. */
.dl-meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 6px;
  overflow: hidden;
}

.dl-crumb {
  background-color: #f4f4ec;
  border: 1px solid #e2e2d2;
  border-radius: 10px;
  color: #5c6b52;
  display: inline-block;
  font-size: 0.78em;
  line-height: 1.5;
  margin: 2px 4px 0 0;
  padding: 1px 8px;
  text-decoration: none;
  word-break: break-word;
}

.dl-crumb:hover {
  background-color: #e9e9dc;
  color: #1a5276;
}

/* The first chip is the source folder, the rest are levels inside it. */
.dl-crumb--root {
  background-color: #eef3ea;
  border-color: #d5e0cc;
}

.dl-crumb__icon {
  margin-right: 5px;
  opacity: 0.6;
}

.dl-card__foot {
  align-items: center;
  color: #7a7a6a;
  display: flex;
  font-size: 0.82em;
  gap: 10px;
  /* Pin the footer to the bottom of the card whatever the name above it did. */
  margin-top: auto;
  padding-top: 10px;
}

/* Size and date are short and exact - never shorten them, or a narrow card shows
   "240..." with nothing to say what the rest was. */
.dl-card__fact {
  flex: none;
  white-space: nowrap;
}

/* The owner is the one footer item that can be long, so it is the one that gives
   way. Its title attribute carries the whole name for anyone who wants it. */
.dl-card__fact--owner {
  align-items: baseline;
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

/* Only the name gives way. The arrow beside it is the sign that the link leaves
   the site, and a cut-off cue is worse than none. */
.dl-card__owner-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-card__fact-icon {
  margin-right: 4px;
  opacity: 0.6;
}

/* The one control on the card, kept at the far end so it is in the same place on
   every card in the grid. */
.dl-card__download {
  flex: none;
  margin-left: auto;
}

/* customized table */
.styled-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  clear: both;
  max-width: 100%;
}

.styled-table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.styled-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.styled-table td {
  border: 1px solid rgb(241, 225, 225);
  padding: 8px;
}

.styled-table tr{
  background-color: #cdcfcb;
}

.styled-table tr:nth-child(odd){background-color: #f2f2f2;}

.styled-table tr:hover {background-color: rgb(182, 176, 176);}

/* Technical columns (raw external IDs) carry no value on a phone, where they
   push the useful columns off-screen. Hide them on narrow viewports. */
@media screen and (max-width: 900px) {
  .styled-table .col-tech {
    display: none;
  }
}

.styled-table th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  /* background-color: rgb(102, 151, 103);
  color: white; */
  background-color: rgb(187, 214, 187);
  color: rgb(114, 98, 16);
}
/* Course preview chips on the classroom listings: each course is its own
   target instead of one run-on string of titles. */
.course-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.course-chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(78, 13, 13, 0.25);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.55);
  color: #1a5276;
  font-size: 0.95em;
  line-height: 1.4;
}

.course-chip:hover {
  background-color: #fff;
  border-color: rgba(78, 13, 13, 0.5);
}

.course-chip-more {
  background-color: transparent;
  border-style: dashed;
  color: #4e0d0d;
}

/* Study-major overview cards */
.major-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 0 auto 30px;
  max-width: 1100px;
  padding: 0 14px;
}

.major-card {
  background-color: #fff;
  border: 1px solid #d9c7a0;
  border-radius: 6px;
  color: #29251f;
  display: block;
  height: 100%;
  padding: 14px 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.major-card:hover {
  border-color: #b99c60;
  box-shadow: 0 8px 20px rgba(62, 47, 25, 0.15);
  transform: translateY(-2px);
}

.major-card__title {
  color: #1a5276;
  display: block;
  font-size: 1.15em;
}

.major-card__description {
  color: #6b6257;
  display: block;
  font-size: 0.88em;
  line-height: 1.4;
  margin-top: 4px;
}

.major-card__count {
  color: #8a7a6a;
  display: block;
  font-size: 0.85em;
  margin-top: 8px;
}

/* Cross-search hint: each search page points at the matches sitting in the
   other half of the library (lessons <-> YouTube). */
.cross-search {
  max-width: 1100px;
  margin: 12px auto;
  padding: 10px 14px;
  border: 1px solid #d8d3b8;
  border-left: 4px solid rgb(190, 113, 35);
  background-color: #fbf9ef;
  text-align: left;
}
.cross-search__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 1.05em;
}
/* The rule only separates the head from a preview list, so skip it when the
   head is the whole box. */
.cross-search__head:not(:last-child) {
  padding-bottom: 6px;
  border-bottom: 1px solid #e6e1cc;
  margin-bottom: 6px;
}
.cross-search__list {
  margin: 0;
  padding-left: 1.2em;
}
.cross-search__list li {
  padding: 3px 0;
}

/* Search hits inside a title: the keyword should be findable without reading
   the whole line. */
mark {
  background-color: #ffe9a8;
  color: inherit;
  padding: 0 1px;
}

.nowrap {
  white-space: nowrap;
}

/* Playlist page: what the list is, and where the reader stopped in it. */
.playlist-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: #6b6b5a;
  font-size: 0.9em;
  padding-left: 8px;
}
/* The facts read as one line: 共3集 · 3:07:03 · 索达吉堪布 */
.playlist-meta > span + span::before {
  content: "·";
  padding-right: 10px;
  color: #b8b2a0;
}
.playlist-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 8px;
}
.playlist-resume__done {
  color: rgb(118, 180, 118);
}

/* A progress bar small enough to sit in a table cell. */
.progress-mini {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 8px;
  background-color: rgb(209, 212, 205);
  border-radius: 4px;
  overflow: hidden;
}
.progress-mini__fill {
  display: block;
  height: 100%;
  background-color: rgb(118, 180, 118);
}
.progress-mini__label {
  font-size: 0.9em;
  color: #6b6b5a;
  padding-left: 6px;
}

/* Finished rows step back so the unwatched ones stand out. */
.styled-table tr.is-watched td,
.styled-table tr.is-watched td a {
  color: #8f8f80;
}

/* These tables sit inside a .text-center page wrapper, so their cells inherited
   centring while the headers stayed left: every title started at a different x,
   and the header sat nowhere near the column it named. Text reads from the left;
   the short numeric columns stay centred under their own heading. */
.styled-table--text td {
  text-align: left;
}
.styled-table--text th.col-num,
.styled-table--text td.col-num {
  text-align: center;
}

/* Playlist list filters: one GET form, so the query lives in the URL. */
/* One row of controls above a listing. `.playlist-filters` is the same bar under
   an older name; both pages share these rules so the two never drift apart. */
.filter-bar,
.playlist-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 10px;
}

/* forms_styling.css dresses every input for a stacked form: full width and
   `padding: 8px 10px !important`. On this one-line bar that made the search box
   half again as tall as the select next to it, stretched the checkbox across the
   row, and left the button a third height. Give the three controls one height and
   let the checkbox be a checkbox again. */
.filter-bar input[type="search"],
.filter-bar__go,
.playlist-filters input[type="search"],
.playlist-filters select,
.playlist-filters__go {
  box-sizing: border-box;
  font-size: 0.95em;
  height: 34px;
  line-height: 1.2;
  vertical-align: middle;
}
.filter-bar input[type="search"],
.playlist-filters input[type="search"] {
  /* max-width rather than min(): the shared form stylesheet already sets
     `width: 100%`, and this caps it without fighting that declaration. */
  max-width: 320px;
  width: 100%;
}
/* Native select chrome (grey system chevron, its own button face) sat oddly next
   to the flat white search box; one arrow of our own puts them in the same set.
   Padding-right leaves room for it. */
.playlist-filters select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  padding: 4px 30px 4px 10px;
  /* Auto width follows the longest option, and a channel title can be long enough
     to push the rest of the bar off-centre. */
  max-width: 260px;
  width: auto;
}
.filter-bar__go,
.playlist-filters__go {
  padding: 0 16px;
}
.playlist-filters__check {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}
.playlist-filters__check input[type="checkbox"] {
  height: auto;
  margin: 0;
  min-height: 0;
  padding: 0 !important;
  width: auto;
}

/* Touch targets: the shared stylesheet lifts inputs to 44px on coarse pointers,
   which the button would otherwise miss and stand shorter than its neighbours. */
@media (pointer: coarse) {
  .filter-bar input[type="search"],
  .filter-bar__go,
  .playlist-filters input[type="search"],
  .playlist-filters select,
  .playlist-filters__go {
    height: 44px;
  }
}

/* Play page: video on the left, the rest of the playlist beside it, so the
   reader can see where this episode sits without leaving the page. */
.play-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 10px;
}
.play-main {
  flex: 1 1 auto;
  min-width: 0;
}
.play-head {
  /* Lives inside the main column, not the page: centred on the page it sat
     half the sidebar's width to the right of the video it names. */
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 4px;
}
.play-video {
  max-width: 1200px;
  margin: 0 auto;
}
.play-side {
  flex: 0 0 320px;
  max-width: 320px;
  text-align: left;
}
.play-side__box {
  border: 1px solid #d8d3b8;
  background-color: #fbf9ef;
}
.play-side__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.95em;
}
.play-side__title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-side__count {
  color: #6b6b5a;
  white-space: nowrap;
}
.play-side__progress {
  padding: 0 10px 6px;
}
.play-side__progress .progress-mini {
  width: 100%;
}
.play-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid #e6e1cc;
}
.play-side__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #efeada;
  font-size: 0.9em;
}
.play-side__item a {
  flex: 1 1 auto;
  min-width: 0;
}
.play-side__order {
  color: #8f8f80;
  min-width: 2em;
  text-align: right;
}
.play-side__duration {
  color: #8f8f80;
  white-space: nowrap;
}
.play-side__item.is-current {
  background-color: #f2e7cf;
}
.play-side__item.is-current a {
  font-weight: bold;
}
.play-side__item.is-watched a {
  color: #8f8f80;
}
.play-side__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
}
.play-side__tools {
  padding: 0 10px 8px;
}
.play-side__filter {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid #d8d3b8;
  font-size: 0.9em;
}
.play-side__status {
  padding: 8px 10px;
  color: #6b6b5a;
  font-size: 0.9em;
}
.play-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.play-nav__side {
  font-size: 1.3em;
}
.play-nav__link {
  white-space: nowrap;
}
.play-nav__label {
  font-size: 0.7em;
}

/* Under the two-column breakpoint the panel sits below the video, collapsed. */
@media screen and (max-width: 1000px) {
  .play-layout {
    display: block;
  }
  .play-side {
    max-width: none;
    padding-top: 12px;
  }
  .play-side__list {
    max-height: 50vh;
  }
}

/* A title that opens the player says so; the explicit "watch" column that used
   to carry that job was dropped as duplication. */
.play-icon {
  color: rgb(190, 113, 35);
  padding-right: 5px;
  font-size: 0.9em;
}

/* Nothing matched in this table - say so instead of leaving a bare header. */
.search-empty {
  padding: 16px 10px;
  text-align: center;
  color: #6b6b5a;
}

/* styles for special elements */
 a {
     text-decoration: none;
}

/* Use a media query to add a breakpoint at 600px: */
 @media screen and (max-width: 800px) {
     .userview {
         padding-top: 20px;
         width: 100%;
        /* The width is 100%, when the viewport is 600px or smaller */
    }
     .header {
         width: 95%;
         min-width: 300px;
         max-width: 800px;
         text-align: center;
         margin-top: 15px;
    }
     .content {
         width: 95%;
         min-width: 300px;
         max-width: 800px;
    }
     .float-card-2-cols {
         background-color: rgba(192, 189, 189, 0.582);
        /* margin: 10px 10px 10px 10px;
         */
         width: 95%;
        /* float:left;
         */
    }
     table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
    }
     table {
         width: 95%;
    }
}

.play-pause-button{
  font-size: 50px;
  cursor: pointer;
}

.audio_player {
	width: 30%;
	height: 20px;
	min-width: 300px;
	margin: 0 auto;
}

.audio_player_in_table {
	width: 300px;
	height: 20px;
}

/* Accessibility: Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #2196F3;
  color: #fff;
  z-index: 9999;
  text-decoration: none;
  font-size: 1em;
}