:root {
    --raw-brown-100: 228, 225, 216;
    --raw-brown-200: 202, 199, 190;
    --raw-brown-300: 180, 177, 169;
    --raw-brown-400: 168, 165, 157;
    --raw-brown-500: 112, 108, 100;
    --raw-brown-600: 96, 93, 86;
    --raw-brown-700: 67, 65, 60;
    --raw-brown-800: 48, 47, 45;
    --raw-brown-900: 33, 32, 30;

    --brown-100: rgb(var(--raw-brown-100));
    --brown-200: rgb(var(--raw-brown-200));
    --brown-300: rgb(var(--raw-brown-300));
    --brown-400: rgb(var(--raw-brown-400));
    --brown-500: rgb(var(--raw-brown-500));
    --brown-600: rgb(var(--raw-brown-600));
    --brown-700: rgb(var(--raw-brown-700));
    --brown-800: rgb(var(--raw-brown-800));
    --brown-900: rgb(var(--raw-brown-900));

    --raw-green-700: 72, 97, 48;

    --green-700: rgb(var(--raw-green-700));
}

html {
    position: relative;
    min-height: 100vh;
    padding-bottom: 2.5rem;
}

body {
    background-color: #e0d9c9;
    margin: 0;
    padding: 0;
    margin-bottom: 2.5rem;
}

footer {
    position: absolute;
    bottom: 0;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 10pt;
}

::-webkit-scrollbar-track {
    background: var(--bs-gray-200) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-gray-800) !important;
    transition: all 2000ms;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-900) !important;
    transition: all 2000ms;
}

ul::-webkit-scrollbar, textarea::-webkit-scrollbar, input::-webkit-scrollbar {
    border-radius: calc(0.375rem - 1px);
}

ul::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, input::-webkit-scrollbar-track {
    border-radius: calc(0.375rem - 1px);
}

ul::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, input::-webkit-scrollbar-thumb {
    border-radius: calc(0.375rem - 1px);
}

/* FORM */

.form-group {
    line-height: 1.0 !important;
}

.form-group label {
    color: var(--bs-gray-600);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.5 !important;
    display: inline-block;
}

.form-check.form-switch {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.form-check.form-switch .form-check-input {
    margin: 0 !important;
}

.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: none !important;
    border: var(--bs-border-width) solid var(--bs-gray-500) !important;
}

.form-check-input:checked {
    background-color: rgb(var(--bs-dark-rgb)) !important;
    border-color: rgb(var(--bs-dark-rgb)) !important;
}

/* ANIMATIONS */

@keyframes slideIn {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }
    0% {
        -webkit-transform: translateY(-1rem);
        -webkit-opacity: 0;
    }
}

/* DROPDOWN */

.dropdown-menu {
    background-color: var(--brown-200);

    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.dropdown-item {
    color: var(--bs-gray-700) !important;
}

.dropdown-item a {
    font-weight: 500;
}

.dropdown-item i {
    width: 1.0rem;
}

.dropdown-item:active,
.dropdown-item:hover {
    background-color: var(--brown-300) !important;
}

.dropdown-item.selected,
.dropdown-item.selected:active {
    background-color: var(--brown-300) !important;
}

/* MENU ITEM */

.mt-74 {
    margin-top: 18.5rem !important;
}

.mt-76 {
    margin-top: 19rem !important;
}

.h-76 {
    height: 19rem !important;
}

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

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

.text-brown-500 {
    color: var(--brown-500) !important;
}

.text-brown-400 {
    color: var(--brown-400) !important;
}

.text-brown-300 {
    color: var(--brown-300) !important;
}

.text-brown-200 {
    color: var(--brown-200) !important;
}

.text-brown-100 {
    color: var(--brown-100) !important;
}

.header {
    background-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(0.1rem);
}

.menu-item {
    user-select: none;
    transition: all 200ms;
    background-color: var(--brown-200);
    border: 1px solid var(--brown-500);
}

.menu-item:hover {
    background-color: var(--brown-300);
    border: 1px solid var(--brown-700);
}

.menu-item.active {
    background-color: var(--brown-300);
    border: 1px solid var(--brown-700);
}

.menu-item.active,
.menu-item.active a,
.menu-item.active i {
    color: var(--brown-800) !important;
}

.menu-item,
.menu-item a,
.menu-item i {
    color: var(--brown-600) !important;
}

.menu-item:hover,
.menu-item:hover a,
.menu-item:hover i {
    color: var(--brown-800) !important;
}

/* FOOTER */

.z-5 {
    z-index: 5;
}

footer {
    z-index: 10;
    background-color: var(--green-700);
}

/* TEXTS */

h1 {
    font-size: 1.25rem;
    font-weight: 500;
}

h2 {
    font-size: 1.125rem;
    font-weight: 500;
}

h3 {
    font-size: 1.0rem;
    font-weight: 500;
}

/* TABLE */


.table-rounded {
    border-collapse: separate;
    border-radius: var(--bs-border-radius) !important;
    border-width: var(--bs-border-width) !important;
    border-spacing: 0;

    > thead:first-of-type {
        border-top-left-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
        border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;

        > tr:first-child {
            border-top-left-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
            border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;

            > th:first-child {
                border-top-left-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
            }

            > th:last-child {
                border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
            }
        }
    }

    > tbody:last-of-type > tr:last-child {
        > td {
            border-bottom: none !important;
        }

        > td:first-child {
            border-bottom-left-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
        }

        > td:last-child {
            border-bottom-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) !important;
        }
    }
}

