/* @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap);@font-face {
    font-family: Material Icons;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v115/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2")
} */

@font-face {
    font-family: Material Icons Outlined;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v90/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2")
}
.wd-300{
    width: 300px;
}
.material-icons {
    font-family: Material Icons;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga"
}

.material-icons,.material-icons-outlined {
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -moz-osx-font-smoothing: grayscale
}

.material-icons-outlined {
    font-family: Material Icons Outlined;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    -moz-font-feature-settings: "liga"
}

.border-1 {
    border: .1vw solid
}

.borderTop-1 {
    border-top: .1vw solid
}

.borderBottom-1 {
    border-bottom: .1vw solid
}

.borderLeft-1 {
    border-left: .1vw solid
}

.borderRight-1 {
    border-right: .1vw solid!important
}

.border-2 {
    border: .2vw solid
}

.borderTop-2 {
    border-top: .2vw solid
}

.borderBottom-2 {
    border-bottom: .2vw solid
}

.borderLeft-2 {
    border-left: .2vw solid
}

.borderRight-2 {
    border-right: .2vw solid!important
}

.border-3 {
    border: .3vw solid
}

.borderTop-3 {
    border-top: .3vw solid
}

.borderBottom-3 {
    border-bottom: .3vw solid
}

.borderLeft-3 {
    border-left: .3vw solid
}

.borderRight-3 {
    border-right: .3vw solid!important
}

.border-4 {
    border: .4vw solid
}

.borderTop-4 {
    border-top: .4vw solid
}

.borderBottom-4 {
    border-bottom: .4vw solid
}

.borderLeft-4 {
    border-left: .4vw solid
}

.borderRight-4 {
    border-right: .4vw solid!important
}

.border-5 {
    border: .5vw solid
}

.borderTop-5 {
    border-top: .5vw solid
}

.borderBottom-5 {
    border-bottom: .5vw solid
}

.borderLeft-5 {
    border-left: .5vw solid
}

.borderRight-5 {
    border-right: .5vw solid!important
}

.border-6 {
    border: .6vw solid
}

.borderTop-6 {
    border-top: .6vw solid
}

.borderBottom-6 {
    border-bottom: .6vw solid
}

.borderLeft-6 {
    border-left: .6vw solid
}

.borderRight-6 {
    border-right: .6vw solid!important
}

.border-7 {
    border: .7vw solid
}

.borderTop-7 {
    border-top: .7vw solid
}

.borderBottom-7 {
    border-bottom: .7vw solid
}

.borderLeft-7 {
    border-left: .7vw solid
}

.borderRight-7 {
    border-right: .7vw solid!important
}

.border-white {
    border-color: #fff!important
}

.border-accent {
    border-color: #003783!important
}

.border-accentdark {
    border-color: #223c61!important
}

.border-dgrey {
    border-color: #555!important
}

.border-grey {
    border-color: #b2b2b2!important
}

.border-lgrey {
    border-color: #f2f2f2!important
}

.border-secondary {
    border-color: #f5f5f5!important
}

.border-lsecondary {
    border-color: #dbdce1!important
}

.border-xlsecondary {
    border-color: #eee!important
}

html {
    overflow: auto
}

body .v-application {
    color: var(--v-accentdark-base)!important;
    font-size: 16px!important
}

.xxxs--text {
    font-size: 11px!important
}

.xxs--text {
    font-size: 12px
}

.xs--text {
    font-size: 13px
}

.sm--text {
    font-size: 14px
}

.md--text {
    font-size: 16px
}

.lg--text {
    font-size: 18px
}

.xlg--text {
    font-size: 20px
}

.xxlg--text {
    font-size: 22px
}

.xxxlg--text {
    font-size: 24px
}

