body {
  color: #eee;
  background: #0a0a0a;

  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.65em;
  font-weight: 500;
}

h1,
h2,
h3 {
  color: white;
}

body.light-page {
  color: #222;
  background: #fff;
}

.text-muted {
  color: #aaa;
}

.content-section-a,
.content-section-b {
  background: #0a0a0a;
  color: #ddd;
  border-top: 1px solid #333;
  border-bottom: none;
}

.content-section-b {
  background: #1c1c1c;
}

/*.banner .container .row {*/
/*text-align: center;*/
/*}*/

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #222;
}

.table.episodes {
  font-size: 15px;

  th {
    border-bottom: 2px solid #aaa;
  }

  tbody > tr > th,
  tbody > tr > td {
    border-top: 1px solid #333;
  }
}

.full-page-content {
  padding: 40px;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  color: #ddd;
  font-size: 16px;
}

.full-page-content .top {
  padding-left: 20px;
}

.show-episode-page.full-page-content {
  max-width: 1500px;
}

.show-episode-page table.kick td,
.show-episode-page table.kick td * {
  vertical-align: top;
}

.full-page-content.edit-show {
  max-width: none;
}

.show-side {
  text-align: center;
}

.guest {
  /*float: left;*/
  display: inline-block;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
  /*margin-top: 10px;*/
}

.guests.singular {
  text-align: center;
}

.guests.singular .guest {
  /*padding-left: 60px;*/
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.guest .guest-name {
  font-size: 12px;
  padding-top: 5px;
  color: white;
}

.guest img.img {
  height: 128px;
  border: 2px solid gray;
}

.guest-and-sponsor-section {
  background-color: #222;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #444;
  margin-top: 0px;
  margin-bottom: 40px;
}

.main-text .sponsor-header a {
  font-size: 12px;
  color: white;
}

.sponsor-header img {
  height: 125px;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 10px 20px 0px;
  vertical-align: baseline;
}

.guest,
.sponsor-header {
  text-align: center;
  display: inline-block;
}

.guest-row {
  margin-top: 20px;
}

.guest-and-sponsor-area {
  border: 1px solid gray;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #333;
}

.title {
  font-size: 24px;
}

.player {
  /*float: left;*/
  margin-top: 0px;
  text-align: center;
}

/*.player .btn {*/
/*    font-size: 16px;*/
/*    width: 250px;*/
/*    margin-top: 5px;*/
/*}*/

/*.player .btn.first {*/
/*    margin-top: 24px;*/
/*}*/

.show-main .action-buttons {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.show-main .action-buttons a.btn {
  display: inline-block;
  margin: 0px 3px 10px;
  color: white;
}

.show-main .action-buttons a.btn.btn-default {
  color: black;
}

.btn.soundcloud {
  background-color: #ff6b1f;
}

.btn.tx-btn {
  background-color: #4fd5d9;
}

.host-image {
  height: 200px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.host-image-area.about .host-image {
  margin-top: 0px;
}

.host-image-area.about {
  font-size: 18px;
  text-align: left;
}

.host-image-area {
  text-align: left;
  font-size: 24px;
}

.host-image-caption {
  text-align: center;
  display: inline-block;
}

/*.full-page-head {*/
/*margin-top: 51px;*/
/*background-size: cover;*/
/*height: 175px;*/
/*}*/
/*.full-page-head.contact {*/
/*background: url(/static/img/about-banner-short.png) no-repeat center center;*/
/*}*/

/*.contact .header-image {text-align: center;}*/
/*.contact .header-image img {*/
/*width: 700px;*/
/*margin-top: -10px;*/
/*}*/

.contact .contact-side img {
  width: 400px;
  margin-top: 20px;
}

.contact .main-text {
  font-size: 20px;
  text-align: left;
}

.friends .main-text {
  font-size: 20px;
  text-align: left;
}

.friends .twitter {
  font-size: 24px;
  margin-left: 100px;
}

.logo-image {
  height: 40px;
  margin-top: -10px;
}

.main-text a,
.about a,
.episodes a,
a.light-access-link {
  color: #5bc0de;
}

.contact .contact-types {
  /*text-align: center;*/
  font-size: 20px;
  margin-left: 0px;
}

.contact .contact-types a {
  color: #5bc0de;
  display: inline-block;
  /*margin-right: 20px;*/
  padding: 5px;
}

.main-text {
  text-align: left;
}

.large-content-text {
  font-size: 17px;
}

.main-text,
.large-content-text {
  font-weight: 400;
}

.error-msg {
  color: pink;
}

#account-login input,
#account-login textarea {
  color: black;
  width: 500px;
  padding: 5px;
  font-size: 20px;
}

#account-login input,
#account-login button {
  margin-top: 10px;
}

.show-episode-page .download-coming {
  text-align: center;
}

.show-episode-page .guest-bio {
  text-align: left;
  font-weight: 300;
  padding-top: 10px;
  font-size: 12px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.show-episode-page-placement.patreon-section {
  margin-top: 0px;
}

.all-episodes-page .subscribe-buttons {
  background-color: transparent;
  border: none;
  margin-top: 10px;
  margin-bottom: 30px;
  padding-top: 0px;
}

.all-episodes-page h1 {
  text-align: center;
}

.title-area {
  text-align: center;
}

@media (max-width: 800px) {
  .show-episode-page h1 {
    font-size: 28px;
  }

  .show-episode-page .published-date {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .show-episode-page h1 {
    font-size: 24px;
  }

  .show-episode-page .published-date {
    font-size: 11px;
  }
}

@media (max-width: 500px) {
  .show-episode-page h1 {
    font-size: 20px;
  }

  .show-episode-page .published-date {
    font-size: 10px;
  }
}

.episode-buttons .btn {
  width: 250px;
  margin-right: auto;
  margin-left: auto;
}

.extras-msg {
  color: white;
  padding-bottom: 10px;
}

.extras-area-show-page {
  text-align: center;
  font-size: inherit;
  margin-top: 20px;
  margin-bottom: 10px;
  /*padding-right: 25px;*/
}

.extras-area-show-page.e2 {
  padding-right: 0px;
}

.extras-area-show-page img {
  width: 252px;
  border: 1px solid #666;
}

.error-content-section {
  text-align: center;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 125px;
  margin-bottom: 150px;
}

.error-content-section img {
  height: 450px;
}

.patreon-section {
  font-weight: 300;
  line-height: 2em;
  width: 490px;
  /*text-align: center;*/
  margin: 50px auto 0px;
}

.patreon-section .text {
  margin-left: 0px;
}

.full-page-content.comments {
  padding-top: 5px;
  margin-top: 0px;
}

.transcript-main {
  line-height: 2.2em;
}

.transcript-main p {
  padding: 10px;
  padding-bottom: 20px;
  font-size: 20px;
}

.active-transcript-segment {
  background-color: lightblue;
  color: black;
}

.transcript-episode-page {
  margin-top: 50px;
}

.transcript-episode-page .transcript-sponsor {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.transcript-episode-page audio {
  width: 100%;
  margin-top: 20px;
}

.transcript-episode-page .filter-section {
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

#transcript-player-top {
  background-color: black;
  position: fixed;
  top: 49px;
  width: 100%;
  z-index: 1000;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 1;
  border-bottom: 2px solid #333;
}

#transcript-player-top #tx-global-message {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  display: block;
}

#transcript-player-top #tx-global-message a {
  color: white;
}

#tx-global-message .tx-s-name {
  font-weight: bold;
  color: #2aabd2;
}

#tx-global-message .tx-s-msg {
  color: yellow;
}

