/* CSS Variables nye gays */
:root {
    --secondary-color: #7367f0;
    --bg-light: #ffffff;
    --text-gray: #777;
    --bg-light-sescondary: #e9e7fd;
    --bg-light-tertiary: #f3f3f3;
    --bg-gradient-light: linear-gradient(to right, #7267f0a3 0%, #ffffff 100%);
    --text-tertiary: #6f6c78;
    --btn-primary: #7266ee;

}


[data-bs-theme="darks"] {
    --bg-primary: #071925;
    --bg-secondary: #25293c;
    --bg-tertiary: #464252;
    --test: salmon;
    --bg-gradient-dark: linear-gradient(to right, #7367f0 0%, #423b8a 100%);
    --bg-dark-tertiary: #3c415a;
    --text-gray: #fff;

    --text-tertiary: #b8b8b8;

    .bg__dark__primary {
        background-color: var(--bg-secondary);
    }

    .bg__dark__tertiary {
        background-color: var(--bg-dark-tertiary);
    }

    .text__tertiary {
        color: var(--text-tertiary) !important;
    }

    .text__gray {
        color: var(--text-gray);
    }

    :is(.dark__paragraph, .dark__paragraph__2) {
        color: var(--bg-light);
    }

    .bg__dark__secondary {
        background-color: var(--bg-primary);
    }

    .dark__icon {
        color: var(--bg-light);
    }

    .dark__icon__secondary {
        color: #b8b8b8;
    }

    .table-darks thead th {
        background-color: #494d67 !important;
        color: #ffffff !important;
        border-top: 1px solid #4f5575 !important;
        border-bottom: 1px solid #4f5575 !important;
    }

    .table-row-padding {
        border-top: 1px solid #4f5575 !important;
        border-bottom: 1px solid #4f5575 !important;
    }

    .table-darks tbody tr:hover {
        background-color: #1a1e27 !important;
    }

    .dark__theme__dropdown {
        background-color: #2f3349;
    }

    :is(.dark__theme__controller figure, .dark__theme__controller p) {
        color: #cfcde4;
    }

    .dark__theme__controller:active {
        color: #cfcde4 !important;
        background-color: #3d4056 !important;
    }

    .dark__theme__controller:hover {
        color: #cfcde4;
        background-color: #3d4056;
    }

    .dark__theme__controller.theme__active {
        color: #7367f0;
        background-color: #e9e7fd;
    }

    .dark__modal {
        background-color: var(--bg-primary);
    }

    .btn-close {
        filter: invert(1) brightness(100%);
    }

    .inputbox label {
        color: var(--bg-light);
        position: relative;
    }

    .dark__input {
        border: 0;
        color: #bfbfbf;
        background-color: #4f5575;
    }

    .dark__input[readonly],
    .dark__input[disabled] {
        background-color: #4f5575;
        cursor: not-allowed;
    }

    .paginations ul li {
        background-color: var(--bg-primary);
        border: 1px solid #4f5575;
        color: white;
    }

    .delete__modal__forms p {
        color: #dddddd;
    }

    .dark__btn:hover {
        background-color: #7166ee9a !important;
    }

    #search {
        border-color: #757b98;
    }

    aside {
        background-color: #2f3349;
        /* transition: none; */
    }

    .dark__border {
        border-color: #4f5575;
    }

    .list__active {
        background-image: var(--bg-gradient-dark);
    }

    .side__list__menu:hover {
        background-color: rgba(255, 255, 255, 0.266);
    }

    .side__parent__active {
        background-color: #3d4056;
        border: 0;
    }

    /* !info, refactore this code */
    .dark__ref {
        color: #b8b8b8;
    }

    .dark__select {
        border-color: #494d67;
    }

    .modal-header {
        border-color: #4f5575;
    }

    .angle__icon svg path {
        stroke: #dddddd;
    }

    .report__icon svg path {
        fill: white;
    }

    .inputbox input[type="text"] {
        border: 0 !important;
        outline: none !important;
    }

    input[type="password"] {
        border: 0 !important;
        outline: none !important;
    }

    .select__part__active {
        font-size: 0.9rem;
        font-style: italic;
        font-weight: 300;
        background-color: #e0e0e1 !important;
        color: #2f3349 !important;
    }

    .select__part__inactive {
        font-size: 0.9rem;
        font-style: italic;
        font-weight: 300;
        background-color: #2f3349 !important;
    }
}

aside {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.dark__input[readonly],
.dark__input[disabled] {
    background-color: #EFEFEF;
    cursor: not-allowed;
}

.list__active {
    background-image: var(--bg-gradient-light);
}

.list__active p {
    font-weight: 600;
}

.side__list__menu:hover {
    background-color: #e5e5e5;
}

.side__parent__active {
    background-color: #f0f0f1;
}

.bg__dark__secondary {
    background-color: var(--bg-light);
}

.bg__dark__tertiary {
    background-color: var(--bg-light-tertiary);
}

:is(.dark__theme__controller figure, .dark__theme__controller p) {
    color: #444050;
}

.dark__theme__controller.theme__active {
    color: #7367f0;
    background-color: #e9e7fd;
}

.dark__theme__controller:active {
    color: #7367f0 !important;
    background-color: #e9e7fd !important;
}

.dark__theme__controller.theme__active:hover {
    background-color: #e9e7fdbe;
}

.dark__theme__controller.theme__active figure,
.dark__theme__controller.theme__active p {
    color: #7367f0;
}

.dark__paragraph {
    color: #2f3349;
}

.dark__paragraph__2 {
    color: #464252;
}

.dark__icon__secondary {
    color: #706e7a;
}

.text__tertiary {
    color: var(--text-tertiary) !important;
}

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

.dark__btn:hover {
    background-color: #7166eee4 !important;
}

.btn-close {
    filter: invert(19%) sepia(14%) saturate(428%) hue-rotate(204deg);
    background-color: red;
}

.inputbox input {
    color: #4c4c4c;
}

.dark__pagination ul li {
    background-color: #efeef0;
}

.delete__modal__forms p {
    color: #939393;
}

#search {
    outline: none;
    border: 1px solid #dfdee1;
}

.dark__input {
    border: 1px solid #c2c2c2;
}

.dark__border {
    border: 1px solid #e6e6e8;
}

.dark__ref {
    color: #6f6c78;
}

select.dark__select {
    color: #6b729e;
    background-color: transparent;
}

.angle__icon svg path {
    stroke: #2f3349;
}

.report__icon svg path {
    fill: #2f3349;
}

.text__gray {
    color: var(--text-gray);
}

.select__part__active {
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 300;
    background-color: #e0e0e1 !important;
    color: #2f3349;
}

.select__part__inactive {
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 300;
    background-color: #fff !important;
    color: #fff;
}