body, .body {
    background-color: white !important;
}
.mgr-topbar {
    position: initial !important;
}
.login-logo {
    position: absolute;
    left: 30px;
    top: 50px;
}
#recovery-form .login-logo {
    position: fixed !important;
}
.login-logo > img {
    height: 30px;
}


/* width */
.left-side-container ::-webkit-scrollbar {
    width: 10px;
}

 /*Track*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px grey;
    border-radius: 10px;
}

/* Handle */
.left-side-container ::-webkit-scrollbar-thumb {
    background: #F5F0EB;
    border-radius: 10px;
    box-shadow: inset 0 0 4px grey;
}

/* Handle on hover */
.left-side-container ::-webkit-scrollbar-thumb:hover {
    background:  #41414170;
}

.body-container {
    min-height: 800px !important;
    background-color: white;
    display: flex;
    justify-content: space-between; /* Spaziatura tra form e immagine */
    align-items: center;             /* Centratura verticale di entrambi i contenuti */
    height: 87vh;
    padding-bottom: 20px;
}
.left-side-container {
    background-color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Mantiene il contenuto del form centrato verticalmente */
    width: 60vw;
    box-sizing: border-box;   /* Per evitare overflow di margini/padding */
    transition: opacity 0.5s ease-in-out; /* Aggiunge una transizione morbida */
}
.right-side-image {
    flex: 1;                             /* Prende tutto lo spazio disponibile */
    background-size: cover;            /* Sfrutta tutta l'altezza per l'immagine */
    background-repeat: no-repeat;        /* Evita la ripetizione dell'immagine */
    background-position: right;         /* Centra l'immagine */
    height: 100%;                        /* Rende l'immagine estesa verticalmente */
}
.left-side-container h1 {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}
.left-side-container h3 {
    font-size: 15px;
    margin-bottom: 20px;
    text-align: center;
}
.form-group {
    margin-bottom: 20px;
    text-align: center;
}

