/* === Palette de variables (light mode) === */
:root {
  /* Backgrounds */
  --bg-main: #fafafa;
  --bg-secondary: #efefef;
  --bg-tertiary: #e5e7eb;
  --navbar-bg: #dbdbdb9e;
  --navbar-link-hover-bg: #dcddde;

  /* Header */
  --header-border: #dbdbdb;

  /* Dark mode backgrounds for override */
  --bg-main-dark: #262626;
  --bg-secondary-dark: #353535;
  --bg-tertiary-dark: #313131;
  --navbar-bg-dark: #4c4d4d;
  --navbar-link-hover-bg-dark: #616060;

  /* Texts */
  --text-main: #171717;
  --text-light: #fafafa;
  --text-error: #dc2626;
  --navbar-link-active: #0284c7;

  /* Buttons & Colors */
  --btn-blue-bg: #0184c7;
  --special-blue-dark: #082f49;
  --special-blue-light: #0184c7;
  --special-orange-light: #f78055;

  /* Borders, grays */
  --border: #d6d3d1;
  --border-light: #d6d3d180;
  --border-dark: #73737380;

  /* RGB for RGBA usage */
  --text-light-rgb: 250, 250, 250;
  --bg-secondary-rgb: 243, 244, 246;
  --bg-tertiary-rgb: 229, 231, 235;
  --header-border-rgb: 219, 219, 219;
  --text-main-rgb: 23, 23, 23;
  --navbar-link-active-rgb: 2, 132, 199;
  --btn-blue-bg-rgb: 3, 105, 161;
  --special-blue-dark-rgb: 8, 47, 73;
  --special-blue-light-rgb: 1, 132, 199;
  --text-error-rgb: 220, 38, 38;
  --border-rgb: 214, 211, 209;
  --border-light-rgb: 214, 211, 209;
  --bg-secondary-dark-rgb: 57, 58, 58;
  --bg-main-dark-rgb: 38, 38, 38;
  --bg-tertiary-dark-rgb: 49, 49, 49;
  --navbar-link-hover-bg-dark-rgb: 97, 96, 96;
  --border-dark-rgb: 115, 115, 115;
  --navbar-bg-dark-rgb: 76, 77, 77;
  --btn-green-bg: #469d88;
}

/* === Overrides Dark mode === */
.bs-dark {
  --bg-main: #262626;
  /* --bg-secondary: #393a3a; */
  --bg-secondary: #353535;
  --bg-tertiary: #313131;
  --navbar-bg: #4c4d4d;
  --navbar-link-hover-bg: #616060;
  --header-border: #4c4d4d;
  --text-main: #fafafa;
  --text-light: #fafafa;
  --text-error: #dc2626;
  --navbar-link-active: #0284c7;
  --btn-blue-bg: #4f7ba8;
  --special-blue-dark: #082f49;
  --special-blue-light: #4f7ba8;
  --special-orange-light: #f78055;
  --border: #73737380;
  --border-light: #73737380;
  --border-dark: #73737380;
  --text-light-rgb: 250, 250, 250;
  --bg-secondary-rgb: 243, 244, 246;
  --bg-tertiary-rgb: 229, 231, 235;
  --header-border-rgb: 219, 219, 219;
  --text-main-rgb: 23, 23, 23;
  --navbar-link-active-rgb: 2, 132, 199;
  --btn-blue-bg-rgb: 3, 105, 161;
  --special-blue-dark-rgb: 8, 47, 73;
  --special-blue-light-rgb: 1, 132, 199;
  --text-error-rgb: 220, 38, 38;
  --border-rgb: 214, 211, 209;
  --border-light-rgb: 214, 211, 209;
  --bg-secondary-dark-rgb: 57, 58, 58;
  --bg-main-dark-rgb: 38, 38, 38;
  --bg-tertiary-dark-rgb: 49, 49, 49;
  --navbar-link-hover-bg-dark-rgb: 97, 96, 96;
  --border-dark-rgb: 115, 115, 115;
  --navbar-bg-dark-rgb: 76, 77, 77;
  --btn-green-bg: #469d88;
}


/* === Global / Layout === */

/* ----- Début du code refactorisé ----- */
:root {
  /* Backgrounds */
  --color-bg-main: var(--text-light);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-tertiary);
  --color-bg-nav-hover: var(--navbar-link-hover-bg);
  --color-bg-btn: var(--text-light);
  --color-bg-btn-blue: var(--btn-blue-bg);
  --color-bg-btn-danger: var(--text-error);
  --color-bg-header: var(--text-light);
  --color-bg-header-navbar: var(--navbar-bg);
  --color-bg-subnavbar: var(--navbar-link-hover-bg);
  --color-bg-tooltip: var(--text-light);

  /* Texts */
  --color-text-main: var(--text-main);
  --color-text-invert: var(--text-light);
  --color-text-link: var(--text-main);
  --color-text-link-hover: var(--special-blue-light);
  --color-text-error: var(--text-error);
  --color-text-nav-active: var(--navbar-link-active);

  /* Borders */
  --color-border: var(--border);
  --color-border-light: var(--border-light);
  --color-border-tooltip: var(--bg-tertiary);
  --color-border-active: var(--navbar-link-active);

  /* Icons */
  --color-icon-main: var(--text-main);
  --color-icon-invert: var(--text-light);

  /* Specials */
  --color-blue-dark: var(--special-blue-dark);
  --color-blue-light: var(--special-blue-light);
  --color-border-rgb: 214, 211, 209;
  --color-bg-main-rgb: 250, 250, 250;
  --color-bg-secondary-rgb: 243, 244, 246;
  --color-bg-nav-dark-rgb: 57, 58, 58;
  --color-grey-hover-rgb: 220, 221, 222;
  --color-grey-bg-rgb: 229, 231, 235;
  --color-grey-outline-rgb: 115, 115, 115;
  --color-grey-nav-rgb: 76, 77, 77;
  --color-grey-active-rgb: 97, 96, 96;
  --color-blue-rgb: 3, 105, 161;
  --color-blue-dark-rgb: 8, 47, 73;
  --color-blue-light-rgb: 1, 132, 199;
  --color-red-rgb: 220, 38, 38;
  --color-text-main-rgb: 23, 23, 23;
  --color-text-nav-active-rgb: 2, 132, 199;
  --color-bg-tertiary-rgb: 49, 49, 49;
  --color-bg-main-dark-rgb: 38, 38, 38;

  --modal-bg-gradient-start: #fafafa;
  --modal-bg-gradient-end: rgba(250, 250, 250, 0.89);
  --btn-green-bg: #469d88;
}