.xxxxlg--text {
    font-size: 28px
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-700 {
    font-weight: 700
}

.p-absolute {
    position: absolute
}

.p-relative {
    position: relative
}

.whitebg {
    background-color: var(--v-white-base)
}

.wd-60 {
    width: 200px
}

.wd-80 {
    width: 80px
}

.wd-220 {
    width: 220px
}

.wd-100 {
    width: 100px
}

.wd-100p {
    width: 100%
}

.wd-180 {
    width: 180px
}

.wd-160 {
    width: 160px
}

.wd-140 {
    width: 136px
}

.wd-300 {
    width: 300px
}

.cursor-pointer {
    cursor: pointer
}

.stilelogo {
    width: 150px
}

.headerdiv {
    border-bottom: 1px solid #eee;
    top: 0
}

.headerdiv,.measurementdiv {
    position: sticky;
    z-index: 1;
    background-color: var(--v-white-base)!important
}

.measurementdiv {
    top: 85px
}

.maindiv {
    max-width: 1200px;
    margin: 0 auto
}

.v-btn {
    letter-spacing: .5px;
    text-transform: capitalize
}

.progressstatus {
    position: relative;
    border-radius: 2px;
    background-color: #ccecfc!important;
    width: 287px;
    height: 25px
}

.progressstatus .count {
    position: absolute;
    text-align: center;
    font-weight: 700;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v-dgrey-base)!important
}

.progressstatus .steps {
    background-color: var(--v-accent-base)!important;
    margin-right: 1px;
    width: 35px;
    float: left;
    height: 25px
}

.progressstatus .steps:nth-child(9) {
    margin-right: 0
}

.roomtype {
    width: 110px;
    float: left;
    margin: 0 28px;
    text-align: center
}

.roomtype .mainimg {
    display: inline-block;
    transition: all .2s ease-in
}

.roomtype .hoverimg {
    display: none;
    transition: all .2s ease-in
}

.roomtype p {
    transition: color .1s ease-in
}

.roomtype.selectedroom,.roomtype:hover {
    cursor: pointer
}

.roomtype.selectedroom .mainimg,.roomtype:hover .mainimg {
    display: none
}

.roomtype.selectedroom .hoverimg,.roomtype:hover .hoverimg {
    display: inline-block
}

.roomtype.selectedroom p,.roomtype:hover p {
    color: var(--v-accent-base)!important
}

.v-text-field--filled {
    border-radius: 4px!important
}

.v-text-field--filled .v-input__slot:after,.v-text-field--filled .v-input__slot:before {
    border: 0!important
}

.v-text-field--outlined fieldset {
    border: 1px solid var(--v-lsecondary-base)
}

.v-text-field--outlined.v-text-field--enclosed .v-label:not(.v-label--active) {
    top: 50%;
    transform: translateY(-50%)
}

.v-text-field--outlined.v-text-field--enclosed input {
    min-height: 52px
}

.v-text-field--outlined.v-text-field--enclosed .v-input__slot {
    height: 52px
}

.v-text-field--outlined.v-text-field--enclosed.measuringunits .v-input__slot {
    height: 40px
}

.v-text-field--outlined.v-text-field--enclosed .v-input__slot {
    background-color: var(--v-white-base)
}

.v-text-field--outlined.v-select {
    background-image: url(/img/angle-down.4f4cb498.svg);
    background-position: 93%;
    background-size: 13px
}

.v-text-field--outlined.v-select fieldset {
    border: 1px solid var(--v-lsecondary-base)
}

.v-text-field--outlined.v-select .v-select__selection {
    color: var(--v-accent-base)!important
}

.surfacetypebtns .v-btn-toggle,.surfacetypebtns .v-btn-toggle .v-btn {
    /* background-color: transparent!important */
}

.surfacetypebtns .v-btn-toggle .v-btn {
    width: 130px;
    transition: opacity .1s ease
}

.surfacetypebtns .v-btn-toggle .v-btn:before {
    background-color: transparent;
    opacity: 1;
    transition: opacity .1s ease
}

.surfacetypebtns .v-btn-toggle .v-btn .v-btn__content {
    color: var(--v-grey-base)!important;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0
}

