/*:root {*/
/*    --main-color: #adab8c;*/
/*}*/
/**{*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    box-sizing: border-box;*/
/*    user-select: none;*/
/*}*/
/*@font-face {*/
/*    font-family: 'headingFont';*/
/*    src: url(./fonts/neue-montreal/NeueMontreal-Regular.otf);*/
/*}*/
/*@font-face {*/
/*    font-family: 'bodyFont';*/
/*    src: url(./fonts/tt-commons/TTCommonsRegular.otf);*/
/*}*/
/**,body,html{*/
/*    font-family: 'bodyFont';*/
/*     background-color: #F0F2ED; */
/*}*/
/*#iframeDiv{*/
/*    height: calc(100vh - 100px);*/
/*    height: 100%;*/
/*    position: relative;*/
/*}*/
/*div::-webkit-scrollbar-track {*/
/*  border-radius: 10px;*/
/*  background-color: var(--main-color);*/
/*}*/

/*div::-webkit-scrollbar {*/
/*  width: 5px;*/
/*  background-color: var(--main-color);*/
/*}*/

/*div::-webkit-scrollbar-thumb {*/
/*  border-radius: 10px;*/
/*  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
/*  background-color: var(--main-color);*/
/*  border-radius: 50%; */
/*}*/
/*img{*/
/*    max-width: 100%;*/
/*    cursor: pointer;*/
/*}*/
/*main{*/
/*    display: grid;*/
/*    grid-template-columns: auto 25%;*/
/*    grid-template-columns: auto 520px;*/
/*    height: 100vh;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*}*/
/*#iframeDiv{*/
/*    background-image: url(./images/1.jpg);*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*}*/
/*.iconsDivBg{*/
/*    position: absolute;*/
/*    left: 30px;*/
/*    top: 50%;*/
/*    transform: translate(0,-50%);*/
/*    display: grid;*/
/*    gap: 20px;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 35px;*/
/*    transform: translate(0%, -50%);*/
/*    display: flex;*/
/*    gap: 20px;*/
/*}*/
/*.iconsDivTech{*/
/*    top: 50%;*/
/*    display: grid;*/
/*    left: 10px;*/
/*    transform: translate(0%, -50%);*/
/*    gap: 20px;*/
/*    position: absolute;*/
/*}*/
/*.iconDiv{*/
/*    background: #fff;*/
/*    padding: 12px;*/
/*    border-radius: 7px;*/
/*    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);*/
/*    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);*/
/*    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*}*/
/*.hide,#forDoor2{*/
/*    display: none;*/
/*}*/

/*.child-box.active {*/
/*    border: 2px solid black;*/
/*}*/
/*.interiorDimension{*/
/*    width: 100px !important;*/
/*    height: 200px !important;*/
/*    padding: 9px;*/
/*}*/
/*.interiorDimension.active {*/
/*    border: 2px solid black;*/
/*}*/
/*.interiorDimension svg {*/
/*    display: block;*/
/*    margin: auto;*/
/*    height: 180px;*/
/*    width: 100%;*/
/*}*/

/*.iconDiv .text{*/
/*    position: absolute;*/
/*    right: 50px;*/
/*    position: absolute;*/
/*    left: 80px;*/
/*    font-size: 12px;*/
/*    color: #fff;*/
/*    background: var(--main-color);*/
/*    padding: 5px;*/
/*    top: 23px;*/
/*    width: max-content;*/
    
/*    position: absolute;*/
/*  left: 0;*/
/*  font-size: 12px;*/
/*  color: #fff;*/
/*  background: var(--main-color);*/
/*  padding: 5px;*/
/*  top: auto;*/
/*  width: max-content;*/
/*  bottom: -35px;*/
/*}*/
/*.iconsDivTech .text{*/
/*    position: absolute;*/
/*    left: calc(100% + 10px);*/
/*    font-size: 12px;*/
/*    color: #fff;*/
/*    background: var(--main-color);*/
/*    padding: 5px;*/
/*    top: 18px;*/
/*    width: max-content;*/
/*    right: auto;*/
/*    bottom: auto;*/
/*}*/
/*.iconsDiv img{*/
/*    max-width: 36px;*/
/*}*/
/*.uiDiv{*/
/*    background-color: #F0F2ED;*/
/*    padding: 0px 20px;*/
/*    position: relative;*/
/*}*/
/*#accordionExample{*/
/*     height: calc(100vh - 200px); */
/*    height: calc(100vh - 300px);*/
/*    overflow: auto;*/
/*    scrollbar-width: none !important;*/
     /*For Firefox */
/*    scrollbar-width: none;*/
     /*For other browsers (like Chrome, Safari) */
/*    overflow: -ms-autohiding-scrollbar; */
/*}*/
 /*For WebKit browsers (Chrome, Safari) */
/*#accordionExample::-webkit-scrollbar {*/
/*  display: none;*/
/*}*/
/*.accordion-item{*/
/*    background-color: transparent;*/
/*    border: 0;*/
/*    max-height: 500px;*/
/*    max-height: 380px;*/
/*    overflow: auto;*/
/*     padding: 0 20px; */
/*    margin: 15px 0px;*/
/*}*/
/*.accordion-header {*/
/*    margin-bottom: 0;*/
/*    background: #fff !important;*/
/*    border-radius: 20px !important;*/
/*    padding: 0 20px;*/
/*}*/
/*.accordion-header:hover{*/
/*    background: rgb(245, 245, 245) !important;*/
/*    transition: all 0.3s;*/
/*}*/
/*.accordion-item:first-of-type .accordion-button {*/
/*    border-top-left-radius: 0;*/
/*    border-top-right-radius: 0;*/
/*}*/
/*.accordion-button{*/
/*    background: transparent !important;*/
/*    font-size: 24px;*/
/*    color: #000;*/
/*    padding: 1rem 0;*/
/*    border-bottom: 1px solid #b2b2b2;*/
/*    border: 0 !important;*/
/*    box-shadow: none !important;*/
/*     font-weight: 600; */
/*    font-family: 'headingFont';*/
/*}*/
/*.accordion-button span{*/
/*    font-size: 14px;*/
/*    display: grid;*/
/*    align-items: end;*/
/*    align-self: end;*/
/*    margin-left: 5px;*/
/*}*/
/*.accordion-button:not(.collapsed){*/
/*    color: #000;*/
/*}*/
/*.accordion-button:focus{*/
/*    border-color: transparent;*/
/*    box-shadow: none;*/
/*}*/
/* .accordion-button:not(.collapsed)::after, .accordion-button::after {*/
/*    background-image: url(./images/tick.svg);*/
/*    transform: unset;*/
/*}*/
/*.accordion-button:not(.collapsed){*/
/*    border-bottom: 1px solid #b2b2b2;*/
/*    border-radius: 0;*/
/*} */
/*.accordion-body{*/
/*    padding: 1rem;*/
/*    font-family: 'bodyFont';*/
/*}*/
/*.typesOfDoorsText{*/
/*    font-size: 18px;*/
/*     font-weight: 600; */
/*}*/
/*.justifySpaceBtwn{*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/
/*.justifySpaceBtwn div:first-child{*/
/*    font-size: 12px;*/
/*    color: #000;*/
/*}*/
/*.doorOptions,.glassOptions{*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2,1fr);*/
/*    grid-gap: 10px;*/
/*    padding: 0 10px;*/
/*    text-align: center;*/
/*}*/
/*.glassOptions{*/
/*    grid-template-columns: repeat(4,1fr);*/
/*}*/

/*.ml-custom{*/
/*    margin-left: 10px;*/
/*}*/


/*.doorOption.active,.glassOption.active,.colorStyleDiv.active{*/
/*    border: 1px solid #000000;*/
/*}*/
/*.noOfDoors.active{*/
/*    font-weight: 600;*/
/*    border: 1px solid;*/
/*}*/
/*.doorOption,.glassOption,.colorStyleDiv{*/
/*    background: #fff;*/
/*    border-radius: 10px;*/
/*    padding: 10px;*/
/*    position: relative;*/
/*    border: 1px solid transparent;*/
/*    width: 87.5px;*/
/*    height: 87.5px;*/
/*}*/
/*.info{*/
/*    max-width: 16px;*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    right: 5px;*/
/*    cursor: pointer;*/
/*}*/
/*.optionText{*/
/*    padding: 10px 0;*/
/*    font-size: 14px;*/
/*    text-align: center;*/
/*}*/
/*.doorText{*/
/*    font-size: 20px;*/
/*}*/
/*.noOfDoorsDiv{*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    display: grid;*/
/*      gap: 10px;*/
/*      grid-template-columns: repeat(4,1fr);*/
/*      padding: 0 10px;*/
/*}*/
 /*=== range theme and appearance === */
/*input[type="range"] {*/
/*	font-size: 1.5rem;*/
/*	max-width: 100%;*/
/*    width: 100%;*/
/*    border-radius: 20px;*/
/*    overflow: auto;*/
/*}*/

/*input[type="range"] {*/
/*	color: var(--main-color);*/
/*	--thumb-height: 20px;*/
/*	--track-height: 0.125em;*/
/*	--track-color: #5e5e5e;*/
/*	--brightness-down: 80%;*/
/*	--clip-edges: 0;*/
/*}*/

 /*=== range commons === */
/*.doorSliderMainDiv{*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2,1fr);*/
/*    grid-gap: 10px;*/
/*}*/
/*.doorSlider,.glassSlider,.cornerSlider{*/
/*    display: none;*/
/*    text-align: right;*/
/*}*/
/*#door1WidthSlider,#door1HeightSlider{*/
/*    display: block;*/
/*}*/
/*input[type="range"] {*/
/*	position: relative;*/
/*	background: #fff0;*/
/*	overflow: hidden;*/
/*}*/

/*input[type="range"]:active {*/
/*	cursor: grabbing;*/
/*}*/

 /*=== WebKit specific styles === */
/*input[type="range"],*/
/*input[type="range"]::-webkit-slider-runnable-track,*/
/*input[type="range"]::-webkit-slider-thumb {*/
/*	-webkit-appearance: none;*/
/*	transition: all ease 100ms;*/
/*	height: var(--thumb-height);*/
/*	border-radius: 50%; */
/*}*/

/*input[type="range"]::-webkit-slider-runnable-track,*/
/*input[type="range"]::-webkit-slider-thumb {*/
/*	position: relative;*/
/*	border-radius: 50%;*/
/*}*/

/*input[type="range"]::-webkit-slider-thumb {*/
/*	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);*/
/*	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);*/
/*	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));*/
/*	--clip-further: calc(100% + 1px);*/
/*	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0*/
/*		100vmax currentColor;*/

/*	width: var(--thumb-width, var(--thumb-height));*/
/*	background: linear-gradient(currentColor 0 0) scroll no-repeat left center /*/
/*		50% calc(var(--track-height) + 1px);*/
/*	background-color: currentColor;*/
/*	box-shadow: var(--box-fill);*/
/*	border-radius: 0;*/

