/*
  global custom
*/

  .flash {
    transition: background 0.3s;
  }
  .flash-on {
    background: #f1c232;
  }
  .text-secondary {
    color: #F1C232;
  }
  .text-white {
    color: white;
  }
  .text-positive {
    color: #4CAF50;
  }
  .text-negative {
    color: #F24F43;
  }
  .text-grey {
    color: #999;
  }
  .text-blur {
    color: transparent !important;
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
  }
  .text-blur-white {
    color: transparent !important;
    text-shadow: 0 0 8px rgba(255,255,255,1);
  }

/*
  global overrides
*/

  /* buttons */
  .btn-secondary {
    background: #d0a82b !important;
    color: white;
    border-color: #d0a82b !important;
  }
  .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:focus:hover, .btn-secondary:focus:focus {
    background: #be9928 !important;
    border-color: #be9928 !important;
  }
  
  /* header logo image - restrict width */
  .btstrp-navbar-brand.header-logo img, .navbar__header__logolink img {
    max-width: 220px !important;
  }

  /* course box image container */
  .course-box-image-container {
    position: relative;
  }

  /* hide teachable branding */
  li:has(> a.powered-by) {
    display: none;
  }

/*
  bootstrap - modals
*/

  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: rgba(0,0,0,0.5);
  }

  .modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate3d(0,-25%,0);
    transform: translate3d(0,-25%,0)
  }

  .modal.in .modal-dialog {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
  }

  .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
  }

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
  }

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

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
  }

  .modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
  }

  .modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
  }

  .modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
  }

  .modal-header .close {
    margin-top: -2px
  }

  .modal-title {
    margin: 0;
    line-height: 1.42857143
  }

  .modal-body {
    position: relative;
    padding: 15px
  }

  .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
  }

  .modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px
  }

  .modal-footer .btn-group .btn+.btn {
    margin-left: -1px
  }

  .modal-footer .btn-block+.btn-block {
    margin-left: 0
  }

  .modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
  }

  @media(min-width: 768px) {
    .modal-dialog {
      width:600px;
      margin: 30px auto
    }

    .modal-content {
      box-shadow: 0 5px 15px rgba(0,0,0,.5)
    }

    .modal-sm {
      width: 300px
    }
  }

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


/*
  bootstrap - modal overrides
*/

  .modal .modal-title {
    font-size: 21px;
  }
  .modal .modal-body {
    font-size: 14px;
  }
  .modal .btn {
    font-size: 17px !important;
    border-radius: 32px !important;
    padding: 12px 30px;

    font-weight: 600 !important;
    outline: none !important;
    border-radius: 20px;
    /* padding: 3px 18px !important; */
  }
  .modal .btn-primary {
    background: #259EB9 !important;
    border: 1px solid #259EB9 !important;
    color: #fff;
  }
  .modal .btn-inverse {
    background: #fff !important;
    border: 1px solid #bdc3c7 !important;
    color: #259EB9;
  }


/*
  blocks
*/

  /* remove default stripes on blocks */
  .course-block.odd-stripe, .block.odd-stripe {
    background-color: #fff;
  }

  .course-block.bio, .course-block.faq {
    background-color: #f7f7f7;
  }

  /* block - Course Hero Header */
  .course-block.hero .course-header-container .btn-header-enroll {
    display: none;
  }

  /* block - Primary Enroll Button */
  .course-block.checkout #pricing-options .btn-enroll {
    margin-bottom: 0 !important;
  }

  /* block - membership sales page - banner */
  .blocks-page-membership_sales_page .banner__inner {
    min-height: calc(90vh - 620px) !important;
  }


