html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* Allow percentage-based heights in the application */
html, body {
    height: 100%;
}

/* Add accessible line-height + Improve text rendering */
body {
    /* line-height: calc(1em + 0.725rem); */
    -webkit-font-smoothing: antialiased;
	font-size: clamp(0.875rem, 0.825rem + 0.18vw, 1.125rem);
}

/* Use a more-intuitive box-sizing model. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Remove built-in form typography styles */
input, button, textarea, select {
    font: inherit;
	color: var(--def-gray);
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root {
    /* unit size used for gap between items, padding, margin etc*/
    --gap: 8px;

    /* regular text colors */
    --def-gray: #454545;
    --def-white: #f3f3f3;

    /* corestack theme */
    --pr-green: #267965;
    --pr-yellow: #FBB03F;
    --sc-yellow: #FEEFDB;
    --sc-green: #94C6B1;
    --sc-navy: #0E143D;
    --sc-plum: #A71D54;

    --darker-gray: #4F4F4F;
    --light-gray: #D2D2D2;
    --table-head: #D2D2D2;
    --table-alt: #E8E8E8;
    --table-hover: #e3e3e3;

    --inner: inset 1px 1px 3px rgba(0 0 0 / .35);
    --drop: 1px 1px 3px rgba(0 0 0 / .35);
    --drop-light: 1px 1px 10px rgba(0 0 0 / .10);
}

/* changes background-color and color of the text selected on website */
::-moz-selection {
    background-color: var(--sc-yellow);
    color: var(--pr-green);
}
::selection {
    background-color: var(--sc-yellow);
    color: var(--pr-green);
}

/* custom scrollbar */
.sidebar-nav .nav-list::-webkit-scrollbar,
.form-wrapper::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.estimates .custom-tabs-content::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar {
    width: var(--gap);
    height: var(--gap);
}

.sidebar-nav .nav-list::-webkit-scrollbar-thumb,
.form-wrapper::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.estimates .custom-tabs-content::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

.sidebar-nav .nav-list::-webkit-scrollbar-track,
.form-wrapper::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.estimates .custom-tabs-content::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header {
    color: var(--def-gray);
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    line-height: calc(var(--gap) * 4);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .title-vendor-name {
    color: var(--pr-green);
    max-width: 20ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.select2-td i {
    cursor: pointer;
    width: 32px;
    margin: 0;
    z-index: unset;
    text-align: center;
    font-size: 18px;
    position: relative;
}

.select2-td .tooltip-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 250%;
    left: -125%;
    padding: calc(var(--gap) * 1.25);
    border-radius: var(--gap);
    background-color: var(--white);
    filter: drop-shadow(0px 1px 3px var(--sc-green));
    transition: opacity .5s ease-in-out, top .5s;
    width: 200px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    z-index: -1;
}

.select2-td .tooltip-info .emphasis {
    font-style: italic;
    font-weight: 600;
}

.select2-td .tooltip-info::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 72%;
    background-color: var(--white);
    transform: translateX(-50%) rotate(45deg);
    top: -10px;
    border-radius: 4px;
    z-index: -1;
}

.select2-td i:hover .tooltip-info {
    visibility: visible;
    opacity: 1;
    top: 40px;
    z-index: 1;
}

.sml_assembly_row_tooltip {
    background: repeating-linear-gradient(45deg,#CBF2E2,#CBF2E2 5px,#FFEBC0 5px,#FFEBC0 10px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-toggle::after {
    top: -7px;
}

:root {
    --side-w: 48px;
    --max-h: 32px;
    --nav-w: 270px;
    --logo-h: 64px;
}

.loginContainer {
    display: flex;
}

.loginContainer .loginLogo .logoContainer {
    padding: 0 !important;
    width: unset;
}

.loginContainer .loginLogo .logoContainer img {
    margin-inline: auto;
    height: var(--logo-h);
}

#app {
    height: calc(100% - var(--side-w));
    margin-left: var(--nav-w);
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

.header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: max(calc(var(--gap) * 2), 14px);
    text-align: center;
    border-radius: var(--gap);
    padding: calc(var(--gap) * 1);
    background-color: var(--white);
    box-shadow: var(--drop-light);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

#app ~ .footer {
    height: var(--side-w);
    background-color: var(--pr-green);
    padding: calc(var(--gap) * 1) calc(var(--gap) * 3);
    position: sticky;
    margin-left: var(--nav-w);
    transition: margin-left .3s;
    bottom: 0;
    z-index: 3;
}

#app ~ .footer .footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--gap) * 2);
    width: 100%;
}

#app ~ .footer .footer-wrapper .footer-text {
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * 2);
    color: var(--white);
}

#app ~ .footer .footer-wrapper .footer-text .corestack-version {
    color: var(--pr-yellow);
}

#app ~ .footer .footer-wrapper .footer-logo img {
    height: calc(var(--max-h) * 0.7);
}

.body {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
    overflow: auto;
}

.component {
    padding: calc(var(--gap) * 1);
    border-radius: var(--gap);
    border: 2px dotted var(--sc-green);
}

.wrapper-component {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[class*="btn-cs"] {
    height: max(calc(var(--gap) * 5), 36px);
    font-size: max(calc(var(--gap) * 2), 14px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--white) !important;
    background-color: var(--pr-green);
    padding: var(--gap) calc(var(--gap) * 2);
    border: unset;
    cursor: pointer;
    border-radius: calc(var(--gap) / 2);
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-cs-delete {
    background-color: var(--sc-plum);
}

[class*="btn-cs"] > span {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap);
    line-height: normal;
}

[class*="btn-cs"] > span:first-child {
    font-weight: 600;
}

[class*="btn-cs"].icon-cs {
    padding: calc(var(--gap) / 2);
    height: max(calc(var(--gap) * 4), 28px);
    width: max(calc(var(--gap) * 4), 28px);
}

[class*="btn-cs"].icon-cs > span:first-child {
    font-weight: 400;
}

[class*="btn-cs"].icon-cs:not(:only-child) {
    margin-right: var(--gap);
}

[class*="btn-cs"].icon-cs:not(:only-child):last-child {
    margin-right: unset;
}

[class*="btn-cs"].icon-cs .material-symbols-rounded {
    font-size: 20px;
}

select {
    height: max(calc(var(--gap) * 5), 36px);
    border: 2px solid var(--table-head);
    border-radius: var(--gap);
    padding-left: var(--gap);
    padding-right: calc(var(--gap) * 4);
}

.actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap);
    height: max(calc(var(--gap) * 5), 100%);
}

.actions .title {
    align-self: center;
}

.actions-btns {
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: flex-end;
}

/* .actions [class*="btn-cs"] {
    min-width: 180px;
    justify-content: space-between;
} */

.loading-ui {
    display: grid;
    place-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
    vertical-align: middle;
}

.loading-ui > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* pricing manager */

.pricing-manager .card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .card .card-header {
    display: flex;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    border-radius: var(--gap);
    flex-wrap: wrap;
}

.pricing-manager .card .card-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
    overflow: auto;
}

.pricing-manager .card .card-header .card-header-group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--gap);
    align-items: flex-end;
    justify-content: flex-end;
    flex: 1;
}

.pricing-manager .card .card-header .card-header-group:first-child {
    align-items: flex-start;
    justify-content: space-between;
}

.pricing-manager .card .card-header .card-header-group .dropdown-price-group {
    width: 100%;
}

.pricing-manager .card .card-header .card-header-group .dropdown-price-group .select-dropdown select {
    max-width: 420px;
}

.pricing-manager .card-content .card-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.pricing-manager .card-content .card-body .navigation-tabs {
    z-index: 3;
}

