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

/* One column that fills the window: the content region takes whatever the bar and
   the colophon do not, so a short page has no dead strip under it and nothing to
   scroll. This was `min-height: calc(100vh - 70px)` against a navbar that is now
   56px and a footer that is 30, which left every page about 40px taller than the
   window and permanently, pointlessly scrollable. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* content of the page */
 .content {
     background-color: rgba(192, 189, 189, 0.355);
     /* `0 auto`, not `auto`: a vertical auto margin on a flex item absorbs the
        free space that `flex: 1` exists to hand to this element. */
     margin: 0 auto;
     font-size: 1.07em;
     width: 100%;
     min-width: 300px;
     /* max-width: 1200px; */
     padding: 10px 0px 16px 0px;
     flex: 1 0 auto;
}
.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;
}
/* A 44px disc rather than a text pill: the words cost a third of the width for
   a control whose meaning the arrow already carries, and the space they freed
   went to the ring. The ring tracks scroll position, which is the one thing a
   reader of a long 卷 actually wants to know here. */
.js-cd-top {
  position: fixed;
  /* env() keeps it off the home indicator on a phone, where a flat 12px would
     put it under the browser's own bottom chrome. */
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  /* 38px is under the 44px WCAG 2.5.5 touch-target floor, chosen deliberately for
     a lighter footprint. The disc is the whole hit area and it sits in an empty
     corner, so nothing crowds it - but it is a smaller thumb target than the
     guideline wants. */
  width: 38px;
  height: 38px;
  padding: 0;
  /* 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;
  color: #4e0d0d;
  text-decoration: none;
  background-color: rgba(251, 249, 239, 0.94);
  border: 1px solid rgba(78, 13, 13, 0.12);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(60, 55, 25, 0.18);
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.js-cd-top:hover {
  background-color: #fff;
  color: #4e0d0d;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60, 55, 25, 0.24);
}
.js-cd-top:focus-visible {
  outline: 2px solid #4e0d0d;
  outline-offset: 3px;
}
.js-cd-top-show {
  display: flex;
}

/* Sits on the border box, so the ring reads as the rim of the disc. */
/* viewBox stays 0 0 44 44 while the box shrinks, so the geometry just scales.
   back-to-top.js works in the SVG's own units and needs no adjusting. */
.js-cd-top__ring {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 38px;
  height: 38px;
  pointer-events: none;
  transform: rotate(-90deg);
}
.js-cd-top__track {
  fill: none;
  stroke: rgba(78, 13, 13, 0.14);
  stroke-width: 2.9;
}
.js-cd-top__bar {
  fill: none;
  stroke: #4e0d0d;
  stroke-width: 2.9;
  stroke-linecap: round;
  /* back-to-top.js sets the dash values from the real radius on load. */
  stroke-dashoffset: 999;
  transition: stroke-dashoffset 0.1s linear;
}
.js-cd-top__icon {
  font-size: 0.85rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-cd-top,
  .js-cd-top__bar {
    transition: none;
  }
  .js-cd-top:hover {
    transform: none;
  }
}
.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,
.facets {
  margin: 0 auto;
  max-width: 760px;
  padding: 6px 10px 0;
}

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

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

.dl-chip,
.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,
.chip:hover {
  border-color: #8a8a72;
}

.dl-chip--on,
.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: the video has the page to itself, and the rest of the playlist is a
   drawer a press away. It used to be a 320px column pinned beside the player on
   every episode, which is a lot of the window spent on a list the reader had
   usually just come from - and on a phone it sat under the video whether or not
   anybody wanted it. */
.play-layout {
  /* The player takes the window, bounded by the window's own height: a 16:9
     frame as wide as a desktop screen is taller than one, and a fixed 960px cap
     wasted half of a big monitor. 250px is everything else on the page - the
     bar, the title, the episode row, the colophon - and it is a guess: what
     that comes to depends on whether the title wrapped, so play-fit.js measures
     it and overwrites this variable. This value is what a reader without
     JavaScript gets, and is deliberately a little generous; the measured total
     is 216 now that the done switch shares the episode row and the YouTube
     fallback link moved into the title bar. */
  --play-width: min(1400px, calc((100vh - 225px) * 16 / 9));
  margin: 0 auto;
  max-width: 1500px;
  padding: 0 10px;
}
.play-main {
  min-width: 0;
}
/* Title, player and episode nav share one width, so the three read as one
   column instead of three centred blocks of different sizes. */
.play-head {
  margin: 0 auto;
  max-width: var(--play-width);
  padding-bottom: 4px;
}
.play-video {
  margin: 0 auto;
  max-width: var(--play-width);
}
/* The YouTube mark, for the reader whose embed will not play. Font Awesome's
   brand font by way of the glyph rather than its fab class, which this site has
   already claimed for a floating button and which would throw the mark into the
   bottom corner of the window. */
.play-head__watch::before {
  color: #c4302b;
  content: "\f167";
  font-family: "Font Awesome 5 Brands";
  font-size: 0.9em;
  font-weight: 400;
}
/* The 16:9 box the iframe fills. padding-bottom rather than aspect-ratio: the
   ratio has to hold on the browsers that still see the height: 0 trick. */
.play-frame {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.play-frame iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* The drawer itself. Fixed and translated off the left edge, so it is out of the
   flow entirely and `visibility: hidden` keeps it off the tab order until it is
   opened. Left, and the handle at the bottom-left corner, because that is where
   the 法本 reader's contents drawer is: two drawers on one site that come in from
   opposite edges is a coin toss every time. */
.play-drawer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 60;
}
.play-drawer.is-drawer-open {
  visibility: visible;
}
.play-drawer__scrim {
  background-color: rgba(40, 38, 30, 0.35);
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 100%;
}
.play-drawer.is-drawer-open .play-drawer__scrim {
  opacity: 1;
}
.play-drawer__panel {
  background-color: #fbf9ef;
  border-right: 1px solid #d8d3b8;
  box-shadow: 2px 0 14px rgba(78, 13, 13, 0.12);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 88vw;
  left: 0;
  overflow-y: auto;
  /* Room for the floating handle, which sits over this corner and would
     otherwise cover the last row of the panel. */
  padding-bottom: 76px;
  position: absolute;
  text-align: left;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  width: 360px;
}
.play-drawer.is-drawer-open .play-drawer__panel {
  transform: translateX(0);
}
.play-drawer__close {
  background: none;
  border: 0;
  color: #8f8f80;
  cursor: pointer;
  font-size: 1.4em;
  line-height: 1;
  padding: 0 2px;
}
.play-drawer__close:hover {
  color: #4e0d0d;
}
/* The handle, in the bar above the video, saying where this episode sits in the
   playlist - which is what the panel's header was there to tell you. */
.play-drawer__handle {
  font-size: 0.62em;
  white-space: nowrap;
}
/* The same handle again, pinned to the corner: the bar scrolls away once the
   reader is into a long page of notes. */
.play-drawer__fab {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #d9d9c6;
  border-radius: 50%;
  bottom: 26px;
  box-shadow: 0 2px 10px rgba(78, 13, 13, 0.14);
  color: #4a7c59;
  cursor: pointer;
  height: 42px;
  left: 18px;
  position: fixed;
  width: 42px;
  /* Above the scrim: it is the way out as well as the way in. */
  z-index: 70;
}
.play-drawer__fab:hover {
  border-color: #4a7c59;
}
/* Fills the drawer, so the footer links sit at its foot rather than halfway up
   it after a seven-episode playlist. */
.play-side__box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.play-side__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 8px;
  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%;
}
/* The list takes whatever height the drawer has left rather than a slice of the
   viewport: inside a full-height panel a 60vh cap left dead space under it. */