.left-side-container .form-control {
    /*padding: 10px;*/
    color: #41414180;
    font-size: 1rem;
    width: 410px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
input.form-control::placeholder {
    color: #41414180;
}
.btn-primary {
    background-color:  #414141;
    color: white !important;
    padding: 10px;
    font-size: 1rem;
}
.btn-primary:hover {
    cursor: pointer;
}
.no-margin-bottom {
    margin-bottom: 0px !important;
}
.forgot-password {
    display: block;
    color: #414141;
    text-decoration: underline;
    width: 410px!important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.manager-form {
    justify-content: center;
}
.lista-moduli-container{
    justify-content: initial;
}
.lista-moduli-container {
    display: flex;
}
.lista-moduli-admin , .lista-moduli-marketing {
    display: inline-block;
    width: 30vw;
    margin-left: auto;
    margin-right: auto;
}


.dropdown-button {
    position: relative;
    width: 410px;
    padding: 0px !important;
}

.custom-select {
    width: 100%;
    padding: 12px 20px;
    color: #41414180;
    border: none !important;
    appearance: none; /* Rimuove lo stile predefinito del browser */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.arrow-down {
    width: 25px !important;
}
.modules-container {
    /*display: flex;*/
    text-align: left;
    /*background-color: red;*/
}
.module-box {
    width: 330px;
    background-color: #F5F0EB;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 15px;
    position: relative; /* Necessario per riempire tutto lo spazio */
}

.module-box a {
    display: block;  /* Fa sì che il link occupi l'intero div */
    width: 100%;
    height: 100%;
    color: inherit; /* Mantiene lo stesso colore del div */
    text-decoration: none; /* Rimuove la sottolineatura del link */
}

.module-box:hover {
    background-color: #414141;
    color: white!important;
    cursor: pointer;
}

.module-box:hover a,
.module-box:hover .module-title ,
.module-box:hover .module-description
{
    color: white!important; /* Fa sì che il colore dell'ancora erediti dal div in hover */
}
.module-box:hover svg,
.module-box:hover path {
    fill: white !important; /* Cambia il colore dell'SVG in hover */
}



.module-category {
    width:330px;
    text-align: left !important;
    color: black;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px
}
.module-title {
    color: #414141;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}
.left-side-container.moduli{
    margin-top: 10px;
}
.module-boxes-container {
    max-height: 600px !important;
    overflow: overlay;
    width: 380px;
    margin-right: auto;
    margin-left: auto;
}
.module-description {
    margin-top: 20px;
    color: black;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}
.module-menu-icon {
    margin-right: 10px;
    height: 20px
}
.module-arrow-link {
    float: right;
    padding: 3px;
    height: 14px;
}
#recovery-form {
    display: none; /* Nascondi il form di recupero all'inizio */
}


/*OVERWRITE */

.mgr-footer, .mgr-topbar , .language-select.metis-select, .language-select.metis-select ul , .pwdreset-popup.showed {
   background-color: #C3C3C3;
    color: #414141!important;
}
.pwdreset-popup .pwdreset-input {
    background-color: #C3C3C3;
    color: #414141!important;
    border: 1px solid #414141 !important;
}
ul.topbar-menu>li>a, .pwdreset-popup .pwdreset-input input , .pwdreset-popup .pwdreset-input label, .pwdreset-popup .pwdreset-input input{
    color: #414141!important;
}
ul.topbar-menu>li.topbar-item-right {
    border-color:  #C3C3C3 !important;
}
.mgr-footer img {
    height: 30px !important;
}

.language-select.metis-select:before, .metis-form .language-select.metis-checklist:before{
    background-image: url("/html/manager/images/icon-dropdown_old.png");
}
.language-select.metis-select label:before, .metis-form .language-select.metis-checklist label:before {
    background-image: url("/html/manager/images/icon-languages.svg");
    background-size: auto 16px !important;
}

.pwdreset-popup .popup-buttons a.submit-btn {
    background-color:  #414141 !important;
}


.module-menu-collapse-icon {
    display: none;
}

.mgr-footer {
    z-index: 2;
    position: fixed;
    bottom: 0;
    width: 100%;
}
/*MEDIA QUERIES*/
@media screen and (max-width: 1580px) {
    .left-side-container {
        width: 50vw;
    }
    .module-boxes-container {
        width: 290px;
    }
    .module-box , .module-category {
        width: 240px;
    }

}
@media screen and (max-width: 1300px) {

    .module-boxes-container {
        width: 250px;
    }
    .module-box , .module-category {
        width: 190px;
    }
}

@media screen and (max-width: 1150px) {
    .module-boxes-container {
        max-height: 500px !important;
        overflow: overlay;
    }
    .mgr-topbar {
        position: absolute !important;
        z-index: 2;
    }
    /*.body-container {*/
    /*    height: auto;*/
    /*}*/
    .left-side-container .form-control, .forgot-password {
        width: 300px !important;
    }
    .right-side-image {
        position: absolute;
        width: 100%;
        z-index: 1;
    }
    .left-side-container {
        z-index: 2;
        width: 400px;
        padding: 0px;
        margin-left: auto;
        margin-right: auto;
    }
    .left-side-container.moduli{
        width: 600px;
        padding: 20px;
        border-radius: 10px;
        margin-top: 70px;
    }
    .lista-moduli-admin, .lista-moduli-marketing {
        width: 250px;
    }

    .mgr-footer {
        z-index: 2;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 20px 0;
    }

}
@media screen and (max-width: 800px) {
    .left-side-container {
        width: 350px;
    }
}

@media screen and (max-width: 600px) {
    /*.body-container {*/
    /*    height: auto;*/
    /*}*/
    .left-side-container.moduli {
        margin-top: 40px;
        padding: 10px 00px;
    }

    .left-side-container .form-control, .forgot-password {
        width: 250px !important;
    }

    .lista-moduli-container{
        display: block;
        max-height: 600px;
        overflow: auto;
        overflow-x: hidden;
    }
    .lista-moduli-admin, .lista-moduli-marketing {
        display: block !important;
        margin-bottom: 20px;
    }
    .module-boxes-container {
        max-height:  none !important;
    }
    .left-side-container.moduli {
        width: 300px;
    }

    /* Nasconde inizialmente il contenuto dei moduli */
    .lista-moduli-admin .modules-container .module-boxes-container,
    .lista-moduli-marketing .modules-container .module-boxes-container {
        display: none; /* Nasconde tutto il contenuto all'interno */
    }

    /* Visualizza solo .module-category per i div collassabili */
    .lista-moduli-admin.collapsible .module-category,
    .lista-moduli-marketing.collapsible .module-category {
        display: flex; /* Visualizza la categoria quando collassato */
        align-items: center;
    }

    /* Stile del contenitore collassabile */
    .lista-moduli-admin, .lista-moduli-marketing {
        cursor: pointer;
        border: 1px solid black;
        border-radius: 10px;
        padding: 10px;
    }

    .module-menu-collapse-icon {
        display: block;
        margin-left: 10px;
        height: 10px;
        float: right;
    }

    .module-menu-title {
        width:190px !important;
    }

    /*!* Icona per lo stato collassato *!*/
    /*.collapsible::after {*/
    /*    content: url("/html/manager/images/icon-dropdown.svg"); !* Icona di espansione *!*/
    /*    float: right;*/
    /*    font-size: 20px;*/
    /*    color: #555;*/
    /*}*/

    /*!* Cambia l'icona per lo stato espanso *!*/
    /*.collapsible.active::after {*/
    /*    transform: rotate(180deg); !* Ruota l'icona di 180 gradi *!*/
    /*}*/
}