.pricing-manager .card-content .card-body .nav-tabs {
    gap: calc(var(--gap) * 2);
    border: unset;
    border-radius: unset;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-item {
    display: flex !important;
    justify-content: center;
    margin: 0;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link {
    flex: 1 1 0;
    align-self: flex-end;
    margin: 0;
    border: unset;
    border-radius: var(--gap) var(--gap) 0 0;
    padding: var(--gap) calc(var(--gap) * 2);
    background-color: var(--table-alt);
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link.active {
    background-color: var(--white);
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header {
    color: var(--def-gray);
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    line-height: calc(var(--gap) * 4);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .title-vendor-name {
    color: var(--pr-green);
    max-width: 20ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header i {
    cursor: pointer;
    width: 32px;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-size: 18px;
    position: relative;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--gap) * 1.25);
    border-radius: var(--gap);
    background-color: var(--white);
    filter: drop-shadow(0px 1px 3px var(--sc-green));
    transition: opacity .5s ease-in-out, top .5s;
    width: 300px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    z-index: -1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info .emphasis {
    font-style: italic;
    font-weight: 600;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    background-color: var(--white);
    transform: translateX(-50%) rotate(45deg);
    top: -10px;
    border-radius: 4px;
    z-index: -1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header i:hover .tooltip-info {
    visibility: visible;
    opacity: 1;
    top: 40px;
    z-index: 1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link.active::before {
    background-color: var(--pr-green);
    bottom: 0;
}

.pricing-manager .card-content .card-body .tab-content,
.mapped-categories .tab-content {
    flex: 1;
    padding: calc(var(--gap) * 2);
    background-color: var(--white);
    border-radius: 0 0 var(--gap) var(--gap);
    overflow: auto;
}

.pricing-manager .card-content .card-body .tab-content .tab-pane {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.pricing-manager .card-content .card-body .tab-content .pricing-notice {
    padding: calc(var(--gap) * 2) 0;
}

.pricing-manager .card-content .card-body .tab-content .pricing-notice span a {
    color: var(--sc-plum);
    font-weight: 700;
    font-style: italic;
}

.pricing-manager .card-content .card-body .tab-content .table-wrapper {
    padding: unset;
    box-shadow: unset;
    border-radius: unset;
}

.pricing-manager .card-content .card-body .tab-content .tab-pane [class$="content"],
.pricing-manager .card-content .card-body .tab-content .tab-pane [class$="content"] .pricing-parameters {
    display: flex;
    gap: calc(var(--gap) * 2);
    flex-direction: column;
}

.pricing-manager .vendorsTab .pricing-parameters {
    width: 100%;
    max-width: 70%;
    margin-inline: auto;
}

.pricing-manager .pricing-parameters .vendors-calc {
    display: flex;
    gap: calc(var(--gap) * 2);
    transition: width .5s ease-in-out;
    align-self: center;
    font-size: 14px;
    width: 100%;
    flex-wrap: wrap;
}

.pricing-manager .pricing-parameters .vendors-calc > .vendors-calc-group {
    background-color: var(--def-white);
    padding: calc(var(--gap) * 2);
    padding-top: 48px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    border-radius: 4px;
    min-width: 420px;
    position: relative;
}

.pricing-manager .pricing-parameters .vendors-calc .vendors-calc-title {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--white);
    padding: var(--gap) calc(var(--gap) * 2);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    border-radius: var(--gap) 0;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid var(--sc-yellow);
    line-height: normal;
}

.pricing-manager .pricing-parameters .vendors-calc .vendors-pricing-multipliers .pricing-multipliers {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .pricing-parameters .vendors-calc .row {
    margin: 0;
    justify-content: space-between;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .pricing-parameters .vendors-calc .row > .col {
    padding: 0;
    width: unset;
    flex: unset;
}

.pricing-manager .pricing-parameters .vendors-calc input {
    border: unset;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 35%);
    width: unset;
    padding: var(--gap);
    outline: unset;
    width: calc(var(--gap) * 8);
}

.pricing-manager .pricing-parameters .vendors-calc input:focus {
    box-shadow: inset 1px 1px 3px var(--pr-green);
}

.pricing-manager .pricing-parameters .vendors-calc .calc-group {
    margin: 0;
    position: relative;
    display: flex;
    padding-top: calc(var(--gap) * 2);
    gap: calc(var(--gap) * 2);
    align-items: center;
    justify-content: flex-end;
}

.pricing-manager .pricing-parameters .vendors-calc .calc-group::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: var(--sc-green);
    top: 0;
    left: 0;
}

.pricing-manager .vendors-calc .calc-group .calc-bg {
    background-color: var(--sc-green);
    padding: var(--gap) calc(var(--gap) * 2);
    border-radius: 4px;
    font-weight: 600;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row > div {
    align-self: center;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .value-group {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .value-group .factor-percent {
    margin: 0 calc(var(--gap) / 2) 0 calc(var(--gap) * 2);
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    width: calc(var(--gap) * 4.5);
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group .remove-factors-line {
    width: calc(var(--gap) * 4.5);
    min-width: unset;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group .remove-factors-line i {
    margin: 0;
}

.pricing-manager .card-content .card-body .tab-content .cats-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
}

.pricing-manager .cats-content .cats-group .card-table-title {
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
}

.pricing-manager .cats-content .cats-group .card-table-title select {
    max-width: 400px;
}

.pricing-manager .prodsTab .prods-select-group {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.pricing-manager .prodsTab .prods-content {
    height: 100%;
    display: flex;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .prodsTab .prods-content .prods-group {
    height: 100%;
    display: flex;
    gap: calc(var(--gap) * 2);
    flex-direction: column;
}

.pricing-manager .prodsTab .prods-content .prods-group:first-child {
    flex: 0 0 40%;
}

.select2-dropdown.select2-dropdown--above {
    display: flex;
    flex-direction: column-reverse;
}

.material-symbols-rounded {
    vertical-align: middle;
    font-size: calc(var(--gap) * 3);
}

.navigation-tabs .nav-tabs {
    gap: var(--gap);
    border: unset;
}

.navigation-tabs .nav-tabs .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation-tabs .nav-tabs .nav-item .nav-link {
    padding: var(--gap) calc(var(--gap) * 2);
    border-radius: var(--gap) var(--gap) 0 0;
    align-self: flex-end;
    background-color: var(--table-alt);
    color: var(--def-gray);
    border: unset;
}

.navigation-tabs .nav-tabs .nav-item .nav-link.active {
    background-color: var(--white);
}

.navigation-tabs .nav-tabs .nav-item .nav-link .tab-header {
    font-weight: 600;
    font-family: 'Montserrat';
    font-size: 16px;
    letter-spacing: .5px;
    display: flex;
    gap: calc(var(--gap) / 2);
    height: 100%;
}

.component .tab-content {
    padding: calc(var(--gap) * 2);
    background-color: var(--white);
    border-radius: 0 0 var(--gap) var(--gap);
    overflow: auto;
    flex-grow: 1;
}

.update-wrapper.s3,
.update-wrapper.s4,
.update-wrapper.s5 {
    height: 100%;
    flex: unset;
}

.update-wrapper.s3 .update-main,
.update-wrapper.s4 .update-main,
.update-wrapper.s5 .update-main {
    height: 100%;
    flex: unset;
    overflow: hidden;
}

.update-wrapper.s4 .update-match {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
}

.update-wrapper.s3 .update-main .update-action,
.update-wrapper.s4 .update-main .update-action,
.update-wrapper.s5 .update-main .update-action {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    gap: var(--gap);
    overflow: hidden;
}

.update-wrapper.s3 .table-wrapper,
.update-wrapper.s4 .table-wrapper,
.update-wrapper.s5 .table-wrapper {
    height: 100%;
    width: 100%;
    padding: unset;
}

.update-wrapper.s4 .table-footer,
.update-wrapper.s5 .table-footer {
    align-self: flex-end;
    margin-left: auto;
}

.update-wrapper.s3 .update-main .update-btn,
.update-wrapper.s4 .update-main .update-btn,
.update-wrapper.s5 .update-main .update-btn  {
    align-self: flex-start;
    min-width: calc(var(--gap) * 20);
    width: unset;
}

#estimate_list td {
    word-break: break-word;
}

.estimates .custom-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    filter: drop-shadow(1px 1px 3px rgba(0 0 0 / .10));
}

.estimates .custom-tabs-nav {
    display: flex;
    flex-direction: row;
    gap: calc(var(--gap) * 1);
}

.estimates .custom-tabs-nav-item > a {
    display: flex;
    align-items: center;
    height: calc(var(--gap) * 6);
    background-color: var(--table-head);
    color: var(--def-gray);
    padding: var(--gap) calc(var(--gap) * 2);
    border-radius: var(--gap) var(--gap) 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: max(calc(var(--gap) * 2), 14px);
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    min-width: calc(var(--gap) * 30);
}

.estimates .custom-tabs-nav-item .phases-wrap {
    min-width: calc(var(--gap) * 30);
}

.estimates .custom-tabs-nav-item.active > a {
    background-color: var(--white);
    color: var(--pr-green);
}

.estimates .custom-tabs-content {
    flex-grow: 1;
    background-color: var(--white);
    border-radius: var(--gap);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: auto;
}

.estimates .pricing-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    padding: var(--gap);
    padding-top: unset;
}

.estimates .pricing-column {
    display: flex;
    flex-direction: column;
    align-content: start;
    border-radius: var(--gap);
    padding: var(--gap);
}

.estimates .pricing-list {
    background-color: var(--table-head);
}

.estimates .pricing-percent {
    border: 2px solid var(--table-head);
}

.estimates .pricing-row-group.subtotal {
    border-top: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
}

.estimates .pricing-row {
    display: flex;
    gap: var(--gap);
    justify-content: space-between;
    align-items: center;
    padding: var(--gap);
    font-weight: 600;
}

.estimates .pricing-percent .pricing-row {
    justify-content: flex-end;
}

.estimates .pricing-info {
    padding: 0 var(--gap);
}

.estimates .pricing-column .pricing-row.margin {
    margin-top: auto;
}

.custom-pricing-row {

    align-items: center;
    padding: 3px;
    font-weight: 600;
}
.estimates .pricing-column .pricing-value {
    width: calc(var(--gap) * 8);
    height: max(calc(var(--gap) * 4), 28px);
    padding: var(--gap);
    border-radius: var(--gap);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

.estimates .pricing-column input.pricing-value {
    border: 2px solid var(--table-head);
}

.estimates .pricing-column input.pricing-value:focus {
    outline: none;
    border-color: var(--pr-green);
}

.estimates .pricing-label {
    font-style: italic;
    padding-right: var(--gap);
}

.estimates .pricing-value.default {
    background-color: var(--table-head);
}

.carried_pricing_value{
    background-color: var(--table-head);
}

.estimates .custom-tabs-content .table-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.estimates .phases-wrap .phases-dropdown {
    flex-direction: row;
    display: flex;
    background-color: var(--white);
    gap: var(--gap);
    padding-left: var(--gap);
    padding-top: var(--gap);
    border-top-right-radius: var(--gap);
}

.estimates .phases-wrap .phases-dropdown .phase-item {
    flex-direction: row;
    display: flex;
    background-color: var(--table-alt);
    border-radius: var(--gap);
}

.estimates .phases-wrap .phases-dropdown .phase-item.active {
    background-color: var(--sc-green);
}

.estimates .phases-wrap .phases-group {
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--white);
    gap: var(--gap);
}

.estimates .phases-wrap .phases-group .phase-mode-add .btn-cs-navy {
    height: 100%;
    border-radius: var(--gap);
}
.estimates .phases-wrap .phases-group .btn-duplicate-phase .btn-cs-navy {
    height: 100%;
    border-radius: var(--gap);
}

.estimates th,
.estimates td {
    height: unset;
}

.estimates table input {
    width: max(calc(var(--gap) * 5), 42px);
    height: max(calc(var(--gap) * 4), 28px);
    border: 2px solid var(--table-head);
    border-radius: var(--gap);
    padding: var(--gap);
}

.estimates table input.th-input {
    width: max(calc(var(--gap) * 10), 72px);
}

.estimates.takeoff .phases-wrap {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--gap) var(--gap) 0 0;
}

.phases-wrap .phase-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap);
    height: calc(var(--gap) * 6);
    cursor: pointer;
}

.phases-wrap .phase-title > a {
    display: grid;
    place-items: center;
    padding-left: var(--gap);
    color: var(--def-gray);
    font-family: 'Montserrat', sans-serif;
    font-size: max(calc(var(--gap) * 2), 14px);
    font-weight: 600;
    letter-spacing: .5px;
}

.phases-wrap .phases-group {
    display: flex;
    flex-direction: column;
    background-color: var(--table-alt);
}

.phases-wrap .phases-dropdown {
    display: none;
    flex-direction: column;
}

.phases-wrap .phase-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding: var(--gap);
    padding-left: calc(var(--gap) / 2);
    cursor: pointer;
}

.phases-wrap .phase-item .phase-item-title {
    flex-grow: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.phases-wrap .phase-item.active {
    background-color: var(--sc-green);
}

.phases-wrap .phase-item .icon-active,
.phases-wrap .phase-item .icon-inactive {
    padding-right: calc(var(--gap) / 2);
    font-size: 20px;
}

.phases-wrap .phase-item .icon-active {
    display: none;
}

.phases-wrap .phase-item.active .icon-active {
    display: block;
}

.phases-wrap .phase-item.active .icon-inactive {
    display: none;
}

.phase-mode-add [class*="btn-cs"] {
    width: 100%;
    border-radius: 0 0 var(--gap) var(--gap);
}

.phase-mode-add [class*="btn-cs"]::before {
    border-radius: 0 0 3px 3px;
}

.phase-title.active ~ .phases-dropdown {
    display: flex;
}

.phase-title [class*="material-symbols"] {
    transition: transform .3s, color .3s;
}

.phase-title.active [class*="material-symbols"] {
    transform: rotate(-90deg);
}

.qty-wrap, .qty-group {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.qty-wrap [class*="btn-cs"].icon-cs {
    margin: unset;
}

.collapsed .qty-wrap,
.collapsed .qty-group {
    justify-content: flex-end;
}



#app .content-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    height: unset;
    width: 100%;
}

#app .content-wrapper .content-body {
    height: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

#app .content-wrapper .content-body > * {
    flex: 1 1 auto;
    gap: var(--gap);
}


#app .content-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    height: unset;
    width: 100%;
}

#app .content-wrapper .content-body {
    height: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

#app .content-wrapper .content-body > * {
    flex: 1 1 auto;
    gap: var(--gap);
}


.dashboard-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-auto-rows: max-content;
    gap: calc(var(--gap) * 2) !important;
    padding: calc(var(--gap) * 2);
    background-color: var(--white);
    border-radius: calc(var(--gap) * 1.25);
}

.dashboard-container .group-overview {
    display: grid;
    gap: calc(var(--gap) * 2);
}

@media (min-width: 1200px) {
    .dashboard-container .group-overview {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media (max-width: 1200px) {

}

.dashboard-container .group-overview.vendor-download {
    grid-auto-rows: 1fr;

}

.dashboard-container .group-overview.vendor-download > .cst-card {
    overflow: auto;
}

@media (max-width: 1200px) {
    .dashboard-container .group-overview.vendor-download > .cst-card {
        max-height: 300px;
    }
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

.dashboard-container .group-overview .update-selection-overview .selection-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    justify-content: space-between;
}

.dashboard-container .group-overview .update-selection-overview .cst-card-title {
    border-radius: var(--gap) 0;
}

.dashboard-container .group-overview .cst-card-title,
.dashboard-container .group-overview .cst-card-title:first-child {
    border: 2px solid var(--sc-yellow);
}

.dashboard-container .group-overview .group-name-logo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dashboard-container .group-overview .vendor-details {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.dashboard-container .group-overview .vendor-logo img {
    max-height: 140px;
}

@media (max-width: 1280px) {
    .dashboard-container .group-overview .vendor-logo img {
        max-height: 100px;
    }
}

.dashboard-container .group-overview .group-limit-upgrade {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 2);
    align-items: center;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.dashboard-container .group-overview .group-limit-upgrade .product-limit {
    align-self: stretch;
    display: flex;
    align-items: center;
    background-color: var(--sc-green);
    padding: var(--gap) calc(var(--gap) * 2);
    border-radius: 4px;
    height: calc(var(--gap) * 4.75);
}

@media (min-width: 768px) {

    .dashboard-container .welcome > span,
    .dashboard-container .group-overview .vendor-details,
    .dashboard-container .group-overview .group-limit-upgrade,
    .dashboard-container .group-overview .group-limit-upgrade .product-limit ~ .request-upgrade {
        font-size: calc(var(--gap) * 2);
    }

}

.top-row > [class^="material"] {
    font-size: 20px;
    color: var(--pr-green);
    margin-left: auto;
}

.dashboard-container .group-overview .update-selection-overview .web-update-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--gap) * 2);
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row {
    display: flex;
    gap: calc(var(--gap) * 2);
    flex-wrap: wrap;
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row > a {
    flex: 1;
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row .card-status {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap);
    background-color: var(--white);
    color: var(--def-gray);
    border-radius: calc(var(--gap) / 2);
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row .card-status:hover {
    transition: background-color .3s ease-in-out;
    background-color: var(--pr-green);
    color: var(--white);
    cursor: pointer;
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row .card-status:hover .status {
    transition: color .3s ease-in-out;
    color: var(--pr-yellow);
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row .card-status:hover .date {
    transition: color .3s ease-in-out;
    color: var(--white);
}

.dashboard-container .group-overview .update-selection-overview .web-update-group .status-row .card-status .status {
    font-weight: 600;
    color: var(--pr-green);
}

.dashboard-container .group-overview .card-progress,
.card-progress {
    flex: unset;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
    justify-content: space-between;
    width: 100%;
}

.dashboard-container .group-overview .countdown-group .card-progress .progress-size {
    cursor: default;
}

.dashboard-container .group-overview .countdown-group .card-progress .countdown-labels {
    display: flex;
    gap: calc(var(--gap) * 2);
    justify-content: space-between;
}

:where(.dashboard-container .group-overview .countdown-group .card-progress .countdown-labels .countdown-label) {
    font-weight: 600;
    color: var(--white);
    background-color: var(--pr-green);
    padding: calc(var(--gap) / 2) calc(var(--gap) * 2);
    border-radius: calc(var(--gap) * 2);
}

.dashboard-container .group-overview .progress-size,
.progress-size {
    display: flex;
    height: 8px;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 35%);
    cursor: pointer;
}

.dashboard-container .group-overview .progress-size > [class^="progress"],
.progress-size > [class^="progress"] {
    height: 100%;
    display: block;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 35%);
    position: relative;
}

.dashboard-container .group-overview .progress-size > [class^="progress"] > .tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 300%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--pr-green);
    color: var(--white);
    box-shadow: 1px 1px 3px rgb(0 0 0 / 35%);
    height: 36px;
    width: 130px;
    border-radius: 4px;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: opacity .6s;
}

.dashboard-container .group-overview .progress-size > [class^="progress"] > .tooltip::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    background-color: var(--pr-green);
    transform: translateX(-50%) rotate(45deg);
    top: 20px;
    border-radius: 4px;
    z-index: -1;
}

.dashboard-container .group-overview .progress-size > [class^="progress"]:hover > .tooltip {
    visibility: visible;
    opacity: 1;
}

.dashboard-container .group-overview .progress-size .progress-selected {
    background-color: var(--pr-yellow);
    border-radius: 4px 0 0 4px;
}

.dashboard-container .group-overview .progress-size .progress-discontinued {
    width: 6.5%;
    background-color: var(--def-gray);
}

.dashboard-container .group-overview .progress-size .progress-available,
.progress-size .progress-available {
    background-color: var(--pr-green);
    border-radius: 0 4px 4px 0;
}

.dashboard-container .group-overview .progress-size [class^="progress"]:only-child,
.progress-size [class^="progress"]:only-child {
    border-radius: 4px 0 0 4px;
}

.dashboard-container .group-overview .selection-countdown {
    padding: unset;
    background-color: unset;
}

.dashboard-container .group-overview .selection-countdown > * {
    flex-grow: 1;
}


@media (max-width: 564px) {

    .dashboard-container .vendor-updates .top-row .title-label {
        flex: 1 1 100%;
        border-radius: 4px 4px 0 0;
    }

    .dashboard-container .vendor-updates .top-row {
        flex-wrap: wrap;
    }

}

.dashboard-container .updates-group .update-card .update-user-group {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.dashboard-container .updates-group .update-card .update-status {
    font-weight: 600;
    color: var(--sc-plum);
}

.dashboard-container .updates-group .update-card .update-status.active {
    font-weight: 600;
    color: var(--pr-green);
}

.dashboard-container .updates-group .update-card .update-icon {
    position: relative;
}

.dashboard-container .updates-group .update-card .update-icon .update-user {
    max-height: 30px;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.dashboard-container .updates-group .update-card .update-icon .update-tooltip {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 180px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
    background-color: var(--pr-green);
    box-shadow: var(--drop);
    color: var(--white);
    font-size: 14px;
    border-radius: calc(var(--gap) / 2);
    top: -175%;
    left: unset;
    right: -18px;
    text-align: center;
    transition: opacity .6s;
    z-index: 2;
}

.dashboard-container .updates-group .update-card .update-icon .update-tooltip::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: unset;
    right: 8px;
    background: var(--pr-green);
    transform: translateX(-50%) rotate(45deg);
    top: 20px;
    border-radius: 4px;
    z-index: -1;
}

.dashboard-container .updates-group .update-card .update-icon:hover .update-tooltip {
    opacity: 1;
    visibility: visible;
}

.update-tooltip .update-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dashboard-container .vendor-updates .top-row .updates-legend > div {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

/* .dashboard-container .vendor-updates .updates-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: calc(var(--gap) * 2);
    padding-top: 36px;
    overflow: auto;
} */

.dashboard-container .vendor-updates .updates-group .update-card .update-icon .update-tooltip {
    left: -18px;
    right: unset;
}

.dashboard-container .vendor-updates .updates-group .update-card .update-icon .update-tooltip::after {
    left: 32px;
    right: unset;
}

.dashboard-container .vendor-updates .updates-group .update-card .update-icon:hover .update-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    #app {
        height: 100%;
    }

    .footer {
        margin-left: unset !important;
    }

    .dashboard-container .welcome {
        align-self: stretch;
    }

    .dashboard-container .group-overview .vendor-logo img {
        max-height: 120px;
    }
}


.dashboard-container .welcome > span,
.dashboard-container .group-overview .vendor-details,
.dashboard-container .group-overview .group-limit-upgrade,
.dashboard-container .group-overview .group-limit-upgrade .product-limit ~ .request-upgrade,
.card .card-header .card-title,
#pricing .card-content .card-body .nav-tabs .nav-link .tab-header {
    font-size: 14px;
}

#discontinued .vendor-select-div .divider {
    height: calc(var(--gap) * 4);
}

.dashboard-container .group-overview.vendor-download > .cst-card {
    overflow: auto;
}

@media (max-width: 1200px) {
    .dashboard-container .group-overview.vendor-download > .cst-card {
        max-height: 300px;
    }
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}


.cst-card {
    flex: 1;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--def-white);
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    border-radius: calc(var(--gap) * 1.25);
    position: relative;
}


