/* ==========================================================
   TUHOST PRO WEBMAIL - INTERFAZ INTERNA
   ========================================================== */

/* ------------------------------------------
   MENU LATERAL
   ------------------------------------------ */

@media screen and (min-width: 481px) {

    #layout-menu {
        background:
            linear-gradient(
                180deg,
                #073b63 0%,
                #075581 100%
            ) !important;
    }

    #layout-menu .popover-header {
        background: #ffffff !important;
        border-right: 1px solid #d6e9f4 !important;
    }

    #layout-menu .popover-header img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;

        padding: 8px !important;

        object-fit: contain !important;
        box-sizing: border-box !important;
    }

    #taskmenu a {
        color: rgba(255,255,255,.88) !important;
        transition:
            background-color .15s ease,
            color .15s ease;
    }

    #taskmenu a:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,.10) !important;
    }

    #taskmenu a.selected {
        color: #ffffff !important;
        background: #149fe6 !important;
    }

    #taskmenu a.logout {
        color: #ffdede !important;
    }

    #taskmenu a.logout:hover {
        background: rgba(220,50,50,.22) !important;
        color: #ffffff !important;
    }
}


/* ------------------------------------------
   PANELES
   ------------------------------------------ */

#layout-sidebar,
#layout-list,
#layout-content {
    border-color: #d8e8f2 !important;
}

#layout-sidebar,
#layout-list {
    background: #ffffff !important;
}

#layout-content {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        ) !important;
}


/* ------------------------------------------
   CABECERAS
   ------------------------------------------ */

#layout > div > .header {
    background: #f4faff !important;
    color: #073b63 !important;
    border-color: #d8e8f2 !important;
}

#layout > div > .footer {
    border-color: #d8e8f2 !important;
}


/* ------------------------------------------
   CARPETAS / LISTADOS
   ------------------------------------------ */

.listing li.selected > a,
.listing tr.selected > td,
.treelist li.selected > a {
    background: #e6f6ff !important;
    color: #073b63 !important;
}

.listing li > a:hover,
.treelist li > a:hover {
    background: #f0f9fe !important;
}

.folderlist li.mailbox.selected > a {
    background: #dff4ff !important;
    color: #073b63 !important;
}


/* ------------------------------------------
   BUSCADOR
   ------------------------------------------ */

.searchbar {
    background: #ffffff !important;
    border-color: #d5e8f3 !important;
}

.searchbar input {
    color: #073b63 !important;
}


/* ------------------------------------------
   BOTONES PRINCIPALES
   ------------------------------------------ */

.btn-primary,
button.btn-primary {
    background: linear-gradient(
        135deg,
        #0ea5e9,
        #147ee8
    ) !important;

    border-color: #147ee8 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    filter: brightness(.96);
}


/* ------------------------------------------
   SCROLL
   ------------------------------------------ */

html:not(.touch) ::-webkit-scrollbar-thumb {
    background: #aacddd !important;
}

html:not(.touch) ::-webkit-scrollbar-track {
    background: #f3f9fc !important;
}


/* ------------------------------------------
   MOVIL
   ------------------------------------------ */

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

    #layout-menu .popover-header {
        background: #ffffff !important;
    }

    #layout-menu .popover-header img {
        max-width: 180px !important;
        max-height: 46px !important;
        object-fit: contain !important;
    }

    #taskmenu a.selected {
        background: #149fe6 !important;
        color: #ffffff !important;
    }

    #layout > div > .header {
        background: #f4faff !important;
    }
}