/*	filter: brightness(100%);*/
/*	clip-path: polygon(*/
/*		100% -1px,*/
/*		var(--clip-edges) -1px,*/
/*		0 var(--clip-top),*/
/*		-100vmax var(--clip-top),*/
/*		-100vmax var(--clip-bottom),*/
/*		0 var(--clip-bottom),*/
/*		var(--clip-edges) 100%,*/
/*		var(--clip-further) var(--clip-further)*/
/*	);*/
/*     border: 2px solid #000000; */
/*    border-radius: 50%; */
/*}*/


/*input[type="range"]:active::-webkit-slider-thumb {*/
/*	filter: brightness(var(--brightness-down));*/
/*	cursor: grabbing;*/
/*	border-radius: 50%;*/
/*}*/

/*input[type="range"]::-webkit-slider-runnable-track {*/
/*	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /*/
/*		100% calc(var(--track-height) + 1px);*/
/*		border-radius: 50%;*/
/*}*/
/* === Firefox specific styles === */
/*input[type="range"],*/
/*input[type="range"]::-moz-range-track,*/
/*input[type="range"]::-moz-range-thumb {*/
/*	appearance: none;*/
/*	transition: all ease 100ms;*/
/*	height: var(--thumb-height);*/
/*	border-radius: 50%; */
/*}*/

/*input[type="range"]::-moz-range-track,*/
/*input[type="range"]::-moz-range-thumb,*/
/*input[type="range"]::-moz-range-progress {*/
/*	background: #fff0;*/
/*}*/

/*input[type="range"]::-moz-range-thumb {*/
/*	background: currentColor;*/
/*	border: 0;*/
/*	width: var(--thumb-width, var(--thumb-height));*/
/*	border-radius: 0;*/
/*	cursor: grab;*/
/*	border-radius: 50%;*/
/*}*/

/*input[type="range"]:active::-moz-range-thumb {*/
/*	cursor: grabbing;*/
/*	border-radius: 50%;*/
/*}*/

/*input[type="range"]::-moz-range-track {*/
/*	width: 100%;*/
/*	background: var(--track-color);*/
/*	border-radius: 50%;*/
/*}*/

/*input[type="range"]::-moz-range-progress {*/
/*	appearance: none;*/
/*	background: currentColor;*/
/*	transition-delay: 30ms;*/
/*}*/

/*input[type="range"]::-moz-range-track,*/
/*input[type="range"]::-moz-range-progress {*/
/*	height: calc(var(--track-height) + 1px);*/
/*	border-radius: 0;*/
/*}*/

/*input[type="range"]::-moz-range-thumb,*/
/*input[type="range"]::-moz-range-progress {*/
/*	filter: brightness(100%);*/
/*}*/
/*.info_about_slider{*/
/*    max-width: 16px;*/
/*}*/
/*.doorValue{*/
/*    width: 50px;*/
/*    height: 20px;*/
/*    border: 1px solid;*/
/*    background: #fff;*/
/*    position: absolute;*/
/*    right: 0px;*/
/*    text-align: center;*/
/*    line-height: 20px;*/
/*    font-size: 12px;*/
/*    -webkit-appearance: none !important;*/
/*    margin: 0 !important;*/
/*    -moz-appearance: textfield !important;*/
/*}*/
/*.priceDiv{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr;*/
/*    gap: 10px;*/
/*     border-top: 3px solid; */
/*    padding: 0 15px;*/
/*    height: 100px;*/
/*    align-items: center;*/
/*    background: var(--main-color);*/
/*    color: #fff;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    width: 75%;*/
/*    width: calc(100% - 480px);*/
/*    width: 100%;*/
/*    left: 0px;*/
/*    bottom: 0;*/
/*}*/


/* .priceDiv1{*/
/*    border-right: 3px solid;*/
/*} */
/*.priceDiv span{*/
/*    text-transform: uppercase;*/
/*    font-size: 14px;*/
/*     font-weight: 600; */
/*}*/
/*#price{*/
/*    font-size: 45px;*/
/*     border-bottom: 2px solid; */
/*    max-width: fit-content;*/
/*    max-height: max-content;*/
/*    line-height: 35px;*/
/*    font-family: 'bodyFont';*/
/*}*/
/*.smallText{*/
/*    font-size: 10px;*/
/*}*/
/*.priceDiv div:last-child{*/
/*    display: grid;*/
/*    align-items: center;*/
/*    padding: 0;*/
/*    justify-content: center;*/
/*}*/
/*.priceDiv button{*/
/*    background: var(--main-color);*/
/*    color: #fff;*/
/*    padding: 7px;*/
/*    border: 0;*/
/*    border-radius: 7px;*/
/*    cursor: pointer;*/
/*    border: 1px solid;*/
/*    width: max-content;*/
/*    padding: 10px 60px;*/
/*}*/
/*.priceDiv img{*/
/*    max-width: 32px;*/
/*}*/
/* design */
/*fieldset {*/
/*    border: 1px solid black;*/
/*    padding: 10px;*/
/*  }*/

/*  legend {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    width: 100%;*/
/*    background: linear-gradient(black 0 0)center/100% 1px no-repeat;*/
/*    font-size: 14px;*/
/*    float: unset;*/
/*    margin-bottom: 0;*/
/*  }*/

/*  legend div {*/
/*    background-color: #F0F2ED;*/
/*    margin-left: 15px;*/
/*  }*/
/*  .formDivMain{*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2,48.5%);*/
/*    grid-gap: 10px;*/
/*  }*/
/*  .formDiv div{*/
/*    display: block;*/
/*    margin-left: 5px;*/
/*    font-size: 12px;*/
/*  }*/
/*  .formDiv label{*/
/*    font-size: 12px;*/
/*    margin-left: 10px;*/
/*  }*/

/*  .formDiv input{*/
/*    max-width: 100%;*/
/*    border-radius: 5px;*/
/*    border: 1px solid;*/
/*  }*/
/*  .intermediateProfileDiv{*/
/*    text-align: right;*/
/*  }*/
/*   assymetrical checkbox */
/*  .assymetricDiv .left {*/
/*      width: 50%;*/
/*    }*/
/*#assymetricCheckBox{*/
/*    width: 25px;*/
/*    height: 25px;*/
/*}*/
/*.assymetricDiv input[type="checkbox"] {*/
/*    appearance: none;*/
/*    position: relative;*/
/*}*/

/*.assymetricDiv .checkbox {*/
/*    display: block;*/
/*    height: 12px;*/
/*    width: 12px;*/
/*    transition: 100ms ease-in;*/
/*    cursor: pointer;*/
/*    margin-right: 5px;*/
/*    outline: 2px solid var(--main-color);*/
/*    outline-offset: 2px;*/
/*}*/

/*.assymetricDiv input:checked + .checkbox {*/
/*    background: var(--main-color);*/
/*}*/

/*.assymetricDiv input:checked + .dark {*/
/*    background: white;*/
/*    border: 0.2rem solid white;*/
/*}*/
/*.assymetricDiv label{*/
/*    display: flex;*/
/*    width: fit-content;*/
/*    align-items: center;*/
/*    font-size: 12px;*/
/*    margin-left: 5px;*/
/*}*/
/*.assymetricDiv div{*/
/*    margin-left: 5px;*/
/*    font-size: 18px;*/
/*}*/
/* assymetrical checkbox */

/* design */
/* details */
/*.colorsDiv{*/
/*    display: flex;*/
/*    gap: 10px;*/
/*    grid-template-columns: repeat(4, 1fr);*/
/*    padding: 0 10px 0 10px;*/
/*    flex-wrap: wrap;*/
/*}*/

/*.handles img{*/
/*    border-radius: 10px;*/
/*}*/
/*.colorsDiv .color{*/
/*    width: 65.5px;*/
/*    height: 65.5px;*/
/*    border-radius: 0px;*/
/*}*/
/*.color.active,.handles.active{*/
/*    border: 1px solid;*/
/*    border-radius: 10px;*/
/*}*/
/*.color.black{*/
/*    background: #000;*/
/*}*/
/*.color.white{*/
/*    background: #fff;*/
/*}*/
/*.color.anthracite{*/
/*    background: #353c40;*/
/*}*/
/*.color.quartzGray{*/
/*    background: #6b665e;*/
/*}*/
/*.color.bronze{*/
/*    background: #CD7F32;*/
/*}*/
/* details */
/*.modal-dialog {*/
/*    max-width: 900px;*/
/*}*/
/*.modal-header{*/
/*    border: 0;*/
/*}*/
/*.logoDiv{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/
/*.modal .logoDiv{*/
/*    text-align: center;*/
/*     margin-bottom: 50px; */
/*}*/
/*.modal .logoDiv img{*/
/*    max-width: 60%;*/
/*}*/
/*.getAQuoteDiv{*/
/*    text-align: center;*/
/*}*/
/*#formModalContent h1{*/
/*    display: inline-block;*/
/*    border-bottom: 1px solid;*/
/*}*/
/*#formModalContent form{*/
/*    padding: 40px 100px;*/
/*}*/
/*#formModalContent .form-control{*/
/*    border: 2px solid #aaa;*/
/*}*/
/*#formModalContent .form-label{*/
/*    margin-left: 15px;*/
/*}*/
/*#formModalContent .submitBtn{*/
/*    justify-content: end;*/
/*    padding: 0 15px;*/
/*}*/
/*#formModalContent .formBtn{*/
/*    background: var(--main-color);*/
/*    color: #fff;*/
/*    padding: 7px;*/
/*    border: 0;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*    max-width: 150px;*/
/*    width: auto;*/
/*     font-weight: 600; */
/*}*/
 /*GHAZALI CSS */
/*.mainBree {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/
/*.myInputGroup {*/
/*    width: max-content;*/
/*}*/
/*.breedteInput:focus {*/
/*    box-shadow: none;*/
/*    border-color: var(--main-color);*/
/*}*/
/*.paginateDiv {*/
/*    display: flex;*/
/*    gap: 10px;*/
/*}*/
/*.intermediateRadioBtns:checked {*/
/*  background-color: var(--main-color);*/
/*  border-color: var(--main-color);*/
/*}*/
/*.pagin {*/
/*    height: 35px;*/
/*    width: 35px;*/
/*    border: 1px solid #a0a0a0;*/
/*    border-radius: 7px;*/
/*    background: transparent;*/
/*    color: black;*/
/*}*/
/*.pagin.active {*/
/*    background-color: var(--main-color);*/
/*    color: white;*/
/*    border: 0;*/
/*}*/
/*#pagin1 {*/
/*    border-right: 0;*/
/*    border-top-right-radius: 0;*/
/*    border-bottom-right-radius: 0;*/
/*}*/
/*#pagin2 {*/
/*    border-left: 0;*/
/*    border-top-left-radius: 0;*/
/*    border-bottom-left-radius: 0;*/
/*}*/
/*.leftWidth2Div,.rightWidth2Div,.leftWidth1Div,.rightWidth1Div{*/
/*    display: none;*/
/*}*/
/* custom radio */
/*.customRadioLabel {*/
/*  display: block;*/
/*  position: relative;*/
/*  padding-left: 35px;*/
/*  margin-bottom: 15px;*/
/*  cursor: pointer;*/
/*  font-size: 18px;*/
/*  -webkit-user-select: none;*/
/*  -moz-user-select: none;*/
/*  -ms-user-select: none;*/
/*  user-select: none;*/
/*}*/

 /*Hide the browser's default radio button */
