/*#region Bootstrap v4 to v5 migration remnants*/
.form-group {
    margin-bottom: 1rem;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

    .form-row > .col {
        padding-left: 5px;
        padding-right: 5px;
    }

    .form-row > [class*=col-] {
        padding-right: 5px;
        padding-left: 5px;
    }

.form-control {
    display: block;
    height: calc(1.5em + .75rem + 2px);
}

@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

.navbar {
    padding: .5rem 1rem;
}

.nav-link {
    padding: .5rem 1rem;
}

.modal {
    z-index: 1050;
}

.padding-left-15 {
    padding-left: 15px;
}

label {
    margin-bottom: 0.5rem;
}

textarea.form-control {
    height: auto;
}
/*#endregion */



/*#region Subtitle*/
.sub-title {
    position: relative;
    padding-top: 16px;
}

    .sub-title:after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 10px;
        width: 100%;
        height: 20px;
        z-index: -1;
    }

.sub-title--light:after {
    background-color: var(--theme-color, #55AAAA);
    opacity: 0.16;
}

.sub-title--dark:after {
    background-color: var(--theme-color, #55AAAA);
    opacity: 0.16;
}

.sub-title-onboard:after {
    z-index: initial;
}
/*#endregion */



/*#region Heighter*/
.heighter-5 {
    height: 5px;
}

.heighter-10 {
    height: 10px;
}

.heighter-14 {
    height: 14px;
}

.heighter-15 {
    height: 15px;
}

.heighter-16 {
    height: 16px;
}

.heighter-18 {
    height: 18px;
}

.heighter-20 {
    height: 20px;
}

.heighter-24 {
    height: 24px;
}

.heighter-25 {
    height: 25px;
}

.heighter-27 {
    height: 27px;
}

.heighter-30 {
    height: 30px;
}

.heighter-32 {
    height: 32px;
}

.heighter-35 {
    height: 35px;
}

.heighter-40 {
    height: 40px;
}

.heighter-45 {
    height: 45px;
}

.heighter-50 {
    height: 50px;
}

.heighter-54 {
    height: 54px;
}

.heighter-60 {
    height: 60px;
}

.heighter-64 {
    height: 64px;
}

.heighter-70 {
    height: 70px;
}

.heighter-80 {
    height: 80px;
}

.heighter-96 {
    height: 96px;
}

.heighter-100 {
    height: 100px;
}

.heighter-120 {
    height: 120px;
}

.heighter-125 {
    height: 125px;
}

.heighter-200 {
    height: 200px;
}

.heighter-270 {
    height: 270px;
}

.heighter-300 {
    height: 300px;
}

.heighter-451 {
    height: 451px;
}

.heighter-455 {
    height: 455px;
}

.heighter-500 {
    height: 500px;
}

.heighter-525 {
    height: 525px;
}
/*#endregion */



/*#region Height And Width*/
.height-zero {
    height: 0;
}

.height-100 {
    height: 100%;
}

.height-ui {
    height: unset !important;
}

.height-min-50p {
    min-height: 50px;
}

.height-min-100p {
    min-height: 100px;
}

.height-min-160p {
    min-height: 160px;
}

.height-min-400p {
    min-height: 400px;
}

.height-min-500p {
    min-height: 500px;
}

.height-min-700p {
    min-height: 700px;
}

.height-min-150p-i {
    min-height: 150px !important;
}

.height-min-300p-i {
    min-height: 300px !important;
}

.max-height-50-i {
    max-height: 50% !important;
}

.max-height-80vh {
    max-height: 80vh;
}

.height-max-50p {
    max-height: 50px;
}

.height-max-150p {
    max-height: 150px;
}

.width-100 {
    width: 100%;
}

.width-40 {
    width: 40%;
}

.width-48 {
    width: 48%;
}

.width-50 {
    width: 50%;
}

.width-60 {
    width: 60%;
}

.width-70 {
    width: 70%;
}

.width-80 {
    width: 80%;
}

.width-20p {
    width: 20px;
}

.width-30p {
    width: 30px;
}

.width-50p {
    width: 50px;
}

.width-62p {
    width: 62px;
}

.width-64p {
    width: 64px;
}

.width-67p {
    width: 67px;
}

.width-115pi {
    width: 115px !important;
}

.width-130p {
    width: 130px;
}

.width-150p {
    width: 150px;
}

.width-240p {
    width: 240px;
}

.width-250p {
    width: 250px;
}

.width-260p {
    width: 260px;
}

.width-250pi {
    width: 250px !important;
}

.width-420p {
    width: 420px;
}

.width-u {
    width: unset;
}

.width-ui {
    width: unset !important;
}

.width-max-130p {
    max-width: 130px;
}

.width-max-200p {
    max-width: 200px;
}

.width-max-240p {
    max-width: 240px;
}

.width-max-260p {
    max-width: 260px;
}

.width-max-265p {
    max-width: 265px;
}

.width-max-300p {
    max-width: 300px;
}

.width-max-450p {
    max-width: 450px;
}

.width-max-500p {
    max-width: 500px;
}

.width-max-760p {
    max-width: 760px;
}

.width-max-800p {
    max-width: 800px;
}

.width-max-985p {
    max-width: 985px;
}

.width-max-1000p {
    max-width: 1000px;
}

.width-max-48 {
    max-width: 48%;
}

.width-max-60 {
    max-width: 60%;
}

.width-max-80 {
    max-width: 80%;
}

.width-max-90 {
    max-width: 90%;
}

.width-max-98 {
    max-width: 98%;
}

.width-max-100 {
    max-width: 100%;
}

.width-max-u {
    max-width: unset;
}

.width-max-u-i {
    max-width: unset !important;
}

@media (max-width: 600px) {
    .width-small-100 {
        width: 100%;
    }
}

.width-min-0 {
    min-width: 0;
}

.width-min-50p {
    min-width: 50px;
}

.width-min-100p {
    min-width: 100px;
}

.width-min-115p {
    min-width: 115px;
}

.width-min-260p {
    min-width: 260px;
}

.width-min-300p {
    min-width: 300px;
}

.width-min-500p {
    min-width: 500px;
}

.width-min-600p {
    min-width: 600px;
}

.width-min-u {
    min-width: unset;
}

.max-width-60 {
    max-width: 60%;
}

.max-width-70 {
    max-width: 70%;
}

.max-width-80 {
    max-width: 80%;
}
/*#endregion */



/*#region Padding/Margin*/
.marginbottomzero {
    margin-bottom: 0px;
}

.margintopeight {
    margin-top: 8px;
}

.padtoptwenty {
    padding-top: 20px;
}

.margin-0 {
    margin: 0;
}

.margin-10 {
    margin: 10px;
}

.margin-20 {
    margin: 20px;
}

.margin-20-10 {
    margin: 20px 10px;
}

.margintop-a {
    margin-top: auto;
}

.margintop-5 {
    margin-top: 5px;
}

.margintop-10 {
    margin-top: 10px;
}

.margintop-15 {
    margin-top: 15px;
}

.margintop-20 {
    margin-top: 20px;
}

.margintop-30 {
    margin-top: 30px;
}

.margintop-40 {
    margin-top: 40px;
}

.margintop-100 {
    margin-top: 100px;
}

.margintop-150 {
    margin-top: 150px;
}

.margintop-neg-3 {
    margin-top: -3px;
}

.marginbottom-u {
    margin-bottom: unset;
}

.marginbottom-u-i {
    margin-bottom: unset !important;
}

.marginbottom-2-per {
    margin-bottom: 2%;
}

.marginbottom-05-rem {
    margin-bottom: 0.5rem;
}

.marginbottom-1_5-rem-i {
    margin-bottom: 1.5rem !important;
}

.marginbottom-0 {
    margin-bottom: 0px;
}

.marginbottom-3 {
    margin-bottom: 3px;
}

.marginbottom-5 {
    margin-bottom: 5px;
}

.marginbottom-8 {
    margin-bottom: 8px;
}

.marginbottom-10 {
    margin-bottom: 10px;
}

.marginbottom-15 {
    margin-bottom: 15px;
}

.marginbottom-20 {
    margin-bottom: 20px;
}

.marginbottom-25 {
    margin-bottom: 25px;
}

.marginbottom-30 {
    margin-bottom: 30px;
}

.marginbottom-32 {
    margin-bottom: 32px;
}

.marginbottom-33 {
    margin-bottom: 33px;
}

.marginbottom-40 {
    margin-bottom: 40px;
}

.marginbottom-50 {
    margin-bottom: 50px;
}

.marginbottom-60 {
    margin-bottom: 60px;
}

.marginbottom-0-i {
    margin-bottom: 0px !important;
}

.marginbottom-5-i {
    margin-bottom: 5px !important;
}

.marginbottom-15-i {
    margin-bottom: 15px !important;
}

.marginbottom-20-i {
    margin-bottom: 20px !important;
}

.marginbottom-neg-23 {
    margin-bottom: -23px;
}

.marginbottom-neg-37 {
    margin-bottom: -37px;
}

.marginleft-a {
    margin-left: auto;
}

.marginleft-a-i {
    margin-left: auto !important;
}

.marginleft-0 {
    margin-left: 0px;
}

.marginleft-2 {
    margin-left: 2px;
}

.marginleft-5 {
    margin-left: 5px;
}

.marginleft-10 {
    margin-left: 10px;
}

.marginleft-15 {
    margin-left: 15px;
}

.marginleft-28 {
    margin-left: 28px;
}

.marginleft-30 {
    margin-left: 30px;
}

.marginleft-40 {
    margin-left: 40px;
}

.marginleft-42 {
    margin-left: 42px;
}

.marginleft-50 {
    margin-left: 50px;
}

.marginleft-135 {
    margin-left: 135px;
}

.marginleft-neg-10 {
    margin-left: -10px;
}

.marginleft-neg-15 {
    margin-left: -15px;
}

.marginleft-neg-20 {
    margin-left: -20px;
}

.marginright-a {
    margin-right: auto;
}

.marginright-0 {
    margin-right: 0px;
}

.marginright-5 {
    margin-right: 5px;
}

.marginright-10 {
    margin-right: 10px;
}

.marginright-13 {
    margin-right: 13px;
}

.marginright-15 {
    margin-right: 15px;
}

.marginright-20 {
    margin-right: 20px;
}

.marginright-25 {
    margin-right: 25px;
}

.marginright-28 {
    margin-right: 28px;
}

.marginright-70 {
    margin-right: 70px;
}

.marginright-neg-5 {
    margin-right: -5px;
}

.marginright-neg-15 {
    margin-right: -15px;
}

.marginright-neg-20 {
    margin-right: -20px;
}

.marginright-neg-25 {
    margin-right: -25px;
}

.paddingunset {
    padding: unset;
}

.padding-0 {
    padding: 0;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-23 {
    padding: 23px;
}

.padding-24 {
    padding: 24px;
}

.padding-25 {
    padding: 25px;
}

.padding-24-i {
    padding: 24px !important;
}

.padding-12-24-24-24-i {
    padding: 12px 24px 24px 24px !important;
}

.padding-0-10 {
    padding: 0px 10px;
}

.padding-0-20 {
    padding: 0px 20px;
}

.padding-10-0 {
    padding: 10px 0px;
}

.padding-10-5 {
    padding: 10px 5px;
}

.padding-10-20 {
    padding: 10px 20px;
}

.padding-16-10 {
    padding: 16px 10px;
}

.padding-20-10 {
    padding: 20px 10px;
}

.paddingleft-u {
    padding-left: unset;
}

.paddingleft-u-i {
    padding-left: unset !important;
}

.paddingleft-0 {
    padding-left: 0px;
}

.paddingleft-0-i {
    padding-left: 0px !important;
}

.paddingleft-5 {
    padding-left: 5px;
}

.paddingleft-6 {
    padding-left: 6px;
}

.paddingleft-8 {
    padding-left: 8px;
}

.paddingleft-10 {
    padding-left: 10px;
}

.paddingleft-12 {
    padding-left: 12px;
}

.paddingleft-15 {
    padding-left: 15px;
}

.paddingleft-20 {
    padding-left: 20px;
}

.paddingleft-30 {
    padding-left: 30px;
}

.paddingleft-40 {
    padding-left: 40px;
}

.paddingleft-64 {
    padding-left: 64px;
}

.paddingleft-rem-05-i {
    padding-left: .5rem !important;
}

.paddingright-0 {
    padding-right: 0px;
}

.paddingright-0-i {
    padding-right: 0px !important;
}

.paddingright-5 {
    padding-right: 5px;
}

.paddingright-10 {
    padding-right: 10px;
}

.paddingright-15 {
    padding-right: 15px;
}

.paddingright-20 {
    padding-right: 20px;
}

.paddingright-24 {
    padding-right: 24px;
}

.paddingright-25 {
    padding-right: 25px;
}

.paddingright-30 {
    padding-right: 30px;
}

.paddingright-40 {
    padding-right: 40px;
}

.paddingright-50 {
    padding-right: 50px;
}

.paddingright-64 {
    padding-right: 64px;
}

.paddingright-100 {
    padding-right: 100px;
}

.paddingtop-5 {
    padding-top: 5px;
}

.paddingtop-10 {
    padding-top: 10px;
}

.paddingtop-15 {
    padding-top: 15px;
}

.paddingtop-20 {
    padding-top: 20px;
}

.paddingtop-30 {
    padding-top: 30px;
}

.paddingtop-160 {
    padding-top: 160px;
}

.paddingbottom-10 {
    padding-bottom: 10px;
}

.paddingbottom-20 {
    padding-bottom: 20px;
}

.paddingbottom-25 {
    padding-bottom: 25px;
}

.paddingbottom-33 {
    padding-bottom: 33px;
}

.paddingbottom-160 {
    padding-bottom: 160px;
}

.paddingbottom-rem-05-i {
    padding-bottom: .5rem !important;
}

.paddingbottom-u {
    padding-bottom: unset;
}

.border-u {
    border: unset;
}

.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

@media (max-width: 600px) {
    .ml-small-auto {
        margin-left: auto;
    }
}
/*#endregion */



/*#region Line Height*/
.lineheight-20 {
    line-height: 20px;
}

.lineheight-34 {
    line-height: 34px;
}
/*#endregion */



/*#region Fixed Position*/
.relativeposition {
    position: relative;
}

@media (min-width: 1000px) and (min-height: 835px) {
    .fixedposition {
        position: fixed;
    }
}
/*#endregion */



/*#region Opacity*/
.opacity-half {
    opacity: 0.5;
}
/*#endregion */



/*#region Border Radius*/
.border-radius-3 {
    border-radius: 3px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-20 {
    border-radius: 20px;
}

.border-1px-solid {
    border: 1px solid;
}

.border-1px-solid-gray {
    border: 1px solid gray;
}

.border-1px-solid-gray2 {
    border: 1px solid #E0E0E0;
}

.border-1px-solid-blue {
    border: 1px solid var(--theme-color-blue, #1D9CD3);
}

.border-1px-solid-red {
    border: 1px solid red;
}

.accessible-mode .border-1px-solid-red {
    border: 1px solid #ED0000;
}

.border-4px-solid-gray {
    border: 4px solid gray;
}

.border-bottom-1px-solid-gray {
    border-bottom: 1px solid gray;
}

.border-style-unset {
    border-style: unset;
}

.border-bottom-u-i {
    border-bottom: unset !important;
}
/*#endregion */



/*#region Transform*/
.transform-x-inverse {
    transform: scaleX(-1);
}
/*#endregion */



/*#region Fixed Left hand Column*/
@media (min-height: 650px) {
    .fixedlefthandcol {
        top: 0;
        position: sticky;
    }
}

@media (min-height: 740px) {
    .fixedlefthandcol {
        top: 150px;
        position: sticky;
    }
}
/*#endregion */



/*#region Separators*/
.separator-v {
    font-size: x-large;
    color: #E0E0E0;
    margin-right: 10px;
    margin-left: 10px;
}

.accessible-mode .separator-v {
    color: #6B6B6B;
}

.separator-u {
    font-size: x-large;
    color: #E0E0E0;
    margin-right: 20px;
    margin-left: 15px;
}

.accessible-mode .separator-u {
    color: #6B6B6B;
}

.separator-w {
    border: 1px solid #E5E5E5;
    margin-top: unset;
    margin-bottom: unset;
}

.accessible-mode .separator-w {
    border: 1px solid #6B6B6B;
}

.separator-z {
    border: 1px solid black;
    margin-top: 20px;
    margin-bottom: 20px;
}

.separator-z-u {
    border: 1px solid black;
    margin-top: unset;
    margin-bottom: unset;
}
/*#endregion */



/*#region Z Index*/
.z-index-1 {
    z-index: 1;
}

.z-index-10 {
    z-index: 10;
}

.z-index-500 {
    z-index: 500;
}

.z-index-1999 {
    z-index: 1999;
}
/*#endregion */



/*#region Display Styles*/
.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.display-none {
    display: none;
}

.display-none-i {
    display: none !important;
}
/*#endregion */



/*#region Visibility Styles*/
.visibility-hide {
    visibility: hidden;
}

.visibility-show {
    visibility: visible;
}
/*#endregion */



/*#region Base Popup*/
.basepopup.e-dialog {
    max-height: 80% !important;
    /*margin-top: 150px;*/
    margin-top: 9vh;
    max-width: 95% !important;
}

@media (max-height: 1000px) {
    .basepopup.e-dialog {
        margin-top: 50px !important;
        max-height: 75% !important;
    }
}

@media (max-height: 775px) {
    .basepopup.e-dialog {
        margin-top: 0px !important;
    }
}

.basepopupbigger.e-dialog {
    max-height: 90% !important;
    margin-top: 4vh;
    max-width: 95% !important;
}

@media (max-height: 1000px) {
    .basepopupbigger.e-dialog {
        margin-top: 5vh;
        max-height: 85% !important;
    }
}

@media (max-height: 775px) {
    .basepopupbigger.e-dialog {
        margin-top: 0px !important;
    }
}

@media(max-width: 500px) {
    .marginrightsmallscreenpopup {
        margin-right: 7vw;
    }
}

@media(max-width: 450px) {
    .marginrightsmallscreenpopup {
        margin-right: 10vw;
    }
}

/*this is to handle an issue where sometimes on mobile the popup zindex gets set less than the top bar*/
@media(max-width: 600px) {
    .mobilepopup {
        z-index: 2337 !important;
    }
}

.popupcancelbtn {
    background-color: #FFFFFF !important;
    border: 1px solid #333333 !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: var(--font-medium, 14px) !important;
    line-height: 16px !important;
    text-align: center !important;
    letter-spacing: var(--letter-spacing-e, 0.05em) !important;
    color: #333333 !important;
    padding: 15px 20px !important;
}

    .popupcancelbtn:hover {
        background-color: #f2f4f6 !important;
    }

    .popupcancelbtn:focus {
        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #333333;
    }

.popuppostbtn {
    background-color: #333333 !important;
    border-color: #333333 !important;
    border-radius: 2px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: var(--font-medium, 14px) !important;
    line-height: 16px !important;
    text-align: center !important;
    letter-spacing: var(--letter-spacing-e, 0.05em) !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
}

    .popuppostbtn:hover {
        background-color: #111111 !important;
    }

    .popuppostbtn:focus {
        /*notes: the problem with way 1 is that it moves the content, so will
            switch it to way 2, to test it out 1-29-2024
        */
        /*WAY 1
            outline doesnt support round corners
        */
        /*border: 2px solid #FFFFFF !important;
        outline: 2px solid #000000 !important;
        border-radius: 0;*/
        /*WAY 2*/
        /*box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #eeeeee !important;*/
        box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px #000000 !important;
        /* for windows high contrast mode the below */
        /*outline: 2px dotted transparent !important;
        outline-offset: 2px !important;*/
        /*WAY 3*/
        /*box-shadow: 0 0 0 3px lightgrey !important;*/
    }

    /*we put this below :hover since we want this bg to remain the same so hover looks like also no action*/
    .popuppostbtn:disabled {
        background-color: #5d5d5d !important;
    }

.popuppostbtntheme {
    background-color: var(--theme-color, #55AAAA) !important;
    border-color: var(--theme-color, #55AAAA) !important;
    border-radius: 2px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: var(--font-medium, 14px) !important;
    line-height: 16px !important;
    text-align: center !important;
    letter-spacing: var(--letter-spacing-e, 0.05em) !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
}

    .popuppostbtntheme:focus {
        /*WAY 1*/
        border: 2px solid #FFFFFF !important;
        outline: 2px solid var(--theme-color, #55AAAA) !important;
        /* outline doesnt support round corners */
        border-radius: 0;
    }

    .popuppostbtntheme:hover {
        background-color: #448888 !important;
    }

.popuppostbtngrey {
    background-color: #828282 !important;
}

.popuppostbtnsmall {
    padding: 5px 10px !important;
}

.popupbodypadding {
    padding-left: 64px;
    padding-right: 64px;
}

.popupheaderparent {
    margin-top: 20px;
    margin-bottom: 20px;
}

.popupheader {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-large, 20px);
    line-height: 32px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
    white-space: initial;
}

.popupheaderv2 {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-large-x, 24px);
    line-height: 29px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color, #333333);
}

.popupheadersmall {
    font-size: var(--font-medium-x, 16px);
    line-height: 20px;
    font-weight: 600 !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
    white-space: initial;
}

.popupdescription {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 24px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color-a, #828282);
}

.popuptitlelbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-medium-x, 16px);
    line-height: 24px;
    letter-spacing: var(--letter-spacing-x, 0.5px);
    color: var(--text-color, #333333);
}

.popupsectionlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-medium, 14px);
    line-height: 24px;
    letter-spacing: var(--letter-spacing-x, 0.5px);
    color: var(--text-color, #333333);
}

.popupsectionalbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color, #333333);
    margin-bottom: 10px;
}

.popupresplbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
}

.popupdescnewlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
}

.popupdescriptionaltlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    line-height: 16px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: #333333;
}

