/* Base */

[data-bs-theme=light] {
    --bs-header-color: rgb(21, 143, 143);

    --bs-message-success-bg: #e3fcec;
    --bs-message-success-text: #1f9d55;
    --bs-message-success-border: #51d88a;

    --bs-message-warning-bg: #fffabc;
    --bs-message-warning-text: #8d7b00;
    --bs-message-warning-border: #d3b800;

    --bs-message-error-bg: #fcebea;
    --bs-message-error-text: #cc1f1a;
    --bs-message-error-border: #ef5753;

    --bs-message-info-bg: #eff8ff;
    --bs-message-info-text: #2779bd;
    --bs-message-info-border: #6cb2eb;

    --bs-action-icon-color: rgb(21, 143, 143);
    --bs-table-border-color: rgba(188, 185, 185, 0.68);

    --bs-field-border: var(--darkgray);

    --calendar-day-selected: #f3d7d7;

    --white: white;
    --black: black;
    --darkgray: rgb(120, 118, 118);
    --red: #e00202;
    --green: green;
    --blue: #154f90;
    --purple: rgb(96, 4, 96);
    --lightcyan: rgba(238, 250, 250, 0.508);

    .btn-primary {
        background-color: var(--red);
        border: var(--red);
        color: var(--white);
        margin: 0m 0;
        font-size: 1.4em;
    }

    a.escape-link,
    a.escape-link:hover,
    a.escape-link:active,
    a.escape-link:link {
        text-decoration: none;
        color: var(--red);
        font-size: 1.4em;
        vertical-align: middle;
    }

    select.dropdown {
        height: 2.4em;
        border: 1px solid var(--bs-field-border);
        background-color: whitesmoke;
        color: var(--black);
    }

    input.cal-date-time {
        height: 2.2em;
        border: 1px solid var(--bs-field-border);
        background-color: whitesmoke;
        color: var(--black);
    }

    #userSelect select.dropdown {
        margin: 0;
        padding: 0;
        height: 2em;
        border: 1px solid var(--bs-field-border);
        background-color: whitesmoke;
        color: var(--black);
        float: right;
        width: 75% !important;
    }

    .user-me {
        padding: 0.2em 0;
        color: var(--bs-header-color);
        font-size: 1em;
        float: right;
    }

    #departmentSelect select.dropdown {
        border: var(--bs-action-icon-color);
        background-color: var(--bs-action-icon-color);
        color: var(--white);
    }

    .badge {
        cursor: pointer;
        vertical-align: top;
    }

    .user-count-of-max {
        font-weight: normal !important;
        font-size: smaller;
        font-stretch: narrower;
    }

    .text-bg-warning {
        color: white !important;
        background-color: coral !important;
    }

}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #adb5bd;
    --bs-body-color-rgb: 173, 181, 189;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(173, 181, 189, 0.75);
    --bs-secondary-color-rgb: 173, 181, 189;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(173, 181, 189, 0.5);
    --bs-tertiary-color-rgb: 173, 181, 189;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}