/*.customRadioLabel input {*/
/*  position: absolute;*/
/*  opacity: 0;*/
/*  cursor: pointer;*/
/*}*/

/* Create a custom radio button */
/*.customRadioLabel .checkmark {*/
/*  position: absolute;*/
/*  top: 5px;*/
/*  left: 0;*/
/*  height: 20px;*/
/*  width: 20px;*/
/*  background-color: #e3e3e3;*/
/*  border-radius: 50%;*/
/*}*/

/* On mouse-over, add a grey background color */
/*.customRadioLabel:hover input ~ .checkmark {*/
/*  background-color: #ccc;*/
/*}*/
/* When the radio button is checked, add a blue background */
/*.customRadioLabel input:checked ~ .checkmark {*/
/*  background-color: #000;*/
/*}*/
 /*Create the indicator (the dot/circle - hidden when not checked) */
/*.customRadioLabel .checkmark:after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  display: none;*/
/*}*/
 /*Show the indicator (dot/circle) when checked */
/*.customRadioLabel input:checked ~ .checkmark:after {*/
/*  display: block;*/
/*}*/
 /*Style the indicator (dot/circle) */
/*.customRadioLabel .checkmark:after {*/
/* 	top: 7px;*/
/*	left: 7px;*/
/*	width: 6px;*/
/*	height: 6px;*/
/*	border-radius: 50%;*/
/*	background: white;*/
/*}*/
/*.infoDiv{*/
/*    display: flex;*/
/*    gap: 25px;*/
/*    align-items: baseline;*/
/*}*/
/*.tooltipBtn{*/
/*    background-color: #8d8f8e;*/
/*  color: #ffffff;*/
/*  font-weight: bold;*/
/*  padding: 0;*/
/*  line-height: 20px;*/
/*  width: 20px;*/
/*  height: 20px;*/
/*  overflow: hidden;*/
/*  opacity: 0.5;*/
/*  border-radius: 100%;*/
/*  border: 0;*/
/*}*/
/*.intermediateProfileDiv .doorValue{*/
/*    top: 40px;*/
/*}*/
/*.diagramForm, .assymetricDiv, .formDiv.horizontal, .formDiv.vertical{*/
/*    display: none;*/
/*}*/
/* .doorSlider {*/
/*    display: none;*/
/*}*/
/*#door1WidthSlider,*/
/*#door1HeightSlider {*/
/*    display: block;*/
/*} */
/* custom radio */

/* Handle Tab CSS */
/*.detailHandlesContent {*/
/*    display: none;*/
/*}*/
/* Handle Tab CSS */
/*.cabTabBtnsContainer {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    background-color: white;*/
/*    padding: 10px;*/
/*}*/
/*.cabTabContent {*/
/*    display: none;*/
/*    background-color: white;*/
/*    padding: 15px;*/
/*    margin: 10px 0;*/
/*    max-height: 790px;*/
/*    height: 100%;*/
/*    overflow-y: auto;*/
/*}*/
/*.cabTabContent::-webkit-scrollbar {*/
/*  width: 2px;*/
/*}*/
/*.cabTabContent::-webkit-scrollbar-track {*/
/*  background: #f1f1f1;*/
/*  border-radius: 40px;*/
/*}*/
/*.cabTabContent::-webkit-scrollbar-thumb {*/
/*  background: #cac7a5;*/
/*  border-radius: 10px;*/
/*}*/
/*.cabTabContent::-webkit-scrollbar-thumb:hover {*/
/*  background: #cac7a5;*/
/*}*/
/*.cabTabBtns {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background: none;*/
/*    outline: none;*/
/*    border: 0;*/
/*}*/
/*.tabNumContent {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.tabNumSpan {*/
/*    background-color: #f1f3ef;*/
/*    color: #cac7a5;*/
/*    height: 40px;*/
/*    width: 40px;*/
/*    border: 0;*/
/*    border-radius: 50%;*/
/*    font-size: 25px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    font-weight: bold;*/
/*}*/
/*.tabTxtConBox {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    padding-left: 7px;*/
/*}*/
/*.tabStepTxt {*/
/*    text-transform: uppercase;*/
/*    font-weight: light;*/
/*    font-size: 12px;*/
/*    text-align: left;*/
/*    margin-bottom: -6px;*/
/*}*/
/*.tabNameTxt {*/
/*    text-transform: uppercase;*/
/*    font-weight: normal;*/
/*    font-size: 20px;*/
/*    color: #cac7a5;*/
/*}*/
/*.cabTabBtns.active .tabNumSpan {*/
/*    background-color: var(--main-color);*/
/*    font-weight: bold;*/
/*    color: white;*/
/*}*/
/*.cabTabBtns.active .tabNameTxt {*/
/*    font-weight: bold;*/
/*    color: black;*/
/*}*/
/*.tabBetwinLine {*/
/*    border-bottom: 1px solid gray;*/
/*    height: 1px;*/
/*    width: 30px;*/
/*}*/


/*.rangeSliderHdngBox {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    border-bottom: 2px solid;*/
/*    width: 100%;*/
/*}*/
/*.rangeSliderHdngBox h4 {*/
/*    margin-bottom: 0;*/
/*}*/




/*.rangeslider {*/
/*    background: black;*/
/*    height: 3px !important;*/
/*}*/
/*.rangeslider__handle {*/
/*    border-radius: 22px;*/
/*    min-width: 62px !important;*/
/*    text-align: center;*/
/*    background-color: var(--main-color) !important;*/
/*    box-shadow: none !important;*/
/*    color: white !important;*/
/*}*/
/*.rangeslider__handle:after {*/
/*    background: 0;*/
/*}*/
/*.rangeslider, .rangeslider__fill {*/
/*    -moz-box-shadow: unset;*/
/*    -webkit-box-shadow: unset;*/
/*    box-shadow: unset;*/
/*}*/
/*.rangeslider--horizontal {*/
/*    height: 10px;*/
/*}*/
/*.rangeslider--horizontal .rangeslider__handle {*/
/*    top: -10px;*/
/*}*/
/*.rangeslider__handle {*/
/*    background-color: #fff;*/
/*    width: 30px;*/
/*    height: 30px;*/
/*}*/
/*.rangeslider__handle {*/
/*    border-radius: 50px;*/
/*    min-width: auto;*/
/*    line-height: 33px;*/
/*    font-size: 17px;*/
/*    font-weight: 600;*/
/*    border: 1px solid var(--main-color);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 25px;*/
/*    width: 90px;*/
/*}*/
/*.rangeslider__fill {*/
/*    background: var(--main-color);*/
/*}*/
/*.rangeCont {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    margin: 0 auto;*/
/*}*/
/*.minus {*/
/*    margin-right: 15px;*/
/*}*/
/*.plus {*/
/*    margin-left: 15px;*/
/*}*/
/*.minus, .plus {*/
/*    background-color: var(--main-color);*/
/*    border: none;*/
/*    height: 26px;*/
/*    width: 26px;*/
/*    border-radius: 50%;*/
/*    color: white;*/
/*    font-size: 30px;*/
/*    font-weight: lighter;*/
/*    padding: 5px 10px 10px 10px;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.minus:hover, .plus:hover {*/
/*    background-color: #8c8a6e;*/
/*}*/
/*input[type="range"] {*/
/*    margin: 0 10px;*/
/*}*/


/*.rangeInput {*/
/*    background-color: #fff;*/
/*    border: 1px solid var(--main-color);*/
/*    border-radius: 4px;*/
/*    height: 40px;*/
/*     width: 60px; */
/*    color: black;*/
/*    font-weight: light;*/
/*    text-align: center;*/
/*}*/
/*.validError {*/
/*    color: red;*/
/*    display: none;*/
/*}*/
/*.rangeInput:focus {*/
/*    outline: none;*/
/*    box-shadow: none;*/
/*}*/



/*.cabinetNumberMainContainer {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*}*/
/*.cabinetNumberContainer {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*     justify-content: center; */
/*    align-items: center;*/
/*    column-gap: 15px;*/
/*    width: 100%;*/
/*}*/
/*.numCabBTxt {*/
/*    color: var(--main-color);*/
/*}*/
/*.cabinetNumberBox {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.cabinetNumberImgBox {*/
/*    border-radius: 5px;*/
/*    height: 80px;*/
/*    width: 100%;*/
/*    max-width: 135px;*/
/*    background-color: #fff;*/
/*    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
/*    overflow: hidden;*/
/*    padding: 10px;*/
/*}*/
/*.cabinetNumberImgTxt {*/
/*    font-size: 14px;*/
/*    font-weight: normal;*/
/*    padding-top: 15px;*/
/*}*/
/*.children.active ~ .cabinetNumberImgTxt {*/
/*    font-weight: bold;*/
/*}*/


/*.slopingWallContainer {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    column-gap: 15px;*/
/*    width: 100%;*/
/*    margin: 30px 0;*/
/*}*/
/*.slopingWallBox {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.slopingWallImgBox {*/
/*    border-radius: 5px;*/
/*    height: 135px;*/
/*    width: 100%;*/
/*    max-width: 135px;*/
/*    box-shadow: #00000026 1.95px 1.95px 2.6px;*/
/*    overflow: hidden;*/
/*    text-align: center;*/
/*}*/
/*.slopingWallImgTxt {*/
/*    font-size: 14px;*/
/*    font-weight: normal;*/
/*    padding-top: 10px;*/
/*}*/
/*.children.active ~ .slopingWallImgTxt {*/
/*    font-weight: bold;*/
/*}*/
/*.slopingBox {*/
/*    text-align: center;*/
/*}*/

/*.interiorMainContainer {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*}*/
/*.interiorContainer {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    column-gap: 15px;*/
/*    width: 100%;*/
/*    margin: 25px 0;*/
/*}*/
/*.interiorBox {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.interiorImgBox {*/
/*    border-radius: 5px;*/
/*    height: 180px;*/
/*    width: 100%;*/
/*    max-width: 98px;*/
/*    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
/*    overflow: hidden;*/
/*    background-color: #fff;*/
/*}*/
/*.interiorImg {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/
/*.interiorImgTxt {*/
/*    font-size: 14px;*/
/*    font-weight: normal;*/
/*    padding-top: 15px;*/
/*}*/
/*.children.active ~ .interiorImgTxt {*/
/*    font-weight: bold;*/
/*}*/
/*.cabModuleContent {*/
/*    display: none;*/
/*    width: 100%;*/
/*}*/
/*.cabModuleContentInner {*/
/*    display: flex;*/
/*    justify-content: flex-start;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    column-gap: 15px;*/
/*    width: 100%;*/
/*}*/
/* Nested Tab CSS */
/*.showIndelingBtn {*/
/*    display: inline-block;*/
/*}*/
/*.indeling-content {*/
/*    display: none;*/
/*}*/
/*.nested-indelingBtn {*/
/*    display: inline-block;*/
/*}*/
/*.nested-indelingContent {*/
/*    display: none;*/
/*}*/
/* Nested Tab CSS */


