@import url(theme.css);
@import url('font-awesome/css/all.min.css');
@import url('controls/dropdown.css');
@import url('controls/modal.css');
@import url('controls/buttonv1.css');
@import url('controls/treeview.css');
@import url('controls/grid.css');
@import url('controls/wizard.css');
@import url('controls/slider.css');
@import url('controls/toast.css');
@import url('controls/notificationbanner.css');
@import url('controls/autocomplete.css');
@import url('controls/messagebox.css');
@import url('controls/toggleswitch.css');
@import url('controls/splitdropdown.css');
@import url('controls/listview.css');
@import url('controls/Card.css');
@import url('controls/information.css');
@import url('controls/datepicker.css');
@import url('controls/copybutton.css');
@import url('controls/checkbox.css');
@import url('controls/carousel.css');
@import url('controls/progressbar.css');
@import url('controls/scheduler.css');
@import url('controls/tabs.css');
@import url('controls/offcanvas.css');
@import url('controls/listbox.css');
@import url('controls/accordion.css');
@import url('controls/sidepanelquicklinks.css');
@import url('controls/tag.css');
@import url('controls/addresscard.css');
@import url('controls/breadcrumb.css');
@import url('controls/utilitynavbar.css');
@import url('controls/datachip.css');
@import url('controls/daterangepicker.css');
@import url('controls/error.css');
@import url('controls/multiselect.css');
@import url('controls/dualgridbox.css');
@import url('controls/combobox.css');
@import url('controls/detailslayout.css');
@import url('controls/splitter.css');
@import url('controls/swiper.css');
@import url('controls/herobanner.css');
@import url('controls/adminlayout.css');
@import url('controls/workorderprint.css');
@import url('controls/videocard.css');
@import url('controls/contentslider.css');
@import url('controls/videomodal.css');
@import url('controls/articlevideomodal.css');
@import url('controls/articlecard.css');
@import url('controls/faqaccordion.css');
@import url('controls/mediatext.css');
@import url('controls/faqs.css');
@import url('pages/articleview.css');
@import url('pages/alldownloads.css');
@import url('controls/downloaditemcard.css');

/*tag only styling*/
html, body {
    font-family: 'Carlito', san-serif !important;
    font-weight: normal;
    font-size: 13px; /*calc(6px + 0.390625vw); potential calculation for font-size regardless of breakpoints*/
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

label {
    color: #000;
    font-weight: var(--font-weight-bold);
}

input {
    color: rgba(102, 102, 102, 0.89);
    background-color: transparent;
    border: none;
    width: 100%;
    height: 100%;
    letter-spacing: -0.4px;
}

    textarea:focus, input:focus {
        outline: none;
    }

    input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

h1, h2, h3, h4, h5, h6 {
    line-height: 36px !important;
}

hr {
    margin-top: .3rem;
    margin-bottom: .3rem;
}

a {
    color: var(--brand);
}
/*--end tag only styling*/

/*scrollbar for elements*/
::-webkit-scrollbar {
    background-color: #CACACA;
    border-radius: 3px;
}

::-webkit-scrollbar {
    width: .6em;
    height: .6em;
    margin-right: -15px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--brand);
    border-radius: 25px;
}

textarea::-webkit-scrollbar {
    width: .6em;
    height: .6em;
    margin-right: -15px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(127, 127, 127, 0.2);
    border-radius: 25px;
}
/*--end scrollbar css*/

/*View Height classes*/
.vh-72 {
    height: 72vh;
}

.vh-65 {
    height: 65vh;
}

.vh-62 {
    height: 62vh;
}

.vh-59 {
    height: 59vh;
}

.vh-57 {
    height: 57vh;
}

.vh-55 {
    height: 55vh;
}
/*--end View Height classes*/

/*Height percent classes*/
.h-97 {
    height: 97%;
}

.h-95 {
    height: 95%;
}

.h-94 {
    height: 94%;
}

.h-93 {
    height: 93%;
}

.h-90 {
    height: 90%;
}

.h-85 {
    height: 85%;
}

.h-83 {
    height: 83%;
}

.h-82 {
    height: 82%;
}

.h-80 {
    height: 80%;
}

.h-65 {
    height: 65%;
}

.h-60 {
    height: 60%;
}

.h-57 {
    height: 57%;
}

.h-56 {
    height: 56%;
}

.h-55 {
    height: 55%;
}

.h-45 {
    height: 45%;
}

.h-40 {
    height: 40%;
}

.h-35 {
    height: 35%;
}

.h-20 {
    height: 20%;
}

.h-15 {
    height: 15%;
}

.h-fitContent {
    height: fit-content;
}
/*--end Height percent classes*/

/*Width percent classes*/