/* BACKGROUNDS */

.bg-brown-100 {
    background-color: var(--brown-100);
}

.bg-brown-100-hover:hover {
    background-color: var(--brown-100) !important;
}

.bg-brown-200 {
    background-color: var(--brown-200);
}

.bg-brown-200-hover:hover {
    background-color: var(--brown-200) !important;
}

.bg-brown-400 {
    background-color: var(--brown-400);
}

.bg-brown-500 {
    background-color: var(--brown-500);
}

.bg-brown-700 {
    background-color: var(--brown-700);
}

/* LOGO */

.logo {
    background-color: var(--brown-200);
}

.logo:hover {
    background-color: var(--brown-100);
}

/* BORDERS */

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

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

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

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

/* TABLES */

.table-brown-500,
.table-brown-500 > thead,
.table-brown-500 > tbody,
.table-brown-500 > thead > tr,
.table-brown-500 > tbody > tr,
.table-brown-500 > tfoot > tr > td,
.table-brown-500 > thead > tr > th,
.table-brown-500 > tbody > tr > td,
.table-brown-500 > tfoot > tr > td,
.table-brown-500 > tr > th,
.table-brown-500 > tr > td {
    background-color: var(--brown-500) !important;
    color: var(--bs-white) !important;
}

.table-brown-700,
.table-brown-700 > thead,
.table-brown-700 > tbody,
.table-brown-700 > thead > tr,
.table-brown-700 > tbody > tr,
.table-brown-700 > tfoot > tr > td,
.table-brown-700 > thead > tr > th,
.table-brown-700 > tbody > tr > td,
.table-brown-700 > tfoot > tr > td,
.table-brown-700 > tr > th,
.table-brown-700 > tr > td {
    background-color: var(--brown-700) !important;
    color: var(--bs-white) !important;
}

/* BUTTONS */

.btn-brown-700 {
    background-color: var(--brown-700) !important;
    border-color: var(--brown-700) !important;
    color: var(--bs-white) !important;
}

.btn-brown-700:hover {
    background-color: var(--brown-500) !important;
    border-color: var(--brown-500) !important;
    color: var(--bs-white) !important;
}

.btn-outline-secondary {
    background-color: var(--bs-gray-100) !important;
    border-color: var(--bs-gray-300) !important;
    color: var(--bs-gray-500) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--bs-gray-400) !important;
    border-color: var(--bs-gray-500) !important;
    color: var(--bs-gray-700) !important;
}

/* NAV PILLS */

.nav.nav-brown .nav-item .nav-link {
    color: var(--brown-500) !important;
    font-weight: 500;
}

.nav.nav-brown .nav-item .nav-link:hover {
    border-bottom: none !important;
    border-color: var(--brown-300) !important;
}

.nav.nav-brown .nav-item .nav-link.active {
    background-color: var(--brown-700) !important;
    color: var(--bs-white) !important;
    border-color: var(--brown-700) !important;
}

@media only screen and (min-width : 768px) {
    .md-border-top-0 {
        border-top: none !important;
    }
}