/*.colorContainer {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    margin: 20px auto;*/
/*}*/
/*.colorWrapper {*/
/*    display: flex;*/
/*    justify-content: flex-start;*/
/*    align-items: flex-start;*/
/*    flex-wrap: wrap;*/
/*    column-gap: 20px;*/
/*}*/
/*.colorOuterBox {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    max-width: 70px;*/
/*}*/
/*.colorOuterBox p {*/
/*    line-height: 13px;*/
/*    padding-top: 8px;*/
/*    text-align: center;*/
/*}*/

/*.swiperBox {*/
/*    position: relative;*/
/*    max-width: 340px;*/
/*    width: 100%;*/
/*    margin: 0 auto;*/
/*}*/
/*.swiper-container {*/
/*    overflow: hidden;*/
/*    padding: 10px;*/
/*}*/
/*.swiper-wrapper {*/
/*    display: flex;*/
/*    justify-content: start;*/
/*    align-items: center;*/
/*    height: 80px;*/
/*    background-color: transparent;*/
/*    margin-top: 40px;*/
/*}*/
/*.swiper-slide {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: max-content;*/
/*}*/
/*:root {*/
/*    --swiper-navigation-size: 12px;*/
/*    color: white;*/
/*}*/
/*.swiper-button-prev, .swiper-rtl .swiper-button-next {*/
/*    left: var(--swiper-navigation-sides-offset, -40px);*/
/*}*/
/*.swiper-button-next, .swiper-rtl .swiper-button-prev {*/
/*    right: var(--swiper-navigation-sides-offset, -40px);*/
/*}*/
/*.swiper-button-next, .swiper-button-prev {*/
/*    background-color: #b8b593;*/
/*    color: white;*/
/*    font-weight: bold;*/
/*    border-radius: 50%;*/
/*    padding: 14px;*/
/*}*/
/*.circle {*/
/*    width: 70px;*/
/*    height: 70px;*/
/*    border-radius: 0;*/
/*    cursor: pointer;*/
/*    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*}*/
/*#detailDoorColor1 {*/
/*    background-color: #000000;*/
/*}*/
/*#detailDoorColor2 {*/
/*    background-color: #272d30;*/
/*}*/
/*#detailDoorColor3 {*/
/*    background-color: #f3f4f1;*/
/*}*/
/*#detailDoorColor4 {*/
/*    background-color: #d9c8b8;*/
/*}*/
/*#detailDoorColor5 {*/
/*    background-color: #b7afa3;*/
/*}*/
/*#detailDoorColor6 {*/
/*    background-color: #eee5de;*/
/*}*/
/*#detailDoorColor7 {*/
/*    background-color: #d3d7d6;*/
/*}*/
/*#detailDoorColor8 {*/
/*    background-color: #928b8b;*/
/*}*/
/*#detailDoorColor9 {*/
/*    background-color: #4c4748;*/
/*}*/
/*#detailDoorColor10 {*/
/*    background-color: #968a81;*/
/*}*/
/*#detailDoorColor11 {*/
/*    background-color: #786e5e;*/
/*}*/
/*#detailDoorColor12 {*/
/*    background-color: #575f3b;*/
/*}*/
/*#detailDoorColor13 {*/
/*    background-color: #545d57;*/
/*}*/
/*#detailDoorColor14 {*/
/*    background-color: #9e3d1c;*/
/*}*/
/*#detailDoorColor15 {*/
/*    background-color: #22313f;*/
/*}*/
/*#detailDoorColor16 {*/
/*    background-color: #abbcc4;*/
/*}*/
/*#detailDoorColor17 {*/
/*    background-color: #fae5c8;*/
/*}*/
/*#detailDoorColor18 {*/
/*    background-color: #668eae;*/
/*}*/
/*#detailDoorColor19 {*/
/*    background-color: #b5ba9b;*/
/*}*/
/*#detailDoorColor20 {*/
/*    background-color: #d48b2f;*/
/*}*/

/*#designColor1 {*/
/*    background-color: #504e4d;*/
/*}*/
/*#designColor2 {*/
/*    background-color: #968d8c;*/
/*}*/
/*#designColor3 {*/
/*    background-color: #3d2613;*/
/*}*/
/*#designColor4 {*/
/*    background-color: #343c3f;*/
/*}*/
/*#designColor5 {*/
/*    background-color: #695d55;*/
/*}*/
/*#designColor6 {*/
/*    background-color: #dddbd6;*/
/*}*/
/*#designColor7 {*/
/*    background-color: #343638;*/
/*}*/

/*.selectOuterDiv {*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.extraOpSelect {*/
/*    padding: 15px 40px 15px 15px; */
/*    background: url('../assets/cabImages/selectIcon.png') no-repeat right 15px center #e2e2e2;*/
/*    color: #000;*/
/*    outline: 0;*/
/*    border: 0;*/
/*    border-radius: 50px;*/
/*    font-weight: 700;*/
/*    width: 90%;*/
/*    appearance: none;*/
/*    margin: 20px auto 30px auto;*/
/*    cursor: pointer;*/
/*}*/
/*.extraOpSelect>option {*/
/*    padding: 10px;*/
/*    color: black;*/
/*}*/
/*.designCheckBoxLabel {*/
/*    text-transform: uppercase !important;*/
/*    font-weight: 900 !important;*/
/*    font-size: 18px !important;*/
/*    padding-left: 20px !important;*/
/*}*/
/*.designCheckBox {*/
/*    height: 25px !important;*/
/*    width: 25px !important;*/
/*    box-shadow: none !important;*/
/*}*/
/*.designCheckBox:checked {*/
/*    background-color: var(--main-color);*/
/*    border-color: var(--main-color);*/
/*}*/
/*.form-check-input:focus {*/
/*    border-color: var(--main-color);*/
/*    outline: 0;*/
/*}*/
/*.calculate {*/
/*    position: relative;*/
/*}*/
/*.infoInnerImgBox {*/
/*    position: absolute;*/
/*    top: 4px;*/
/*    right: 4px;*/
/*}*/
/*.modalCloseBtn {*/
/*    background-color: var(--main-color);*/
/*    color: white;*/
/*}*/
/*.modalCloseBtn:hover {*/
/*    background-color: var(--main-color);*/
/*    color: white;*/
/*}*/
/*.dNone {*/
/*    display: none;*/
/*}*/

/*.designLightAccHeader {*/
/*    background-color: lightgray !important;*/
/*    font-weight: bold;*/
/*    border-radius: 30px !important;*/
/*}*/

/*.accordion-button {*/
/*    font-size: 24px;*/
/*}*/
/* .accordion-button::after {*/
/*    background-color: #b8b593;*/
/*    border-radius: 50%;*/
/*    padding: 10px;*/
/*} */

/*.detailTabContent {*/
/*    display: none;*/
/*}*/
/*.quoteBtnBox {*/
/*    position: absolute;*/
/*    left: 20px;*/
/*    bottom: 20px;*/
/*}*/
/*.quoteBtn {*/
/*    background-color: var(--main-color);*/
/*    border: 1px solid var(--main-color);*/
/*    border-radius: 50px;*/
/*    color: white;*/
/*    font-weight: 600;*/
/*    font-size: 14px;*/
/*    padding: 10px 20px;*/
/*}*/

/*.moveBtnsDiv {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    padding-top: 30px;*/
/*}*/
/*.accPrevBtn {*/
/*    background-color: #fff;*/
/*    color: #000;*/
/*    float: left;*/
/*    width: 165px;*/
/*    border-radius: 50px;*/
/*    border: 0;*/
/*    text-transform: uppercase;*/
/*    font-size: 18px;*/
/*    padding: 4px;*/
/*}*/
/*.accNextBtn {*/
/*    background-color: #adab8c;*/
/*    color: white;*/
/*    float: right;*/
/*    width: 165px;*/
/*    border-radius: 50px;*/
/*    border: 0;*/
/*    text-transform: uppercase;*/
/*    font-size: 18px;*/
/*    padding: 4px;*/
/*}*/

/* Toggle Switch Button CSS */
/*.switch {*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    width: 50px;*/
/*    height: 25px;*/
/*    border-radius: 20px;*/
/*    background: #dfd9ea;*/
/*    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);*/
/*    vertical-align: middle;*/
/*    cursor: pointer;*/
/*    margin-bottom: 6px;*/
/*}*/
/*.switch::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 1px;*/
/*    left: 2px;*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    background: #fafafa;*/
/*    border-radius: 50%;*/
/*    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);*/
/*}*/
/*.switch:active::before {*/
/*    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);*/
/*}*/
/*input:checked + .switch {*/
/*    background: #adab8c;*/
/*}*/
/*input:checked + .switch::before {*/
/*    left: 27px;*/
/*    background: #fff;*/
/*}*/
/*input:checked + .switch:active::before {*/
/*    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);*/
/*}*/
/* Toggle Switch Button CSS */


/*.children.active {*/
/*    border: 2px solid black;*/
/*}*/
/* GHAZALI CSS */


/*.code {*/
/*    display: block;*/
/*}*/
/*.grab {*/
/*    cursor: move;*/
/*    cursor: grab;*/
/*    cursor: -moz-grab;*/
/*    cursor: -webkit-grab;*/
/*}*/
/*.grab:active {*/
/*    cursor: grabbing;*/
/*    cursor: -moz-grabbing;*/
/*    cursor: -webkit-grabbing;*/
/*}*/

/*@media(max-width: 992px){*/