.w-96 {
    width: 96%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-65 {
    width: 65%;
}

.w-60 {
    width: 60%;
}

.w-56 {
    width: 56%;
}

.w-55 {
    width: 55%;
}

.w-48 {
    width: 48%;
}

.w-45 {
    width: 45%;
}

.w-41 {
    width: 41%;
}

.w-40 {
    width: 40%;
}

.w-35 {
    width: 35%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-fitContent {
    width: fit-content;
}
/*--end Width percent classes*/

/*--Min Width percent classes*/
.min-w-50 {
    min-width: 50%;
}

.min-w-20 {
    min-width: 20%;
}
/*--end Min Width percent classes*/

/*Height pixels classes*/
.hp-20 {
    height: 20px;
}

.hp-34 {
    height: 34px;
}

.hp-50 {
    height: 50px;
}

.hp-100 {
    height: 100px;
}
/*--end Height pixels classes*/

/*Default Height calcs for Grids*/
.gridHeight-1 {
    height: calc(100% - 2px);
}

.gridHeight-2 {
    height: calc(100% - 38px);
}

.gridHeight-3 {
    height: calc(100% - 50px);
}

.gridHeight-4 {
    height: calc(100% - 64px);
}

.gridHeight-5 {
    height: calc(100% - 67px);
}

.gridHeight-6 {
    height: calc(100% - 110px);
}

.gridHeight-7 {
    height: calc(100% - 156px);
}

.gridHeight-8 {
    height: calc(100% - 220px);
}
/*--end Default Height calcs for Grids*/

/*Default Height calcs for Content*/

.contentHeight-2px {
    height: calc(100% - 2px);
}

.contentHeight-38px {
    height: calc(100% - 38px);
}

.contentHeight-50px {
    height: calc(100% - 50px);
}

.contentHeight-64px {
    height: calc(100% - 64px);
}

.contentHeight-67px {
    height: calc(100% - 67px);
}

.contentHeight-110px {
    height: calc(100% - 110px);
}

.contentHeight-156px {
    height: calc(100% - 156px);
}

.contentHeight-190px {
    height: calc(100% - 190px);
}

.contentHeight-220px {
    height: calc(100% - 220px);
}

/*--end Default Height calcs for Content

/*Width pixels classes*/
.wp-45 {
    width: 45px;
}

.wp-60 {
    width: 60px;
}

.wp-200 {
    width: 200px;
}
/*--end Width pixels classes*/

/*Max-Height pixels classes*/
.mhp-46 {
    max-height: 46px;
}

.mhp-100 {
    max-height: 100px;
}

.mhp-200 {
    max-height: 200px;
}

.mhp-400 {
    max-height: 400px;
}
/*--end Max-Height pixels classes*/

/*Max-Height percentage classes*/
.max-h-90 {
    max-height: 90%;
}
/*--- end Max-Height percentage classes*/

/*Min-Height pixels classes*/
.minhp-0 {
    min-height: 0px !important;
}

.minhp-46 {
    min-height: 46px;
}

.minhp-72 {
    min-height: 72px !important;
}

.minhp-140 {
    min-height: 140px;
}

.minhp-200 {
    min-height: 200px;
}
/*--end Min-Height pixels classes*/

/*Max-Width pixel classes*/
.mwp-130 {
    max-width: 130px;
}

.mwp-150 {
    max-width: 150px;
}

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

.mwp-230 {
    max-width: 230px;
}

.mwp-320 {
    max-width: 320px;
}

.mwp-350 {
    max-width: 350px;
}

.mwp-730 {
    max-width: 730px;
}

.mwp-900 {
    max-width: 900px;
}

.mwp-950 {
    max-width: 950px;
}
/*--end Max-Height pixel classes*/

/*Min-Width pixels classes*/
.minwp-140 {
    min-width: 140px;
}

.minwp-170 {
    min-width: 170px;
}

.minwp-240 {
    min-width: 240px;
}

.minwp-400 {
    min-width: 400px;
}

.minwp-0 {
    min-width: 0px;
}
/*--end Min-Width pixels classes*/

/*Min-Width Fit Content classes*/
.minw-fit-content {
    min-width: fit-content;
}
/*--end Min-Width Fit Content classes*/

/*Margin Rem Classes*/
.mb-75 {
    margin-bottom: 0.75rem !important;
}

.mb1-5 {
    margin-bottom: 1.5rem;
}

.mt0-5 {
    margin-top: 0.5rem;
}

.my-35 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

.ms0-5 {
    margin-left: 0.5rem;
}
/*--end Margin Rem Classes*/

/*Default Margin Pixel Classes*/
/*Margin*/
.m-8px {
    margin: 8px !important;
}

.m-16px {
    margin: 16px !important;
}

.m-20px {
    margin: 20px !important;
}

.m-24px {
    margin: 24px !important;
}

.m-36px {
    margin: 36px !important;
}

.m-40px {
    margin: 40px !important;
}

.m-42px {
    margin: 42px !important;
}

/*Margin Top*/
.mt-8px {
    margin-top: 8px !important;
}

.mt-16px {
    margin-top: 16px !important;
}

.mt-20px {
    margin-top: 20px !important;
}

.mt-24px {
    margin-top: 24px !important;
}

.mt-32px {
    margin-top: 32px !important;
}

.mt-36px {
    margin-top: 36px !important;
}

.mt-40px {
    margin-top: 40px !important;
}

.mt-42px {
    margin-top: 42px !important;
}

/*Margin Negative Top*/
.mt-n6px {
    margin-top: -6px !important;
}

.mt-n12px {
    margin-top: -12px !important;
}

/*Margin Right*/
.me-8px {
    margin-right: 8px !important;
}

.me-16px {
    margin-right: 16px !important;
}

.me-20px {
    margin-right: 20px !important;
}

.me-24px {
    margin-right: 24px !important;
}

.me-36px {
    margin-right: 36px !important;
}

.me-40px {
    margin-right: 40px !important;
}

.me-42px {
    margin-right: 42px !important;
}

/*Margin Bottom*/
.mb-8px {
    margin-bottom: 8px !important;
}

.mb-16px {
    margin-bottom: 16px !important;
}

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

.mb-24px {
    margin-bottom: 24px !important;
}

.mb-36px {
    margin-bottom: 36px !important;
}

.mb-40px {
    margin-bottom: 40px !important;
}

.mb-42px {
    margin-bottom: 42px !important;
}

.mb-80px {
    margin-bottom: 80px !important;
}

.mb-190px {
    margin-bottom: 190px !important;
}

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

/*Margin Left*/
.ms-8px {
    margin-left: 8px !important;
}

.ms-16px {
    margin-left: 16px !important;
}

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

.ms-24px {
    margin-left: 24px !important;
}

.ms-30px {
    margin-left: 30px !important;
}

.ms-36px {
    margin-left: 36px !important;
}

.ms-40px {
    margin-left: 40px !important;
}

.ms-42px {
    margin-left: 42px !important;
}

.ms-49px {
    margin-left: 49px !important;
}

.ms-67px {
    margin-left: 67px !important;
}

.ms-72px {
    margin-left: 72px !important;
}
/*--end Default Margin Pixel Classes*/

/*Margin Rem Classes*/
.mb-75 {
    margin-bottom: 0.75rem !important;
}

.mb1-5 {
    margin-bottom: 1.5rem;
}

.mt0-5 {
    margin-top: 0.5rem;
}

.my-35 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
}

.ms0-5 {
    margin-left: 0.5rem;
}

.ms0-35 {
    margin-left: 0.35rem;
}
/*--end Margin Rem Classes*/

/*Default Padding Pixel Classes*/
/*Padding*/
.p-8px {
    padding: 8px !important;
}

.p-16px {
    padding: 16px !important;
}

.p-20px {
    padding: 20px !important;
}

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

.p-36px {
    padding: 36px !important;
}

.p-40px {
    padding: 40px !important;
}

.p-42px {
    padding: 42px !important;
}

/*Padding Top*/
.pt-8px {
    padding-top: 8px !important;
}

.pt-10px {
    padding-top: 10px !important;
}

.pt-16px {
    padding-top: 16px !important;
}

.pt-20px {
    padding-top: 20px !important;
}

.pt-24px {
    padding-top: 24px !important;
}

.pt-36px {
    padding-top: 36px !important;
}

.pt-40px {
    padding-top: 40px !important;
}

.pt-42px {
    padding-top: 42px !important;
}

/*Padding Right*/
.pe-8px {
    padding-right: 8px !important;
}

.pe-16px {
    padding-right: 16px !important;
}

.pe-20px {
    padding-right: 20px !important;
}

.pe-24px {
    padding-right: 24px !important;
}

.pe-36px {
    padding-right: 36px !important;
}

.pe-40px {
    padding-right: 40px !important;
}

.pe-42px {
    padding-right: 42px !important;
}

/*Padding Bottom*/
.pb-8px {
    padding-bottom: 8px !important;
}

.pb-10px {
    padding-bottom: 10px !important;
}

.pb-16px {
    padding-bottom: 16px !important;
}

.pb-20px {
    padding-bottom: 20px !important;
}

.pb-24px {
    padding-bottom: 24px !important;
}

.pb-36px {
    padding-bottom: 36px !important;
}

.pb-40px {
    padding-bottom: 40px !important;
}

.pb-42px {
    padding-bottom: 42px !important;
}

.pb-0px {
    padding-bottom: 0px !important;
}

/*Padding Left*/
.ps-8px {
    padding-left: 8px !important;
}

.ps-16px {
    padding-left: 16px !important;
}

.ps-20px {
    padding-left: 20px !important;
}

.ps-24px {
    padding-left: 24px !important;
}

.ps-30px {
    padding-left: 30px !important;
}

.ps-32px {
    padding-left: 32px !important;
}

.ps-36px {
    padding-left: 36px !important;
}

.ps-40px {
    padding-left: 40px !important;
}

.ps-42px {
    padding-left: 42px !important;
}

.ps-0px {
    padding-left: 0px !important;
}
/*--end Default Padding Pixel Classes*/

/*Padding X*/
.px-19px {
    padding-left: 19px;
    padding-right: 19px;
}

.px-20px {
    padding-left: 20px;
    padding-right: 20px;
}
/*--end Padding X Pixel Classes*/

/*Line Height classes*/
.lineHeightNormal {
    line-height: normal !important;
}

.lineHeight1 {
    line-height: 1;
}

.lineHeight34 {
    line-height: 34px;
}

.lineHeight25 {
    line-height: 25px;
}
/*--end Line Height classes*/

/*Letter Spacing classes*/
.letterSpacing0-5 {
    letter-spacing: 0.5px;
}

.letterSpacing1-17 {
    letter-spacing: 1.17px;
}
/*--end Letter Spacing classes*/

/*Loader classes*/
.spinner-grow {
    height: 0.75rem;
    width: 0.75rem;
}
/*--end Loader classes*/

/*font-weight bs override classes*/
.fw-500 {
    font-weight: 500 !important;
}
/*--end font-weight bs override classes*/

/*position bs override classes*/
.start-75 {
    left: 75% !important;
}

.end-43px {
    right: 43px !important;
}

.top-25 {
    top: 25% !important;
}

.top-15 {
    top: 15% !important;
}

.top-16 {
    top: 16% !important;
}

.top-17 {
    top: 17% !important;
}
/*--end position bs override classes*/

/*Min Height classes*/
.min-h-95px {
    min-height: 95px !important;
}
/*End Min Height classes*/

/*brand color classes*/
.brandTextWrapper {
    color: var(--brand);
    font-size: 100%;
}

.brand-text {
    color: var(--brand);
}

.brand-bg {
    background-color: var(--brand);
    color: var(--brand-text);
    transition: 0.5s;
}

    .brand-bg:hover, .brand-bg:active {
        background-color: var(--brand-hover) !important;
    }

    .brand-bg.show {
        background-color: var(--brand-hover);
    }

.noHoverBrand-bg {
    background-color: var(--brand);
    color: var(--brand-text);
}

.brand-bg-text {
    color: var(--brand-text);
}

.brand-active {
    color: var(--brand-active);
}

    .brand-active:hover {
        color: var(--brand-active);
    }

/**/

/*background color classes*/
.darkBrand-bg {
    background-color: var(--brand-hover);
}

/*grey scale color classes*/
.black-bg {
    background-color: #000;
}

.darkgrey-bg {
    background-color: #282828;
}

.mediumdarkgrey-bg {
    background-color: #353535;
}

.lighterdarkgrey-bg {
    background-color: #424242;
}

.grey-bg {
    background-color: #AAAAAA;
}

.mediumlightgrey-bg {
    background-color: #CACACA;
}

.lightgrey-bg {
    background-color: #f5f5f5;
}

.white-bg {
    background-color: #fff;
}
/*--end grey scale color classes*/

.tile-bg {
    background-color: #fafafa;
}

.panel-bg {
    background-color: #f3f3f3;
}

.legend-bg {
    background-color: #3c3c3f;
}

.limeGreen-bg {
    background-color: #2de100 !important;
}

.greyIcon-bg {
    background-color: #b6b6b6 !important;
}

.dashboardRed-bg {
    background-color: #ff0000 !important;
}

.details-bg {
    background-color: #f8f8f8;
}

.textbox-bg {
    background-color: #f6f6f6 !important;
}

.revisionsBtn-bg {
    background-color: #a2a2a2 !important;
}

    .revisionsBtn-bg:hover {
        background-color: #8c8c8c !important;
    }

.readOnly-bg {
    background-color: #d7d7d7;
}

.topPageTab-bg {
    background-color: #f8f8f8;
}

.clearFilterBtn-bg {
    background-color: #f0f0f0;
    border-color: #bdbdbd;
    transition: 0.5s;
}

    .clearFilterBtn-bg:hover {
        background-color: #bdbdbd;
        border-color: #bdbdbd;
    }

/*notification bg color classes*/
.successGreen-bg {
    background-color: var(--success-green-text);
}

.warningRed-bg {
    background-color: var(--warning-red-text);
}

.infoBlue-bg {
    background-color: #05CAF5;
}

.successGreen-text {
    color: var(--success-green-text) !important;
}

.warningRed-text {
    color: var(--warning-red-text) !important;
}

.infoBlue-text {
    color: #05CAF5;
}
/*--end notification bg color classes*/

/*bg colors for badges*/
.green-bg {
    background-color: #598B31;
}

.darkRed-bg {
    background-color: #8B3147;
}

.yellow-bg {
    background-color: #DF8D11;
}

.darkBadge-bg {
    background-color: #424242;
}

.blue-bg {
    background-color: #315B8B;
}

.gray-bg {
    background-color: #6F6F6F;
}

.pink-bg {
    background-color: #D63384;
}

.purple-bg {
    background-color: #59359A;
}

.orange-bg {
    background-color: #FD7E14;
}

.red-bg {
    background-color: #c6011c;
}

.cyan-bg {
    background-color: #0AA2C0;
}

.rose-bg {
    background-color: #801F4F;
}

.lightgreen-bg {
    background-color: #D1E7DD;
    border: solid 1px #75B798;
    border-radius: 0px;
    vertical-align: middle;
}

.lightblue-bg {
    background-color: #E7F1FF;
    border: solid 1px #6EA8FE;
}

.lightlilac-bg {
    background-color: #E0CFFC;
    border: solid 1px #A370F7;
}

.lightpink-bg {
    background-color: #F7D6E6;
    border: solid 1px #E685B5;
}

.lightmauve-bg {
    background-color: #E2D9F3;
    border: solid 1px #432874;
}

.lightorange-bg {
    background-color: #FFE5D0;
    border: solid 1px #FEB272;
}

.lightteal-bg {
    background-color: #CFF4FC;
    border: solid 1px #6EDFF6;
}

.lightaqua-bg {
    background-color: #79DFC1;
    border: solid 1px #4DD4AC;
}

.pastelblue-bg {
    background-color: #9EC5FE;
    border: solid 1px #3D8BFD;
}

.pastelpurple-bg {
    background-color: #C29FFA;
    border: solid 1px #A370F7;
}

.pastelteal-bg {
    background-color: #6EDFF6;
    border: solid 1px #3DD5F3;
}

.pastelorange-bg {
    background-color: #FECBA1;
    border: solid 1px #FEB272;
}

.pastelyellow-bg {
    background-color: #FFF3CD;
    border: solid 1px #FFE69C;
}

.pastelgold-bg {
    background-color: #FFE69C;
    border: solid 1px #FFDA6A;
}

.lightolive-bg {
    background-color: #A3CFBB;
    border: solid 1px #75B798;
}

.lightrose-bg {
    background-color: #E685B5;
    border: solid 1px #DE5C9D;
}



/*--end bg colors for badges*/
/*--end background color classes*/
/*text color classes*/
.placeholder-text {
    color: #878787;
}

.green-text {
    color: #598B31;
}

.darkRed-text {
    color: #8B3147;
}

.yellow-text {
    color: #DF8D11;
}

.blue-text {
    color: #315B8B;
}

.red-text {
    color: #c6011c;
}
/*--end text color classes*/

/*font sizes classes*/
.fontSize11px {
    font-size: 11px !important;
}

.fontSize6 {
    font-size: .6rem !important;
}

.fontSize7 {
    font-size: .7rem !important;
}

.fontSize8 {
    font-size: .8rem !important;
}

.fontSize9 {
    font-size: .9rem !important;
}

.fontSize1rem {
    font-size: 1rem !important;
}

.fontSize1-08rem {
    font-size: 1.08rem !important; /*14px with 13px as 1rem*/
}

.fontSize1-23rem {
    font-size: 1.23rem !important; /*16px with 13px as 1rem*/
}

.fontSize1-54rem {
    font-size: 1.54rem !important; /*20px with 13px as 1rem*/
}

.fontSize1-85rem {
    font-size: 1.85rem !important; /*24px with 13px as 1rem*/
}
/*--end font sizes classes*/

/*font family classes*/
.mondaFont {
    font-family: 'Monda' !important;
}

.monospaceFont {
    font-family: Monospace !important;
}
/*--end font family classes*/

/*border radius classes*/
.radius-4 {
    border-radius: 4px !important;
}

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

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

.radius-25 {
    border-radius: 25px !important;
}

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

.bottom-radius-5 {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.radius-theme {
    border-radius: var(--border-radius);
}

.top-radius-10 {
    border-radius: 10px 10px 0px 0px;
}
/*--end border radius classes*/

/*border classes*/
.defaultBorder {
    border: 1.2px solid #aaa;
}
/*--end border classes*/

/*box-shadow classes*/
.navLogoutBoxShadow {
    box-shadow: 0px 10px 20px 0px rgb(127 127 127 / 18%);
}

.boxShadowContainer {
    border: 1px solid #AAA;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
/*--end box-shadow classes*/
/*Overflow classes*/
.overflowXAutoOnly {
    overflow-x: auto;
    overflow-y: hidden;
}

.overflowYAutoOnly {
    overflow-x: hidden;
    overflow-y: auto;
}

.overflow-inherit {
    overflow: inherit !important;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-visible-important {
    overflow: visible !important;
}
/*--end Overflow classes*/

/*breadcrumb classes*/
.breadcrumbText {
    color: #424242;
    font-family: Carlito;
    font-size: 1.08rem; /*14px*/
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
    text-transform: uppercase;
}
/*--end breadcrumb classes*/

/*nav related classes*/
.navbarHeight {
    border-bottom: 5px solid var(--brand);
    z-index: 12;
    padding: 16px 24px;
    background: var(--elevation-surface-default);
}

#navbarSupportedContent {
    background: var(--elevation-surface-default);
}

.navbarContent {
    flex-wrap: wrap;
}

.navbar-text-color {
    color: var(--navbar-color);
}

.navbar-topbar-xpel {
    height: 2.5px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 10000;
    background-color: var(--navbar-top-background);
}

.containerBottom-100 {
    padding-bottom: 100px;
}



.nav-item a {
    color: #000 !important;
    background-color: transparent !important;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    background-color: var(--navitem-hover-background);
    border: none;
}

.nav-item .dropdown-menu {
    box-shadow: 0px 14px 18px 2px rgb(127 127 127 / 18%);
    padding: 0;
    margin-top: 0px !important;
    border-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .nav-item .dropdown-menu:hover {
        display: block;
    }

.nav-item .search-container img {
    margin-right: 4px;
}

.nav-link {
    padding: 0.3rem 1rem;
    color: var(--navbar-color);
}

    .nav-link:hover, .nav-link:focus {
        color: var(--brand);
    }

.navbar-collapse .search-container {
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border-input-default, #767676);
    background: var(--background-input-default-dark, #1D1C1C);
    display: flex;
    padding: var(--input-padding-vertical-md, 7px) var(--input-padding-horizontal-md, 12px) !important;
    justify-content: flex-end;
    align-items: center;
    gap: var(--input-gap-md, 8px);
    align-self: stretch;
    width: 100% !important;
    margin: 0;
}

#topNavLinks .nav-item:hover, #topNavLinks .nav-item:active {
    border-radius: var(--radius-sm) !important;
    background: var(--background-selected-subtle-default);
    opacity: 1 !important;
}

#topNavLinks .nav-item a:active {
    color: var(--brand);
    padding-bottom: 0px !important;
}

#topNavLinks .nav-link:active {
    padding-bottom: 0px !important;
}


#topNavLinks .nav-item.dropdown {
    color: var(--text-primary, #262525);
    /* Navigation/Primary */
    font-family: var(--font-family-heading);
    font-size: var(--text-navigation-primary);
    font-style: normal;
    line-height: 120%; /* 19.2px */
    margin: 0px 2px;
}

#topNavLinks li:first-child {
    margin-left: 0px !important;
}

#topNavLinks li:last-child {
    margin-right: 0px !important;
}

