.noticeboard-list.accordion-list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    list-style: none;
    cursor: pointer;
    margin-bottom: 15px;
}
.noticeboard-list.accordion-list li {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--white);
    padding: 10px;
    margin: 0 auto 15px auto;
    border: 1px solid var(--ot-primary-border);
    border-radius: 5px;
    cursor: pointer;
}
.noticeboard-list.accordion-list li.active h3:after {
    transform: rotate(45deg);
}
.noticeboard-list.accordion-list li h3 {
    font-weight: 700;
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0 0 0 0;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.01em;
    cursor: pointer;
}
.noticeboard-list.accordion-list li h3:after {
    content: "";
    font-family: "material-design-iconic-font";
    position: absolute;
    right: 0;
    top: 0;
    color: #fcc110;
    transition: all 0.3s ease-in-out;
    font-size: 18px;
}
.noticeboard-list.accordion-list li div.answer {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.noticeboard-list.accordion-list li div.answer p {
    position: relative;
    display: block;
    font-weight: 300;
    padding: 10px 0 0 0;
    cursor: pointer;
    line-height: 150%;
    margin: 0 0 15px 0;
    font-size: 14px;
}
.make_rating {
    cursor: pointer;
}
#stars .hover {
    color: #fcc110;
}
.responsive-iframe-parent iframe {
    height: auto;
}

.responsive-iframe-parent {
    max-width: 100%;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}

.responsive-iframe-parent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Book  mark */
.bookmark-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dddd;
    width: 25px;
    height: 25px;
    line-height: 27px;
    text-align: center;
    border-radius: 50%;
    font-size: 15px;
    display: flex;
    justify-content: center;
}

.bookmark-wrapper i {
    color: var(--ot-primary);
}
.bookmark-wrapper.active {
    background: var(--ot-primary);
}
.bookmark-wrapper.active i {
    color: var(--white);
}
/* end */

.modal-wrapper {
    z-index: 9999;
}

.boostrap-modal .close-icon {
    z-index: 10;
    cursor: pointer;
    background: var(--ot-primary);
    color: #ffffff;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    display: inline-block;
    background-image: none;
    opacity: 1;
    border: 0;
    position: absolute;
    right: -7px;
    top: -21px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);

    border: 0;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.boostrap-modal .close-icon:hover {
    background: #fd2f73;
    color: white;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.boostrap-modal .modal-content {
    padding: 28px;
    padding-top: 40px !important;
}

@media (max-width: 767px) {
    .boostrap-modal .modal-content {
        padding: 10px 20px;
    }
}

.single-dashboard-card.single-dashboard-card2.payment_default {
    border: 1px solid #3cc13b;
}
.single-dashboard-card.single-dashboard-card2 .edit {
    position: absolute;
    right: 5px;
    top: 0px;
    cursor: pointer;
    padding: 5px;
}
.remember-checkbox .ot-checkmark.radio {
    border-radius: 100%;
}

/* Action Button */

.action-success {
    background: #3cc13b2b;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.action-success i {
    color: #3cc13b !important;
    font-size: 14px !important;
    top: 0 !important;
}

.action-danger {
    background: rgb(249 79 79 / 9%);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.action-danger i {
    color: rgb(249 79 79);
    font-size: 14px;
}

.action-primary {
    background: #5b58ff21;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.action-primary i {
    color: #5b58ff;
    font-size: 15px;
}

.action-secondary {
    background: var(--ot-secondary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.action-secondary i {
    color: var(--white);
    font-size: 15px;
}

.action-tertiary {
    background: #f0783c26;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.action-tertiary i {
    color: #f0783c;
    font-size: 15px;
}

.status-badge {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    text-transform: capitalize;
}

.status-success {
    background: rgba(60, 193, 59, 0.1);
    color: #3cc13b;
}
.status-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}
.status-danger {
    background: rgba(249, 79, 79, 0.1);
    color: #f94f4f;
}
.status-primary {
    background: rgba(91, 88, 255, 0.1);
    color: #5b58ff;
}
.status-secondary {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
}
.status-warning {
    background: rgba(240, 120, 60, 0.1);
    color: #f0783c;
}

li.list.has-children.open.show {
    display: block;
}

li.list.has-children {
    display: block;
}

.nice-scrolls::-webkit-scrollbar {
    width: 3px !important;
    border: 0 !important;
}
.nice-scrolls::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(242, 242, 242, 0.3);
}

.nice-scrolls::-webkit-scrollbar-thumb {
    background-color: rgba(var(--ot-primary-rgb), 0.2) !important;
    width: 3px !important;
    border: 0 !important;
}
.daterangepicker select.yearselect {
    width: 50%;
}

/* Ai CSS start */

.main {
    overflow: hidden;
    display: flex;
    max-height: 600px;
    min-height: 600px;
    background-color: var(--panel-bg);
    background-color: rgba(var(--ot-primary-rgb), 0.05);
    border-radius: 6px;
    border: 1px solid var(--ot-secondary-border);
}
body.dark-mode .main {
    background: var(--body);
}
.main__left {
    flex: 0.7;
    display: flex;
    flex-direction: column;
}
.options {
    padding: 1rem;
    display: flex;
    background-color: var(--main-darklg);
}

.options__left {
    display: flex;
}

.options__right {
    margin-left: auto;
}

.options__button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ot-primary);
    height: 50px;
    border-radius: 5px;
    color: var(--white);
    font-size: 1.2rem;
    width: 50px;
    margin: 0 0.5rem;
    margin-right: 0;
}
.options__button i {
    color: #fff;
    font-size: 20px;
}
.background__red {
    background-color: #f6484a;
}