.bs-dark {
  --color-bg-main: var(--bg-main-dark);
  --color-bg-secondary: var(--bg-secondary-dark);
  --color-bg-tertiary: var(--bg-tertiary-dark);
  --color-bg-nav-hover: var(--navbar-link-hover-bg-dark);
  --color-bg-btn: var(--bg-secondary-dark);
  --color-bg-btn-blue: var(--btn-blue-bg);
  --color-bg-btn-danger: var(--text-error);
  --color-bg-header: var(--bg-main-dark);
  --color-bg-header-navbar: var(--navbar-bg-dark);
  --color-bg-subnavbar: var(--navbar-link-hover-bg-dark);
  --color-bg-tooltip: var(--text-main);

  --color-text-main: var(--text-light);
  --color-text-invert: var(--text-main);
  --color-text-link: var(--text-light);
  --color-text-link-hover: var(--special-blue-light);
  --color-text-error: var(--text-error);
  --color-text-nav-active: var(--navbar-link-active);

  --color-border: var(--border-dark);
  --color-border-light: var(--border-dark);
  --color-border-tooltip: var(--text-main);
  --color-border-active: var(--navbar-link-active);

  --color-icon-main: var(--text-light);
  --color-icon-invert: var(--text-main);

  --color-blue-dark: var(--special-blue-dark);
  --color-blue-light: var(--special-blue-light);
  --color-border-rgb: 214, 211, 209;
  --color-bg-main-rgb: 250, 250, 250;
  --color-bg-secondary-rgb: 243, 244, 246;
  --color-bg-nav-dark-rgb: 57, 58, 58;
  --color-grey-hover-rgb: 220, 221, 222;
  --color-grey-bg-rgb: 229, 231, 235;
  --color-grey-outline-rgb: 115, 115, 115;
  --color-grey-nav-rgb: 76, 77, 77;
  --color-grey-active-rgb: 97, 96, 96;
  --color-blue-rgb: 3, 105, 161;
  --color-blue-dark-rgb: 8, 47, 73;
  --color-blue-light-rgb: 1, 132, 199;
  --color-red-rgb: 220, 38, 38;
  --color-text-main-rgb: 23, 23, 23;
  --color-text-nav-active-rgb: 2, 132, 199;
  --color-bg-tertiary-rgb: 49, 49, 49;
  --color-bg-main-dark-rgb: 38, 38, 38;

  --modal-bg-gradient-start: #171717;
  --modal-bg-gradient-end: rgba(23, 23, 23, 0.81);   /* #171717cf */
  --btn-green-bg: #469d88;
}

/* ----- Début du code refactorisé ----- */

.bs-content-component {
    /* padding-bottom: 40vh; */
    background-color: var(--bg-secondary);
}

.bs-dark .bs-content-component {
    background-color: var(--bg-secondary-dark);
}

#view-404, #view-419, #view-500, #view-503 {
    font-family: 'Inter', sans-serif;
    color: var(--text-light);
    position: relative;
}

#view-404-header, #view-419-header, #view-500-header, #view-503-header {
    justify-content: center;
}

.bs-txt-fondu{
    font-size: 10rem;
    opacity: 0.08;
    color: var(--text-light);
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    font-weight: 700;
}

.bs-icon-fondu {
    width: 800px;
    height: 800px;
    padding: 30px;
    opacity: 0.08;
    fill: var(--text-light);
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}

.basique_logo_svg {
    width: 120px;
    padding-top: 40px;
}

.bs-title-h1{
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 5px;
}

@media screen and (min-width: 1200px){
    #view-404-header, #view-419-header, #view-500-header, #view-503-header {
        justify-content: unset;
    }
    .basique_logo_svg {
        width: 200px;
        padding-left: 60px;
    }
    .bs-title-h1{
        font-size: 3rem;
    }
    .bs-txt-fondu{
        font-size: 30rem;
    }
}

.layout-auth {
    font-family: 'Inter', sans-serif;
}

.basique_logo_fondu_svg {
    width: 550px;
    padding: 30px;
    opacity: 0.08;
}

.basique_logo_svg {
    width: 120px;
    padding-top: 40px;
}

#sectionLeft{
    justify-content: center;
}

#sectionRight{
    position: relative;
    z-index: 1;
}

#sectionRight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.01) 2px, rgba(255,255,255,.01) 4px);
    z-index: -20;
}

#sectionRight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 10%, rgba(255,255,255,0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 90%, rgba(0,0,0,0.1) 0%, transparent 20%);
    opacity: 0.5;
    z-index: -19;
}