#topNavLinks .nav-item:has(.active) {
    border-radius: var(--radius-sm, 4px) !important;
    background: var(--background-selected-subtle-default, #E8F2F2) !important;
}

/*--end nav related classes*/
/*disabled classes*/
.disabled {
    color: #000;
    opacity: 0.5 !important;
    background: #f1f1f1;
}

div.disabled {
    background: #f1f1f1 !important;
    color: #757575;
    opacity: 1;
}

textarea:disabled {
    background: #f1f1f1 !important;
    color: #757575;
    opacity: 1;
}

.nav-link.disabled {
    color: rgba(0,0,0,.3) !important;
}
/*--end disabled classes*/

/*Read More/Less Classes*/
.lessNoteClass {
    max-height: 55px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.moreNoteClass {
    max-height: auto;
    width: 100%;
}

.readMoreBtn {
    display: none;
}
/*--end Read More/Less Classes*/

/*Text Indent Classes*/
.textIndentNone {
    text-indent: 0px !important;
}

.textIndent6 {
    text-indent: 6px !important;
}

.textIndent10 {
    text-indent: 10px !important;
}

.textIndent12 {
    text-indent: 12px !important;
}

.textIndent14 {
    text-indent: 14px !important;
}

.textIndent16 {
    text-indent: 16px !important;
}

.textIndent18 {
    text-indent: 18px !important;
}

.textIndent20 {
    text-indent: 20px !important;
}

.textIndent24 {
    text-indent: 24px !important;
}

.textIndent38 {
    text-indent: 38px !important;
}
/*--end Text Indent Classes*/

/*Padding Classes*/
.px0 {
    padding-left: 0px;
    padding-right: 0px;
}

.pt-1p {
    padding-top: 1px;
}

.ps-1p {
    padding-left: 1px;
}

.pt0-15rem {
    padding-top: 0.15rem;
}

.p0-6rem {
    padding: 0.6rem;
}

.p1-5rem {
    padding: 1.5rem;
}

.ps1-5rem {
    padding-left: 1.5rem;
}

.pt1-5rem {
    padding-top: 1.5rem;
}

.ps2-75rem {
    padding-left: 2.75rem;
}

.ps3rem {
    padding-left: 3rem;
}

/*Extension of pb class*/
.pb-6 {
    padding-bottom: 65px;
}

.pb-7 {
    padding-bottom: 80px;
}
/*--end Padding Classes*/

/*Z-Index Classes*/
.zIndex2 {
    z-index: 2;
}

.zIndex10 {
    z-index: 10;
}
/*--end Z-Index Classes*/

/*Flex-grow and min-width class*/
.flexGrow-MinWidth0 {
    flex-grow: 1;
    min-width: 0px;
}

.flexGrow-MinHeight0 {
    flex-grow: 1;
    min-height: 0px;
}

.valid.modified:not([type=checkbox]) {
    /*border: 1.5px solid #26b050 !important;*/
}

.invalid {
    border: 1.5px solid red !important;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.dapLogo {
    content: var(--logo);
    padding: 0;
    margin: 0;
    width: var(--logo-medium-width);
    height: auto;
}

.page {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100vh;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center;
    background-color: #FFFFFF;
    color: #000;
    overflow: auto;
}

.main {
    flex: 1;
    background-color: rgba(0,0,0,0.04);
    overflow: auto;
    width: 100%;
}

#DAPSupportNumber {
    display: var(--ShowDAPSupport) !important;
    font-size: 1.08rem; /*14px*/
}

    #DAPSupportNumber i {
        font-size: 1.85rem !important; /*24px*/
    }

#WhiteLabelNews {
    display: var(--ShowWhiteLabelNews) !important;
}

.DAPReleaseNotes {
    display: var(--ShowDAPSupport) !important;
}

.logoutContainer {
    background-color: #fff;
    border-radius: 0px;
    position: absolute;
    z-index: 1000;
}

    .logoutContainer .dropdown {
        text-indent: 0px;
    }

    .logoutContainer .dropdownWrapper {
        display: flex;
        align-items: center;
    }

.loginContainer {
    background-color: #eaeaea;
    border-radius: var(--border-radius);
    padding: 3px;
}

.locationLogOutImage {
    padding: 6px 7px !important;
    box-shadow: var(--location-logout-box-shadow);
}

.locationDropdown .dropdown-button {
    padding: 2px 6px !important;
}

.locationDropdown .dropdown-menu {
    top: 38px;
    left: -8px;
    width: auto;
    height: 400px;
}

#locationPingIcon {
    content: var(--brand-location-icon);
    width: 25px;
}

.logoutContainerArrow {
    content: var(--navbar-up-arrow);
    width: 23px;
}

.refreshVersionBtn img {
    content: var(--brand-refresh-icon);
}

.iconWidth12 img {
    width: 12px;
}

.left {
    align-items: flex-start;
    justify-content: flex-start;
}

.right {
    align-items: flex-start;
    justify-content: flex-end;
}

.rightAlignedFooterBtn {
    justify-content: flex-end;
}

    .rightAlignedFooterBtn .modal-button {
        margin-right: 20px !important;
    }

.top-row a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mainContent {
    padding-top: 24px;
    padding-left: 36px;
    padding-right: 36px;
}