.dashboard-container .group-overview.vendor-download > .cst-card {
    overflow: auto;
}

@media (max-width: 1200px) {
    .dashboard-container .group-overview.vendor-download > .cst-card {
        max-height: 300px;
    }
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.dashboard-container .group-overview.vendor-download > .cst-card::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

.dashboard-container .group-overview .update-selection-overview .selection-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    justify-content: space-between;
}

.dashboard-container .group-overview .update-selection-overview .cst-card-title {
    border-radius: var(--gap) 0;
}

.dashboard-container .group-overview .cst-card-title,
.dashboard-container .group-overview .cst-card-title:first-child {
    border: 2px solid var(--sc-yellow);
}


.cst-card.vendor-updates .cst-card-title.legend {
    left: unset;
    right: 0;
    cursor: pointer;
    border-radius: 0 var(--gap);
    background-color: var(--table-alt);
}

.cst-card.vendor-updates .cst-card-title.legend:hover .updates-legend {
    visibility: visible;
    opacity: 1;
}

.cst-card .updates-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.cst-card {
    display: flex;
    background-color: var(--def-white);
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    border-radius: calc(var(--gap) * 1.25);
    position: relative;
}

.cst-card-title {
    background-color: var(--white);
    padding: var(--gap) calc(var(--gap) * 2);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    border-radius: var(--gap) 0;
    color: var(--def-gray);
    flex: 0 1 auto;
    position: absolute;
    top: 0;
    left: 0;
}


.cst-card.vendor-updates .cst-card-title.legend {
    left: unset;
    right: 0;
    cursor: pointer;
    border-radius: 0 var(--gap);
    background-color: var(--table-alt);
}

#dashboard .cst-card.vendor-updates .cst-card-title.legend:hover .updates-legend {
    visibility: visible;
    opacity: 1;
}

.update-card {
    display: flex;
    padding: var(--gap);
    background-color: var(--white);
    border-radius: var(--gap);
    justify-content: space-between;
    align-items: center;
    color: var(--def-gray);
}

.update-card:hover {
    color: var(--def-gray);
}

.update-icon {
    border-radius: 50%;
    color: var(--def-gray);
    background-color: var(--table-alt);
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.update-icon [class^="material"] {
    font-size: 20px;
}

.update-icon a {
    display: flex;
}


.edit-product .nav-tabs .nav-link.active {
    background-color: var(--white);
}

.edit-product .nav-tabs .nav-link.active::before {
    background-color: var(--pr-green);
    bottom: 0;
}

.edit-product .nav-tabs {
    width: 100%;
    border-radius: 0px;
}
.edit-product .nav-item {
    width: 50%;
    gap: calc(var(--gap) * 1);
    padding: 5px;
}
.edit-product .nav-item a{
    width: 100%;

}

.edit-product .nav-tabs .nav-link {
    flex: 1 1 0;
    align-self: flex-end;
    margin: 0;
    border: unset;
    border-radius: var(--gap) var(--gap) 0 0;
    padding: var(--gap) calc(var(--gap) * 2);
    background-color: var(--table-alt);
    color: inherit;
}

.product-img {
    border-radius: 0 0 var(--gap) var(--gap) !important;
}

/*input[readonly]:focus {*/
/*    border: 2px solid #e8e8e8!important;*/
/*}*/
/*input[readonly] {*/
/*    border: 2px solid #e8e8e8!important;*/
/*    color: #a7a7a7!important;*/
/*}*/

.form--field .form-input {
    border-radius: 0 0 var(--gap) var(--gap);
}

.form--field .form-label {
    border-radius: var(--gap) var(--gap) 0 0;
}
.form-group.form--field {
    margin-bottom: 0.5rem;
}
.form--field select.form-input {
    border-radius: 0 0 var(--gap) var(--gap)!important;
}

.form--field:focus-within .form-input {
    border: 2px solid var(--pr-green);
    outline: unset;
}
.form--field:focus-within:focus-within .form-label {
    background-color: var(--pr-green);
    color: var(--white);
}

.form--field .selectize-input {
    border-radius: 0 0 var(--gap) var(--gap)!important;
}

.edit-product-wrapped .form-input:focus {
    border: 2px solid var(--pr-green);
    outline: unset;
}

.form--field:focus-within:focus-within .form-label {
    background-color: var(--pr-green);
    color: var(--white);
}

.form--field .selectize-input {
    border-radius: 0 0 var(--gap) var(--gap)!important;
}

.selectize-dropdown-content, .selectize-dropdown .option:last-child {
    border-radius: 0 0 calc(var(--gap) - 1px) calc(var(--gap) - 1px);
}

.data-grid__footer.table-footer {
    justify-content: end;
}
.data-grid__body td {
    border: 1px var(--table-head) solid;
}
.data-grid__dropdown-filter {
    max-width: 200px!important;
    display: flex!important;
    align-items: center!important;
}
.data-grid__dropdown-filter .selectize-control {
    min-width: 200px!important;
}
.data-grid__dropdown-filter .selectize-input.dropdown-active {
    border-radius: var(--gap) var(--gap) var(--gap) var(--gap)!important;
}
.data-grid__dropdown-filter .selectize-input {
    border-radius: var(--gap) var(--gap) var(--gap) var(--gap)!important;
}
.data-grid__dropdown-filter .selectize-input .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 15px;
}

.grid-row-tooltip-inner, .grid-row-tooltip-arrow {
    margin-left: 200px;
}

.form-label.required-field::after {
    content: "*";
    color: red;
    margin-left: -3px;
}

th.required-field::after {
    content: "*";
    color: red;
}


.form-wrapper {
    --grid-cols: 6;
    border-radius: var(--gap);
    padding: calc(var(--gap) * 1);
    background-color: var(--white);
    box-shadow: var(--drop-light);
    height: 100%;
    overflow: auto;
}

.form-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
}

.form-section {
    display: flex;
    gap: calc(var(--gap) * 1);
    flex: 1 1 100%;
}

.form-column {
    display: grid;
    /* grid-auto-rows: max(calc(var(--gap) * 5), 36px); */
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    grid-auto-rows: max(calc(var(--gap) * 5), 36px);
    gap: calc(var(--gap) * 1);
    width: 100%;
}

.rows .form-column {
    grid-auto-rows: max(calc(var(--gap) * 10), 72px);
}

#vendor_form  .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#customer_form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#product-form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#assembly-form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}

#sml-form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#company-edit-form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#company-create-form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#user_form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}
#company_user_form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}

#estimation-form .form-column {
    grid-auto-rows: max-content;
}

#company_info_form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}

#product_form .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}

.form-row {
    display: flex;
    align-items: center;
    /* the rows will span/stretch into halves, making this a 2 column layout */
    /* 3 = 3 columns, but this won't work for higher numbers as the variable --grid-cols is 6 */
    /* if you ever need to split into more columns than 3, while also keeping 1/2/3 cols format */
    /* pick and replace --grid-cols variable with a number which these are multiple for, for example 12 */
    grid-column: span calc(var(--grid-cols) / 2);
}

/* smart trick in case the markup has more than 1 .form-column(s) */
.form-column:not(:only-child) .form-row {
    grid-column: span calc(var(--grid-cols) / 1);
}

.rows .form-row {
    grid-column: span calc(var(--grid-cols) / 2);
}

.form-row.form-textarea {
    grid-row: span 2;
}

.edit-product .form-row.form-textarea,
.create-product .form-row.form-textarea,
.edit-product-add-vendor .form-row.form-textarea {
    grid-row: span 3;
}

/* you can also make your own class if needed; these are all relative to the --grid-cols variable */
.form-column .form-row.col-span-1 {
    grid-column: span 1;
}

.form-column .form-row.col-span-2 {
    grid-column: span 2;
}

.form-column .form-row.col-span-3 {
    grid-column: span 3;
}

.form-column .form-row.col-span-4 {
    grid-column: span 4;
}

.form-column .form-row.col-span-6 {
    grid-column: span 6;
}

.form-column .form-row.col-span-full {
    grid-column: span calc(var(--grid-cols) / 1);
}

.form-label {
    flex-basis: calc(var(--gap) * 22);
    background-color: var(--table-head);
    display: flex;
    align-self: stretch;
    height: max(calc(var(--gap) * 5), 36px);
    align-items: center;
    padding: var(--gap);
    gap: var(--gap);
    border-radius: var(--gap) 0 0 var(--gap);
    font-weight: 600;
    transition: background-color .3s, color .3s;
}
.form-label-customs {
    /*flex-basis: calc(var(--gap) * 22);*/
    background-color: var(--table-head);
    display: flex;
    align-self: stretch;
    height: max(calc(var(--gap) * 5), 36px);
    align-items: center;
    padding: var(--gap);
    gap: var(--gap);
    border-radius: var(--gap) 0 0 var(--gap);
    font-weight: 600;
    transition: background-color .3s, color .3s;
}

.form-label label {
    line-height: 15px;
}

.form-label-small {
    font-size: 12px;
    font-style: italic;
}

.form-textarea .form-label {
    height: 100%;
}

.rows .form-textarea .form-label {
    height: max(calc(var(--gap) * 5), 36px);
}

.form-label ~ .invalid-feedback {
    /*display: none !important;*/
}

.form-input {
    flex-grow: 1;
    width: calc(var(--gap) * 10);
    height: max(calc(var(--gap) * 5), 36px);
    border: 2px solid var(--table-head);
    background-color: var(--white);
    padding: var(--gap);
    border-radius: 0 var(--gap) var(--gap) 0;
    transition: outline .3s;
    align-self: stretch;
    /* overwrite the internal-autofill-selected from browser */
    -webkit-box-shadow: 0 0 0px 1000px var(--white) inset;
}

.form-input[disabled] {
    background-color: var(--table-alt);
    opacity: 0.5;
}

.form-input.disabled-custom[disabled] {
    background-color: var(--table-alt);
    opacity: 1;
}

.form-row:focus-within .form-label {
    background-color: var(--pr-green);
    color: var(--white);
}

.form-row:focus-within .form-input {
    border: 2px solid var(--pr-green);
    outline: unset;
}

.form-textarea textarea.form-input {
    height: 100%;
}

select[id^="bootstrap-duallistbox"] {
    height: 500px !important;
}

#bootstrap-duallistbox-nonselected-list_export_fields {
    height: 300px !important;
}

#included .box2 #bootstrap-duallistbox-selected-list_export_fields {
    height: 300px !important;
    font-size: 16px !important;
}

#included .box2 {
    width: 100%;
}
#excluded .box1 {
    width: 100%;
}
#included .box2 #bootstrap-duallistbox-selected-list_export_fields {
    width: 100%;

}
#included .box2 option {
    width: 48%; float: left;
    margin: 5px;
}
#excluded .box1 option {
    width: 48%; float: left;
    margin: 5px;
}
#excluded .box1 #bootstrap-duallistbox-nonselected-list_export_fields {
    width: 100%;
    font-size: 16px !important;
}