.bs-primary-radial-bg{
    /* background: radial-gradient(circle, var(--btn-blue-bg) -50%, var(--special-blue-dark) 200%);
    background: radial-gradient(circle, var(--btn-blue-bg) -50%, var(--special-blue-dark) 200%); */
    background: linear-gradient(135deg, #4f7ba8 0%, #3f6ba4 100%);
}

@media screen and (min-width: 1200px){
    #sectionLeft{
        justify-content: unset;
    }
    .basique_logo_svg {
        width: 200px;
        padding-left: 60px;
    }
}

.bs-icon {
    width: 40px;
    height: 40px;
    fill: var(--text-main);
}

.bs-icon.green {
    fill: #4a9b92;
}
.bs-icon.red {
    fill: #dc2626;
}

#btnNewCode{
    display: block;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}


/* === Header === */

.bs-main-header{
    background-color: var(--text-light);
    font-family: 'Inter', sans-serif;
    min-height: 50px;
    color: var(--text-main);
    position: relative;
    z-index: 1000;
}

.bs-main-header .bs-header-link:hover,
.bs-main-header a:hover{
    text-decoration: none;
    color: var(--special-blue-light);
}

.bs-main-header .bs-header-nav{
    justify-content: center;
    font-weight: 500; 
    font-size: 1.3rem;
    min-height: 50px;
}

.bs-main-header .bs-tooltip-header{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    height: auto;
    padding-bottom: 10px;
    align-content: start;
    position: absolute;
    top: 100%;
    opacity: 0.97;
    justify-content: center;
    width: 100%;
    margin-top: 1px;
    border-bottom: 1px solid var(--bg-tertiary);
    color: var(--text-main);
    box-shadow: 2px 1px 4px var(--header-border);
}

.bs-main-header .bs-tooltip-header .bs-group-nav{
    align-content: baseline;
    margin: 0px 0.5em;
}

.bs-main-header .bs-tooltip-header .bs-group-nav-name {
    padding: 10px;
    font-weight: bold;
}

.bs-main-header .bs-tooltip-header .bs-group-nav-items {
    padding: 10px;
    border: 1px solid #dddddf;
    margin-top: 1em;
    border-radius: 6px;
}

.bs-main-header .bs-tooltip-header .bs-group-nav-items:hover {
    background:  #dddddf;
}

.bs-main-header .bs-tooltip-header .bs-group-nav-items:hover a {
    text-decoration: none;
    color: var(--text-main);
}

.bs-main-header .bs-tooltip-header .bs-group-nav-items:hover a .bs-icon {
    fill: var(--text-main);
}

.bs-main-header .bs-tooltip-header .bs-group-nav-item {
    display: flex;
    align-items: center;
}

.bs-main-header .bs-tooltip-header .bs-icon {
    margin: 0px 10px 0px 0px;
}

.bs-main-header .bs-profile-img,
.bs-mobile-navigation  .bs-profile-img{
    width: 20px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 50px;
}

.bs-main-header .bs-icon{
    width: 20px;
    height: 20px;
    fill: var(--text-main);
    margin: 0px 10px;
    cursor: pointer;
}

.bs-main-header .logo-header{
    margin-left: 20px;
}

.bs-main-header .bs-user-div{
    align-items: center;
    border-left: 1px solid var(--border-light);
}

.bs-header-view {
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
    min-height: 70px;
    position: relative;
    z-index: 500;
    border-bottom: 1px solid #6b7a8a;
    background: linear-gradient(135deg, #6b7a8a 0%, #5a6875 100%);
}

/* .bs-header-view::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 200'%3E%3Cdefs%3E%3CradialGradient id='organicGrad1' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(255,255,255,0.22);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(255,255,255,0.06);stop-opacity:1' /%3E%3C/radialGradient%3E%3CradialGradient id='organicGrad2' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(255,255,255,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(255,255,255,0.04);stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23organicGrad1)'%3E%3Cellipse cx='150' cy='60' rx='8' ry='5' transform='rotate(20 150 60)'/%3E%3Ccircle cx='320' cy='100' r='6'/%3E%3Cellipse cx='580' cy='70' rx='5' ry='8' transform='rotate(-30 580 70)'/%3E%3Ccircle cx='800' cy='130' r='4'/%3E%3Cellipse cx='1050' cy='50' rx='7' ry='4' transform='rotate(45 1050 50)'/%3E%3Ccircle cx='1250' cy='110' r='5.5'/%3E%3C/g%3E%3Cg fill='url(%23organicGrad2)'%3E%3Cellipse cx='240' cy='140' rx='4' ry='6' transform='rotate(60 240 140)'/%3E%3Ccircle cx='450' cy='45' r='3.5'/%3E%3Cellipse cx='680' cy='155' rx='6' ry='3' transform='rotate(-15 680 155)'/%3E%3Ccircle cx='920' cy='75' r='4.5'/%3E%3Cellipse cx='1150' cy='140' rx='5' ry='7' transform='rotate(75 1150 140)'/%3E%3Ccircle cx='1350' cy='85' r='3'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.12)' stroke-width='1' fill='none' opacity='0.7'%3E%3Cpath d='M150,60 C235,80 280,90 320,100 C450,115 515,85 580,70 C690,50 750,110 800,130'/%3E%3Cpath d='M800,130 C925,145 990,75 1050,50 C1150,25 1200,85 1250,110'/%3E%3Cpath d='M240,140 C345,90 400,67 450,45 C550,20 615,110 680,155'/%3E%3Cpath d='M680,155 C800,135 860,100 920,75 C1035,40 1100,115 1150,140 C1250,165 1300,125 1350,85'/%3E%3Cpath d='M320,100 C500,125 650,130 680,155' stroke-dasharray='2,5' opacity='0.4'/%3E%3Cpath d='M580,70 C750,90 850,82 920,75' stroke-dasharray='3,7' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 1400px 200px;
    background-repeat: repeat-x;
    background-position: 0 0;
    opacity: 0.7;
} */

.bs-header-view .bs-header-title{
    display: flex;
    align-items: center;
    color: var(--text-main);
}

.bs-header-view .bs-header-icon{
    width: 60px;
    height: 50px;
    fill: #FAFAFA;
    align-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    padding: 5px;
}

#burger-header-view .bs-header-icon{
    width: 40px;
    height: 40px;
    fill: #FAFAFA;
    opacity: 1;
    align-content: center;
    background: #353535;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-right: 5px;
    padding: 5px;
    margin-top: 20px;
}

