:root {
    --dark: #303030;
    --dark_accent: #000000;
    --dark_accent_2: #212529;
    --dark_accent_3: #393939;
    --orange: #fea338;
    --orange_accent: #ff8a00;
    
    --text_primary: #ffffff;
    --text_primary_2: #b4b4b4;
    
    --danger_red: #dc3545;
    --danger_red_accent: #b12533;
    
    --quick_menu_ml: 4rem;
    --transition-speed: 600ms;
    
    --main_navbar_margin: 55.6px;
    
}

/*==============================================================*/
/*================ [START] NAVBAR & MENU [START] ===============*/
nav {
    background-color: var(--dark);
}

.offcanvas-body *:not(:last-child) {
    margin-bottom: 1rem;
}
/*================ [CLOSE] NAVBAR & MENU [CLOSE] ===============*/
/*==============================================================*/


/*==============================================================*/
/*================ [START] QUICK NAVBAR [START] ================*/
#body_content.priv {
    margin-left: var(--quick_menu_ml);
}

.nav_quick {
    padding-top: 55.6px;
    width: var(--quick_menu_ml);
    height: 100%;
    position: fixed;
    background-color: var(--dark_accent_3);
    transition: width 600ms ease;
}

.nav_quick_nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav_quick_item {
  width: 100%;
}

.nav_quick_item:last-child {
  margin-top: auto;
}

.nav_quick_link {
  display: flex;
  align-items: center;
  height: var(--quick_menu_ml);
  color: var(--text_primary_2);
  text-decoration: none;
  filter: grayscale(100%) opacity(0.7);
  transition: var(--transition-speed);
}

.nav_quick_link:hover {
  filter: grayscale(0%) opacity(1);
  background: var(--dark_accent_2);
  color: var(--text_primary);
}

.nav_quick_item.active .nav_quick_link {
    filter: grayscale(0%) opacity(1);
    background: var(--dark_accent_2);
    color: var(--text_primary);
}

.nav_quick_label {
  display: none;
  margin-left: 1rem;
}

.nav_quick_link i {
    font-size: 23px;
    min-width: 23px;
    margin: 1.2rem;
}

.nav_quick:hover {
    width: 16rem;
}

.nav_quick:hover .nav_quick_label {
    display: block;
}

/* Small screens */
@media only screen and (max-width: 600px) {
    #body_content.priv {
        margin-left: unset;
        margin-bottom: var(--quick_menu_ml);
        height: calc(100% - var(--main_navbar_margin) - var(--quick_menu_ml))
    }
    .nav_quick {
        bottom: 0;
        width: 100%;
        padding-top: unset;
        height: var(--quick_menu_ml);
    }
    
    .nav_quick:hover {
        width: 100%;
    }
    
    .nav_quick_label {
        display: block;
        margin-left: unset;
        font-size: 10px;
        position: fixed;
        bottom: 6px;
    }
    
    .nav_quick:hover .nav_quick_label {
        display: block;
    }

    .nav_quick_item:last-child {
        display: none;
    }

    .nav_quick_nav {
        flex-direction: row;
    }

    .nav_quick_link {
        justify-content: center;
    }
    
    .nav_quick_link i {
        margin-top: 0.45rem;
    }
}

/* Large screens */
@media only screen and (min-width: 600px) {
    .nav_quick {
        top: 0;
        padding-top: 55.6px;
        height: 100%;
        width: var(--quick_menu_ml);
    }

    .nav_quick:hover {
        width: 14rem;
    }

    .nav_quick:hover .nav_quick_label {
        display: inline;
    }

    .navbar:hover i {
        margin-left: 11rem;
    }

    .navbar:hover .logo-text {
        left: 0px;
    }
}
/*================ [CLOSE] QUICK NAVBAR [CLOSE] ================*/
/*==============================================================*/



/*==============================================================*/
/*==============================================================*/
/*==================== [START] BODY [START] ====================*/

body {
    background-color: var(--dark_accent);
    color: var(--text_primary);
    font-family: 'Dosis', sans-serif;
}

