@import url("../../elastic/styles/styles.min.css");
/* =========================================================
   SooW Webmail
   Eigen Roundcube-skin op basis van Elastic
   ========================================================= */

:root {
    --soow-blue: #079cdd;
    --soow-blue-dark: #067bb1;
    --soow-ink: #303238;
    --soow-muted: #626b75;
    --soow-line: #dbe8ef;
    --soow-soft: #eef8fc;
    --soow-white: #ffffff;
    --soow-shadow: 0 10px 35px rgba(20, 62, 83, .12);
}

/* ALGEMEEN */

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--soow-ink);
}

a {
    color: var(--soow-blue-dark);
}

/* =========================================================
   INLOGSCHERM
   ========================================================= */

body.task-login {
    background:
        radial-gradient(circle at 20% 20%,
            rgba(7,156,221,.12), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #eef8fc 100%) !important;
}

.task-login #layout-content {
    background: transparent !important;
}

/* Logo bewust begrensd */
.task-login #logo,
.task-login #logo img {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain;
}

.task-login #logo {
    margin: 0 auto 24px !important;
}

/* Inlogkaart */
.task-login .content {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--soow-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--soow-shadow) !important;
    padding: 32px !important;
}

/* Velden */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    border: 1px solid var(--soow-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--soow-ink) !important;
}

.form-control:focus {
    border-color: var(--soow-blue) !important;
    box-shadow: 0 0 0 3px rgba(7,156,221,.14) !important;
}

/* =========================================================
   KNOPPEN
   ========================================================= */

.btn-primary {
    background: var(--soow-blue) !important;
    border-color: var(--soow-blue) !important;
    border-radius: 12px !important;
    font-weight: 650 !important;
    box-shadow: 0 8px 20px rgba(7,156,221,.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--soow-blue-dark) !important;
    border-color: var(--soow-blue-dark) !important;
}

/* =========================================================
   HOOFDINTERFACE
   ========================================================= */

/* Hoofdmenubalk */
#layout-menu {
    background: var(--soow-ink) !important;
}

/* Geselecteerde menu-optie */
#layout-menu .selected > a,
#layout-menu a:hover {
    background: var(--soow-blue) !important;
}

/* Zijpanelen */
#layout-sidebar,
#layout-list,
#layout-content {
    border-color: var(--soow-line) !important;
}

/* Werkbalken */
.toolbar,
.header {
    border-color: var(--soow-line) !important;
}

/* =========================================================
   MAPPEN
   ========================================================= */

.folderlist li a {
    border-radius: 10px !important;
}

.folderlist li.selected > a {
    background: rgba(7,156,221,.12) !important;
    color: var(--soow-blue-dark) !important;
    font-weight: 650;
}

.folderlist li a:hover {
    background: var(--soow-soft) !important;
}

/* =========================================================
   BERICHTENLIJST
   ========================================================= */

.messagelist tr {
    border-color: var(--soow-line) !important;
}

.messagelist tr:hover {
    background: var(--soow-soft) !important;
}

.messagelist tr.selected td {
    background: rgba(7,156,221,.12) !important;
}

/* =========================================================
   PANELEN / POPUPS
   ========================================================= */

.popover,
.modal-content,
.menu,
.popupmenu {
    border-color: var(--soow-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--soow-shadow) !important;
}

/* =========================================================
   SCROLLBALK
   ========================================================= */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c8dbe5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9fc5d7;
}

/* =========================================================
   MOBIEL
   ========================================================= */

@media screen and (max-width: 768px) {
    .task-login #logo,
    .task-login #logo img {
        width: 145px !important;
        max-width: 145px !important;
        max-height: 145px !important;
    }

    .task-login .content {
        border-radius: 18px !important;
        padding: 24px !important;
    }
}