.bs-header-view .bs-header-title .bs-icon{
    width: 25px;
    height: 25px;
    fill: #FAFAFA;
    margin-right: 10px;
}

.bs-header-view .bs-header-title h1{
    margin-top: unset;
    font-size: 2.5rem;
    color: #FAFAFA;
    font-weight: bolder;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 1200px){
    .bs-header-view .bs-header-title h1 {
        font-size: 1.5rem;
    }
}

.bs-main-content-view{
    padding: 0px 7.5px !important;
}

.bs-header-navbar .bs-navbar{
    justify-content: center;
    background: linear-gradient(to right, var(--navbar-bg), #cececea8 50%, #cececea8 50%, var(--navbar-bg));
    color: var(--text-main);
    font-size: 1.25rem;
    height: 40px;
    align-content: center;
}

.bs-header-navbar .bs-navbar .bs-navbar-item{
    padding: 5px 10px;
}

.bs-header-navbar .bs-navbar .bs-navbar-item .bs-link{
    border-radius: 6px;
    padding: 5px 10px;
    text-decoration: none;
}

.bs-header-navbar .bs-navbar .bs-navbar-item .bs-link.bs-active{
    background: var(--bg-secondary);
    color: var(--text-main);
}

.bs-header-navbar .bs-navbar .bs-navbar-item:hover a{
    text-decoration: none;
    background: var(--text-light);
    color: var(--text-main);
}

.bs-dark .bs-header-navbar .bs-navbar .bs-navbar-item:hover a{
    text-decoration: none;
    background: var(--bg-secondary-dark);
    color: var(--text-light);
}

.bs-header-subnavbar{
    background: var(--navbar-link-hover-bg);
    border-radius: 6px;
    padding: 0.5em;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bs-header-subnavbar .bs-navbar .bs-navbar-item{
    padding: 5px 15px 5px 15px;
    margin-right: 0.5em;
    border-radius: 6px;
    /* border: 1px solid #F5F5F5; */
}

/* .bs-header-subnavbar .bs-navbar .bs-navbar-item:first-child{
    padding: 5px 15px 5px 0px;
} */

/* .bs-header-subnavbar .bs-navbar .bs-navbar-item:first-child:hover,
.bs-header-subnavbar .bs-navbar .bs-navbar-item:first-child.active{
    padding: 5px 15px 5px 15px;
} */

.bs-header-subnavbar .bs-navbar .bs-navbar-item a{
    text-decoration: none;
    color: var(--text-light);
}

.bs-header-subnavbar .bs-navbar .bs-navbar-item:hover{
    border-radius: 6px;
    background-color: var(--text-light) !important;
}

.bs-header-subnavbar .bs-navbar .bs-navbar-item:hover a{
    color: var(--text-main);
}

.bs-header-navbar .bs-navbar .bs-navbar-item.active,
.bs-header-subnavbar .bs-navbar .bs-navbar-item.active{
    box-shadow: unset !important;
    background-color: var(--text-light) !important;
    border-radius: 6px;
}

/* .bs-header-subnavbar .bs-navbar .bs-navbar-item.active{
    border-radius: 6px;
    border: 1px solid var(--text-main);
} */

.bs-header-subnavbar .bs-navbar .bs-navbar-item.active a{
    color: var(--text-main);
}

.bs-header-subnavbar .bs-select-input{
    background-color: var(--text-light);
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 1.25rem;
    color: #333;
    background-image: url("/webfonts/google-fonts-icons/material-icons.svg#arrow-down-icon");
    background-size: 1rem, 100%;
    cursor: pointer;
    width: 100%;
}

.bs-main-header .bs-user-div{
    position: relative;
}

.bs-main-header .bs-user-div .bs-profil-dropdown{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    color: var(--text-main);
    position: absolute;
    top: 30px;
    left: -100%;
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 2px 1px 4px var(--header-border);
}

.bs-mobile-navigation  .bs-user-div .bs-profil-dropdown{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    color: var(--text-main);
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 2px 1px 4px var(--header-border);
}

.bs-main-header .bs-profil-dropdown .bs-profile-img,
.bs-mobile-navigation .bs-profil-dropdown .bs-profile-img{
    width: 30px;
}

.bs-main-header .bs-user-div .bs-profile-username,
.bs-mobile-navigation .bs-user-div .bs-profile-username{
    font-weight: bold;
    text-align: center;
    color: var(--text-main);
    padding: 10px;
    font-size: 1.3rem;
}

.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-header,
.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-body,
.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-footer,
.bs-mobile-navigation .bs-profil-dropdown .bs-profil-dropdown-header,
.bs-mobile-navigation .bs-profil-dropdown .bs-profil-dropdown-body,
.bs-mobile-navigation .bs-profil-dropdown .bs-profil-dropdown-footer{
    margin: 0px 20px 10px 20px;
    padding-bottom: 10px;
}

.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-header,
.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-body,
.bs-mobile-navigation .bs-profil-dropdown .bs-profil-dropdown-header,
.bs-mobile-navigation .bs-profil-dropdown .bs-profil-dropdown-body{
    border-bottom: 1px solid var(--border-dark);
}



.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-header p,
.bs-main-header .bs-profil-dropdown .bs-profil-dropdown-body p,
.bs-mobile-navigation  .bs-profil-dropdown .bs-profil-dropdown-header p,
.bs-mobile-navigation  .bs-profil-dropdown .bs-profil-dropdown-body p{
    font-weight: bold;
    padding-bottom: 5px;
}

.bs-mobile-navigation .bs-profil-dropdown .bs-link,
.bs-main-header .bs-profil-dropdown .bs-link{
    margin-bottom: 5px;
}

.bs-mobile-navigation .bs-profil-dropdown .bs-link{
    justify-content: center;
    align-items: center;
    border: 1px solid var(--header-border);
    margin: 0.5em 20px;
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
}

.bs-profil-dropdown-header{
    justify-content: center;
}


/* === Navigation === */

.bs-main-vertical-nav{
    font-family: 'Inter', sans-serif;
    background-color: var(--text-light);
    height: 100%;
    /* border-bottom: 1px solid var(--border-light); */
    color: var(--text-main);
    position: sticky;
    top: 0;
    height: 100vh;
    flex-flow: column;
    font-size: 1.2rem;
    border-right: 1px solid var(--border-light);
    z-index: 2000;
}

.bs-main-vertical-nav .bs-section-header-nav{
    /* border-bottom: 1px solid var(--border-light); */
    padding: 5px 0px 5px;
    height: 50px;
    justify-content: center;
    max-height: 50px;
}

.bs-main-vertical-nav .bs-section-body-nav{
    flex-grow: 1;
    min-height: 0;
    position: relative;
}


.bs-main-vertical-nav .bs-section-body-nav {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-secondary) var(--text-light);
}

.bs-main-vertical-nav .bs-section-footer-nav{
    border-top: 1px solid var(--border-light);
    max-height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.bs-main-vertical-nav .basique_log_svg {
    justify-self: center;
    display: flex;
    width: 100%;
    max-width: 110px;
    height: auto;
}

.bs-main-vertical-nav .bs-group-nav {
    padding: 20px 0px 0px 0px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-name{
    margin-bottom: 10px;
    font-weight: bold;
    margin-left: 40px;
}

.bs-main-vertical-nav .bs-group-nav-item{
    font-weight: 500;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items{
    margin-left: 20px;
    /* border-left: 1px solid #f5f5f5; */
    justify-content: space-between;
    margin-right: 20px;
    margin-bottom: 5px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items.bs-active{
    border-radius: 6px;
    background: var(--navbar-link-hover-bg);
    color: var(--text-main);
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items.bs-active .bs-icon{
    fill: var(--text-main);
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-name,
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items, 
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-group-nav-item,
.bs-main-vertical-nav .bs-nav-item{
    display: flex;
    align-items: center;
    text-decoration: none;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items, 
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-group-nav-item,
.bs-main-vertical-nav .bs-nav-item{
    cursor: pointer;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-name .bs-icon,
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-icon, 
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-group-nav-item .bs-icon,
.bs-main-vertical-nav .bs-nav-item .bs-icon{
    width: 50px;
    height: 18px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links .bs-nav-link .bs-link .bs-icon{
    width: 35px;
    height: 18px;
    /* display: none; */
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-name span,
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items span, 
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-group-nav-item span,
.bs-main-vertical-nav .bs-nav-item span{
    margin-left: -10px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items .bs-group-nav-item{
    padding: 5px 10px 5px 0px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links{
    border-left: 1px solid var(--text-main);
    margin-left: 40px;
    margin-bottom: 15px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links.bs-active{
    background: var(--bg-secondary);
    margin-left: 0px;
    border: none;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links.bs-active .bs-nav-link{
    margin-left: 3em;
    /* padding: 0.5em 0; */
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links .bs-nav-link .bs-link{
    display: flex;
    align-items: center;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25em 0;
    margin-top: 0.25em;
}

/* .bs-main-vertical-nav .bs-group-nav .bs-group-nav-links .bs-nav-link .bs-link:hover{
    font-weight: bold;
} */

/* .bs-main-vertical-nav .bs-group-nav .bs-group-nav-links .bs-nav-link .bs-link.bs-active{
    font-weight: bold;
} */

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-links .bs-nav-link{
    padding-bottom: 5px;
}


.bs-main-vertical-nav .bs-nav-item{
    padding: 0px 0px 20px 0px;
    margin-left: 20px;
}

.bs-main-vertical-nav .bs-section-footer-nav .bs-nav-item{
    padding: 0px 0px 10px 0px;
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items:hover,
.bs-main-vertical-nav .bs-group-nav .bs-nav-link:hover{
    border-radius: 6px;
    background: var(--navbar-link-hover-bg);
}

.bs-main-vertical-nav .bs-group-nav .bs-group-nav-items:hover a,
.bs-main-vertical-nav .bs-group-nav .bs-nav-link:hover  a,
.bs-main-vertical-nav .bs-group-nav .bs-group-nav-item:hover a{
    text-decoration: none;
    color: var(--text-main);
}

/**
    Navigation close
*/

.bs-main-vertical-nav.bs-close .bs-section-header-nav{
    margin: 0px;
}

.bs-main-vertical-nav.bs-close .bs-group-nav {
    padding: 20px 0px 0px 0px;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items .bs-tooltip,
.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items span,
.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items .bs-group-nav-item span,
.bs-main-vertical-nav.bs-close .bs-nav-item span{
    display: none;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-name a,
.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items a, 
.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items .bs-group-nav-item a,
.bs-main-vertical-nav.bs-close .bs-nav-item a{
    justify-content: center;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items .bs-group-nav-item{
    padding: 5px 0px 5px 0px;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items{
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items > a{
    flex-basis: 30%;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-items > svg{
    flex-basis: 40%;
}

.bs-main-vertical-nav.bs-close .bs-nav-item{
    padding: 20px 0px 0px 0px;
    justify-content: center;
}

.bs-main-vertical-nav.bs-close .bs-group-nav{
    border-bottom: 1px solid var(--border-light);
    padding: 5px 0px 5px 0px;
}

.bs-main-vertical-nav.bs-close .bs-nav-item{
    margin-left: 0px;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-nav-link .bs-link span{
    display: none;
}

.bs-main-vertical-nav.bs-close  .bs-group-nav .bs-group-nav-links{
    padding-left: 20px;
    padding-bottom: 10px;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-links .bs-nav-link .bs-link .bs-icon{
    display: block;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-links.bs-active .bs-nav-link{
    margin-left: 0px;
}

.bs-main-vertical-nav.bs-close .bs-tooltip,
.bs-main-vertical-nav.bs-close .bs-tooltip-action{
    height: auto;
    max-width: 300px;
    justify-items: center;
    border-radius: 6px;
    margin-left: 10px;
    padding: 10px;
    position: absolute;
    left: 100%;
    z-index: 10;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action,
.bs-main-vertical-nav.bs-close .bs-tooltip{
    background: #353535;
    /* background: linear-gradient(to bottom, var(--text-main), #171717cf);
    background: linear-gradient(to bottom, var(--text-light), #fafafae3); */
    color: #fafafa;
}

.bs-main-vertical-nav.bs-close .bs-tooltip{
    min-width: 100px;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action{
    width: 200px;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action .bs-tooltip-title{
    margin-bottom: 10px !important;
    font-weight: bold;
    font-size: 1.3rem;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action .bs-tooltip-links{
    /* padding-left: 10px; */
    padding-bottom: 10px;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action .bs-tooltip-links a{
    font-weight:400;
    text-decoration: none;
    color: #fafafa;
}

.bs-main-vertical-nav.bs-close .bs-tooltip-action .bs-tooltip-links a:hover{
    font-weight: bold;
}

.bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-name{
    margin-left: 0px;
    margin-right: 0px;
    max-width: 50px;
    overflow: hidden;
    padding-left: 20px;
    margin-top: 15px;
}

@media screen and (min-width: 1920px){
    .bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-name{
        max-width: 70px;
    }
}

@media screen and (min-width: 2560px){
    .bs-main-vertical-nav.bs-close .bs-group-nav .bs-group-nav-name{
        max-width: 100px;
    }
}

.bs-mobile-navigation{
    font-family: 'Inter', sans-serif;
    /* background: #4d4c4c80; */
    align-items: center;
    text-align: center;
    min-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 502;
    width: 100%;
    align-content: end;
}

.bs-mobile-navigation .bs-mobile-navigation-buttons {
    background: linear-gradient(to top, #fafafaf7 33%, #fafafad9 50%, #fafafac9);
    /* background: var(--navbar-bg-dark); */
    /* background: var(--text-light); */
    /* border-top: 3px solid; */
    color: var(--text-main);
    /* border-image: linear-gradient(90deg, var(--btn-blue-bg), var(--special-blue-light)) 1; */
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.bs-mobile-navigation .bs-mobile-navigation-modal {
    margin: 40px 20px;
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    border-radius: 6px;
    height: 80%;
    color: var(--navbar-bg-dark);
    align-content: flex-start;
    /* overflow-y: scroll; */
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-profil-dropdown {
    overflow-y: scroll;
    max-height: 99%;
    height: 100%;
    scrollbar-width: thin;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-mobile-navigation-modal-header {
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #4f7ba8 0%, #3f6ba4 100%) 1;
    padding: 10px 20px;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-mobile-navigation-modal-body {
    overflow-y: scroll;
    max-height: 90%;
    height: 100%;
    scrollbar-width: thin;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-mobile-navigation-modal-header .bs-icon {
    width: 30px;
    height: 25px;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-name {
    text-align: start;
    padding: 10px 20px;
    font-weight: bold;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--header-border);
    margin: 0.5em 20px;
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-item .bs-icon {
    width: 30px;
    height: 25px;
    fill: var(--navbar-bg-dark);
    margin-right: 10px;
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-items.bs-active .bs-group-nav-item {
    border: 1px solid var(--navbar-link-active);
    color: var(--navbar-link-active);
}

.bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-items.bs-active .bs-icon{
    fill: var(--navbar-link-active);
}

.bs-mobile-navigation .bs-mobile-navigation-item {
    justify-items: center;
    flex-grow: 1;
    cursor: pointer;
    text-decoration: none;
}

.bs-mobile-navigation .bs-mobile-navigation-item a .bs-icon {
    width: 30px;
    height: 25px;
    fill: var(--text-main);
}

.bs-mobile-navigation .bs-mobile-navigation-item .bs-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-main);
}

.bs-mobile-navigation .bs-mobile-navigation-item .bs-profile-img {
    width: 20px;
    height: 20px;
    border-radius: 50px;
}


/* === Forms / Inputs === */

.bs-btn-form-default-type-1{
    width: 100%;
    background-color: var(--text-light);
    color: var(--btn-blue-bg);
    border-radius: 6px;
    height: 2.5rem;
    border: none;
    font-weight: 600;
}

.bs-dark .bs-btn-form-default-type-1{
    width: 100%;
    background-color: var(--text-light);
    color: var(--btn-blue-bg);
    border-radius: 6px;
    height: 2.5rem;
    border: none;
    font-weight: 600;
}

.bs-btn-form{
    cursor: pointer;
    position: relative;
    align-content: center;
    z-index: 1;
}

#viewLoginForm{
    background-color: var(--text-light);
    color: var(--text-main);
}

.bs-input-error-message {
    color: var(--text-error);
}

.bs-field-form-type-1 .bs-label-form-type-1{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.bs-field-form-type-1 .bs-input-form-type-1 input{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 0px 10px 16px;
    background-color: var(--text-light);
    font-weight: 400;
}

.bs-field-form-type-1 .bs-input-form-type-1 input:focus{
    border-color: var(--navbar-link-active);
    outline: none;
}

.bs-field-form-type-1.bs-value-is-not-invalid{
    color: var(--text-error);
}

.bs-field-form-type-1.bs-value-is-not-invalid .bs-input-form-type-1 input{
    border-color: var(--text-error);
}

.bs-field-form-type-1 .bs-input-error-message{
    color: var(--text-error);
    font-weight: 200;
}

.bs-btn-form{
    cursor: pointer;
}

.bs-btn-form-blue-type-1{
    width: 100%;
    background-color: var(--btn-blue-bg);
    background: linear-gradient(135deg, #4f7ba8 0%, #3f6ba4 100%);
    color: var(--text-light);
    border-radius: 6px;
    height: 2.5rem;
    border: none;
    font-weight: 600;
}

.bs-btn-form-green-type-1{
    width: 100%;
    background-color: var(--btn-green-bg);
    background: linear-gradient(135deg, #4a9b92 0%, #3a857c 100%);
    color: var(--text-light);
    border-radius: 6px;
    height: 2.5rem;
    border: none;
    font-weight: 600;
}

.bs-btn-form-red-type-1{
    width: 100%;
    background-color: var(--text-error);
    color: var(--text-light);
    border-radius: 6px;
    height: 2.5rem;
    border: none;
    font-weight: 600;
}

.bs-link-form-default-type-1{
    color: var(--text-main);
}


/* === Modaux / Menus === */

.bs-burger-menu {
    background: #4d4c4c80;
    height: 1000px;
    align-content: start;
    position: fixed;
    top: 0%;
    width: 100%;
}

.bs-burger-menu .bs-burger-header-title{
    text-align: center;
}
.bs-burger-menu .bs-burger-header-title h1{
    font-size: 2rem;
}

.bs-burger-menu .bs-burger-icon{
    opacity: 1;
    width: 40px;
    height: 50px;
    padding-right: 10px;
    fill: var(--text-main);
}

.bs-burger-content {
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    padding-bottom: 40px;
    justify-content: center;
    box-shadow: 2px 1px 4px var(--header-border);
}

.bs-burger-content .bs-burger-item{
    padding: 10px;
    border: 1px solid #dddddf;
    margin: 10px 25px;
    border-radius: 6px;
    color:var(--color-text-main);
}

.bs-burger-content .bs-burger-item.bs-active{
    border: 1px solid var(--navbar-link-active);
    color: var(--navbar-link-active);
}

/* === Container === */

.bs-container-box {
    align-items: flex-start;
    background-color: var(--bg-main);
    border-radius: 6px;
    padding: 1rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.bs-container-box.bs-stretch {
    align-items: stretch !important;
}

.bs-dark .bs-container-box, .bs-container-box.dark {
    /* background: linear-gradient(270deg, #4c4d4d 0%, #333434 100%); */
    background: linear-gradient(270deg, #4c4d4d 0%, #4c4d4d 100%);
}

/**
    Dark mode
*/

.bs-dark .bs-main-header .bs-header-link:hover,
.bs-dark .bs-main-header a:hover{
    text-decoration: none;
    color: #e96149;
}

.bs-dark .bs-main-vertical-nav{
    background-color: var(--navbar-bg-dark);
    /* border-bottom: 1px solid var(--border-dark); */
    color: var(--text-light);
    border-right: 1px solid #5f6161;
}

/* .bs-dark .bs-main-vertical-nav .bs-section-header-nav{
    border-bottom: 1px solid var(--border-dark);
} */

.bs-dark .bs-main-vertical-nav .bs-section-footer-nav{
    border-top: 1px solid var(--border-dark);
}

.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-group-nav-items.bs-active{
    background: var(--navbar-link-hover-bg-dark);
    color: var(--text-light);
}

.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-group-nav-links{
    border-left: 1px solid var(--text-light);
}

.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-group-nav-items:hover,
.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-nav-link:hover{
    background: var(--navbar-link-hover-bg-dark);
}

.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-group-nav-items:hover a,
.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-nav-link:hover  a{
    text-decoration: none;
    color: var(--text-light);
}

.bs-dark .bs-main-vertical-nav .bs-section-body-nav {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333333 var(--navbar-bg-dark);
}

.bs-dark .bs-main-header{
    background-color: var(--navbar-bg-dark);
    color: var(--text-light);
    /* border-image: linear-gradient(90deg, var(--btn-blue-bg), var(--special-blue-light)) 1; */
    /* border-bottom: 1px solid #5f6161; */
}

.bs-dark .bs-header-navbar .bs-navbar{
    justify-content: center;
    /* background: linear-gradient(to right, #262626f2, #212121f7 50%, #212121f7 50%, #262626f2); */
    background: var(--navbar-bg-dark);
    color: var(--text-light);
}

.bs-dark .bs-main-header .bs-header-nav{
    background: linear-gradient(to right, var(--navbar-bg-dark), var(--bg-secondary-dark) 50%, var(--navbar-bg-dark));
}

.bs-dark .bs-main-header .bs-icon{
    width: 20px;
    height: 20px;
    fill: var(--text-light);
    cursor: pointer;
}

.bs-dark .bs-main-header .bs-user-div{
    border-left: 1px solid var(--border-light);
}

.bs-dark .bs-main-header .bs-tooltip-header{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    /* border-bottom: 1px solid var(--text-main); */
    color: var(--text-light);
    box-shadow: 2px 2px 5px #17171724;
}

.bs-dark .bs-main-header .bs-tooltip-header .bs-group-nav-items {
    border: 1px solid #4c4d4d;
}

.bs-dark .bs-main-header .bs-tooltip-header .bs-group-nav-items:hover {
    background:  #e96149;
}

.bs-dark .bs-main-header .bs-tooltip-header .bs-group-nav-items:hover a {
    text-decoration: none;
    color: var(--text-main);
}

.bs-dark .bs-main-header .bs-tooltip-header .bs-group-nav-items:hover a .bs-icon {
    fill: var(--text-main);
}

.bs-dark .bs-header-view {
    background: var(--bg-secondary-dark) !important;
    color: var(--text-light);
    border-bottom: 1px solid #5f6161;
}

.bs-dark .bs-header-view .bs-header-icon{
    fill: var(--text-light);
    opacity: 1;
}

.bs-dark .bs-header-view .bs-header-title{
    color: var(--text-light);
}

.bs-dark .bs-header-view .bs-header-title .bs-icon{
    fill: var(--text-light);
}

.bs-dark .bs-icon{
    fill: var(--text-light);
}
.bs-dark .bs-main-header .bs-user-div .bs-profil-dropdown{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    color: var(--text-light);
    box-shadow: 2px 2px 5px #17171724;
}

.bs-dark .bs-header-subnavbar .bs-navbar .bs-navbar-item.active a{
    color: #171717;
}

.bs-dark .bs-header-subnavbar .bs-navbar .bs-navbar-item:hover a{
    color: #171717;
}

/* .bs-dark .bs-header-subnavbar{
    background: var(--navbar-link-hover-bg-dark);
}

.bs-dark .bs-header-subnavbar .bs-navbar .bs-navbar-item a{
    color: var(--text-light);
}

.bs-dark .bs-header-subnavbar .bs-navbar .bs-navbar-item:hover{
    background-color: var(--navbar-bg-dark) !important;
}

.bs-dark .bs-header-subnavbar .bs-navbar .bs-navbar-item.active{
    box-shadow: unset !important;
    background-color: var(--navbar-bg-dark) !important;
}

.bs-dark .bs-header-subnavbar .bs-select-input{
    background-color: var(--navbar-link-hover-bg-dark);
    border: 1px solid var(--text-main);
    color: var(--text-light);
} */

.bs-dark .bs-main-vertical-nav.bs-close .bs-group-nav{
    border-bottom: 1px solid var(--border-dark);
    padding: 0px 0px 10px 0px;
    /* margin: 0px 20px; */
}

.bs-dark .bs-main-vertical-nav .bs-group-nav .bs-group-nav-links.bs-active{
    background: #26262680;
    border: none;
}

/* .bs-dark .bs-main-vertical-nav.bs-close .bs-tooltip-action,
.bs-dark .bs-main-vertical-nav.bs-close .bs-tooltip{
    background: var(--navbar-bg-dark);
    color: var(--text-light);
}

.bs-dark .bs-main-vertical-nav.bs-close .bs-tooltip-action .bs-tooltip-links a{
    color: var(--text-light);
} */

.bs-dark .bs-main-header .bs-profil-dropdown .bs-profil-dropdown-header,
.bs-dark .bs-main-header .bs-profil-dropdown .bs-profil-dropdown-body{
    border-bottom: 1px solid #e96149;
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-buttons {
    color: var(--text-light);
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-buttons {
    background: linear-gradient(to top, #262626e0 33%, #262626d9 50%, #262626cc);
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-modal{
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    color: var(--text-light);
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-modal .bs-mobile-navigation-modal-header {
    border-image: linear-gradient(90deg, #f78055 0%, #e96149 100%) 1;
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-item{
    border: 1px solid var(--text-light);
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-items.bs-active .bs-icon{
    fill: var(--navbar-link-active);
}

.bs-dark .bs-mobile-navigation .bs-mobile-navigation-modal .bs-group-nav-item .bs-icon,
.bs-dark .bs-mobile-navigation .bs-mobile-navigation-item a .bs-icon,
.bs-dark .bs-mobile-navigation .bs-mobile-navigation-item .bs-icon {
    fill: var(--text-light);
}

.bs-dark .bs-header-navbar .bs-navbar .bs-navbar-item .bs-link.bs-active {
    background: var(--bg-secondary-dark);
    color: var(--text-light);
}

#burger-header-view{
    padding-right: 15px;
    position: absolute;
    top: 1%;
    left: 85%;
}

/* #burger-header-view .bs-header-icon{
    width: 40px;
    height: 40px;
    fill: var(--text-main);
    opacity: 1;
} */

.bs-dark #burger-header-view .bs-header-icon{
    fill: var(--text-light);
}

.bs-dark .bs-burger-menu {
    background: #17171770;
}

.bs-dark .bs-burger-menu .bs-burger-icon{
    fill: var(--text-light);
}

.bs-dark .bs-burger-content {
    background: linear-gradient(to bottom,var(--modal-bg-gradient-start),var(--modal-bg-gradient-end));
    box-shadow: 2px 2px 5px #17171724;
}

.bs-dark .bs-burger-content .bs-burger-item{
    border: 1px solid var(--text-light);
    color:var(--color-bg-main);
}

.bs-dark .bs-burger-content .bs-burger-item.bs-active{
    border: 1px solid var(--navbar-link-active);
    color: var(--navbar-link-active);
}

/* === Container === */

.bs-dark .bs-container-box {
    background-color: #4c4d4d;
}