#select_buttons {
    flex-direction: column;
}


#select_buttons .btn-cs-info {
    margin-top: 18px;
    min-height: 65px;
    min-width: 85px;
}

.box2 option {
    width: 33%;
}
#select_buttons .moveall {
    margin-top: 50px;
}
#select_buttons .btn-cs-info i {
   font-size: 35px;
}

@media (max-width: 768px) {
    #exportProductsModal select[id^="bootstrap-duallistbox"] {
        height: 120px !important;
    }
}

.form-row.is-invalid:focus-within .form-label {
    background-color: var(--sc-plum);
    color: var(--white);
}

.form-row.is-invalid .form-label {
    border: 2px solid var(--sc-plum);
    border-right: unset;
}

.rows .form-row.is-invalid .form-label {
    border: 2px solid var(--sc-plum);
}

.form-row.is-invalid .form-input,
.form-row.is-invalid .selectize-input {
    border: 2px solid var(--sc-plum);
    border-left: unset;
}

.rows .form-row.is-invalid .form-input,
.rows .form-row.is-invalid .selectize-input {
    border: 2px solid var(--sc-plum);
    border-top: unset;
}

.invalid-feedback {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    margin-top: 0.25rem;
    color: var(--sc-plum);
}

.form-instructions {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--gap);
    border-radius: var(--gap);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* .estimates .form-wrapper {
    border-top-left-radius: 0;
    box-shadow: unset;
    background-color: unset;
    height: auto;
    overflow: unset;
}

.estimates .form-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max(calc(var(--gap) * 5), 36px);
}

.estimates .form-input {
    min-height: unset;
    height: 100%;
} */

.rows .form-label {
    flex: unset;
    width: 100%;
    border-radius: var(--gap) var(--gap) 0 0;
}

.estimates .form-label {
    /*flex-basis: calc(var(--gap) * 18);*/
}

.rows .form-input,
.rows .selectize-control,
.rows select {
    flex: unset;
    width: 100%;
    border-radius: 0 0 var(--gap) var(--gap);
}

.rows .selectize-input {
    border-radius: 0 0 var(--gap) var(--gap);
}

.rows .selectize-input.dropdown-active {
    border-radius: 0;
}

.rows .form-row {
    flex-direction: column;
    flex-wrap: nowrap;
}

.rows textarea.form-input {
    height: 100%;
}

.custom-label-buttons {
    margin-left: auto;
    margin-right: 0;

}
.edit-span-button {
    margin-right: 5px;
}

/* .estimates:not(.review) .form-row {
    flex-direction: column;
}

.estimates:not(.review) .form-label {
    align-self: flex-start;
    width: 100%;
    flex-basis: unset;
    border-radius: var(--gap) var(--gap) 0 0;
}

.estimates:not(.review) .form-input {
    border-radius:  0 0 var(--gap) var(--gap);
} */

.estimates.options .form-wrapper,
.estimates.options form,
.estimates.options form .form-body {
    height: 100%;
}

.estimates.options .form-column {
    grid-template-columns: 1fr;
    grid-auto-rows: unset;
}

.estimates.options .form-label {
    flex-basis: unset;
    height: 100%;
}

.estimates.options textarea.form-input {
    height: 100%;
}

.estimates.options .rows .form-label {
    height: auto;
}

.estimates.review .form-wrapper {
    height: auto;
}

.estimates .select-data-ajax-status .selectize-input {
    max-width: 130px;
    justify-content: center;
}

.custom-form-row .selectize-control {
    position: unset;
}

.filters-group {
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
    flex-wrap: wrap;
    padding: calc(var(--gap) / 2);
    border-radius: calc(var(--gap) * 3);
    border: 2px solid var(--table-alt);
}
.filters {
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
}

.filters-group .filter-wrapper {
    position: relative;
    margin: unset;
    display: flex;
}

.filter {
    justify-content: center;
    display: inline-flex;
    box-sizing: border-box;
    background-color: var(--alt-gray);
    color: var(--white);
    border-radius: calc(var(--gap) * 3);
    padding: calc(var(--gap) / 2) calc(var(--gap) * 1);
    font-weight: 600;
    width: 200px;
    height: 32px;
    border: 2px solid transparent;
    text-transform: uppercase;
}

.filters-group .filter-wrapper input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.00001;
    cursor: pointer;
}

.filter-ecomm, .filter-pim,
.filter-ecomm + [class^="material-icon"], .filter-pim + [class^="material-icon"] {
    color: var(--white);
}

.filter-core {
    background-color: var(--sc-green);
    color: var(--def-gray);
}

.filter-pro {
    background-color: var(--pr-green);
}

.filter-ecomm {
    background-color: var(--sc-plum);
}

.filter-pim {
    background-color: var(--sc-navy);
}

.filters-group .filter-wrapper input[type="checkbox"]:checked + .filter {
    border: 2px solid var(--pr-yellow);
}

.filters-group .filter-wrapper [class^="material-icon"] {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 20px;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    right: calc(var(--gap) / 2);
    color: var(--white);
    font-size: 16px;
    transition: opacity .3s;
}

.filters-group .filter-wrapper input[type="checkbox"]:checked ~ [class^="material-icon"] {
    visibility: visible;
    opacity: 1;
}

.filters-group .filter-wrapper input[type="checkbox"]:checked + .filter-core ~ [class^="material-icon"] {
    color: var(--def-gray);
}

#add_vendor_card .rows .form-column {
    grid-auto-rows: minmax(min-content, max-content);
}

.selectize-dropdown .create.option {
    color: #303030;
}

:focus-visible {
    outline-offset: 2px;
}

.custom-toggle-checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap);
    position: relative;
}

.custom-toggle-checkbox input {
    opacity: 0;
    position: absolute;
    left: 240px;
}

.input-size {
    min-width: 90px !important;
}

.custom-toggle-checkbox .button {
    --toggleW: 120px;
    --toggleH: 30px;
    --toggleG: calc(var(--toggleH) / 10);
    --toggleK: calc(var(--toggleH) - calc(var(--toggleG) * 2));
    position: relative;
    display: block;
    width: var(--toggleW);
    height: var(--toggleH);
    background-color: var(--table-head);
    transition: background-color .4s;
    border-radius: var(--toggleW);
    cursor: pointer;
    margin-bottom: 0;
}

.custom-toggle-checkbox .button[for="toggle-checkbox1"] {
    background-color: var(--pr-green);
}

.custom-toggle-checkbox input:focus-visible ~ .button {
    outline: 2px solid var(--def-gray);
}

.custom-toggle-checkbox .knob {
    width: var(--toggleK);
    height: var(--toggleK);
    position: relative;
    border-radius: 50%;
    top: var(--toggleG);
    left: var(--toggleG);
    transition: left .4s;
    z-index: 2;
    background-color: var(--white);
    box-shadow: var(--drop);
}

.custom-toggle-checkbox .false,
.custom-toggle-checkbox .true {
    width: calc(var(--toggleW) - var(--toggleK) - var(--toggleG));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
    font-size: calc(var(--toggleH) / 2);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-align: center;
    z-index: 1;
    margin-left: calc(var(--toggleK) + var(--toggleG));
}

.custom-toggle-checkbox .true {
    margin-left: 0;
}

.custom-toggle-checkbox input:checked ~ .button {
    background-color: var(--pr-green);
}

.custom-toggle-checkbox input:checked ~ .button .knob {
    left: calc(var(--toggleW) - var(--toggleH) + var(--toggleG));
}

.custom-toggle-checkbox input:not(:checked) ~ .button .true {
    display: none;
}

.custom-toggle-checkbox input:checked ~ .button .false {
    display: none;
}

input[type='radio'],
input[type='checkbox'],
input[type='range'] {
    accent-color: var(--pr-green);
}

td input {
    border-radius: calc(var(--gap) / 2);
    border-color: var(--table-alt);
    border: 2px solid var(--table-head);
    padding: calc(var(--gap) / 2) var(--gap);
}

td input[type="checkbox"] {
    --s: 1.15em;
    width: var(--s);
    height: var(--s);
}

.custom-input {
    display: flex;
    gap: calc(var(--gap) / 2);
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: var(--gap);
}

.custom-input .custom-input-wrap {
    position: relative;
    align-self: stretch;
}

.custom-input .custom-input-wrap .label-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--gap);
    display: flex;
    align-items: center;
}

.custom-input .custom-input-wrap .label-wrap label {
    font-weight: 600;
}

.custom-input .custom-input-wrap .input-wrap {
    height: 100%;
}

.custom-input .custom-input-wrap .input-wrap input {
    height: 38px;
    border-radius: calc(var(--gap) / 2);
    border: 2px solid transparent;
    padding: calc(var(--gap) / 2) var(--gap);
    max-width: 20ch;
}

