:root {
    --purple: #B1A3BF;
    --yellow: #F2C34A;
    --green: #41BB9B;
    --blue: #029ADE;
    --gray: #EFF1EE;
    --light-blue: #ABD1E1;
    --light-gray: #00000005;
    --light-green: #41bb9b47;
    --light-yellow: #fff59d;
    --lightest-gray: #F8F9FA;
    --darker-gray: #E8EBE8;
    --shaded-green: #0a705652;
    --shaded-yellow: #F0E68C;
    --vw-col-2: 12.91vw;
    --vw-col-3: 19.36vw;
    --vw-col-4: 25.82vw;
    --vw-col-5: 32.27vw;
    --vw-col-6: 38.73vw;
    --vw-col-7: 45.18vw;
    --vw-col-8: 51.63vw;
    --vw-col-9: 58.01vw;
    --vw-col-10: 64.54vw;
    --vw-col-11: 71vw;
    --vw-col-12: 77.45vw;
    --border-radius-xl: 25px;
    --border-radius-l: 20px;
    --border-radius-m: 15px;
    --border-radius-s: 10px;
    --border-radius-xs: 5px;
    --border-radius-xxs: 2px;
}

.col-1 {
    width: var(--vw-col-1);
}

.col-2 {
    width: var(--vw-col-2);
}

.col-3 {
    width: var(--vw-col-3);
}

.col-4 {
    width: var(--vw-col-4);
}

.col-5 {
    width: var(--vw-col-5);
}

.col-6 {
    width: var(--vw-col-6);
}

.col-7 {
    width: var(--vw-col-7);
}

.col-8 {
    width: var(--vw-col-8);
}

.col-9 {
    width: var(--vw-col-9);
}

.col-10 {
    width: var(--vw-col-10);
}

.col-11 {
    width: var(--vw-col-11);
}

.col-12 {
    width: var(--vw-col-12);
}

.sq-col-1 {
    width: var(--vw-col-1)!important;
    height: var(--vw-col-1)!important;
}

.sq-col-2 {
    width: var(--vw-col-2)!important;
    height: var(--vw-col-2)!important;
}

.sq-col-3 {
    width: var(--vw-col-3)!important;
    height: var(--vw-col-3)!important;
}

.sq-col-4 {
    width: var(--vw-col-4)!important;
    height: var(--vw-col-4)!important;
}

.sq-col-5 {
    width: var(--vw-col-5)!important;
    height: var(--vw-col-5)!important;
}

.sq-col-6 {
    width: var(--vw-col-6)!important;
    height: var(--vw-col-6)!important;
}

.sq-col-7 {
    width: var(--vw-col-7)!important;
    height: var(--vw-col-7)!important;
}

.sq-col-8 {
    width: var(--vw-col-8)!important;
    height: var(--vw-col-8)!important;
}

.sq-col-9 {
    width: var(--vw-col-9)!important;
    height: var(--vw-col-9)!important;
}

.sq-col-10 {
    width: var(--vw-col-10)!important;
    height: var(--vw-col-10)!important;
}

.sq-col-11 {
    width: var(--vw-col-11)!important;
    height: var(--vw-col-11)!important;
}

.sq-col-12 {
    width: var(--vw-col-12)!important;
    height: var(--vw-col-12)!important;
}

.h-col-1 {
    height: var(--vw-col-1)!important;
}

.h-col-2 {
    height: var(--vw-col-2)!important;
}

.h-col-3 {
    height: var(--vw-col-3)!important;
}

.h-col-4 {
    height: var(--vw-col-4)!important;
}

.h-col-5 {
    height: var(--vw-col-5)!important;
}

.h-col-6 {
    height: var(--vw-col-6)!important;
}

.h-col-7 {
    height: var(--vw-col-7)!important;
}

.h-col-8 {
    height: var(--vw-col-8)!important;
}

.h-col-9 {
    height: var(--vw-col-9)!important;
}