/*    main{*/
/*        grid-template-columns: 100%;*/
/*    }*/
/*    .uiDiv{*/
/*        order: 2;*/
/*        height: 50vh;*/
/*        padding: 15px;*/
/*        overflow: auto;*/
/*        position: absolute;*/
/*        bottom: 10vh;*/
/*        order: 2;*/
/*        height: 40vh;*/
/*        padding: 15px;*/
/*        overflow: auto;*/
/*         width: 100%;*/
/*        position: unset;*/
/*    }*/
/*    #iframeDiv{*/
/*        order: 1;*/
/*        height: 50vh;*/
/*    }*/
/*    .iconsDiv {*/
/*        right: 10px;*/
/*        left: auto;*/
/*        top: 27.5%;*/
/*        transform: translate(0,-27.5%);*/
/*        gap: 10px;*/
/*        display: grid !important;*/
/*        right: auto;*/
/*        position: absolute;*/
/*        left: 50%;*/
/*        top: 10px;*/
/*        transform: translate(-50%,0);*/
/*        display: flex;*/
/*        gap: 10px;*/
/*    }*/
/*    .iconsDivTech{*/
/*        top: 50%;*/
/*        display: grid;*/
/*        left: 10px;*/
/*        transform: translate(0%, -50%);*/
/*        gap: 10px;*/
/*        position: absolute;*/
/*    }*/
/*    .iconsDivBg{*/
/*        position: absolute;*/
/*        left: 50%;*/
/*        top: 25px;*/
/*        transform: translate(-50%, -50%);*/
/*        display: flex;*/
/*        gap: 10px;*/
/*    }*/
/*    .iconDiv .text{*/
/*        left: 0;*/
/*    }*/
/*    .iconsDivTech .text{*/
/*        left: calc(100% + 10px);*/
/*        top: 3px;*/
/*    }*/
/*    .iconDiv{*/
/*        padding: 5px;*/
/*        border-radius: 7px;*/
/*    }*/
/*    .iconsDiv img {*/
/*        max-width: 20px;*/
/*    }*/
/*    .colorsDiv .color {*/
/*        width: 63px;*/
/*        height: 63px;*/
/*    }*/
/*    .accordion-button,.priceDiv button{*/
/*        font-size: 16px;*/
/*    }*/
/*    .typesOfDoorsText {*/
/*        font-size: 14px;*/
/*    }*/
    
/*    .hi{*/
/*        justify-content: center;*/
/*    }*/
    
/*    .priceDiv{*/
       
/*        grid-template-columns: 1fr;*/
/*        bottom: 45vh;*/
/*        width: 100%;*/
/*        z-index: 99;*/
/*        bottom: 0;*/
/*        width: 100%;*/
/*        z-index: 99;*/
/*        height: 10vh;*/
/*        padding: 0px 35px 0px 35px;*/
/*         top: calc(55vh - 85px);*/
/*        padding: 15px 0;*/
/*        z-index: 1;*/
/*        visibility: visible;*/
/*        bottom: auto;*/
/*        height: 85px;*/
/*        left: 0;*/
/*        position: unset;*/
       
/*    }*/
/*    #formModalContent h1{*/
/*        font-size: 26px;*/
/*        padding-bottom: 10px;*/
/*    }*/
    
   
    
    
/*    .priceDiv span{*/
/*        font-size: 12px;*/
/*    }*/
/*    #price {*/
/*        font-size: 38px;*/
/*        line-height: 35px;*/
/*    }*/
/*    .fm{*/
/*        width: 250px;*/
/*    }*/
/*    .priceDiv div:last-child{*/
/*        padding: 0;*/
/*    }*/
/*    .priceDiv img {*/
/*        max-width: 26px;*/
/*    }*/
/*    .logoDiv img{*/
/*        max-width: 100%;*/
/*    }*/
/*    #accordionExample{*/
/*        height: auto;*/
/*    }*/
/*    .modal .logoDiv img {*/
/*        max-width: 100%;*/
/*    }*/
/*    #formModalContent form {*/
/*        padding: 15px;*/
/*    }*/
/*    #formModalContent .mb-4{*/
/*        margin-bottom: 15px;*/
/*    }*/
/*    .accordion-item {*/
/*        position: relative;*/
/*        overflow: hidden;*/
/*        max-height: max-content !important;*/
/*        padding: 0px;*/
/*    }*/
/*    .priceDiv button{*/
/*       padding: 15px 50px; */
/*    }*/
    
/*    .priceDiv div:last-child {*/
/*        justify-content: center;*/
/*    }*/
    
/*    .accordion-button:not(.collapsed) {*/
/*        position: sticky;*/
/*        top: 0;*/
/*        z-index: 100;*/
/*    }*/
/*    .accordion-collapse {*/
/*        transition: max-height 0.5s ease-out;*/
/*    }*/
/*    .accordion-body {*/
/*        height: auto;*/
/*         height: 350px; */
/*        overflow: auto;*/
/*        scrollbar-width: none;*/
         /*for IE, Edge and Firefox */
/*        -ms-overflow-style: none;*/
/*        scrollbar-width: none;  */
/*    }*/
/*    .accordion-body::-webkit-scrollbar{*/
/*        display: none;*/
/*    }*/
/*}*/


/*@media(max-width: 568px){*/
/*    .uiDiv .logoDiv{*/
/*        position: absolute;*/
/*        top: 0;*/
/*        left: 50%;*/
/*        transform: translate(-50%);*/
/*        z-index: 9;*/
/*        height: 65px;*/
/*    }*/
/*    .iconsDivBg{*/
/*        top: 80px;*/
/*    }*/
/*    .priceDiv{*/
/*        position: unset;*/
/*        margin-bottom: 50px;*/
/*    }*/
/*    .swiperBox {*/
/*        max-width: 300px;*/
/*    }*/
/*    .uiDiv {*/
/*        padding: 4px;*/
/*    }*/

/*     GHAZALI QUERIES */
    
/*    .tabNumSpan {*/
/*        height: 30px;*/
/*        width: 30px;*/
/*        font-size: 22px;*/
/*    }*/
/*    .tabNameTxt {*/
/*        font-size: 18px;*/
/*    }*/
/*    .tabBetwinLine {*/
/*        width: 15px;*/
/*    }*/
/*    .tabBetwinLine {*/
/*        font-size: 18px;*/
/*    }*/
/*    .slopingWallContainer {*/
/*        column-gap: 10px;*/
/*    }*/
/*    .swiperBox {*/
/*        max-width: 280px;*/
/*    }*/
/*    .accordion-body {*/
/*        padding: 10px;*/
/*    }*/
/*    .colorWrapper {*/
/*        column-gap: 15px;*/
/*    }*/
/*    .slopingWallImgBox {*/
/*        height: 90px;*/
/*        max-width: 90px;*/
/*    }*/
/*    .moveBtnsDiv {*/
/*        padding: 20px 10px 0 10px;*/
/*    }*/
/*    .accNextBtn {*/
/*        width: 130px;*/
/*    }*/
/*    .accPrevBtn {*/
/*        width: 130px;*/
/*    }*/
/*    .cabinetNumberContainer {*/
/*        justify-content: center;*/
/*    }*/
     /*GHAZALI QUERIES */
/*}*/
:root {
    --main-color: #adab8c;
}
p {
    margin-bottom: 0 !important;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* user-select: none; */
}
@font-face {
    font-family: 'headingFont';
    src: url(./fonts/neue-montreal/NeueMontreal-Regular.otf);
}
@font-face {
    font-family: 'bodyFont';
    src: url(./fonts/tt-commons/TTCommonsRegular.otf);
}
*,body,html{
    font-family: 'bodyFont';
    /* background-color: #F0F2ED; */
}
#iframeDiv{
    /*height: calc(100vh - 100px);*/
    height: 100%;
    position: relative;
}
div::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: lightgray;
}

div::-webkit-scrollbar {
  width: 5px;
  background-color: var(--main-color);
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--main-color);
}
img{
    max-width: 100%;
    cursor: pointer;
}
main{
    display: grid;
    /*grid-template-columns: auto 25%;*/
    grid-template-columns: auto 520px;
    height: 90vh;
    /*overflow: hidden;*/
    position: relative;
    grid-template-rows: auto 100%;
}
/*#iframeDiv{*/
/*    background-image: url(./images/1.jpg);*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*}*/
.iconsDivBg{
    /*position: absolute;*/
    /*left: 30px;*/
    /*top: 50%;*/
    /*transform: translate(0,-50%);*/
    /*display: grid;*/
    /*gap: 20px;*/
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translate(0%, -50%);
    display: flex;
    gap: 20px;
}
.iconsDivTech{
    top: 50%;
    display: grid;
    left: 10px;
    transform: translate(0%, -50%);
    gap: 20px;
    position: absolute;
}
.iconDiv{
    background: #fff;
    padding: 12px;
    border-radius: 7px;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    position: relative;
    cursor: pointer;
}
.hide,#forDoor2{
    display: none;
}

.child-box.active {
    border: 2px solid black;
}
.interiorDimension{
    width: 100px !important;
    height: 200px !important;
    padding: 2px;
}
.interiorDimension.active {
    border: 2px solid black;
}
.interiorDimension svg {
    display: block;
    margin: auto;
    height: 180px;
    width: 100%;
}
.quoteBtnBox a {
    text-decoration: none;
}
.quoteBtnTxt {
    font-weight: 600;
}

.iconDiv .text{
    /*position: absolute;*/
    /*right: 50px;*/
    /*position: absolute;*/
    /*left: 80px;*/
    /*font-size: 12px;*/
    /*color: #fff;*/
    /*background: var(--main-color);*/
    /*padding: 5px;*/
    /*top: 23px;*/
    /*width: max-content;*/
    
    position: absolute;
  left: 0;
  font-size: 12px;
  color: #fff;
  background: var(--main-color);
  padding: 5px;
  top: auto;
  width: max-content;
  bottom: -35px;
}
.iconDiv:hover .hide {
    display: block;
}
.iconsDivTech .text{
    position: absolute;
    left: calc(100% + 10px);
    font-size: 12px;
    color: #fff;
    background: var(--main-color);
    padding: 5px;
    top: 18px;
    width: max-content;
    right: auto;
    bottom: auto;
}
.iconsDiv img{
    max-width: 36px;
}
.uiDiv{
    background-color: #F0F2ED;
    padding: 0px 20px;
    position: relative;
}
#accordionExample{
    /* height: calc(100vh - 200px); */
    height: calc(100vh - 300px);
    overflow: auto;
    /*scrollbar-width: none !important;*/
    /* For Firefox */
    scrollbar-width: none;
    /* For other browsers (like Chrome, Safari) */
    overflow: -ms-autohiding-scrollbar; /* For Internet Explorer/Edge */
}
/* For WebKit browsers (Chrome, Safari) */
#accordionExample::-webkit-scrollbar {
  display: none;
}
.accordion-item{
    background-color: transparent;
    border: 0;
    /*max-height: 500px;*/
    /*max-height: 380px;*/
    overflow: auto;
    /* padding: 0 20px; */
    margin: 15px 0px;
}
.accordion-header {
    margin-bottom: 0;
    background: #fff !important;
    border-radius: 20px;
    padding: 0 20px;
}
.accordion-header:hover{
    background: rgb(245, 245, 245) !important;
    transition: all 0.3s;
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion-button{
    background: transparent !important;
    font-size: 24px;
    color: #000;
    padding: 1rem 0;
    /*border-bottom: 1px solid #b2b2b2;*/
    border: 0 !important;
    box-shadow: none !important;
    /* font-weight: 600; */
    font-family: 'headingFont';
}
.accordion-button span{
    font-size: 14px;
    display: grid;
    align-items: end;
    align-self: end;
    margin-left: 5px;
}
.accordion-button:not(.collapsed){
    color: #000;
}
.accordion-button:focus{
    border-color: transparent;
    box-shadow: none;
}
/* .accordion-button:not(.collapsed)::after, .accordion-button::after {
    background-image: url(./images/tick.svg);
    transform: unset;
}
.accordion-button:not(.collapsed){
    border-bottom: 1px solid #b2b2b2;
    border-radius: 0;
} */
.accordion-body{
    padding: 1rem;
    font-family: 'bodyFont';
}
.typesOfDoorsText{
    font-size: 18px;
    /* font-weight: 600; */
}
.justifySpaceBtwn{
    display: flex;
    justify-content: space-between;
}
.justifySpaceBtwn div:first-child{
    font-size: 12px;
    color: #000;
}
.doorOptions,.glassOptions{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
    padding: 0 10px;
    text-align: center;
}
.glassOptions{
    grid-template-columns: repeat(4,1fr);
}
.doorTypeContainer {
    display: none;
}
.ml-custom{
    margin-left: 10px;
}


.doorOption.active, .glassOption.active, .colorStyleDiv.active{
    border: 2px solid #000000;
}
.noOfDoors.active{
    font-weight: 600;
    /*border: 1px solid;*/
}
.doorOption,.glassOption,.colorStyleDiv{
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    border: 1px solid transparent;
    /*width: 87.5px;*/
    /*height: 87.5px;*/
}
.info{
    max-width: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.optionText{
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
}
.doorText{
    font-size: 20px;
}
.noOfDoorsDiv{
    /*display: flex;*/
    /*gap: 10px;*/
    display: grid;
      gap: 10px;
      grid-template-columns: repeat(4,1fr);
      padding: 0 10px;
}
/* === range theme and appearance === */
input[type="range"] {
	font-size: 1.5rem;
	max-width: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: auto;
}

input[type="range"] {
	color: var(--main-color);
	--thumb-height: 20px;
	--track-height: 0.125em;
	--track-color: #5e5e5e;
	--brightness-down: 80%;
	--clip-edges: 0;
}

/* === range commons === */
.doorSliderMainDiv{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
}
.doorSlider,.glassSlider,.cornerSlider{
    display: none;
    text-align: right;
}
#door1WidthSlider,#door1HeightSlider{
    display: block;
}
input[type="range"] {
	position: relative;
	background: #fff0;
	/*overflow: hidden;*/
}

input[type="range"]:active {
	cursor: grabbing;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	position: relative;
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
		100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
		50% calc(var(--track-height) + 1px);
	background-color: currentColor;
	box-shadow: var(--box-fill);
	border-radius: 0;

	filter: brightness(100%);
	clip-path: polygon(
		100% -1px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
    /* border: 2px solid #000000; */
    border-radius: 50%; /* Make the thumb circular */
}


input[type="range"]:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: grabbing;
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
		100% calc(var(--track-height) + 1px);
		border-radius: 50%; /* Make the thumb circular */
}
/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
	appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	background: #fff0;
}