#transcript-player-top audio {
  width: 100%;
  /*height: 40px;*/
  background-color: white;
}

.transcript-actions {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.highlight {
  background-color: #ff8;
  color: black;
}

#filter-msg {
  color: #777;
  font-size: 14px;
  padding: 20px;
  padding-bottom: 0px;
  text-align: center;
}

.fa-heart {
  color: red;
}

footer {
  margin-top: 40px;
  font-weight: normal;
}

.copyright,
.made-with-love {
  line-height: 1.5em;
  letter-spacing: 2px;
}

.published-date {
  font-weight: 300;
}

.recorded-date {
  color: #999;
  font-weight: 300;
}

#global-livestream-message {
  display: block;
  text-align: center;
  padding: 8px;
  background-color: #8c1717;
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: 0px;
  font-weight: normal;
  font-size: 24px;
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 1.2px;
}

.page-home #global-livestream-message {
  margin-top: 0px;
}

#global-livestream-message div {
  display: inline-block;
  vertical-align: middle;
}

#global-livestream-message img {
  height: 100px;
  border-radius: 5px;
  vertical-align: middle;
}

#global-sponsor-message {
  display: block;
  text-align: center;
  padding: 8px;
  background-color: #333;
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: -50px;
  font-size: 16px;
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
}

#global-sponsor-message #name_text {
  color: white;
}

.rollbar_orange {
  color: #f7941c;
}

.rollbar_green {
  color: #bfd730;
}

.rollbar_blue {
  color: #02b9d9;
}

#global-sponsor-message .mono {
  font-family: monospace;
}

#global-sponsor-message .strong {
  font-weight: bold;
}

#second-slot {
  margin-top: 1em;
}

.extras-area-show-page img {
  border-radius: 6px;
}

.course-img {
  max-width: 350px;
  text-align: center;
  display: inline-block;
  padding: 8px;
  padding-top: 20px;
  font-size: 12px;
}

.course-img img {
  border-radius: 5px;
}

.course-img a:hover {
  text-decoration: none;
}

.course-img img.sm {
  width: 135px;
}

.episodes .date-text {
  white-space: nowrap;
}

.github-link a {
  /*color: white;*/
  font-size: 24px;
}

.well {
  background-color: #444;
  border: #353535;
}

.navbar-brand.image {
  vertical-align: middle;
}

.navbar-brand.name {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 1.1px;
}

.nav > li > a {
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
}

.logo-key {
  color: #fffd82;
}

.logo-operator {
  color: #fff;
}

.logo-var {
  color: #fff;
}

/* ************ SEARCH ************ */
.search_page input {
  display: inline-block;
  width: 350px;
  font-weight: bold;
  margin-right: 20px;
}

.search_page h1,
.search_page h2 {
  text-align: center;
}

.search_page form {
  text-align: center;
  margin-top: 20px;
}

.search-results-summary {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 10px;
}

.search-result {
  margin-bottom: 48px;
}

.search-result .search-icon img {
  width: 64px;
  height: 64px;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.search-result .e_title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.search-result .e_title a {
  color: #fffd82;
}

.search-result .e_date {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #777;
}

.search-results-summary {
  margin-bottom: 18px;
}

.search-result .e_desc {
  line-height: 1.5;
}

.clearfix {
  clear: both;
}

#direct_player {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #1d1d1d;
}

.become-a-friend {
  text-align: center;
}

/* ******** SUBSCRIBE FOOTER ********** */
#subscribe-area {
  min-height: 200px;
  width: 100%;
  color: #444;
  background: white;

  position: fixed;
  bottom: 0px;
  text-align: center;

  display: none;
  z-index: 10000;
}

#subscribe-area #cta {
  margin-top: 25px;
}

#cta .main-cta {
  padding-top: 10px;
  font-size: 24px;
  color: black;
}

#cta .secondary-cta {
  padding-top: 0px;
  font-size: 18px;
  padding-bottom: 10px;
}

#subscribe-area .btn.btn-primary {
  background-color: #444;
  border-color: #555;
  margin-top: -1px;
}

#subscribe-area form > * {
  margin-top: 5px;
  margin-bottom: 5px;
}

#subscribe-area a#closer {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #999;
  font-weight: lighter;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 24px;
}

#subscribe-area input {
  text-align: center;
}

/* ************************************ */

#comment-button {
  width: 80%;
  background-color: #426082;
  color: white;
  cursor: pointer;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
}

.ethical {
  margin-top: 20px;
  font-style: italic;
  color: #999;
  font-size: 12px;
}

.admin-home .published-episode {
  color: #777;
}

.admin-home {
  font-size: 16px;
}

.admin-home .published-episode i {
  color: lightgreen;
}

.admin-home .upcoming-episode i {
  color: yellow;
}

.admin-home .add-show i,
.admin-home .add-show a {
  color: #ff890e;
}

.admin-home .add-user i,
.admin-home .add-user a {
  color: #00b158;
}

.admin-home .guests .user-id {
  color: orange;
}

.admin-home .guests .user-name {
  color: white;
}

.admin-home .published-episode i,
.admin-home .upcoming-episode i,
.admin-home .add-show i,
.admin-home .add-user i,
.admin-home .guests i {
  display: inline-block;
  min-width: 20px;
}

