/* 1) IMPORTS & FONTS */
/* 2) BASE / GLOBAL ELEMENTS */
/* 3) LAYOUT / STRUCTURE */
/* 4) color Background */
/* 5) TYPOGRAPHY UTILITIES */
/* 6) SPACING / POSITION UTILITIES */
/* 7) BUTTONS & INTERACTIVE */
/* 8) FORMS */
/* 9) VALIDATION / ERROR */
/* 10) ICONS / MISC */

/* =========================================================
   1) IMPORTS & FONTS
   ========================================================= */
@import url(variables.css);

@font-face {
    font-family: 'Quicksand Bold';
    src: url('/fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand Light';
    src: url('/fonts/Quicksand-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* =========================================================
   2) BASE / GLOBAL ELEMENTS
   ========================================================= */
html,
body {
/*    padding-top: var(--header-h) !important;*/
    font-family: 'Quicksand Light', sans-serif;
    background-color: var(--primary-bg-color);
}
 

a {
    text-decoration: none;
    color: inherit;
}

h1 {
    font-size: var(--font-size-h1);
    font-family: 'Quicksand Bold', sans-serif;
    color: var(--black-color) !important;
    margin-bottom:0px !important;
}
h2 {
    font-size: var(--font-size-16);
    font-family: 'Quicksand Bold', sans-serif;
    color: var(--black-color) !important;
}
h3 {
    font-size: var(--font-size-12);
    font-family: 'Quicksand Bold', sans-serif;
    color: var(--black-color) !important;
}

p {
    font-size: var(--font-size-p) !important;
    font-family: 'Quicksand Light', sans-serif !important;
    color: var(--light-gray-light);
    color: var(--black-color) !important;
}

img {
    max-width: 100%;
    display: block;
}
input,select {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
/*cursor: pointer;*/
.pointer {
    cursor: pointer;
}
/* =========================================================
   3) LAYOUT / STRUCTURE
   ========================================================= */
/*.container {
    width: 420px;
    max-width: 100%;
    height: 100%;
    background-color: var(--theme-bg-color);
    border-radius: 10px;
}*/
.app-bg {
    min-height: 100dvh;
    background: #fff;
    /*    padding: 16px;*/
}

/*.app-bg {
    padding-top: 44px !important;
}*/

.mobile-shell {
    width: 100%;
    max-width: 390px;
    min-height: 100dvh;
    background: var( --light-purple-color);
    border-radius: 18px;
    /*    box-shadow: 0 10px 30px rgba(0,0,0,.10);*/
    overflow: hidden;
}



/* =========================================================
   4) COLOR / BACKGROUND HELPERS
   ========================================================= */
.bg_orange {
    /* background-color: #f79420; */
    background-color: var(--orange-color);
}
.bg_purple {
    background: var( --light-purple-color);
}

.bg_blue {
    background: var( --blue-color-light);
}

.bg_gray {
    background: var( --light-gray);
}

.bg_lightGray {
    background: var( --text-gray-light);
}

.bg_lightblack {
    background: var(--black-color);
}

.bg_red {
    background: var(--red-color);
}
.bg_white {
    background-color: var(--white-color);
}

.text_white {
    color: var(--white-color);
}

.text_black {
    color: var(--black-color) !important;
}

.text_red {
    color: var(--red-color) !important;
}

.text_color {
    color: var(--light-gray-light) !important;
}

.text_blue {
    color: var(--blue-color) !important;
    font-size: var(--font-size-13) !important;
    font-family: 'Quicksand Light', sans-serif !important;
}

.badge_view {
    background-color: var(--status-view-bg) !important;
}

.badge_done {
    background-color: var(--status-done-bg) !important;
}

.badge_followup1 {
    background-color: var(--status-followup1-bg) !important;
}

.badge_approved {
    background-color: var(--status-approved-bg) !important;
}

.badge_followup {
    background-color: var(--status-followup-bg) !important;
}

.badge_onhold {
    background-color: var(--status-onhold-bg) !important;
}
.status_bg {
    background-color: var(--status) !important;
}



/* =========================================================
   5) TYPOGRAPHY UTILITIES
   ========================================================= */
.f_10 {
    font-size: var(--font-size-10) !important; /* 10px */
}
.f_12 {
    font-size: var(--font-size-12); /* 12px */
}

.f_13 {
    font-size: var(--font-size-13); /* 13px */
}

.f_14 {
    font-size: var(--font-size-14); /* 14px */
}

.f_15 {
    font-size: var(--font-size-15); /* 15px */
}

.f_16 {
    font-size: var(--font-size-16); /* 16px */
}

.f_17 {
    font-size: var(--font-size-17); /* 17px */
}

.f_18 {
    font-size: var(--font-size-18); /* 18px */
}
.f_48{
    font-size: var(--font-size-48) !important;
}

    .font_size {
    font-size: 1.15rem !important;
}

.font-lable {
    font-size: var(--font-size-13) !important;
    font-family: 'Quicksand Light', sans-serif !important;
    color: var(--text-color-light);
}

/*.f_button {
    font-size: var(--font-size-button) !important;
    font-family: 'Quicksand Light', sans-serif !important;
}*/
.f_light {
    font-family: 'Quicksand Light', sans-serif !important;
    color: var(--light-gray-light);
} 
.f_bold {
    font-family: 'Quicksand Bold', sans-serif !important;
    color: var(--black-color);
}


/* =========================================================
   6) SPACING / POSITION UTILITIES
   ========================================================= */
.margin_34 {
    margin-left: 34%;
}
.margin_87 {
    margin-left: 87%;
}
.margin_left_75 {
    margin-left: 75px!important;
}
.margin_45 {
    margin-top: 45% !important;
} 

.margin_right_14 {
    margin-right: 14px;
}

.mb_14{
    margin-bottom:14px !important;
}
.mb_16 {
    margin-bottom: 16px !important;
}
.mb_12 {
    margin-bottom: 12px !important;
}
.mt_14 {
    margin-top: 14px !important;
}

.mt_49{
    margin-top:50px !important;
}
.pt_68 {
    padding-top: 60px !important;
}

.pt_33{
    padding-top: 33px !important;
}
.mt_68 {
    margin-top: 68px !important;
}
.pr_26 {
    padding-right: 26px !important;
}
.pr_30 {
    padding-right: 30px !important;
}
.lh_38{
    line-height:38px !important;
}
.p_25 { 
    padding: .375rem 1.75rem !important;
}




.email_icon {
    margin-left: -392px;
    font-size: var(--font-size-24);
}



.drop_down_icon {
    right: 26px !important;
}
.drop_down_icon_22 {
    margin-left: 280px !important;
}
/*.input_field {
    padding: 15px 5px !important;
}*/


.hr_border {
    border-top: 2px solid #000;
}

.dotted_hr {
    border-top: 2px dotted #000;
}

/* nav spacing */
.padding_top_menu {
    padding-top: 1rem !important;
}
.nav-scrollable {
    overflow: visible;
}
.nav-item {
    padding-top: 1rem !important;
}

/* =========================================================
   7) BUTTONS & INTERACTIVE
   ========================================================= */
.btn:hover {
    box-shadow: 0 10px 4px -8px #6c757d;
}
/* Bootstrap button focus style remove */
/*.btn:focus,
.btn:focus-visible,
.btn:active:focus {
    background-color: var(--light-gray);*/
    /*    outline: none !important;*/
    /*    box-shadow: none !important;*/
/*}*/
/*.btn:disabled {
    background-color: var(--light-gray) !important;
    border-color: var(--light-gray) !important;
    color: var(--white-color) !important;
    opacity: 1 !important;
}*/


/*.default_btn {
    border-radius: 4px;
    transition: .5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none;
    height: 34px !important;
    font-size: 14px;
}*/

.default_btn {
    font-size: var(--font-size-button) !important;
    font-family: 'Quicksand Bold', sans-serif !important;
    background-color: var(--button-blue-color);
    /*    border-color: var(--button-blue-color);*/
    height: 40px !important;
    color: var(--white-color);
    border-radius: 8px;
    border: none;
    text-transform: uppercase !important;
}
label.default_btn {
    text-transform: uppercase !important;
}
.button.default_btn {
    text-transform: uppercase !important;
}
.btn:hover {
    box-shadow: 0 10px 4px -8px #00A3EE;
}

.btn:hover {
    color: var(--white-color) !important;
    background-color: var(--button-blue-color);
    border-color: var(--button-blue-color);
}




.default_btn:hover {
    box-shadow: 0 10px 4px -8px #6c757d;
}

.border_radius {
    border-radius: 5px;
}
.br_15 {
    border-radius: 15px !important;
}

/*.f_button {
    font-size: var(--font-size-button) !important;
    font-family: 'Quicksand', sans-serif !important;
    background-color: var(--button-blue-color);
    border-color: var(--button-blue-color);
}

.btn:hover {
    box-shadow: 0 10px 4px -8px #00A3EE;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--button-blue-color);
    border-color: var(--button-blue-color);
}*/
.fixed_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    max-width: 390px;
    justify-self: center !important;
}
#hamburgerMenu {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1031;
    width: 100%;
    max-width: 390px;
    justify-self: center !important;

}
/*.gray_sidebar {
    position: absolute;
    height: 97vh;
    top: 0px;
    background-color: rgba(197, 198, 199, 0.5) !important;
    width: -webkit-fill-available !important;
    border-radius:  15px !important;
}*/
.gray_sidebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: rgba(197,198,199,0.5) !important;
    width: 100%;
    border-radius: 15px !important;
}
.header_sidebar_height {
    /*    height: 60px;*/
    position: relative;
    left: inherit;
    width: 100%;
}
.border_bottom {
    border-bottom: 3px solid #ecedef;
}
.sidebar_menu {
    position: absolute;
    z-index: 999;
    left: 0px;
    width: max-content;
    min-width: 75%;
    margin: 0px;
    float: left;
    right: 0;
    top: 0px;
    background-color: #fff;
    border: 3px solid #ecedef;
    border-top: 0px !important;
    border-left: 0px !important;
    border-radius: 15px 0 0 15px;
    /* animation */
    /*    transform: translateX(-100%);*/
    height: 100vh ;
    overflow-y: auto;
    transition: transform 280ms ease;
    pointer-events: auto; /* clickable */
}
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 900;
}

    .backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