.surfacetypebtns .v-btn-toggle .v-btn.v-item--active .v-btn__content,.surfacetypebtns .v-btn-toggle .v-btn:focus .v-btn__content,.surfacetypebtns .v-btn-toggle .v-btn:hover .v-btn__content {
    color: var(--v-white-base)!important
}

.surfacetypebtns .v-btn-toggle .v-btn.v-item--active:before,.surfacetypebtns .v-btn-toggle .v-btn:focus:before,.surfacetypebtns .v-btn-toggle .v-btn:hover:before {
    background-color: var(--v-accent-base);
    opacity: 1;
    transition: opacity .1s ease
}

.surfacetypebtns .v-btn-toggle .v-btn .v-ripple__container {
    display: none!important
}

.surfacetypebtns.deductionbtns .v-btn-toggle {
    background-color: transparent
}

.surfacetypebtns.deductionbtns .v-btn-toggle .v-btn {
    border: 1px solid!important;
    border-radius: 4px!important;
    width: 140px!important
}

.surfacetypebtns.deductionbtns .v-btn-toggle .v-btn.showskirtingtext {
    width: 200px!important
}

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

.tooltipdiv {
    min-width: auto
}

.imagepreview {
    width: 160px;
    height: 160px;
    -o-object-fit: contain;
    object-fit: contain
}

.addremovebtns {
    width: 52px!important;
    height: 52px!important;
    border: 1px solid var(--v-lsecondary-base)!important;
    background-color: #f9f9f9!important
}

.addremovebtns .v-btn__content {
    color: var(--v-accent-base)!important
}

.addremovebtns .v-btn__content i {
    font-size: 30px!important
}

.addremovebtns:hover {
    border: 1px solid var(--v-accent-base)!important;
    background-color: var(--v-accent-base)!important
}

.addremovebtns:hover .v-btn__content {
    color: var(--v-white-base)!important
}

.ln-height-0 {
    line-height: 0
}

.selectedshape {
    width: 30px
}

.shapeselections img {
    max-height: 40px;
    max-width: 55px
}

.tiledetailtbl {
    width: 100%;
    table-layout: fixed;
    font-size: 16px
}

.tiledetailtbl td:first-child,.tiledetailtbl th:first-child {
    width: 20%;
    max-width: 300px;
    position: sticky;
    left: 0;
    background-color: var(--v-white-base)!important;
    z-index: 1;
    padding-left: 12px
}

.tiledetailtbl th:not(:first-child) {
    text-align: center;
    width: 150px;
    height: 40px;
    max-width: 150px;
    color: var(--v-accent-base)!important
}

.tiledetailtbl td:not(:first-child) {
    text-align: center;
    width: 150px;
    max-width: 150px;
    height: 40px;
    background-color: var(--v-lgrey-base)!important
}

.viewdetail .v-expansion-panel:before {
    box-shadow: none!important
}

.viewdetail .v-expansion-panel .v-expansion-panel-header {
    padding: 0!important;
    background-color: var(--v-accentlight-base)!important;
    min-height: 55px
}

.viewdetail .v-expansion-panel .v-expansion-panel-header .viewdetailheader {
    background-color: var(--v-accentlight-base)!important
}

.viewdetail .v-expansion-panel .v-expansion-panel-header:not(.v-expansion-panel-header--mousedown):focus :before {
    opacity: 0
}

.viewdetail .v-expansion-panel-content__wrap {
    padding: 0!important;
    border-radius: 0!important
}

.overflow-x-auto {
    overflow-x: auto!important
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #003783
}

::-webkit-scrollbar-thumb:hover {
    background: #003783
}

.Resultdialog .selectedshape {
    width: 20px
}

.PDFresult .tiledetailtbl {
    table-layout: fixed
}

.PDFresult .tiledetailtbl td,.PDFresult .tiledetailtbl th {
    width: 100%!important
}