.admin-section a.btn {
  color: white;
}

.admin-section li.redirect-list {
  margin: 5px;
  color: lightblue;
}

li.redirect-list.ad {
  color: lightgreen;
}

.carbon-offset {
  margin-top: 15px;
  margin-bottom: 15px;
  color: grey;
  font-size: 11px;
  text-align: center;
}

.carbon-offset img {
  height: 20px;
  opacity: 0.6;
  vertical-align: middle;
  margin-top: -5px;
}

.carbon-offset span {
  display: inline-block;
}

.friends .main-text.sponsors .sponsor {
  text-align: center;
  font-size: 14px;
}

.sponsors .sponsor {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  padding: 10px;
  max-width: 210px;
  margin-bottom: 30px;
  vertical-align: top;
}

.sponsors .sponsor img {
  /*height: 150px;*/
  width: 150px;
  margin-bottom: 10px;
  border: 1px solid gray;
  border-radius: 5px;
}

.sponsor a.company {
  color: white;
  font-weight: bold;
}

.sponsor a.product {
  color: #bbb;
  font-size: 0.85em;
  font-weight: 300;
}

.list-inline.social {
  font-size: 36px;
}

footer .social {
  font-size: 36px;
}

.redirect-modified-date {
  display: inline-block;
  min-width: 100px;
  margin-left: 5px;
}

.redirect-count {
  display: inline-block;
  min-width: 45px;
  text-align: right;
  padding-right: 5px;
}

.redirects.main-text {
  font-weight: normal;
}

.streaming-page h1 {
  text-align: center;
  margin-bottom: 20px;
}

.streaming.live {
}

.youtube-banner {
  font-size: 128px;
  display: block;
}

a.youtube-brand {
  color: #ff3737;
  font-weight: bold;
}

.streaming-page .cta-now {
  text-decoration: underline;
}

.streaming-page .active-now {
  color: #00b158;
}

.streaming-page .off-now {
  color: #ff3737;
}

.streaming-page .subtitle {
  text-align: center;
}

.streaming-page .subtitle > div {
  margin-bottom: 20px;
}

.streaming-page a.btn {
  color: white;
}

.streaming.off .subtitle {
  margin-top: 20px;
  font-size: 0.85em;
}

.streaming.off img {
  border-radius: 5px;
}

.live-stream-list .live-stream {
  font-family: monospace;
}

.live-stream-list .live-stream.past {
  color: #636363;
}

/* ******************* Start Youtube overlay image ******************** */
/* Main container */
.youtube-overlay-image {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.youtube-overlay-image .youtube-container {
  text-align: center;
  width: 100%;
}

/* Original text overlay */
.youtube-overlay-image .normal .text {
  color: red;
  font-size: 48px;
}

.youtube-overlay-image .hover .text {
  color: white;
  font-size: 24px;
}

.youtube-overlay-image .text {
  color: red;
  line-height: 1.5em;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* New overlay on hover */
.youtube-overlay-image .hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  margin-top: 30px;
  transition: 0.5s ease;
  color: white;
}

/* New overlay appearance on hover */
.youtube-overlay-image:hover .hover {
  opacity: 1;
}

/* Original image */
.youtube-overlay-image .youtube-image {
  border: 1px solid #3b3b3b;
  /*display: block;*/
  width: 560px;
  height: auto;
  border-radius: 5px;
}

/* On screens that are 00px or less */
@media screen and (max-width: 800px) {
  .youtube-overlay-image {
    width: 400px;
  }

  .youtube-overlay-image .youtube-image {
    width: 400px;
  }

  .youtube-overlay-image .youtube-container {
    width: 400px;
  }

  .youtube-overlay-image .text {
    width: 400px;
  }

  .youtube-overlay-image .hover {
    width: 400px;
  }
}

/* On screens that are 500px or less */
@media screen and (max-width: 500px) {
  .youtube-overlay-image {
    width: 300px;
  }

  .youtube-overlay-image .youtube-image {
    width: 300px;
  }

  .youtube-overlay-image .youtube-container {
    width: 300px;
  }

  .youtube-overlay-image .text {
    width: 300px;
  }

  .youtube-overlay-image .hover {
    width: 300px;
  }
}

.live-stream-subtitle {
  text-align: center;
  color: #9f9f9f;
  font-size: 0.75em;
}

/* ******************* End Youtube overlay image ******************** */

.admin-home .upcoming-episode i.clear-youtube-image-button,
.admin-home .published-episode i.clear-youtube-image-button {
  color: #fa7474;
}

.form-control.smaller {
  max-width: 350px;
}

footer .fa-youtube {
  color: #fd1f1f;
}

footer .fa-mastodon {
  /*color: #47aeff;*/
}

.course-footer-link {
  color: #54ff54;
}

/* *********************** Subscribe in your player ******************* */
.subscribe-buttons {
  font-size: 10px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  /*background-color: #000;*/
  padding-top: 20px;
  padding-bottom: 10px;
  /*border-radius: 10px;*/
  /*border: 1px solid #444444;*/
}

.subscribe-buttons a {
  display: inline-block;
  color: white;
  margin: 3px;
  text-align: center;
}

.subscribe-buttons img {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2px;
  padding-right: 2px;

  width: 42px;
  display: block;
}

.subscribe-buttons .subscribe-cta {
  font-size: 1.5em;
  margin-top: 5px;
  font-weight: bold;
  color: white;
}

footer .footer-column {
  text-align: left;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

footer .footer-column.first {
  line-height: 1.64em;
  font-size: 13px;
  font-weight: 400;
  margin-top: 10px;
}

footer .footer-column.first i {
  display: inline-block;
  width: 20px;
  text-align: center;
  vertical-align: middle;
}

footer .footer-column.social a {
  text-align: left;
}

footer .footer-column.social .icon-box {
  display: inline-block;
  width: 60px;
  text-align: center;
}

footer .footer-column a {
  display: block;
}

footer .footer-title {
  font-size: 12px;
}

footer .copyright-footer {
  padding: 20px;
  font-size: 13px;
  text-align: center;
}

footer .copyright-footer a {
  font-weight: 700;
}

footer .admin {
  font-size: 12px;
}

footer .footer-player {
  color: #28bf20;
}

footer {
  /* border-top: 1px solid #1d1d1d; */
  background-color: #131313;
}

footer,
footer a {
  /*background: #222;*/
  color: #ccc;
}

footer a:hover {
  color: #5bc0de;
}

/* General social grid styling for all screen sizes */
footer .social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: start;
}

footer .social-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

footer .social-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

footer .social-link .icon-box {
  margin-right: 0.75rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .social-link .icon-box i {
  font-size: 24px;
}

footer .social-link .icon-box img {
  width: 24px;
  height: 24px;
}

footer .social-link .footer-title {
  font-size: 14px;
  font-weight: 500;
}

/* Mobile responsive footer improvements */
@media (max-width: 768px) {
  footer .container {
    padding: 1rem;
  }

  footer .columns {
    flex-direction: column;
    margin: 0;
  }

  footer .column {
    padding: 0.5rem;
    width: 100% !important;
    flex: none !important;
  }

  footer .column.is-2 {
    display: none; /* Hide spacing column on mobile */
  }

  footer .footer-column {
    width: 100%;
    margin: 0;
    text-align: center;
    padding: 1rem 0;
  }

  footer .footer-column.first {
    border-bottom: 1px solid #333;
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
  }

  footer .footer-column.first a {
    display: inline-block;
    margin: 0.25rem 0.5rem;
    white-space: nowrap;
  }

  /* Social links section styling */
  footer .footer-column.social-links {
    padding: 1.5rem 0;
    border-top: 1px solid #333;
    position: relative;
  }

  /* Add a "Connect with us" label */
  footer .footer-column.social-links::before {
    content: 'Connect with us';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0a0a0a;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 1rem;
  }

  footer .social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    align-items: start;
    justify-items: center;
    max-width: 400px;
    margin: 0 auto;
  }

  footer .social-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 180px;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    text-decoration: none;
  }

  footer .social-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
  }

  footer .social-link .icon-box {
    margin-right: 0.75rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  footer .social-link .icon-box i {
    font-size: 24px;
  }

  footer .social-link .icon-box img {
    width: 24px;
    height: 24px;
  }

  footer .social-link .footer-title {
    font-size: 14px;
    white-space: nowrap;
  }

  footer .footer-title {
    font-size: 14px;
  }

  footer .copyright-footer {
    padding: 1.5rem 1rem;
    border-top: 1px solid #333;
    margin-top: 1rem;
  }

  footer .copyright-footer p {
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
  footer .container {
    padding: 0.75rem;
  }

  footer .footer-column.first a {
    display: block;
    margin: 0.5rem auto;
    text-align: center;
    max-width: 200px;
  }

  /* Single column layout for very small screens */
  footer .social-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-width: 280px;
  }

  footer .social-link {
    max-width: 260px;
    padding: 0.8rem 1rem;
    justify-content: center;
    text-align: center;
  }

  footer .social-link .icon-box {
    width: 28px;
    margin-right: 0.6rem;
  }

  footer .social-link .icon-box i {
    font-size: 20px;
  }

  footer .social-link .icon-box img {
    width: 20px;
    height: 20px;
  }

  footer .social-link .footer-title {
    font-size: 13px;
  }

  footer .footer-title {
    font-size: 13px;
  }

  footer .copyright-footer {
    padding: 1rem 0.75rem;
  }

  footer .copyright-footer p {
    font-size: 12px;
  }
}

