:root {
    --bg-url: url('../../images/login-light.jpg');
}

[data-bs-theme=dark] {
    --bg-url: url('../../images/login.jpg');
}

.btn-excel {
    color: #1D6F42
}

.btn-pdf {
    color: #F40F02
}

.btn-multiselect {
    background: #fff;
    border: 1px solid #d1d3e2
}

.cursor-pointer {
    cursor: pointer;
}

.login-bg {
    background-image: var(--bg-url);
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: cover;
}

.ck-editor {
    color: black;
}

.switch {
    position: relative;
    border-radius: 0.35rem;
    line-height: 1.5;
    width: 300px;
    min-height: 34px;
    background-color: var(--input-bg-clr);
    outline: 1px solid var(--input-border-clr);
}

.switch-2 {
    width: 400px;
}

.switch-label {
    position: relative;
    z-index: 2;
    float: left;
    width: 100px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

.switch-2 > .switch-label {
    width: 200px;
}

.switch-input {
    display: none;
}

.switch-input:checked + .switch-label {
    color: #FFF;
    transition: 0.15s ease-out;
    transition-property: color, text-shadow;
    font-weight: bold;
}

.switch-input:checked + .switch-label-y ~ .switch-selector {
    transform: translateX(0%);
    background-color: var(--success);
}

.switch-input:checked + .switch-label-i ~ .switch-selector {
    transform: translateX(100%);
    background-color: var(--warning);
}

.switch-input:checked + .switch-label-n ~ .switch-selector {
    transform: translateX(200%);
    background-color: var(--danger);
}

.switch-selector {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    display: block;
    width: 100px;
    height: 100%;
    border-radius: 0.35rem;
    background-color: #1ab394;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}


.switch-2 > .switch-selector {
    width: 200px;
}

.switch-input:checked + .switch-danger ~ .switch-selector {
    background-color: var(--danger);
}

.switch-input:checked + .switch-info ~ .switch-selector {
    background-color: var(--info);
}
.switch-input:checked + .switch-primary ~ .switch-selector {
    background-color: var(--primary);
}

@keyframes specialist-flasher {
    0% {
        background-color: var(--clr-red);
        color: var(--clr-yellow);
    }
    50% {
        background-color: var(--clr-yellow);
        color: var(--clr-red);
    }
    100% {
        background-color: var(--clr-red);
        color: var(--clr-yellow);
    }
}

.specialist:after {
    content: "\A Specialist";
    white-space: pre;
    animation-name: specialist-flasher;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.warningflash:after {
    content: "\A Specialist Soon";
    white-space: pre;
    animation-name: specialist-flasher;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.fs-1{
    font-size:2.5rem !important;
}
.fs-2{
    font-size:2rem !important;
}
.fs-3{
    font-size:1.75rem !important;
}
.fs-4{
    font-size:1.5rem !important;
}
.fs-5{
    font-size:1.25rem !important;
}
.fs-6{
    font-size:1rem !important;
}