:root {
    --bs-primary: #0E7C8B;
    --bs-primary-rgb: 14, 124, 139;
    --bs-link-color: #0E7C8B;
    --bs-link-color-rgb: 14, 124, 139;
    --bs-link-hover-color: #0B6575;
}

body {
    background-color: #f5f6f8;
    font-family: 'Inter', sans-serif;
}

.btn-primary {
    --bs-btn-bg: #0E7C8B;
    --bs-btn-border-color: #0E7C8B;
    --bs-btn-hover-bg: #0B6575;
    --bs-btn-hover-border-color: #0B6575;
    --bs-btn-active-bg: #0A5C6A;
    --bs-btn-active-border-color: #0A5C6A;
    --bs-btn-focus-shadow-rgb: 14, 124, 139;
}

.btn-danger {
    --bs-btn-bg: #C0392B;
    --bs-btn-border-color: #C0392B;
    --bs-btn-hover-bg: #A93226;
    --bs-btn-hover-border-color: #A93226;
    --bs-btn-active-bg: #922B21;
    --bs-btn-active-border-color: #922B21;
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
}

.btn-outline-primary {
    --bs-btn-color: #0E7C8B;
    --bs-btn-border-color: #0E7C8B;
    --bs-btn-hover-bg: #0E7C8B;
    --bs-btn-hover-border-color: #0E7C8B;
    --bs-btn-active-bg: #0B6575;
    --bs-btn-active-border-color: #0B6575;
    --bs-btn-focus-shadow-rgb: 14, 124, 139;
}

/* Sign-in form */
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
    margin-bottom: -1px;
    border-radius: 0;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin .form-control:first-of-type {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
.form-signin .form-control:last-of-type {
    margin-bottom: 10px;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Selectize in input groups */
.input-group .input-group-text {
    min-width: 200px;
}
.input-group .selectize-control {
    flex: 1 1 auto;
    min-width: 0;
}
.input-group .selectize-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* On narrow viewports the 200px label squeezes the select, so stack the
   label above the input and render it as a plain top-aligned caption. */
@media (max-width: 575.98px) {
    .input-group .input-group-text {
        min-width: 0;
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: flex-start;
        background-color: transparent;
        border: 0;
        padding: 0 0 0.25rem 0;
        font-weight: 500;
    }
    .input-group > .form-select,
    .input-group > .selectize-control {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .input-group .form-select {
        border-radius: 0.375rem;
    }
    .input-group .selectize-input {
        border-top-left-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
    }
}