.custom-input .custom-input-wrap .input-wrap input:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.custom-input .custom-input-actions {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.custom-input .custom-input-actions [class^="action"] {
    width: calc(var(--gap) * 4);
    height: calc(var(--gap) * 4);
    display: inline-grid;
    place-items: center;
    border-radius: calc(var(--gap) / 2);
}

.custom-input.active .custom-input-actions .action-edit {
    display: none;
}

.custom-input .custom-input-actions [class^="action"] [class^="material"] {
    font-size: 28px;
    color: var(--pr-green);
}

.custom-input .custom-input-actions [class$="cancel"] [class^="material"] {
    color: var(--sc-plum);
}

.custom-input .custom-input-actions .actions-group {
    display: none;
    align-items: center;
    width: 100%;
}

.custom-input.active .custom-input-actions .actions-group {
    display: flex;
}

.cs-table .cs-table-body .cs-table-row:not(.search) .cs-table-cell input,
.cs-table .cs-table-body .cs-table-row:not(.search) .cs-table-cell textarea {
    height: max(calc(var(--gap) * 4), 28px);
    border: 2px solid var(--table-head);
    border-radius: var(--gap);
    padding: var(--gap);
}

.selectize-control {
    flex-grow: 1;
    height: 100%;
}

.selectize-input {
    display: flex;
    align-items: center;
    height: 100%;
    border: 2px solid var(--table-head);
    border-radius: 0 var(--gap) var(--gap) 0;
    box-shadow: unset;
    line-height: normal;
}

.selectize-input.dropdown-active {
    border-radius: 0 var(--gap) 0 0;
    border-color: var(--pr-green);
}

.selectize-control.single .selectize-input.input-active {
    display: flex;
}

.selectize-input.focus {
    box-shadow: unset;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
    font-size: unset;
}

.selectize-dropdown {
    margin: unset;
    box-shadow: unset;
    border: 2px solid var(--pr-green);
    border-top-width: 0px;
    border-radius: 0 0 var(--gap) var(--gap);
}

.selectize-dropdown .option {
    padding: var(--gap);
}

.selectize-dropdown-content,
.selectize-dropdown .option:last-child {
    border-radius: 0 0 calc(var(--gap) - 1px) calc(var(--gap) - 1px);
}

.selectize-dropdown .option.active {
    background-color: var(--sc-green);
    font-weight: 600;
    color: var(--white);

}

.selectize-control.single .selectize-input:after {
    margin: unset;
    border: unset;
    color: var(--def-gray);
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    top: 0;
    right: 0;
    left: unset;
    width: 32px;
    height: 100%;
    font-size: 24px;
    font-weight: 300;
    display: grid;
    place-content: center;
    transition: transform .3s;
}

.selectize-control.single .selectize-input.dropdown-active:after {
    transform: rotate(180deg);
    margin: unset;
    border: unset;
}

.custom_labor_hours {
    border-radius: var(--gap);
    border-color: var(--table-alt);
    border: 2px solid var(--table-head);
    padding: calc(var(--gap) / 2) var(--gap);
}

.labor_value {
    width: 60px!important;
}

.header-nav {
    height: var(--side-w);
    background-color: var(--pr-green);
    box-shadow: var(--drop);
    padding: var(--gap);
    padding-right: 0;
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 5;
}

.header-nav .navbar-wrapper {
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
    justify-content: space-between;
    max-height: var(--max-h);
}

.header-nav .navbar-wrapper .nav-logo img {
    height: var(--max-h);
}

.header-nav .navbar-wrapper .nav-user {
    display: flex;
    gap: var(--gap);
    align-items: center;
    position: relative;
    padding-right: var(--gap);
    font-size: 15px;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper {
    display: flex;
    gap: var(--gap);
    align-items: center;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper [class^="material"] {
    font-size: 20px;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper .user-avatar {
    position: relative;
    display: flex;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper .user-avatar [class^="material"] {
    font-size: 28px;
}

.header-nav .navbar-wrapper .nav-user .user-dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50px;
    right: 0;
    width: 240px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: top .4s, opacity .2s;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper.active .user-dropdown {
    visibility: visible;
    opacity: 1;
    top: 38px;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper > [class^="material"] {
    transition: transform .3s, color .3s;
}

.header-nav .navbar-wrapper .nav-user .user-wrapper.active > [class^="material"] {
    transform: rotate(-90deg);
    color: var(--pr-yellow);
}

.header-nav .navbar-wrapper .nav-user .user-dropdown .user-dropdown-item {
    height: var(--side-w);
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
    background-color: var(--pr-green);
    color: var(--white);
    font-weight: 600;
    padding-inline: calc(var(--gap) * 1.5);
    transition: background-color .3s;
}

.header-nav .navbar-wrapper .nav-user .user-dropdown .user-dropdown-item:hover {
    background-color: var(--pr-yellow);
}

.sidebar-wrapper {
    position: fixed;
    top: var(--side-w);
    height: calc(100% - var(--side-w));
    z-index: 4;
    display: flex;
    font-size: 15px;
    font-weight: 600;
}

.sidebar-nav {
    width: var(--nav-w);
    background-color: var(--pr-green);
    height: 100%;
    transition: width .3s ease-in-out;
    box-shadow: var(--drop);
}

.sidebar-wrapper.active .sidebar-nav {
    width: var(--nav-w);
}

.sidebar-wrapper.active .toggle-container .sidebar-toggle {
    transition: transform .2s ease-in-out;
    transform: rotate(180deg);
}

.sidebar-wrapper.active .toggle-container .sidebar-toggle > * {
    left: 1px;
}

.sidebar-nav .nav-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    list-style: none;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav .nav-list .nav-item {
    color: var(--white);
    display: block;
    position: relative;
    width: 100%;
    transition: background-color .3s;
}

.sidebar-nav .nav-list .nav-item a {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--white);
    transition: color .3s;
}

.sidebar-nav .nav-list .nav-item.selected {
    background-color: var(--sc-yellow);
}

.sidebar-nav .nav-list .nav-item.selected > a {
    color: var(--def-gray);
}

.sidebar-nav .nav-list .nav-item:hover {
    background-color: var(--pr-yellow);
}

.sidebar-nav .nav-list .nav-item:hover > a {
    color: var(--white);
}

.sidebar-nav .nav-list .nav-item a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-nav .nav-list .nav-item a [class^="material"],
.sidebar-nav .nav-list .nav-item a i,
.sidebar-nav .nav-list .nav-item a > *:first-child {
    display: block;
    position: relative;
    min-width: var(--side-w);
    height: var(--side-w);
    line-height: var(--side-w);
    text-align: center;
    margin: 0;
}

.sidebar-nav .nav-list .nav-item a [class^="material"].arrow {
    margin-left: auto;
    transition: transform .3s, color .3s;
}

.sidebar-nav .nav-list .nav-item.active a [class^="material"].arrow {
    transform: rotate(-90deg);
    color: var(--pr-yellow);
}

.sidebar-nav .nav-list .nav-item.active:hover a [class^="material"].arrow {
    color: var(--white);
}

.sidebar-nav .nav-list .nav-item a .nav-title {
    display: block;
    position: relative;
    padding: 0 calc(var(--gap) / 2);
    height: var(--side-w);
    line-height: var(--side-w);
    text-align: start;
    white-space: nowrap;
}

.sidebar-nav .nav-list .nav-item > ul {
    background-color: var(--pr-green);
    z-index: 4;
    display: none;
    border-radius: unset;
    border-bottom: unset;
}

.sidebar-nav .nav-list .nav-item.active > ul {
    border-top: 1px solid var(--sc-green);
    display: block;
}

.sidebar-nav .nav-list .nav-item > ul li {
    width: 100%;
    transition: background-color .3s;
}

.sidebar-nav .nav-list .nav-item > ul li:hover {
    background-color: var(--sc-green);
}

.sidebar-nav .nav-list .nav-item > ul li .menu-item {
    padding-inline: calc(var(--gap) * 1.5);
}

.sidebar-nav .nav-list .nav-item > ul li .menu-item.selected {
    background-color: var(--sc-yellow);
    color: var(--def-gray);
}

.sidebar-nav .nav-list .nav-item > ul li .menu-item .nav-title {
    padding: 0;
    width: 100%;
}

.sidebar-wrapper .toggle-container {
    display: none;
    width: calc(var(--side-w) / 2);
    height: 100%;
    position: relative;
}

.sidebar-wrapper .toggle-container .sidebar-toggle {
    width: 18px;
    height: 18px;
    background-color: var(--pr-green);
    border-radius: 50%;
    outline: 2px solid var(--white);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 14px;
    position: absolute;
    top: 40px;
    left: -9px;
    cursor: pointer;
    z-index: 999;
}

.sidebar-wrapper .toggle-container .sidebar-toggle > * {
    font-size: 18px;
    position: relative;
}

.mobile-toggle {
    display: flex;
    align-items: center;
    height: 48px;
    width: 48px;
    cursor: pointer;
    color: var(--white);
}

.mobile-toggle label {
    display: flex;
    flex-direction: column;
    width: 40px;
    cursor: pointer;
    position: absolute;
    height: 100%;
}

.mobile-toggle svg {
    fill: var(--white);
}

.mobile-toggle svg rect {
    transition: .3s ease-in-out;
}

.mobile-toggle.active svg rect:nth-child(1) {
    transform-origin: center;
    transform: rotateZ(45deg) translate(2px, 7px);
    width: 32px;
}

.mobile-toggle.active svg rect:nth-child(2) {
    transform-origin: center;
    transform: rotateZ(-45deg);
}

.mobile-toggle.active svg rect:nth-child(3) {
    transform-origin: bottom;
    transform: rotateZ(45deg) translate(2px, -1px);
    width: 0;
}
.sub-items-align {
    padding-left: 40px;
}

.table-container {
    height: 100%;
}

.table-container,
.table-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: calc(var(--gap) * 1);
    border-radius: var(--gap);
    background-color: var(--white);
    box-shadow: var(--drop-light);
    overflow: auto;
}

.table-container .table-wrapper {
    padding: unset;
    border-radius: unset;
    background-color: unset;
    box-shadow: unset;
    display: block;
    max-height: 83%;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
}

.table-actions {
    display: flex;
    gap: var(--gap);
    align-items: center;
    align-self: flex-start;
}

.table-actions select {
    padding: var(--gap);
    min-width: 180px;
    line-height: normal;
}

thead {
    background-color: var(--table-head);
    font-weight: 600;
    height: 42px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-wrapper > table > thead {
    z-index: 3;
}

thead > tr {
    border-bottom: 2px solid var(--white);
}

th {
    font-weight: 600;
}

th, td {
    vertical-align: middle;
    padding: calc(var(--gap) / 1.333) var(--gap);
    height: calc(var(--gap) * 5);
    line-height: normal;
}


.component .table-nested tbody > tr {
    background-color: var(--white);
}

.table-nested:not(.table-vendor-cat) tbody > tr:not(:last-child) {
    border-bottom: 1px solid var(--table-head);
}

/* .table-nested tbody > tr:nth-child(2n) {
    background-color: unset;
} */

tbody > tr {
    cursor: pointer;
    transition: background-color .3s;
}

tbody > tr.cs-highlight {
    background-color: var(--sc-green);
}

.table-wrapper tbody > tr:hover {
    background-color: var(--table-hover) !important;
}

.table-wrapper .toggleTable:hover {
    background-color: unset;
}

.table-header, .table-footer {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 2);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--gap);
    font-weight: 600;
}

.table-header {
    margin-top: unset;
}

.table-header > *:only-child,
.table-footer > *:only-child {
    margin-left: auto;
}

.vendor-select-div {
    display: flex;
    gap: var(--gap);
    align-items: center;
    margin-left: unset;
}

.table-header .table-title {
    font-family: 'Montserrat', sans-serif;
    font-size: max(calc(var(--gap) * 2), 14px);
}

.table-header .table-info {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.table-header .info-value {
    min-width: calc(var(--gap) * 4);
    height: max(calc(var(--gap) * 4), 28px);
    padding: var(--gap);
    border-radius: var(--gap);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sc-green);
}

.table-header .info-value.phases-mode {
    min-width: calc(var(--gap) * 10);
    justify-content: flex-start;
}

.table-search {
    display: flex;
    justify-content: flex-end;
}

.table-search label {
    position: relative;
    width: clamp(180px, 320px, 100%);
}

.table-search label::before {
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iOCIgeT0iMTEuNDE3OCIgd2lkdGg9IjAuNjQ3NjI1IiBoZWlnaHQ9IjYuMzM3MDciIHJ4PSIwLjMyMzgxMiIgdHJhbnNmb3JtPSJyb3RhdGUoLTMwIDggMTEuNDE3OCkiIGZpbGw9IiM0NTQ1NDUiLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjYuMDk0MDYiIHI9IjUuNSIgc3Ryb2tlPSIjNDU0NTQ1Ii8+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-position: calc(50% - 1px);
    width: 36px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid var(--def-gray);
    z-index: 2;
    transition: .3s ease-in-out;
}

.table-search label:focus-within::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iOC4yMjExNyIgeT0iMTEuMzgzMSIgd2lkdGg9IjAuMzIzODEyIiBoZWlnaHQ9IjYuMDEzMjYiIHJ4PSIwLjE2MTkwNiIgdHJhbnNmb3JtPSJyb3RhdGUoLTMwIDguMjIxMTcgMTEuMzgzMSkiIGZpbGw9IiM0NTQ1NDUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC4zMjM4MTIiLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K);
    background-color: var(--pr-green);
    border-right: unset;
    border-top-left-radius: calc(var(--gap) / 2);
    border-bottom-left-radius: calc(var(--gap) / 2);
}

.table-search label input {
    padding-left: 40px;
    color: var(--def-gray);
    border-color: var(--def-gray);
    height: 38px;
    width: 100%;
    font-weight: 600;
    border-width: 1px;
    border-radius: calc(var(--gap) / 2);
    outline: none;
}

.table-search label input:focus {
    transition: .3s ease-in-out;
    background-color: var(--focus);
    border-color: var(--orange);
    box-shadow: inset 1px 1px 3px hsl(0deg 0% 0% / 35%);
}

.table-search label input:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

.table-entries label, .table-entries-show {
    display: flex;
    gap: calc(var(--gap) / 2);
    align-items: center;
}

.table-entries select {
    padding-left: calc(var(--gap) * 1.25);
}

.table-pagination .pagination {
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * 1);
}

.table-pagination .pagination .page-item {
    min-width: 32px;
    padding: calc(var(--gap) * .75);
    font-weight: 600;
    text-align: center;
    display: grid;
    place-content: center;
    align-self: stretch;
    border-radius: calc(var(--gap) * 1);
    background-color: var(--table-alt);
    transition: background-color .3s;
    cursor: pointer;
}

.table-pagination .pagination .page-item.disabled {
    pointer-events: none;
}

.table-pagination .pagination .page-item [class^="material"] {
    font-size: 16px;
}

.table-pagination .pagination .page-item:hover {
    background-color: var(--table-head);
}

.table-pagination .pagination .page-item.page-active {
    background-color: var(--pr-green);
    color: var(--white);
}

.pagination .page-item .page-link {
    background-color: unset;
}

.pagination .page-item .page-link:hover {
    background-color: var(--table-alt);
}

.pagination .page-item.page-active:hover,
.pagination .page-item.active .page-link:hover {
    background-color: var(--pr-green);
}

.th-actions {
    width: calc(var(--gap) * 15);
    text-align: center;
}

.cs-actions {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

.cs-actions-job {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
}

.cs-actions a {
    color: var(--white);
}

.cs-actions a:hover {
    color: unset;
}

/* apply .collapsed class to table-wrapper div to make it responsive */

.collapsed table {
    table-layout: fixed;
}

.collapsed thead {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.collapsed tr {
    display: block;
    border-bottom: 2px solid var(--table-head);
    margin-bottom: var(--gap);
}

.collapsed tr:only-child {
    border-bottom: unset;
    margin-bottom: unset;
}

.collapsed td {
    border-bottom: 1px solid var(--table-head);
    display: block;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .3s;
}

.collapsed td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    padding-right: var(--gap);
}

.collapsed td:last-child {
    border-bottom: 0;
}

.toggle.active {
    border-bottom: unset !important;
}

.toggle .expand span,
.toggle.expand span {
    font-size: 28px;
    vertical-align: middle;
    transition: transform .3s ease-in-out, color .3s;
}

.toggle.active .expand span {
    transform: rotate(-90deg);
    color: var(--pr-green);
}

.toggle.active + .toggleTable {
    border-bottom: 2px dashed var(--sc-green);
}

.toggleTable {
    display: none;
}

.toggleTable.active {
    display: table-row;
}

.toggleTable.active > td {
    height: auto;
}

.toggleTable table {
    border: 1px solid var(--sc-green);
    font-size: 13px;
    font-style: italic;
}

.toggleTable table thead {
    background-color: var(--sc-green);
    min-height: unset;
    height: unset;
}

.toggleTable .table-wrapper table tbody tr,
.toggleTable table tbody tr {
    background-color: var(--white) !important;
}

.toggleTable .table-wrapper table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--sc-green);
}

th .material-symbols-rounded {
    font-size: 28px;
}

.table-vendor-cat > table > thead > tr > th:nth-child(2) {
    padding-left: calc(var(--gap) * 2);
}

.sml_assembly_row {
    border-bottom: 1px solid grey !important;
}

.sml_product_row {
    border-bottom: 1px solid grey !important;
}

.assembly_row {
    border-bottom: 1px solid grey !important;
}

.product_row {
    border-bottom: 1px solid grey !important;
    cursor: default;
}

.archived-row {
    background-color: #E7CED8;
}


.sort-left-span {
    float: left;
}

.sort-right-span {
    float: right;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
    cursor: pointer;
}

.custom-date-input::-webkit-calendar-picker-indicator {
    padding-left: 10%;
}

.custom-date-input {
    width: 70%;
}

.custom-input-span-left {
    padding-left: 15px;
}

.estimator-list-selectize {
    flex-grow: 0.4;
}

.custom-select-date-range {
    padding-left: 15%;
    padding-right: 15%;
}

.selectize-control.plugin-remove_button .remove-single {
    top: -5px;
}

.form-row .logo-card {
    width: 100%;
    height: auto;
    max-width: 480px;
    max-height: 240px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: calc(var(--gap) * 2);
    border-radius: var(--gap);
    /*overflow: hidden;*/
    position: relative;
}

.form-row .logo-card .logo-tooltip {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--table-head);
    border-radius: var(--gap);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s;
}

.form-row .logo-card .logo-tooltip > a {
    flex: 1;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--white);
    background-color: var(--table-head);
    transition: background-color .3s, color .3s;
}

.form-row .logo-card .logo-tooltip > a:last-child {
    border-radius: 0 var(--gap) var(--gap) 0;
}

.form-row .logo-card .logo-tooltip > a:hover {
    background-color: var(--sc-green);
}

.form-row .logo-card .logo-tooltip > a.logo-delete:hover {
    background-color: var(--sc-yellow);
    color: var(--alt-gray);
}