.contentContainer {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tileContainer {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.calculateBtn {
    background: transparent !important;
    color: #5e5e5e;
    border: 2px solid #c4c4c4;
    padding: 0px 28px !important;
    line-height: 44px;
    width: 36%;
    margin-left: auto;
}

.formBorder form {
    border-radius: 6px;
    border: 1px solid var(--aaaaaa, #AAA);
    background: #FFF;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 1rem 1.75rem;
}

.formTitle {
    color: var(--Black, #000);
    font-family: Carlito;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background-color: rgb(127,127,127,0.1);
}

.dashboardBadge-pill {
    padding-right: 15px !important;
    padding-left: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.searchBtn {
    padding-left: 25px;
    padding-right: 25px;
}

    .searchBtn img {
        transform: rotate(320deg);
    }

.detailWrapper {
    display: flex;
    min-height: 100px;
    height: fit-content;
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    padding: 1rem;
    border: none !important;
    width: 100%;
}

    .detailWrapper input {
        color: black !important;
    }

.notesWrapper {
    display: flex;
    min-height: 72px;
    height: fit-content;
    padding: 0px;
    border: none !important;
    width: 100%;
}

    .notesWrapper:hover {
        background-color: #f8f8f8;
        border-radius: var(--border-radius);
    }

.notesStampWrapper {
    background-color: transparent !important;
    color: #282828 !important;
    margin-bottom: 0px !important;
    margin-top: -16px !important;
}

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

.notesStampLeftDivider {
    width: 100%;
    margin-left: -10%;
}

.notesStampRightDivider {
    width: 100%;
    margin-right: -10%;
}

.editNoteBtn {
    padding: 9px !important;
    border-radius: 7px;
    margin-top: 1px;
}

.notesWrapper .editNoteBtn {
    display: none;
}

.notesWrapper:hover .editNoteBtn {
    display: flex;
}

.editNoteBtn img {
    content: var(--edit-icon);
}

.notesWrapper:hover .readMoreBtn {
    display: flex;
}

.notesWrapper .card-footer {
    height: 32px;
}

.notesCardGroup {
    max-height: calc(100% - 150px);
    overflow: auto;
    overflow-x: hidden;
    padding-right: 15px;
    padding-top: 20px;
}

.truncateCardTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.messageIcon {
    margin-top: 3px !important;
}

    .messageIcon > div {
        width: inherit;
    }

.dialogMaxHeightCalc {
    max-height: calc(100vh - 238px);
}

.col8Extra {
    flex: 0 0 auto;
    width: 68.666667%;
}

.noRightPadding input {
    padding-right: 0px;
}

.font-circle-innercircle {
    vertical-align: top;
    --fa-inverse: var(--brand);
    color: #c6c6c6;
}

#vehicleListLegend::after {
    display: none !important;
}

#smallLegend {
    display: block !important;
}

#largeLegend {
    display: none !important;
}

.headerSize {
    font-size: 112%;
}

.customerTag {
    border-radius: var(--border-radius);
    border: 1px solid #424242;
    min-width: 293px;
    height: auto;
    position: relative;
}

.customerTagName {
    line-height: 130%;
    font-size: 1.23rem; /*16px*/
    font-weight: 700;
    font-style: normal;
}

.customerTag .customerIconSection {
    background-color: var(--brand);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding-left: 5px;
    padding-right: 5px;
}

.customerHeader-lg {
    font-size: 1.85rem; /*24px*/
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 31.2px */
    letter-spacing: 0.264px;
}

.customerHeader-md {
    font-size: 1.54rem; /*20px*/
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.customerHeader-sm {
    font-size: 1.23rem; /*16px*/
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.customerHeader-xs {
    font-size: 1rem; /*13px*/
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.headerText-jumbo {
    font-size: 2.77rem; /*36px*/
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.44px;
}

.formWidth-100 form {
    width: 100%;
}

.formBottom-100 form {
    padding-bottom: 100px;
}

.formHeight-100 form {
    height: 100%;
}

.tileFooter {
    position: absolute;
    bottom: -44px;
    right: -11px;
    width: 100%;
    height: 40px;
}

.spaceBetweenContentFooter > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.userCircle {
    width: 46px;
    height: 45px;
    position: relative;
    line-height: 0;
}

.userCircleText {
    position: absolute;
    bottom: 50%;
    width: 100%;
}

.userCircleImage {
    position: absolute;
    bottom: 27%;
    width: 100%;
}

.difficultyCircle {
    width: 30px;
    height: 30px;
    position: relative;
    line-height: 0;
    background-color: #a5a5a5;
    border-radius: 50%;
}

.difficultyCircleText {
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
}

.coverageXIconBtn {
    padding: 5px !important;
    margin: 2px;
}

.coverageAddIconBtn {
    padding: 5px 8px !important;
    margin: 2px;
}

.refresh-button {
    padding: 7px 8px !important;
}

    .refresh-button img {
        content: var(--refresh-icon);
    }

.childNodePlusBtn {
    padding: 8px 10px;
}

.rename-icon img {
    content: var(--rename-icon);
}

.minus-icon img {
    content: var(--minus-sign);
}

.node-action-button {
    padding: 5px;
}

.iconCenter img {
    margin-left: auto !important;
    margin-right: auto !important;
}

#iconOnly {
    display: flex;
}

.no-margin-top {
    margin-top: 0px !important;
}

.searchWrapper {
    border-radius: 30px;
    background-color: #fff;
    padding: 25px 40px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 5px;
}

.sectionWrapper {
    border-radius: 20px;
    background-color: #fff;
    padding: 20px 30px;
}

    .sectionWrapper + .sectionWrapper {
        margin-top: 8px;
    }

.settingsSectionWrapper {
    min-width: 280px;
    max-width: 418px;
    height: 180px;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
}

#partPropDialog .sectionWrapper {
    padding: 6px 30px;
}

#friends .card {
    height: 220px !important;
    width: 220px;
}

.line {
    position: absolute;
    background: #eee;
    top: 100px;
    right: 50%;
    width: 1px;
    height: 380px;
}

.leadDialogLine {
    position: absolute;
    background: #eee;
    top: 6px;
    right: 60%;
    width: 1.5px;
    height: calc(100% - 38px);
}

.laborDialogLine {
    position: absolute;
    background: #eee;
    top: 75px;
    right: 50%;
    width: 1px;
    height: 345px;
}

.partPropsRtPosition {
    position: absolute;
    top: 24px;
    right: 34px;
    font-weight: var(--font-weight-bold);
}

.allPartsPadding {
    padding: 12px !important;
}

.adjustYearHeight {
    height: 45px;
}

.userReviewTextArea {
    height: 100px;
    padding: 15px 24px;
    border-radius: var(--border-radius);
    border: 1.2px solid #aaa;
}

.userReviewThumbnailImage {
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: white;
}

.userReviewThumbnailVideo {
    max-width: 130px;
    min-height: 110px;
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: white;
}

.userReviewThumbnailArea {
    height: 110px;
    width: 130px;
    cursor: pointer;
}

.carsSectionWrapper {
    border-radius: 30px;
    background-color: #3c3c3f;
    padding: 15px 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #fff;
}

.partInfoWrapper {
    background-color: #DCDCDC;
}

.infoImageWrapper {
    background-image: url(../Assets/infoImageBackground.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 150px;
}

.leadDialogWidth {
    width: 500px;
    max-height: calc(100% - 100px);
}

.cutbankDialogMaxHeight {
    width: 500px;
    max-height: calc(100% - 27px);
}

    .cutbankDialogMaxHeight .modal-body {
        overflow: auto;
        height: 525px;
    }

.cutbankDialogYellow {
    background-color: #fec746;
}

.partPreviewGrid .k-grid tr.k-master-row {
    background-color: white;
}

.partPreviewGrid .k-grid td.k-state-selected, .partPreviewGrid .k-grid td.k-selected, .partPreviewGrid .k-grid tr.k-state-selected > td, .partPreviewGrid .k-grid tr.k-selected > td {
    background-color: white;
}

.partPreviewGrid .k-grid tbody tr:not(.k-detail-row):hover, .partPreviewGrid .k-grid tbody tr:not(.k-detail-row).k-state-hover, .partPreviewGrid .k-grid tbody tr:not(.k-detail-row).k-hover {
    background-color: white;
}

.partPreviewGrid .k-grid th:first-child, .partPreviewGrid .k-grid td:first-child {
    padding-left: 19px;
}

.partPreviewRtPosition {
    position: absolute;
    top: 27px;
    right: 66px;
    font-weight: var(--font-weight-bold);
    font-size: 1.25em;
    width: 50%;
    text-align: right;
}

div.ValidInputEmail {
    position: relative;
}

    div.ValidInputEmail::before {
        position: absolute;
        top: 42px;
        right: 12px;
        content: "";
        background-image: url(../Assets/checkIconSVG.svg);
        background-size: 12px;
        width: 20px;
        height: 20px;
        z-index: 10;
        background-color: var(--brand);
        background-repeat: no-repeat;
        border-radius: 50%;
        background-position: center;
    }

    div.ValidInputEmail input {
        padding: 8px 40px 8px 10px !important;
    }

.homePageContainer {
    height: calc(100% - 2px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pageContent {
    flex-grow: 1;
    min-height: 0px;
    overflow: auto;
}

.designTool {
    height: calc(100% - 112px);
}

.badge-pill {
    height: 18px;
    line-height: 144%;
    padding: 1px 9px;
    border-radius: 25px;
}

.badge-bar {
    height: 18px;
    line-height: 144%;
    padding: 1px 5px;
}

.badge {
    font-size: 0.92rem; /*12px*/
    font-weight: 500;
}

.plannedBadgePadding {
    padding: 5px 11px 5px 11px !important;
    font-weight: bold !important;
    line-height: 120% !important;
    height: auto;
}

.partBadgePadding {
    padding: 6px 19px 5px 19px !important;
}

.sendWarrDocsBtn {
    height: 31px;
}

    .sendWarrDocsBtn.disabled, .sendWarrDocsBtn:disabled {
        background-color: #f1f1f1;
    }

.search-container {
    border-radius: var(--border-radius);
    border: 1.2px solid #aaa;
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 8px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .search-container i {
        font-size: 1rem; /*13px*/
        padding-left: 15px;
        padding-right: 2px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .search-container img {
        margin-right: 5px;
    }

    .search-container .button-container > img {
        margin-right: 0px !important;
    }

.search-input {
    border: none;
    width: 95%;
    background-color: transparent;
    outline: none;
    margin-left: 5px;
    font-weight: 600;
    color: var(--navbar-color);
}

    .search-input::-webkit-input-placeholder {
        font-weight: lighter;
    }

.footSpecial-input {
    border: none;
    width: 95%;
    background-color: transparent;
    outline: none;
    margin-left: 5px;
    font-weight: lighter;
}

    .footSpecial-input::-webkit-input-placeholder {
        font-weight: lighter;
    }

.footSpecialBtnPosition {
    position: absolute;
    top: -13px;
    right: 0px;
    z-index: 1;
}

.sfNotesHeight {
    height: calc(100% - 5px);
}
/*CSS Classes for DropdownButtons*/
.partMediaDropButton {
    background-color: var(--brand);
    margin-top: 0.5rem;
    border: none;
    border-radius: 3.2px;
}

    .partMediaDropButton button {
        color: var(--brand-text) !important;
        font-weight: var(--font-weight-bold);
        margin-top: 1px;
    }

    .partMediaDropButton .dropdown-med {
        background-color: var(--brand);
        color: var(--brand-text);
        border: none;
        border-radius: 3.2px;
    }

    .partMediaDropButton .dropdown-item {
        font-weight: var(--font-weight-bold);
    }

    .partMediaDropButton .placeholder-text {
        color: #000;
        margin-right: 18px;
    }

.bulkActionDropButton {
    height: fit-content;
    padding: 0px;
    border: none;
    /*    margin-left: 13px;*/
    border-radius: 3.2px;
}

    .bulkActionDropButton button {
        font-weight: var(--font-weight-bold);
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

        .bulkActionDropButton button span {
            color: inherit !important;
        }

    .bulkActionDropButton.disabled {
        color: unset !important;
        opacity: unset !important;
        background: unset;
    }

.dropdown.bulkActionDropButton .dropdown-icon {
    color: unset;
    right: -2%;
    top: 7px;
}

.dropdown.bulkActionDropButton .dropdown-button {
    color: unset;
    padding-right: 27px !important;
}

.dropdown.bulkActionDropButton .dropdown-item {
    color: #CACACA !important;
}

.bulkActionDropButton .dropdown-med {
    color: var(--brand-text);
    border: none;
    border-radius: 3.2px;
}

.warrantyApprovalDropButton {
    background-color: var(--brand);
    height: fit-content;
    padding: 0px;
    border: none;
    margin-left: 13px;
    border-radius: 3.2px;
}

    .warrantyApprovalDropButton button {
        color: var(--brand-text) !important;
        font-weight: var(--font-weight-bold);
        padding-left: 10px !important;
        padding-right: 8px !important;
    }

    .warrantyApprovalDropButton .dropdown-med {
        background-color: var(--brand);
        color: var(--brand-text);
        border: none;
        border-radius: 3.2px;
    }

    .warrantyApprovalDropButton .dropdown-item {
        font-weight: var(--font-weight-bold);
    }

    .warrantyApprovalDropButton .placeholder-text {
        color: #000;
        margin-right: 8px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .warrantyApprovalDropButton.dropdown span.dropdown-icon {
        top: 24%;
        right: 0%;
    }

/*--End CSS Classes for DropDownButtons*/
.howToContainer {
    height: 93px;
    overflow: hidden;
    padding: 0;
    width: 100px;
    position: relative;
    left: 0;
    top: 0;
}

.howToPlayIcon {
    width: 45px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

.playIconWrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
}

.howToImage {
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.howToImageWrapper {
    position: absolute;
    right: -32%;
}

.howToText {
    width: 62%;
}

#instagramFeed.animateFeed div {
    animation: feedScroll 30s linear infinite;
    animation-delay: 1s;
}

#instagramFeed.animateFeed:hover {
    animation-play-state: paused;
}

#instagramFeed .imageSquares {
    height: 100px;
    width: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    #instagramFeed .imageSquares div {
        max-height: fit-content;
    }

#decayDate input {
    padding-left: 0px;
    padding-right: 0px;
}

@keyframes feedScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-140px, 0, 0); /* The image width */
    }
}

#partPropDialog .modal-content {
    height: 100%;
}

.nodeDialogWidth {
    min-width: 500px;
}

.commandSVGWidth img {
    width: 20px;
}

.commandSVGSmallerWidth img {
    width: 16px;
    min-width: 16px !important;
    min-height: 16px !important;
}

.commandStatusWidth {
    padding: 5px 6px !important;
}

    .commandStatusWidth img {
        width: 17px;
    }

.commandCopyWidth {
    padding: 5px 8px !important;
}

    .commandCopyWidth img {
        width: 14px;
    }

.dfxCommandSVGWidth {
    padding: 1px !important;
}

    .dfxCommandSVGWidth img {
        width: 27px;
    }

.rotate320 img {
    transform: rotate(320deg);
}

.rotate180 {
    transform: rotate(180deg);
}

.partPreviewIconPadding {
    padding: 6px 7px !important;
}

.favoritesIconPadding {
    padding: 4px 6.5px 6px 7px !important;
}

.laborCoverageClassSection .laborGridMaxHeight {
    max-height: 197px;
    overflow: auto;
}

.laborHourlyRateField {
    height: 41px;
    padding-left: 10px;
}

.can-customize {
    pointer-events: auto !important;
}

.cannot-customize {
    pointer-events: none !important;
}

.imgContain {
    object-fit: contain;
}

.woPartSearchImageModal img {
    max-height: 500px !important;
}

.userCircleIcon {
    content: var(--user-circle-icon);
}

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

.partDetailsPanelHeight {
    height: calc(100% - 86px);
    overflow: auto;
}

.partDetailsNotesSection {
    max-height: calc(100% - 50px);
    overflow: auto;
}

.addPCIcon > span {
    display: block !important;
}

.addPCIcon img {
    content: var(--brand-plus-sign);
}

.logoutContainerWidth {
    width: 235px;
}

.pCNumAndAdjContainer {
    width: 480px;
}

.pCNumAndAdjFields {
    padding: 5px 10px !important;
    height: 32px !important;
}

    .pCNumAndAdjFields input {
        text-align: center;
    }

.coverageClassSplitText {
    background-color: var(--brand);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    white-space: nowrap !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    color: black;
}

.coverageClassSplitBtn {
    height: 33px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    width: auto !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    background-color: #ea9c15;
}

.wcTextEditorHeight > .k-editor {
    height: 250px !important;
    width: 100% !important;
    padding: 16px 20px 20px 20px;
    border-radius: 6px;
    border: 1.2px solid #aaa;
}

    .wcTextEditorHeight > .k-editor .k-button {
        margin-right: 8px;
    }

.transactionAmountPill {
    z-index: 0;
    font-size: 1rem;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 13px;
    padding-top: 13px;
    border-radius: 10px;
    line-height: 15px;
}

.firstArrow {
    top: 40%;
    left: 19%;
}

.secondArrow {
    top: 40%;
    left: 48%;
}

.thirdArrow {
    top: 40%;
    left: 73.5%;
}

.readOnlyMaskInputWrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1.2px solid #aaa;
    border-radius: var(--border-radius);
    padding-right: 1rem;
    padding-left: 1rem;
}

    .readOnlyMaskInputWrapper input {
        text-indent: 1px;
        border: none;
    }

    .readOnlyMaskInputWrapper .invalid {
        border: unset !important;
    }

    .readOnlyMaskInputWrapper:has(.invalid) {
        border: 1.5px solid red;
    }

.inputVerticalLine {
    height: 22px;
    background-color: #aaa;
    opacity: 0.5;
    width: 1.5px;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 11px;
    margin-right: 10px;
}

.verticalLine {
    height: 22px;
    background-color: #aaa;
    opacity: 0.5;
    width: 1px;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 11px;
    margin-right: 10px;
}

#SubscriptionGeneral > form {
    width: 100%;
}

#ManagePartDetails > form {
    width: 100%;
}

/*Help section Css*/
.downloadIcon img {
    content: var(--download-icon);
}

#xpelDownloadInstructions {
    display: var(--ShowXPELInstructions);
}

#whiteLabelDownloadInstructions {
    display: var(--ShowWhiteLabelInstructions);
}
/*--end Help section Css*/
/*drag drop styles*/
/*add this to avoid flickering*/
.drag-drop-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.drag-drop-dropzone {
    min-height: 50px;
}

.drag-drop-spacing {
    height: 10px;
}

.drag-drop-spacing-dragged-over {
    padding: 25px;
}

.drag-drop-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .drag-drop-dragged-over > div {
        background-color: lightgray;
        opacity: 0.6;
        animation: blinker 1s linear infinite;
    }