/*
  custom blocks
*/

  /* join membership */
  .custom-block-join-membership {
    background: white;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 60px;
  }
  .custom-block-join-membership-or {
    font-size: 17px;
    margin-bottom: 20px;
    font-weight: 600;
  }

  /* udemy link */
  .custom-block-udemy-link .btn {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .custom-block-udemy-link .btn img {
    width: 55px;
    height: auto;
    margin-top: -2px;
  }
  .course-block:last-child .custom-block-udemy-link .hr-bottom {
    opacity: 0;
  }

  /* coming soon - sign up */
  .custom-block-coming-soon-sign-up {
    background: #104F5D;
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .custom-block-coming-soon-sign-up .input-group {
    max-width: 415px;
    margin: 14px auto 14px auto;
  }
  .custom-block-coming-soon-sign-up .input-group-lg>.form-control, .custom-block-coming-soon-sign-up .input-group-lg>.input-group-addon, .custom-block-coming-soon-sign-up .input-group-lg>.input-group-btn>.btn {
    height: 60px;
  }
  .custom-block-coming-soon-sign-up .messages .message {
    display: none;
  }
  .custom-block-coming-soon-sign-up .messages .message.show-message {
    display: inline;
  }
  .custom-block-coming-soon-sign-up .text-very {
    display: none;
  }
  .custom-block-coming-soon-sign-up[data-verysoon=true] .text-very {
    display: inline-block;
  }

  /* vs code setup */
  .vs-code-setup ul {
    list-style: initial;
    margin-left: 11px;;
  }
  .vs-code-setup ul li {
    margin-bottom: 7px;
  }


/*
  course thumbnail overlays (coming soon / legacy / new)
*/

  .course-thumbnail-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 0.5s;
  }
  .course-thumbnail-overlay.fade-out {
    opacity: 0;
  }


/*
  loading spinner
*/

  /* HTML: <div class="loader"></div> */
  .loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #124F5C;
    margin: 0 auto;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}


/*
  theater mode
*/

  /* toggle styles */
  .lecture-page-layout .course-mainbar #lecture_heading {
    position: relative;
  }
  @media (min-width: 768px) {
    .lecture-page-layout .course-mainbar #lecture_heading {
      padding-right: 49px;
    }
  }
  .theater-mode-toggle {
    position: absolute;
    right: 0;
    margin-top: -6px;
    text-align: center;
  }
  @media (max-width: 767px) {
    .theater-mode-toggle {
      display: none;
    }
  }
  .theater-mode-toggle-label {
    margin-bottom: 0 !important;
    color: #425252;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
  }
  .theater-mode-toggle-checkbox-container {
    text-align: center;
    margin-top: -6px;
  }
  .theater-mode-toggle-checkbox {
    background-color: #bdbdbd;
    border-radius: 20px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    cursor: pointer;
    width: 44px;
    height: 23px;
    position: relative;
    transition: background-color 200ms ease;
    appearance: none;
    margin-top: 0 !important;
  }
  .theater-mode-toggle-checkbox:checked {
    background: #21cd9c;
  }
  .theater-mode-toggle-checkbox:checked:after {
    transform: translatex(calc(44px / 2 - 2px));
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(33, 205, 156, 0.999)" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  }
  .theater-mode-toggle-checkbox:after {
    content: "";
    background-size: 40%;
    background-color: #ffffff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(176, 176, 176, 0.999)" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    display: block;
    height: 100%;
    transition: transform 100ms ease;
    width: 50%;
  }
  .theater-mode-toggle-checkbox:disabled {
    cursor: default;
    background-color: #e4e4e4;
  }
  .theater-mode-toggle-checkbox:disabled:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(228, 228, 228, 0.999)" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
  }
  .theater-mode-toggle-checkbox:disabled:checked:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(228, 228, 228, 0.999)" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  }

  /* content styles */
  .theater-mode .lecture-page-layout .course-mainbar {
    max-width: none !important;
  }
  .theater-mode .lecture-page-layout .lecture-content .lecture-attachment-type-video .hotmart_video_player iframe {
    max-height: calc(100vh - 200px);
  }
  .theater-mode .lecture-page-layout.lecture-page-layout-with-preview .lecture-content .lecture-attachment-type-video .hotmart_video_player iframe {
    max-height: calc(100vh - 260px);
  }

/*
  sidebar toggle
*/

  /* toggle styles */
  .sidebar-toggle {
    font-weight: bold;
    font-size: 20px;
    color: white;
    position: absolute;
    left: 100%;
    opacity: 0.8;
  }
  @media (max-width: 767px) {
    .sidebar-toggle {
      display: none;
    }
  }
  .sidebar-toggle:hover {
    color: white;
    opacity: 1;
  }
  .sidebar-toggle .is-sidebar-hidden {
    display: none;
  }
  .sidebar-hidden .sidebar-toggle .is-sidebar-showing {
    display: none;
  }
  .sidebar-hidden .sidebar-toggle .is-sidebar-hidden {
    display: block;
  }

  /* content styles */
  header>.lecture-left {
    position: relative;
  }
  .sidebar-hidden .lecture-page-layout .course-sidebar {
    display: none !important;
  }
  .sidebar-hidden header .lecture-left {
    width: 0 !important;
  }
  .sidebar-hidden header .lecture-left>* {
    display: none !important;
  }
  .sidebar-hidden header .lecture-left>.sidebar-toggle {
    display: block !important;
  }