input[type="range"]::-moz-range-thumb {
	background: currentColor;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	border-radius: 0;
	cursor: grab;
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-moz-range-track {
	width: 100%;
	background: var(--track-color);
	border-radius: 50%; /* Make the thumb circular */
}

input[type="range"]::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: 0;
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	filter: brightness(100%);
}
.info_about_slider{
    max-width: 16px;
}
.doorValue{
    width: 50px;
    height: 20px;
    border: 1px solid;
    background: #fff;
    position: absolute;
    right: 0px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
}
.priceDiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    gap: 10px;
    /* display: grid;
    grid-template-columns: 1fr; */
    /* border-top: 3px solid; */
    padding: 0 15px;
    height: 10vh;
    width: 100%;
    background: var(--main-color);
    color: #fff;
    /*position: absolute;*/
    /*right: 0px;*/
    /*bottom: 0;*/
    grid-column: 1 / span 2;
}


/* .priceDiv1{
    border-right: 3px solid;
} */
.priceDiv span{
    text-transform: uppercase;
    font-size: 14px;
    /* font-weight: 600; */
}
#price{
    font-size: 45px;
    /* border-bottom: 2px solid; */
    max-width: fit-content;
    max-height: max-content;
    line-height: 35px;
    font-family: 'bodyFont';
}
.smallText{
    font-size: 10px;
}
.priceDiv div:last-child{
    display: grid;
    align-items: center;
    padding: 0;
    justify-content: right;
    gap: 10px;
}
.priceDiv button{
    background: var(--main-color);
    color: #fff;
    padding: 7px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid;
    width: max-content;
    padding: 10px 60px;
}
.priceDiv img{
    max-width: 32px;
}
.priceDivRight {
    /* padding: 0px 90px !important; */
    display: flex !important;
    flex-direction: column;
    gap: 10px
}
/* design */
fieldset {
    border: 1px solid black;
    padding: 10px;
  }

  legend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(black 0 0)center/100% 1px no-repeat;
    font-size: 14px;
    float: unset;
    margin-bottom: 0;
  }

  legend div {
    background-color: #F0F2ED;
    margin-left: 15px;
  }
  .formDivMain{
    display: grid;
    grid-template-columns: repeat(2,48.5%);
    grid-gap: 10px;
  }
  .formDiv div{
    display: block;
    margin-left: 5px;
    font-size: 12px;
  }
  .formDiv label{
    font-size: 12px;
    margin-left: 10px;
  }

  .formDiv input{
    max-width: 100%;
    border-radius: 5px;
    border: 1px solid;
  }
  .intermediateProfileDiv{
    text-align: right;
  }
  /* assymetrical checkbox */
  .assymetricDiv .left {
      width: 50%;
    }
#assymetricCheckBox{
    width: 25px;
    height: 25px;
}
.assymetricDiv input[type="checkbox"] {
    /*appearance: none;*/
    position: relative;
}

.assymetricDiv .checkbox {
    display: block;
    height: 12px;
    width: 12px;
    transition: 100ms ease-in;
    cursor: pointer;
    margin-right: 5px;
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.assymetricDiv input:checked + .checkbox {
    background: var(--main-color);
}

.assymetricDiv input:checked + .dark {
    background: white;
    border: 0.2rem solid white;
}
.assymetricDiv label{
    display: flex;
    width: fit-content;
    align-items: center;
    font-size: 12px;
    margin-left: 5px;
}
.assymetricDiv div{
    margin-left: 5px;
    font-size: 18px;
}
/* assymetrical checkbox */

/* design */
/* details */
.colorsDiv{
    display: flex;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 10px 0 10px;
    /*flex-wrap: wrap;*/
}

.handles img{
    border-radius: 10px;
}
.colorsDiv .color{
    width: 65.5px;
    height: 65.5px;
    border-radius: 0px;
}
.color.active,.handles.active{
    border: 1px solid;
    border-radius: 10px;
}
.color.black{
    background: #000;
}
.color.white{
    background: #fff;
}
.color.anthracite{
    background: #353c40;
}
.color.quartzGray{
    background: #6b665e;
}
.color.bronze{
    background: #CD7F32;
}
/* details */
.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
}
.modal-dialog {
    max-width: 900px;
}
/* .modal-header{
    border: 0;
} */
.logoDiv{
    display: flex;
    justify-content: center;
}
.modal .logoDiv{
    text-align: center;
    /* margin-bottom: 50px; */
}
.modal .logoDiv img{
    max-width: 60%;
}
.getAQuoteDiv{
    text-align: center;
}
#formModalContent h1{
    display: inline-block;
    border-bottom: 1px solid;
}
#formModalContent form{
    padding: 40px 100px;
}
#formModalContent .form-control{
    border: 2px solid #aaa;
}
#formModalContent .form-label{
    margin-left: 15px;
}
#formModalContent .submitBtn{
    justify-content: end;
    padding: 0 15px;
}
#formModalContent .formBtn{
    background: var(--main-color);
    color: #fff;
    padding: 7px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    max-width: 150px;
    width: auto;
    /* font-weight: 600; */
}
/* GHAZALI CSS */
.mainBree {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.myInputGroup {
    width: max-content;
}
.breedteInput:focus {
    box-shadow: none;
    border-color: var(--main-color);
}
.paginateDiv {
    display: flex;
    gap: 10px;
}
.intermediateRadioBtns:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.pagin {
    height: 35px;
    width: 35px;
    border: 1px solid #a0a0a0;
    border-radius: 7px;
    background: transparent;
    color: black;
}
.pagin.active {
    background-color: var(--main-color);
    color: white;
    border: 0;
}
#pagin1 {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#pagin2 {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.leftWidth2Div,.rightWidth2Div,.leftWidth1Div,.rightWidth1Div{
    display: none;
}
/* custom radio */
.customRadioLabel {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.customRadioLabel input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.customRadioLabel .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #e3e3e3;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.customRadioLabel:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.customRadioLabel input:checked ~ .checkmark {
  background-color: #000;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.customRadioLabel .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.customRadioLabel input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.customRadioLabel .checkmark:after {
 	top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}
.infoDiv{
    display: flex;
    gap: 25px;
    align-items: baseline;
}
.tooltipBtn{
    background-color: #8d8f8e;
  color: #ffffff;
  font-weight: bold;
  padding: 0;
  line-height: 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  opacity: 0.5;
  border-radius: 100%;
  border: 0;
}
.intermediateProfileDiv .doorValue{
    top: 40px;
}
.diagramForm, .assymetricDiv, .formDiv.horizontal, .formDiv.vertical{
    display: none;
}
/* .doorSlider {
    display: none;
}
#door1WidthSlider,
#door1HeightSlider {
    display: block;
} */
/* custom radio */

/* Handle Tab CSS */
.detailHandlesContent {
    display: none;
}
/* Handle Tab CSS */
.cabTabBtnsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 10px;
}
.cabTabContent {
    display: none;
    background-color: white;
    padding: 15px;
    margin: 10px 0;
    max-height: 790px;
    height: 100%;
    overflow-y: auto;
}
.cabTabContent::-webkit-scrollbar {
  width: 2px;
}
.cabTabContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 40px;
}
.cabTabContent::-webkit-scrollbar-thumb {
  background: #cac7a5;
  border-radius: 10px;
}
.cabTabContent::-webkit-scrollbar-thumb:hover {
  background: #cac7a5;
}
.cabTabBtns {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    outline: none;
    border: 0;
}
.tabNumContent {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabNumSpan {
    background-color: #f1f3ef;
    color: #cac7a5;
    height: 40px;
    width: 40px;
    border: 0;
    border-radius: 50%;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.tabTxtConBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 7px;
}
.tabStepTxt {
    text-transform: uppercase;
    font-weight: light;
    font-size: 12px;
    text-align: left;
    margin-bottom: -6px;
}
.tabNameTxt {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 20px;
    color: #cac7a5;
}
.cabTabBtns.active .tabNumSpan {
    background-color: var(--main-color);
    font-weight: bold;
    color: white;
}
.cabTabBtns.active .tabNameTxt {
    font-weight: bold;
    color: black;
}
.tabBetwinLine {
    border-bottom: 1px solid gray;
    height: 1px;
    width: 30px;
}


.rangeSliderHdngBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
    width: 100%;
}
.rangeSliderHdngBox h4 {
    margin-bottom: 0;
}