/* make icon look clickable, keep text inert */
.icon-toggle {
    cursor: pointer;
    line-height: 1;
}

/* smooth submenu */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
}

    .submenu.open {
        max-height: 500px; /* enough for items */
    }

/* =========================================================
   8) FORMS
   ========================================================= */
/*.input_field {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-width: 2px;
    border-color: #454c61;
    padding-left: 0;
}*/
.badge_pill {
    border-radius: 5px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: var(--font-size-14);
    font-family: 'Quicksand Bold', sans-serif !important;
}


.form-control:focus {
    box-shadow: none !important;
    border-color: none !important;
}

/*.form-control {
    display: block;
    width: 100%;
    padding: .375rem 1.75rem !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}*/

.border_dashed {
    border-style: dashed !important;
    border: 2px var(--border-color) !important;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.cut_icon {
    top: -10px;
    right: 0;
    background-color: #fff;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.input_width{
    width:327px !important;
}

/*input, select {
    padding-left: 0px !important;
     padding-right: 0px !important; 
}*/

/* =========================================================
   9) VALIDATION / ERROR
   ========================================================= */
/*.valid.modified:not([type=checkbox]) {
    border-bottom: 1px solid #454c61 !important;
}*/

.invalid {
    border: 1px solid #d41b1b !important;
}

.validation-message {
    color: #d41b1b;
}

/* Blazor error */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* =========================================================
   10) ICONS / MISC
   ========================================================= */
