/* NEW QDS COMPONENT CSS, NEW COMPONENTS DISTINCTIVELY */
/* Author JET 2024/3 */
/* Please migrate root var styles for components here, styles are in q-components.js
This way we only load styles for components used */
:root {
    --q-cta: #28293E;
    --q-cta2: #7C22B8;
    --q-white: #fcfcfc;
    --q-grey: #F2F2F5;
    --q-green: #A8F2C4;
    --q-green2: #008565;
    --q-red: #FFA3A3;
    --q-red2: #FECFCF;
    --q-red3: rgb(192, 2, 36);
    --q-yellow: #FFE9A8;
    --q-yellow2:#FFFAA3;
    --q-black: #080918;
    --q-blue: #222935;
    --q-blue1: #1c1d2b;
    --q-blue2: #7C22B8;
    --q-blue3: #0B0F3D;
    --q-blue4: #08C2FF;
    --q-lblue: #DFDFFF;
    --q-lavender: #AAB2FD;
    --q-lavender2: #5F6EFF;
    --q-lavender3: #DFDFFF;
    --q-lavender4: #865bff;
    --q-brand: #121969;
    --q-brand-light: #0F1557;
    --q-brand-dark: #3B475B;
    --q-icon-primary: #1F2A3C;
    --q-sand: #fff6e7;
    --q-secondary-light: #47D8FA;
    --q-bilberry: #523FC3;

    /* Hover styles */
    --q-cta-hover: #523FC3;
    --q-blue2-hover: #1E41FF;

    --q-cta2-hover: #523FC3; 
    --q-white-hover: #523FC3;
    --q-grey-hover: #523FC3;
    --q-green-hover: #008565;
    --q-green2-hover: #A8F2C4;
    --q-red-hover: #C00224;
    --q-red2-hover: #FFA3A3;
    --q-red3-hover: #FECFCF;
    --q-yellow-hover: #FFFAA3;
    --q-yellow2-hover:#FFC017;

    /* Focus styles */ 
    --q-cta-focus: #08C2FF;
    --q-cta2-focus: #08C2FF;
    --q-grey-focus: #181D63;
    --q-white-focus: #181D63;

    --q-cta-hover-text: var(--q-white);
    --q-white-hover-text: var(--q-white);
    --q-cta2-hover-text: var(--q-white);
    --q-blue2-hover-text: var(--q-white);
    --q-grey-hover-text: var(--q-white);
    --q-red-hover-text: var(--q-white);
    --q-green-hover-text: var(--q-white);
    --q-red-hover-text: var(--q-white);

    /* Link styles */ 
    --q-link: #523FC3;
    --q-link-visited: #9349C4;
    --b-link: #4fbefb;
    --b-link-visited: #865bff;

    /* Gradient colors */
    --q-grad: #3a4eb7;
    --q-gradient: linear-gradient(to right, #0f1557, #3a4eb7);
    --q-gradient2: linear-gradient(to top, #0f1557, #3a4eb7);

    /* Legacy colors */
    --q-legacy-blue: #003054;
    --q-legacy-blue2: #0074cc;
    --q-table-separator: #3B475B;

    --q-fs-14: 14px;    
    --q-fs-16: 16px;
    --q-fs-24: 24px;
    --q-fs-28: 28px;
    --q-roboto: "Roboto", sans-serif;
    --q-sofia: "Sofia Sans", sans-serif;

    /* notification, toast, alert, notify */

    --q-royal-lavender-dark: #7C22B8;
    --q-ice-cream-lavender-light: #AAB2FD;
    --q-viridian-green-dark: #008565;
    --q-aquamarine-green-light: #A8F2C4;
    --q-fruit-yellow-dark:#FFF500;
    --q-soda-yellow-light: #FFFAA3;
    --q-danish-red-dark: #C00224;
    --q-nordic-red-light: #FFA3A3;
	
	scrollbar-color: #222935 var(--q-white);
    --q-btn-radius: 10px;
}

html body.q_dark-theme {
    --primary-white-bg: #FCFCFC;
    --light-grey: #3B475B;
    --background-light: #7a7a7a;
    --primary-black: #fcfcfc;
    --primary-blue: #fcfcfc;
    --primary-white: #1F2A3C;
    --effect-secondary-blue: var(--primary-white-bg);
    --background-light-blue: #193655;
    --secondary-green: var(--q-green2);
    --box-shadow: 0px 0px 0px 1px rgb(59, 71, 91);
    --primary-blue-10: #102236;
    --background-gradient: linear-gradient(0deg, #242B37 0%, #222935 100%);
}
html body:not(.q_dark-theme) #top-nav .fs-brand,
html body:not(.q_dark-theme) .user-info-toggle {
    color: #1F2A3C;
}
html body #top-nav {
    background: #F2F2F5;
}

html body.q_dark-theme #sidebar {
    background: var(--background-gradient);
    border: 1px var(--q-cta2);
}
body svg.q_dark {
    filter: invert(99%) sepia(108%) saturate(5953%) hue-rotate(-119deg) brightness(160%) contrast(87%)
}
html body.q_dark-theme svg.q_dark {
    filter: invert(85%) sepia(81%) hue-rotate(165deg) brightness(149%) contrast(158%);
}
html body.q_dark-theme .fs-breadcrumbs > li:not(:first-of-type)::before {
    background-image: url(/assets/img/fleetskills/icons/main-menu/q-icon-chevron-w.svg);
}
html body.q_dark-theme #top-nav {
    background-color: #222935;
}
html body.q_dark-theme .sidebar-item:hover *,
html body.q_dark-theme .sidebar-item.active *,
html body.q_dark-theme .sidebar-item:has(.sidebar-dropdown-toggle.active) *,
html body.q_dark-theme .sidebar-widget-dropdown.active > .list-container a:hover {
    color: #1F2A3C;
}
html body.q_dark-theme .sidebar-buttons > button,
html body.q_dark-theme .sidebar-widget-dropdown.active > .sidebar-header {
    background-color: var(--primary-white-static);
    color: #1F2A3C;
}
html body.q_dark-theme .sidebar-item a {
    color: #FCFCFC;
}
.sidebar-dropdown-menu::before,
.sidebar-dropdown-menu.active > li::before { 
    border-color: #222935 !important;
}
.landing_bg,
.nav-tabs > li,
.nav-pills > li,
html body.fs-body {
	background: #222935 url(/assets/img/logimaster/landing-1.jpg) center center / cover no-repeat fixed !important;
}
.ac_bg {
	background: #222935 url(/assets/img/logimaster/ac-1.jpg) center center / cover no-repeat fixed !important;
}
.mb_bg {
	background: #222935 url(/assets/img/logimaster/mb-1.jpg) center center / cover no-repeat fixed !important;
}
.at_bg {
	background: #222935 url(/assets/img/logimaster/at-1.jpg) center center / cover no-repeat fixed !important;
}
.ed_bg {
	background: #222935 url(/assets/img/logimaster/ed-1.jpg) center center / cover no-repeat fixed !important;
}
.nl-bg {
	background: #222935 url(/assets/img/logimaster/nl-1.jpg) center center / cover no-repeat fixed !important;
}
.cr-1 {
	background: #222935 url(/assets/img/logimaster/cr-1.jpg) center center / cover no-repeat fixed !important;
}
.hr-1 {
	background: #222935 url(/assets/img/logimaster/hr-1.jpg) center center / cover no-repeat fixed !important;
}
.hr-3 {
    background: var(--primary-blue) url(/assets/img/logimaster/hr-2.jpg) center center / cover no-repeat !important;
}
.hr-veil {
    background-color: #4343434d !important;
    text-shadow: 0 0 0.3em #212a3b;
    backdrop-filter: blur(15px);
}