/*==============================================================*/
/*================= [START] SCROLL BAR [START] =================*/
/*=== Complete Body Scrollbar ===*/
/*
body::-webkit-scrollbar {
    width: 0.3rem;
}

body::-webkit-scrollbar-track {
    background: var(--text_primary_2);
}

body::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 20px;
    
}
*/

/*=== Body Content Scroll ===*/
#body_content {
    margin-top: var(--main_navbar_margin);
    height: calc(100% - var(--main_navbar_margin));
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;

    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

#body_content::-webkit-scrollbar { 
    width: 0.3rem; 
}

#body_content::-webkit-scrollbar-track {
    display: none;
/*    background: var(--text_primary_2);*/
}

#body_content::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 20px;
    
}

/*=== Quick Navbar Content Scroll ===*/
.nav_quick {
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;

    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.nav_quick::-webkit-scrollbar { 
    display: none;
}
/*================= [CLOSE] SCROLL BAR [CLOSE] =================*/
/*==============================================================*/

#content {
    padding: 1rem;
}

#content:not(:last-child) {
    margin-bottom: 1rem;
}

.card {
    background-color: var(--dark);
}

.input-group-text {
    background-color: var(--dark);
    color: var(--text_primary_2);
    border: 1px solid var(--text_primary_2);
}

input.form-control, input.form-control:focus {
    background-color: var(--dark_accent);
    color: var(--text_primary_2);
    border: 1px solid var(--text_primary_2);
}

/*==============================================================*/
/*================ [START] TESS BUTTONS [START] ================*/
/*=== Outline Button ===*/
.btn-outline-tess {
    color: var(--orange);
    border-color: var(--orange);
}

.btn:hover.btn-outline-tess {
    color: var(--orange_accent);
    border-color: var(--orange_accent);
    text-decoration: none;
}

/*=== Solid Button ===*/
.btn-tess {
    color: var(--text_primary);
    background-color: var(--orange);
    border-color: var(--orange);
}

.btn-tess:hover {
    color: var(--text_primary);
    background-color: var(--orange_accent);
    border-color: var(--orange_accent);
}

/*=== Fullwidth Button ===*/
.btn_fullwidth {
    width: 100%;
    max-width: 500px;
}

/*=== Fullwidth Button ===*/
.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.alert-dismissible .btn-close {
    padding: 0 9px 12px 0;
}
.alert-dismissible {
    padding-right: 1rem;
}
/*================ [CLOSE] TESS BUTTONS [CLOSE] ================*/
/*==============================================================*/

/*==============================================================*/
/*=================== [START] A LINK [START] ===================*/
/*=== Simple Link ===*/
a {
    color: var(--orange);
    text-decoration: none;
}

a:hover {
    color: var(--orange_accent);
    text-decoration: none;
}

/*=== Button Link ===*/
a.menuItems.btn {
    color: var(--text_primary);
    background-color: var(--dark_accent_2);
    border-color: var(--dark_accent_2);
}

a.menuItems.btn:hover {
    color: var(--text_primary);
    background-color: var(--orange_accent);
    border-color: var(--orange_accent);
}

/*=== Button Link ===*/
a.danger.menuItems.btn {
    color: var(--text_primary);
    background-color: var(--danger_red);
    border-color: var(--danger_red);
}

a.danger.menuItems.btn:hover {
    color: var(--text_primary);
    background-color: var(--danger_red_accent);
    border-color: var(--danger_red_accent);
}
/*=================== [CLOSE] A LINK [CLOSE] ===================*/
/*==============================================================*/

/*==================== [CLOSE] BODY [CLOSE] ====================*/
/*==============================================================*/
/*==============================================================*/


/*==============================================================*/
/*==================== [START] CUSTOM [START] ==================*/
.clamp_m {
    width: clamp(330px, 50%, 270px);
}

.dhakdhak {
    left: 1.6!important;
    top: -0.75!important;
}

.dhakdhak_2 {
    left: 25.65!important;
    top: 11.75!important;
}
/*==================== [CLOSE] CUSTOM [CLOSE] ==================*/
/*==============================================================*/