/* CAKE */
/* Flash messages */
.message {
    padding: .5rem 1rem;
    background: var(--bs-message-info-bg);
    color: var(--bs-message-info-text);
    border-color: var(--bs-message-info-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 1rem;
    cursor: pointer;
}

.message.hidden {
    display: none;
}

.message.success {
    background: var(--bs-message-success-bg);
    color: var(--bs-message-success-text);
    border-color: var(--bs-message-success-border);
}

.message.warning {
    background: var(--bs-message-warning-bg);
    color: var(--bs-message-warning-text);
    border-color: var(--bs-message-warning-border);
}

.message.error {
    background: var(--bs-message-error-bg);
    color: var(--bs-message-error-text);
    border-color: var(--bs-message-error-border);
}

/* DEFAULT */
main {
    margin-bottom: 1em !important;
}

html,
body {
    font-family: Nunito !important;
    background: none;
}

a,
a:hover,
a:active,
a:link {
    text-decoration: none;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 0.5em 0.2em 0 0.2em;
    background-color: var(--white);
    border-top: 1px solid var(--bs-table-border-color);
    border-bottom: 1px solid var(--bs-header-color);
    margin: 0;
}

h1.title {
    font-family: Nunito !important;
    text-align: left;
    font-size: 2em;
    font-weight: 400;
    margin: 0 0 0 0;
    padding: 0.2em 0;
    color: var(--bs-header-color);
    background-color: var(--white);
}

/* Extensions */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable- input:focus {
    border-color: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    background-color: none;
}

input[type="text"]:read-only {
    background-color: lightgray;
    border: 1px solid var(--bs-field-border);
    color: var(--black);
}

dt {
    font-weight: bolder;
    font-size: 1.3em
}

dd {
    padding: 0 0 0 1em;
    font-size: 1.3em
}

.icon-nav {
    color: var(--bs-header-color);
    font-size: 2em;
}

.icon-nav a {
    color: var(--bs-action-icon-color);
}

.icon-action {
    font-size: 1.7em;
    color: var(--bs-action-icon-color) !important;
    background-color: none;
    border: none;
    outline: none;
}

.icon-user-add {
    font-size: 1.7em;
    color: var(--green);
    background-color: var(--white);
    border: none;
    outline: none;
    padding: 0.1em 0;
}

.icon-user-remove {
    font-size: 1.6em;
    color: var(--red);
    background-color: none;
    border: none;
    outline: none;
}

.icon-close {
    font-size: 1.2em;
    color: var(--bs-action-icon-color);
    background-color: var(--white);
    border: none;
    outline: none;
    margin: -0.4em 0 0 0 !important;
    padding: 0 !important;
    float: right;
}

.version {
    margin: 0 0.2em;
    text-align: right;
    font-size: 0.8em;
}

.logo {
    height: auto;
    width: 10em;
    background-color: transparent;
}

.logo-department {
    height: 0.9em !important;
    margin: -0.2em 0 0 0;
}

.flash {
    text-align: center;
    position: sticky;
    width: 100%;
    margin: 0.5em 0;
    left: 1em;
}

.counter {
    color: var(--red);
}

.row {
    margin: 0 0.2em;
}

.date-row {
    background-color: var(--lightcyan);
    border-top: 0.75px solid var(--bs-header-color);
}

.department-cell {
    color: var(--bs-header-color);
    padding: 0;
}

.seats {
    float: left;
    color: var(--bs-action-icon-color);
}

.seats-number {
    float: right;
    vertical-align: text-top;
}

.month-cell {
    vertical-align: middle;
    color: var(--bs-action-icon-color);
    padding: 1em 0 0 0;
    font-size: 1.3em;
    border-bottom: 0.5px solid var(--bs-header-color);
}

.name-cell {
    padding: 0.5em 0 0 0;
    margin-bottom: 0;
    font-size: 1.3em;
    border-bottom: 0.5px solid var(--bs-table-border-color);
}

.title-cell {
    background-color: var(--white);
    padding: 0;
    margin: 0 0 0.5em 0;
    font-size: 1.4em;
    font-weight: bold;
    color: var(--bs-header-color);
    border-bottom: 0.5px solid var(--bs-header-color);
}

.date-cell {
    padding: 0.5em 0 0 0;
    font-size: 1.3em;
    border-bottom: 0.5px solid var(--bs-table-border-color);
}

.date {
    font-weight: bold;
}

.date a,
.date a:hover,
.date a:active,
.date a:link {
    text-decoration: none;
    color: var(--black) !important;
    cursor: pointer;
}

.times-cell {
    padding: 0.5em 0 0 0;
    font-size: 1.3em;
    border-bottom: 0.5px solid var(--bs-table-border-color);
}

.action-cell {
    padding: 0.5em 0 0 0;
    text-align: right;
    border-bottom: 0.5px solid var(--bs-table-border-color);
}

.jubilee {
    color: var(--purple) !important;
    font-size: smaller;
    font-stretch: narrower;
}

.birthday {
    color: var(--purple) !important;
    font-size: smaller;
    font-stretch: narrower;
}

.float-right {
    float: right;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.clear {
    clear: both;
}

.passive {
    color: var(--bs-action-icon-color) !important
}

.locked {
    color: var(--red) !important
}

.modal {
    --bs-modal-bg: var(--white) !important;
}

.modal-dialog {
    --bs-modal-bg: var(--white) !important;
}

.collapse {
    display: none;
}

.show {
    display: block;
}

.card {
    margin: 0 -0.7em !important;
}

.card-body {
    border-radius: 0%;
    border-bottom-color: var(--bs-table-border-color);
    border-left-color: var(--bs-table-border-color);
    border-right-color: var(--bs-table-border-color);
    border-top-color: white;
}

table.ui-datepicker-calendar {
    border-spacing: 0 !important;
}

.ui-datepicker table {
    border-collapse: inherit !important;
}

.ui-datepicker {
    font-family: Nunito;
    font-size: 1.1em;
    background: var(--white);
    color: var(--black);
    width: 100%;
    padding: 0;
    margin: 0 0 0.5em 0;
}

.ui-datepicker-header {
    font-size: 1.3em;
    font-weight: normal;
    background: var(--bs-header-color);
    border: 1px solid var(--bs-header-color);
    color: var(--white);
    height: 2.1em;
}

.ui-datepicker th {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 5px 0;
    color: var(--base);
}

.ui-datepicker tbody td {
    padding: 0;
    border: none;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
    border: none;
    font-size: 1.3em;
}

.ui-datepicker-calendar .ui-state-default {
    background: var(--white);
    color: var(--black);
}

.ui-datepicker-week-end {
    border: none;
    background: var(--lightcyan);
    color: var(--blue) !important;
}

.ui-datepicker-calendar .ui-state-active {
    background: var(--white);
    color: var(--bs-header-color) !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    border: 1px solid var(--red);
    color: var(--red) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
    font-family: Nunito;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    font-weight: normal;
    align-items: center;
    justify-content: center;
}

.ui-datepicker-prev:before {
    content: "←";
    color: var(--white);
    font-weight: bold;
    font-size: 1.4em;
    padding: 0 0 0 1em;
}

.ui-datepicker-next:before {
    content: "→";
    color: var(--white);
    font-weight: bold;
    font-size: 1.4em;
    padding: 0 1em 0 0;
}

#trainings {
    margin: 0;
    width: 100%;
}

#trainings .ui-state-busy a {
    background: var(--calendar-day-selected) !important;
}

#trainings .ui-state-free a {
    background: none !important;
}


@media only screen and (min-width: 600px) {
    html {
        font-size: 1em;
    }

    .icon-user-add {
        font-size: 2em;
    }

}