.PDFresult .tiledetailtbl td.singlecol,.PDFresult .tiledetailtbl th.singlecol {
    width: 15%!important
}

.PDFresult .tiledetailtbl td:first-child,.PDFresult .tiledetailtbl th:first-child {
    width: 150px!important
}

.PDFresult .datacol1,.PDFresult .datacol2 {
    width: 50%!important
}

.PDFresult .md--text {
    font-size: 12px
}

.PDFresult .lg--text {
    font-size: 14px
}

.PDFresult .tiledetailtbl {
    font-size: 13px
}

.deductionicon img {
    width: 23px
}

.deductionbtnsitem {
    transition: all .2s ease-in
}

.deductionbtnsitem .hoverbtn {
    display: none
}

.deductionbtnsitem.v-item--active .mainbtn,.deductionbtnsitem:hover .mainbtn {
    display: none!important
}

.deductionbtnsitem.v-item--active .hoverbtn,.deductionbtnsitem:hover .hoverbtn {
    display: block
}

.roomdimensions .lg--text {
    font-size: 16px
}

.infoicon {
    line-height: 0px;
    position: relative;
    top: 3px;
    cursor: pointer
}

.wordbreak {
    word-break: normal
}

@media(min-width: 992px)and (max-width:1099px) {
    .roomtype {
        width:15%;
        margin: 0 17px
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn {
        width: 110px!important
    }
}

@media(min-width: 768px)and (max-width:991px) {
    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn {
        width:94px!important
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .v-btn__content {
        font-size: 14px
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .deductionicon img {
        width: 19px
    }
}

@media(min-width: 600px)and (max-width:767px) {
    .surfacetypebtns.deductionbtns .v-btn-toggle {
        display:block
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn {
        margin-bottom: 12px;
        width: 30%!important
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .v-btn__content {
        font-size: 14px
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .deductionicon img {
        width: 19px
    }
}

@media(min-width: 600px)and (max-width:991px) {
    .tiledetailtbl td:first-child,.tiledetailtbl th:first-child {
        width:30%
    }

    .roomdimensions .wd-140 {
        width: 111px
    }

    .lg--text,.xlg--text {
        font-size: 15px
    }

    .wd-300 {
        width: 230px
    }

    .previewimg {
        max-width: 120px
    }

    .progressstatus {
        width: 207px
    }

    .progressstatus .steps {
        width: 25px
    }

    .roomtype {
        width: 14%;
        margin: 0 14px
    }

    .roomtype img {
        width: 100%!important
    }

    .roomtype .roomname {
        font-size: 14px
    }

    .wd-140 {
        width: 110px
    }

    .surfacetypebtns .v-btn-toggle .v-btn {
        width: 110px!important
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle {
        display: block
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle .v-btn {
        width: 100px!important
    }
}

@media(min-width: 600px)and (max-width:767px) {
    .tiledetailtbl td:first-child,.tiledetailtbl th:first-child {
        width:30%
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle {
        display: block
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle .v-btn {
        width: 75px!important
    }

    .surfacetypebtns .v-btn-toggle .v-btn {
        width: 110px!important
    }

    .addremovebtns {
        width: 47px!important
    }

    .wd-160 {
        width: 120px
    }

    .wd-100 {
        width: 80px
    }

    .wd-140 {
        width: 77px
    }
}

@media(min-width: 600px) {
    .subheadings {
        height:84px;
        display: flex;
        align-items: center
    }

    .wallheightrow .wallheighcol {
        width: 100%!important
    }
}

@media(max-width: 599px) {
    .stilelogo {
        width:60px
    }

    .addremovebtns {
        height: 35px!important
    }

    .xxxlg--text {
        font-size: 20px
    }

    .tilesize .wd-100 {
        width: 75px
    }

    .lg--text,.xlg--text {
        font-size: 15px
    }

    .measuringunits.mainmeasuring.v-text-field--outlined .v-input__slot {
        height: 40px!important
    }

    .measuringunits.mainmeasuring.v-text-field--outlined.v-select fieldset {
        border: 0 solid var(--v-lsecondary-base)
    }

    .measuringunits.v-text-field--outlined .v-input__slot {
        height: 40px!important
    }

    .measurementdiv {
        top: 70px
    }

    .measurementdiv .lg--text {
        font-size: 12px
    }

    .roomtype {
        width: calc(20% - 2px);
        margin: 0 1px
    }

    .roomtype img {
        width: 100%!important
    }

    .roomtype .roomname {
        font-size: 14px
    }

    .v-input .v-input__slot {
        height: 50px!important
    }

    .surfacetypebtns .v-btn-toggle .v-btn {
        width: 100px!important;
        height: 38px!important
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle {
        display: block
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn {
        margin-bottom: 12px;
        width: 29%!important
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .v-btn__content {
        font-size: 14px
    }

    .surfacetypebtns.deductionbtns .v-btn-toggle .v-btn .deductionicon img {
        width: 18px
    }

    .tiledetailtbl td:first-child,.tiledetailtbl th:first-child {
        width: 150px
    }

    .wd-140 {
        width: 120px
    }

    .wd-160 {
        width: 140px
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle {
        display: block
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle .v-btn {
        width: 25%!important;
        margin-top: 10px!important
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle .v-btn:nth-child(4) {
        border-radius: 4px
    }

    .deductionarea .surfacetypebtns.deductionopt .v-btn-toggle .v-btn:nth-child(5) {
        border-left-width: 1px;
        border-radius: 4px
    }

    .deductionarea .wd-140 {
        width: 90px
    }

    .deductionarea .addremovebtns {
        width: 40px!important;
        min-width: 40px!important
    }

    .Resultdialog .md--text {
        font-size: 13px
    }

    .Resultdialog .xxlg--text {
        font-size: 17px
    }

    .Resultdialog .datacol1 {
        border-top: 0!important;
        border-bottom: 1px solid var(--v-lsecondary-base)!important;
        border-left: 1px solid var(--v-lsecondary-base)!important;
        border-right: 1px solid var(--v-lsecondary-base)!important
    }

    .Resultdialog .datacol2 {
        border: 1px solid var(--v-lsecondary-base)!important
    }

    .Resultdialog .viewdetail .v-expansion-panel .v-expansion-panel-header {
        background-color: var(--v-white-base)!important;
        min-height: 55px
    }

    .Resultdialog .viewdetail .v-expansion-panel .v-expansion-panel-header .viewdetailheader {
        border: 1px solid var(--v-lsecondary-base)!important;
        background-color: var(--v-white-base)!important
    }

    .Resultdialog .viewdetail .v-expansion-panel.v-item--active .viewdetailheader {
        border-bottom: 0 solid var(--v-lsecondary-base)!important;
        background-color: var(--v-accentlight-base)!important
    }
}

/* calculator css */

.selected-surface,.selected-wastage,.selected-deduction,.selected-tileSize,.btn-submit,.btn-add-remove-fields,.btn-add,.btn-remove,#btn-export {
    background-color: rgb(5,50,192,1) !important;
    color:white;
}

#units-dropdown:focus{
    border-color: unset !important;
    border: unset !important;

}
.form-floating>label {

    left:unset !important;
    top: 17px !important;
  }

.bg-input,.bg-input:focus{
    background-color: #e9eaeb !important;
}
.custom-input{
    border-radius: 0px !important;
    padding:25px 11px !important;
    min-width: 112px !important;
}

.custom-input::-webkit-outer-spin-button,
.custom-input::-webkit-inner-spin-button {
-webkit-appearance: none;
}

#shapes {

     box-shadow: unset !important;
}
.form-floating .form-control:focus {
    box-shadow: unset !important;
}

.bg-row{
   background-color:  #f2f2f2;
}

.btn-small{
    max-width: 10px !important;
    font-size: 2rem !important;
}
.tileSelectSection option{
    line-height: 15px !important;
}

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