.q_dark-theme.landing_bg,
.q_dark-theme .nav-tabs > li,
.q_dark-theme .nav-pills > li,
html body.q_dark-theme.fs-body {
	background: #222935 url(/assets/img/logimaster/darkmode/landing-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.ac_bg {
	background: #222935 url(/assets/img/logimaster/darkmode/ac-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.mb_bg {
	background: #222935 url(/assets/img/logimaster/darkmode/mb-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.at_bg {
	background: #222935 url(/assets/img/logimaster/darkmode/at-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.ed_bg {
	background: #222935 url(/assets/img/logimaster/darkmode/ed-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.nl-bg {
	background: #222935 url(/assets/img/logimaster/darkmode/nl-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.cr-1 {
	background: #222935 url(/assets/img/logimaster/darkmode/cr-1.jpg) center center / cover no-repeat fixed !important;
}
.q_dark-theme.hr-1 {
	background: #222935 url(/assets/img/logimaster/darkmode/hr-1.jpg) center center / cover no-repeat fixed !important;
}

/* Glassmorphism beta */
#q_bs5 .sidebar-widget-dropdown.active,
#q_bs5 .user-info-dropdown {
    background-color: #fcfcfcd9;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgb(59, 71, 91, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 
                inset 0 0px 0 rgba(255, 255, 255, 0.5),
                inset 0 -1px 0 rgba(255, 255, 255, 0.1), 
                inset 0 0 0px 0px rgba(255, 255, 255, 0);
}
#q_bs5.q_dark-theme .sidebar-widget-dropdown.active,
#q_bs5.q_dark-theme .user-info-dropdown {
    background-color: #222935d1;
}
html body#q_bs5 .sidebar-divider {
    background: linear-gradient(90deg, #523FC3, var(--q-white));
}
#q_bs5.q_dark-theme .breadcrumb-container.q-bread,
body#q_bs5 .breadcrumb-container.q-bread {
    background-color: var(--primary-white-bg);
    border-top: 1px solid var(--q-lblue);
}
.breadcrumb-container:after {
    box-shadow: -10px -12px 0 10px #F2F2F5;
    border-top-left-radius: 10px;
    left: 0px;
    top: 0px;
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: -1;
    border: 0px solid var(--q-white);
    border-left: 0;
    border-top: 0;
}
#q_bs5.q_dark-theme .breadcrumb-container:after {
    box-shadow: -10px -12px 0 10px #222935d1;
}
#q_bs5 .btn,
.language-picker,
#sidebar .pill-button,
.ac-pill-button,
.ac-actions-dropdown,
.btn-select-add {
    border-radius: 10px !important;
}
#q_bs5 .info-bar-item {
	background-color: var(--q-cta);
}
#loading-spinner { 
    background: transparent url(/assets/css/QDS/lm-loader.svg) center / 100% auto no-repeat !important;
    border-radius: unset !important;
}