.main__right {
    display: flex;
    flex-direction: column;
    flex: 0.3;
    width: 100%;
}

.main__chat_window {
    flex-grow: 1;
    overflow-y: scroll;
}

.main__chat_window::-webkit-scrollbar {
    display: none;
}

.main__message_container {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* 
   Footer mobile: rendiamo le colonne del menu tutte della stessa larghezza,
   così il logo centrale (home-btn) risulta perfettamente centrato
   rispetto allo schermo sia in home che nelle altre pagine.
*/
.footer-mobile-wrapper .listing .single-list {
    display: flex;
    justify-content: center;
    flex: 1;
}

.footer-mobile-wrapper .listing .single-list .home-btn {
    margin: 0 auto;
}

/* 
   Footer mobile: ingrandiamo leggermente l'immagine del logo
   così si vede meno sfondo nero dentro il cerchio centrale.
*/
.footer-mobile-wrapper .listing .single-list .home-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main__message_container > input {
    height: 50px;
    flex: 1;
    font-size: 1rem;
    border-radius: 5px;
    padding: 5px 20px;
    border: 1px solid var(--ot-secondary-border);
    width: 100%;
}
.main__message_container > input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--ot-primary-border);
}

.messages {
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.message {
    display: flex;
    flex-direction: column;
}

@media (max-width: 992px) {
    .main {
        max-height: 400px;
        min-height: 400px;
    }
}
@media (max-width: 700px) {
    .main__left {
        width: 100%;
        flex: 1;
    }

    .messages {
        margin: 0;
    }

    #showChat {
        display: flex;
    }
}

.messages .sent {
    background: var(--ot-primary);
    border-radius: 15px 0px 5px 5px;
    float: right;
    color: #fff;
}

.sent {
    padding: 7px 16px;
    margin: 6px 10px;
    width: fit-content;
    align-self: flex-end;
    list-style: none;
}

.message {
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    width: fit-content;
    align-self: flex-start;
}

.main__right {
    top: 20px;
    position: relative;
    min-width: 100%;
    scroll-behavior: smooth;
    overflow: scroll;
}

/* reply message ai */
.ai-reply-message {
    margin-left: 25px;
}

.ai-reply-message .ai-message-list .ai-reply {
    border-radius: 0px 5px 15px 5px;
    padding: 3px 12px 6px 12px;
    float: left;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--ot-tertiary-title);
    background: #d4d4d4d6;
    margin-right: 35px;
    position: relative;
}

/* End-of Ai CSS start */

#error.invalid-feedback {
    display: inline-block;
}

/* End of ai chat */

.card.cursor {
    cursor: pointer;
}
/* .card.cursor {
	border: 1px solid var(--ot-primary-border);
} */

.card.cursor {
    display: inline-block;
}

.payment-content input {
    visibility: hidden;
    opacity: 0;
}
.card.cursor.payment-gateway-wrapper {
    margin-right: 12px;
}

.instractor-tab-widget .instractor-tab-widget-card .instractor-name {
    color: var(--ot-primary);
    font-weight: 600;
}
.instractor-tab-widget .instractor-tab-widget-card .instractor-designation {
    color: var(--ot-primary-title);
    font-size: 14px;
    font-weight: 600;
}