.drag-drop-dragged-over-denied {
    background-color: red;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.drag-drop-in-transit {
    opacity: 0;
}

    .drag-drop-in-transit > div {
        opacity: 0;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
/*--end drag drop styles*/

/* KEEP THIS IS USED FOR A SELECTOR */
/* ReSharper disable once DeclarationIsEmpty */
.number-input-class {
}

.number-input-nav {
    position: relative;
    margin-top: -2px;
    display: flex;
}

.number-input-button {
    position: relative;
    cursor: pointer;
    border: none;
    width: 21px;
    text-align: center;
    font-size: 1rem;
    color: rgba(0,0,0,.2);
    font-family: "FontAwesome" !important;
    line-height: 1.5;
    padding: 0;
    background: transparent;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    .number-input-button:active {
        background: transparent;
    }

    .number-input-button.number-input-up {
        position: absolute;
        top: 2px;
        right: -5px;
        height: 15px;
        color: black;
    }

    .number-input-button.number-input-down {
        position: absolute;
        bottom: 4px;
        right: -5px;
        height: 15px;
        color: black;
    }

#addPartNumPartDetails {
    font-size: 88%;
    line-height: 14px;
    font-weight: var(--font-weight-bold);
    color: #666666;
    border-bottom: 1px solid #b7b7b7;
    text-decoration: none;
    padding: 0 1px;
    margin-bottom: -15px
}

.tableWrapper.min {
    margin: 0;
}

.tableWrapper {
    margin: 20px 0;
    overflow: auto;
}

    .tableWrapper.min > table {
        border-spacing: 0;
    }

    .tableWrapper > table {
        display: flex;
        justify-content: center;
        border-collapse: separate;
        border-spacing: 0 8px;
        line-height: 1.8rem;
    }

    .tableWrapper.min > table tbody tr {
        background-color: transparent;
        color: #2d2d2d;
    }

    .tableWrapper > table tbody tr {
        text-align: left;
        background-color: #fbfbfb;
        color: #565656;
    }

    .tableWrapper.min.list > table tbody tr th {
        color: #9c9c9c;
        padding: 2px 8px;
        font-weight: normal;
    }

    .tableWrapper tr td:first-child, .tableWrapper tr th:first-child {
        border-radius: 40px 0 0 40px;
        padding-left: 32px !important;
    }

    .tableWrapper.min.list > table tbody tr td {
        padding: 2px 8px;
    }

    .tableWrapper.min tr td:last-child, .tableWrapper.min tr th:last-child {
        padding-top: 4px !important;
    }

    .tableWrapper.min > table tbody tr td {
        padding: 8px;
        font-size: 88%;
    }

    .tableWrapper.min tr td {
        border-width: 0 !important;
    }

    .tableWrapper tr td:last-child, .tableWrapper tr th:last-child {
        border-radius: 0 40px 40px 0;
        padding-right: 32px !important;
        padding-top: 0 !important;
    }

    .tableWrapper > table tbody tr td {
        padding: 22px 12px;
        border-width: 1px;
        border-style: solid;
        border-color: #fff;
        border-left-width: 0;
        border-right-width: 0;
        font-size: 112%;
    }

.input-form-container {
    background-color: #fff;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 40px !important;
    padding: 8px 10px;
    outline: 0;
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    color: #000;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-weight: 400;
    font-size: 100%;
    text-indent: 14px;
    border: 1.2px solid #aaa;
}

    .input-form-container:disabled {
        background: #f1f1f1;
        color: #757575;
    }

    .input-form-container.k-disabled {
        background: #f1f1f1;
        color: #757575;
        opacity: 1;
    }

#LocationItems .input-form-container{
    height: 28px !important;
    padding: 5px 9px !important;
    text-indent: 0px !important;
}

#LocationItems .input-form-container input {
    text-align: end !important;
}

#AddWorkItem .input-form-container {
    height: 34px !important;
    padding: 7px 10px;
}

#AddWorkItem .k-numerictextbox.textboxwitharrows {
    display: flex !important;
}

.itemTag {
    border: 1.2px solid #aaa;
    border-radius: var(--border-radius);
    background-color: #ffffff;
}

div.flex-column > label, div:not(.d-flex.align-items-center) > label {
    margin-bottom: 8px !important;
    text-transform: uppercase;
}

    div.flex-column > label.mb-0px {
        margin-bottom: 0px !important;
    }

div.tagContainer div:not(.d-flex.align-items-center) > label {
    margin-bottom: 0px !important;
}

div:not(.d-flex.align-items-center).form-check > label {
    margin-bottom: 0px !important;
}

.form-floating .input-form-container {
    text-indent: 0px;
}

.form-floating label {
    padding: 0.85rem 0.75rem 0.85rem 1.5rem;
}

.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.325rem;
    padding-bottom: 0.325rem;
}

.form-floating > .form-control, .form-floating > .form-select {
    height: 3.3rem;
    line-height: 1;
}

.form-control:focus {
    background-color: none;
    border: 1.2px solid #aaa;
    box-shadow: none;
}

.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    inset: 1rem 1.375rem;
}

.maskFloatingLabel {
    padding-left: 1.5rem !important;
}

.form-floating:has(.maskFloatingLabel) label {
    padding-left: 2.5rem;
}

.generalLabel label {
    margin-left: 15px;
    color: #000;
}

.indentLabel > label {
    margin-left: 24px;
}

.collapseBtn {
    display: inline !important;
}

.fullRowBtn {
    display: none !important;
}

#WorkOrderPhotos > div > div {
    border: 1px solid #f5f5f5;
    box-shadow: 2px 7px 4px -2px #cacaca;
    margin-right: 30px;
    margin-bottom: 15px;
}

.userCustomerSubInfoMobile {
    display: flex !important;
}

.userCustomerSubInfo {
    display: none !important;
}
/*Telerik overrides*/
.k-drop-hint-line {
    background-color: var(--brand) !important;
}

.k-drop-hint-h .k-drop-hint-start {
    border-left-color: var(--brand) !important;
}

.k-sort-icon {
    color: #424242;
}

.k-numerictextbox.input-form-container.text-center {
    text-indent: 0px;
}

    .k-numerictextbox.input-form-container.text-center input {
        text-align: center;
    }

.k-numerictextbox .k-numeric-wrap {
    background-color: #ffffff;
}

    .k-numerictextbox .k-numeric-wrap.k-state-focused {
        background-color: #ffffff;
    }

.k-numerictextbox .k-select {
    border-color: #ffffff;
    color: #111111;
    background-color: #ffffff;
}

    .k-numerictextbox .k-select .k-link:hover,
    .k-numerictextbox .k-select .k-link.k-state-hover {
        border-color: #ffffff;
        background-color: #ffffff;
    }

    .k-numerictextbox .k-select .k-link:active,
    .k-numerictextbox .k-select .k-link.k-state-active,
    .k-numerictextbox .k-select .k-link.k-state-selected {
        border-color: #ffffff;
        background-color: #ffffff;
    }

.k-popup .k-rtl .k-list-optionlabel,
[dir="rtl"] .k-popup .k-list-optionlabel {
    display: none !important;
}

.k-input-solid {
    border: 1.2px solid #aaa;
    font-weight: normal !important;
    color: #000;
    height: 100%;
}

    .k-input-solid.k-valid {
        border-color: #aaa;
    }

    .k-input-solid:hover, .k-input-solid.k-hover {
        border: 1.2px solid #aaa;
    }

.k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding: 4px 0px;
}

/*autocomplete css changes*/
.k-animation-container > .k-popup {
    overflow: auto;
    box-shadow: 1px 1px 25px 2px rgb(127 127 127 / 18%);
}

.k-popup > .k-list-scroller > ul > li:hover {
    border-radius: var(--border-radius) !important;
    background-color: #f2f2f2;
    color: #3f2a06;
}
/**/

.k-list .k-item,
.k-list-optionlabel {
    padding: 3px 10px;
}

.k-list-optionlabel {
    display: none !important;
}

/*custom changes to .k-list-container to make it match rest of theme*/
.k-animation-container .k-list-container {
    color: rgb(135, 135, 135);
    background-color: rgb(216, 216, 216, 1);
    box-shadow: none !important;
}

.k-animation-container {
    top: unset;
    border-radius: 0 0 0.25rem 0.25rem;
    position: absolute;
    overflow: hidden;
    z-index: 100;
}

.k-animation-container-shown {
    overflow: visible;
}

.k-popup {
    border-color: transparent;
    box-shadow: 1px 1px 15px #afafaf !important;
    color: #111;
    background-color: #f2f2f2;
    border-radius: var(--border-radius);
    padding: 15px;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.5;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: stretch;
    align-items: stretch;
}

    .k-popup .k-item {
        outline: none;
    }

.k-list .k-item:hover,
.k-list .k-item.k-state-hover,
.k-list-optionlabel:hover,
.k-list-optionlabel.k-state-hover {
    background-color: unset;
}

    .k-list .k-item:hover.k-state-selected,
    .k-list .k-item.k-state-hover.k-state-selected,
    .k-list-optionlabel:hover.k-state-selected,
    .k-list-optionlabel.k-state-hover.k-state-selected {
        background-color: unset;
    }

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
    background-color: unset;
    outline: none;
    font-size: .9rem;
}

.k-list .k-item:focus,
.k-list .k-item.k-state-focused,
.k-list-optionlabel:focus,
.k-list-optionlabel.k-state-focused {
    box-shadow: unset;
}

    .k-list .k-item:focus:hover, .k-list .k-item:focus.k-state-hover,
    .k-list .k-item.k-state-focused:hover,
    .k-list .k-item.k-state-focused.k-state-hover,
    .k-list-optionlabel:focus:hover,
    .k-list-optionlabel:focus.k-state-hover,
    .k-list-optionlabel.k-state-focused:hover,
    .k-list-optionlabel.k-state-focused.k-state-hover {
        box-shadow: unset;
    }

    .k-list .k-item:focus.k-state-selected,
    .k-list .k-item.k-state-focused.k-state-selected,
    .k-list-optionlabel:focus.k-state-selected,
    .k-list-optionlabel.k-state-focused.k-state-selected {
        box-shadow: unset;
    }

#addWarranty .k-grid-toolbar {
    justify-content: center;
    margin-bottom: 25px;
}

    #addWarranty .k-grid-toolbar .k-grid-search {
        border: 2px solid #424242;
    }

.existingCustomersTab {
    justify-content: center;
}

    .existingCustomersTab .nav-item {
        padding-left: 0px;
    }

    .existingCustomersTab.nav-pills .nav-item:first-child {
        padding-left: 0px;
    }

    .existingCustomersTab a.nav-link.active {
        border-bottom: 7px solid #fff;
        padding: 0.5rem 1.3rem 0rem 1.3rem;
    }

    .existingCustomersTab ~ .tab-content {
        border-top: 1.5px solid #fff;
    }

#addWarranty .k-wizard-steps {
    overflow: auto;
}

.warrantyReason {
    background-color: #FFF3CD;
}

.warrantyReasonMaxHeight {
    max-height: 70px;
    overflow: auto;
}

.sticky-header {
    position: sticky;
    top: 0;
    box-shadow: 0px 5px 7px -1px rgba(0, 0, 0, 0.1);
    margin-left: -36px;
    margin-right: -36px;
    padding-left: 36px;
    padding-right: 36px;
    border-bottom: 1px solid #aaa;
}

.sticky-section {
    bottom: 0;
    background-color: #fff;
    width: 100%;
    padding: 13px 36px;
    left: 0;
    right: 0;
    z-index: 11;
    box-shadow: 0px -9px 7px -5px rgba(0, 0, 0, 0.1);
}

.position-sticky.sticky-section {
    width: auto !important;
    margin-left: -36px;
    margin-right: -36px;
}

#items .customerHeader-sm {
    margin-bottom: 0px !important;
}

.h-fitcontent {
    height: fit-content !important;
}
/*to be used when 250px left side panel is used for navigation, only have the sticky section in the content portion of page*/
.sticky-section-with-leftNav {
    bottom: 13px;
    background-color: #fff;
    width: calc(100% - 250px);
    padding: 13px 25px;
    right: 0;
    z-index: 4;
    box-shadow: 5px -4px 10px rgba(0, 0, 0, 0.18);
}

button.telerik-blazor.k-button.k-input-button.k-button-solid.k-button-md.k-button-solid-base.k-icon-button {
    background-color: #424242;
    color: #fff;
}

.padding-override div.card-group {
    padding: 0px;
}

.workOrderImage {
    margin-right: 15px;
}

input.flashInput {
    animation: flashInputChange linear .7s 2 forwards;
}

.flashInput .autoComplete {
    animation: flashInputChange linear .7s 2 forwards;
}

/*Dealer Listings > View*/
#DealerListingProfile label.form-check-label.me-5.pe-2 {
    min-width: 95px;
}

#DealerListingProfile .label-margin label {
    margin-right: 10px;
}

#LaborProfileEditDialog .laborDialogLine {
    display: none;
}

#LaborProfileEditDialog .modal-content, #LaborProfileAddDialog .modal-content {
    width: 92vw;
}

.splitDropWrapper button {
    height: 34px;
}

.customerAddressGridHeight {
    height: calc(100% - 320px);
}

.imagesCountTextBox input {
    height: 26px !important;
    padding: 8px 5px;
    text-indent: 9px;
    margin-left: 4px;
}

.imagesCountTextBox .number-input-button.number-input-up {
    top: 1px;
    right: -13px;
}

.imagesCountTextBox .number-input-button.number-input-down {
    bottom: 3px;
    right: -13px;
}

@keyframes flashInputChange {
    50% {
        box-shadow: 0 0 2px inset var(--success-green-text);
    }

    100% {
        box-shadow: none;
    }
}

/*Zoom Counter*/

