:root {
    --bs-body-font-family: "Poppins", Verdana, sans-serif;
    
    --first-color-light: #3CB4E5;
    --first-color-dark: #0A2240;

    --first-color-light: #124A8A;
    --first-color-dark: #0A2240;

    --second-color-light: #F1F1F1;
    --second-color-dark: #1F1F1F;

    --third-color-light: #A1A1A1;
    --third-color-dark: #1A1A1A;
    
    --fourth-color-light: #FFFFFF;
    --fourth-color-dark: #000000;

    --align-items-center: center;
    --align-items-end: flex-end;
    --border-radius: 0.3rem;
    --display: flex;
    --flex: 1;
    --flex-direction: column;
    --flex-grow: 1;
    --font-weight-bold: bold;
    --flex-wrap: wrap;
    --font-size: 0.90rem;
    --gap: 10px;
    --height: 100vh;
    --height-width-sidebar-items: 40px;
    --justify-content-center: center;
    --justify-content-space: space-between;
    --list-style: none;
    --outline: none;
    --overflow: hidden;
    --overflow-x: auto;
    --overflow-y: auto;
    --margin: 4px;
    --margin-bottom: 20px;
    --padding-small: 4px;
    --padding-large: 10px;
    --text-align-center: center;
    --text-align-end: end;
    --text-decoration: none;
    --transition: all 0.3s ease;
    --transform: translateY(-2px);
    --vertical-align: middle;
    --width: 100%;
    --width-margin-left-min: 80px;
    --width-margin-left-max: calc(var(--width-margin-left-min) * 3);

    --signin-max-width: 380px;
}

[data-bs-theme="light"] {
    --border: var(--second-color-light);
    --color: var(--fourth-color-dark);
    --box-shadow: 0 2px 4px var(--third-color-light);

    --gradient-color-start: var(--first-color-light);
    --gradient-color-end: var(--first-color-dark);
    --auth-background-color: var(--fourth-color-light);
    --signin-background-color: var(--second-color-light);
    --page-background-color: var(--fourth-color-light);
    --card-background-color: var(--second-color-light);
    --dashboard-card-background-color1: var(--fourth-color-light);
    --dashboard-card-background-color2: var(--second-color-light);
    --header-text-color: var(--fourth-color-light);
    --sidebar-clock-color: var(--fourth-color-light);
    --sidebar-theme-background-color: var(--fourth-color-light);
    --sidebar-avatar-background-color: var(--fourth-color-light);
    --sidebar-logout-background-color: var(--fourth-color-light);
    --sidebar-nav-link-background-color: var(--first-color-light);
    --sidebar-dropdown-border-color: var(--fourth-color-light);
    --sidebar-nav-link-color: var(--fourth-color-light);
    --table-main-background-color: var(--fourth-color-light);
    --table-main-th-background-color: var(--first-color-light);
    --table-main-th-color: var(--fourth-color-light);
    --table-main-tr-background-color: var(--second-color-light);
    --table-emphasis-background-color: var(--third-color-light);
    --pagination-link-background-color: var(--fourth-color-light);
    --pagination-link-active-background-color: var(--first-color-light);
    --pagination-link-active-border-color: var(--first-color-light);
    --pagination-link-active-color: var(--fourth-color-light);
    --form-control-background-color: var(--fourth-color-light);
    --form-header-color: var(--fourth-color-dark);
    --select2-results-background-color: var(--third-color-light);
}

[data-bs-theme="dark"] {
    --border: var(--second-color-dark);
    --color: var(--fourth-color-light);
    --box-shadow: 0 2px 4px var(--third-color-dark);

    --gradient-color-start: var(--first-color-dark);
    --gradient-color-end: var(--first-color-light);
    --auth-background-color: var(--fourth-color-dark);
    --signin-background-color: var(--second-color-dark);
    --page-background-color: var(--fourth-color-dark);
    --card-background-color: var(--second-color-dark);
    --dashboard-card-background-color1: var(--fourth-color-dark);
    --dashboard-card-background-color2: var(--second-color-dark);
    --header-text-color: var(--fourth-color-light);
    --sidebar-clock-color: var(--fourth-color-light);
    --sidebar-theme-background-color: var(--fourth-color-dark);
    --sidebar-avatar-background-color: var(--fourth-color-dark);
    --sidebar-logout-background-color: var(--fourth-color-dark);
    --sidebar-nav-link-background-color: var(--first-color-dark);
    --sidebar-dropdown-border-color: var(--fourth-color-light);
    --sidebar-nav-link-color: var(--fourth-color-light);
    --table-main-background-color: var(--fourth-color-dark);
    --table-main-th-background-color: var(--first-color-dark);
    --table-main-th-color: var(--fourth-color-light);
    --table-main-tr-background-color: var(--second-color-dark);
    --table-emphasis-background-color: var(--third-color-light);
    --pagination-link-background-color: var(--fourth-color-dark);
    --pagination-link-active-background-color: var(--first-color-dark);
    --pagination-link-active-border-color: var(--first-color-dark);
    --pagination-link-active-color: var(--fourth-color-light);
    --form-control-background-color: var(--fourth-color-dark);
    --form-header-color: var(--fourth-color-light);
    --select2-results-background-color: var(--third-color-light);
    --select2-results-color: var(--fourth-color-dark);
}

.layout {
    margin-left: var(--width-margin-left-min);
    transition: var(--transition);
}

body:has(.sidebar-div:hover) .layout {
    margin-left: var(--width-margin-left-max);
}

.page {
    background-color: var(--page-background-color);
    color: var(--color);
    display: var(--display);
    height: var(--height);
    padding: var(--padding-large);
    transition: var(--transition);
}

.card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    flex: var(--flex);
    overflow-x: var(--overflow-x);
    overflow-y: var(--overflow-y);
    padding: var(--padding-large);
    text-align: var(--text-align-center);
    transition: var(--transition);
}

.margin {
    margin-right: var(--margin);
}