.wemetbtn {
    background: #333333;
    border-radius: 2px;
    color: #FFFFFF;
    font-size: var(--font-medium, 14px);
    line-height: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #333333;
}

    .wemetbtn:hover {
        background-color: #111111;
    }

    .wemetbtn:focus {
        /*WAY 1*/
        border: 2px solid #FFFFFF !important;
        outline: 2px solid #000000 !important;
        /* outline doesnt support round corners */
        border-radius: 0;
    }

.wemetbtn-mb-10 {
    margin-bottom: 10px;
}

.wenotmetbtn {
    background: var(--btn-color-bg, #FFFFFF);
    border-radius: 2px;
    color: var(--text-color, #333333);
    font-size: var(--font-medium, 14px);
    line-height: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    width: 100%;
}

    .wenotmetbtn:hover {
        background-color: var(--hover-color, #F2F4F6);
    }

    .wenotmetbtn:focus {
        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #333333;
    }

@media (max-width: 600px) {
    .popupcancelbtn {
        padding: 10px 14px !important;
    }

    .popuppostbtn {
        padding: 10px 14px !important;
    }

    .popuppostbtntheme {
        padding: 10px 14px !important;
    }

    .popupbodypadding {
        padding-left: 32px;
        padding-right: 32px;
    }
}

.buttonclose {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    border: unset;
    font-size: 20px;
    padding: 6px;
}

    .buttonclose:hover {
        background-color: var(--hover-color, #F2F4F6);
        background-color: #BDBDBD;
        color: white;
    }

    .buttonclose:focus {
        background-color: var(--hover-color, #F2F4F6);
        background-color: #BDBDBD;
        color: white;
    }

.buttonclose-icon {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.buttonclose:hover .buttonclose-icon {
    color: white;
}

.buttonclose:focus .buttonclose-icon {
    color: white;
}
/*#endregion */

/*#region Common Popup*/
.commonpopup .e-dlg-header-content {
    border-bottom: unset !important;
}

.commonpopup .e-dlg-content {
    padding: 14px 70px 70px 70px !important;
}

.commonpopup .e-footer-content {
    border-top: unset !important;
}

.commonpopup2 .e-dlg-content {
    padding: 14px 70px 14px 70px !important;
}

.common-footerclass {
    padding-left: 114px;
    padding-right: 114px;
    margin-bottom: 62px;
}

.common-footerclassn {
    padding-left: 64px;
    padding-right: 64px;
    margin-bottom: 62px;
}

@media(max-width: 500px) {
    .commonpopup .e-dlg-content {
        padding: 14px 14px 70px 14px !important;
    }

    .common-footerclass {
        padding-left: 24px;
        padding-right: 24px;
    }

    .common-footerclassn {
        padding-left: 14px;
        padding-right: 14px;
    }
}
/*#endregion */

/*#region Padding 24 Popup*/
.padding24popup .e-dlg-header-content {
    padding: 24px !important;
}

.padding24popup .e-dlg-content {
    padding: 24px !important;
}

.padding24popup .e-footer-content {
    padding: 24px !important;
}
/*#endregion */

/*#region Width 100 Popup*/
.commonwidthpopup.e-dialog {
    max-width: 1000px;
}

    .commonwidthpopup .e-dlg-header-content .e-dlg-header {
        width: 100% !important;
    }
/*#endregion */

/*#region Padding 0 Popup*/
.padding0popup .e-dlg-header-content {
    padding: 0px !important;
}

.padding0popup .e-dlg-content {
    padding: 0px !important;
}
/*#endregion */

/*#region Random Popups*/
.meetapppopup .e-dlg-content {
    padding: 30px 80px 30px 80px !important;
}

.meetapppopup .e-footer-content {
    padding: 30px 80px 0px 80px !important; /*30px 80px 60px 80px !important;*/
}

.meetapppopupfooterparent {
    flex-direction: column;
}

@media (max-height: 1000px) {

    .meetapppopup .e-footer-content {
        padding: 30px 0px 0px 0px !important;
    }

    .meetapppopupfooterparent {
        flex-direction: row;
    }

        .meetapppopupfooterparent :is(.teamsbtn, .slackbtn, .wemetbtn) {
            margin-right: 20px;
            padding-right: 10px;
            margin-bottom: 0px;
            padding-left: 10px;
            text-align: center;
        }
}

.messagespopup .e-dlg-header {
    display: flex !important;
}

.proskillspopup.e-dialog {
    max-width: 700px;
}

.headerfullwidthpopup .e-dlg-header-content .e-dlg-header {
    width: 100% !important;
}

.eventspopup .e-dlg-header {
    display: flex !important;
    width: unset;
}

.growthnpspopup.e-dialog {
    max-width: 100% !important;
}

.growthnpspopup .e-dlg-header-content .e-dlg-header {
    width: 100% !important;
}

.growthnpspopup .e-dlg-header-content {
    border-bottom: unset !important;
}

.minheaderpopup .e-dlg-header-content {
    padding: 24px 24px 0px 24px !important;
    border-bottom: unset !important;
}

.headerfullwidthpopup .e-dlg-header-content .e-dlg-header {
    width: 100% !important;
}

.headernobottomborderopup .e-dlg-header-content {
    border-bottom: unset !important;
}

.noborderpopup.e-dialog {
    border: unset;
}

.selectableheaderpopup .e-dlg-header {
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

@media (max-width: 600px) {
    .eventspopup0 .e-footer-content {
        padding: 12px !important;
    }

    .meetapppopup .e-dlg-content {
        padding: 12px !important;
    }

    .meetapppopup .e-footer-content {
        padding: 12px !important;
    }
}

.paymentfooterpopup .e-footer-content {
    display: flex !important;
}

/*popup new template*/
.newtemplatepopup {
    border-width: 0px !important;
}

    .newtemplatepopup .e-dialog .e-dlg-header-content {
        /*background: #55aaaa;*/
        /**/
        /*OR*/
        /**/
        background: var(--theme-color-light, #b1d8d8);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding-right: 20px;
        padding-top: 18px;
    }

    .newtemplatepopup2 .e-dialog .e-dlg-header-content {
        background: #fdf3f4;
    }

.dark-mode .newtemplatepopup .e-dialog .e-dlg-header-content {
    background: #1a3535;
}

    .newtemplatepopup .e-dialog .e-dlg-content {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding-top: 30px !important;
    }

    .newtemplatepopup .e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:focus .e-icon-dlg-close::before {
        border-radius: 50%;
        box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 1px #333333;
    }

    .newtemplatepopup .e-dialog .e-icon-dlg-close::before {
        /*background: #b1d8d8;
        background: #55aaaa;
        color: #fff;
        padding: 5px;
        position: relative;
        border-radius: 15px;*/
        /**/
        /*OR*/
        /**/
        padding: 5px;
        font-weight: 900;
    }

    .newtemplatepopup .e-dialog .e-icon-dlg-close:hover::before {
        /*background: #b1d8d8;
        background: #55aaaa;*/
        background: var(--theme-color-m-light, #bedfdf);
        border-radius: 15px;
    }

    .newtemplatepopup2 .e-dialog .e-icon-dlg-close:hover::before {
        background: #fef9f9;
    }

    .dark-mode .newtemplatepopup .e-dialog .e-icon-dlg-close:hover::before {
        background: #489191;
    }

    .newtemplatepopup .e-dlg-header-content .e-dlg-header {
        width: 80% !important;
    }

    .newtemplatepopupalt .e-dlg-header-content .e-dlg-header {
        width: unset !important;
    }

.newtemplatepopup2 .e-dialog .e-dlg-header-content {
    padding-bottom: 18px;
}

.newtemplatepopup3 .e-dialog .e-dlg-header-content {
    padding-bottom: 18px;
}

.popupfooternotop .e-footer-content {
    border-top: unset !important;
}

.popupfooterpadding20 .e-footer-content {
    padding: 20px !important;
}
/*#endregion */


/*#region Base Switch*/
.togglebtn .e-switch-disabled {
    background-color: transparent !important;
}

.e-switch-wrapper.handle-color .e-switch-handle.e-switch-active {
    background-color: var(--theme-color, #55AAAA) !important;
}

.e-switch-wrapper.handle-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-color:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--bg-color-a, #FFFFFF) !important;
    border-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
}

.e-switch-wrapper.handle-color .e-switch-inner,
.e-switch-wrapper.handle-color .e-switch-off {
    background-color: var(--bg-color-a, #FFFFFF) !important;
    border-color: #ccc !important;
}

.e-switch-wrapper .e-switch-on {
    background-color: var(--bg-color-a, #FFFFFF) !important;
}
/*#endregion */


/*#region Numeric Text Box*/
.numerictextboxclass {
    padding: 5px;
}

    .numerictextboxclass .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 17px !important;
        letter-spacing: var(--letter-spacing-e, 0.05em) !important;
        color: var(--text-color, #333333) !important;
    }

.dark-mode .numerictextboxclassinput {
    background-color: #282828 !important;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6) !important;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
}

.numericinput-widthunset {
    width: unset !important;
}
/*#endregion */


/*#region Text Box*/
.sftextboxclass {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-size: 14px !important;
    letter-spacing: var(--letter-spacing-e, 0.05em) !important;
    color: var(--text-color-a, #828282) !important;
}

.sftextboxclassrounded {
    /*border-radius: 20px !important;*/
    padding: 5px;
}

.sftextboxclass-search {
    min-width: 600px;
    width: unset !important;
    margin-right: 5px;
}

@media (max-width: 1000px) {
    .sftextboxclass-search {
        min-width: unset;
        width: 100% !important;
        margin-right: unset;
    }
}
/*#endregion */


/*#region Input Text Area*/
.input-textarea-height {
    width: 100%;
    /*height: 15%;*/
    min-height: 200px !important;
}

.input-textarea-height-90 {
    width: 100%;
    /*height: 15%;*/
    min-height: 90px !important;
}

.input-textarea-height-100 {
    width: 100%;
    min-height: 100px !important;
}

.input-textarea-height-130 {
    width: 100%;
    min-height: 130px !important;
}

.input-textarea-height-150 {
    width: 100%;
    min-height: 150px !important;
}
/*#endregion */


/*#region Base Listview*/
.baselistview {
    border: none !important;
    width: 100% !important;
    height: unset;
}

    .baselistview .e-list-parent {
        width: 100% !important;
    }

    .baselistview .e-list-item.e-active {
        /*background-color: transparent !important;*/
        background-color: white !important;
    }

        .baselistview .e-list-item.e-hover {
            background-color: transparent;
        }

    .baselistview .e-list-group-item .e-text-content .e-list-text {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-size: 14px;
    }

.accessible-mode .baselistview .e-list-group-item {
    color: #687178;
}

.accessible-mode .erg-grouplist .e-list-group-item {
    color: #687178;
}

.accessible-mode.dark-mode .baselistview .e-list-group-item {
    color: #F2F2F2;
}

.accessible-mode.dark-mode .erg-grouplist .e-list-group-item {
    color: #F2F2F2;
}

.ergslist-myprofile .e-list-group-item {
    background-color: var(--bg-color-c, #E8E8E8) !important;
    color: var(--text-color-z, #000000) !important;
    margin-top: 15px;
}
/*#endregion */


/*#region Base Listbox*/
.baselistbox .e-list-wrap .e-list-parent .e-list-item {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-size: 12px;
}

.baselistbox .e-listbox-tool .e-btn.e-control {
    background: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.baselistbox .e-listbox-tool .e-btn:disabled {
    background: #F6F7F7;
    border-color: rgba(180, 185, 190, 0.55);
    box-shadow: none;
    color: lightgray;
}

.baselistbox .e-listbox-tool .e-btn .e-btn-icon {
    font-size: 12px;
    font-weight: 600;
}

.baselistbox-hu .e-list-wrap .e-list-parent .e-list-item {
    height: unset;
}

.baselistbox-sticky {
    align-items: flex-start;
}

    .baselistbox-sticky .e-listbox-tool {
        position: sticky;
        position: -webkit-sticky;
        top: 0px;
    }

.baselistbox-sticky-parent {
    max-height: 47vh;
}

@media (max-height: 1050px) {
    .baselistbox-sticky-parent {
        max-height: 42vh;
    }
}

@media (max-height: 950px) {
    .baselistbox-sticky-parent {
        max-height: 36vh;
    }
}

@media (max-height: 875px) {
    .baselistbox-sticky-parent {
        max-height: 31vh;
    }
}

@media (max-height: 800px) {
    .baselistbox-sticky-parent {
        max-height: 27vh;
    }
}

@media (max-height: 750px) {
    .baselistbox-sticky-parent {
        max-height: 22vh;
    }
}

@media (max-height: 700px) {
    .baselistbox-sticky-parent {
        max-height: 17vh;
    }
}
/*#endregion */


/*#region Base Multi Select*/
.multi-attr-select {
    box-sizing: border-box;
    border-radius: 3px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    color: #333333 !important;
}

    .multi-attr-select .e-dropdownbase .e-list-item {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: var(--text-color, #333333);
        margin-bottom: 2px;
    }

        .multi-attr-select .e-dropdownbase .e-list-item.e-active {
            font-family: var(--theme-font-family, Montserrat), sans-serif;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: var(--letter-spacing, 0.25px);
            background-color: var(--theme-color, #55AAAA) !important;
            border: 1px solid var(--theme-color, #55AAAA);
            box-sizing: border-box;
            border-radius: 3px;
            color: #FFFFFF !important;
        }

                .multi-attr-select .e-dropdownbase .e-list-item.e-active .e-checkbox-wrapper .e-check {
                    color: var(--theme-color, #55AAAA) !important;
                    background-color: #FFFFFF !important;
                    border-color: var(--theme-color, #55AAAA) !important;
                }

    .multi-attr-select .e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
        color: #fff !important;
    }

    .multi-attr-select .e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-check {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
        color: #fff !important;
    }

    .multi-attr-select .e-multi-select-wrapper .e-delim-values {
        font-family: inherit;
    }

    .multi-attr-select .e-multi-select-wrapper .e-multi-searcher .e-dropdownbase {
        font-family: inherit;
    }

    .multi-attr-select .e-multi-select-wrapper .e-chips > .e-chipcontent {
        font-family: inherit;
        font-size: var(--font-medium, 14px);
    }

.multi-attr-select2 .e-multi-select-wrapper .e-delim-values {
    font-family: inherit;
    font-size: var(--font-medium, 14px);
}

    .multi-attr-select2 .e-multi-select-wrapper .e-delim-values .e-remain {
        font-size: var(--font-medium, 14px);
    }

    .multi-attr-select2 .e-multi-select-wrapper .e-multi-searcher .e-dropdownbase {
        font-family: inherit;
        font-size: var(--font-medium, 14px);
    }

.multi-attr-select2 .e-multi-select-wrapper .e-chips > .e-chipcontent {
    font-family: inherit;
    font-size: var(--font-medium, 14px);
}

.multi-attr-select2 .e-dropdownbase .e-list-item {
    font-size: var(--font-medium, 14px);
}
/*#endregion */


/*#region Base Dropdown Edit Btn*/
.dropdown-edit-btn-height {
    height: 40px;
}

.e-editcontextopt::before {
    /*content: '\e781';*/ /*bootstrap 4*/
    content: '\e770'; /*bootstrap 5*/
}

.dropdown-edit-btn .e-editcontextopt::before {
    font-size: 20px !important;
}

.e-editcontext::before {
    /*content: '\e71b';*/ /*bootstrap 4*/
    content: '\e71c'; /*bootstrap 5*/
}
    .dropdown-edit-btn.e-active {
        color: #828282;
        background-color: var(--bg-color, white)  !important;
    }

    .dropdown-edit-btn:hover {
        color: #828282;
        background-color: var(--bg-color, white)  !important;
    }

    .dropdown-edit-btn:focus {
        color: #828282;
        background-color: var(--bg-color, white)  !important;
    }



.dropdown-edit-btn {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-color-a, #828282) !important;
    border: none !important;
    background-color: var(--bg-color, white) !important;
    /*height: 40px;*/
}

    .dropdown-edit-btn .e-editcontext::before {
        font-size: 20px !important;
    }

.dropdown-edit-btn .e-caret {
    visibility: hidden;
    display: none !important;
}


.dropdown-edit-btn .e-editcontextopt::before {
    font-size: 20px !important;
}

    .dropdown-edit-btn .e-dropdown-menu {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: var(--font-medium, 14px) !important;
        line-height: 20px !important;
        color: #828282 !important;
        border: none;
        background-color: var(--bg-color, white) !important;
    }

    .dropdown-edit-btn:hover {
        outline: 0; /*TODO: accessibility*/
        background-color: var(--bg-color, white);
        border: none;
    }

    .dropdown-edit-btn:focus {
        outline: 0; /*TODO: accessibility*/
        background-color: var(--bg-color, white);
        border: none;
    }
/*#endregion */


/*#region Dropdown Settings Context Menu*/
.dropdownsettingscontextmenu {
    background-color: transparent !important;
}

    .dropdownsettingscontextmenu:hover {
        background-color: transparent !important;
    }

    .dropdownsettingscontextmenu:focus {
        background-color: transparent !important;
    }

    .dropdownsettingscontextmenu .e-editcontext::before {
        font-size: 30px !important;
    }

    .dropdownsettingscontextmenu .e-dropdown-menu .e-item .checkedcolor::before {
        color: #828282 !important;
    }

    .dropdownsettingscontextmenu .e-dropdown-menu .e-item .uncheckedcolor::before {
        color: transparent !important;
    }

    .dropdownsettingscontextmenu .e-dropdown-menu .e-item .e-bullet-5::before {
        /*content: '\e7ab';*/
        content: '\e7fc';
    }

    .dropdownsettingscontextmenu .e-dropdown-menu .e-item .e-hide::before {
        /*content: '\e82f';*/
        content: '\e887';
    }

    .dropdownsettingscontextmenu .e-dropdown-menu .e-item .e-hide {
        background: transparent;
        color: #828282 !important;
        padding-right: 25px;
    }

.dropdownsettingstoolbarmenu {
    color: #212529 !important;
    font-size: 13px !important;
}

.dropdownsettingstoolbarmenu .e-dropdown-menu {
    color: #212529 !important;
}

.dark-mode .dropdownsettingstoolbarmenu {
    color: #fff !important;
}

.dark-mode .dropdownsettingstoolbarmenu .e-dropdown-menu {
    color: #fff !important;
}

.dropdownsettingscontextmenu-scheduler {
    color: white !important;
}

    .dropdownsettingscontextmenu-scheduler.e-dropdown-popup {
        color: #828282 !important;
    }

.dropdownsettingscontextmenu-scheduler:hover {
    background: rgba(0, 0, 0, .056) !important;
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: inherit;
    outline: none;
}

.dropdownsettingscontextmenu-scheduler:active {
    box-shadow: none !important;
}

.dropdownsettingscontextmenu-scheduler:focus {
    box-shadow: none !important;
}

.dropdownsettingscontextmenu-scheduler.e-active {
    background: rgba(0, 0, 0, .056) !important;
}
/*#endregion */


/*#region base Checkbox datalist*/
.basecheckboxlistview {
    border: none !important;
    width: 100%;
}

    .basecheckboxlistview .e-list-item {
        /*min-width: 169px;*/
        float: left;
        border: 1px solid #E0E0E0 !important;
        box-sizing: border-box;
        border-radius: 3px;
        margin: 5px 1% 5px 0px !important;
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: var(--font-medium, 14px);
        line-height: 20px;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: #333333;
        -webkit-user-select: none; /* Safari */
        user-select: none;
    }

        .basecheckboxlistview .e-list-item .e-text-content {
            display: flex !important;
            align-items: center !important;
        }

            .basecheckboxlistview .e-list-item .e-text-content .e-list-text {
                margin-left: 5px;
                width: unset !important;
            }

        .basecheckboxlistview .e-list-item.e-active {
            background-color: var(--theme-color, #55AAAA) !important;
            border: 1px solid var(--theme-color, #55AAAA);
            box-sizing: border-box;
            border-radius: 3px;
            color: #FFFFFF !important;
        }

            .basecheckboxlistview .e-list-item.e-active .e-text-content .e-checkbox-wrapper .e-check {
                color: var(--theme-color, #55AAAA) !important;
                background-color: #FFFFFF !important;
                border-color: var(--theme-color, #55AAAA) !important;
            }

        .basecheckboxlistview .e-list-item.e-focused {
            background-color: white !important;
            color: #333333 !important;
        }

        .basecheckboxlistview .e-list-item[aria-selected="true"].e-focused {
            background-color: var(--theme-color, #55AAAA) !important;
            color: #FFFFFF !important;
        }

        .basecheckboxlistview .e-list-item[aria-selected="true"] {
            background-color: var(--theme-color, #55AAAA) !important;
            border: 1px solid var(--theme-color, #55AAAA);
            box-sizing: border-box;
            border-radius: 3px;
            color: #FFFFFF !important;
        }

            .basecheckboxlistview .e-list-item[aria-selected="true"] .e-text-content .e-checkbox-wrapper .e-check {
                color: var(--theme-color, #55AAAA) !important;
                background-color: #FFFFFF !important;
                border-color: var(--theme-color, #55AAAA) !important;
            }

        .basecheckboxlistview .e-list-item .e-text-content .e-checkbox-wrapper .e-check {
            color: var(--theme-color, #55AAAA) !important;
            background-color: #FFFFFF !important;
            border-color: var(--theme-color, #55AAAA) !important;
        }
/*#endregion */


/*#region base Dropdown List*/
.dropdownvaluelblpadding {
    padding-left: 8px;
    margin-bottom: 0px;
}

.basedropdownlist {
    /*width: unset !important;*/
    align-items: center;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    color: #828282 !important;
    margin-bottom: unset !important;
    border: unset !important;
    background-color: transparent !important;
}

    .basedropdownlist:not(.e-popup-open) {
        width: unset !important;
    }

    .basedropdownlist .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: var(--font-medium, 14px) !important;
        line-height: 20px !important;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: #828282 !important;
        margin-bottom: unset !important;
    }

    .basedropdownlist .e-list-item {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basedropdownlist .e-list-item.e-active {
        background-color: var(--theme-color, #55AAAA) !important;
    }

    /*to make a rounded active selection to match pilllbl*/
    .basedropdownlist4.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
        border-radius: 24px;
    }

.basedropdownlist4.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-radius: 24px !important;
}

    /*for dropdown icon to center it with text in some cases*/
    .basedropdownlist4 .e-input-group-icon.e-ddl-icon.e-icons.e-ddl-disable-icon {
        margin-bottom: unset;
        font-size: 10px;
        font-weight: 600;
    }

    /*for dropdown icon when set to disabled, to set background to not a color in some cases*/
    .basedropdownlist4.e-disabled .e-input-group-icon.e-ddl-icon.e-icons.e-ddl-disable-icon {
        background: unset;
    }

/*for dropdown icon when set to disabled, to set background to not a color in some cases*/
.basedropdownlist5.e-disabled .e-input-group-icon.e-ddl-icon.e-icons.e-ddl-disable-icon {
    background: unset;
}

.basedropdownlist2 {
    align-items: center;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: var(--font-medium, 14px) !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    color: var(--text-color-a, #828282) !important;
    margin-bottom: unset !important;
    background-color: transparent !important;
}

    .basedropdownlist2 .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: var(--font-medium, 14px) !important;
        line-height: 20px !important;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: var(--text-color-a, #828282) !important;
        margin-bottom: unset !important;
    }

    .basedropdownlist2 .e-list-item {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basedropdownlist2 .e-list-item.e-active {
        background-color: var(--theme-color, #55AAAA) !important;
    }

    .basedropdownlist2 .e-content.e-dropdownbase.e-nodata {
        background-color: var(--bg-color-a, #FFFFFF);
    }

.basedropdownlist22 .e-input {
    background-color: var(--bg-color-a, #FFFFFF) !important;
}

.basedropdownlist2b {
    background-color: var(--bg-color-a, #FFFFFF) !important;
}

    .basedropdownlist2b.e-disabled {
        background-color: var(--hover-color-a, #e9ecef) !important;
    }

.basedropdownlist3 {
    align-items: center;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    color: var(--text-color-a, #828282) !important;
    margin-bottom: unset !important;
}

    .basedropdownlist3 .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: var(--font-medium, 14px) !important;
        line-height: 20px !important;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: var(--text-color-a, #828282) !important;
        margin-bottom: unset !important;
    }

    .basedropdownlist3 .e-list-item {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basedropdownlist3 .e-list-item.e-active {
        background-color: var(--theme-color, #55AAAA) !important;
    }

    .basedropdownlistselected.e-popup-open .e-dropdownbase .e-list-parent .e-list-item.e-active {
        background-color: #e7ede6;
    }

.basedropdownlistrounded {
    /*border-radius: 20px !important;*/
    padding: 5px;
}

@media (max-width: 1000px) {
    .basedropdownlist-search {
        margin-top: 5px;
    }
}

.dropdownbaseparenta {
    /*max-width: 200px;*/
    max-width: 400px;
}
@media (max-width: 680px) {
    .dropdownbaseparenta {
        max-width: unset;
        /*following needed to show border of when dropdown is active*/
        width: 97%;
        margin-left: auto;
        margin-right: auto;
        /**/
    }
}

@media (max-width: 600px) {
    .dropdownbaseparent {
        /*width: 100%;*/
        max-width: unset;
        /*following needed to show border of when dropdown is active*/
        width: 97%;
        margin-left: auto;
        margin-right: auto;
        /**/
    }

    .dropdownbaseparentb {
        /*following needed to show border of when dropdown is active*/
        max-width: unset;
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        /**/
    }

    .dropdownbaseparent-m {
        margin-bottom: 10px;
    }
}

.basedropdownlistgrouped .e-dropdownbase .e-list-parent .e-list-group-item {
    border-top: 1px solid #d3d3d3;
    padding-top: 10px;
    margin-top: 10px;
    padding-left: 6px;
    min-height: 20px;
}

    .basedropdownlistgrouped .e-dropdownbase .e-list-parent .e-list-group-item .dropdown-group {
        font-weight: 700;
    }

.basedropdownlistmodal {
    border: 1px groove var(--theme-color, #55AAAA) !important;
}

.basedropdownlistmodal .e-input {
    max-width: 150px;
}

.basedropdownlist5.e-popup-open {
    border: 1px solid #dee2e6 !important;
}

@media (max-width: 600px) {
    .basedropdownlist .e-ddl-icon::before {
        font-size: 10px;
    }

    .basedropdownlist5 .e-ddl-icon::before {
        font-size: 10px;
    }
}

.basedropdownlistgrouped2 .e-dropdownbase .e-list-group-item {
    padding-top: 5px;
}

.basedropdownlistgrouped2 .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: 20px;
}

.basedropdownlist-chart {
    margin-top: 20px;
    margin-bottom: 20px !important;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px !important;
    line-height: 12px !important;
    letter-spacing: 0px !important;
}

    .basedropdownlist-chart .e-input {
        font-size: 12px !important;
        line-height: 12px !important;
        letter-spacing: 0px;
    }

.dark-mode .basedropdownlistinput {
    background-color: #282828 !important;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6) !important;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
}

.dark-mode .multiselectinput .e-dropdownbase.e-multiselect::placeholder {
    color: #fff;
}

.basedropdownlist-modaltopbar .e-input {
    color: var(--modal-top-bar-font-2-color, #828282) !important;
}

.marginrightdropdown2 {
    margin-right: 5px;
}

.marginleftdropdown2 {
    margin-left: 5px;
}

@media (max-width: 1200px) {
    .marginrightdropdown2 {
        margin-right: unset;
    }

    .marginleftdropdown2 {
        margin-left: unset;
    }
}

.dropdownquestion {
    color: #333333 !important;
}

.dark-mode .dropdownquestion {
    background: #282828 !important;
}

    .dropdownquestion.e-disabled {
        background: #e9ecef !important;
    }

    .dark-mode .dropdownquestion.e-disabled {
        background-color: #343a40 !important;
    }

.listviewfullwidthitems .e-list-item {
    width: 100%;
}
/*#endregion */


/*#region Base Radiobutton*/
.radiobuttonclass {
    margin: 10px;
}

    .radiobuttonclass .e-radio + label .e-label {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: 500 !important; /*normal !important;*/
        font-size: var(--font-medium, 14px) !important;
        line-height: 20px !important;
        letter-spacing: var(--letter-spacing, 0.25px) !important;
        color: var(--text-color-a, #828282) !important; /*var(--text-color-z, #000000) !important;*/
    }

    .radiobuttonclass .e-radio:checked + .e-success::after { /* csslint allow: adjoining-classes */
        border-color: var(--theme-color, #55AAAA) !important;
        background-color: var(--theme-color, #55AAAA) !important;
    }

.radiobuttonclass .e-radio:checked:focus + .e-success::after, .e-radio:checked + .e-success:hover::after { /* csslint allow: adjoining-classes */
    border-color: var(--theme-color, #55AAAA) !important;
    background-color: var(--theme-color, #55AAAA) !important;
}

.radiobuttonclass .e-radio:checked + .e-success::before {
    border-color: #689f38 !important;
}

.radiobuttonclass .e-radio:checked:focus + .e-success::before, .e-radio:checked + .e-success:hover::before { /* csslint allow: adjoining-classes */
    border-color: #449d44 !important;
}

.radiobuttonclass .e-radio + .e-success:hover::before {
    border-color: #b1afaf !important;
}

.radiobuttonclass .e-radio:checked + label::after {
    border-color: var(--theme-color, #55AAAA) !important;
    background-color: var(--theme-color, #55AAAA) !important;
}

.radiobuttonclass .e-radio:checked:focus + label::after {
    border-color: var(--theme-color, #55AAAA) !important;
    background-color: var(--theme-color, #55AAAA) !important;
}

.radiobuttonclass .e-radio:checked + label::before {
    border-color: var(--theme-color, #55AAAA) !important;
    border-width: thin !important;
    background-color: transparent !important;
}

    .radiobuttonclass-small .e-radio + label .e-label {
        font-size: var(--font-small, 12px) !important;
    }

.radiobuttonclass-square label {
    width: 100%;
}

.radiobuttonclass-square .e-radio + label::before {
    background-color: #fff;
    border-color: #ced4da;
    border-radius: 0%;
    top: 2px;
}

.radiobuttonclass-square .e-radio:checked + label::after {
    border-radius: 0%;
    height: 14px;
    top: 2px;
    left: 0px;
    width: 13px;
}
/*#endregion */


/*#region Base Checkbox*/
.checkboxclass {
    margin-left: 10px !important;
    margin-bottom: 20px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    color: #000000 !important;
}

    .checkboxclass .e-frame + .e-label {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: 500 !important; /*normal !important;*/
        font-size: 14px !important;
        line-height: 20px !important;
        letter-spacing: var(--letter-spacing, 0.25px) !important;
        color: var(--text-color-a, #828282);
    }

    .checkboxclass .e-frame.e-check {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
    }

    .checkboxclass:hover .e-frame.e-check {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
    }

.checkboxclass-nobtm {
    margin-bottom: unset !important;
}

.checkboxclass-custom {
    margin-left: 20px !important;
}

.checkboxclass-ml-auto {
    margin-left: auto !important;
}

.checkboxclass-ml-0 {
    margin-left: 0px !important;
}

.checkboxclass .e-frame + .e-label {
    max-width: unset !important; /*important needed due to syncfusion bootstrap.css setting a max-width itself*/
}

.checkboxclass-small .e-frame + .e-label {
    font-size: 12px !important;
}

.checkboxclass-left .e-label {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
}

.checkboxclass-white .e-label {
    color: white !important;
}

@media (max-width: 600px) {
    .checkboxclass .e-frame + .e-label {
        font-size: 12px !important;
        line-height: 14px !important;
    }

    .checkboxsmallwidth {
        margin-left: 0px !important;
    }
}

.checkbox-labelhidden .e-label {
    visibility: hidden;
}

.checkbox-scheduler {
    line-height: unset !important;
    margin-left: unset !important;
}

.checkbox-scheduler:hover {
    background: rgba(0, 0, 0, .056) !important;
}

.checkboxclass-modaltopbar .e-frame + .e-label {
    color: var(--modal-top-bar-font-color, #000000);
}
/*#endregion */


/*#region Base Side Navigation Item*/
.nav-listing-itemd {
    border: 1px solid #E0E0E0;
    height: 60px;
    background-color: var(--bg-color-a, #FFFFFF);
}

    .nav-listing-itemd:hover {
        background-color: var(--hover-color, #F2F4F6) !important;
    }

.nav-listing-itemdd {
    border-bottom: 2px solid var(--bg-color-b, #E0E0E0);
}

    .nav-listing-itemdd.active {
        border-bottom: 2px solid var(--text-color, #333333);
    }

    .nav-listing-itemdd:hover {
        background-color: var(--hover-color, #F2F4F6) !important;
    }

.nav-listing-itemf {
    font-size: 13px;
    font-weight: 500;
}

    .nav-listing-itemf .me-auto {
        font-weight: 500;
    }

.nav-listing-item-g {
    font-size: 14px;
    font-weight: 500;
}

.nav-listing-item-b {
    color: #000000;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

    .nav-listing-item-b .active {
        color: var(--theme-color, #55AAAA) !important;
    }

    .nav-listing-item-b .active {
        color: var(--theme-color, #55AAAA) !important;
    }

    .nav-listing-item-b.active {
        color: var(--theme-color, #55AAAA) !important;
        font-weight: 600;
    }

    /*.nav-listing-item-b active {
        color: #55AAAA !important;
    }*/

.nav-list-item-b-child {
    display: flex;
    position: relative;
    padding: .5rem 1rem .5rem 0;
}

.nav-listing-item-bb {
    font-size: 14px;
}

@media (max-width: 600px) {
    .nav-listing-item-bb {
        font-size: 12px;
        padding: .5rem 0.5rem;
    }
}

.nav-listing-item-reduce {
    color: transparent !important;
}

.sidebar-parent .e-sidebar.e-dock.e-close .dock .sidebar-dock-ul .nav-listing-item-reduce {
    color: var(--text-color-a, #828282) !important;
}

.nav-listing-item-reduce:hover {
    color: var(--text-color-a, #828282) !important;
}
/*#endregion */


/*#region Base Side Navigation Item Style Two*/
.nav-listing-item {
    color: #615F5F;
}

    .nav-listing-item.a:active {
        background-color: var(--theme-color, #55AAAA) !important;
        opacity: 0.12;
        border-radius: 2px;
        color: #333333;
    }

.nav-listing-item {
    height: 39px !important;
    margin-bottom: 10px;
    border: none !important;
}

.nav-listing-item-a {
    color: #000000;
}

    .nav-listing-item-a.active {
        background: var(--theme-color-12, #55AAAA1F); /*background: rgba(85, 170, 170, .12);*/
        border-radius: 2px;
        color: var(--text-color, #333333) !important;
    }

    .accessible-mode .nav-listing-item-a.active {
        background: rgba(0, 0, 255, .12);
    }

    .dark-mode .nav-listing-item-a.active {
        background: var(--theme-color-22, #55AAAA38); /*background: rgba(85, 170, 170, .22);*/
    }

    .nav-listing-item-a:hover {
        /*background-color: #fff;*/
        background-color: var(--theme-color-08, #55AAAA14); /*background-color: rgba(85, 170, 170, .08);*/
    }

    .accessible-mode .nav-listing-item-a:hover {
        background: rgba(0, 0, 255, .08);
    }

.nav-listing-item-a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}
/*#endregion */


/*#region Badge And Card Badge*/
.browse__badge {
    background-color: var(--theme-color, var(--theme-color, #55AAAA));
    border-radius: 2px;
    color: white;
    padding: 1px 4px;
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.browsecard__badge {
    background-color: var(--theme-color, #55AAAA);
    border-radius: 2px;
    color: white;
    padding: 1px 4px;
    font-size: 10px;
    position: absolute;
    top: -8px;
    right: 6px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.adminhub__badge {
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 16px !important;
    position: absolute;
    top: -4px;
    right: 6px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.profile__badge {
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 16px !important;
    top: -18px;
    right: 15px;
    position: relative;
    color: firebrick;
}

.badge_notif_circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--theme-color, #55AAAA);
    position: relative;
    top: -5px;
}

.valueWithNotif {
    position: relative;
    display: flex !important;
    padding-right: 12px; /*this is to offset the badge notif*/
    /**/
    /*this is needed to show the notif dot without cutoff when long text*/
    padding-top: 6px;
    padding-bottom: 6px;
    /**/
}

.badge_notif_circle2 {
    position: absolute;
    top: 0;
    right: 0;
}

.valueWithNotif2 {
    justify-content: center;
    padding-left: 12px;
    /**/
    /*to offset change above*/
    padding-top: unset;
    padding-bottom: unset;
    /**/
}

.grid-badge_notif_circle {
    padding-right: 10px; /*to handle when text pushes dot too far right*/
}
/*#endregion */


/*#region Autocomplete With Search Icon*/
.search-autocomplete {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: var(--font-medium, 14px) !important;
    line-height: 17px !important;
    letter-spacing: var(--letter-spacing-e, 0.05em) !important;
}

    .search-autocomplete .e-autocomplete {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: var(--font-medium, 14px) !important;
        line-height: 17px !important;
        letter-spacing: var(--letter-spacing-e, 0.05em) !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
/*#endregion */


.filtertypelbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color-a, #828282);
    margin-bottom: unset;
}


.input-grow {
    height: 35px;
    min-height: 35px;
}

.dual-header-wrap {
    white-space: normal;
}

/*#region Default Toast*/
.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: white !important;
    font-size: 18px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
}

    .e-toast-container .e-toast .e-toast-message .e-toast-content:hover {
        color: white !important;
        font-size: 18px !important;
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: 500 !important;
        letter-spacing: var(--letter-spacing, 0.25px) !important;
    }

    .e-toast-container .e-toast .e-toast-message .e-toast-content:active {
        color: white !important;
        font-size: 18px !important;
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-style: normal !important;
        font-weight: 500 !important;
        letter-spacing: var(--letter-spacing, 0.25px) !important;
    }

.e-toast-container .e-toast {
    background-color: #333333 !important;
}

    .e-toast-container .e-toast:hover {
        background-color: #333333 !important;
    }

    .e-toast-container .e-toast:active {
        background-color: #333333 !important;
    }

.default_toast {
    width: auto !important;
    color: white !important;
    font-size: 16px !important;
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: var(--letter-spacing, 0.25px) !important;
    background-color: #333333 !important;
    text-align: center !important;
}
/*#endregion */


/*#region Fonts*/
.ff-theme {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}

.ff-ital {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: italic;
}

.ff-norm {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
}

.ff-norm-500 {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.ff-norm-600 {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.ff-norm-600-20 {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.ff-norm-500-5em {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing-e, 0.05em);
}

.fs-10i {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px;
}

.fs-11i {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px;
}

.fs-12i {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-20 {
    font-size: 20px;
}

.fs-20i {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px;
}

.fw-b {
    font-weight: bold;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fs-medium {
    font-size: var(--font-medium, 14px);
}

.fs-si {
    font-size: small !important;
}

.lh-14 {
    line-height: 14px;
}

.lh-18 {
    line-height: 18px;
}
/*#endregion */



/*#region Skills*/
.skillicon {
    color: #FFFFFF;
    font-size: 14px !important;
}

.accessible-mode .skillicon-clear {
    color: #333333;
}

.uskillsbox {
    padding: 2px 8px 2px 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.uskillsboxx {
    border-radius: 4px;
    padding: 2px 10px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.skilllbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #FFFFFF;
    margin-bottom: unset !important;
}

.skilllbl2 {
    color: var(--text-color, #333333);
}

.skilllbl-ml {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #FFFFFF;
    margin-bottom: unset !important;
    margin-left: 5px;
}

.accessible-mode .skilllbl-missing {
    color: #333333;
}

.noskillslbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #828282;
}
/*#endregion */



/*#region No Applicants*/
.nomessagessection {
    height: 447px;
}

.noapplicant {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium-x, 16px);
    line-height: 20px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
}

.appearhere {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
}

.noapplicanta {
    color: #737373;
}

.appearherea {
    color: #737373;
}

@media (max-width: 450px) {
    .noapplicant {
        padding-left: 10px;
        padding-right: 10px;
    }

    .appearhere {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 600px) {
    .happybunchchat {
        object-fit: unset;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .appearhere2 {
        padding-left: 50px;
        padding-right: 50px;
    }
}
/*#endregion */


/*#region Base Save/Create Button*/
.saveprofilebtn {
    /*background-color: #333333 !important;*/
    border-radius: 2px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600; /*500;*/
    font-size: var(--font-medium, 14px);
    line-height: 16px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    /*color: #FFFFFF !important;*/
    /*padding: 15px 20px;*/
    border: 1px solid var(--text-color, #333333);
    /**/
    padding: 8px 10px;
    color: var(--text-color, #333333) !important;
    background-color: var(--main-bg-color, #F6F7F7) !important;
}

    .saveprofilebtn:hover {
        /*background-color: #111111 !important;*/
        /**/
        background-color: #9F9F9F !important;
        color: var(--bg-color-a, #FFF) !important;
    }

    .saveprofilebtn:focus {
        /*background-color: #111111 !important;*/
        /**/
        background-color: #9F9F9F !important;
    }

.createlistingbtn {
    /*margin-top: 33px;*/
    background: #333333;
    border-radius: 2px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-small, 12px); /*font-size: var(--font-medium, 14px);*/
    line-height: 16px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: #FFFFFF;
    padding: 10px 15px; /*padding: 14px 17.5px;*/
    border: 1px solid #333333;
}

    .createlistingbtn:hover {
        background-color: #111111;
    }

.commonsavebtn {
    margin-top: 33px;
    /*background: #333333;*/
    border-radius: 2px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600; /*500;*/
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    /*color: #FFFFFF;*/
    /*padding: 14px 17.5px;*/
    border: 1px solid #333333;
    /**/
    padding: 8px 10px;
    color: #333;
    background: #F6F6F7;
}

    .commonsavebtn:hover {
        /*background-color: #111111;*/
        /**/
        background-color: #9F9F9F;
        color: #fff;
    }

@media (max-width: 600px) {
    .createlistingbtn {
        padding: 10px 12px;
        margin-top: 10px;
    }

    .saveprofilebtn {
        padding: 10px 14px;
    }
}

.commonthemebtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    background: var(--theme-color, #55AAAA);
    color: white;
    border-radius: 2px;
    font-size: 12px !important;
    padding: 10px 15px !important;
}

    .commonthemebtn:hover {
        background-color: #9F9F9F;
    }

.commoncancelbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    background: var(--btn-color-bg, #FFFFFF);
    color: var(--text-color, #333333);
    border-radius: 2px;
    font-size: 12px !important;
    padding: 10px 15px !important;
}

    .commoncancelbtn:hover {
        background-color: #9F9F9F;
    }

.saveprogressbtn-icon {
    margin-left: -0.3em !important;
}

.saveprogressbtn-icon:before {
    content: '\e161';
}

.saveprogressbtn {
    padding: 6px 10px !important;
}

.saveprogressbtn .e-btn-content {
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    font-size: 12px;
    border-radius: unset;
}


.saveprogressbtn.e-progress-active .saveprogressbtn-icon {
    display: none !important;
}

.saveprogressbtn .e-spinner-pane.e-spinner.e-spin-show {
    display: flex;
}

.saveprogressbtn:focus {
    color: var(--bg-color-a, #FFF) !important;
}
/*#endregion */


/*#region Dropdown Style Two: For See Mores/ Etc*/
.dropdownbtnlist {
    background-color: transparent !important;
    border: none;
    display: flex;
    align-items: center;
    color: var(--text-color-a, #828282);
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
}

.dark-mode .dropdownbtnlist::after {
    visibility: hidden;
}

    .dropdownbtnlist:hover {
        box-shadow: none;
        opacity: 0.75;
    }

    .dropdownbtnlist:focus {
        box-shadow: none;
        border: 1px solid #828282;
    }

    .dropdownbtnlist-alt:focus {
        border: unset;
        border-bottom: unset;
    }

    .dropdownbtnlist-alt:hover {
        border: unset;
        border-bottom: 1px solid #828282;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .dropdownbtnlist:active {
        box-shadow: none;
    }
/*#endregion */


/*#region Base Input With Icon*/
.inputWithIcon {
    position: relative;
}

    .inputWithIcon i {
        position: absolute;
        left: 8px;
        top: 5px;
    }

    .inputWithIcon.inputIconBg i {
        background-color: #aaa;
        color: #fff;
        padding: 9px 4px;
        border-radius: 4px 0 0 4px;
    }

.input-icon-box {
    padding-left: 40px;
    padding-right: 40px;
}

.charRemLbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--off-gray, #BDBDBD);
    position: absolute;
    right: 10px;
    bottom: 0px; /*bottom: -7px;*/
}

@media (max-width: 600px) {
    .inputWithIcon i {
        top: 7px;
        font-size: 18px;
    }
}
/*#endregion */


/*#region Icons*/
.icon-silver {
    color: #BDBDBD;
}

.accessible-mode .icon-silver {
    color: #737373;
}

.icon-red {
    color: red;
}

@media (max-width: 600px) {
    .icon-v {
        font-size: 18px !important;
    }

    .icon-vA {
        font-size: 18px !important;
        padding-left: 3px;
    }

    .icon-vB {
        font-size: 18px !important;
        padding-right: 3px;
    }
}
/*#endregion */


/*#region Dropdown Collapse Type And Count*/
.dd-collapse-basetypelbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
    margin-bottom: unset !important;
}

.dd-collapse-numbericon {
    background: var(--bg-color-b, #E0E0E0);
    border-radius: 20px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-small-x, 10px);
    line-height: 12px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
    padding: 2px 6px;
    margin-bottom: unset !important;
    margin-left: 5px;
}

.accessible-mode .dd-collapse-numbericon {
    color: #636363;
}

.dark-mode {
    color: var(--text-color-a, #828282);
}

.dd-collapse-nonelbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    /* Gray 4 */
    color: #BDBDBD;
    margin-left: 10px;
}
/*#endregion */


/*#region Word Wraps And Breaks*/
.wordwrapword {
    word-wrap: break-word;
}

.wordbreakall {
    word-break: break-all;
}

.wordbreakword {
    word-break: break-word;
}

.td-wordbreakall {
    word-break: break-all;
}

.overflowbreakword {
    overflow-wrap: break-word;
}

.overflowhidden {
    overflow: hidden;
}

.overflowyscroll {
    overflow-y: scroll;
}

.overflowauto {
    overflow: auto;
}

.whitespacenormal {
    white-space: normal;
}

.whitespacenowrap {
    white-space: nowrap;
}

.whitespacepre {
    white-space: pre;
}

.textoverflow-ellipsis {
    text-overflow: ellipsis;
}
/*#endregion */


/*#region Top Bar Overlay*/
.topbarfontcolor {
    color: var(--top-bar-font-color, #828282);
}

.nav-item:hover .topbarfontcolor {
    /*color: var(--text-color-a, #828282);*/
    color: var(--hover-color-top-text, #828282);
}

.headeritem:hover .topbarfontcolor {
    color: var(--text-color-a, #828282);
}

.sfmenu-groups:hover .topbarfontcolor {
    color: var(--text-color-a, #828282);
}

.sfmenu-groups .e-menu-item.e-menu-caret-icon.e-selected .topbarfontcolor {
    /*color: var(--text-color-a, #828282);*/
    color: var(--hover-color-top-text, #828282);
}

.dark-mode .topbarfontcolor {
    color: var(--text-color-a, #828282);
}

.lightalt-mode .topbarfontcolor {
    color: var(--text-color-a, #828282);
}

.topbarfontcolor2 {
    color: var(--top-bar-dropdown-font-color, #333333);
}

.dark-mode .topbarfontcolor2 {
    color: var(--text-color, #333333);
}

.lightalt-mode .topbarfontcolor2 {
    color: var(--text-color, #333333);
}

.topbariconcolor {
    color: var(--top-bar-icon-color, #BDBDBD);
}

.headernav:hover .topbariconcolor {
    color: var(--hover-color-top-text, #828282);
}

.dark-mode .topbariconcolor {
    color: var(--off-gray, #BDBDBD);
}

.lightalt-mode .topbariconcolor {
    color: var(--off-gray, #BDBDBD);
}

.topnav.active .topbariconcolor {
    color: var(--top-bar-dropdown-font-color, #333333);
}

.headernav:hover .topnav.active .topbariconcolor {
    color: var(--hover-color-top-text, #828282);
}

.dark-mode .topnav.active .topbariconcolor {
    color: var(--text-color, #333333);
}

.lightalt-mode .topnav.active .topbariconcolor {
    color: var(--text-color, #333333);
}

.topbaroverlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 86px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--modal-top-bar, #FFFFFF);
    z-index: 1031;
    position: fixed;
}

.topbarheaderlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500; /*600;*/
    font-size: 20px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color-z, #000000);
}

.topbarlastsavedlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
    margin-right: 15px;
}

.topbardraftlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px !important;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #000000;
    background: #C4C4C4;
    border-radius: 40px;
    padding: 0px 10px;
}

.topbarpartnerlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11px !important;
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #000000;
    background: #C4C4C4;
    border-radius: 20px;
    padding: 0px 10px;
    margin-left: 5px;
}

.topbarexitbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
    background: transparent;
    border: none;
    margin-left: 25px;
}

    .topbarexitbtn:hover {
        opacity: 0.75;
    }

.modaltopbarfontcolor {
    color: var(--modal-top-bar-font-color, #000000);
}

.modaltopbarfontcolor2 {
    color: var(--modal-top-bar-font-2-color, #828282);
}

.modaltopbarfontcolor3 {
    color: var(--modal-top-bar-font-3-color, #333333);
}

@media (max-width: 600px) {
    .topbarheaderlbl {
        font-size: 14px;
        line-height: 14px;
    }

    .topbarexitbtnv2 {
        align-self: start;
        margin-left: unset;
    }
}
/*#endregion */


/*#region Bottom Bar (Footer) Overlay*/
.footeroverlay {
    background: var(--modal-top-bar, #FFFFFF);
    position: fixed; /*position: sticky;*/
    bottom: 0;
    left: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-top: 4px solid #E4E4E4;
}

.sidebar-parent .topbaroverlayv2 {
    margin-top: -85px;
}

.sidebar-parent .footeroverlayv2 {
    margin-left: unset;
    margin-right: unset;
    width: 100%;
    position: sticky;
}

.footercancelbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    padding: 12px 24px;
    margin: 20px;
    font-size: var(--font-medium-x, 16px);
}

.dark-mode .footercancelbtn {
    color: white;
}

    .footercancelbtn:hover {
        opacity: 0.75;
    }

    .footercancelbtn:focus {
        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #333333;
        border: 1px solid #333333;
    }

.footersavebtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    background: #FFFFFF;
    border: 1px solid #333333;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 12px 24px;
    margin: 20px;
    font-size: var(--font-medium-x, 16px);
}

    .footersavebtn:hover {
        background-color: #f2f4f6;
        border: 1px solid #333333;
    }

    .footersavebtn:focus {
        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #333333;
    }

.footersubmitbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    background: var(--theme-color, #55AAAA);
    color: white;
    border-radius: 2px;
    padding: 12px 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: var(--font-medium-x, 16px);
}

    .footersubmitbtn:focus {
        /*WAY 1*/
        border: 2px solid #FFFFFF !important;
        outline: 2px solid var(--theme-color, #55AAAA) !important;
        /* outline doesnt support round corners */
        border-radius: 0;
        color: white !important;
        background-color: var(--theme-color, #55AAAA) !important;
    }

    .footersubmitbtn:hover {
        background-color: var(--theme-color-s-light, #82C0C0) !important;
    }

.footerrejectbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    background: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 12px 24px;
    margin: 20px;
}

    .footerrejectbtn:focus {
        /*WAY 1*/
        border: 2px solid #FFFFFF !important;
        outline: 2px solid #000000 !important;
        /* outline doesnt support round corners */
        border-radius: 0;
    }

.viewhistorybtn {
    border: 1px solid var(--text-color, #333333);
    /*border-radius: 2px;*/
    background-color: var(--bg-color, #FFFFFF);
    font-size: 14px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-weight: 400; /*500;*/
    color: var(--text-color, #333333);
    border-radius: 5px;
    padding: 5px 10px;
}

    .viewhistorybtn:hover {
        background-color: var(--hover-color, #F2F4F6);
    }

.history-icon {
    color: var(--text-color, #333333);
    font-size: 24px;
}

.bottombarbtnsec {
    justify-content: end;
}

@media (max-width: 600px) {
    .bottombarbtnsec {
        justify-content: space-between;
    }

    .viewhistorybtnlbl {
        display: none;
    }

    .footerbtnactivity {
        /*padding: 8px 20px;
        margin: 10px 2px;
        font-size: 12px;*/
        padding: 6px 12px;
        margin: 10px;
        font-size: 12px;
    }

    .footersavebtn {
        padding: 10px 14px;
        margin: 10px 2px;
    }

    .footersubmitbtn {
        padding: 10px 14px;
        margin: 10px 2px;
    }

    .footercancelbtn {
        padding: 10px 14px;
        margin: 10px 2px;
    }

    .footerrejectbtn {
        padding: 10px 14px;
        margin: 10px 2px;
    }
}
/*#endregion */


/*#region Base Rich Text Editor*/
.baserichtexteditor {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

    .baserichtexteditor .e-toolbar .e-tbar-btn {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .baserichtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-caret, .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-caret {
        font-size: 8px;
    }

.baserte-minheight .e-rte-container .e-rte-content {
    min-height: 300px;
}

.dark-mode .baserichtexteditorinput .e-rte-content {
    background-color: #282828 !important;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6) !important;
}

.richtexteditor-par-nocss .e-rte-table {
    margin-bottom: unset !important;
}

    .richtexteditor-par-nocss .e-rte-table td, .e-rte-table th {
        border: unset;/* !important;*/
        padding: unset;/* !important;*/
    }
/*#endregion */


/*#region Base Sf Grid*/
.basegrid-width {
    width: calc(100vw - 30rem);
}

@media (max-width: 600px) {
    .basegrid-width {
        width: calc(100vw - 3rem);
    }

    .basegrid-smallwidth {
        width: calc(100vw - 3rem);
    }
}

.matchbasegrid-width {
    width: calc(100vw - 30rem);
}

@media (max-width: 600px) {
    .matchbasegrid-width {
        width: calc(100vw - 3rem);
    }
}

.basegrid-width-tab {
    width: calc(100vw - 50rem);
}

@media (max-width: 1600px) {
    .basegrid-width-tab {
        width: calc(100vw - 25rem);
    }
}

.basegridnamelbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: large;
    letter-spacing: var(--letter-spacing-x, 0.5px);
    color: var(--text-color-z, #000000);
    margin-bottom: unset;
}

.basegridcoloricon {
    height: 20px;
    width: 20px;
    padding: 5px;
}

.basegridcolornamelbl {
    border-radius: 24px;
    padding: 2px 12px;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    /*margin-bottom: unset;*/
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #333333;
    border: none;
    /*height: 23px;*/
}

.basegridcolornametitlelbl {
    font-weight: 600;
    font-size: 13px; /*14px;*/
}

.basegrid-avatar-container {
    background: #F6F7F7;
    width: 32px;
    height: 32px;
    border-radius: 16px;
}

.basegrid-avatar-img {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #E0E0E0;
}

.basegrid-banner-pic {
    width: 268px;
    height: 100px;
    background-size: contain;
}

.basegrid-nobd .e-grid {
    border: transparent;
}

    .basegrid-nobd .e-grid .e-gridheader {
        border-top: transparent;
    }

.basegrid-nobd .e-rhandler.e-rcursor {
    border-right: transparent !important;
}

    .basegrid-nobd .e-rhandler.e-rcursor:hover {
        border-right: 1px solid #dee2e6 !important;
    }

.basegrid-exp .e-grid .e-toolbar {
    background: transparent !important;
    border: unset !important;
}

.basegrid-exp .e-toolbar .e-toolbar-item.e-overlay {
    display: none;
}

.grideditheaderlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}

.grideditlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-weight: 600;
}

.gridpendingbtn {
    font-size: 14px;
    font-weight: 700;
    border: unset;
    background: unset;
    padding: unset;
}

.gridpendingcolor {
    color: #707070;
}

.dark-mode .gridpendingcolor {
    color: #FFF;
}

.grideditlblnobottom {
    margin-bottom: unset;
}

.grid-uploader-spinner {
    padding-left:40px;
    padding-right: 40px;
}

.grid-aggregate-lbl {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    white-space: normal;
}

.grid-icon {
    width: 30px; /*width: 40px;*/
}

.row-bg-readonly {
    background-color: #F8F8F9;
}

.dark-mode .row-bg-readonly {
    background-color: #171717;
}

.row-series-recurrence .e-detailrowcollapse {
    pointer-events: none;
}

.row-series-recurrence .e-detailrowcollapse .e-icons {
    display: none;
}

.grid-checkboxclass {
    min-height: 32px;
    padding: 0 8px;
    display: flex !important;
    align-items: center;
    margin-left: 0px !important;
}

    .grid-checkboxclass .e-frame + .e-label {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #212529 !important;
    }

.dark-mode .grid-checkboxclass .e-frame + .e-label {
    color: #fff !important;
}

.grid-checkboxclass:hover {
    background: #5c636a;
    border-color: #6c757d;
    border-style: solid;
    border-width: 0;
    border-radius: 4px;
}

    .grid-checkboxclass:hover .e-label {
        color: #fff !important;
    }

.dropdownsettingstoolbarmenu:hover {
    background: #5c636a !important;
    border-color: #6c757d;
    border-style: solid;
    border-width: 0;
    border-radius: 4px;
    color: #fff !important;
}

.dropdownsettingstoolbarmenu.e-dropdown-popup {
    color: #828282 !important;
}

.dark-mode .grid-checkboxclass:hover {
    background: #5c636a;
    border-color: #adb5bd;
    border-style: solid;
    border-width: 0;
    border-radius: 4px;
}

.dark-mode .dropdownsettingstoolbarmenu:hover {
    background: #5c636a !important;
    border-color: #adb5bd;
    border-style: solid;
    border-width: 0;
    border-radius: 4px;
    color: #fff !important;
}

.dark-mode .dropdownsettingstoolbarmenu.e-dropdown-popup {
    color: #fff !important;
}

.grid-random-btn {
    /*padding: 0;*/
    /*border: unset;*/
    padding: 3px;
    border: 1px solid #ced4da;
    background-color: transparent;
}

.grid-refresh-btn {
    background-color: transparent !important;
    border: unset !important;
    color: var(--text-color-a, #828282);
}

    .grid-refresh-btn:hover {
        background-color: var(--hover-color, #F2F4F6) !important;
    }

.grid-random-icon {
    vertical-align: middle;
    font-size: 21px !important;
    color: var(--text-color-a, #828282);
}

@media (max-width: 2200px) {
    .grid-smallwidthv3-120 {
        width: 120px !important;
    }
}

@media (max-width: 1550px) {
    .grid-smallwidthv2-120 {
        width: 120px !important;
    }
}

@media (max-width: 1200px) {
    .grid-smallwidth-120 {
        width: 120px !important;
    }

    .grid-smallwidth-200 {
        width: 200px !important;
    }
}

.basegrid .e-gridcontent {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: #333333;
}

.basegrid .e-headercontent {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.basegrid .e-parentmsgbar {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
}

.basegrid .e-grid .e-groupcaption {
    line-height: 18px;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
    word-wrap: break-word;
}

.basegrid .e-grid .e-toolbar .e-search {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
}

.basegrid .e-grid .e-toolbar .e-searchinput {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
}

.basegrid .e-pagercontainer .e-numericcontainer .e-currentitem {
    background: var(--theme-color, #55AAAA);
}

.basegrid .e-pagesizes {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
}

    .basegrid .e-pagesizes .e-pagerdropdown .e-input-group {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-style: normal;
        font-weight: 500;
    }

.basegrid .grid-pilllbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    padding: 2px 12px;
    font-size: 13px;
}

    .basegrid .grid-pilllbl:disabled {
        opacity: 0.5;
    }

.e-edit-dialog .grid-pilllbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    padding: 2px 12px;
    font-size: 13px;
}

.basegrid .grid-pilllbl-small {
    border-radius: 24px;
    color: #333333;
    border: none;
    padding: 2px 12px;
    font-size: 11px;
    border: 1px solid black;
    margin-left: 5px;
    line-height: 11px;
}

.basegrid .grid-pillbtn {
    line-height: 21px;
    font-size: 11px;
    font-weight: 500;
}

.basegrid .grid-ffbtn {
    border: none;
    background: transparent;
}

.basegrid .grid-activelbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    /*height: 23px;*/
    background-color: #BFF3E7;
    padding: 2px 12px;
    font-size: 13px;
}

.basegrid .grid-pendinglbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    height: 23px;
    background-color: #F0F3BF;
    /*background-color: #BFF3E7;*/
    padding: 2px 12px;
    font-size: 13px;
}

.basegrid .grid-semiactivelbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    /* height: 23px;*/
    background-color: #F0C999;
    padding: 2px 12px;
    font-size: 13px;
}

.basegrid .msgbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #828282;
    letter-spacing: var(--letter-spacing, 0.25px);
    border: 0.75px solid #ced4da;
}

.basegrid .grid-rejectedlbl {
    border-radius: 24px;
    color: #333333;
    border: none;
    /*height: 23px;*/
    background-color: #FFCBCE;
    padding: 2px 12px;
    font-size: 13px;
}

.basegrid .lowcountlbl {
    padding: 5px;
    border-radius: 5px;
    background-color: #c5e0b4;
}

.dark-mode .basegrid .lowcountlbl {
    background-color: #cfb4e0;
}

.basegrid .mediumcountlbl {
    padding: 5px;
    border-radius: 5px;
    background-color: #fbe5d6;
}

.dark-mode .basegrid .mediumcountlbl {
    background-color: #d6ecfb;
}

.basegrid .highcountlbl {
    padding: 5px;
    border-radius: 5px;
    background-color: #c00000;
    color: white;
}

.dark-mode .basegrid .highcountlbl {
    background-color: #00c0c0;
}

.basegrid .grid-cell-aligntop {
    vertical-align: top !important;
    padding-top: 10px !important;
}

.grid-toolbar-custom-switch-title {
    background: var(--text-color-z, #000000) !important;
}

    .grid-toolbar-custom-switch-title .e-btn {
        background: var(--text-color-z, #000000) !important;
    }

        .grid-toolbar-custom-switch-title .e-btn .e-tbar-btn-text {
            color: var(--white, #fff) !important;
        }

.grid-toolbar-custom-cursor-default {
    cursor: default !important;
}

    .grid-toolbar-custom-cursor-default .e-btn {
        cursor: default !important;
    }

.grid-toolbar-custom-notif .e-btn .e-tbar-btn-text:after {
    content: "\A";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    background-color: var(--theme-color, var(--theme-color, #55AAAA));
}

@media (max-width: 600px) {
    .basegrid .e-grid .e-groupcaption {
        font-size: 12px;
    }

    .basegrid .e-grid .e-summarycell {
        font-size: 12px;
    }

    .basegrid .e-icon-gdownarrow::before {
        font-size: 12px;
    }

    .basegrid .e-headercelldiv .e-headertext {
        font-size: 12px;
    }

    .basegrid .e-gridcontent .e-rowcell {
        font-size: 12px;
    }

    .basegrid .e-grid .e-toolbar .e-toolbar-item .e-btn .e-tbar-btn-text {
        font-size: 12px;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper .e-label {
        font-size: 12px;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-grid-filter-menu .e-menu-item {
        font-size: 12px;
    }

    .basegrid .e-excelfilter.e-bigger .e-contextmenu-container ul li {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-size: 12px;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-input {
        font-size: 12px;
    }
}

.basegrid .e-grid .e-popup .e-popup-open {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
}

.basegrid .e-grid .e-popup.e-popup-open {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
}

.basegrid .e-grid .e-popup.e-popup-open.e-dialog .e-dlg-header {
    font-size: 13px;
}

.basegrid .e-rowcell.e-gridchkbox.e-selectionbackground.e-active .e-checkbox-wrapper.e-css .e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.basegrid .e-headercelldiv.e-headerchkcelldiv .e-checkbox-wrapper.e-css .e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.basegrid .e-headercelldiv.e-headerchkcelldiv .e-checkbox-wrapper.e-css .e-stop {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.basegrid .e-headercontent .e-headercell .e-checkbox-wrapper.e-css {
    vertical-align: middle;
}

.basegrid .e-headercontent .e-headercell .e-headercelldiv.e-headerchkcelldiv {
    padding: 0px 0px 0px 5px !important;
}

.basegrid .e-gridcontent .e-rowcell .e-checkbox-wrapper.e-css {
    vertical-align: middle;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-grid-filter-menu .e-label {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .basegrid .e-grid .e-toolbar .e-toolbar-item .e-btn {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }
    .basegrid .e-grid .e-toolbar .e-toolbar-item .e-btn .e-tbar-btn-text {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }
    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-size: 12px;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-grid-filter-menu .e-menu-item {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper .e-label.e-choosercheck {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-check.e-choosercheck {
        background-color: var(--theme-color, #55AAAA);
        border-color: var(--theme-color, #55AAAA);
        color: #fff;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-stop.e-choosercheck {
        background-color: var(--theme-color, #55AAAA);
        border-color: var(--theme-color, #55AAAA);
        color: #fff;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper .e-label.e-fltrcheck {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-check.e-fltrcheck {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-label {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-size: 12px;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-dlg-content .e-checkbox-wrapper.e-css .e-stop.e-fltrcheck {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

    .basegrid .e-grid .e-popup.e-popup-open .e-footer-content .e-btn.e-primary {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basegrid .e-grid .e-popup.e-popup-open .e-footer-content .e-btn {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basegrid .e-gridcontent .e-content .e-editedrow .e-editcell .e-input-group .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }

    .basegrid .e-gridcontent .e-content .e-addedrow .e-editcell .e-input-group .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }


.basegrid .e-grid .e-gridcontent .e-content .e-addedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.basegrid .e-grid .e-gridcontent .e-content .e-addedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}


    .basegrid .e-grid .e-gridcontent .e-content .e-addedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
        background-color: var(--theme-color, #55AAAA);
        border-color: var(--theme-color, #55AAAA);
        box-shadow: 0 0 0 4px var(--theme-color-25, #55AAAA40) !important; /*box-shadow: 0 0 0 4px rgb(85 170 170 / 25%) !important;*/
        color: #fff;
    }

.basegrid .e-grid .e-gridcontent .e-content .e-editedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}

.basegrid .e-grid .e-gridcontent .e-content .e-editedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    color: #fff;
}


.basegrid .e-grid .e-gridcontent .e-content .e-editedrow .e-editcell .e-gridform .e-table .e-rowcell .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: var(--theme-color, #55AAAA);
    border-color: var(--theme-color, #55AAAA);
    box-shadow: 0 0 0 4px var(--theme-color-25, #55AAAA40) !important; /*box-shadow: 0 0 0 4px rgb(85 170 170 / 25%) !important;*/
    color: #fff;
}


.basegrid .e-pagercontainer .e-numericcontainer .e-currentitem {
    background: transparent;
    color: var(--theme-color, #55AAAA); /*color: rgb(85 170 170 / 100%);*/
    border: 3px solid var(--theme-color, #55AAAA); /*border: 3px solid rgb(85 170 170 / 100%);*/
    font-weight: 500;
    padding-top: 8px;
}

.basegrid .e-pager .e-pagercontainer .e-numericcontainer .e-numericitem {
    color: #0d6efd !important;
}

.basegrid .e-pager .e-pagercontainer .e-icons.e-pager-default {
    color: var(--theme-color, #55AAAA) !important;
    padding-bottom: 13px !important;
}

.basegrid .e-pager .e-pagercontainer .e-numericitem:hover {
    color: var(--theme-color, #55AAAA) !important;
}

.basegrid .e-focused:not(.e-menu-item) {
    box-shadow: 0 0 0 1px var(--theme-color, #55AAAA) inset !important;
}

.basegrid .e-filtered::before {
    /* color: #55AAAA !important;*/ /*this is pretty hard to see and tell difference between filtered and non filtered state*/
}

.basegrid .e-contextmenu-wrapper ul .e-menu-item.e-selected, .e-contextmenu-container ul .e-menu-item.e-selected {
    background-color: var(--theme-color, #55AAAA) !important;
    color: #fff !important;
    outline: 0 solid var(--theme-color, #55AAAA) !important;
    outline-offset: 0 !important;
}


    /* This is needed in case for an empty grid, a user tried to create a new row and their is an invalid/missing field
        that it will be visible without a vertical scroll */
    .basegrid .e-gridcontent .e-content {
        min-height: 100px;
    }

    .basegridmulti .e-gridcontent .e-content {
        min-height: 135px;
    }

    /* TODO:IMPORTANT! 
        this is for styling dropdowns in edit mode with correct font.
        this is not at all ideal, and should be changed, 
        but currently only way on grid to edit dropdown, is to add in own 
        dropdown which too lazy to do right now */
        .e-ddl.e-control.e-lib.e-popup.e-popup-open .e-content.e-dropdownbase {
            font-family: var(--theme-font-family, Montserrat), sans-serif !important;
        }

            .e-ddl.e-control.e-lib.e-popup.e-popup-open .e-content.e-dropdownbase .e-list-item {
                font-family: var(--theme-font-family, Montserrat), sans-serif !important;
            }


                .e-ddl.e-control.e-lib.e-popup.e-popup-open .e-content.e-dropdownbase .e-list-item.e-active {
                    background-color: var(--theme-color, #55AAAA);
                }


    /*the following is for styling the datepicker in edit mode*/
    .e-datepicker.e-popup-container.e-popup .e-calendar .e-header .e-title {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-size: 14px;
    }



    .e-datepicker.e-popup-container.e-popup .e-calendar .e-content table {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }


    .e-datepicker.e-popup-container.e-popup .e-calendar .e-footer-container .e-btn {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }
/*#endregion */


/*#region Base SF Color Picker*/
.basecolorpicker.e-colorpicker-popup .e-selected-value .e-input-container .e-input-group {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

.basecolorpicker.e-colorpicker-popup .e-container .e-switch-ctrl-btn {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

.basecolorpicker.e-colorpicker-popup .e-container .e-switch-ctrl-btn .e-btn {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

    .basecolorpicker.e-colorpicker-popup .e-container .e-switch-ctrl-btn .e-btn.e-primary {
        background-color: var(--theme-color, #55AAAA);
        border-color: var(--theme-color, #55AAAA);
        color: #fff;
    }
/*#endregion */


/*#region Base SF Uploader*/
.basesfuploader {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

    .basesfuploader .e-upload-actions .e-file-upload-btn {
        background-color: transparent !important;
        border-color: transparent !important;
        /*color: #55AAAA !important;*/
        color: #3F7D7D !important; /*this is a little darker than our theme color of #55AAAA*/
    }

        .basesfuploader .e-upload-actions .e-file-upload-btn:hover {
            background-color: var(--theme-color, #55AAAA) !important;
            border-color: var(--theme-color, #55AAAA) !important;
            color: #fff !important;
        }

    .basesfuploader .e-file-select-wrap .e-btn {
        font-size: 12px;
        background-color: #F6F7F7;
        color: #333;
    }

.dark-mode .basesfuploader .e-file-select-wrap .e-btn {
    background: #6c757d;
    color: #fff;
}

@media (max-width: 600px) {
    .basesfuploader.e-upload .e-upload-actions .e-btn {
        font-size: 12px;
    }

    .basesfuploader.e-upload .e-file-select-wrap .e-file-drop {
        font-size: 12px;
    }

    .basesfuploader.e-upload .e-file-select-wrap .e-btn {
        font-size: 12px;
    }

    .basesfuploader.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
        font-size: 12px;
    }

    .basesfuploader.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type {
        font-size: 12px;
    }
}
/*#endregion */


/*#region Base File Uploader Input*/
.file-input-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #333333;
    color: white;*/
    background-color: var(--bg-color-c, #e8e8e8);
    color: var(--text-color, #333333);
    cursor: pointer;
    position: relative;
    width: 97px;
    height: 30px;
    border-radius: 3px;
    font-size: var(--font-small-m, 13px);
    font-weight: 500;
    border: 1px solid #333;
}

    .file-input-parent:hover {
        /*background-color: #111111;*/
        background-color: #a7a7a7;
    }

    .file-input-parent:focus {
        background-color: #a7a7a7;
    }

    .file-input-parent.disabled {
        opacity: 0.5;
    }

    .file-input-parent input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

        .file-input-parent input[type=file], /* FF, IE7+, chrome (except button) */
        .file-input-parent input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
            cursor: pointer;
        }

/* Removes "No File Chosen" in File Input Control */
.file-input-parent-transp input[type='file'] {
    color: transparent;
}
/*#endregion */


/*#region Base SF ToolTip*/
.basetooltip .e-tip-content {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-style: normal;
    font-weight: normal;
    /*font-size: 12px;
    line-height: 16px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: #FFFFFF;*/
}

.baseinfoicon {
    font-size: var(--font-medium-x, 16px) !important;
    color: var(--off-gray, #BDBDBD);
    margin-bottom: 20px;
}

.baseinfoicon2 {
    font-size: var(--font-medium-x, 16px) !important;
    color: var(--off-gray, #BDBDBD);
    margin-bottom: 20px;
    padding-left: 5px;
}

.baseinfoicon3 {
    font-size: 16px !important;
    color: #BDBDBD;
    margin-bottom: 20px;
}

.baseinfoicon4 {
    font-size: var(--font-medium-x, 16px) !important;
    color: #333333;
    margin-left: 10px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .baseinfoicon3 {
        font-size: 12px !important;
    }
}
/*#endregion */


/*#region Common CSS Things*/
.equalflexwidth {
    flex: 1 1 0;
}

.msgheaderlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333) !important;
    padding-right: 0.3em;
}

.msgheaderlblblue {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: var(--font-medium-x, 16px) !important;
    line-height: 24px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--theme-color, #55AAAA) !important;
    white-space: normal;
}

.msgheaderlbl-big {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: var(--font-large, 20px) !important;
    line-height: 24px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333) !important;
}

.msgheaderlblblue-big {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600 !important;
    font-size: var(--font-large, 20px) !important;
    line-height: 24px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--theme-color, #55AAAA) !important;
    white-space: normal;
    padding-right: 0.3em;
}

.remove-img-btn {
    border-radius: 3px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-small-m, 13px); /*var(--font-medium, 14px);*/
    line-height: 17px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    border: 1px solid #615F5F;
    padding: 2px 5px;
    width: 97px;
    /*color: -internal-light-dark(black, white);
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));*/
    background-color: var(--bg-color, #FFFFFF);
    color: var(--text-color, #333333);
    height: 30px;
    align-items: center;
}

.remove-img-btn-widthunset {
    width: unset;
}

    .remove-img-btn:hover {
        background-color: var(--hover-color, #F2F4F6);
    }

    .remove-img-btn:disabled {
        opacity: 0.5;
    }

.remove-img-btn2 {
    border-radius: 3px;
    border: 1px solid #615F5F;
    background-color: var(--bg-color, #FFFFFF);
    color: var(--text-color, #333333);
    align-items: center;
}

.slim-btn-theme {
    border-radius: 3px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-small-m, 13px);
    line-height: 17px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    border: 1px solid #615F5F;
    padding: 2px 5px;
    width: 130px;
    background-color: var(--theme-color, #55AAAA);
    color: var(--bg-color, #FFFFFF);
    height: 30px;
    align-items: center;
}

    .slim-btn-theme:hover {
        background-color: #BFF3E7;
    }

.iconthin {
    -webkit-text-stroke: 1.5px white;
}

.iconpaddingright5 {
    padding-right: 5px;
}

.iconpaddingright10 {
    padding-right: 10px;
}

.iconfont14 {
    font-size: 14px !important;
}

.iconfont16 {
    font-size: 16px !important;
}

.iconfont18 {
    font-size: 18px !important;
}

.iconfont20 {
    font-size: 20px !important;
}

.iconfont21 {
    font-size: 21px !important;
}

.iconfont22 {
    font-size: 22px !important;
}

.iconfont30 {
    font-size: 30px !important;
}

.iconfont32 {
    font-size: 32px !important;
}

.iconfont36 {
    font-size: 36px !important;
}

.iconfont24 {
    font-size: 24px !important;
}

.iconfont40 {
    font-size: 40px !important;
}

.addbutton {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
    background: transparent;
    border: none;
}

.addbutton3 {
    font-size: 12px;
    line-height: 14px;
}

.addbuttonicon {
    padding-right: 5px;
}

    .addbutton:hover {
        background-color: var(--hover-color, #F2F4F6);
    }

    .addbutton2:hover {
        background-color: #d9dcde;
    }

@media (max-width: 600px) {
    .addbutton {
        font-size: 12px;
    }

    .addbuttonicon {
        font-size: 18px;
    }

    .iconfont22 {
        font-size: 19px !important;
    }
}

.viewprofilebtn:hover {
    /*border: 1px solid #828282 !important;
    border-radius: 3px;*/
    opacity: 0.75;
}

.viewprofilebtn:focus {
    border: 1px solid #828282 !important;
    border-radius: 5px;
}

.underlinedbtn:hover {
    /*border: 1px solid #828282 !important;
    border-radius: 3px;*/
    opacity: 0.75;
}

.underlinedbtn:hover {
    border: 1px solid #828282;
    border-radius: 5px;
}

.slackbtn-icon:hover {
    background-color: #f2f4f6;
}

.slackbtnword:focus {
    opacity: 0.75;
}

.seemorebtn {
    color: white;
}

.seemorebtn:hover {
    /*background-color: #f2f4f6 !important;
    color: #f2f4f6 !important;*/
    opacity: 0.75;
}

    .seemorebtn:focus {
        border: 1px solid #828282;
    }

.seemorebtn-alt {
    color: white;
}

    .seemorebtn-alt:focus {
        border-bottom: unset;
    }

    .seemorebtn-alt:hover {
        opacity: 0.75;
        border-bottom: 1px solid #828282;
    }

.joinbtn:hover {
    background-color: #111111;
}

.cancelbtn:hover {
    background-color: #f2f4f6;
}

.cursorpointer {
    cursor: pointer;
}

.cursornotallowed {
    cursor: not-allowed;
}

.cursordefault {
    cursor: default;
}

.pointereventsauto {
    pointer-events: auto;
}

.explanationsec {
    padding: 20px;
    background-color: #fbfbf1;
    font-size: var(--font-medium-x, 16px);
}

.dark-mode .explanationsec {
    background-color: #575757;
    color: var(--text-color-b, #615F5F);
}

.explanationsecborder {
    border: 1px solid gray;
}

.explanationheaderlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-b, #615F5F);
    display: flex;
    align-items: center;
}

.explanationdescriptionlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-b, #615F5F);
    display: flex;
    align-items: center;
}

@media (max-width: 600px) {
    .explanationdescriptionlbl {
        font-size: 12px;
    }
}

.explandescsmalllbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-b, #615F5F);
    display: flex;
    align-items: center;
    margin-bottom: unset;
}

.section-type-a {
    background-color: #fbfbf1;
}

.dark-mode .section-type-a {
    background-color: #282d31;
}

.circlestatus {
    font-size: 30px;
    margin-bottom: 5px;
}

.previewexpbbtn {
    border: none;
    text-decoration: underline;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    text-align: center;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-z, #000000);
    background: #fffff0;
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 20px;
}

.dark-mode .previewexpbbtn {
    background-color: var(--bg-color-a, #FFFFFF);
}
/*#endregion */


/*#region Common Filter Things*/
.filterbtn {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
    background: var(--bg-color-a, #FFFFFF);
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 100px;
    padding: 10px 16px;
    margin-right: 10px;
}

    .filterbtn:focus {
        outline: none;
    }

    .filterbtn:hover {
        background-color: var(--hover-color, #F2F4F6);
    }

    .filterbtn.active {
        outline: none;
        color: #FFFFFF;
        background-color: var(--theme-color, #55AAAA);
    }

        .filterbtn.active:hover {
            background-color: var(--theme-color-s-light, #82C0C0);
        }
/*#endregion */



/*#region Syncfusion Grid Excel Like Filtering Popup CSS*/
.e-dlg-container .sf-grid-dlg.e-xlflmenu {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}


    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-xlfl-radiodiv .e-radio-wrapper .e-label {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-xlfl-matchcasediv .e-checkbox-wrapper .e-label {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-xlfl-valuediv .e-input-group.e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-xlfl-optrdiv .e-input-group.e-valid-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-footer-content .e-btn.e-primary {
        background-color: var(--theme-color, #55AAAA) !important;
    }

    .e-dlg-container .sf-grid-dlg.e-xlflmenu .e-xlfl-valuediv .e-datetime-container.e-datetimepicker {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }
/*#endregion */



/*#region Base Accumulation Chart*/
.accumulationchartcontainer {
    min-height: 400px;
}

.accumulationchartcontainer3 {
    min-height: 250px;
    max-width: 400px;
}

@media (max-width: 600px) {
    .accumulationchartcontainer {
        width: calc(100vw - 3rem);
    }

    .accumulationchartcontainer3 {
        max-width: unset;
    }
}

.flexchartsside-1600 {
    flex-direction: row;
}

@media (max-width: 1600px) {
    .flexchartsside-1600 {
        flex-direction: column;
    }
}
/*#endregion */



/*#region Base Syncfusion Datetime Picker*/
    .basesfdatetimepicker .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
        background-color: var(--theme-color, #55AAAA);
        color: #fff;
    }

    .basesfdatetimepicker .e-calendar .e-content td.e-today.e-selected span.e-day {
        box-shadow: inset 1px 0 var(--theme-color, #55AAAA), inset 0 1px var(--theme-color, #55AAAA), inset -1px 0 var(--theme-color, #55AAAA), inset 0 -1px var(--theme-color, #55AAAA);
    }

    .basesfdatetimepicker .e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
        background-color: var(--theme-color, #55AAAA) !important;
        border-color: var(--theme-color, #55AAAA) !important;
    }

    .basesfdatetimepicker .e-calendar .e-content td.e-today span.e-day {
        box-shadow: inset 2px 0 var(--theme-color, #55AAAA), inset 0 2px var(--theme-color, #55AAAA), inset -2px 0 var(--theme-color, #55AAAA), inset 0 -2px var(--theme-color, #55AAAA);
        color: var(--theme-color, #55AAAA);
    }

.basesfdatepicker .e-calendar .e-content td.e-selected span.e-day {
    background-color: var(--theme-color, #55AAAA);
}

.basesfdatepicker.e-timepicker.e-popup {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}

.basesfdatepicker .e-input {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
}

.basesfdatepicker.e-timepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active {
    background-color: var(--theme-color, #55AAAA);
}

.basesfdatepicker.e-input-group.e-control-wrapper input.e-input::selection {
    background-color: var(--theme-color, #55AAAA);
}

.daterangepicker-chart {
    margin: 20px !important;
    align-items: center;
}
/*#endregion */



/*#region Base Syncfusion Scheduler Aka Calendar*/
.basesfschedule.e-schedule {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
}

    .basesfschedule.e-schedule .e-schedule-toolbar-container .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
        font-size: 13px;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-date-range .e-tbar-btn .e-tbar-btn-text {
        font-size: 13px;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow {
        font-size: 12px;
    }

    .basesfschedule.e-schedule .e-popup .e-event-popup {
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar-container .e-header-popup .e-calendar .e-content td.e-selected span.e-day {
        background-color: var(--theme-color, #55AAAA);
    }

    .basesfschedule.e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
        background: var(--theme-color, #55AAAA);
        border: 1px solid #92C8C8;
    }

    .basesfschedule.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment {
        background: var(--theme-color, #55AAAA);
    }

    .basesfschedule.e-schedule .e-month-view .e-appointment {
        background: var(--theme-color, #55AAAA);
    }

    .basesfschedule.e-schedule .e-more-popup-wrapper .e-appointment {
        background: var(--theme-color, #55AAAA);
    }

    /*.e-schedule .e-vertical-view .e-header-cells.e-current-day {
    color: #509F9F;
}

.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text {
    color: #509F9F;
}

.e-schedule .e-month-view .e-date-header-wrap table td.e-current-day {
    color: #509F9F;
}

.e-schedule .e-month-view .e-current-date .e-date-header {
    background-color: #509F9F;
}*/

    .basesfschedule.e-schedule .e-agenda-view .e-appointment {
        border-left: 3px solid #509F9F;
    }

    .basesfschedule.e-schedule .e-agenda-view .e-day-date-header.e-current-day {
        color: #509F9F;
    }

    .basesfschedule.e-schedule .e-popup .e-event-popup .e-popup-footer .e-btn.e-event-edit {
        visibility: hidden;
    }

    .basesfschedule.e-schedule .e-popup .e-event-popup .e-popup-footer .e-btn.e-event-delete {
        visibility: hidden;
    }


    .basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-header .e-subject-wrap .e-subject {
        background-color: var(--theme-color-30, #55AAAA4D); /*background-color: rgba(85,170,170,.3);*/
        border-left: 6px solid var(--theme-color, #55AAAA);
    }


    .basesfschedule.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-appointment-indicator {
        background-color: var(--theme-color, #55AAAA);
    }

    .basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-footer .event-footer .e-btn.e-primary {
        background-color: var(--theme-color, #55AAAA);
        border-color: var(--theme-color, #55AAAA);
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

.basesfschedulequickinfosec {
    color: #212529;
    display: flex;
    padding-top: 10px;
}

.basesfschedule.e-schedule .e-month-view .e-appointment.calendarevent {
    background: #86B6FE;
}

.basesfschedule.e-schedule .e-month-view .e-date-header-wrap table td {
    font-size: 13px;
}

.basesfschedule.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.calendarevent {
    background: #86B6FE;
}

.basesfschedule.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.calendarevent {
    background: #86B6FE;
}

.basesfschedule.e-schedule .e-more-popup-wrapper .e-appointment.calendarevent {
    background: #86B6FE;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-header .e-subject-wrap .e-subject.calendarevent {
    background-color: rgba(134, 182, 254,.3);
    border-left: 6px solid #86B6FE;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-footer .event-footer.calendarevent .e-btn.e-primary {
    background-color: #86B6FE;
    border-color: #86B6FE;
}

.basesfschedule.e-schedule .e-month-view .e-appointment.skippedevent {
    background: #696762;
}

.basesfschedule.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.skippedevent {
    background: #696762;
}

.basesfschedule.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.skippedevent {
    background: #696762;
}

.basesfschedule.e-schedule .e-more-popup-wrapper .e-appointment.skippedevent {
    background: #696762;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-header .e-subject-wrap .e-subject.skippedevent {
    background-color: rgba(105, 103, 98,.3);
    border-left: 6px solid #696762;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-footer .event-footer.skippedevent .e-btn.e-primary {
    background-color: #696762;
    border-color: #696762;
}

.basesfschedule.e-schedule .e-month-view .e-appointment.updatedevent {
    background: #95632D;
}

.basesfschedule.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.updatedevent {
    background: #95632D;
}

.basesfschedule.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.updatedevent {
    background: #95632D;
}

.basesfschedule.e-schedule .e-more-popup-wrapper .e-appointment.updatedevent {
    background: #95632D;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-header .e-subject-wrap .e-subject.updatedevent {
    background-color: rgba(149, 99, 45,.3);
    border-left: 6px solid #95632D;
}

.basesfschedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-footer .event-footer.updatedevent .e-btn.e-primary {
    background-color: #95632D;
    border-color: #95632D;
}

.e-quick-popup-wrapper.e-device.e-popup-open {
    z-index: 1030;
}

.e-more-popup-wrapper.e-device.e-popup-open {
    z-index: 1030;
}

@media (max-width: 600px) {
    .basesfschedule.e-schedule .e-schedule-table {
        font-size: 12px;
    }

    .basesfschedule.e-schedule .e-month-view .e-header-cells {
        font-size: 12px !important;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
        font-size: 12px !important;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
        font-size: 16px;
    }

    .basesfschedule.e-schedule .e-schedule-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow {
        font-size: 16px;
    }
}
/*#endregion */



/*#region Base Syncfusion Accordion*/
.basesfaccordion2 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #f8f9fa !important;
}

.dark-mode .basesfaccordion2 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #575757 !important;
}

.basesfaccordion2 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
    box-shadow: 0 0 0 4px var(--theme-color-25, #55AAAA40) !important; /*box-shadow: 0 0 0 4px rgb(85 170 170 / 25%) !important;*/
}

.basesfaccordion2 .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    background: var(--bg-color-a, #FFFFFF) !important;
    border-width: 0 0 0 0;
}

.basesfaccordion2 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #f8f9fa !important;
    border-width: 0 0 0 0;
}

.dark-mode .basesfaccordion2 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #575757 !important;
}

    .basesfaccordion2 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
        color: var(--theme-color, #55AAAA) !important;
    }

.basesfaccordion2 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
    box-shadow: 0 0 0 4px var(--theme-color-25, #55AAAA40) !important; /*box-shadow: 0 0 0 4px rgb(85 170 170 / 25%) !important;*/
}

.basesfaccordiongrey .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    color: var(--text-color, #333333);
}

.basesfaccordiongrey .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
    color: var(--text-color, #333333);
}

.basesfaccordiongrey .e-accordion .e-acrdn-item .e-acrdn-header:hover .e-icons {
    color: #333333;
}

.basesfaccordiongrey .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
    color: var(--text-color, #333333) !important;
}

.basesfaccordiontheme .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    color: var(--theme-color, #55AAAA);
}

.basesfaccordiontheme .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
    color: var(--theme-color, #55AAAA);
}

.basesfaccordiontheme .e-accordion .e-acrdn-item .e-acrdn-header:hover .e-icons {
    color: var(--theme-color, #55AAAA);
}

.basesfaccordiontheme .e-accordion .e-acrdn-item.e-selected>.e-acrdn-header>.e-acrdn-header-content {
    color: var(--theme-color, #55AAAA);
}

.basesfaccordiontheme .e-accordion .e-acrdn-item.e-selected>.e-acrdn-header>.e-toggle-icon {
    color: var(--theme-color, #55AAAA);
}

.basesfaccordion3 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon {
    color: #333333;
}

.basesfaccordion3 .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: var(--text-color, #333333);
}

.basesfaccordion3 .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
    color: var(--text-color, #333333);
}

.basesfaccordion3 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: #3b7676;
}

.basesfaccordion3 .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-icons {
    color: #3b7676;
}

.basesfaccordionv2 .e-accordion {
    width: calc(100vw - 30rem) !important;
}

    .basesfaccordionv2 .e-accordion .e-tgl-collapse-icon::before {
        content: "\e734"; /*this is for smaller icon*/
    }

@media (max-width: 600px) {
    .basesfaccordionv2 .e-accordion {
        width: calc(100vw - 3rem) !important;
    }

        .basesfaccordion2 .e-accordion .e-tgl-collapse-icon::before {
            content: "\e734"; /*this is for smaller icon*/
        }
}

.basesfaccordion2v2 .e-accordion .e-tgl-collapse-icon::before {
    content: "\e734"; /*this is for smaller icon*/
}

.basesfaccordion4 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #fff !important;
}

.dark-mode .basesfaccordion4 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #575757 !important;
}

.basesfaccordion4 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #fff !important;
}

.dark-mode .basesfaccordion4 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #575757 !important;
}

.basesfaccordion4 .e-accordion .accordionitem-style .e-acrdn-panel {
    background-color: #fcfcfc;
}

.dark-mode .basesfaccordion4 .e-accordion .accordionitem-style .e-acrdn-panel {
    background-color: #282d31;
}

.basesfaccordionwbg .e-accordion .e-acrdn-item .e-acrdn-header {
    background-color: var(--bg-color-b, #E0E0E0);
}

    .basesfaccordionwbg .e-accordion .e-acrdn-item .e-acrdn-header:focus {
        background: #f0f0f0;
    }

    .basesfaccordionwbg .e-accordion .e-acrdn-item .e-acrdn-header:hover {
        background: #f0f0f0;
    }

    .dark-mode .basesfaccordionwbg .e-accordion .e-acrdn-item .e-acrdn-header:focus {
        background: #575757;
    }

    .dark-mode .basesfaccordionwbg .e-accordion .e-acrdn-item .e-acrdn-header:hover {
        background: #575757;
    }

.basesfaccordionwbg .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #f0f0f0 !important;
}

.dark-mode .basesfaccordionwbg .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: #575757 !important;
}

.basesfaccordionwbg .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #f0f0f0 !important;
}

.dark-mode .basesfaccordionwbg .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background: #575757 !important;
}
/*#endregion */



/*#region Base Syncfusion Tab*/
.basesftab .e-tab-header .e-toolbar-item .e-tab-text {
    font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.basesftab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #495057 !important;
}

.dark-mode .basesftab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: white !important;
}

.basesftab .e-tab-header .e-toolbar-item.e-active {
    background-color: gray;
}

.accessible-mode .basesftab .e-tab-header .e-toolbar-item.e-active {
    background-color: #737373;
}

.basesftab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #fff !important;
}

.basesftab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
    color: var(--theme-color, #55AAAA) !important;
}

@media (max-width: 600px) {
    .basesftab .e-tab-header .e-toolbar-item .e-tab-wrap {
        padding: 0 12px !important;
    }

    .basesftab .e-tab-header .e-toolbar-item .e-tab-text {
        font-size: 12px !important;
    }
}

@media (max-width: 500px) {
    .basesftab {
        width: calc(100vw - 40px) !important;
    }
}
/*#endregion */



/*#region Base Syncfusion Carousel*/
.basesfcarousel {
    height: unset !important;
    margin-bottom: 50px !important;
    padding-bottom: 40px !important;
    background: var(--card-color, white);
    padding-top: 18px !important;
}

    .basesfcarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
        background-color: var(--bg-color-d, #ECECEC) !important;
    }

    .basesfcarousel .e-carousel-navigators .e-next .e-btn .e-btn-icon::before,
    .basesfcarousel .e-carousel-navigators .e-previous .e-btn .e-btn-icon::before {
        color: var(--bg-color-d, #ECECEC);
    }
/*#endregion */



/*#region Base App Bar*/
.basesfappbar {
    background: var(--theme-color, #55AAAA) !important;
}
/*#endregion */



/*#region Small Screen Navigation Ul To Select*/
.nav-select-menu-container {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 30px;
    display: none;
}

.nav-select-menu {
    display: none;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #828282 !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    border: transparent;
    border-right: 10px solid transparent;
    width: 100%;
    padding: .375rem .75rem;
}

/* for firefox, it seems to utilize the os fonts, so montserrat won't work
   more info: https://bugzilla.mozilla.org/show_bug.cgi?id=1536148#c19 */
@supports (-moz-appearance:meterbar) {
    font-family: var(--theme-font-family, Montserrat), Tahoma, sans-serif;
}

    .nav-select-menu option:disabled {
        opacity: 0.5;
        color: lightgray;
    }

@media (max-height: 650px) {
    .nav-ul-menu {
        display: none;
    }

    .nav-select-menu {
        display: inline-block;
    }

    .nav-select-menu-container {
        display: block;
    }
}

@media (min-height: 650px) {
    .nav-ul-menu-parent {
        overflow-y: auto;
        max-height: 50vh;
    }
}

@media (min-height: 850px) {
    .nav-ul-menu-parent {
        overflow-y: auto;
        max-height: 60vh;
    }
}

@media (min-height: 1150px) {
    .nav-ul-menu-parent {
        overflow-y: auto;
        max-height: 70vh;
    }
}

@media (min-height: 650px) {
    .nav-ul-menu-parent2 {
        overflow-y: auto;
        max-height: 30vh;
    }
}

@media (min-height: 850px) {
    .nav-ul-menu-parent2 {
        overflow-y: auto;
        max-height: 40vh;
    }
}

@media (min-height: 950px) {
    .nav-ul-menu-parent2 {
        overflow-y: auto;
        max-height: 45vh;
    }
}

@media (min-height: 1150px) {
    .nav-ul-menu-parent2 {
        overflow-y: auto;
        max-height: 50vh;
    }
}

@media (min-height: 1250px) {
    .nav-ul-menu-parent2 {
        overflow-y: auto;
        max-height: 60vh;
    }
}

@media (max-width: 960px) {
    .nav-ul-menu {
        display: none;
    }

    .nav-select-menu {
        display: inline-block;
    }

    .nav-select-menu-container {
        display: block;
    }
}

@media (max-width: 600px) {
    .nav-select-menu {
        font-size: 14px;
    }
}

.culture-select-menu {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    color: var(--text-color-a, #828282) !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    border: 1px solid var(--text-color-a, #828282);
    padding: .375rem .75rem;
}

.dark-mode .culture-select-menu {
    background: transparent;
}

.dark-mode .culture-select-menu option {
    background: #575757;
}
/*#endregion */



/*#region Small Screen UI Things*/
.flexoneonehundred {
    flex: 1 1 100%;
}

.row-gap-3p {
    row-gap: 3px;
}

.flex-basis-30 {
    flex-basis: 30%;
}

.flex-even {
    flex : 1;
}

@media (max-width: 600px) {
    .flexwrap600 {
        flex-wrap: wrap;
    }
}

@media (max-width: 800px) {
    .flexwrap800 {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .flexwrap900 {
        flex-wrap: wrap;
    }
}

@media (max-width: 1000px) {
    .flexwrap1000 {
        flex-wrap: wrap;
    }
}

@media (max-width: 1200px) {
    .flexwrap1200 {
        flex-wrap: wrap;
    }
}

@media (max-width: 1600px) {
    .flexwrap1600 {
        flex-wrap: wrap;
    }
}

@media (max-width: 2900px) {
    .flexwrap2900 {
        flex-wrap: wrap;
    }
}

@media (max-width: 1500px) {
    .flexcolumn1500 {
        flex-direction: column;
    }
}
/*#endregion */



/*#region Colors*/
.activeturquoisebgcolor {
    background-color: #BFF3E7;
}

.rejectedredbgcolor {
    background-color: #FFCBCE;
}

.colorwhite {
    color: #FFFFFF;
}

.colorwhite-i {
    color: #FFFFFF !important;
}

.colorgreyone {
    color: #828282;
}

.accessible-mode .colorgreyone {
    color: #737373;
}

.colorgreyone-a {
    color: #828282;
}

.accessible-mode .colorgreyone-a {
    color: #707070;
}

.colorgreytwo {
    color: #333333;
}

.colorgreythree {
    color: #BDBDBD;
}

.colorgreyfour {
    color: #E0E0E0;
}

.accessible-mode .colorgreyfour {
    color: #737373;
}

.coloroffgray {
    color: var(--off-gray, #BDBDBD)
}

.colorbg-color-a {
    background: var(--bg-color-a, #FFFFFF);
}

.colorbg-color-b {
    background: var(--bg-color-b, #E0E0E0)
}

.colorbgwhite {
    background-color: white;
}

.colorbggreytwo {
    background-color: #333333;
}

.colorbggreythree {
    background-color: #BDBDBD;
}

.colorbggreyfive {
    background-color: #E5E5E5;
}

.colorbggreyfive-v {
    background-color: #E5E5E5;
}

.dark-mode .colorbggreyfive-v {
    background-color: #3f3f3f;
}

.colorbggreysix {
    background-color: #F8F8F8;
}

.colorbggreydark {
    background-color: #333333;
}

.colorbgthemesim {
    background-color: #BFF3E7;
}

.colorbggreenalt {
    background-color: #B9FFDD;
}

.colorbgbluealt {
    background-color: #B9D9FF;
}

.colorbgbluealt2 {
    background-color: #DDEDFF;
}

.colorbgunset {
    background-color: unset;
}

.colortheme {
    color: var(--theme-color, #55AAAA);
}

.colorbluetheme {
    color: var(--theme-color-blue, #1D9CD3);
}

.colorblacktheme {
    color: var(--text-color, #333333);
}

.colorblack-text {
    color: var(--text-color, #333333);
}

.color-a-gray-text {
    color: var(--text-color-a, #828282);
}

.colorgray {
    color: gray;
}

.colorgrey {
    color: grey;
}

.colorgreen {
    color: green;
}

.colorred {
    color: red;
}

.accessible-mode .colorred {
    color: #ED0000;
}

.colorred-i {
    color: red !important;
}

.accessible-mode .colorred-i {
    color: #ED0000 !important;
}

.ColorDraftGrey {
    color: #C9C9C9;
}

.ColorActiveGreen {
    color: #C1F3BF;
}

.ColorPendingOrange {
    color: #F0C999;
}

.ColorPendingYellow {
    color: #F0F3BF;
}

.ColorProcessingYellow {
    color: #F0E3BE;
}

.ColorYellow {
    color: #FEFFC5;
}

.ColorDarkYellow {
    color: #ECEEA8;
}

.ColorActiveTurquoise {
    color: #BFF3E7;
}

.ColorRejectedRed {
    color: #FFCBCE;
}

.ColorArchivedBrown {
    color: #C4976E;
}

.ColorDeletedRed {
    color: #F0C5C5;
}

.ColorNudgeGreen {
    color: #008000;
}

.ColorNudgeBlack {
    color: #808080;
}

.colorghost {
    color: transparent !important;
}

.colorbgghost {
    color: transparent !important;
}

.colorbggreen {
    background-color: green;
}

.colorbgred {
    background-color: red;
}

.DraftGreyColor {
    background-color: #C9C9C9;
}

.InitialLightBlueColor {
    background-color: #BFDEF3;
}

.ActiveTurquoiseColor {
    background-color: #BFF3E7;
}

.ActiveGreenColor {
    background-color: #C1F3BF;
}

.PendingYellowColor {
    background-color: #F0F3BF;
}

.ProcessingYellowColor {
    background-color: #F0E3BE;
}

.YellowColor {
    background-color: #FEFFC5;
}

.DarkYellowColor {
    background-color: #ECEEA8;
}

.PendingOrangeColor {
    background-color: #F0C999;
}

.RejectedRedColor {
    background-color: #FFCBCE;
}

.ArchivedBrownColor {
    background-color: #C4976E;
}

.DeletedRedColor {
    background-color: #F0C5C5;
}

.CompletedGreenColor {
    background-color: #D4F3BF;
}

.PeachColor {
    background-color: #F8EAC5;
}

.DarkBlueColor {
    background-color: #000980ff;
}

.DarkGreenColor {
    background-color: #008040ff;
}

.AnalyticsGreenColor {
    background-color: #86CEBD;
}

.AnalyticsYellowColor {
    background-color: #F2C34A;
}

.AnalyticsRedColor {
    background-color: #EB5757;
}

.color-mind-blue {
    color: #3DBFC9;
}

.color-mind-redpink {
    color: #F5276C;
}

.color-mind-green {
    color: #3DC969;
}

.color-mind-orange {
    color: #FF983B;
}



.BgImpColorYellow {
    background-color: #946D0A !important;
}

.BgImpColorDarkYellow {
    background-color: #775809 !important;
}

.BgImpColorOrange {
    background-color: #C25A00 !important;
}

.BgImpColorDarkOrange {
    background-color: #9E4A00 !important;
}

.BgImpColorGreen {
    background-color: #268745 !important;
}

.BgImpColorDirtyGreen {
    background-color: #4E7416 !important;
}

.BgImpColorDarkGreen {
    background-color: #355D5F !important;
}

.BgImpColorPink {
    background-color: #DB0A50 !important;
}

.BgImpColorDarkPink {
    background-color: #9F073A !important;
}

.BgImpColorLightBlue {
    background-color: #24797F !important;
}

.BgImpColorDarkBlue {
    background-color: #0A07F8 !important;
}

.BgImpColorGrey {
    background-color: #677274 !important;
}

.BgImpColorDarkGrey {
    background-color: #4C5456 !important;
}

.BgImpColorPurple {
    background-color: #BE19E6 !important;
}

.BgImpColorDarkPurple {
    background-color: #7A0DF2 !important;
}

.BgImpColorBrown {
    background-color: #8C7375 !important;
}

.BgImpColorDarkBrown {
    background-color: #6A5759 !important;
}

.BgImpColorDarkerBrown {
    background-color: #483D3E !important;
}

.BgImpColorDarkerPurple {
    background-color: #600ABD !important;
}

.BgImpColorDarkerGrey {
    background-color: #383C3E !important;
}

.BgImpColorDarkerBlue {
    background-color: #0805BD !important;
}

.BgImpColorDarkerPink {
    background-color: #244142 !important;
}

.BgImpColorDarkerGreen {
    background-color: #244142 !important;
}

.BgImpColorDarkerOrange {
    background-color: #703400 !important;
}

.BgImpColorDarkerYellow {
    background-color: #614807 !important;
}

.BgImpColorDarkererBrown {
    background-color: #292424 !important;
}

.BgImpColorDarkererPurple {
    background-color: #450688 !important;
}

.BgImpColorDarkererGrey {
    background-color: #28282A !important;
}

.BgImpColorDarkererBlue {
    background-color: #05038C !important;
}

.BgImpColorDarkererPink {
    background-color: #4F071B !important;
}

.BgImpColorDarkererGreen {
    background-color: #1B3031 !important;
}

.BgImpColorDarkererOrange {
    background-color: #472100 !important;
}

.BgImpColorDarkererYellow {
    background-color: #513C06 !important;
}
/*#endregion */



/*#region Syncfusion Sidebar Test*/
.sidebar-mobile-btn {
    top: 15px;
    z-index: 1030;
    position: fixed;
    color: #828282;
}

.sidebar-parent .sidebar-mobile-btn {
    border-radius: 11px;
}

.sidebar-parent .linebreakprof {
    margin-right: 25px;
}

.sidebar-parent .basesfaccordionv2 .e-accordion {
    width: calc(100% - 25px) !important;
}

.sidebar-parent .e-sidebar {
    background-color: var(--main-bg-color, #F6F7F7) !important;
    height: calc(100vh - 65px); /*calc(100vh - 85px);*/
    overflow-y: auto;
    margin-top: 65px; /*85px;*/
}

.gradient-mode .sidebar-parent .e-sidebar {
    background-color: transparent !important;
}

.dark-mode .sidebar-parent .e-sidebar {
    background-color: unset !important;
}

.sidebar-parent .e-sidebar-absolute {
    position: fixed;
}

    .sidebar-parent .e-sidebar .navsection {
        padding-left: .5rem;
        padding-right: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .sidebar-parent .e-sidebar .theicon {
        font-size: 26px; /*36px;*/
    }

    .sidebar-parent .e-sidebar .thetext {
        font-size: var(--font-medium, 14px); /*15px;*/
    }

    .sidebar-parent .e-sidebar .sidebar-item-icon {
        font-size: 26px;
        padding-left: 4px;
    }

    .sidebar-parent .e-sidebar .sidebar-item-icon2 {
        font-size: 24px; /*30px;*/ /*36px;*/
    }

    .sidebar-parent .e-sidebar .accordion-parent-icon {
        font-size: 30px; /*36px;*/
        padding-left: 0px;
    }

    .sidebar-parent .e-sidebar .sidebar-item-text {
        font-size: 15px;
        font-family: var(--theme-font-family, Montserrat), sans-serif;
    }

        .sidebar-parent .e-sidebar .sidebar-item-text.sidebar-sub-item-text {
            margin-left: 15px;
            margin-bottom: 1px;
        }

    .sidebar-parent .e-sidebar.e-dock.e-close .e-text {
        display: none;
    }

    .sidebar-parent .e-sidebar.e-dock.e-close .sidebar-copyurlbtn {
        display: none !important;
    }

.sidebar-parent .e-sidebar.e-dock.e-close .sidebar-searchitem {
    display: none;
}

.sidebar-parent .e-sidebar.e-dock.e-close .sidebar-favbtn {
    display: none !important;
}

.sidebar-parent .e-sidebar.e-dock .dock .sidebar-dock-ul {
    padding-left: 20px;
    background-color: #FFF;
}

.dark-mode .sidebar-parent .e-sidebar.e-dock .dock .sidebar-dock-ul {
    background-color: #282d31;
}

.lightalt-mode .sidebar-parent .e-sidebar.e-dock .dock .sidebar-dock-ul {
    background-color: #f6f7f7;
}

.sidebar-parent .e-sidebar.e-dock.e-close .dock .sidebar-dock-ul {
    padding-left: 0px;
    background-color: unset;
}

.sidebar-parent .e-sidebar .sidebar-searchitem .e-input {
    font-size: 12px;
}
    /*.thetesthome .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }*/

    .sidebar-parent .e-sidebar.e-dock.e-close .menuicon::before {
        content: "\eac9"; /*keyboard_double_arrow_right*/
    }

    .sidebar-parent .e-sidebar.e-dock.e-open .menuicon::before {
        content: "\eac3"; /*keyboard_double_arrow_left*/
    }

    .sidebar-parent .e-sidebar.e-push.e-open .menuicon::before {
        content: "\eac3"; /*keyboard_double_arrow_left*/
    }

    .sidebar-parent .e-sidebar.e-over.e-open .menuicon::before {
        content: "\eac3"; /*keyboard_double_arrow_left*/
    }

    .sidebar-parent .e-sidebar.e-dock.e-open .iconpaddingright5 {
        padding-right: 5px;
        max-width: 45px; /*this is needed for slow connections in loading material icons*/
        overflow: hidden; /*this is needed for slow connections in loading material icons*/
    }

    .sidebar-parent .e-sidebar.e-dock.e-close .iconpaddingright5 {
        padding-right: 0px;
    }

    .sidebar-parent .e-sidebar.e-dock.e-close .browse__badge {
        right: 5px;
    }

.sidebar-parent .e-sidebar.e-dock.e-close .browse__badgeA {
    right: 20px;
}

.sidebar-parent .nav-listing-itemd {
    /*border: 1px solid #E0E0E0;*/
    border: unset;
    height: 50px; /*60px;*/
    background-color: unset;
}

.sidebar-parent .nav-listing-itemd-nobr {
    border: unset;
}

.sidebarlines-mode .sidebar-parent .nav-listing-itemd {
    border: 1px solid #E0E0E0;
}

.sidebar-parent .nav-listing-iteme {
    height: 35px;
}

.sidebar-parent .bgwhite {
    background-color: #FFF;
}

.dark-mode .sidebar-parent .bgwhite {
    background-color: #282d31;
}

.lightalt-mode .sidebar-parent .bgwhite {
    background-color: #f6f7f7;
}

.sidebar-parent .e-sidebar.e-dock.e-close .nav-listing-itemd {
    min-width: unset;
    width: 50px; /*60px;*/
}

.sidebar-parent .e-sidebar.e-dock.e-close .leftheadersec {
    width: 50px; /*60px;*/
}

.sidebar-parent .e-sidebar.e-dock.e-close .leftheadersec2 {
    padding: 8px 0px 0px 8px;
}

.sidebar-parent .nav-list-item-b-child {
    height: 100%;
}

    .sidebar-parent .nav-listing-itemd:hover {
        background-color: #f2f4f6 !important;
    }

    .dark-mode .sidebar-parent .nav-listing-itemd:hover {
        background-color: #908d96 !important;
    }

.sidebar-parent .e-sidebar .browse__badge {
    top: 2px;
}

@media (max-height: 1200px) {
    .sidebar-parent .e-sidebar .nav-listing-itemd {
        height: 50px;
    }

    .sidebar-parent .e-sidebar .nav-listing-iteme {
        height: 35px;
    }

    .sidebar-parent .e-sidebar .browse__badge {
        top: 5px;
    }

    .sidebar-parent .e-sidebar .browse__badgeA {
        top: 2px;
    }
}

.sidebar-parent .basegrid-width {
    /*width: 100%;*/
    width: calc(100% - 25px);
}

@media (max-width: 1300px) {
    .sidebar-parent .e-sidebar.e-dock.e-close .basegrid-width {
        width: calc(100vw - 7rem);
    }

    .sidebar-parent .e-sidebar.e-dock.e-open .basegrid-width {
        width: calc(100vw - 18rem);
        width: calc(100vw - 20rem);
    }

    /*using overflow-x hidden now works correctly for grid width so this not needed*/
    /*.sidebar-parent .basegrid-width {
        width: calc(100vw - 18rem);
        width: calc(100vw - 20rem);
    }*/
}

.sidebar-parent.device-container .basegrid-width {
    width: calc(100% - 1rem);
    width: 100%;
}

.sidebar-parent .matchbasegrid-width {
    width: calc(100% - 25px);
}

/*using overflow-x hidden now works correctly for grid width so this not needed*/
/*@media (max-width: 1300px) {
    .sidebar-parent .matchbasegrid-width {
        width: calc(100vw - 20rem);
    }
}*/

.sidebar-parent.device-container .matchbasegrid-width {
    width: 100%;
}

.sidebar-parent.device-container .basesfaccordionv2 .e-accordion {
    width: 100% !important;
}

.sidebar-parent.device-container .accumulationchartcontainer {
    width: 100% !important;
    width: 100vw !important;
    width: calc(100vw - 24px) !important;
    height: 350px !important;
    min-height: unset;
    padding-right: unset !important;
}

.sidebar-parent.device-container .flexwrap-mobile {
    flex-direction: column !important;
}




/*
.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top {
    height: 60px;
}*/

@media (min-width: 600px) {
    .sidebar-parent .e-sidebar .sfaccordionsidebar {
        min-width: 300px;
    }
}

@media (min-width: 300px) {
    .sidebar-parent.device-container .e-sidebar .sfaccordionsidebar {
        min-width: 300px;
    }
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 {
    max-width: 300px;
}

    .sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .accordion-parent-icon {
        color: transparent;
        background: #fff;
        -webkit-background-clip: text;
        background-clip: text;
    }

.sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .e-accordion {
    width: 50px !important; /*60px !important;*/
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item .e-acrdn-header {
    height: 60px;
    margin-bottom: unset;
    /*padding-left: 0px;*/
    padding: 0px;
}

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
        box-shadow: 0 0 0 4px var(--theme-color-25, #55AAAA40) !important; /*box-shadow: 0 0 0 4px rgb(85 170 170 / 25%) !important;*/
    }

    .accessible-mode .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
        box-shadow: 0 0 0 4px rgb(0 0 242 / 25%) !important;
    }

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    height: 100%;
}

.sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .e-accordion .accordionitem-top.e-expand-state.e-selected .e-acrdn-header {
    background: var(--theme-color-light, #b1d8d8);
}

.sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .e-accordion .accordionitem-top.e-selected.e-select .e-acrdn-header {
    background: var(--theme-color-light, #b1d8d8);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top.e-expand-state.e-selected.e-active .e-acrdn-panel .e-acrdn-content {
    /*background: #eff1f1;*/
    /*background: #fafbfb;*/
}

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header {
        height: 60px;
        margin-bottom: unset;
        padding-left: 0px;
    }
   
     .sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header {
        /*background-color: #fafbfb;*/
        background: #c5c5c5;
    }

        .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header .e-toggle-icon {
            top: 11px;
        }

    .sidebar-parent .e-sidebar.e-dock.e-close .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header .e-toggle-icon {
        display: none;
    }

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-panel .e-acrdn-content {
    padding: 0;
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-m {
    border-bottom: 4px double var(--text-color, #333333) !important;
}

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-m .e-acrdn-header {
        height: 25px;
        min-height: 25px;
    }

        .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-m .e-acrdn-header .e-toggle-icon {
            height: 25px;
            min-height: 25px;
            top: 0;
        }

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    background: var(--theme-color-v-light, #f2f9f9);
}

.accessible-mode .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    background: #eeeeff;
}

.dark-mode .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    /*background: #9a9e9e;*/
    background: #393b3b;
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
    color: var(--off-green, #3b7676);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon {
    color: var(--off-green, #3b7676);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
    color: var(--off-green, #3b7676);
}


.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: var(--off-green, #3b7676);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
    color: var(--off-green, #3b7676);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
    color: var(--off-green, #3b7676);
}

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
    color: var(--off-green, #3b7676);
}

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-content {
        color: var(--off-green, #3b7676);
    }

.sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-fullwidth .e-acrdn-header .e-acrdn-header-content {
    width: 100%;
}

@media (max-height: 1200px) {
    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header {
        height: 50px;
    }

        .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top .e-acrdn-header .e-toggle-icon {
            top: 6px;
        }

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item .e-acrdn-header {
        height: 50px;
    }

    .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-m .e-acrdn-header {
        height: 25px;
    }

        .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .accordionitem-top-m .e-acrdn-header .e-toggle-icon {
            top: 0;
        }
}


.dark-mode .sidebar-parent .e-sidebar .basesfaccordion2v2 .accordion-parent-icon {
    filter: contrast(4) invert(1);
}

/*.dark-mode .sidebar-parent .e-sidebar .basesfaccordion2v2 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header .accordion-parent-icon {
    filter: unset;
}*/

/*moving to removing border on sidebar by default, and then a setting to turn it back on*/
.sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion.e-acrdn-root {
    border: unset;
}

.sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top {
    border: unset;
}
    .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top-fullwidth {
        border: unset;
    }

.sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top .e-acrdn-header {
    border: unset;
}

.sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .e-acrdn-item.e-select {
    border: unset;
}

.sidebarlines-mode :is( .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top, 
    .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top-fullwidth,
    .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .e-acrdn-item.e-select) {
    border-color: #E0E0E0;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.sidebarlines-mode :is( .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion.e-acrdn-root, 
    .sidebar-parent .e-sidebar .sfaccordionsidebar .e-accordion .accordionitem-top .e-acrdn-header) {
    border: 1px solid #E0E0E0;
}
/**/




/* note: firefox does not support the -webkit-scrollbar stuff */
.sidebar-parent .e-sidebar {
    overflow-x: hidden;
    scrollbar-color: #d8d8d8; /*currently firefox only*/
    /*scrollbar-width: thin;*/ /*currently firefox only*/
    scrollbar-width: none; /*currently firefox only*/
}

.sidebar-parent .e-sidebar:hover {
    scrollbar-width: thin; /*currently firefox only*/
}

.sidebar-parent .e-sidebar::-webkit-scrollbar {
    width: 10px;
    background: #ffffff;
}

    .sidebar-parent .e-sidebar::-webkit-scrollbar-thumb {
        background: #b2b2b2;
        background: #d8d8d8;
        /*background-color: #000000;*/
    }

        .sidebar-parent .e-sidebar::-webkit-scrollbar-thumb:hover {
            /*background: #b30000;*/
            background: #b2b2b2;
        }


        /*following is used for only showing the overflow scrollbar on hover over*/
    .sidebar-parent .e-sidebar::-webkit-scrollbar {
        width: 5px;
        opacity: 0;
    }

    .sidebar-parent .e-sidebar::-webkit-scrollbar-button {
        display: none;
    }

    .sidebar-parent .e-sidebar::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background: #d8d8d8;
    }

    .sidebar-parent .e-sidebar::-webkit-scrollbar-track {
        border-radius: 50px;
    }

    .sidebar-parent .e-sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar-parent .e-sidebar:hover::-webkit-scrollbar {
        display: block;
    }

.sidebar-favbtn {
    border: none;
    background: transparent;
}

    .sidebar-favbtn .hiddenstar {
        opacity: 0;
    }

    .sidebar-favbtn .selectedstar {
        opacity: 1;
    }

    .sidebar-favbtn:hover .hiddenstar {
        opacity: 1;
    }

    .dark-mode .sidebar-favbtn i {
        color: #FFF;
    }

.sidebar-copyurlbtn {
    display: flex;
    border: none;
    background: transparent;
}

    .sidebar-copyurlbtn:hover {
        background: #CECECE;
    }
/*#endregion */




/*#region Analytics Cards*/
.analyticheaderlbl {
    font-size: var(--font-medium, 14px);
    display: flex;
    color: var(--text-color, #333333);
}

.notelbl {
    font-size: var(--font-medium, 14px);
    display: flex;
    align-items: normal;
    color: grey;
    padding-right: 5px;
}

.accessible-mode .notelbl {
    color: #737373;
}

.thisweeklbl {
    font-size: 10px;
    display: flex;
    align-items: center;
    color: var(--text-color-a, #828282);
}

.addedlbl {
    font-size: 24px;
    display: flex;
    align-items: center;
    color: var(--text-color-a, #828282);
    margin-left: 42px;
    padding-right: 5px;
}

.circledot {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    margin-right: 24px;
}

.circledot2 {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 5px;
}

.analyticsublbl {
    font-size: var(--font-small, 12px);
    display: flex;
    align-items: center;
    color: var(--text-color, #333333);
}

.countlbl {
    font-size: var(--font-medium-x, 16px);
    display: flex;
    align-items: center;
    color: var(--text-color, #333333);
}

.overalltotalcountlbl {
    font-size: 56px;
    line-height: 56px;
    display: flex;
    align-items: center;
    color: var(--text-color, #333333);
}

.clickablelbl {
    /*color: #0366d6;*/
    border: none;
    background: transparent;
    text-decoration: underline;
}

.underlinelbl {
    text-decoration: underline;
}

.analyticscard {
    padding: 24px;
    background: var(--bg-color-a, #FFFFFF);
    margin-right: 25px;
    width: 48%;
    margin-bottom: 32px;
}

@media (max-width: 1640px) {
    .overalltotalcountlbl {
        font-size: 46px;
        line-height: 46px;
    }
}

@media (max-width: 1440px) {
    .overalltotalcountlbl {
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 600px) {
    .overalltotalcountlbl2 {
        font-size: 22px;
        line-height: 22px;
    }

    /*probably revisit this, buts works for now*/
    .nosmallfont .overalltotalcountlbl2 {
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 600px) {
    .analyticscard {
        /*margin-right: unset !important;
        width: 100% !important;*/
        padding: 10px 24px;
    }

    .analyticscardright {
        margin-right: unset !important;
    }

    .analyticheaderlbl {
        min-height: 40px; /*this represents 2 lines*/
        margin-bottom: 5px !important;
    }

    .analyticscardwidth {
        width: 100% !important;
    }

    .addedlbl {
        margin-left: 0px;
    }

    .circledot {
        margin-right: 10px;
    }
}

.analyticscardnowidth {
    width: unset !important;
}

.parent-stats-div {
    flex-direction: row;
}

.stats-row-two {
    flex: 0 0 66.6666%;
}

.stats-row-one {
    flex: 0 0 33.3333%;
}

.stats-row-equal {
    flex: 0 0 50%;
}

@media (max-width: 800px) {
    .parent-stats-div {
        flex-direction: column;
    }

    .stats-row-two {
        flex: auto;
    }

    .stats-row-one {
        flex: auto;
    }
}

.analyticscard-bg-light {
    background-color: var(--main-bg-color, #F6F7F7) !important;
}

.positivechange {
    font-size: var(--font-medium, 14px);
    display: flex;
    align-items: normal;
    color: green; /*#008000*/
    margin-left: 2px;
    padding-right: 5px;
}

.negativechange {
    font-size: var(--font-medium, 14px);
    display: flex;
    align-items: normal;
    color: red; /*#FF0000*/
    margin-left: 2px;
    padding-right: 5px;
}

.neutralchange {
    font-size: var(--font-medium, 14px);
    display: flex;
    align-items: normal;
    color: grey; /*#808080*/
    margin-left: 2px;
    padding-right: 5px;
}

.accessible-mode .positivechange {
    color: #008A00;
}

.accessible-mode .negativechange {
    color: #E60000;
}

.accessible-mode .neutralchange {
    color: #737373;
}

.dark-mode .positivechange {
    color: #00AD00;
}

.dark-mode .negativechange {
    color: #FF5C5C;
}

.dark-mode .neutralchange {
    color: #969696;
}

.percentlbl {
    font-size: 56px;
    line-height: 56px;
    padding-right: 5px;
}

@media (max-width: 1640px) {
    .percentlbl {
        font-size: 46px;
        line-height: 46px;
    }
}

@media (max-width: 1440px) {
    .percentlbl {
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 600px) {
    .percentlbl {
        padding-right: 0px;
        font-size: 30px;
        line-height: 30px;
    }
}

.percentlbl2 {
    font-size: 30px;
}

@media (max-width: 600px) {
    .percentlbl2 {
        font-size: 20px;
    }
}

.amountlbl {
    font-size: 56px;
    line-height: 56px;
}

@media (max-width: 1640px) {
    .amountlbl {
        font-size: 46px;
        line-height: 46px;
    }
}

@media (max-width: 1440px) {
    .amountlbl {
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 380px) {
    .amountlbl {
        font-size: 26px;
        line-height: 26px;
        word-break: break-all;
    }
}

.npsnotelbl {
    margin-left: 42px;
}

@media (max-width: 600px) {
    .npsnotelbl {
        margin-left: 0px;
    }
}
/*#endregion */




/*#region Stats Rows With Charts*/
.stats-row-parent2 .analyticscard {
    width: unset !important;
}

@media (max-width: 2300px) {
    .stats-row-container-sec {
        flex-direction: column !important;
    }

    .stats-row-parent {
        flex-direction: row !important;
    }
}

@media (max-width: 2130px) {
    .stats-row-comm2 {
        flex-direction: column !important;
    }

    .stats-row-container {
        flex-direction: column !important;
        flex: unset !important;
    }

    .stats-row-comm {
        flex-direction: column !important;
    }

    .stats-row-parent .analyticscard {
        width: unset !important;
    }
}

@media (max-width: 1380px) {
    .stats-row-container-sec {
        flex-direction: row !important;
    }

    .stats-row-parent {
        flex-direction: column !important;
    }

    .stats-row-container {
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 1120px) {
    .stats-row-container-sec {
        flex-direction: column !important;
    }
}
/*#endregion */




/*#region Random Commons (maybe clean/rename)*/
.experiencetitlepar {
    max-width: 80%;
    min-height: 25px;
    align-items: center;
}

.experiencetitle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color, #333333);
}

.experiencedate {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-small, 12px);
    line-height: 15px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
    margin-bottom: unset;
}

.editbtn {
    background: unset;
    border: unset;
}

.editbtn:focus {
    border: 1px solid #828282;
    border-radius: 3px;
}

.editicon {
    color: var(--text-color-a, #828282);
}

@media (max-width: 600px) {
    .editicon {
        font-size: 18px !important; /*important needed or else doesnt take*/
    }
}

.avatarpic {
    width: 36px;
    height: 36px;
}

.avatarpic-profile {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.avatarcontainer {
    width: 50px;
    height: 50px;
    background: rgba(2, 48, 188, 0.05);
    border-radius: 25px;
}

.workicon {
    color: #828282;
    padding-right: 10px;
}

.calendaricon {
    color: var(--text-color-a, #828282);
    padding-right: 10px;
}

.JobDialogTitle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-large, 20px);
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
}

.JobDialogSection {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-medium, 14px);
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color-b, #615F5F);
}

.profilepiccontainer {
    background: rgba(2, 48, 188, 0.05);
}

.profilepic-48p {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

.profilepic-32p {
    max-width: 32px;
    max-height: 32px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
}

.profilepic-avatar-26p {
    width: 26px;
    height: 26px;
}

.profilepic-avatar-40p {
    width: 40px;
    height: 40px;
}

.dark-mode .profilepiccontainer {
    background: #fff;
}

.no-items-card-parent {
    background: var(--bg-color-a, #FFFFFF);
    padding: 50px 0px;
}
/*#endregion */




/*#region Random Commons (Another)*/
.mainheader {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    margin-bottom: 10px;
    font-size: var(--font-large, 20px);
    line-height: 24px;
    color: var(--text-color-z, #000000);
}

.mainheaderext {
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.descriptionheader {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-size: var(--font-medium, 14px);
    line-height: 24px;
    color: var(--text-color-a, #828282);
    margin-bottom: 20px;
}

.descriptionheaderext {
    font-style: normal;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.25px);
}

.descriptionsubheader2 {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-size: var(--font-small, 12px);
    line-height: 14px;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color-a, #828282);
}

.programruntable {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    letter-spacing: var(--letter-spacing, 0.25px);
}

.dark-mode .programruntable {
    color: white;
}

    .dark-mode .programruntable td {
        background: #575757;
        color: #fff;
    }

.defaulttable-light {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium, 14px);
    letter-spacing: var(--letter-spacing, 0.25px);
}

.defaulttable-light th {
    font-weight: 500;
    border: 1px solid gray;
}

.defaulttable-light td {
    border: 1px solid gray;
}

.dark-mode .defaulttable-light {
    color: white;
}

    .dark-mode .defaulttable-light td {
        background: #575757;
        color: #fff;
    }

.defaulttable-red td {
    border: 1px solid red;
}

.accessible-mode .defaulttable-red td {
    border: 1px solid #ED0000;
}

.tabletooltip {
    background-color: var(--bg-color-a, #FFFFFF);
}

.popuptitle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 700 !important;
    font-size: var(--font-medium-xx, 18px) !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    margin-bottom: unset;
}

.popuptitleblue {
    color: var(--theme-color, #55AAAA) !important;
}

.popupbigtitle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 700 !important;
    font-size: var(--font-large, 20px) !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    margin-bottom: unset;
}

.popupsemititle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-medium-x, 16px) !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    margin-bottom: unset;
}

.popupsubtitle {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium-x, 16px) !important;
    letter-spacing: var(--letter-spacing, 0.25px);
    margin-bottom: unset;
}

.homeheaderlbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px; /*18px;*/
    line-height: 16px; /*24px;*/
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
}

.homeheadersublbl {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing, 0.25px);
    color: var(--text-color, #333333);
}

.boldheader {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-medium, 14px);
    line-height: 24px;
    letter-spacing: var(--letter-spacing-x, 0.5px);
    color: var(--text-color, #333333);
}

.biodesc {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-medium, 14px);
    line-height: 17px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
}

.updatessection {
    background: var(--bg-color-a, #FFFFFF);
    padding: 20px;
    border-radius: 5px;
}

@media (max-width: 600px) {
    .homeheaderlbl {
        background: var(--bg-color-c, #e8e8e8);
        padding: 5px;
    }

    .descriptionheader {
        line-height: 15px;
    }

    .boldheader {
        line-height: 12px;
    }

    .biodesc {
        line-height: 12px;
    }
}

.pagerightside {
    /*min-height: 500px;*/
    min-height: 60vh;
    /*max-height: calc(100vh - 170px);*/ /*can be used for sticky grid*/
    padding-left: 10px;
    width: 100%;
    overflow-x: hidden; /*important, needed to make sure grids width is correct in view*/
}

.pagerightside-pl-0 {
    padding-left: 0px;
}

.basegrid-sticky-parent {
    max-height: calc(100vh - 325px);
}

@media (max-width: 600px) {
    .pagerightside {
        padding-left: unset;
    }
}

.slack-preview-p-section_block {
    font-family: Lato,Slack-Lato,Slack-Fractions,appleLogo,sans-serif;
    font-size: 15px;
    line-height: 1.46668;
    font-weight: initial;
    margin-top: 8px;
    margin-bottom: 4px;
}

.importtable-container {
    max-height: 200px;
    overflow-y: scroll;
}

@media (max-height: 1100px) {
    .importtable-container {
        max-height: 125px;
    }
}

@media (max-height: 1000px) {
    .importtable-container {
        max-height: 100px;
    }
}
/*#endregion */



/*#region Scheduler */
.schedule-overview .overview-toolbar.e-rtl + * {
    flex-direction: row-reverse;
}

.schedule-overview .overview-toolbar.e-toolbar {
    border-radius: 0;
}

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt {
        display: inline-grid;
    }

.material .schedule-overview .overview-toolbar.e-toolbar {
    border-style: solid;
}

.schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item:not(.e-separator) {
    padding: 3.5px;
}

.schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-icons.e-btn-icon,
.schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-tbar-btn-text {
    line-height: 23px !important;
    min-height: 23px !important;
    padding: 0px !important;
}

.schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item.e-template {
    margin: 0 5px;
}

.schedule-overview .overview-content {
    display: flex;
    border: 1px solid #E0E0E0;
    border-top-style: none;
}

    .schedule-overview .overview-content .left-panel {
        /*height: 700px;*/
        width: 100%;
        height: calc(100vh - 400px);
    }

    .schedule-overview .overview-content .right-panel {
        display: block;
        /*height: 700px;*/
        transform: translateX(0%);
        transition: transform .5s ease, width 500ms;
        width: 500px;
        height: calc(100vh - 400px);
    }

        .schedule-overview .overview-content .right-panel.hide {
            display: none;
            transform: translateX(100%);
            transition: transform .5s ease, width 500ms;
            width: 0;
        }

        .schedule-overview .overview-content .right-panel .control-panel {
            background: var(--main-bg-color, #F6F7F7);
            font-size: 14px;
            height: 100%;
            overflow: auto;
            padding: 15px;
            width: 100%;
            color: var(--text-color, #333333);
            font-family: var(--theme-font-family, Montserrat), sans-serif;
        }

            .schedule-overview .overview-content .right-panel .control-panel .col-row {
                display: flex;
                flex-wrap: wrap;
            }

            .schedule-overview .overview-content .right-panel .control-panel label {
                font-weight: 500;
            }

            .schedule-overview .overview-content .right-panel .control-panel .col-left {
                flex: 0 0 41.666667%;
                max-width: 41.666667%;
                margin-bottom: 1rem;
            }

            .schedule-overview .overview-content .right-panel .control-panel .col-right {
                flex: 0 0 58.333333%;
                max-width: 58.333333%;
                margin-bottom: 1rem;
            }

                .schedule-overview .overview-content .right-panel .control-panel .col-right .e-time-wrapper {
                    font-family: var(--theme-font-family, Montserrat), sans-serif;
                }

                .schedule-overview .overview-content .right-panel .control-panel .col-right .e-control-wrapper {
                    font-family: var(--theme-font-family, Montserrat), sans-serif;
                }

                    .schedule-overview .overview-content .right-panel .control-panel .col-right .e-control-wrapper .e-multi-select-wrapper .e-delim-values {
                        font-family: var(--theme-font-family, Montserrat), sans-serif;
                    }

                .schedule-overview .overview-content .right-panel .control-panel .col-right .e-checkbox-wrapper .e-frame.e-check {
                    background-color: var(--theme-color, #55AAAA);
                    border-color: var(--theme-color, #55AAAA);
                }

.schedule-overview .overview-scheduler {
    height: 100%;
    width: 100%;
}

.schedule-overview .time {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 5px;
}

.schedule-overview .calendar-export {
    min-width: 75px;
}

@media (max-width: 481px) {
    .schedule-overview .overview-content .right-panel {
        position: absolute;
        width: 90%;
    }

    .schedule-overview #printBtn,
    .schedule-overview .calendar-export {
        display: none;
    }
}

@media (max-width: 1024px) {
    .schedule-overview .overview-content .right-panel .control-panel .col-row {
        display: initial;
    }

        .schedule-overview .overview-content .right-panel .control-panel .col-row .saveprofilebtn {
            margin-bottom: 5px;
        }

    .schedule-overview .overview-content .right-panel .control-panel .col-left {
        flex: initial;
        max-width: initial;
        margin-bottom: initial;
    }

    .schedule-overview .overview-content .right-panel .control-panel .col-right {
        flex: initial;
        max-width: initial;
    }
}
/*#endregion */



/*#region dashboard settings*/
.dashboardparent.schedule-overview .overview-content {
    border: unset;
}

    .dashboardparent.schedule-overview .overview-content .left-panel {
        width: 100%;
        min-height: calc(100vh - 350px);
        height: unset;
    }

    .dashboardparent.schedule-overview .overview-content .right-panel {
        height: calc(100vh - 350px);
    }

        .dashboardparent.schedule-overview .overview-content .right-panel .control-panel {
            background: var(--main-bg-color, #F6F7F7);
            background: white;
        }

.dashboard-settingslist .e-list-item {
    width: 100%;
    height: 100px !important;
}

.dashboardparent .panel-chart-parent {
    height: calc(100% - 52px);
}

.dashboardparent .addbutton {
    color: white;
}

.dashboard-setting-img {
    width: 70px !important;
    height: 70px !important;
    image-rendering: pixelated;
}
/*#endregion */



/*#region dashboard chart filter component*/
.dashboardchartfiltercomponent {
    width: 100%;
    background: #efefef;
}

.dark-mode .dashboardchartfiltercomponent {
    background: var(--bg-color-a);
}

.dashboardchartfiltercomponent .basedropdownlist-chart {
    margin: 10px !important;
    height: 32px;
}

    .dashboardchartfiltercomponent .basedropdownlist-chart.e-popup-open {
        height: unset;
    }

.dashboardchartfiltercomponent .chartrefreshbtn {
    margin: 10px;
    height: 32px;
}

.dashboardchartfiltercomponent .calendar-export {
    margin: 10px;
    height: 32px;
}

.dashboardchartfiltercomponent .daterangepicker {
    margin: 10px !important;
    height: 32px;
    align-items: center;
}

    .daterangepicker .e-input {
        font-family: var(--theme-font-family, Montserrat), sans-serif !important;
    }
/*#endregion */



/*#region mindmap*/
.mindmapcomponent {
    background: var(--bg-color, white);
}

.mindmapparent .e-diagram {
    background: var(--bg-color, white) !important;
}

.mindmapcomponent .listitemdescription {
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: var(--letter-spacing-e, 0.05em);
    color: var(--text-color-a, #828282);
    margin-bottom: unset;
}
/*#endregion */



/*#region analytics/audit components*/
.auditparentsec {
    background: var(--bg-color-a, #FFFFFF);
    padding: 10px;
}

.auditcheckbox {
    padding-right: 10px;
}

.refreshbtn {
    background-color: transparent !important;
    border: unset !important;
    color: var(--text-color-a, #828282);
    margin-bottom: 20px;
}

    .refreshbtn:hover {
        background-color: var(--hover-color, #F2F4F6) !important;
    }

.refreshbtn-mbu {
    margin-bottom: unset;
}

.refreshbtn-hidepreview {
    text-orientation: sideways;
    writing-mode: vertical-rl;
    margin-left: 10px;
}

.refreshbtn-showpreview {
    text-orientation: initial;
    writing-mode: initial;
    margin-left: unset;
}

.refreshicon {
    color: var(--text-color-a, #828282);
    margin-right: 5px;
}
/*#endregion */



/*#region Switch Lbls*/
.togglelbl {
    padding-top: 10px;
    margin-left: 15px;
    font-family: var(--theme-font-family, Montserrat), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: var(--letter-spacing, 0.25px);
    /*color: #55AAAA;*/
}

@media (max-width: 600px) {
    .togglelbl {
        font-size: 12px;
        line-height: 12px;
    }
}
/*#endregion */



/*#region Ratings List*/
.ratingslistview {
    border: none !important;
    width: 100%;
}

    .ratingslistview .e-list-parent {
        width: 100%;
        justify-content: center !important;
        display: flex !important;
    }

    .ratingslistview .e-list-item .e-list-text {
        width: auto !important;
    }

    .ratingslistview .e-list-item {
        height: auto !important;
        padding: unset !important;
        float: left;
        border: unset !important;
        box-sizing: border-box;
        border-radius: 3px;
        margin: 5px 1% 5px 0px !important;
        font-family: var(--theme-font-family, Montserrat), sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: var(--letter-spacing, 0.25px);
        color: #333333;
    }

        .ratingslistview .e-list-item .e-text-content {
            display: flex !important;
            align-items: center !important;
        }

        .ratingslistview .e-list-item.e-active {
            background-color: transparent !important;
        }

        .ratingslistview .e-list-item.e-focused {
            background-color: transparent !important;
        }

        .ratingslistview .e-list-item[aria-selected="true"].e-focused {
            background-color: transparent !important;
        }

        .ratingslistview-w .e-list-item.e-focused {
            background-color: var(--bg-color, white) !important;
        }

        .ratingslistview-w .e-list-item[aria-selected="true"].e-focused {
            background-color: var(--bg-color, white) !important;
        }

        .ratingslistview .e-list-item.e-hover {
            background-color: #e9ecef !important;
            color: #212529;
        }
/*#endregion */



/*#region Breadcrumb*/
.e-breadcrumb .e-breadcrumb-separator {
    color: #53595F !important;
}

.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
    color: #0256D4 !important;
}

.e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
    color: #53595F !important;
}

.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-icon {
    color: #53595F !important;
}

.dark-mode .e-breadcrumb .e-breadcrumb-separator {
    color: #7b848d !important;
}

.dark-mode .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
    color: #408cfd !important;
}

.dark-mode .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
    color: #7b848d !important;
}

.dark-mode .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-icon {
    color: #7b848d !important;
}
/*#endregion */



/*#region Image Editor*/
.e-img-custom-wrapper {
    position: relative;
}

.e-img-custom-img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    align-self: start;
    padding: 35px;
    flex-shrink: 0;
}

.e-img-custom-edit {
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    top: 40px;
    left: 130px;
    background-color: var(--bg-color-b, #E0E0E0);
}

.e-img-custom-delete {
    top: unset;
    bottom: 40px;
}

.e-img-editicon {
    font-size: 20px !important;
    color: var(--text-color, #333333);
    position: absolute;
    left: 5px;
    top: 4px;
}


@media (max-width: 760px) {
    .e-img-custom-img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        padding: unset;
        margin-bottom: 10px;
    }

    .e-img-custom-edit {
        top: 0px;
        left: 0px;
    }

    .e-img-custom-delete {
        left: 0px;
        bottom: 15px;
        top: unset;
    }

    .e-img-editicon {
        left: 6px;
        top: 6px;
    }
}
/*#endregion */



/*#region Base SFRating*/
.e-rating-container.base-sfrating .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.base-sfrating .e-rating-item-container .e-rating-icon {
    background: linear-gradient(to right, #55AAAA var(--rating-value), transparent var(--rating-value)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-stroke: 1px #55AAAA !important;
}
/*#endregion */



/*#region Group Popup*/
.grouppopup-erg-bg {
    /*height: calc(50vw / 4) !important;*/
    height: unset !important;
    aspect-ratio: 4 / 1;
}

.grouppopup-profilepic {
    top: calc(50vw / 4 * 16 / 19) !important;
}

.grouppopup-main.e-popup {
    margin-top: 17px !important;
}



@media (min-width: 2200px) {
    .grouppopup-main.e-popup {
        width: 40% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(40vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(40vw / 4 * 16 / 19) !important;
    }
}

@media (min-width: 2400px) {
    .grouppopup-main.e-popup {
        width: 35% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(35vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(35vw / 4 * 16 / 19) !important;
    }
}

@media (min-width: 2800px) {
    .grouppopup-main.e-popup {
        width: 30% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(30vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(30vw / 4 * 16 / 19) !important;
    }
}

@media (max-width: 1600px) {
    .grouppopup-main.e-popup {
        width: 70% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(70vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(70vw / 4 * 16 / 19) !important;
    }
}

@media (max-width: 1000px) {
    .grouppopup-main.e-popup {
        width: 70% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(70vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(70vw / 4 * 16 / 19) !important;
    }
}


@media (max-width: 760px) {
    .grouppopup-main.e-popup {
        width: 95% !important;
    }

    /*.grouppopup-erg-bg {
        height: calc(95vw / 4) !important;
    }*/

    .grouppopup-profilepic {
        top: calc(95vw / 4 * 16 / 19) !important;
    }
}

.grouppopup-learnbtn {
    width: unset;
    border-radius: 20px;
    padding: 10px;
    font-weight: 500;
    line-height: 16px;
    font-size: 12px !important;
    padding: 10px 15px;
    background-color: #F6F7F7;
    border: 1px solid #e4e4e4;
}

    .grouppopup-learnbtn:hover {
        background-color: #e8e8e8;
    }
/*#endregion */