.custom-button {
    cursor: pointer;
    font-size: 22px;
    background: none;
    border: 0;
    padding: 6px 11px;
    color: var(--ot-tertiary-title);
    border: 1px solid transparent;
    font-weight: 500;
    border-radius: 6px;
    text-align: center;
    display: block;
}

/* terms-conditons */
.terms-conditons p {
    text-transform: sentence !important;
}
.pera {
    text-transform: sentence !important;
}

.course-edit .activity-dropdown ul.dropdown {
    min-width: auto;
    height: auto;
}
.course-edit .activity-dropdown > button {
    background: var(--ot-tertiary);
}
.class-btn {
    padding: 10px 25px;
    line-height: 1.5;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}
.search-tab .tab-btn {
    border-right: 1px solid var(--ot-primary-border);
}

.hover-white-text:hover {
    color: var(--white) !important;
}
@media (max-width: 1199px) {
    .form-icon {
        display: unset !important;
    }
}

.empty-icon {
    background: var(--bs-gray-400) !important;
}

.card-style {
    background: var(--white);
    border-radius: 8px;
    padding: 20px 20px;
    padding-bottom: 0px;
    -webkit-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
}

.events-search-area .header-search {
    width: 100%;
}

.events-search-area .header-search .input-form input {
    border: 1px solid var(--ot-primary-border);
    border-radius: 6px !important;
}

.events-search-area .header-search {
    margin: 0 !important;
}

.events-search-area .btn-primary-fill {
    float: right;
}

@media (max-width: 991px) {
    .events-search-area .btn-primary-fill {
        float: center;
    }

    .header-search {
        width: 100%;
        display: block !important;
    }
}

@media (max-width: 768px) {
    .events-search-area .btn-primary-fill {
        width: 100%;
        text-align: center !important;
    }
}

.logo img{
    /* height: 50px !important; */
    max-width: 141px !important;
}
.logo_custom{
    /* height: 150px !important; */
    max-width: 141px !important;
}


.light-mode .light-logo {
    display: block !important;
}

.dark-mode .dark-logo {
    display: block !important;
}

.dark-mode  .light-logo {
    display: none !important;
}
.light-mode .dark-logo {
    display: none !important;
}
.dark-mode .dark-logo {
    display: block !important;
}
@media (max-width: 575px) {
    .light-mode .large-device, .dark-mode .large-device{
        display: none !important;
    }
}