.subscribe-page h1,
.subscribe-page h2 {
  text-align: center;
}

blockquote footer,
blockquote small,
blockquote .small {
  border: none;
}

.review-text {
  margin-left: 0px;
  padding-left: 0px;
}

.reviews .section-heading {
  text-align: center;
}

/*.review-text {*/
/*    border: 1px solid #111;*/
/*    border-radius: 10px;*/
/*    background-color: #444;*/
/*    padding: 10px;*/
/*    !*margin: 10px;*!*/
/*    margin-top: 15px;*/
/*    margin-bottom: 15px;*/
/*}*/

.extras-area-show-page .partner-slot img {
  border: 1px solid #333;
  border-radius: 5px;
}

.show-episode-page .partner-slot {
  margin-top: 10px;
}

.cta-button-rect {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid #fffa1f;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*background-color: #fffd82;*/
  background-color: #fffdc9;
  color: black;
  margin-top: -2px;
  margin-left: 5px;
}

.msg-container {
  display: inline-block;
  margin-top: 2px;
}

.banner-yellow {
  color: #fffd82;
}

.banner-purple {
  color: #584675;
}

#global-sponsor-message {
  font-size: 13px;
  letter-spacing: -0.1px;
  font-weight: 400;
}

#global-sponsor-message img {
  height: 26px;
  padding-bottom: 1px;
}

.other_thing .test_watcher {
  background-color: #131325;
}

footer .blog-link {
  color: #f18c1d;
}

.takeaways {
  color: #eee;
}

.takeaways strong {
  font-weight: 300;
  text-decoration: underline;
  /*text-transform: uppercase;*/
}

#takeaways-anchor {
  /*margin-bottom: 60px;*/
}

.takeaways h2 .fontawesome {
  font-size: 16px;
  vertical-align: top;
}

.full_html_text,
.takeaways {
  line-height: 1.75em;
}

.some_thing {
}

summary {
  cursor: pointer;
  text-decoration: underline;
  color: #5bc0de;
  margin-top: 20px;
  margin-bottom: 20px;
}

.transcript-actions a {
  color: white;
}

.transcript-actions a.btn-default {
  color: black;
}

.gallery-heading {
  margin-top: 0px;
  margin-bottom: 5px;
}

/* Global livestream banner fix for Bulma pages */
#global-livestream-message {
  margin: 0;
}