.Zoom-Counter {
    display: flex;
    width: 94px;
    height: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .Zoom-Counter button {
        border: none;
        background-color: transparent;
        font-size: 1.15rem; /*15px*/
    }

        .Zoom-Counter button:hover {
            color: var(--brand);
        }

    .Zoom-Counter input {
        width: 32px;
        height: auto;
        text-align: center;
        justify-content: center;
        display: inline-flex;
        margin: 0;
    }

    .Zoom-Counter label {
        display: block;
        text-align: center;
    }

.Zoom-BTN-Color {
    color: var(--brand);
}

.inputHeight-sm {
    height: 30px;
}

#invoices .k-grid-header {
    padding: 0 1px 0 0;
}

#invoices .k-grid-header-wrap {
    margin-inline-end: 5px;
}

#AddEditInvoiceAddress .sorted-dropdown {
    width: 100%;
}

#AddInvoice .k-grid-content-sticky .text-center {
    text-align: start !important;
    margin: 0 42px;
}

#InvoiceEdit .k-grid-content-sticky .text-center {
    text-align: start !important;
    margin: 0 42px;
}

.userCustomerContainer, .adminWarrantyIdSection {
    position: relative;
}

#deals .searchButton {
    margin-top: 28px;
}

#DealerListingProfile .dealEmailInfo .informationCircle {
    margin-top: -15px;
}

#AdminWarrantyDetail .tab-content .mainContent {
    padding: 0;
}

#AdminUsersDetail .k-grid-header, #AdminSubscriptionDetail .k-grid-header {
    padding: 0 1px 0px 0px;
}

#EditPriceColumn .card, #AddPriceColumn .card {
    margin-left: 0px;
    margin-right: 0px;
}

#AddCampaignItemMapping .warningMessage {
    white-space: inherit !important;
}

.panelAddressBadge {
    width: 100%;
}

#BatchDetails .sticky-header {
    z-index: 8;
}

.circle-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    margin-right: 8px;
}

#AdminUsers #LocationEmployees .k-toolbar {
    overflow: visible;
}

#LocationStatuses span.telerik-blazor.k-dropdownlist.k-picker.k-picker-solid.k-picker-md.k-rounded-md {
    padding-top: 7px;
}

#CommissionTypeContainer div.disabled {
    text-transform: uppercase !important;
    background: #aaa !important;
    opacity: 1 !important;
}

    #CommissionTypeContainer div.disabled .placeholder-text {
        color: #282828 !important;
        font-weight: 600;
    }

.footerContent {
    font-size: 12px;
}

.locationsListboxContainer .k-listbox .k-selectable {
    display: grid;
}

.warrantyGridContainer {
    background: #f5f5f5;
    border: 1px solid #AAA;
}

.warrantyViewGridContainer {
    background: #fff;
    border: 1px solid #AAA;
}

.warrantyCard {
    border: 1px solid var(--aaaaaa, #AAA);
    min-height: 128px;
    height: 100%;
    z-index: 0;
}

    .warrantyCard a {
        color: #282828;
    }

.lostContainer {
    display: inline-block !important;
}

    .lostContainer .lostItem:nth-child(6) label {
        display: none !important;
    }

.lostItem {
    float: left;
}

    .lostItem + .lostItem {
        clear: left;
    }

.lostContainer .lostItem:nth-child(6) {
    margin: 8px 0 !important;
}

.partsEmptyState {
    border: 2px solid #CACACA;
    border-radius: 4px;
}

    .partsEmptyState label {
        color: #aaa !important;
    }


.emptyStateWarrantyStyle {
    align-self: center;
    width: 100%;
    text-align: center;
    border: dashed #cacaca 2px;
    color: #aaa;
}

.warrantyPDFViewer .k-pdf-viewer-pages .k-icon-xxxl,
.warrantyPDFViewer .k-pdf-viewer-pages .k-upload,
.warrantyPDFViewer .k-dropzone-hint {
    display: none !important;
}

.warrantyPDFViewer .k-toolbar {
    padding: 12px;
    margin-bottom: 0px;
}

    .warrantyPDFViewer .k-toolbar .k-pager-numbers-wrap {
        align-items: center;
    }

#SearchPayPeriodsGrid .gridSearchContainer .col-6.mx-auto, #CurrentPayPeriodGrid .gridSearchContainer .col-6.mx-auto {
    width: 41.66666667% !important;
}

#CommissionsDetupDetails .scrollable-dropdown-menu {
    max-height: 216px;
}

.attachInvoiceNote {
    font-size: 1.08rem;
}

#availableDEALERSContainer .k-grid-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding-right: 0;
}

#availableDEALERSContainer .k-grid-aria-root {
    overflow: visible !important;
}

#coverageFlag, #difficultyBased, #coverageBased {
    cursor: pointer;
}

    #coverageFlag + .form-check-label, #difficultyBased + .form-check-label, #coverageBased + .form-check-label {
        cursor: pointer;
    }

.marineContainer .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(4) .warrantyCard {
    min-height: 163px;
}

.warrantyProductsContainer .k-multiselect .k-chip-md {
    margin-top: -4px;
}

.BadgeMobile {
    display: none;
}

.vehicleWarrantyWizard .dropdown-menu.show .scrollable-dropdown-menu {
    max-height: 135px;
}

#WebConnectAdd span.radius-10.darkBrand-bg.my-auto.p-1 {
    background-color: transparent;
    /* color: #fff !important; */
}

#WebConnectAdd .splitDropWrapper .fa-angle-down-brand:before {
    color: #fff !important;
}

#WebConnectAdd .splitDropWrapper.btn-group > .dropdown-menu {
    background-color: #fff !important;
}

#WebConnectAdd .dropdown-menu.scrollable-dropdown-menu.dropdown-menu-end.brand-bg.border-0.text-nowrap.px-2.show {
    border: 1.2px solid #aaa !important;
}

#WebConnectAdd .splitDropWrapper.btn-group > .dropdown-menu:hover {
    background-color: var(--brand-hover) !important;
}

#WebConnectAdd .dropdown-menu.brand-bg .dropdown-item {
    color: #000 !important;
    font-weight: 700 !important;
}

#AllCampaignItemsGrid .k-grid .k-grid-aria-root {
    overflow: inherit !important;
}

.formInvalid {
    border: 1.5px solid red !important;
    padding: 8px;
    border-radius: 4px;
}

.radioBold label {
    font-weight: 600 !important;
}

.vehiclelabel {
    background-color: #f8f9fa;
    border-color: #ced4da;
    border-width: 1px;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-weight: normal;
}

.vehicle-card-accordian {
    border-radius: 0px !important;
}

.vehicle-card {
    border-radius: 0px !important;
}

.vehicle-card-header {
    padding: 8px;
}

.vehicle-card-contentsection {
    display: block !important;
    max-width: 330px;
    min-width: 330px;
}

.centerfooter {
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
    position: sticky;
    bottom: 0;
    border-top: 1px solid #aaa;
}


#FilmToGlass .stepsNavigationContent .button-primary, #FilmToGlass .stepsNavigationContent .button-secondary:hover, #FilmToGlass .stepsNavigationContent .button-primary:focus, #FilmToGlass .stepsNavigationContent .k-numerictextbox:hover, #FilmToGlass .stepsNavigationContent .button-primary:focus, #FilmToGlass .stepsNavigationContent .k-numerictextbox:focus {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #86B7FE !important;
    box-shadow: #0D6EFD40 0px 0px 0px 2px !important;
    font-weight: 400;
}

#FilmToGlass .stepsNavigationContent .button-secondary, #FilmToGlass .stepsNavigationContent .k-numerictextbox {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #ADB5BD !important;
    box-shadow: #000000 0px 0px 2px 0px !important;
    font-weight: 400;
}

#FilmToGlass small.text-warning {
    color: #000 !important;
}

#FilmToGlass .cardSelected {
    border: 1px solid #86B7FE !important;
}

#FilmToGlass .stepsNavigationContent .accordion-button {
    background-color: #F8F9FA !important;
    padding: 8px 16px;
}

#FilmToGlass .stepsNavigationContent .series-group .subAccordion {
    padding: .5rem 1rem !important;
    border-bottom: 1px solid #CED4DA !important;
}

#FilmToGlass .stepsNavigationContent .series-group .subAccordion .table > :not(caption) > * > * {
    background-color: transparent !important;
}

#FilmToGlass .cardNavigationContent div.bg-light {
    background-color: transparent !important;
    padding: 7px 1.5rem 7px 8px !important;
}

#FilmToGlass .cardNavigationContent .carousel-control-next, .carousel-control-prev, #FilmToGlass .cardNavigationContent .carousel-control-next, .carousel-control-next {
    width: 4%;
}

#FilmToGlass .stepsNavigationContent .sendFilesContainer a {
    color: #0D6EFD !important;
}

#FilmToGlass .stepsNavigationContent .emailInput {
    border-radius: 4px 0px 0px 4px !important;
}

#FilmToGlass .stepsNavigationContent .emailInputButton {
    box-shadow: none !important;
    height: 40px;
}

#FilmToGlass .stepsNavigationContent .accordionSubTitle:first-child {
    border-top: 1px solid #CED4DA !important;
    border-bottom: 1px solid #CED4DA !important;
}

#FilmToGlass .cardNavigationContent .badge.bg-light.text-dark {
    background-color: #6C757D !important;
    color: #fff !important;
    margin-right: 8px;
}

#FilmToGlass .titleSection, #FilmToGlass .titleSection label {
    font-weight: normal !important;
}

#FilmToGlass .stepsNavigationContent .warningBorder {
    border-style: dashed !important;
}

#FilmToGlass .stepsNavigationContent .card {
    min-height: auto !important;
    min-width: auto !important;
    height: 263px;
    width: 170px !important;
    margin: 0 !important;
}

#FilmToGlass .stepsNavigationContent #ShadowingStep .card {
    height: 340px;
}

#FilmToGlass .stepsNavigationContent .card .mb-2 {
    height: inherit !important;
}

    #FilmToGlass .stepsNavigationContent .card .card-body {
        margin: 0 !important;
        padding: 15px 0 !important;
    }

#FilmToGlass .cardNavigationContent div.active.bg-light .innerNavigationContent {
    background-color: #DEE2E6 !important;
    padding: 8px 11px !important;
    border-radius: 4px;
}

#FilmToGlass .innerNavigationContent span.badge.bg-dark {
    margin-right: 8px;
}

#FilmToGlass .cardNavigationContent div.active.bg-light .badge.button-primary {
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 8px 0 0px !important;
}

#FilmsStepOffCanvas .accordion-item {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#FilmsStepOffCanvas label {
    font-weight: 400 !important;
}

#FilmToGlass #FilmsStepOffCanvas .accordion-button {
    background-color: transparent !important;
    font-weight: 400!important;
}

#FilmToGlass #FilmsStepOffCanvas .button-primary {
    border: 2px solid var(--brand) !important;
    background: var(--brand) !important;
    box-shadow: none !important;
}

#FilmToGlass #FilmsStepOffCanvas .button-primary:hover {
    background-color: var(--brand-hover) !important;
    color: var(--brand-text) !important;
    border: 2px solid var(--brand-hover) !important;
}

#FilmToGlass .accordion-button:not(.collapsed)::before {
    margin-top: auto;
    margin-bottom: auto;
}

.cursor-pointer {
    cursor: pointer;
}

#FilmsStepOffCanvas button.btn-close.text-reset {
    display: none;
}

#FilmToGlass .stepsNavigationContent .shadow-none {
    box-shadow: none !important;
}

#FilmToGlass #FilmsStepOffCanvas .button-tertiary div {
    font-weight: 400;
}

.min-w-max {
    min-width: max-content;
}

#FilmToGlass .filmsBadgeContainer .badge {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

#FilmToGlass .cardNavigationContent d-flex align-items-center gap-4 {
    max-width: 200px;
    border-radius: 4px;
    padding: 8px 11px;
}

#FilmToGlass .filmContainer .card-header {
    background-color: #F8F9FA !important;
}

.stepsNavigationContainer, .cardNavigationContainer {
    margin-bottom: 50px;
    min-height: 546px;
}

#FilmToGlass .informationCircle img {
    content: var(--info-hover-icon);
}

#FilmToGlass .stepsNavigationContent span.invalid {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: red !important;
    border-image: initial !important;
}

.borderedButton {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #ADB5BD !important;
    box-shadow: #000000 0px 0px 2px 0px !important;
    font-weight: 400;
    padding: 0 25px !important;
}

.borderedButton:hover {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #86B7FE !important;
    box-shadow: #0D6EFD40 0px 0px 0px 2px !important;
    font-weight: 400;
    padding: 0 25px !important;
}

#ImportContainer .cardNavigationContainer .cardNavigationContent .border-bottom {
    padding: 7px 8px !important;
}

#ImportContainer .titleSection {
    font-weight: normal !important;
}

#ImportContainer .table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.25rem 0.25rem 0.25rem !important;
}

#ImportContainer .alert-dismissible {
    border-radius: 0 !important;
}

    #ImportContainer .alert-dismissible button {
        margin: -3px 0 0 0 !important;
    }