.h-col-10 {
    height: var(--vw-col-10)!important;
}

.h-col-11 {
    height: var(--vw-col-11)!important;
}

.h-col-12 {
    height: var(--vw-col-12)!important;
}

.blue-border {
    border: 3px solid var(--blue);
}

.green-border {
    border: 3px solid var(--green);
}

.light-blue-border {
    border: 3px solid var(--light-blue);
}

.yellow-border {
    border: 3px solid var(--yellow);
}

.purple-border {
    border: 3px solid var(--purple);
}

.l-p-0{
    padding-left: 0;
}

.l-r-0 {
    padding-right: 0;
}

.lr-p-100 {
    padding-left: 5.21vw;
    padding-right: 5.21vw;
}

.lr-p-75 {
    padding-right: 3.91vw;
    padding-left: 3.91vw;
}

.lr-p-50 {
    padding-right: 2.6vw;
    padding-left: 2.6vw;
}

.lr-p-29 {
    padding-right: 1.5vw;
    padding-left: 1.5vw;
}

.lr-p-50-px {
    padding-right: 37px;
    padding-left: 37px;
}

.tb-p-100 {
    padding-top: 5.21vw;
    padding-bottom: 5.21vw;
}

.tb-p-75 {
    padding-top: 3.91vw;
    padding-bottom: 3.91vw;
}

.tb-p-50 {
    padding-top: 2.6vw;
    padding-bottom: 2.6vw;
}

.tb-p-50-px {
    padding-top: 37px;
    padding-bottom: 37px;
}

.lr-p-10 {
    padding-left: 0.52vw;
    padding-right: 0.52vw;
}

.tb-m-58 {
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.t-m-100 {
    margin-top: 5.21vw;
}

.r-m-29 {
    margin-right: 1.5vw;
}

.h-62 {
    height: 45px
}

.h-50 {
    height: 36px;
}

.h-75 {
    height: 55px;
}

.w-130 {
    min-width: 95px;
    width: 6.8vw;
}

.max-w-75-prcnt {
    max-width: 75%;
}

.mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 3px solid var(--light-blue);
}

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

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

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

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

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

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

.darker-gray-thin-border-bottom > .mud-input-control-input-container> .mud-input> .mud-input-slot:not(.mud-select-input){
    border-bottom: 2px solid var(--darker-gray);
}

.input-disabled.darker-gray-border {
    background-color: var(--darker-gray);
}

.percent-input .mud-input-slot::after {
    content: '%';
}

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

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

.green-background {
    background-color: var(--green)!important;
}

.green-background input {
    color: white!important;
}

.shaded-green-background {
    background-color: var(--shaded-green) !important;
}

.light-green-background {
    background-color: var(--light-green)!important;
}

.light-yellow-background {
    background-color: var(--light-yellow) !important;
}

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

.shaded-yellow-background {
    background-color: var(--shaded-yellow) !important;
}

/*If not set, mudblazor will overwrite with its own background color*/
.employ-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: transparent;
}

    .employ-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:not(.child-row-transparent):nth-of-type(odd) {
        background-color: white;
    }

.employ-table.employ-table--white .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: #EFF1EE;
}

.employ-historic-table {
    background-color: var(--lightest-gray);
}

.employ-historic-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: var(--gray);
}

.employ-report-table tr.gray-background {
    background-color: var(--gray)!important;
}

.employ-product-table .mud-table-head tr {
    border-bottom: 3px solid var(--light-blue);
}
/*
.employ-product-table .mud-select-input.mud-input-underline {
  border-bottom: 2px solid var(--darker-gray);
}
 */

.employ-product-table.mud-table {
    border-radius: 0;
}

.employ-product-table .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    display: none;
}

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

.employ-product-table .mud-table-cell {
    padding: 12px 0;
}

.darker-gray-background {
    background-color: var(--darker-gray);
}

.full-width {
    width: 100%;
}

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


.wrap-and-break {
    white-space: pre-wrap;
    word-break: break-word;
}