.form-row .logo-card:hover .logo-tooltip {
    visibility: visible;
    opacity: 1;
}

#company_info_form .logo-row {
    height: auto; align-items: flex-start
}

.pricing-manager {
    height: 100%;
}

.pricing-manager .card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .card .card-header {
    display: flex;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    border-radius: var(--gap);
    flex-wrap: wrap;
}

.pricing-manager .card .card-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
    overflow: auto;
}

.pricing-manager .card .card-header .card-header-group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--gap);
    align-items: flex-end;
    justify-content: flex-end;
    flex: 1;
}

.pricing-manager .card .card-header .card-header-group:first-child {
    align-items: flex-start;
    justify-content: space-between;
}

.pricing-manager .card .card-header .card-header-group .dropdown-price-group {
    width: 100%;
}

.pricing-manager .card .card-header .card-header-group .dropdown-price-group .select-dropdown select {
    max-width: 420px;
}

.pricing-manager .card-content .card-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.pricing-manager .card-content .card-body .navigation-tabs {
    z-index: 4;
}

.pricing-manager .card-content .card-body .nav-tabs {
    gap: calc(var(--gap) * 2);
    border: unset;
    border-radius: unset;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-item {
    display: flex !important;
    justify-content: center;
    margin: 0;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link {
    flex: 1 1 0;
    align-self: flex-end;
    margin: 0;
    border: unset;
    border-radius: var(--gap) var(--gap) 0 0;
    padding: var(--gap) calc(var(--gap) * 2);
    background-color: var(--table-alt);
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link.active {
    background-color: var(--white);
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header {
    color: var(--def-gray);
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    line-height: calc(var(--gap) * 4);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .title-vendor-name {
    color: var(--pr-green);
    max-width: 20ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header i {
    cursor: pointer;
    width: 32px;
    margin: 0;
    z-index: unset;
    text-align: center;
    font-size: 18px;
    position: relative;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--gap) * 1.25);
    border-radius: var(--gap);
    background-color: var(--white);
    filter: drop-shadow(0px 1px 3px var(--sc-green));
    transition: opacity .5s ease-in-out, top .5s;
    width: 300px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    z-index: -1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info .emphasis {
    font-style: italic;
    font-weight: 600;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .tooltip-info::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    background-color: var(--white);
    transform: translateX(-50%) rotate(45deg);
    top: -10px;
    border-radius: 4px;
    z-index: -1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header i:hover .tooltip-info {
    visibility: visible;
    opacity: 1;
    top: 40px;
    z-index: 1;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link.active::before {
    background-color: var(--pr-green);
    bottom: 0;
}

.pricing-manager .card-content .card-body .tab-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pricing-manager .card-content .card-body .tab-content::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.pricing-manager .card-content .card-body .tab-content::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

.pricing-manager .card-content .card-body .tab-content {
    flex: 1;
    padding: calc(var(--gap) * 2);
    background-color: var(--white);
    border-radius: 0 0 var(--gap) var(--gap);
    overflow: auto;
}

.pricing-manager .card-content .card-body .tab-content .tab-pane {
    padding: 0;
    height: 100%;
    overflow: unset;
}

.pricing-manager .card-content .card-body .tab-content .pricing-notice {
    padding: calc(var(--gap) * 2) 0;
}

.pricing-manager .card-content .card-body .tab-content .pricing-notice span a {
    color: var(--sc-plum);
    font-weight: 700;
    font-style: italic;
}

.pricing-manager .card-content .card-body .tab-content .table-wrapper {
    padding: unset;
    box-shadow: unset;
    border-radius: unset;
    min-height: 80px;
}

.pricing-manager .card-content .card-body .tab-content .tab-pane [class$="content"],
.pricing-manager .card-content .card-body .tab-content .tab-pane [class$="content"] .pricing-parameters {
    display: flex;
    gap: calc(var(--gap) * 2);
    flex-direction: column;
}

.pricing-manager [id$="wrapper"] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
}

.pricing-manager [id$="wrapper"] > .row {
    margin: 0;
}

.pricing-manager [id$="wrapper"] > .row:first-child {
    gap: calc(var(--gap) * 2);
}

.pricing-manager [id$="wrapper"] > .row:first-child > div {
    flex: 1;
    max-width: 100%;
}

.pricing-manager [id$="wrapper"] > .row:first-child > div:first-child {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1.5);
    align-items: flex-start;
}

.pricing-manager [id$="wrapper"] > .row > div {
    padding: 0;
}

.pricing-manager table .selected {
    background-color: var(--sc-green) !important;
    color: var(--def-gray);
}

.pricing-manager [id$="wrapper"] > .row:nth-child(2) {
    height: 100%;
    overflow: hidden;
}

.pricing-manager .prods-group [id$="wrapper"] > .row:nth-child(2) {
    height: 70%;
    overflow: hidden;
}

.pricing-manager [id$="wrapper"] > .row:nth-child(2) > div {
    max-height: 100%;
    overflow: auto;
    align-items: flex-start;
}

.pricing-manager [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pricing-manager [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

.pricing-manager [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

.pricing-manager [id$="wrapper"] table {
    margin: 0 !important;
}

.pricing-manager [id$="wrapper"] table thead {
    background-color: var(--table-head);
    position: sticky;
    top: 0;
    z-index: 2;
    height: 38px;
    vertical-align: middle;
}

.pricing-manager [id$="wrapper"] table thead > tr {
    padding: calc(var(--gap) / 2) calc(var(--gap) * 1.5);
    border-bottom: 1px solid var(--white);
    background-color: unset;
    color: unset;
}

.pricing-manager [id$="wrapper"] table thead th {
    border: unset;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    height: 100%;
    padding: var(--gap);
    box-sizing: border-box;
}

.pricing-manager [id$="wrapper"] table thead th::after,
.pricing-manager [id$="wrapper"] table thead th::before {
    font-size: calc(var(--gap) * 2);
    top: 0;
    right: calc(var(--gap) * 1);
    height: 100%;
    display: grid;
    place-items: center;
}

.pricing-manager [id$="wrapper"] table thead th::before {
    right: calc(var(--gap) * 2);
}

.pricing-manager [id$="wrapper"] table tbody {
    border: unset;
}

.pricing-manager [id$="wrapper"] table tbody tr {
    padding: calc(var(--gap) / 2) calc(var(--gap) * 1.5);
    border-top: 1px solid var(--white);
}

.pricing-manager [id$="wrapper"] table tbody tr:nth-child(2n+1) {
    background-color: var(--table-alt);
}

.pricing-manager [id$="wrapper"] table tbody tr td {
    font-size: 14px;
    border: unset;
    padding: var(--gap);
    text-align: unset;
    box-sizing: border-box;
    height: 36px;
    vertical-align: middle;
}

.pricing-manager .vendorsTab [id$="wrapper"] table tbody tr td:last-child,
.pricing-manager .vendorsTab [id$="wrapper"] table thead th:last-child,
.pricing-manager .vendorsTab [id$="wrapper"] table tbody tr td:nth-last-child(2),
.pricing-manager .vendorsTab [id$="wrapper"] table thead th:nth-last-child(2)  {
    text-align: center;
}

.pricing-manager .vendorsTab [id$="wrapper"] table tbody tr td:last-child, .pricing-manager .vendorsTab [id$="wrapper"] table tbody tr td:nth-last-child(2) {
    font-weight: 600;
}

.pricing-manager .dollar-sign-span, .pricing-manager .to-factor-span {
    font-weight: 700;
    color: var(--pr-green);
}

.pricing-manager .override-text {
    display: flex;
    align-items: flex-end;
    color: var(--sc-plum);
    font-style: italic;
}

.pricing-manager .vendorsTab .pricing-parameters {
    width: 100%;
    max-width: 70%;
    margin-inline: auto;
}

.pricing-manager .pricing-parameters .vendors-calc {
    display: flex;
    gap: calc(var(--gap) * 2);
    padding-bottom: calc(var(--gap) * 2);
    transition: width .5s ease-in-out;
    align-self: center;
    font-size: 14px;
    width: 100%;
    flex-wrap: wrap;
}

.pricing-manager .pricing-parameters .vendors-calc > .vendors-calc-group {
    background-color: var(--def-white);
    padding: calc(var(--gap) * 2);
    padding-top: 48px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    border-radius: 4px;
    min-width: 420px;
    position: relative;
}

.pricing-manager .pricing-parameters .vendors-calc .vendors-calc-title {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--white);
    padding: var(--gap) calc(var(--gap) * 2);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    border-radius: var(--gap) 0;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid var(--sc-yellow);
    line-height: normal;
}

.pricing-manager .pricing-parameters .vendors-calc .vendors-pricing-multipliers .pricing-multipliers {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
}

.pricing-manager .pricing-parameters .vendors-calc .row {
    margin: 0;
    justify-content: flex-start;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .pricing-parameters .vendors-calc .row > .col {
    padding: 0;
    width: unset;
    flex: unset;
}

.pricing-manager .pricing-parameters .vendors-calc .btn-row {
    margin-top: auto;
}

.pricing-manager .pricing-parameters .vendors-calc input {
    border: unset;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 35%);
    width: calc(var(--gap) * 6);
    height: calc(var(--gap) * 4);
    padding: var(--gap);
    outline: unset;
}

.pricing-manager .pricing-parameters .vendors-calc input:focus {
    box-shadow: inset 1px 1px 3px var(--pr-green);
}

.pricing-manager .pricing-parameters .vendors-calc .calc-group {
    margin: 0;
    margin-top: auto;
    position: relative;
    display: flex;
    padding-top: calc(var(--gap) * 2);
    gap: calc(var(--gap) * 2);
    align-items: center;
    justify-content: flex-end;
}

.pricing-manager .pricing-parameters .vendors-calc .calc-group::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: var(--sc-green);
    top: 0;
    left: 0;
}

.pricing-manager .vendors-calc .calc-group .calc-bg {
    height: calc(var(--gap) * 4);
    min-width: calc(var(--gap) * 8);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sc-green);
    padding: var(--gap) calc(var(--gap) * 2);
    border-radius: 4px;
    font-weight: 600;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .factor-group {
    flex-basis: 52px;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row > div {
    align-self: center;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .value-group {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .value-group .to-factor-span {
    margin-right: auto;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .value-group .factor-percent {
    margin: 0 calc(var(--gap) / 2) 0 calc(var(--gap) * 2);
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    width: calc(var(--gap) * 4.5);
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group .remove-factors-line {
    width: calc(var(--gap) * 4.5);
    height: calc(var(--gap) * 4);
    min-width: unset;
}

.pricing-manager .pricing-parameters .vendors-calc .factor-row .remove-group .remove-factors-line i {
    margin: 0;
}

.pricing-manager .card-content .card-body .tab-content .cats-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
}

.pricing-manager .cats-content {
    height: 100%;
}

.pricing-manager .cats-content .cats-group .card-table-title {
    display: flex;
    gap: calc(var(--gap) * 2);
    align-items: center;
}

.pricing-manager .cats-content .cats-group .card-table-title select {
    max-width: 400px;
}

.pricing-manager .cats-content .cats-group .table-wrapper thead,
.pricing-manager .vendors-content .table-wrapper thead  {
    height: 38px;
}

.pricing-manager .prodsTab .prods-select-group {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.pricing-manager .prodsTab .prods-content {
    height: 100%;
    display: flex;
    gap: calc(var(--gap) * 2);
}

.pricing-manager .prodsTab .prods-content .prods-group {
    height: 100%;
    display: flex;
    gap: calc(var(--gap) * 2);
    flex-direction: column;
}

.pricing-manager .prodsTab .prods-content .prods-group:first-child {
    flex: 0 0 40%;
}

.tr-sub-cat-style {
    background-color: #F3F3F3!important;
}

.tr-sub-cat-style td{
    border: 1px solid #C0C0C0!important;
}


@media (max-width: 1600px) {
    .pricing-manager .vendorsTab .pricing-parameters {
        max-width: 100%;
    }
}

@media (min-width: 1401px) {
    .pricing-manager .card-content .card-body .tab-content .tab-pane .cats-content,
    .pricing-manager .card-content .card-body .tab-content .tab-pane .prods-content {
        flex-direction: row;
    }
}

@media (max-width: 1400px) {

}

@media (max-width: 1280px) {
    :root {
        --nav-w: 200px;
    }

    .form-section {
        flex-direction: column;
    }

    #dashboard .form-section {
        flex-direction: row;
    }

    .options .form-section {
        flex-direction: row;
    }

    .edit-product .form-row.form-textarea,
    .create-product .form-row.form-textarea,
    .edit-product-add-vendor .form-row.form-textarea {
        grid-row: span 2;
    }

    .pricing-manager .card-content .card-body .nav-tabs {
        flex-direction: column;
        gap: unset;
    }

    .pricing-manager .card-content .card-body .nav-tabs .nav-item:not(:last-child) {
        border-bottom: 2px solid var(--sc-green);
    }

    .pricing-manager .card-content .card-body .nav-tabs .nav-item:not(:first-child) .nav-link {
        border-radius: unset;
    }

    .pricing-manager .card-content .card-body .nav-tabs .nav-link .tab-header .title-vendor-name {
        max-width: 30ch;
    }

    .pricing-manager .prodsTab .prods-select-group {
        margin-top: 0;
    }

    .pricing-manager .card-content .card-body .tab-content .cats-group {
        width: 100%;
        flex: 1 1 100%;
    }

    .custom-input.active {
        padding-right: calc(var(--gap) * 4);
    }

    .toggleTable tr {
        border-bottom: unset;
        margin-bottom: unset;
    }

    tr.select2-row {
        border: unset;
    }

    td.select2-td {
        border: unset;
    }

    .table-assembly-prod .select2-row td:not(.select2-td),
    .table-sml-items .select2-row td:not(.select2-td) {
        display: none;
    }

    .estimates .form-column .form-row {
        grid-column: span calc(var(--grid-cols) / 2);
    }

    .estimates .custom-tabs-nav-item > a,
    .estimates .custom-tabs-nav-item .phases-wrap {
        min-width: calc(var(--gap) * 15);
    }
}

@media (max-width: 1200px) {

}

@media (max-width: 1080px) {
    table {
        table-layout: fixed;
    }

    thead {
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    tr {
        display: block;
        border-bottom: 2px solid var(--table-head);
    }

    tr:not(:only-child) {
        margin-bottom: var(--gap);
    }

    .table-nested tr:not(:only-child) {
        margin-bottom: unset;
    }

    td {
        border-bottom: 1px solid var(--table-head);
        display: block;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: background-color .3s;
        height: auto;
    }

    td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        padding-right: var(--gap);
    }

    td:last-child {
        border-bottom: 0;
    }

    .cs-actions,
    .custom-input {
        justify-content: flex-end;
        margin-left: auto;
    }

    .form-section .form-column {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .form-section .form-column .form-row {
        grid-column: unset;
    }

    .estimates .rows .form-label {
        flex: unset;
    }

    .estimates .pricing-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    #dashboard .form-section {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .mobile-toggle {
        display: none;
    }
}

@media (max-width: 767px) {

    #app {
        --gap: 6px;
        margin: 0;
    }

    #app ~ .footer {
        margin: 0;
        padding: calc(var(--gap) * 1) calc(var(--gap) * 2);
    }

    .sidebar-wrapper.active {
        width: 100%;
    }

    .sidebar-wrapper.active .sidebar-nav {
        width: 100%;
    }

    .sidebar-wrapper .sidebar-nav {
        width: 0;
    }

    .sidebar-wrapper .toggle-container {
        display: none;
    }

    .sidebar-nav .nav-list .nav-item > ul {
        width: 100%;
    }

    .form-label {
        flex: unset;
        flex-grow: 1;
        border-radius: var(--gap) var(--gap) 0 0;
        height: calc(var(--gap) * 6);
        width: 100%;
    }

    .form-textarea .form-label {
        height: calc(var(--gap) * 6);
    }

    .form-input, .selectize-control, .selectize-input {
        width: 100%;
        border-radius: 0 0 var(--gap) var(--gap);
        height: calc(var(--gap) * 6);
    }

    .form-row select.form-input {
        height: calc(var(--gap) * 6) !important;
        border-radius: 0 0 var(--gap) var(--gap) !important;
    }

    .form-row.form-textarea {
        grid-row: span 1;
    }

    .form-textarea textarea.form-input {
        height: calc(var(--gap) * 12);
    }

    .form-row.is-invalid .form-label {
        border: 2px solid var(--sc-plum);
        border-bottom: unset;
    }

    .form-row.is-invalid .form-input {
        border: 2px solid var(--sc-plum);
        border-top: unset;
    }
}

@media (max-width: 520px) {
    .estimates .custom-tabs-nav-item > a,
    .estimates .custom-tabs-nav-item .phases-wrap {
        min-width: auto;
    }

}

@media (max-width: 414px) {
    .actions > * {
        flex-grow: 1;
    }

    .actions > * > [class*="btn-cs"] {
        width: 100%;
    }
}

#app .content-wrapper {
    padding: calc(var(--gap) * 2);
    gap: calc(var(--gap) * 1);
    overflow: auto;
}

#app .content-wrapper .content-body {
    overflow: hidden;
    height: 100%;
}

[class*="btn-cs"] {
    box-shadow: unset;
}

.bulk-action-checkbox {
    cursor: pointer;
}
a:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

a:focus:not(:focus-visible) {
    outline: unset;
}

.breadcrumb {
    font-family: unset;
}

.container {
    max-width: unset;
    padding: unset;
}

form .form-section {
    line-height: unset;
    margin: unset;
    color: unset;
    border: unset;
}

.form-label label {
    color: unset;
}

.assembly-products-input {
    border:none !important;
    background-color: transparent;
}

.form-row {
    margin: unset;
}

.form-row .select2-container {
    flex-grow: 1;
    height: max(calc(var(--gap) * 5), 36px);
    border: 2px solid var(--table-head);
    border-radius: 0 var(--gap) var(--gap) 0;
    transition: outline .3s;
    align-self: stretch;
    width: auto !important;
    position: relative;
}

.rows .form-row .select2-container {
    border-radius: 0 0 var(--gap) var(--gap);
}

.form-row .select2-container.select2-container--open {
    border-radius: 0;
}

.form-row .select2-container::after {
    font-family: 'Material Symbols Rounded';
    content: 'expand_more';
    position: absolute;
    top: 0;
    right: 0;
    left: unset;
    width: 32px;
    height: 100%;
    font-size: 24px;
    font-weight: 300;
    display: grid;
    place-content: center;
    transition: transform .3s;
}

.form-row .select2-container.select2-container--open::after {
    transform: rotate(180deg);
}

.form-row .select2-container .selection {
    height: 100%;
    display: block;
}

.form-row .select2-container .selection .select2-selection__arrow {
    display: none;
}

.form-row .select2-container .selection .select2-selection--single {
    border: unset;
    display: block;
    height: 100%;
}

.form-row .select2-container .selection .select2-selection--single .select2-selection__rendered {
    height: 100%;
    line-height: normal;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

.select2-results .select2-results__options .select2-results__option[aria-selected="true"] {
    background-color: var(--pr-green) !important;
}

select.form-input {
    border-color: var(--table-head) !important;
    border-radius: 0 var(--gap) var(--gap) 0 !important;
    background-color: var(--white) !important;
    height: max(calc(var(--gap) * 5), 36px) !important;
}

#app .component .tab-pane {
    padding: unset;
}

.pricing-manager .card {
    background-color: unset;
    padding: unset !important;
    box-shadow: unset;
}

.phase-input {
    width: 110px!important;
}

.pricing-manager .card .card-header {
    padding: calc(var(--gap) * 2) !important;
    flex-direction: unset !important;
}

.pricing-manager .card .card-header::after {
    display: none;
}

.pricing-manager .card-content .card-body .nav-tabs .nav-link {
    padding: var(--gap) calc(var(--gap) * 2) !important;
}

#pricing .card-content .card-body .nav-tabs .nav-link .tab-header {
    flex-direction: unset;
    justify-content: flex-start;
}

#pricing .lastPriceGroup {
    align-items: flex-end;
}

#pricing .card-content .card-body .nav-tabs .nav-link.active .tab-header {
    font-weight: 600;
}

#pricing .card-content .card-body .tab-content .tab-pane {
    padding: 0 !important;
}

#pricing [id$="wrapper"] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    height: 100%;
}

#pricing [id$="wrapper"] > .row {
    margin: 0;
}