#ImportContainer .mapperTitle {
    padding: 9px 1.5rem 8px 1.5rem !important
}

#ImportContainer .mapperTitleContainer {
    position: sticky;
    top: 0;
    /* width: 100%; */
    z-index: 1;
    background-color: #fff;
}

#ImportContainer #ColumnMapper .WarningMessagesBox {
    max-height: 95px !important;
    overflow: auto !important;
}

.importButtonSelect {
    max-width: 200px !important;
}

.editableDataTableCustomer {
    height: 25.56px !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    border-radius: var(--bs-border-radius-sm) !important;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

#ImportContainer .leftInfo .infoPoint, #ImportContainer .rightInfo .infoPoint {
    top: 50px;
}

#ImportContainer #ColumnMapper .gridOverflowHeight .row:first-child .informationPopup {
    top: 0px;
}

    #ImportContainer #ColumnMapper .gridOverflowHeight .row:first-child .informationPopup img.infoPoint {
        top: 9px;
    }

#ImportContainer #ColumnMapper .gridOverflowHeight .row:last-child .informationPopup {
    top: -165px;
}

    #ImportContainer #ColumnMapper .gridOverflowHeight .row:last-child .informationPopup img.infoPoint {
        top: 173px;
    }


#ImportContainer #ReviewMappedData .gridOverflowHeight table {
    padding-bottom:230px;
}

#ImportContainer .informationPopup {
    padding: 8px !important;
}

#ImportContainer .informationPopup .bg-white {
    border-radius: 4px;
}

#ImportContainer .actionsColumn {
    position: sticky;
    right: 0;
    background-color: #fff;
    z-index: 2;
}

#ImportContainer .actions-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px; 
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(4px); 
    z-index: -1; 
}

#ImportContainer .gridOverflowHeight {
    max-height: calc(100vh - 480px);
}

#ImportContainer .gridOverflowHeightXL {
    max-height: calc(100vh - 500px);
}

.cardNavigationContent .step-item.current {
    background: #DEE2E6 !important;
    padding: 8px 11px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

.cardNavigationContent .step-item.default {
    padding: 8px 11px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

.cardNavigationContent .step-item.current .text-body-secondary, .cardNavigationContent .step-item.default .text-body-secondary {
    font-size: 14px !important;
    font-weight: 500;
    color: #000 !important;
}

.cardNavigationContent .step-item.default .step-icon {
    background: #6C757D !important ;
        color: #fff !important;
}

.single-line-link {
    white-space: nowrap;
    text-decoration: underline !important;
    color: #212529; 
    width: auto; 
    display: flex; 
    justify-content: center; 
    padding: 0.7rem; 
}

.sidepanel-header {
    padding: 0.8rem 2rem;
    border-bottom: 1.2px solid #aaa;
}

/*How To View All*/
#HowToViewAllSection .content-section-body {
    padding: 32px;
}

#HowToViewAllSection .video-grid {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    gap: 24px;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

/* Mobile breakpoint - 1 column */
@media (max-width: 767px) {
    #HowToViewAllSection .video-grid {
        grid-template-columns: 300px;
        gap: 24px;
    }
}

/* Tablet breakpoint - 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    #HowToViewAllSection .video-grid {
        grid-template-columns: repeat(2, 300px);
        gap: 24px;
    }
}

/* Desktop breakpoint - 3 columns */
@media (min-width: 1024px) {
    #HowToViewAllSection .video-grid {
        grid-template-columns: repeat(3, 300px);
        gap: 24px;
        max-width: 1200px;
    }
}

/*News View All*/
#NewsViewAllSection .content-section-body {
    padding: 32px;
}

#NewsViewAllSection .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    gap: 24px;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

/* Constrain ArticleCard within grid columns */
#NewsViewAllSection .article-grid .article-card {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    flex-shrink: 0;
}

/* Mobile breakpoint - 1 column */
@media (max-width: 767px) {
    #NewsViewAllSection .article-grid {
        grid-template-columns: 400px;
        gap: 24px;
    }
    
    #NewsViewAllSection .article-grid .article-card {
        width: 400px;
        min-width: 400px;
        max-width: 400px;
        flex-shrink: 0;
    }
}

/* Tablet breakpoint - 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    #NewsViewAllSection .article-grid {
        grid-template-columns: repeat(2, 400px);
        gap: 24px;
    }
    
    #NewsViewAllSection .article-grid .article-card {
        width: 400px;
        min-width: 400px;
        max-width: 400px;
        flex-shrink: 0;
    }
}

/* Desktop breakpoint - 3 columns */
@media (min-width: 1024px) {
    #NewsViewAllSection .article-grid {
        grid-template-columns: repeat(3, 400px);
        gap: 24px;
        max-width: 1400px;
    }
    
    #NewsViewAllSection .article-grid .article-card {
        width: 400px;
        min-width: 400px;
        max-width: 400px;
        flex-shrink: 0;
    }
}
/*-----------------------------------------------------------------------*/
#NewsViewAllSection .headline {
    color: var(--text-primary, #262525);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    /* Heading/2 */
    font-family: var(--font-family-heading, "Futura PT");
    font-size: var(--text-heading-2, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: 110% !important; /* 44px */
    letter-spacing: -0.4px;
    margin: 0 0 16px 0;
}

#NewsViewAllSection .description {
    overflow: hidden;
    color: var(--text-primary, #262525);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;
    /* Paragraph/Small/Regular */
    font-family: var(--font-family-body, "Plus Jakarta Sans");
    font-size: var(--text-paragraph-small, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
}

/*Media Queries*/
@media (max-width: 640.98px) {
    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }

    .BadgeMobile {
        display: block;
    }

    .badgeMobileToggle {
        display: none;
    }
}

.admin-checkout-button {
    min-width: 180px;
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: static;
        top: 0;
        z-index: 12;
        background-color: var(--navbar-background);
        color: var(--navbar-color);
    }
}

@media only screen and (max-width: 991px) {
    .line {
        display: none;
    }
}

@media (min-width: 920px) {
    #iconOnly {
        display: none;
    }
}

@media (min-width: 1200px) {
    .dapLogo {
        width: var(--logo-width);
    }

    div.block-extension.d-xl-block {
        display: inline-flex !important;
    }

    .line {
        height: 190px;
    }

    .collapseBtn {
        display: none !important;
    }

    .fullRowBtn {
        display: inline !important;
    }

    .logoutContainer {
        position: absolute;
        top: -32px;
    }

/*    #topNavLinks {
        height: 65px;
    }*/

    .navbarContent {
        flex-wrap: nowrap;
    }
}

@media (min-width: 1300px) {
    .userCustomerSubInfo {
        display: flex !important;
        position: absolute;
        right: 60px;
        margin-top: 16px;
        font-size: 1.08rem; /*14px*/
        line-height: 150%;
        letter-spacing: 0.56px;
    }

    .userCustomerSubInfoMobile {
        display: none !important;
    }

    .dapLogo {
        width: var(--logo-medium-width);
    }
}

@media (max-width: 1300px) {

    .customerWarrantyCardContainer {
        justify-content: end !important;
    }

        .customerWarrantyCardContainer .col-12 {
            display: ruby !important;
        }

            .customerWarrantyCardContainer .col-12 .col-3 {
                width: 50% !important;
            }

                .customerWarrantyCardContainer .col-12 .col-3 .me-16px {
                    margin: 0 !important;
                }

                .customerWarrantyCardContainer .col-12 .col-3:nth-child(2) div.w-100 {
                    margin: 0 0 0 8px;
                }

                .customerWarrantyCardContainer .col-12 .col-3:nth-child(4) {
                    width: 48.9% !important;
                    margin: 0 0 0 6px;
                }

                .customerWarrantyCardContainer .col-12 .col-3.z-0:nth-child(2) {
                    padding-left: 8px;
                }

                .customerWarrantyCardContainer .col-12 .col-3:first-child.z-0 ~ .col-3:last-child .position-absolute.me-16px {
                    margin-right: 16px !important;
                }
}




@media (min-width: 1400px) {
    .logoutContainerWidth {
        width: 324px;
    }

    .leadDialogWidth {
        width: 500px;
        max-height: 100%;
    }

    .warrantyGridContainer .informationContainer {
        height: 30vh;
        min-height: 230px;
    }

        .warrantyGridContainer .informationContainer img {
            width: 215px;
        }
}

/*@media (min-width: 1200px) and (max-width: 1400px) {
    html, body {
        font-size: 11px;
    }

    .logoutContainer {
        padding: 10px;
    }
}*/
@media (max-width: 1460px) {

    #CustomerProfile .infoCardContainer .card-group {
        justify-content: flex-start !important;
    }
}

@media (min-width: 1800px) {
    .col-xxl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 13.666667%;
    }

    .designTool {
        height: calc(100% - 130px);
    }

    #partPropDialog .modal-content {
        height: auto;
    }

    .nAQuickLargeContainer {
        margin-left: 200px !important;
        margin-right: 200px !important;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1662px;
    }

    .dapLogo {
        width: var(--logo-large-width);
    }

    .firstArrow {
        top: 40%;
        left: 17%;
    }

    .secondArrow {
        top: 40%;
        left: 48.8%;
    }

    .thirdArrow {
        top: 40%;
        left: 74%;
    }

    .warrantyGridContainer .informationContainer {
        height: 50vh;
        min-height: 230px;
    }

        .warrantyGridContainer .informationContainer img {
            width: 100%;
        }
}

@media (max-width: 2900px) {

    .customerReviewWarrantyCardContainer {
        justify-content: end !important;
    }

        .customerReviewWarrantyCardContainer .col-12 {
            display: ruby !important;
        }

            .customerReviewWarrantyCardContainer .col-12 .col-3 {
                width: 50% !important;
            }

            .customerReviewWarrantyCardContainer .col-12 .col-3 {
                width: 49% !important;
            }

                .customerReviewWarrantyCardContainer.col-12 .col-3 .me-16px {
                    margin: 0 !important;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(2) div.w-100 {
                    margin: 0 0 0 8px;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(4), .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(2) {
                    width: 50% !important;
                    margin: 0 0 0 6px;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(4) {
                    margin: 0 0 0 9px;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3.z-0:nth-child(2) {
                    padding-left: 8px;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3:first-child.z-0 ~ .col-3:last-child .position-absolute.me-16px {
                    margin-right: 16px !important;
                }

                .customerReviewWarrantyCardContainer .col-12 .col-3 .me-16px {
                    margin: 0 !important;
                }
}

@media (max-width: 1391px) {
    .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(4), .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(2) {
        width: 49.7% !important;
        margin: 0 0 0 6px;
    }
}


@media (max-width: 1181px) {
    .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(4), .customerReviewWarrantyCardContainer .col-12 .col-3:nth-child(2) {
        width: 48.7% !important;
        margin: 0 0 0 6px;
    }
}

@media only screen and (min-width: 1920px) {
    .homePagePadding {
        padding: 0px 200px;
    }
}

@media (min-width: 2000px) {
    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 11.666667%;
    }
}

@media (min-width: 2200px) {
    html, body {
        font-size: 14px;
    }

    .logoutContainer {
        top: -34px;
    }

    .logoutContainerArrow {
        width: 24px;
    }

    .Zoom-Counter {
        width: 98px;
    }

        .Zoom-Counter input {
            width: 35px;
        }

    #LaborProfileEditDialog .modal-content, #LaborProfileAddDialog .modal-content {
        height: 620px !important;
        width: 75vw;
    }

    .badge-pill {
        height: 21px;
    }
}

@media (min-width: 2280px) {
    .col-xxxl-7 {
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .leadDialogWidth {
        width: 500px;
        max-height: 100%;
    }

    .col-xxxl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .ps-xxxl-10 {
        padding-left: 10rem !important;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 2200px;
    }

    .firstArrow {
        top: 40%;
        left: 15%;
    }

    .secondArrow {
        top: 40%;
        left: 49.1%;
    }

    .thirdArrow {
        top: 40%;
        left: 74.2%;
    }
}

@media (min-width: 2560px) {
    html, body {
        font-size: 16px;
    }

    .leadDialogWidth {
        width: 500px;
        max-height: 100%;
    }

    .logoutContainer {
        top: -33px;
        padding: 2px;
    }

        .logoutContainer .dropdown {
            height: 18px;
        }

    .logoutContainerArrow {
        content: var(--navbar-up-arrow);
        width: 30px;
        height: 30px !important;
    }

    .Zoom-Counter {
        width: 108px;
    }

        .Zoom-Counter input {
            width: 39px;
        }

    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 8.5%;
    }

    .col-xxxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .firstArrow {
        top: 40%;
        left: 15%;
    }

    .navbar-collapse .search-container {
        width: 192px;
    }

    .dropdown span.dropdown-icon {
        top: 26%;
    }

    #AddPriceColumn .dropdown span.dropdown-icon {
        top: 35%;
    }

    #EditPriceColumn .dropdown span.dropdown-icon {
        top: 35%;
    }

    .sorted-dropdown .dropdown .k-input-inner {
        top: 21%;
    }

    .settingsSectionWrapper {
        height: 206px;
    }

    #breadCrumb img {
        transform: scale(1.2);
    }

    #copyBtn img, #copiedBtn .copiedIcon {
        transform: scale(1.2);
    }

    #addWarranty .k-wizard .k-wizard-buttons {
        bottom: 10px;
    }

    .dropdown.bulkActionDropButton .dropdown-button {
        line-height: 117%;
    }

    .leadDialogWidth {
        width: 600px;
    }

    .badge-pill {
        height: 23px;
    }

    .iconButton i {
        transform: scale(1.1);
    }

    #LaborProfileAddDialog .modal-content {
        width: 1700px !important;
    }

    .priceCardActive .k-numerictextbox {
        width: 85px !important;
    }

    .pCNumAndAdjContainer {
        width: 507px;
    }

    #CommissionsDetupDetails .panel-bg {
        max-width: 220px;
    }

    .btn-group > .button {
        width: 160px;
        height: 160px;
        margin-right: 14px;
    }

    .cutbankDialogMaxHeight .modal-body {
        height: 570px;
    }

    .warrantyApprovalDropButton.dropdown span.dropdown-icon {
        top: 18%;
        right: 0%;
    }

    .designToolTabs ~ .tab-content {
        height: calc(100% - 35px) !important;
        min-height: calc(100% - 35px) !important;
    }

    .gridHeight-1 {
        height: calc(100% - 3px);
    }

    .gridHeight-3 {
        height: calc(100% - 56px);
    }

    .gridHeight-5 {
        height: calc(100% - 74px);
    }

    .gridHeight-6 {
        height: calc(100% - 124px);
    }

    .gridHeight-7 {
        height: calc(100% - 176px);
    }

    .gridHeight-8 {
        height: calc(100% - 230px);
    }

    .customerAddressGridHeight {
        height: calc(100% - 342px);
    }

    #LaborProfileEditDialog .modal-content, #LaborProfileAddDialog .modal-content {
        height: 700px !important;
    }

    .dateRangePicker .k-floating-label-container:last-child::after {
        margin-left: 21px;
    }
}