.rangeslider {
    background: black;
    height: 3px !important;
}
.rangeslider__handle {
    border-radius: 22px;
    min-width: 62px !important;
    text-align: center;
    background-color: var(--main-color) !important;
    box-shadow: none !important;
    color: white !important;
}
.rangeslider__handle:after {
    background: 0;
}
.rangeslider, .rangeslider__fill {
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}
.rangeslider--horizontal {
    height: 10px;
}
.rangeslider--horizontal .rangeslider__handle {
    top: -10px;
}
.rangeslider__handle {
    background-color: #fff;
    width: 30px;
    height: 30px;
}
.rangeslider__handle {
    border-radius: 50px;
    min-width: auto;
    line-height: 33px;
    font-size: 17px;
    font-weight: 600;
    border: 1px solid var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 90px;
}
.rangeslider__fill {
    background: var(--main-color);
}
.rangeCont {
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.minus {
    margin-right: 15px;
}
.plus {
    margin-left: 15px;
}
.minus, .plus {
    background-color: var(--main-color);
    border: none;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    color: white;
    font-size: 30px;
    font-weight: lighter;
    padding: 5px 10px 10px 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.minus:hover, .plus:hover {
    background-color: #8c8a6e;
}
input[type="range"] {
    margin: 0 10px;
}


.rangeInput {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 4px;
    height: 40px;
    /* width: 60px; */
    color: black;
    font-weight: light;
    text-align: center;
}
.validError {
    color: red;
    display: none;
}
.rangeInput:focus {
    outline: none;
    box-shadow: none;
}



.cabinetNumberMainContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.cabinetNumberContainer {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
    column-gap: 15px;
    width: 100%;
}
.numCabBTxt {
    color: var(--main-color);
}
.cabinetNumberBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cabinetNumberImgBox {
    border-radius: 5px;
    height: 80px;
    width: 100%;
    max-width: 135px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    overflow: hidden;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
}
.cabinetNumberImgTxt {
    font-size: 14px;
    font-weight: normal;
    padding: 15px 0;
    text-align: center;
}
.children.active ~ .cabinetNumberImgTxt {
    font-weight: bold;
}


.slopingWallContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    width: 100%;
    margin: 30px 0;
}
.slopingWallBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.slopingWallImgBox {
    border-radius: 5px;
    height: 95px;
    width: 95px;
    max-width: 135px;
    box-shadow: #00000026 1.95px 1.95px 2.6px;
    overflow: hidden;
    text-align: center;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.slopingWallImgBox.active {
    background-color: var(--main-color);
}
.slopingWallImgTxt {
    font-size: 16px;
    font-weight: normal;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    width: 100%;
}
.children.active ~ .slopingWallImgTxt {
    font-weight: bold;
}
.children.active ~ .slopingWallImgBox {
    background-color: var(--main-color);
}
.slopingBox {
    text-align: center;
}

.interiorMainContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.interiorContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 15px;
    width: 100%;
    margin: 25px 0;
}
.interiorBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.interiorImgBox {
    border-radius: 5px;
    height: 180px;
    width: 100%;
    max-width: 98px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    overflow: hidden;
    background-color: #fff;
}
.interiorImg {
    height: 100%;
    width: 100%;
}
.interiorImgTxt {
    font-size: 14px;
    font-weight: normal;
    padding: 15px 0;
}
.children.active ~ .interiorImgTxt {
    font-weight: bold;
}
.cabModuleContent {
    display: none;
    width: 100%;
}
.cabModuleContentInner {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 15px;
    width: 100%;
}
/* Nested Tab CSS */
.showIndelingBtn {
    display: inline-block;
}
.indeling-content {
    display: none;
}
.nested-indelingBtn {
    display: inline-block;
}
.nested-indelingContent {
    display: none;
}
/* Nested Tab CSS */


.colorContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px auto;
}
.colorWrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 20px;
}
.colorOuterBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 95px;
}
.colorOuterBox p {
    line-height: 16px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.modal-img {
    width: 65%;
    display: block;
    margin: 25px auto;
}
.modal-img2 {
    height: 100px;
    width: 50%;
    object-fit: cover;
}


.swiperBox {
    position: relative;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
}
.swiper-container {
    overflow: hidden;
    padding: 10px;
}
.swiper-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80px;
    background-color: transparent;
    margin-top: 40px;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: max-content;
}
:root {
    --swiper-navigation-size: 12px;
    color: white;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -40px);
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -40px);
}
.swiper-button-next, .swiper-button-prev {
    background-color: #b8b593;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    padding: 14px;
}
.circle {
    width: 95px;
    height: 95px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: #00000026 1.95px 1.95px 2.6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#detailDoorColor1 {
    background-image: url('./images/special/Acapulco-F685ST10.jpg');
    /* background-color: #000000; */
}
#detailDoorColor2 {
    background-image: url('./images/special/Bronsgeborsteldmetaal-F528ST20.jpg');
    /* background-color: #272d30; */
}
#detailDoorColor3 {
    background-image: url('./images/special/ChicagobetondonkergrijsF187ST9.jpg');
    /* background-color: #f3f4f1; */
}
#detailDoorColor4 {
    background-image: url('./images/special/Chicagobetonlichtgrijs-F186ST9.jpg');
    /* background-color: #d9c8b8; */
}
#detailDoorColor5 {
    background-image: url('./images/special/Goudgeborsteldmetaal-F527ST20.jpg');
    /* background-color: #b7afa3; */
}
#detailDoorColor6 {
    background-image: url('./images/special/Kristalmarmer-F800ST9.jpg');
    /* background-color: #eee5de; */
}
#detailDoorColor7 {
    background-image: url('./images/special/LinnenantracietF433ST10.jpg');
    /* background-color: #d3d7d6; */
}
#detailDoorColor8 {
    background-image: url('./images/special/Linnentaupe-F424ST10.jpg');
    /* background-color: #928b8b; */
}
#detailDoorColor9 {
    background-image: url('./images/wood/Casellaeikkastanjebruin-H1369ST40.jpg');
    /* background-color: #4c4748; */
}
#detailDoorColor10 {
    background-image: url('./images/wood/Eucalyptusdonkerbruin-H3043ST12.jpg');
    /* background-color: #968a81; */
}
#detailDoorColor11 {
    background-image: url('./images/wood/Halifaxeiknatuur-H1180ST37.jpg');
    /* background-color: #786e5e; */
}
#detailDoorColor12 {
    background-image: url('./images/wood/Halifaxeiktabak-H1181ST37.jpg');
    /* background-color: #575f3b; */
}
#detailDoorColor13 {
    background-image: url('./images/wood/Norwicheik-H3003ST19.jpg');
    /* background-color: #545d57; */
}
#detailDoorColor14 {
    background-image: url('./images/wood/Vicenzaeik-H3157ST12.jpg');
    /* background-color: #9e3d1c; */
}
/* #detailDoorColor15 {
    background-color: #22313f;
}
#detailDoorColor16 {
    background-color: #abbcc4;
}
#detailDoorColor17 {
    background-color: #fae5c8;
}
#detailDoorColor18 {
    background-color: #668eae;
}
#detailDoorColor19 {
    background-color: #b5ba9b;
}
#detailDoorColor20 {
    background-color: #d48b2f;
} */

#designColor1 {
    background-image: url('./images/special/Acapulco-F685ST10.jpg');
}
#designColor2 {
    background-image: url('./images/special/Bronsgeborsteldmetaal-F528ST20.jpg');
}
#designColor3 {
    background-image: url('./images/special/ChicagobetondonkergrijsF187ST9.jpg');
}
#designColor4 {
    background-image: url('./images/special/Chicagobetonlichtgrijs-F186ST9.jpg');
}
#designColor5 {
    background-image: url('./images/special/Goudgeborsteldmetaal-F527ST20.jpg');
}
#designColor6 {
    background-image: url('./images/special/Kristalmarmer-F800ST9.jpg');
}
#designColor7 {
    background-image: url('./images/special/LinnenantracietF433ST10.jpg');
}
#designColor8 {
    background-image: url('./images/special/Linnentaupe-F424ST10.jpg');
}

#woodColor1 {
    background-image: url('./images/wood/Casellaeikkastanjebruin-H1369ST40.jpg');
}
#woodColor2 {
    background-image: url('./images/wood/Eucalyptusdonkerbruin-H3043ST12.jpg');
}
#woodColor3 {
    background-image: url('./images/wood/Halifaxeiknatuur-H1180ST37.jpg');
}
#woodColor4 {
    background-image: url('./images/wood/Halifaxeiktabak-H1181ST37.jpg');
}
#woodColor5 {
    background-image: url('./images/wood/Norwicheik-H3003ST19.jpg');
}
#woodColor6 {
    background-image: url('./images/wood/Vicenzaeik-H3157ST12.jpg');
}

#regularcolor1 {
    background-image: url('./images/regularColors/Kasjmiergrijs - U 702 ST9.jpg');
}
#regularcolor2 {
    background-image: url('./images/regularColors/Koolstofgrijs - U 968 ST9.jpg');
}
#regularcolor3 {
    background-image: url('./images/regularColors/Lavagrijs - U 741 ST9.jpg');
}
#regularcolor4 {
    background-image: url('./images/regularColors/Lichtgrijs - U 708 ST9.jpg');
}
#regularcolor5 {
    background-image: url('./images/regularColors/Oesterbeige - U 216 ST9.jpg');
}
#regularcolor6 {
    background-image: url('./images/regularColors/Parelgrijs - U 763 ST9.jpg');
}
#regularcolor7 {
    background-image: url('./images/regularColors/Steengrijs - U 727 ST9.jpg');
}
#regularcolor8 {
    background-image: url('./images/regularColors/Stofgrijs - U 732 ST9.jpg');
}
#regularcolor9 {
    background-image: url('./images/regularColors/Taupe grijs - U 750 ST9.jpg');
}
#regularcolor10 {
    background-image: url('./images/regularColors/Wit - W1000 ST9.jpg');
}
#regularcolor11 {
    background-image: url('./images/regularColors/Zandbeige - U 156 ST9.jpg');
}
#regularcolor12 {
    background-image: url('./images/regularColors/Zwart - U 999 ST9.jpg');
}

#colorRailAluminium {
    background-image: url('./images/railColors/aluminium.jpg');
}
#colorRailchampagne {
    background-image: url('./images/railColors/champagne.jpg');
}
#colorRailgoud {
    background-image: url('./images/railColors/goud.jpg');
}
#colorRailgrafiet {
    background-image: url('./images/railColors/grafiet.jpg');
}


.mpWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: max-content;
}
.mpMinus, .mpPlus{
    text-align: center;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
    background-color: lightgray;
    padding: 0 20px;
    color: #000 !important;
}
.kledMinus, .kledPlus{
    text-align: center;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
    background-color: lightgray;
    padding: 0 20px;
    color: #000 !important;
}
.sierraMinus, .sierraPlus{
    text-align: center;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
    background-color: lightgray;
    padding: 0 20px;
    color: #000 !important;
}
.mpMinus {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.mpPlus {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.kledMinus {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.kledPlus {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.sierraMinus {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.sierraPlus {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.mpNum{
  pointer-events: none;
  background-color: white;
  padding: 10px 20px;
}
.kledNum{
  pointer-events: none;
  background-color: white;
  padding: 10px 20px;
}
.sierraNum{
  pointer-events: none;
  background-color: white;
  padding: 10px 20px;
}
.extraYesNoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.extraOpties {
    background-color: white;
    /* border: 1px solid black; */
    border-radius: 8px;
    padding: 5px 25px;
    font-size: 18px;
    cursor: pointer;
}

.selectOuterDiv {
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.extraOpSelect {
    padding: 15px 40px 15px 15px;  /* Adjusted padding: right padding set to 40px */
    background: url('../assets/cabImages/selectIcon.png') no-repeat right 15px center #e2e2e2;
    color: #000;
    outline: 0;
    border: 0;
    border-radius: 50px;
    /* font-weight: 700; */
    width: 90%;
    appearance: none;
    margin: 20px auto 30px auto;
    cursor: pointer;
}
.extraOpSelect>option {
    padding: 10px;
    color: black;
}
.designCheckBoxLabel {
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    padding-left: 20px !important;
}
.designCheckBox {
    height: 25px !important;
    width: 25px !important;
    box-shadow: none !important;
}
.designCheckBox:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.form-check-input:focus {
    border-color: var(--main-color);
    outline: 0;
}
.calculate {
    position: relative;
}
.infoInnerImgBox {
    position: absolute;
    top: 4px;
    right: 4px;
}
.modalCloseBtn {
    background-color: var(--main-color);
    color: white;
}
.modalCloseBtn:hover {
    background-color: var(--main-color);
    color: white;
}
.dNone {
    display: none;
}

.designLightAccHeader {
    background-color: lightgray !important;
    font-weight: bold;
    border-radius: 30px !important;
}

.accordion-button {
    font-size: 24px;
}
/* .accordion-button::after {
    background-color: #b8b593;
    border-radius: 50%;
    padding: 10px;
} */

.detailTabContent {
    display: none;
}
.quoteBtnBox {
    position: absolute;
    right: 20px;
    bottom: 10px;
}
.quoteBtn {
    background-color: var(--main-color);
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    /*font-weight: 600;*/
    font-size: 16px;
    padding: 7px 7px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    column-gap: 3px;
    cursor: pointer;
}
.quoteBtn img {
    width: 30px;
}

.moveBtnsDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
}
.accPrevBtn {
    background-color: #fff;
    color: #000;
    float: left;
    width: 165px;
    border-radius: 50px;
    border: 0;
    text-transform: uppercase;
    font-size: 18px;
    padding: 4px;
}
.accNextBtn {
    background-color: #adab8c;
    color: white;
    float: right;
    width: 165px;
    border-radius: 50px;
    border: 0;
    text-transform: uppercase;
    font-size: 18px;
    padding: 4px;
}

/* Toggle Switch Button CSS */
.switch {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    border-radius: 20px;
    background: #dfd9ea;
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    cursor: pointer;
    margin-bottom: 6px;
}
.switch::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fafafa;
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:active::before {
    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
}
input:checked + .switch {
    background: #adab8c;
}
input:checked + .switch::before {
    left: 27px;
    background: #fff;
}
input:checked + .switch:active::before {
    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);
}
/* Toggle Switch Button CSS */


.children.active {
    border: 2px solid black;
}

.tooltipBtn {
    background-color: #8d8f8e;
    color: #ffffff;
    font-weight: bold;
    padding: 7px;
    line-height: 20px;
    /* height: 20px;
    width: 20px; */
    overflow: hidden;
    opacity: 0.5;
    border-radius: 100%;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Color Accordion CSS */

.myAccordion .myAccordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.myAccordion .myAccordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid var(--main-color);
}

.myAccordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  /* color: #7288a2; */
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.myAccordion button:hover,
.myAccordion button:focus {
  cursor: pointer;
  color: var(--main-color);
}

.myAccordion button:hover::after,
.myAccordion button:focus::after {
  cursor: pointer;
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.myAccordion button .myAccordion-title {
  padding: 1em 1.5em 1em 0;
  color: black;
}

.myAccordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  color : #000 !important;
}

.myAccordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.myAccordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.myAccordion button[aria-expanded='true'] {
  color: var(--main-color);
}
.myAccordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.myAccordion button[aria-expanded='true'] + .myAccordion-content {
  opacity: 1;
  max-height: 400px;
  overflow-y: auto;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.myAccordion .myAccordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.myAccordion .myAccordion-content p {
   font-size: 15px;
   font-weight: 300;
}
/* Color Accordion CSS */
.modalTabsContent {
    display: none;
}

.disabled {
    pointer-events: none; /* Prevents clicking */
    opacity: 0.5;        /* Makes it look disabled */
    user-select: none;
}
#priceTotal {
    font-size: 40px;
}
.euroSign {
    font-size: 40px;
}

/* GHAZALI CSS */


.code {
    display: block;
}
.grab {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.grab:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: sans-serif;
  font-size: 16px;
}

.custom-checkbox input[type="checkbox"] {
  appearance: none;
  width: 25px;
  height: 25px;
  border: 2px solid #333;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-checkbox input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  top: 3px;
  left: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.custom-checkbox input[type="checkbox"]:checked::before {
  opacity: 1;
}

@media(max-width: 992px){
    
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    main{
        grid-template-columns: 100%;
        grid-template-rows: unset;
        height: 100dvh;
        overflow: hidden;
    }
    /* .fbh{*/
    /*    height: 100dvh;*/
    /*}*/
    .uiDiv{
        order: 2;
        height: 47dvh;
        padding: 15px;
        overflow-y: auto;
        position: unset;
    }
    #iframeDiv{
        order: 1;
        height: 40dvh;
        overflow: hidden;
    }
    .iconsDivTech{
        display: grid;
        grid-template-columns: auto auto;
        left: 10px;
        top: unset;
        transform: unset;
        bottom: 5%;
        gap: 10px;
        position: absolute;

    }
    .iconsDivBg{
        position: absolute;
        left: 50%;
        top: 25px;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 10px;
    }
    .iconDiv .text{
        left: 0;
    }
    .iconsDivTech .text{
        left: calc(100% + 10px);
        top: 3px;
    }
    .iconDiv{
        padding: 5px;
        border-radius: 7px;
    }
    .iconsDiv img {
        max-width: 20px;
    }
    .colorsDiv .color {
        width: 63px;
        height: 63px;
    }
    .accordion-button,.priceDiv button{
        font-size: 16px;
    }
    .typesOfDoorsText {
        font-size: 14px;
    }
    .priceDivRight {
        padding: 0 !important;
    }
    
    .hi{
        justify-content: center;
    }
    #firstIcon {
        left: 0;
        top : -30px;
    }
    #secondIcon {
        left: 50px;
    }
    #thirdIcon {
        left: 0;
        top : 50px;
    }
    #fourthIcon {
        left: 50px;
    }
    
    .priceDiv{
        grid-template-columns: 1fr;
        bottom: 45vh;
        width: 100%;
        z-index: 99;
        padding: 0px 35px 0px 35px;
        padding: 15px;
        z-index: 1;
        visibility: visible;
        bottom: 0;
        left: 0;
        height: 13dvh;
        order: 3;
        grid-column: unset;
       
    }
    
    #formModalContent h1{
        font-size: 26px;
        padding-bottom: 10px;
    }
    
    .priceDiv span{
        font-size: 12px;
    }
    #price {
        font-size: 38px;
        line-height: 35px;
    }
    .fm{
        width: 250px;
    }
    .priceDiv div:last-child{
        padding: 0;
    }
    .priceDiv img {
        max-width: 26px;
    }
    .logoDiv img{
        max-width: 100%;
    }
    #accordionExample{
        height: auto;
    }
    .modal .logoDiv img {
        max-width: 100%;
    }
    #formModalContent form {
        padding: 15px;
    }
    #formModalContent .mb-4{
        margin-bottom: 15px;
    }
    .accordion-item {
        position: relative;
        overflow: hidden;
        max-height: max-content !important;
        padding: 0px;
    }
    .priceDiv button{
       padding: 15px 50px; 
    }
    
    .priceDiv div:last-child {
        justify-content: right;
    }
    
    .accordion-collapse {
        transition: max-height 0.5s ease-out;
    }
    .accordion-body {
        height: auto;
        /* height: 350px; */
        overflow: auto;
        scrollbar-width: none;
        /* for IE, Edge and Firefox */
        -ms-overflow-style: none;
        scrollbar-width: none;  /* Firefox */
    }
    .accordion-body::-webkit-scrollbar{
        display: none;
    }
    .cabModuleContentInner {
        justify-content: center;
    }
}


@media(max-width: 568px){
    .uiDiv .logoDiv{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        z-index: 9;
        height: 65px;
        display: none;
    }
    .iconsDivBg{
        top: 80px;
    }

    .swiperBox {
        max-width: 300px;
    }
    .uiDiv {
        padding: 4px;
        /*padding-bottom : 50%;*/
    }
    .iconsDivBg {
        top: 22px;
    }

    /* GHAZALI QUERIES */
    
    .tabNumSpan {
        height: 30px;
        width: 30px;
        font-size: 22px;
    }
    .tabNameTxt {
        font-size: 18px;
    }
    .tabBetwinLine {
        width: 15px;
    }
    .tabBetwinLine {
        font-size: 18px;
    }
    .slopingWallContainer {
        gap: 10px;
    }
    .swiperBox {
        max-width: 280px;
    }
    .accordion-body {
        padding: 10px;
    }
    .colorWrapper {
        column-gap: 15px;
    }
    .slopingWallImgBox {
        height: 90px;
        max-width: 90px;
    }
    .moveBtnsDiv {
        padding: 20px 10px 0 10px;
    }
    .accNextBtn {
        width: 130px;
    }
    .accPrevBtn {
        width: 130px;
    }
    .cabinetNumberContainer {
        justify-content: center;
    }
    .quoteBtnBox {
        bottom: 5px;
        right: 5px;
    }
    .quoteBtn {
        padding: 5px 10px;
    }
    /* GHAZALI QUERIES */

    /* Faraz Work */
    .switch {
        width: 35px;
        height: 15px;
    }
    .switch::before {
        width: 13px;
        height: 13px;
    }
    input:checked + .switch::before {
        left: 21px;
    }
    .rangeSliderHdngBox h4 {
        font-size: 1.2rem;
    }
    .switchBox span {
        font-size: 12px;
    }
    .priceDivRight div {
        font-size: 12px;
    }
    #priceTotal {
        font-size: 26px;
    }
    .euroSign {
        font-size: 26px;
    }
    #priceTotal + p {
        font-size: 13px;
    }
    .priceDiv button {
        padding: 4px 15px;
    }
    #nextBtn1 {
        margin-right: 10px;
    }
    .priceText {
        font-size : 14px;
    }
}