/* ******************* Guests Page Styles ******************** */
.guests-page .title {
  color: var(--tp-text-color, #fff);
  font-size: 36px;
  font-weight: 500;
  margin-top: 18px;
  margin-bottom: 10px;
}

.guests-page .guest-in-list {
  font-size: 17px;
  font-weight: 400;
  padding: 1.5rem;
  margin: 0px auto 1.25rem auto;
  width: 800px;
  max-width: 800px;
  border: 1px solid #333;
  border-radius: 10px;
  background-color: #242424;
  color: var(--tp-text-color, #fff);
}

.guests-page .guest-separator {
  margin-top: 10px;
  margin-bottom: 20px;
}

.guests-page .guest-in-list img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #222;
  border-radius: 50%;
  margin-right: 1.25rem;
  flex-shrink: 0;
}

.guests-page .guest-box {
  display: flex;
  align-items: flex-start;
}

.guests-page .guest-content {
  flex: 1;
  min-width: 0;
}

.guests-page .guest-in-list .bio-in-list {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5rem;
}

.guests-page .guest-in-list .guest-name {
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  color: #fff;
}

.guests-page .guest-in-list .episode-header {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--tp-text-color, #fff);
}

.guests-page .guest-in-list .episode-for-guest {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.guests-page .guest-in-list .episode-for-guest a {
  color: #5bc0de;
  text-decoration: none;
}

.guests-page .guest-in-list .episode-for-guest a:hover {
  color: #5bc0de;
  text-decoration: underline;
}

.guests-page .episode-list {
  list-style-type: disc;
  padding-inline-start: 40px;
  margin-block-start: 0px;
  margin-block-end: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #dddddd;
}

.guests-page .episode-list li {
  margin-bottom: 0;
  line-height: 1.2;
  padding: 0;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
  .guests-page .guest-in-list {
    width: 100%;
    max-width: none;
    margin: 0 10px 1.25rem 10px;
  }

  .guests-page .guest-box {
    flex-direction: column;
  }

  .guests-page .guest-in-list img {
    align-self: center;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .guests-page .guest-content {
    width: 100%;
  }

  .guests-page .guest-in-list .guest-name,
  .guests-page .guest-in-list .bio-in-list {
    text-align: center;
  }

  .guests-page .guest-in-list .episode-header {
    margin-top: 1.5rem;
  }

  .guests-page .episode-list {
    width: 100%;
  }
}

/* ******************* Privacy Page Styles ******************** */
.privacy-page h2 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 24px;
}

.privacy-page p {
  margin-bottom: 1em;
}

/* ******************* Admin Page Styles ******************** */
.admin-button {
  width: 120px;
  margin: 10px;
  font-size: 15px;
}

.admin-button.is-light {
  color: black;
}

.admin-footer-info {
  margin-bottom: 20px;
  margin-left: 10px;
  margin-top: 20px;
}

/* ******************* Episodes Admin Page Styles ******************** */
.episodes-admin-page .upcoming-episode {
  margin-bottom: 0px !important;
  padding-bottom: 0 !important;
}

/* More specific rule to override Bulma's .container */
.episodes-admin-page.container,
div.episodes-admin-page.container,
body .episodes-admin-page.container {
  max-width: none !important;
  width: 95% !important;
  margin: 0 auto !important;
}

.takeaway-indicator.has-takeaways {
  color: lightgreen !important;
}

.takeaway-indicator.no-takeaways {
  color: gray !important;
}

/* ******************* Checkbox Alignment Fix ******************** */
.checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.checkbox input[type='checkbox'] {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ******************* Page-Specific Inline CSS Moved from Templates ******************** */

/* Layout/Shared Styles */
body.bulma-page {
  padding-top: 50px;
}

.navbar-brand .logo-image {
  width: 40px;
  height: 40px;
  margin-top: -10px;
  border-radius: 50%;
}

.navbar-brand .logo-var {
  color: white !important;
}

.navbar-brand .logo-operator {
  color: white !important;
}

.navbar-brand .logo-key {
  color: #f0db4f !important;
}

.mastodon-verification-links {
  display: none;
}

/* About Page Styles */
.about-page .main-column {
  width: 70%;
}

.about-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Community Page Styles */
.community-page .main-column {
  width: 70%;
}

.community-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Contact Page Styles */
.contact-page .main-column {
  width: 70%;
}

.contact-page .container {
  max-width: none !important;
}

.contact-page .light-access-link {
  color: #1fc75f;
  text-decoration: none;
}

.contact-page .light-access-link:hover {
  color: #19a34a;
  text-decoration: underline;
}

/* Stats Page Styles */
.stats-page .main-column {
  width: 70%;
}

.stats-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Search Page Styles */
.search_page .search-results-container {
  text-align: center;
  margin-right: 75px;
  margin-top: 10px;
  font-weight: normal;
}

.search_page .search-summary {
  text-align: center;
  margin-right: 75px;
  margin-top: 10px;
  font-weight: normal;
}

.search_page .search-input-column {
  width: 33%;
}

/* Privacy Page Styles */
.privacy-page .privacy-centered {
  text-align: center;
}

.privacy-page .privacy-content-column {
  max-width: 800px;
}

/* Sponsorship Terms Page Styles */
.sponsorship-terms-page .main-column {
  width: 70%;
}

.sponsorship-terms-page .container {
  max-width: none !important;
}

.sponsorship-terms-page .content.is-large p {
  margin-bottom: 1em;
}

/* T-shirt Page Styles */
.tshirt-page .full-page-content {
  padding-bottom: 0px;
}

.tshirt-page .tshirt-image {
  height: 350px;
  border-radius: 5px;
  background-color: #777;
}

.tshirt-page .tshirt-button {
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
}

/* Sponsor Page Styles */
.sponsor-page .full-page-content.contact {
  max-width: 800px;
}

.sponsor-page .sponsor-title {
  font-size: 2em;
}

.sponsor-page .sponsor-link {
  color: white;
}

.sponsor-page .sponsor-image {
  margin: 20px;
  margin-bottom: 0px;
  border: 1px solid gray;
  max-height: 400px;
  border-radius: 5px;
}

.full-page-content.contact strong {
  color: #ddd;
}

.full-page-content.contact {
  padding: 40px;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px !important;
  color: #ddd;
  font-size: 16px;
}

/* Home Page Styles */
.home-page .guest-image {
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

.home-page .courses-title {
  margin-top: 0px;
}

.home-page .course-image {
  width: 334px;
  height: 192px;
}

.home-page .review-guest-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.home-page .book-image {
  border-radius: 5px;
}

.home-page .book-title {
  margin-bottom: 10px;
}

.home-page .book-sample-image {
  max-height: 225px;
  border-radius: 5px;
  background-color: #777;
  margin: 10px;
}

.home-page .host-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.home-page .suggest-email {
  font-size: 24px;
}

.home-page .banner {
  padding-bottom: 50px !important;
}

/* Friends of Show Page Styles */
.friends-page .full-page-content {
  max-width: 900px;
}

.friends-page .error-message {
  color: pink;
}

.friends-page .form-label {
  display: inline-block;
  width: 210px;
  font-weight: bold;
  margin-right: 22px;
}

.friends-page .form-label-wide {
  display: inline-block;
  width: 210px;
  font-weight: bold;
  margin-bottom: 20px;
}

.friends-page .form-input-wide {
  display: inline-block;
  width: 525px;
  font-weight: bold;
  margin-right: 20px;
}

.friends-page .submit-section {
  margin-top: 20px;
}

.friends-page .disclaimer {
  margin-top: 10px;
  font-weight: normal;
  font-size: 11pt;
}

/* Friends of Show Subscribed Page Styles */
.friends-subscribed-page .full-page-content {
  max-width: 900px;
}

/* Friends of Show Sponsors Page Styles */
.friends-sponsors-page .full-page-content {
  max-width: 900px;
}

.friends-sponsors-page .sponsor-image {
  width: 180px;
  height: auto;
  max-width: 100%;
  margin-bottom: 10px;
}

.friends-sponsors-page .sponsor-company-link {
  display: block;
  margin-bottom: 5px;
}

/* Episodes Subscribe Page Styles */
.episodes-subscribe-page .subscribe-content {
  max-width: 750px;
  margin: auto;
}

.episodes-subscribe-page .subscribe-title {
  font-size: 36px;
  font-weight: 500;
  margin-top: 40px;
}

.episodes-subscribe-page .years-underline {
  text-decoration: underline;
}

/* Episodes Show Page Styles */
.show-episode-page .episode-error-button {
  background-color: red;
  color: white;
  border-color: #ff3e3e;
}

.show-episode-page .guest-image-rounded {
  width: 128px;
  height: 128px;
}

.show-episode-page .share-section {
  text-align: center;
}

.show-episode-page .transcript-intro {
  margin-top: 60px;
}

.show-episode-page .transcript-header {
  margin-top: 60px;
}

/* Episodes Transcript Section Styles */
.transcript-section .transcript-error {
  color: orange;
}

/* Episodes Subscribe in Players Styles */
.subscribe-in-players .player-icon {
  width: 42px;
  height: 38px;
}

.subscribe-in-players .rss-icon {
  width: 42px;
  height: 38px;
}

.subscribe-in-players .castro-icon {
  border-radius: 6px;
  width: 42px;
  height: 38px;
}

.subscribe-in-players .canary-link {
  display: none;
}

/* Episodes Guests Page Styles */
.episodes-guests-page .full-page-content {
  max-width: 900px;
}

.episodes-guests-page .content.guests {
  font-size: 17px;
  font-weight: 400;
}

/* Episodes All Page Styles */
.all-episodes-page .episode-number-column {
  width: 80px;
  white-space: nowrap;
}

.all-episodes-page .episode-number-cell {
  text-align: center;
}

.all-episodes-page .episode-date-cell {
  white-space: nowrap;
}

.all-episodes-page .attention-needed {
  background-color: #444;
}

/* DevOps Book Page Styles */
.devops-book-page .book-nav-icon {
  padding-top: 20px;
  padding-left: 20px;
  vertical-align: center;
  margin-top: -10px;
}

.devops-book-page .book-title {
  vertical-align: center;
}

/* DevOps Book Index Page Styles */
.devops-book-index-page .book-cover-container {
  width: 100%;
  display: block;
}

.devops-book-index-page .book-title {
  margin-top: 30px;
}

.devops-book-index-page .github-link {
  font-weight: bold;
}

.devops-book-index-page .chapter-icon {
  width: 96px;
}

.devops-book-index-page .chapter-icon-small {
  width: 60px;
}

.devops-book-index-page .chapter-icon-medium {
  width: 70px;
}

.devops-book-index-page .chapter-icon-large {
  width: 80px;
}

.devops-book-index-page .chapter-audio {
  width: 100%;
}

/* DevOps Book Buy Page Styles */
.devops-book-buy-page .buy-header-spacing {
  padding-top: 20px;
}

.devops-book-buy-page .book-display {
  padding-top: 0px;
}

.devops-book-buy-page .book-cover-left {
  width: 150px;
  margin-right: 10px;
  margin-left: 10px;
}

.devops-book-buy-page .book-cover-right {
  width: 150px;
  margin-right: 10px;
  margin-left: 10px;
  border: 1px solid gray;
}

.devops-book-buy-page .book-description {
  font-size: 0.85em;
  color: #4b4b4b;
}

.devops-book-buy-page .price-display {
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
  color: green;
  margin-bottom: 50px;
  margin-top: 20px;
}

.devops-book-buy-page .sold-out-message {
  text-align: center;
  font-weight: bold;
  color: red;
  margin-bottom: 20px;
}

.devops-book-buy-page .buy-form {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  margin-bottom: 100px;
  margin-top: 20px;
}

.devops-book-buy-page .field {
  margin-bottom: 16px;
}

/* Streaming Live Page Styles */
.streaming-page .container.full-page-content {
  padding-bottom: 0px;
}

.streaming-page h1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

.streaming-page .streaming-content {
  text-align: center;
  font-size: 24px;
  margin-top: 40px;
  padding: 40px;
  background-color: #222;
  border-radius: 10px;
  border: 1px solid #444;
}

.streaming-page .stream-status {
  font-size: 18px;
  margin-bottom: 20px;
}

.streaming-page .youtube-embed {
  margin-top: 30px;
  margin-bottom: 30px;
}

.streaming-page .stream-schedule {
  font-size: 16px;
  color: #aaa;
  margin-top: 20px;
}

/* 404 Error Page Styles */
.four04-page .full-width-image-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Advertiser Pages Styles */
.advertiser-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.advertiser-report-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Admin Pages Styles */
.admin-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-guest-image {
  width: 40px !important;
  height: 40px !important;
  margin: 2px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-subscribe-platform-stats-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-reviews-page .show-main strong {
  color: white !important;
  margin-top: 18px;
  display: block;
}

.admin-redirects-page .show-main strong {
  color: #eee !important;
}

.admin-redirects-page .button.is-danger {
  background-color: #8b1538 !important;
  border-color: #8b1538 !important;
}

.admin-guests-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-guests-page .show-main {
  text-align: left !important;
}

.admin-guests-page .show-main ul {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-guests-page .show-main li {
  text-align: left !important;
  display: block !important;
  margin: 4px 0 !important;
}

.admin-guests-page .show-main li.guests {
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.admin-guests-page .show-main li.guests a,
.admin-guests-page .show-main li.guests span,
.admin-guests-page .show-main li.guests img {
  flex-shrink: 0 !important;
}

.admin-guests-page .user-id {
  display: inline-block;
  min-width: 40px;
}

.admin-change-show-number-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-show-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-livestream-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-guest-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Account Page Styles */
.account-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Black Friday Banner Styles */
.black_friday {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 2px solid #ff6b35;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
  }
  to {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.6);
  }
}

.black_friday h2 {
  color: #ff6b35;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.black_friday .discount {
  color: #ffff00;
  font-size: 4em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  display: block;
  margin: 0.2em 0;
}

.black_friday .offer-text {
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.black_friday .cta-button {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin: 10px;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.black_friday .cta-button:hover {
  background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
  color: white;
  text-decoration: none;
}

.black_friday .deadline {
  color: #ff6b35;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.black_friday .terms {
  color: #cccccc;
  font-size: 0.9em;
  margin-top: 1em;
  font-style: italic;
}

strong {
  margin-right: 0px;
}

/* Fix upcoming episodes alignment - remove weird offset */
.upcoming-details {
  padding-left: 0 !important;
}

/* Align episode details text with top of guest image */
.upcoming-episode .columns {
  align-items: flex-start !important;
}

.upcoming-episode .upcoming-details {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.upcoming-episode .episode-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.2 !important;
}

.upcoming-episode .episode-desc-short {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make upcoming episodes guest section consistent regardless of name length */
.upcoming-episode .guest {
  min-height: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.upcoming-episode .guest .name {
  width: 100% !important;
  text-align: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
  min-height: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.upcoming-episode .guest .and-then {
  margin-top: 2px !important;
}

/* Admin Guests Page - Enhanced Desktop Layout */
@media (min-width: 769px) {
  .admin-guests-page.container {
    max-width: none !important;
    width: 85% !important;
    margin: 0 auto !important;
  }

  .admin-guests-page .column.main-column {
    width: 80% !important;
    margin: 0 auto !important;
  }

  .admin-guests-page .show-main ul {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
}

/* Transcript Upload Interface Styling */
.transcript-upload-page .file-upload-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #2c3e50;
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.transcript-upload-page .file-preview-zone {
  min-height: 120px;
  border: 2px dashed #34495e;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  background: rgba(52, 73, 94, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.transcript-upload-page .file-preview-zone:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(52, 152, 219, 0.2);
}

.transcript-upload-page .file-preview-zone.drag-over {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

.transcript-upload-page .file-info {
  background: rgba(44, 62, 80, 0.8);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-left: 4px solid #3498db;
}

.transcript-upload-page .file-info.txt-file {
  border-left-color: #e74c3c;
}

.transcript-upload-page .file-info.vtt-file {
  border-left-color: #f39c12;
}

.transcript-upload-page .file-size {
  font-size: 0.9em;
  color: #95a5a6;
  font-weight: normal;
}

.transcript-upload-page .file-size.large {
  color: #e67e22;
  font-weight: bold;
}

.transcript-upload-page .file-size.too-large {
  color: #e74c3c;
  font-weight: bold;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.5;
  }
}

.transcript-upload-page .upload-progress {
  margin: 1rem 0;
  display: none;
}

.transcript-upload-page .upload-progress.active {
  display: block;
}

.transcript-upload-page .progress-bar {
  background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
  height: 8px;
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.transcript-upload-page .episode-status-banner {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 6px solid;
}

.transcript-upload-page .episode-status-banner.has-transcript {
  border-left-color: #2ecc71;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.transcript-upload-page .episode-status-banner.no-transcript {
  border-left-color: #f39c12;
  background: linear-gradient(135deg, #d35400 0%, #f39c12 100%);
}

.transcript-upload-page .validation-summary {
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  display: none;
  /* Default to informational styling */
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid #3498db;
}

.transcript-upload-page .validation-summary.has-errors {
  /* Error styling - red */
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
}

.transcript-upload-page .validation-summary.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page-wide drag and drop styling */
body.drag-active {
  background: linear-gradient(
    135deg,
    rgba(52, 152, 219, 0.1) 0%,
    rgba(46, 204, 113, 0.1) 100%
  );
}

body.drag-active::before {
  content: '📁 Drop your transcript files anywhere on this page';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(52, 152, 219, 0.95);
  color: white;
  padding: 20px 40px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(52, 152, 219, 0.3);
  z-index: 10000;
  pointer-events: none;
  animation: dropHint 0.3s ease;
}

@keyframes dropHint {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Episode Selection Enhancement */
.transcript-upload-page .episode-selector {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.transcript-upload-page .episode-selector .select select {
  background: rgba(52, 73, 94, 0.8);
  border: 2px solid #34495e;
  color: #ecf0f1;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1.1em;
  transition: all 0.3s ease;
}

.transcript-upload-page .episode-selector .select select:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.transcript-upload-page .episode-selector .select select option {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 0.5rem;
}

/* File upload enhancements */
.transcript-upload-page .file-label {
  cursor: pointer;
  transition: all 0.3s ease;
}

.transcript-upload-page .file-label:hover .file-cta {
  background: #3498db;
  transform: translateY(-1px);
}

/* Ensure Bulma file component allows proper truncation */
.transcript-upload-page .file.has-name {
  overflow: hidden;
}

.transcript-upload-page .file.has-name .file-label {
  overflow: hidden;
}

/* Bulma file upload name display - force truncation */
.transcript-upload-page .file-name,
.transcript-upload-page .file .file-name,
.transcript-upload-page .file.has-name .file-name {
  font-weight: 500;
  color: #ecf0f1;
  background: rgba(52, 73, 94, 0.6);

  /* File name truncation and overflow handling */
  max-width: 180px !important;
  min-width: 0 !important; /* Allow shrinking */
  width: 180px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 1 !important;

  /* Override Bulma's default 16em max-width */
  --bulma-file-name-max-width: 180px;
}

/* Responsive file name truncation */
@media (max-width: 768px) {
  .transcript-upload-page .file-name,
  .transcript-upload-page .file .file-name,
  .transcript-upload-page .file.has-name .file-name {
    max-width: 140px !important;
    width: 140px !important;
    --bulma-file-name-max-width: 140px;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page .file-name,
  .transcript-upload-page .file .file-name,
  .transcript-upload-page .file.has-name .file-name {
    max-width: 110px !important;
    width: 110px !important;
    --bulma-file-name-max-width: 110px;
  }
}

/* File name tooltip for full name on hover */
.transcript-upload-page .file-name:hover {
  position: relative;
  z-index: 100;
}

.transcript-upload-page .file-name.has-tooltip:hover::after {
  content: attr(data-full-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(44, 62, 80, 0.95);
  color: #ecf0f1;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(149, 165, 166, 0.2);
  z-index: 1000;
  pointer-events: none;

  /* Small arrow pointing down */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 -4px 0 0 rgba(44, 62, 80, 0.95);
  margin-bottom: 4px;
}

/* Alternative: Wrapped file name version for better mobile experience */
.transcript-upload-page .file-name.wrapped {
  max-width: none;
  white-space: normal;
  word-break: break-all;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 3px;
}

/* Improve file-info display layout for long names */
.transcript-upload-page .file-info {
  margin-top: 0.5rem;
}

.transcript-upload-page .file-info span {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* Better responsive behavior for file upload sections */
@media (max-width: 768px) {
  .transcript-upload-page .file.has-name .file-name {
    max-width: 120px;
  }

  .transcript-upload-page .file-info span {
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page .file.has-name .file-name {
    max-width: 100px;
  }

  .transcript-upload-page .file-info span {
    max-width: 120px;
    font-size: 0.875rem;
  }

  /* Stack file upload columns on very small screens */
  .transcript-upload-page .columns .column {
    margin-bottom: 1rem;
  }
}

/* Final failsafe - target any file name display that might be overflowing */
.transcript-upload-page [class*='file-name'] {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .transcript-upload-page [class*='file-name'] {
    max-width: 140px !important;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page [class*='file-name'] {
    max-width: 110px !important;
  }
}

.transcript-upload-page .help {
  font-style: italic;
  margin-top: 0.5rem;
}

/* Strong text styling for transcript upload page */
.transcript-upload-page strong {
  color: #f39c12;
  font-weight: 600;
}

/* Modern button styling for transcript upload page */
.transcript-upload-page .submit-section {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin: 2rem 0;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.transcript-upload-page .submit-button {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border: none;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  min-width: 220px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  position: relative;
  overflow: hidden;
}

.transcript-upload-page .submit-button:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}

.transcript-upload-page .submit-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.transcript-upload-page .submit-button:disabled {
  background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.transcript-upload-page .cancel-button {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  border: none;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  min-width: 160px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
  margin-left: 1rem;
}

.transcript-upload-page .cancel-button:hover {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
  color: white;
  text-decoration: none;
}

.transcript-upload-page .cancel-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

/* Button loading state animation */
.transcript-upload-page .submit-button.uploading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Responsive button layout */
@media (max-width: 768px) {
  .transcript-upload-page .submit-section .field.is-grouped {
    flex-direction: column;
    align-items: center;
  }

  .transcript-upload-page .cancel-button {
    margin-left: 0;
    margin-top: 1rem;
  }

  .transcript-upload-page .submit-button,
  .transcript-upload-page .cancel-button {
    width: 100%;
    max-width: 280px;
  }
}

/* ******************* Episodes Admin Page - Icon Styles ******************** */
.transcript-status-icon {
  text-decoration: none;
}

.transcript-status-icon:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.transcript-status-icon i {
  transition: transform 0.2s ease;
}

.mp3-status-icon {
  display: inline-block;
  margin-left: 0.25rem;
}

.mp3-status-icon i {
  transition: transform 0.2s ease;
}

.mp3-status-icon i:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   MP3 Upload Page Styles
   ========================================================================== */

.mp3-upload-page .file-label {
  cursor: pointer;
  transition: all 0.3s ease;
}

.mp3-upload-page .file-label:hover {
  transform: translateY(-2px);
}

.mp3-upload-page .file-label.drag-over {
  background: rgba(46, 204, 113, 0.1);
  border-color: #2ecc71 !important;
  animation: pulse 1s infinite;
}

.mp3-upload-page .file-info {
  background: rgba(44, 62, 80, 0.8);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-left: 4px solid #3498db;
}

.mp3-upload-page .episode-status-banner {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 6px solid #3498db;
}

.mp3-upload-page .upload-progress {
  margin: 1rem 0;
  display: none;
}

.mp3-upload-page .upload-progress.active {
  display: block;
}

/* Page-wide drag and drop hint for MP3 files */
.mp3-upload-page.drag-active::before {
  content: '🎵 Drop your MP3 files anywhere on this page';
}

/* Notification animations for smart routing feedback */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* iOS-Style Hot Reload Toggle */
.hot-reload-toggle-container {
  margin-top: 1rem;
  padding-top: 1rem;
}

.hot-reload-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  user-select: none;
}

.toggle-text {
  opacity: 0.9;
}

.toggle-status {
  opacity: 0.9;
  font-weight: 600;
  min-width: 1.8rem;
  text-align: left;
  font-size: 0.65rem;
}

/* iOS Toggle Switch - Extra Small Size */
.ios-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.ios-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ios-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(136, 136, 136, 0.3);
  transition: all 0.3s ease;
  border-radius: 18px;
  border: 1.5px solid rgba(136, 136, 136, 0.2);
}

.ios-slider:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 1.5px;
  bottom: 1.5px;
  background-color: #888;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Toggle ON state - Yellow theme with !important for specificity */
.ios-toggle input:checked + .ios-slider {
  background-color: #fbbf24 !important; /* Yellow/amber color */
  border-color: #f59e0b !important; /* Darker amber border */
}

.ios-toggle input:checked + .ios-slider:before {
  transform: translateX(14px);
  background-color: white !important;
}

/* Toggle OFF state */
.ios-toggle input:not(:checked) + .ios-slider {
  background-color: rgba(136, 136, 136, 0.3);
  border-color: rgba(136, 136, 136, 0.2);
}

/* Hover effects */
.ios-toggle:hover .ios-slider {
  opacity: 0.95;
}

.ios-toggle:hover .ios-slider:before {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Focus state for accessibility */
.ios-toggle input:focus + .ios-slider {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hot-reload-toggle-label {
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  .ios-toggle {
    width: 45px;
    height: 27px;
  }

  .ios-slider:before {
    height: 23px;
    width: 23px;
  }

  input:checked + .ios-slider:before {
    transform: translateX(18px);
  }
}

.neon-text {
  color: #fff;
  text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e,
    0 0 40px #ff005e, 0 0 80px #ff005e;
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e,
      0 0 40px #ff005e, 0 0 80px #ff005e;
  }

  100% {
    text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff,
      0 0 80px #00d4ff, 0 0 160px #00d4ff;
  }
}