:root {
    --nav-bg: #009DDC;
    --nav-color: #fff;
    --btn-bg: #009B72;
    --btn-color: #000;
    --main-tool-bg: #F26430;
    --main-tool-bg-hover: #ff926a;
    --main-tool-color: #FFF;
    --secondary-color: #6761A8;
    --scroll-bar: #666d7f;
    --scroll-bar-hover: #2A2D34;
    --main-font-size: 14px;
}

html {
    font-size: var(--main-font-size);
}

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--nav-bg);
}

@media (min-width: 992px) {
    html {
        font-size: var(--main-font-size);
    }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    font-size: var(--main-font-size);
    color: #212529;
}

main {
    
}

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scroll-bar);
    border-radius: 3px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-bar-hover);
    }

.dropdown-item, .nav-link {
    color: var(--nav-color) !important;
    cursor: pointer;
}

.form-control {
    font-size: var(--main-font-size);
}

.btn-cus {
    background-color: var(--secondary-color);
    color: var(--main-tool-color);
}

    .btn-cus:hover {
        background-color: var(--main-tool-bg-hover);
    }

.modal-header {
    background-color: var(--nav-bg);
    color: var(--nav-color);
}