#pricing [id$="wrapper"] > .row:first-child {
    gap: calc(var(--gap) * 2);
}

#pricing [id$="wrapper"] > .row:first-child > div {
    flex: 1;
    max-width: 100%;
}

#pricing [id$="wrapper"] > .row:first-child > div:first-child {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1.5);
    align-items: flex-start;
}

#pricing [id$="wrapper"] > .row > div {
    padding: 0;
}

#pricing table .selected {
    background-color: var(--sc-green) !important;
    color: var(--def-gray);
}

#pricing [id$="wrapper"] > .row:nth-child(2) {
    height: 100%;
    overflow: hidden;
}

#pricing .prods-group [id$="wrapper"] > .row:nth-child(2) {
    height: 70%;
    overflow: hidden;
}

#pricing [id$="wrapper"] > .row:nth-child(2) > div {
    max-height: 100%;
    overflow: auto;
    align-items: flex-start;
}

#pricing [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#pricing [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar-track {
    background-color: var(--table-head);
}

#pricing [id$="wrapper"] > .row:nth-child(2) > div::-webkit-scrollbar-thumb {
    background-color: var(--sc-green);
}

#pricing [id$="wrapper"] table {
    margin: 0 !important;
}

#pricing [id$="wrapper"] table thead {
    background-color: var(--table-head);
    position: sticky;
    top: 0;
    z-index: 2;
    height: calc(var(--gap) * 7);
    vertical-align: middle;
}

#pricing [id$="wrapper"] table thead > tr {
    padding: calc(var(--gap) / 2) calc(var(--gap) * 1.5);
    border-bottom: 1px solid var(--white);
    background-color: unset;
    color: unset;
}

#pricing [id$="wrapper"] table thead th {
    border: unset;
    text-align: left;
    font-weight: 600;
    font-family: inherit;
    font-size: 14px;
    padding: var(--gap);
    box-sizing: border-box;
    align-items: center;
}

#pricing [id$="wrapper"] table thead th::after,
#pricing [id$="wrapper"] table thead th::before {
    font-size: calc(var(--gap) * 2);
    top: 0;
    right: calc(var(--gap) * 1);
    height: 100%;
    display: grid;
    place-items: center;
}

#pricing [id$="wrapper"] table thead th::before {
    right: calc(var(--gap) * 2);
}

#pricing [id$="wrapper"] table tbody {
    border: unset;
}

#pricing [id$="wrapper"] table tbody tr {
    padding: unset;
    border-top: 1px solid var(--white);
}

#pricing [id$="wrapper"] table tbody tr:nth-child(2n+1) {
    background-color: var(--table-alt);
}

#pricing [id$="wrapper"] table tbody tr td {
    font-size: 14px;
    border: unset;
    padding: var(--gap);
    text-align: unset;
    box-sizing: border-box;
    height: calc(var(--gap) * 7);
    vertical-align: middle;
}

#pricing #vendorsTab [id$="wrapper"] table tbody tr td:last-child,
#pricing #vendorsTab [id$="wrapper"] table thead th:last-child,
#pricing #vendorsTab [id$="wrapper"] table tbody tr td:nth-last-child(2),
#pricing #vendorsTab [id$="wrapper"] table thead th:nth-last-child(2) {
    text-align: center;
}

#pricing #vendorsTab [id$="wrapper"] table tbody tr td:last-child,
#pricing #vendorsTab [id$="wrapper"] table tbody tr td:nth-last-child(2) {
    font-weight: 600;
}

#pricing .dollar-sign-span, #pricing .to-factor-span {
    font-weight: 700;
    color: var(--pr-green);
}

#pricing .override-text {
    display: flex;
    align-items: flex-end;
    color: var(--sc-plum);
    font-style: italic;
}

#pricing #vendorsTab .pricing-parameters .vendors-calc {
    width: 100%;
}

#pricing .pricing-parameters .vendors-calc .row {
    justify-content: flex-start;
}

.pricing-manager .pricing-parameters .vendors-calc > .vendors-calc-group {
    padding-top: 48px !important;
}

#pricing .pricing-parameters .vendors-calc .vendors-calc-title {
    font-weight: 500;
}

#pricing .pricing-parameters .vendors-calc .calc-group {
    justify-content: flex-end;
    margin-top: auto;
}

#pricing .pricing-parameters .vendors-calc .calc-group::before {
    height: 2px;
    background-color: var(--sc-green);
    box-shadow: unset;
}

@media (min-width: 1401px) {
    .pricing-manager .card-content .card-body .tab-content .tab-pane .prods-content {
        flex-direction: row !important;
    }
}

@media (max-width: 1400px) {
    #pricing #catsTab .cats-content {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 1280px) {
    .pricing-manager .card-content .card-body .tab-content .cats-group {
        flex: 1 1 100% !important;
    }
}

.pricing-manager .prodsTab.active {
    display: flex;
    flex-direction: column;
}

.pricing-manager .prodsTab .prods-content .prods-group:first-child {
    flex: 0 0 65% !important;
}

.table-actions a {
    height: unset;
}

.select2-selection__placeholder {
    font-style: italic;
}

.select2-container--default .select2-selection--single {
    border: 2px solid var(--table-head);
    border-radius: var(--gap);
}

.select2-container--default .select2-dropdown,
.select2-container--default .select2-results__options {
    border-radius: 0 0 var(--gap) var(--gap);
}

.select2-container--default .select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 2px solid var(--table-head);
}

.select2-container--open .select2-dropdown {
    border-top: unset;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--def-gray);
}

.vendor-select-div a {
    font-size: unset;
}

.table-header .vendor-select-div a {
    height: unset;
    margin: unset !important;
}

.pagination .page-link {
    border: unset;
}

.pagination .page-link:hover {
    color: unset;
}

.pagination .active .page-link:hover {
    color: var(--white);
}

.header-grid-pagination{
    display: flex; position: absolute; right: 1rem; gap: var(--gap); align-items: center; font-weight:600;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: unset;
}

.update-wrapper.s3 .update-main .update-action {
    overflow: hidden;
}

.update-wrapper .update-main .update-action button {
    align-self: flex-end;
}

/* .estimates:not(.review) select.form-input {
    border-radius:  0 0 var(--gap) var(--gap) !important;
} */

.estimates .selectize-input {
    height: 40px;
}

.include-in-proposal {
    cursor: pointer;
}

.table-info {
    background-color: unset;
}

#app select {
    height: max(calc(var(--gap) * 5), 36px);
    border: 2px solid var(--table-head);
    border-radius: var(--gap);
    padding-left: var(--gap);
    padding-right: calc(var(--gap) * 4);
}


.update-wrapper .update-main {
    display: flex; /* wtf chrome */
}

.update-wrapper.s3 .cs-table .cs-table-row.match .cs-group-input {
    height: auto;
}

.update-wrapper.s3 .cs-table .cs-table-row.match .cs-table-cell {
    vertical-align: bottom;
}

.update-wrapper.s3 .cs-table .cs-table-row.match .cs-group-input {
    gap: calc(var(--gap) / 2);
}

.update-wrapper.s3 .cs-table .cs-table-row.match .cs-group-input input {
    outline: 2px solid var(--table-hover);
}

.update-wrapper.s3 .cs-table .cs-table-row.match .cs-group-input input[type="radio"] {
    padding: unset;
}

.cs-table .cs-table-body .cs-table-row.head .cs-table-cell {
    border-bottom: unset;
}