/** GB 2024 **/
.font-custom-1{ font-family: 'Impact', sans-serif; }
.bg-yellow{ background-color: #fbff00; }
.txt-yellow{ color: #fbff00; }
.text-info{ color: #0495b2 !important; }
.preloader{ background-color: rgba(255,255,255, .7); }
.ot-login-card .logo img, .form-container .logo_custom{ max-width: 100% !important; }

.light-mode.dark-mode .footer-bg{ background-color: #333; }
.light-mode.dark-mode .footer-bg *{ color: #fff !important; }
.light-mode.dark-mode .footer-border{ border-top: none !important; }
.footer-bg{ background-color: #fff; }

/* Stile più compatto ed elegante per i controlli video del player */
/* Pulsanti principali del player (play, volume, fullscreen, ecc.) */
.plyr--video .plyr__controls > .plyr__control{
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
/* Stato hover/focus: tasto giallo e icona nera, più coerente con il brand ma meno “invadente”.
   ATTENZIONE: escludiamo i bottoni del menu impostazioni per non far “saltare” il testo. */
.plyr--video .plyr__controls > .plyr__control.plyr__tab-focus,
.plyr--video .plyr__controls > .plyr__control:hover,
.plyr--video .plyr__controls > .plyr__control[aria-expanded=true]{
    background: #fbff00 !important;
    color: #000 !important;
    transform: translateY(-1px);
}

/* Pulsante impostazioni (icona ingranaggio) nella barra del player:
   forziamo il giallo in TUTTI gli stati (normale, hover, aperto) e
   azzeriamo eventuali gradienti/arancioni provenienti da altri CSS. */
.plyr--video .plyr__controls > .plyr__control[data-plyr="settings"],
.plyr--video .plyr__controls > .plyr__control[data-plyr="settings"]:hover,
.plyr--video .plyr__controls > .plyr__control[data-plyr="settings"].plyr__tab-focus,
.plyr--video .plyr__controls > .plyr__control[data-plyr="settings"][aria-expanded="true"]{
    background-color: #fbff00 !important;
    background-image: none !important;
    color: #000 !important;
}

/* Pulsante Mute nella barra del player:
   stesso stile giallo degli altri, in tutti gli stati (normale, hover, premuto). */
.plyr--video .plyr__controls > .plyr__control[data-plyr="mute"],
.plyr--video .plyr__controls > .plyr__control[data-plyr="mute"]:hover,
.plyr--video .plyr__controls > .plyr__control[data-plyr="mute"].plyr__control--pressed,
.plyr--video .plyr__controls > .plyr__control[data-plyr="mute"][aria-pressed="true"],
.plyr--video .plyr__controls > .plyr__control[data-plyr="mute"].plyr__tab-focus{
    background-color: #fbff00 !important;
    background-image: none !important;
    color: #000 !important;
}
/* Colore della barra di avanzamento/volume in linea con il giallo di brand */
.plyr--full-ui input[type=range]{
    color: #fbff00 !important;
}
/* Su mobile riduciamo leggermente la dimensione dei tasti SOLO sulla barra comandi,
   così il menu impostazioni (velocità, ecc.) non viene “schiacciato” e il testo non va a capo. */
@media (max-width: 768px){
    .plyr--video .plyr__controls > .plyr__control{
        padding: 4px;
        width: 32px;
        height: 32px;
    }
    .plyr--video .plyr__control svg{
        width: 16px;
        height: 16px;
    }
}

/* Menu impostazioni (velocità, ecc.) del player:
   - sfondo scuro
   - testo chiaro
   - evidenziazione gialla solo sulla riga attiva/hover
   Così il popup è meno “grezzo” e più coerente con il resto del player. */
.plyr--full-ui .plyr__menu__container{
    background-color: #000;
    border-radius: 8px;
    border: 1px solid #fbff00;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    color: #fff;
    min-width: 160px;
    z-index: 1000; /* sta sopra al video e agli altri elementi vicini */
}

.plyr__menu__container .plyr__menu__list{
    padding: 4px;
}

/* Bottoni dentro il menu (es. riga Speed / Normal)
   Manteniamo il layout di default di Plyr (testo e pallino allineati in riga),
   cambiamo solo colori e leggermente le dimensioni. */
.plyr__menu__container .plyr__control{
    background: transparent;
    border-radius: 6px;
    color: #fff;
    padding: 4px 11px;
    font-size: 13px;
    display: flex;                  /* manteniamo il layout flex originale di Plyr */
    align-items: center;
    width: 100%;                    /* occupa tutta la larghezza disponibile del menu */
    height: auto;                   /* nessuna altezza fissa, evita di far “saltare” il testo */
    white-space: nowrap;            /* impedisce che valori tipo "1.25x" vadano a capo */
}

/* Riga attiva/hover nel menu: gialla ma senza riempire tutto il popup */
.plyr__menu__container .plyr__control:hover,
.plyr__menu__container .plyr__control[aria-expanded="true"],
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]{
    background-color: #fbff00 !important; /* forziamo il giallo anche se altri CSS provano a cambiare colore */
    color: #000 !important;
}

/* Valore a destra (es. “Normal”, “1.5x”) un po’ meno invadente */
.plyr__menu__container .plyr__menu__value{
    opacity: 0.8;
}

/* Pallino di selezione (radio) più leggibile, mantenendo il layout originale di Plyr
   per evitare qualsiasi spostamento del testo in hover/checked. */
.plyr__menu__container .plyr__control[role="menuitemradio"]::before{
    /* stessi valori di dimensione/posizionamento del CSS originale Plyr */
    content: "";
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 100%;
    /* solo colore adattato al tema (cerchietto chiaro su sfondo scuro) */
    background: rgba(255,255,255,0.14);
}

.plyr__menu__container .plyr__control[role="menuitemradio"]::after{
    /* stessa logica di comparsa del puntino interno di Plyr, ma giallo */
    background: #fbff00;
    border: 0;
    width: 6px;
    height: 6px;
    left: 12px;
    top: 50%;
    opacity: 0;
    transform: translateY(-50%) scale(0);
    border-radius: 100%;
}

.plyr__menu__container
    .plyr__control[role="menuitemradio"][aria-checked="true"]::before{
    background: rgba(251,255,0,0.4);
}

.plyr__menu__container
    .plyr__control[role="menuitemradio"][aria-checked="true"]::after{
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Evitiamo che il menu venga tagliato dal contenitore del video nelle pagine delle lezioni */
.video-section.overflow-hidden{
    overflow: visible !important;
}
/**
 * MENU
 * */
.menu-wrapper .font-custom-1{ font-size: 25px; }

.panel-sidebar-list .list:hover > .single.text-info i{ color: #0495b2 !important; }

.btn-icon-custom{ max-width: 230px; padding: 3px; border-radius: 3px; display: flex; text-align:center; align-items: center; padding: 10px; border-radius: 10px; transition: all 0.2s linear; }
.btn-icon-custom img{ width: 10%; }
.btn-icon-custom span{ margin-left: 5%; }
.btn-icon-custom.dark{ border: 2px solid #000; }

body.dark-mode .footer-bg{ background-color: #444; }
header{ position: relative; z-index: 5; }
.header-area{ padding: 0; height: 60px; }
.col-logo{ height: 60px; }
.col-logo .inner-logo{ padding: 0; background-color: #5f003c; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; height: 110px; width: 130px; box-shadow: 0px 3px 10px #000; }
.col-logo .logo{ position: relative; top: 45px; }
.item-bottom-logo{ height:160px; width: 160px; margin-top: -80px; margin-bottom: -80px; background-color: #000; border-radius: 100%; }
.col-logo .logo img{ height: auto; width: 100px; position: relative; }

.menu-wrapper .menu-sx, .menu-wrapper .menu-dx{ margin-left: 50px !important; margin-right: 50px !important; }
.menu-sx a, .menu-dx a{ font-weight:bold; text-transform: uppercase; color: #000 !important; }
body.dark-mode .menu-sx a, body.dark-mode .menu-dx a{ color: #fbff00; }

.menu-sx a, .menu-dx a {
  display: inline-block;
  position: relative;
  color: #000 !important;
}

.menu-sx a:hover, .menu-dx a:hover,
.menu-sx a:active, .menu-dx a:active,
.menu-sx a.active, .menu-dx a.active {
  color: #000 !important;
}
body.dark-mode .menu-sx a:hover, body.dark-mode .menu-dx a:hover,
body.dark-mode .menu-sx a:active, body.dark-mode .menu-dx a:active,
body.dark-mode .menu-sx a.active, body.dark-mode .menu-dx a.active,
body.dark-mode .menu-sx a.single, body.dark-mode .menu-dx a.single,
body.dark-mode .menu-sx a.single:hover, body.dark-mode .menu-dx a.single:hover,
body.dark-mode .menu-sx a.single:active, body.dark-mode .menu-dx a.single:active,
body.dark-mode .menu-sx a.single.active, body.dark-mode .menu-dx a.single.active,
body.dark-mode .menu-sx a.font-custom-1, body.dark-mode .menu-dx a.font-custom-1,
body.dark-mode .menu-sx a.font-custom-1:hover, body.dark-mode .menu-dx a.font-custom-1:hover,
body.dark-mode .menu-sx a.font-custom-1:active, body.dark-mode .menu-dx a.font-custom-1:active,
body.dark-mode .menu-sx a.font-custom-1.active, body.dark-mode .menu-dx a.font-custom-1.active,
body.dark-mode .header-area .main-menu .listing .single-list:hover > .single,
body.dark-mode .header-area .main-menu .listing .single-list .single.active,
body.dark-mode .header-area .main-menu .listing .single-list .single:hover {
  color: #fbff00 !important;
}

.menu-sx a::after, .menu-dx a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.menu-sx a:hover::after, .menu-dx a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
body.dark-mode .menu-sx a::after, body.dark-mode .menu-dx a::after{ background-color: #fbff00; }



.box-assistant{ position: fixed; bottom: 70px; right: 0; width: 260px; height: 60px; padding: 10px 20px; background-color: #000; border-bottom-left-radius: 50px; border-top-left-radius: 50px; text-align: left; z-index: 10; right: -180px; transition: all 0.2s linear; }
.box-assistant:hover{ cursor: pointer; right: 0; }
.box-assistant img{ margin-right: 20px; }

.light-mode.dark-mode .header-sticky.sticky-bar{ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3) !important; }

/**
 * LOGIN AREA
 * */
body.dark-mode.body-login{ background-color: #fff; }
.light-mode.dark-mode .ot-login-area .ot-login-card{ background-color: #000; }
.ot-login-area .logo img{ transition: all 0.2s linear; }
.ot-login-area .logo img.dark{ display: none !important; }
.light-mode.dark-mode img.light{ display: none !important; }
.light-mode.dark-mode img.dark{ display: block !important; }


/**
 * Pagina corso
 * */
 body.playlist{ height: auto !important; }
 .playlist .rn-backto-top-active{ display: none !important; }
.panel-corso header{ position:fixed; left: 0; top: 0; right: 0; background-color: #fff; }
.panel-corso .header-area.header-sticky .container{ max-width: 100%; }
.playlist-wrapper .panel-sidebar{ position: absolute; }
/* Desktop: l'header (HOME / CORSI) deve stare sopra alla card lezioni */
@media(min-width: 992px){
    .panel-corso header{
        z-index: 1000;
    }
    .panel-corso .playlist-banner,
    .panel-corso .playlist-wrapper,
    .panel-corso .panel-sidebar{
        z-index: 1;
    }
}
.panel-sidebar.panel-sidebar2, .panel-corso .panel-sidebar{ top: 150px; }
.listing-video-wrapper{ max-height: 100%; }
.playlist-right-side{ margin-top: 150px; }
.img-anteprima-corso{ margin-bottom:30px; }
.img-anteprima-corso img{ border-radius: 10px; }

/*
 * Pulsante menu lezioni su mobile (pagina corso)
 * Forziamo il pulsante del menu delle lezioni ad essere sempre sopra agli altri elementi
 * così da evitare che overlay / video o altri layer blocchino il click 
 * e nascondiamo la barra superiore (header del corso) quando il menu lezioni è aperto,
 * così il menu può occupare tutto lo schermo senza essere coperto.
 */
@media(max-width: 991px){
    .panel-corso .playlist-banner{
        z-index: 9999;
    }

    .panel-corso .panel-sidebar-icon .sidebar-icon{
        position: relative;
        z-index: 10000;
    }

    /* Quando l'overlay del menu è attivo nascondiamo la playlist-banner
     * in modo che non resti sopra al menu delle lezioni aperto.
     */
    .panel-corso .sidebar-body-overlay.active ~ .playlist-banner{
        display: none;
    }
}

.box-avanzamento{ text-align:left; padding-left:10px; margin:0 0 20px; }

.link-quiz{
    text-align: left;
    color: var(--dark);
    padding: 16px 52px 16px 16px;
    background: var(--body);
    font-size: 18px;
    font-weight: 600;
    display: block;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 0;
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    border: 0;
    margin-bottom: 20px;
}
.disabled-lesson{ opacity: .7; }
body.dark-mode .link-quiz .title{ color: var(--dark); }


.video-playlist .accordion-header .accordion-button .title{ width: 100% !important; }

.view-wrapper.non-acquistato{ position:relative; }
.view-wrapper.non-acquistato .course-widget img{ opacity: .4; transition: all 0.2s linear; }
.view-wrapper.non-acquistato .non-acquistato-basge{ display: inline-block; position: absolute; top: 30px; left: 30px; padding: 5px 10px; background-color: #ff0000; color: #fff; font-size: 10px; border-radius:10px; z-index: 11; }

.title-lesson{ padding-left: 15px; font-size:25px; margin-bottom:20px; }

.logo-ngir-dark-mode{ display: none !important; }
body.dark-mode .logo-ngir-light-mode{ display: none !important; }
body.dark-mode .logo-ngir-dark-mode{ display: block !important; }


/**
 * STUDENT ACCOUNT
 * */
.panel-corso.profile-student-area .admin-wrapper{ position:relative; top: 130px; min-height: calc(100vh - 330px) }
.setting-tab .nav-item .nav-link.active{ background-color: #000; color: #fff !important; }
.setting-tab .nav-item .nav-link.active i, .setting-tab .nav-item .nav-link.active span{ color: #fff !important; }

body.dark-mode .admin-wrapper .btn-icon-custom.dark{ border-color: #fbff00 !important; background-color: #fbff00 !important }

.content-blocked-effect *{ transition: all 0.3s linear; }
.box-pillola-contest:hover .content-blocked-effect, .pillola-trustpilot.blocked:hover .inner-2{ filter: grayscale(1); filter: blur(3px); opacity: .4  }

.font-18{ font-size:20px; }



/**
*   course-homepage
* */
.course-homepage img{ width: 200px; }
.activity-progress .single-progress .title{ font-size: 22px !important; }
.progress, .progress-stacked{ border: 1px solid #c0c0c0; }
.activity-progress .single-progress .percentage{ text-transform: none; }
.dark-mode .activity-progress .single-progress .percentage{ color: #fbff00 !important; opacity: .6; }

.btn-type-1{ display: inline-block;
    border-radius: 5px;
    background-color: #5f003c;
    border: 1px solid #5f003c;
    color: #fbff00;
    padding: 12px 40px;
    font-size: 15px;
    transition: all 0.2s linear;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none; }
.btn-type-1:hover{ opacity: .8; color: #fbff00; }
.btn-type-1.disabled-link{ cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.btn-type-1 i{ top: 3px; display: inline-block; position: relative; }

.pillola-trustpilot{ position: relative; background: #fff; border: 1px solid var(--ot-primary-border); border-radius:10px; }
.pillola-trustpilot.admin-hero .title{ color: #000; }
.pillola-trustpilot .inner{ padding:30px; }
.pillola-trustpilot .outline-btn, .btn-custom-1{ border-radius:10px; min-width: 180px; }
.pillola-trustpilot .outline-btn:hover, .btn-custom-1:hover{ color: #fff !important; }
.pillola-trustpilot .outline-btn:hover svg, .btn-custom-1:hover svg{ fill: #fff !important; }
.dark-mode .pillola-trustpilot .outline-btn:hover, .dark-mode .btn-custom-1:hover{ color: #000 !important; }
.dark-mode .pillola-custom .outline-btn{ border: 1px solid #000; color: #000; }


.box-pillola-contest{ background: #fff; border: 1px solid var(--ot-primary-border); border-radius:10px; }

.content-blocked{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; opacity: 0; pointer-events: none; }
.content-blocked .inner{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; text-align: center; }
.content-blocked .inner img{ width: 100px; width: 100px; }

.pillola-trustpilot.blocked:hover .content-blocked, .box-pillola-contest:hover .content-blocked{ opacity: 1; background-color: rgba(255, 255, 255, .6); pointer-events: auto; }



/**
*   USER ACCOUNT
* */
.panel-corso header{ background: #fff; }
.panel .header-area{ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); background: #fff; }
.panel .menu-wrapper{ border-bottom: 0; }
.dark-mode.panel .header-area{ background: #333; }

.panel-sidebar-list .list:first-child > .single{ border-top-left-radius: 20px; border-top-right-radius: 20px; }


input.readonly{ opacity: .5 !important; }

.remember-checkbox.quize .ot-checkbox:checked ~ .ot-checkmark, .remember-checkbox.selected-quize .ot-checkmark{ background-color: #000; border-color: #fbff00; }

.note_list_single{ border: 1px solid #c0c0c0; padding: 20px; border-radius: 10px; margin-bottom:10px; }

body.dark-mode .btn-primary-fill{ color: #000; }

@media(min-width: 993px){
    .playlist-banner{ display: none; }

    .area-riservata .admin-wrapper, .area-riservata .panel-sidebar{ margin-top: 120px; }
}

@media(max-width: 767px){

    .light-mode .large-device.light-logo{ display: block !important }
    .dark-mode .large-device{ display: none !important; }

    .playlist-right-side{ margin-top: 85px !important; }
    .panel-sidebar.panel-sidebar2, .panel-corso .panel-sidebar{ top: 0; }

    .playlist .footer-mobile-wrapper{ display: none !important; }
    .footer-mobile-wrapper .home-btn{ 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important; /* taglia gli angoli dell'immagine fuori dal cerchio */
        border-radius: 50% !important;
    }
    .footer-mobile-wrapper .home-btn img{ 
        width: 70% !important;
        height: 70% !important;
        object-fit: contain !important;
        border-radius: 50% !important;
    }
    body.dark-mode .footer-mobile-wrapper .listing .single-list a, body.dark-mode .footer-mobile-wrapper .listing .single-list a span, body.dark-mode .footer-mobile-wrapper .listing .single-list a.active i{ color: #000; }

    .font-18{ font-size: 16px !important; }

    .section-padding2{ padding-top: 0; }

    .panel-corso header .header-area.header-sticky.sticky-bar{ display: none !important; }

    .area-riservata header{ display: none !important; }
}

.dark-mode .btn-primary-submit{ color: #000; }
.dark-mode .btn-primary-submit:hover{ color: #fbff00; }
body.dark-mode .btn-primary-outline:hover{ color: #000; }


.hero-area .ot-banner-inner{ min-height: 700px; background-size: 100%; background-repeat: no-repeat; background-position:center; }
.hero-area .ot-banner-inner .banner-text{ max-width: 40%; }
.hero-area .ot-banner-inner .banner-text .fill-btn{ background-color: #fbff00 !important; color: #000; }
.hero-area .ot-banner-inner .banner-text .title .sub-title{ font-family: 'Impact', sans-serif; text-transform: uppercase;  }

@media(max-width: 992px){
    .hero-area .ot-banner-inner{ min-height: 250px; background-size: cover; background-position:center; }
    .hero-area .ot-banner-inner .banner-text{ max-width: 60%; }
    .hero-area .ot-banner-inner .banner-text .title .sub-title{ font-size:22px; }
}


/**
    NEW PLATFORM STYLE
 */
body.light-mode:not(.dark-mode) { background-color: var(--panel-bg); }
.text-yellow{ color: #fbff00 !important; }
.btn-yellow{ display: inline-block; background-color: #fbff00 !important; color: #000; padding: 11px 15px !important; border-radius: 5px; font-size: 14px; font-weight: 500; min-width: 180px; }
.btn-yellow:hover{ background-color: #fbff00 !important; color: #000; opacity: .6; }
.fnt-14{ font-size: 14px; }

.user-info .user-img{ background: #f7f7f7 !important; }

p, ul li{ font-family: 'Europa Grotesk SH Reg', sans-serif !important; }
h1, h2, h3, h4, h5{ font-family: 'Europa Grotesk SH Med', sans-serif; }
.font-custom-bold{ font-family: 'Europa Grotesk SH Med', sans-serif !important; line-height: 1.3em !important; }
.font-custom-reg{ font-family: 'Europa Grotesk SH Reg', sans-serif !important; line-height: 1.3em !important; }
.hero-area .ot-banner-inner .banner-text .title .sub-title{ font-family: 'Europa Grotesk SH Med', sans-serif !important; }
.font-custom-1{ font-family: 'Europa Grotesk SH Med', sans-serif !important; font-weight: bold; }

.course-widget .widget-mid .course-widget-info-title .title{ font-size: 22px !important; }
.course-widget .widget-mid .course-widget-info-title .subtitle{ margin-top: -20px; }
.dark-mode .box-pillola-contest .about-caption .font-custom-1, .dark-mode .pillola-custom .font-custom-1{ color: #fbff00; }

.brd-radius-20{ border-radius: 10px; }

.bg-purple{ background-color: #5f003c; }
.dark-mode .bg-purple{ background-color: #fbff00; }
.dark-mode .bg-white{ background-color: var(--white) !important; }
.dark-mode .pillola-trustpilot, .dark-mode .box-pillola-contest{ background-color: var(--white) !important; }

.title-link-custom, .title-link-custom *{ font-weight: normal; transition: all 0.2s linear; }
.title-link-custom:hover{ cursor: pointer; opacity: .6; }

.fnt-18{ font-size: 18px; }

/* Miglioramenti per l'audio su mobile e iOS con Vimeo */
/* Assicura che il pulsante mute sia sempre visibile e accessibile su tutti i dispositivi */
.plyr--vimeo [data-plyr="mute"],
.plyr--vimeo button[data-plyr="mute"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Su mobile, assicura che i controlli audio siano sempre accessibili */
@media (max-width: 768px) {
    .plyr--vimeo [data-plyr="mute"],
    .plyr--vimeo button[data-plyr="mute"] {
        display: inline-block !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Su iOS, mantieni il pulsante mute visibile anche se il volume è nascosto */
    .plyr--is-ios.plyr--vimeo [data-plyr="mute"],
    .plyr--is-ios.plyr--vimeo button[data-plyr="mute"] {
        display: inline-block !important;
        visibility: visible !important;
    }
}

/* Assicura che gli iframe Vimeo abbiano gli attributi corretti per l'audio su mobile */
.plyr__video-embed iframe[src*="vimeo.com"] {
    pointer-events: auto;
}

/* Modifica colori violastri in giallo nelle card dei corsi */
/* Cambia il colore del numero di lezioni da violastro a giallo */
.course-widget .course-widget-info_rating .text-primary {
    color: #fbff00 !important;
}

/* Cambia l'effetto hover del titolo del corso da violastro a giallo */
.course-widget .course-widget-info-title .title.colorEffect {
    background-image: linear-gradient(to right, #fbff00 45%, var(--ot-primary-title) 55%) !important;
}

/* FIX ICONE ACCORDION CORSO */
.video-playlist .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    content: "" !important;
    transform: rotate(-180deg);
    transition: transform .2s ease-in-out;
}

.video-playlist .accordion-button.collapsed::after {
    transform: rotate(0deg);
}

body.dark-mode .video-playlist .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}