.play-side__list {
  border-top: 1px solid #e6e1cc;
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.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;
}
/* What comes after the video: the done switch and the two neighbouring
   episodes. Both used to sit above the player - a row of bare chevrons whose
   only clue to what came next was a hover tooltip, a screen's scroll away from
   where an episode actually ends. */
.play-after {
  margin: 0 auto;
  max-width: var(--play-width);
  /* The handle keeps its own corner and the row steps aside for it sideways
     instead - see --play-fab-inset. What is left here is a plain gap, because
     play-fit.js counts every pixel of it as chrome and takes it off the player,
     and height is dear: the 46px this used to reserve for the handle was worth
     something like 60px of video width. A phone scrolls, and there the handle
     really does float over the last row, so the gutter comes back below. */
  padding: 10px 0 8px;
}
/* Prev, done switch, next on one line. The switch had a centred line to itself
   and the neighbours a row below it: two strips of chrome under a player that is
   sized by what is left of the window, so every line here is width the video
   does not get. */
.play-done {
  align-items: center;
  display: flex;
  flex: none;
  font-size: 0.9em;
  gap: 8px;
  justify-content: center;
}
.play-nav {
  align-items: center;
  display: flex;
  gap: 10px;
  /* Room for the drawer handle when the column runs to the window's edge, and
     nothing when it does not. play-fit.js measures which it is. */
  padding-left: var(--play-fab-inset, 0px);
}
/* An absent neighbour holds its side of the row open so the one that does exist
   stays where the reader expects it, rather than sliding under the switch. */
.play-nav__gap {
  flex: 1 1 0;
}
/* One line each, and the title clipped rather than wrapped: two lecture titles
   set over three lines apiece took more of the page than the thing they point
   at, for a control that is read in a glance. */