.cs-table .cs-table-body .cs-table-row.search input {
    border-bottom: 2px solid var(--table-head);
    margin: unset;
}

.cs-table .cs-table-body .cs-table-row .cs-table-cell input:focus,
.cs-table .cs-table-body .cs-table-row .cs-table-cell textarea:focus {
    border: 2px solid var(--pr-green);
    transition: unset;
    margin: unset;
}

.cs-table .cs-table-body .cs-table-row.search input:focus {
    border: unset;
    border-bottom: 2px solid var(--pr-green);
}

.cs-group-input > .cs-input {
    margin-left: var(--gap);
}

.swal-overlay.swal-overlay--show-modal {
    overflow: hidden;
}

.rows select {
    height: max(calc(var(--gap) * 5), 36px) !important;
    border-radius: 0 0 var(--gap) var(--gap) !important;
}

.custom-filter {
    margin: 0;
}

/* modal-cs */

.modal-cs {
    background-color: rgba(0 0 0 / 40%);
    height: 100%;
    width: 100%;
    max-height: unset;
    display: grid;
    place-items: center;
    border: unset;
    padding: calc(var(--gap) * 2);
    position: fixed;
    inset: 0;
    z-index: 2;
}

.modal-cs .modal-cs-card {
    max-width: 640px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    padding: calc(var(--gap) * 2);
    border-radius: calc(var(--gap) / 2);
    background-color: var(--white);
}

.modal-cs .modal-cs-card > * {
    width: 100%;
    text-align: center;
}

.modal-cs .modal-cs-card .modal-cs-header [class^="material"] {
    font-size: 120px;
    color: var(--pr-yellow);
    font-variation-settings: 'FILL' 1;
}

.modal-cs .modal-cs-card .modal-cs-body {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    text-align: center;
    font-size: 15px;
}

.modal-cs .modal-cs-card .modal-cs-body .modal-cs-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.modal-cs .modal-cs-card .modal-cs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--gap) * 2);
    flex-wrap: wrap;
}

.modal-cs .modal-cs-card .modal-cs-footer [class^="btn-cs"]:only-child {
    margin-left: auto;
}

/* custom loading animation */

.modal-cs.loading-cs {
    display: none;
}

.modal-cs.loading-cs.active {
    display: grid;
}

.cs-loader {
    display: grid;
    place-items: center;
    margin-inline: auto;
    width: 100%;
    width: calc(var(--gap) * 20);
    height: calc(var(--gap) * 20);
}

/* .cs-loader svg {
    display: none;
} */

.cs-loader .cs-dots {
    position: relative;
    filter: url(#gooey);
}

.cs-loader .cs-dots span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    animation: loading 5s ease-in-out infinite;
    /*animation-delay: calc(0.2s * var(--i));*/
}

.cs-loader .cs-dots span::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - calc(var(--gap) * 2));
    width: calc(var(--gap) * 4);
    height: calc(var(--gap) * 4);
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--gap) * 2) var(--pr-green);
    background-color: var(--pr-green);
}

.cs-loader .hourglass {
    animation: rotate 3s ease-in-out infinite;
}

.dashboard-container .group-overview .card-progress,
.card-progress {
    flex: unset;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1);
    justify-content: space-between;
    width: 100%;
}

.dashboard-container .group-overview .progress-size,
.progress-size {
    display: flex;
    height: 8px;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 35%);
    cursor: pointer;
}

.dashboard-container .group-overview .progress-size .progress-available,
.progress-size .progress-available {
    background-color: var(--pr-green);
    border-radius: 0 4px 4px 0;
}

.edit_company_information .phases-dropdown {
    display: flex;
}

.horizontal-x {
    max-height: 100% !important;
    overflow: scroll !important;
}


/* Vendor Edit Selection Manager */
.selection_manager_manufacturers_select .selectize-dropdown {
    height: auto !important;
    padding: unset !important;
}

.selection_manager_manufacturers_select .selectize-control {
    border: none !important;
    outline: none !important;
}

.category-row.selected, .sub-category-row.selected {
    background: #94C6B1 !important;
}

.sub_category_toggle {
    cursor: pointer;
}

.table-wrapper.selection_manager {
    /*overflow-y: hidden !important;*/
    max-height: 100% !important;
}

.form-wrapper.selection_manager {
    overflow-x: hidden !important;
}

.sub-category-row {
    background-color: #F0F0F0;
}

/* CINX integration page */
.schedule-checkbox {
    --s: 1.15em;
    width: var(--s);
    height: var(--s);
}

.integration-checkboxes input {
    vertical-align: middle;
}

.integration-checkboxes label span {
    vertical-align: middle;
}

.tool-tip-phases .tooltip-info-phases {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 89%;
    transform: translateX(-50%);
    padding: calc(var(--gap) * 1.25);
    border-radius: var(--gap);
    background-color: var(--white);
    filter: drop-shadow(0px 1px 3px var(--sc-green));
    transition: opacity .5s ease-in-out, top .5s;
    width: 150px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    z-index: -1;
}

.ui-menu-item-wrapper:hover {
    background: var(--pr-green)!important;
}
.ui-menu-item-wrapper.ui-state-active {
    background: var(--pr-green)!important;
}

.custom-width {
    width: 110px !important;
}
.ui-autocomplete {
    min-width: 0 !important;
}

.tool-tip-phases .tooltip-info-phases::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--white);
    transform: translateX(-50%) rotate(45deg);
    top: 7px;
    border-radius: 4px;
    z-index: -1;
}

.tool-tip-phases i:hover .tooltip-info-phases {
    visibility: visible;
    opacity: 1;
    right: 0.1%;
    top: 3px;
    z-index: 1;
}

.tool-tip-phases .tooltip-info-phases .emphasis {
    font-style: italic;
    font-weight: 600;
}

#pricing .form-control {
    padding: 0 !important;
}

#pricing .nav-tabs {
    padding-left: 1rem !important;
}

#pricing .card-table-title {
    padding: 0.75rem 0.75rem 1.75rem 0 !important;
}

#manufactureCatsTableBody tr td:first-child {
    padding: 0.5rem 0.5rem 0.5rem 1.4rem;
}

#manufactureCatsTableBody tr td:last-child {
    text-align: center;
}

.selectize-dropdown-content {
    cursor: pointer !important;
}

.estimate-list {
    min-height: 75% !important;
    max-height: 75% !important;
}

.product-edit {
    cursor: default;
}

.capitalize-stage {
    text-transform: capitalize;
}

.cursor {
    cursor: default;
}

.href-color {
    color: var(--pr-green)
}

.href-color:hover {
    color: var(--pr-green)
}

.proposal-icons {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px
}

#exportMMLtoPDF {
    display: none;
}

.dropdown-item:active {
    background-color: var(--pr-green);
}

.horizontal-x.phases {
    height: 100% !important;
    overflow: auto !important
}

.header-list {
    justify-content: normal;
}

.header-search {
    position: absolute;
    right: 8px;
}

.filter-core-custom {
    background-color: white;
    height: 38px;
    width: 75px;
    padding-bottom: 33px
}

.filter-pro-cinx {
    background-color: white;
    height: 38px;
    width: 75px;
    padding-bottom: 33px
}

.filter-pro-cst {
    background-color: white;
    height: 38px;
    width: 75px;
    padding-bottom: 33px
}

.filter-input {
    z-index: 1000;
}

.new-table {
    padding: unset;
    border-radius: unset;
    background-color: unset;
    box-shadow: unset;
    display: block;
    max-height: 85%;
    min-height: 85%;
    width: 100%;
    /*overflow: hidden; */
    /* overflow-y: scroll; */
}

.custom-phase-title {
    font-size: 12px !important;
    width: 15% !important;
}


.container.mapped-categories .body {
    overflow-x: hidden;
}

.container.mapped-categories .input-group .input-group-text:not(.node-rename-disabled):not(.node-delete) {
    cursor: pointer;
    background-color: var(--pr-green);
    color: var(--white);
}

.container.mapped-categories .input-group .input-group-text.node-delete {
    cursor: pointer;
    background-color: var(--acc-red);
    color: var(--white);
}

.container.mapped-categories .input-group .input-group-text:not(.node-rename-disabled):hover {
    background-color: var(--pr-yellow);
}

.container.mapped-categories #mapped-categories-tree .jstree-search{
    color: var(--pr-green)!important;
}

.container.mapped-categories #mapped-categories-tree .jstree-clicked{
    background-color: var(--sc-green)!important;
    color: var(--gray)!important;
}


.container.mapped-categories .navigation-tabs {
    z-index: 4;
}

.container.mapped-categories .nav-tabs {
    gap: calc(var(--gap) * 2);
    border: unset;
    border-radius: unset;
}

.container.mapped-categories .nav-tabs .nav-item {
    display: flex !important;
    justify-content: center;
    margin: 0;
}

.container.mapped-categories .nav-tabs .nav-link {
    flex: 1 1 0;
    align-self: flex-end;
    margin: 0;
    border: unset;
    border-radius: var(--gap) var(--gap) 0 0;
    padding: var(--gap) calc(var(--gap) * 2);
    background-color: var(--table-alt);
}

.container.mapped-categories .nav-tabs .nav-link.active {
    background-color: var(--white);
}

.container.mapped-categories .nav-tabs .nav-link .tab-header {
    color: var(--def-gray);
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    line-height: calc(var(--gap) * 4);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header .title-vendor-name {
    color: var(--pr-green);
    max-width: 20ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header i {
    cursor: pointer;
    width: 32px;
    margin: 0;
    z-index: unset;
    text-align: center;
    font-size: 18px;
    position: relative;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header .tooltip-info {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--gap) * 1.25);
    border-radius: var(--gap);
    background-color: var(--white);
    filter: drop-shadow(0px 1px 3px var(--sc-green));
    transition: opacity .5s ease-in-out, top .5s;
    width: 300px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    z-index: -1;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header .tooltip-info .emphasis {
    font-style: italic;
    font-weight: 600;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header .tooltip-info::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    background-color: var(--white);
    transform: translateX(-50%) rotate(45deg);
    top: -10px;
    border-radius: 4px;
    z-index: -1;
}

.container.mapped-categories .nav-tabs .nav-link .tab-header i:hover .tooltip-info {
    visibility: visible;
    opacity: 1;
    top: 40px;
    z-index: 1;
}

.container.mapped-categories .nav-tabs .nav-link.active::before {
    background-color: var(--pr-green);
    bottom: 0;
}

.form-input {
    width: auto;
}

.progress {
    background-color: var(--light);
    border-radius: 20px;
    position: relative;
    margin: 15px 0;
    height: 30px;
    width: 300px;
}


.progress-done {
    background: var(--pr-green);
    border-radius: 20px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0;
    opacity: 0;
    transition: 1s ease 0.3s;
}

.buttons-1.bottom {
    margin-top: 19%;
    padding-left: 84%;
}

.buttons-2.bottom {
    margin-top: 13%;
    padding-left: 88%;
}

.buttons-3.bottom {
    margin-top: 13%;
    padding-left: 65%;
}

.active-tab-3 & & .active-tab-2 {
    padding-left: 10%;
}

.product-categories {
    padding-top: 5%;
}

.custom-progress-bar-header {
    height: 19%;
    min-height: 17%;
}

.progress-headers {
    padding-left: 20%;
    padding-bottom: 1%;
}

.progress-headers-spans {
    padding-left: 25%;
}

.progress {
    width: 100%;
}

.active-tab {
    padding-top: 10%;
}

.active-tabs {
    padding-top: 5%;
}

.form-row.active-tab {
    padding-right: 25%;
}

.tooltip-msg {
    width: 50px;
}

.tooltip-icon {
    color: darkred;
}

.stepper-body {
    overflow-x: hidden !important;
}

.custom-product-row {
    height: 150%;
}

.import-box {
    border: 2px solid grey;
    border-radius: 10px;
    height: 174%;
}

.cpq-import-box {
    border: 2px solid grey;
    border-radius: 10px;
    height: 175%;
}

.cinx-avatar-div {
    padding-top: 94%;
}

.avatar-size {
    width: 60%;
}

.import-btn {
    margin-top: 70%;
    width: 100%;
}

.corestack-avatar-div {
    padding-top: 80%;
    padding-left: 2%;
}

.corestack-import-btn {
    margin-top: 60%;
    width: 100%;
    right: 4%;
}

.cpq-avatar-div {
    padding-top: 93%;
}

.bottom {
    position: absolute;
    right: var(--gap);
    bottom: var(--gap);
}

.edit-custom-product {
    position: absolute;
    right: var(--gap);
    bottom: var(--gap);
}

.product-list-container {
    overflow-y: hidden;
}

.edit-product-wrapped {
    overflow-x: hidden;
}

.code-info {
    cursor: help;
}

.spec-parent-container {
    border: 2px solid lightgrey;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border-bottom-right-radius: var(--gap);
    border-bottom-left-radius: var(--gap);
}

.spec-from-repeater {
    width: 100%;
    padding: calc(var(--gap) * 4);
}

.spec-input {
    border-radius: var(--gap);
}

.spec-input-btn {
    width: 20%;
    justify-content: center;
    display: flex;
    padding-top: 5px;
}

.product-preview.wrapper {
    top: calc(50px + var(--gap) * 2);
    bottom: calc(50px + var(--gap) * 2);
    right: -30%;
    position: fixed;
    background: var(--white);
    width: 30%;
    z-index: 999;
    padding: calc(var(--gap) * 2);
    padding-right: 0;
    transition: 300ms ease-in;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--light-gray);
    border-radius: calc(var(--gap) * 1.25);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    gap: calc(var(--gap) * 2);
}

.product-preview.wrapper.extended {
    right: 0;
    transition: 300ms ease-in;
}

.app-content.content.with-product-preview {
    width: 55%;
}

.datatable__cell-currency-wrapper {
  display: flex;
  justify-content: space-between;
}

[v-cloak] {
  display: none;
}

.toast-container {
  margin-top: 55px;
}