@media (min-width: 3440px) {
    html, body {
        font-size: 18px;
    }

    .leadDialogWidth {
        width: 500px;
        max-height: 100%;
    }

    .navbar-collapse .search-container {
        width: 204px;
    }

    .logoutContainer {
        top: -37px;
        padding: 1px;
    }

        .logoutContainer .dropdown {
            height: 21px;
        }

    .logoutContainerArrow {
        width: 32px;
        height: 32px !important;
    }

    .Zoom-Counter {
        width: 118px;
    }

        .Zoom-Counter input {
            width: 44px;
        }

    .dropdown span.dropdown-icon {
        top: 22%;
    }

    #AddPriceColumn .dropdown span.dropdown-icon {
        top: 33%;
    }

    #EditPriceColumn .dropdown span.dropdown-icon {
        top: 33%;
    }

    .customerDetailsCard {
        height: auto;
        width: auto;
        min-height: 180px;
        min-width: 400px;
    }

    .offcanvas.offcanvas-end {
        width: 500px;
    }

    #breadCrumb img {
        transform: scale(1.4);
    }

    #copyBtn img, #copiedBtn .copiedIcon {
        transform: scale(1.4);
    }

    #addWarranty .k-wizard .k-wizard-buttons {
        bottom: 33px;
    }

    .dropdown.bulkActionDropButton .dropdown-button {
        line-height: 100%;
    }

    .sorted-dropdown .dropdown .k-input-inner {
        top: 17%;
    }

    .leadDialogWidth {
        width: 700px;
    }

    .badge-pill {
        height: 27px;
    }


    .splitDropWrapper button {
        height: 38px;
    }

    .iconButton i {
        transform: scale(1.2);
    }

    .settingsSectionWrapper {
        height: 217px;
    }

    #LaborProfileAddDialog .modal-content {
        width: 2000px !important;
    }

    .priceCardActive .k-numerictextbox {
        width: 96px !important;
    }

    .pCNumAndAdjContainer {
        width: 554px;
    }

    #CommissionsDetupDetails .panel-bg {
        max-width: 240px;
    }

    .btn-group > .button {
        width: 200px;
        height: 200px;
        margin-right: 20px;
    }

    #friends i {
        font-size: 27px !important;
    }

    #friends .card {
        height: 250px !important;
        width: 250px;
    }

    .cutbankDialogMaxHeight .modal-body {
        height: 600px;
    }

    .warrantyApprovalDropButton.dropdown span.dropdown-icon {
        top: 11%;
        right: -1%;
    }

    .button.small {
        padding: 3px 8px;
    }

    .designToolTabs ~ .tab-content {
        height: calc(100% - 40px) !important;
        min-height: calc(100% - 40px) !important;
    }

    .gridHeight-3 {
        height: calc(100% - 64px);
    }

    .gridHeight-4 {
        height: calc(100% - 67px);
    }

    .gridHeight-5 {
        height: calc(100% - 78px);
    }

    .gridHeight-6 {
        height: calc(100% - 134px);
    }

    .gridHeight-7 {
        height: calc(100% - 195px);
    }

    .gridHeight-8 {
        height: calc(100% - 250px);
    }

    .customerAddressGridHeight {
        height: calc(100% - 395px);
    }

    #LaborProfileEditDialog .modal-content, #LaborProfileAddDialog .modal-content {
        height: 770px !important;
    }
}

@media (min-width: 3840px) {
    html, body {
        font-size: 20px;
    }

    .leadDialogWidth {
        width: 500px;
        max-height: 100%;
    }

    .dropdown span.dropdown-icon {
        top: 19%;
    }

    .logoutContainer {
        top: -39px;
        padding: 0px;
    }

    .Zoom-Counter input {
        width: 49px;
    }

    .Zoom-Counter {
        width: 150px;
    }

    .navbar-collapse .search-container {
        width: 223px;
    }

    .customerDetailsCard {
        height: auto;
        width: auto;
        min-height: 195px;
        min-width: 420px;
    }

    .offcanvas.offcanvas-end {
        width: 560px;
    }

    #breadCrumb img {
        transform: scale(1.5);
    }

    #copyBtn img, #copiedBtn .copiedIcon {
        transform: scale(1.5);
    }

    #addWarranty .k-wizard .k-wizard-buttons {
        bottom: 56px;
    }

    .sorted-dropdown .dropdown .k-input-inner {
        top: 15%;
    }

    .leadDialogWidth {
        width: 765px;
    }

    .badge-pill {
        height: 28px;
    }

    .splitDropWrapper button {
        height: 43px;
    }

    .settingsSectionWrapper {
        height: 235px;
    }

    .priceCardActive .k-numerictextbox {
        width: 106px !important;
    }

    .pCNumAndAdjContainer {
        width: 600px;
    }

    #CommissionsDetupDetails .panel-bg {
        max-width: 270px;
    }

    .btn-group > .button {
        width: 215px;
        height: 215px;
        margin-right: 24px;
    }

    #friends i {
        font-size: 30px !important;
    }

    #friends .card {
        height: 275px !important;
        width: 274px;
    }

    .cutbankDialogMaxHeight .modal-body {
        height: 630px;
    }

    .warrantyApprovalDropButton.dropdown span.dropdown-icon {
        top: 11%;
        right: -1%;
    }

    .button.small {
        padding: 2px 8px;
    }

    .gridHeight-1 {
        height: calc(100% - 5px);
    }

    .gridHeight-3 {
        height: calc(100% - 70px);
    }

    .gridHeight-4 {
        height: calc(100% - 72px);
    }

    .gridHeight-5 {
        height: calc(100% - 82px);
    }

    .gridHeight-6 {
        height: calc(100% - 144px);
    }

    .gridHeight-7 {
        height: calc(100% - 212px);
    }

    .gridHeight-8 {
        height: calc(100% - 260px);
    }

    .customerAddressGridHeight {
        height: calc(100% - 430px);
    }

    #LaborProfileEditDialog .modal-content, #LaborProfileAddDialog .modal-content {
        height: 850px !important;
    }

    .dateRangePicker .k-floating-label-container:last-child::after {
        margin-left: 16px;
    }
}

/*Min-Height Media Queries*/
@media (min-height: 1080px) {
    /*    .mtLargeScreen {
        margin-top: 4rem;
    }*/

    /*    .howToContainer {
        height: 127px;
    }*/
}

.draggable {
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: move;
    /* Changes the cursor to indicate it's movable */
    user-select: none;
    /* Prevents text selection while dragging */
    padding: 0px 7px;
}

#FilmToGlassContainer h1, #FilmToGlassContainer h2, #FilmToGlassContainer h3, #FilmToGlassContainer h4 {
    line-height: normal !important;
}

#FilmToGlassContainer .form-floating label {
    padding: 1rem 0.5rem;
}

#FilmToGlassContainer .dialogWindow {
    height: auto;
    width: auto;
    border: 3px solid #a3a3a3;
    border-radius: 8px;
}

#FilmToGlassContainer .dialogWindow {
    min-height: 400px;
}

/* MenuNavItem responsive dropdown behavior */
/* Keyframe animations for mobile dropdown */
@keyframes dropdownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdownFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* Enable dropdown toggle functionality on mobile/tablet */
@media (min-width: 300px) and (max-width: 1199.98px) {
    .nav-item.dropdown .nav-link {
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    
    .nav-item.dropdown .dropdown-menu {
        display: none;
    }
    
    .nav-item.dropdown .dropdown-menu.show {
        display: block;
        animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* Hover effect with same animation on mobile */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* Override utility navbar chevron styles for our component */
    .nav-item.dropdown.dropdown-open .chevron {
        transform: rotate(180deg) !important;
        background-image: url('/Assets/chevronMenuSolid.svg') !important;
    }
    
    /* Hover effect for chevron on mobile (works with existing utility navbar CSS) */
    @media (hover: hover) {
        .nav-item.dropdown:hover .chevron {
            transform: rotate(180deg) !important;
            background-image: url('/Assets/chevronMenuSolid.svg') !important;
        }
    }
}

/* Disable dropdown toggle functionality on desktop */
@media (min-width: 1200px) {
    .nav-item.dropdown .nav-link {
        cursor: default;
        pointer-events: none;
    }
    
    .nav-item.dropdown .dropdown-menu {
        display: none;
        top: calc(100% + 4px) !important;
    }
    
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* Create invisible bridge to maintain hover */
    .nav-item.dropdown:hover::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 1000;
    }
    
    .nav-item.dropdown .dropdown-menu.show {
        display: none !important;
    }
    
    /* Re-enable pointer events for child elements if needed */
    .nav-item.dropdown .nav-link * {
        pointer-events: auto;
    }
    
    /* Desktop chevron animation (works with existing utility navbar CSS) */
    .nav-item.dropdown:hover .chevron {
        transform: rotate(180deg) !important;
        background-image: url('/Assets/chevronMenuSolid.svg') !important;
    }
}

/* Fix for non-dropdown menu items to match dropdown styling */
#topNavLinks .nav-item:not(.dropdown) {
    color: var(--text-primary, #262525);
    /* Navigation/Primary */
    font-family: var(--font-family-heading);
    font-size: var(--text-navigation-primary);
    font-style: normal;
    line-height: 120%; /* 19.2px */
    margin: 0px 2px;
}

#topNavLinks .nav-item:not(.dropdown):hover, 
#topNavLinks .nav-item:not(.dropdown):active {
    border-radius: var(--radius-sm) !important;
    background: var(--background-selected-subtle-default);
    opacity: 1 !important;
    height:40px;
}

/* Mobile styling for non-dropdown items */
.mobile-menu.show #topNavLinks .nav-item:not(.dropdown) {
    display: flex !important;
    padding: 10px 12px;
    align-items: center !important;
    gap: 12px;
    align-self: stretch;
}

.mobile-menu.show #topNavLinks .nav-item:not(.dropdown) a {
    color: var(--text-primary, #262525) !important;
    font-family: var(--font-family-heading, "Futura PT");
    font-size: var(--text-navigation-primary, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    display: flex;
    align-items: center;
}

.mobile-menu.show #topNavLinks .nav-item:not(.dropdown):hover {
    background-color: var(--elevation-surface-default) !important;
    padding-bottom: 0 !important;
}

.mobile-menu.show #topNavLinks .nav-item:not(.dropdown):has(.active) {
    background-color: var(--elevation-surface-default) !important;
    padding: 10px 12px;    
}

.mobile-menu.show #topNavLinks .nav-item:not(.dropdown):has(.active) .nav-link {
    padding-top: 12px !important;
    color: var(--text-selected, #14716D) !important;
    background-color: var(--background-selected-subtle-default) !important;
    border-radius: var(--radius-sm, 4px);
    padding-bottom: 12px !important;
}
/* End fix for non-dropdown menu items */