.play-nav-card {
  align-items: baseline;
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 8px;
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  padding: 5px 12px;
  text-align: left;
  text-decoration: none;
}
a.play-nav-card:hover {
  border-color: #b9b9a0;
}
.play-nav-card--next {
  flex-direction: row-reverse;
  text-align: right;
}
.play-nav-card__label {
  color: #8a8a78;
  flex: none;
  font-size: 0.78em;
}
.play-nav-card__title {
  color: #1a5276;
  flex: 1 1 auto;
  font-size: 0.9em;
  line-height: 1.6;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.play-nav-card:hover .play-nav-card__title {
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .play-after {
    padding-bottom: 46px;
  }

  .play-drawer__fab {
    bottom: 18px;
    left: 12px;
  }

  /* Side by side on a phone the two cards get about eight characters each. */
  .play-nav {
    flex-wrap: wrap;
  }

  .play-nav-card {
    flex: 1 1 100%;
  }

  /* Nothing to hold open once the cards stack. */
  .play-nav__gap {
    display: none;
  }

  .play-done {
    flex: 1 1 100%;
  }

  .play-nav-card--next {
    flex-direction: row;
    text-align: left;
  }
}

/* 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;
}
/* WeChat portal list. A table gave four narrow columns to the three latest
   article titles - the longest text on the page - and a wide one to a row number.
   Cards put the portal name and its newest headlines on the same block and let
   the titles wrap downwards instead of squeezing sideways. */
.portal-cards {
  display: grid;
  /* min(340px, 100%) so a 320px phone gets one full-width track instead of a
     column wider than the screen. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 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;
}

.portal-card {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 8px;
  display: flex;
  /* A column so the admin footer sits on the bottom edge whatever the headlines
     above it did - grid rows are equal height anyway. */
  flex-direction: column;
  padding: 12px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

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

.portal-card__head {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

/* Freshness, said in words. Stale accounts keep their date but stop competing for
   attention with the ones still posting. */
.portal-card__updated {
  color: #8a8a78;
  font-size: 0.78em;
  margin: 6px 0 0;
}

.portal-card__updated--stale {
  color: #b5b5a2;
}

.portal-card__name {
  font-size: 1.05em;
  /* Takes the slack so the count pill stays pinned to the right edge. */
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* The article count doubles as the link into the portal, so it is a target, not
   a label: a pill reads as one and is easier to hit than a bare number. */
.portal-card__count {
  background-color: #eef3ea;
  border: 1px solid #d5e0cc;
  border-radius: 10px;
  color: #4a7c59;
  flex: none;
  font-size: 0.8em;
  line-height: 1.5;
  padding: 1px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.portal-card__count:hover {
  background-color: #e2ebdc;
  color: #35603f;
}

/* Two lines at most. A few portals describe themselves at paragraph length and
   would otherwise set the height of every card in their row. */
.portal-card__desc {
  color: #6b6257;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.86em;
  line-height: 1.45;
  margin: 6px 0 0;
  overflow: hidden;
}

.portal-card__latest {
  border-top: 1px solid #ececdf;
  list-style: none;
  margin: 9px 0 0;
  padding: 8px 0 0;
}

.portal-card__latest li + li {
  margin-top: 5px;
}

.portal-latest__link {
  display: flex;
  font-size: 0.86em;
  gap: 7px;
  text-decoration: none;
}

.portal-latest__date {
  color: #8a8a78;
  flex: none;
}

/* One line per headline: three of them are a preview, not the article list, and
   a wrapped title makes the cards in a row jump to different heights. */
.portal-latest__title {
  color: #1a5276;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-latest__link:hover .portal-latest__title {
  text-decoration: underline;
}

.portal-card__empty {
  color: #9a9a88;
  font-size: 0.85em;
  margin: 9px 0 0;
}

.portal-card__admin {
  align-items: center;
  border-top: 1px solid #ececdf;
  color: #7a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82em;
  gap: 8px;
  /* Pin the admin row to the bottom whatever the card above it holds. */
  margin-top: auto;
  padding-top: 9px;
}

/* The chips carry a count, and the account names are long: let the row breathe a
   little wider than the downloads facets, whose labels are one or two words. */
.facets {
  max-width: 900px;
}

.facets__hint {
  color: #9a9a88;
  font-size: 0.8em;
}

/* A search that found nothing used to render as blank space under the summary
   line, which reads as a broken page rather than an answer. */
.weibo-empty {
  color: #6b6257;
  margin: 24px auto;
  max-width: 460px;
  padding: 18px 16px;
  text-align: center;
}

.weibo-empty__lead {
  font-size: 1.05em;
  margin: 0;
}

.weibo-empty__hint {
  font-size: 0.88em;
  line-height: 1.5;
  margin: 8px 0 12px;
}

/* Search hits inside a post. Underline as well as colour, so the mark survives a
   greyscale print and does not rely on the background alone. */
.weibo-text mark {
  background-color: #fbeaa8;
  border-radius: 2px;
  color: inherit;
  padding: 0 1px;
}