* {
    font-family: Figtree;
}

:root { 
    --light-purple: #DABDEF;
    --purple: #AF99CE;
    --dark-purple: #8374AD;
    --light-blue: #3C3C73;
    --blue: #2B2B6A;
    /* --dark-blue: #16165B; */
    --dark-blue: #1B1B5B;
}

/* INDEX */
/* 
    -> backgrounds
    -> buttons
    -> forms
    -> text

    -> sidebar
    -> tables
*/

/* ///////////////// BACKGROUNDS \\\\\\\\\\\\\\\\\\\ */

.blue-bg { background: var(--dark-blue); }



/* /////////////////// BUTTONS \\\\\\\\\\\\\\\\\\\\\ */

.btn { font-weight: 600; }

.btn-primary {
    background-color: var(--blue);
}
.btn-secondary {
    background-color: #605890;
}
.btn.blue-bg { color: white; }

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active,.btn.blue-bg:hover { 
    background: var(--light-blue);
    color: white;
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
    box-shadow: 0 0 0 1px var(--light-blue);
}
.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary:hover {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}



/* ///////////////////// FORMS \\\\\\\\\\\\\\\\\\\\\ */

/* label */
.form-label, label {
    color: var(--blue);
    font-size: 14px;
}

/* inputs */

.form-control:focus {
    border-color: var(--light-purple);
    box-shadow: 0 0 0 1px var(--light-purple);
}

/* switch toggle */

.form-switch .form-check-input {
    height: 20px;
}
.form-switch .form-check-input:after{
    height: 15px;
    width: 15px;
    top: 2px;
}
.form-switch .form-check-input:checked:after{
    transform: translateX(22px);
}
.form-switch .form-check-input:checked {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}


/* ///////////////////// TEXT \\\\\\\\\\\\\\\\\\\\\\ */

/* titles */

h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--blue);
}

/* colored text */

.text-purple { color: var(--purple); }

.text-purple:hover { color: var(--dark-purple); }



/* //////////////////// SIDE BAR \\\\\\\\\\\\\\\\\\\\ */

/* icons */

.icon {
    color: var(--dark-blue);
}

/* //////////////// TABLES \\\\\\\\\\\\\\\ */

/* tables */

.dt-column-title {
    color: var(--dark-blue);
}

/* search bar */

div.dt-container .dt-search input {
    background: #f9f9f9;
}






/* a rever  */
@media (min-width: 992px) {
    .dropdown .dropdown-toggle.show:after, .dropend .dropdown-toggle.show:after, .dropstart .dropdown-toggle.show:after, .dropup .dropdown-toggle.show:after {
        margin-top: -5px;
    }
    .dropdown .dropdown-menu:before {
        right: 28px;
        left: auto;
    }
}