:root {
    --primary: #27417b;
    --primary-soft: #c0cef1;

    --secondary: #574ca2;
    --secondary-soft: #d0caed;

    --accent: #006fa3;
    --accent-soft: #dcebf3;

    --muted: #5c6268;
    --muted-soft: #e9ecef;

    --success: #319263;
    --success-soft: #d6f5e4;

    --warning: #9f7d2a;
    --warning-soft: #fff3cd;

    --danger: #bf3f3f;
    --danger-soft: #fbd5d5;

    --layer-one: #fdf4f4;
    --layer-two: #e3e9e9;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Jost", sans-serif;
    font-weight: 600;
}

body {
    color: #473737 !important;
    font-family: "Jost", sans-serif;
    font-size: 1.05rem;
}

[x-cloak] {
    display: none !important;
}

a {
    color: var(--accent) !important;
}

html, body {
    height: 100%;
}

body {
    position: relative; /* if not already set */
}


body.darken-background {
    overflow: hidden;
}

.bg-layer-one {
    background-color: var(--layer-one) !important;
}

.bg-light-primary, .bg-light-primary-hover:hover {
    background-color: var(--primary-soft) !important;
}

.bg-accent, .bg-accent-hover:hover {
    background-color: var(--accent) !important;
}

.bg-soft-accent, .bg-soft-accent-hover:hover {
    background-color: var(--accent-soft) !important;
}

.bg-success, .bg-success-hover:hover {
    background-color: var(--success) !important;
}

.bg-soft-success, .bg-soft-success-hover:hover {
    background-color: var(--success-soft) !important;
}

.bg-muted, .bg-muted-hover:hover {
    background-color: var(--muted) !important;
}

.bg-soft-muted, .bg-soft-muted-hover:hover {
    background-color: var(--muted-soft) !important;
}

.bg-warning, .bg-warning-hover:hover {
    background-color: var(--warning) !important;
}

.bg-soft-warning, .bg-soft-warning-hover:hover {
    background-color: var(--warning-soft) !important;
}

.bg-primary, .bg-primary-hover:hover {
    background-color: var(--primary) !important;
}

.bg-soft-primary, .bg-soft-primary-hover:hover {
    background-color: var(--primary-soft) !important;
}

.bg-secondary, .bg-secondary-hover:hover {
    background-color: var(--secondary) !important;
}

.bg-soft-secondary, .bg-soft-secondary-hover:hover {
    background-color: var(--secondary-soft) !important;
}

.bg-danger, .bg-danger-hover:hover {
    background-color: var(--danger) !important;
}

.bg-soft-danger, .bg-soft-danger-hover:hover {
    background-color: var(--danger-soft) !important;
}

.bg-layer-one {
    background-color: var(--layer-one) !important;
}

.bg-layer-two {
    background-color: var(--layer-two) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.border-muted {
    border-color: #bfc3c6 !important;
}

.border-light-primary {
    border-color: var(--primary-soft) !important;
}

.border-soft-primary {
    border-color: var(--primary-soft) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

.border-soft-secondary {
    border-color: var(--secondary-soft) !important;
}

.border-layer-one {
    border-color: var(--layer-one) !important;
}

.border-layer-two {
    border-color: var(--layer-two) !important;
}

.btn-primary {
    background: var(--primary-soft) !important;
    border: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.btn-primary-outlined {
    border: var(--primary-soft) solid .5px !important;
    color: var(--primary) !important;
}

.card {
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%) !important;
}

.nav-link {
    background-color: transparent !important;
}

.nav-link, .nav-tabs {
    border: none !important;
}

.nav-link.active {
    color: var(--primary) !important;
    border-bottom: 1px solid var(--primary) !important;
}

.flatpickr-input {
    background: #FFFFFF !important;
}

.item:last-child {
    border: none !important;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Color of the overlay */
    position: fixed; /* Fixed position */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    z-index: 9999; /* Overlay everything else */
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.rounded-4 {
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem !important;
}

.text-layer-one, .text-layer-one-hover:hover {
    color: var(--layer-one) !important;
}

.text-light-primary, .text-light-primary-hover:hover {
    color: var(--primary) !important;
}

.text-primary, .text-primary-hover:hover {
    color: var(--primary) !important;
}

.text-secondary, .text-secondary-hover:hover {
    color: var(--secondary) !important;
}

.text-soft-secondary, .text-soft-secondary-hover:hover {
    color: var(--secondary-soft) !important;
}

.text-danger, .text-danger-hover:hover {
    color: var(--danger) !important;
}

.text-soft-danger, .text-soft-danger-hover:hover {
    color: var(--danger-soft) !important;
}

.text-accent, .text-accent-hover:hover {
    color: var(--accent) !important;
}

.text-soft-accent, .text-soft-accent-hover:hover {
    color: var(--accent-soft) !important;
}

.text-warning, .text-warning-hover:hover {
    color: var(--warning) !important;
}

.text-soft-warning, .text-soft-warning-hover:hover {
    color: var(--warning-soft) !important;
}

.text-success, .text-success-hover:hover {
    color: var(--success) !important;
}

.text-soft-success, .text-soft-success-hover:hover {
    color: var(--success-soft) !important;
}

.text-muted, .text-muted-hover:hover {
    color: var(--muted) !important;
}

.text-soft-muted, .text-soft-muted-hover:hover {
    color: var(--muted-soft) !important;
}

.text-soft-primary, .text-soft-primary-hover:hover {
    color: var(--primary-soft) !important;
}

.form-control:focus, input:focus {
    outline: purple !important;
}

.form-label {
    font-size: .8rem;
    font-weight: 500;
}

.tab-item-active {
    border-bottom: #0240813d solid 2px !important;
    /*border-radius: 4px !important;*/
}