.icon_font_plus_minus {
    font-size: 25px;
}

/* =========================================================
   11) PAGE-SPECIFIC (timesheet / holiday)
   ========================================================= */
/* timesheet.css - start */

.modal-dialog {
    max-width: 350px !important;
    margin-right: auto;
    margin-left: auto;
}
.save_button_holiday {
    margin-left: 189%;
}



.drop_left {
    margin-right: 31%;
}
/* timesheet.css - end */

/* holiday.css - start */
.drop_left_holiday {
    margin-right: 559px;
}
/* holiday.css - end */




/* media query for mobile devices */
@media (max-width:576px) {
    .app-bg {
        padding: 0;
    }

    .mobile-shell {
        max-width: none;
        min-height: 100dvh;
        border-radius: 10px;
        box-shadow: none;
    }

    #hamburgerMenu {
        max-width: 100% !important;
    }
    .gray_sidebar {
        position: relative !important;
    }
/*    .sidebar_menu {
        left: 16px !important;
    }*/
    .sidebar_menu {
        position: fixed; /* Fixed position on mobile for smooth scroll */
        top: 0;
        left: 0;
        width: 75%; /* Full width on mobile */
        height: 100vh; /* Full height */
        background-color: #fff;
        border: 3px solid #ecedef;
        border-top: 0px !important;
        border-left: 0px !important;
        border-radius: 0; /* Remove rounded corners for mobile */
        overflow-y: auto; /* Allow vertical scrolling */
        transition: transform 280ms ease; /* Smooth transition */
        pointer-events: auto; /* clickable */
       
    }

        

    .fixed_header {
        max-width: 100% !important;
    }
}