*{box-sizing: border-box; padding: 0px; margin: 0px;}
:root{
  --theme-blue: #0d6efd;
  --stripepartition: rgba(177, 177, 177, 0.6);
}
img{max-width: 100%; max-height: 100%;}


/* =================================================== */
#loader{position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; z-index: 1000; display: block;} 
.loader_center{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}
.cube-loader {
  position: relative;
/* u can choose any size */
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.cube-loader .cube-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
  transform-style: preserve-3d;
}

.cube-loader .cube-wrapper .cube-span {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
                                     /* width 75px / 2 = 30px */
  transform: rotateY(calc(90deg * var(--i))) translateZ(30px);
  background: hsla(0, 100%, 95%, 1);
  background: linear-gradient(to bottom, #0d6efd 1%,#fff 99%);
  
  
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 );
}

.cube-top {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom, #0d6efd 1%,#fff 99%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 );
                      /* width 75px / 2 = 30px */
  transform: rotateX(90deg) translateZ(30px);
  transform-style: preserve-3d;
}

.cube-top::before {
  content: '';
  position: absolute;
/* u can choose any size */
  width: 60px;
  height: 60px;
  background: hsla(0, 100%, 95%, 1);
  background: linear-gradient(to bottom, #0d6efd 1%,#fff 99%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 );
  background: linear-gradient(to bottom, #0d6efd 1%,#fff 99%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 );
  transform: translateZ(-90px);
  filter: blur(10px);
  box-shadow: 0 0 10px #323232,
              0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
              0 0 30px #323232,
              0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
}
.cube-loader img{max-width: 40px;}
.taco-container{display: flex; justify-content: center; align-items: center; height:100%;}  
/* ===========================================================  */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
input[type="text"]:focus, input[type="text"]:focus{border-color:  var(--theme-blue);}
select{height: 45px; border: 1px solid #d1d1d1; padding: 0px 15px; width: 100%;}
main{max-width: 2100px;}
input:not(input[type="radio"], input[type="radio"]){height:45px; border: 1px solid #ccc; border-radius: 2px; width: 100%; padding: 0px 20px;}
p{margin-bottom: 5px; font-size: 16px;}
input:focus{outline: none; box-shadow: none; border-color: var(--theme-blue);}

header{padding:0px 50px; margin-bottom: 20px; background-color: #303d81;}
.header_logo{ max-width: 100px;padding: 10px 15px;background: #fff;}
.sub_heading{font-size: 16px; font-weight: bold; text-transform: capitalize;}
h6{text-transform: capitalize;}

.left_section_col{width: 500px; display: inline-block; vertical-align: top; position: sticky; top:20px; padding: 10px 1px 10px 10px;}
.scroll-css{height: calc(100vh - 150px); overflow: auto;}
.right_section_col{width: calc(100% - 525px); display: inline-block; vertical-align: top; padding: 10px 1px 10px 20px;}
.cursor-pointer{cursor: pointer;}


.image_div{width: 100%;}
.your_door_design{background-color: rgb(234, 250, 255);  border: 1px solid rgb(18, 183, 185); max-width: 370px; text-align: center;}
.select_size_btn button{padding: 10px 20px; font-size: 18px; font-weight: 500;}
.scroll-css::-webkit-scrollbar { width: 0.3em;}
.scroll-css::-webkit-scrollbar-track {background-color: #eee;}
.scroll-css::-webkit-scrollbar-thumb {background-color: var(--theme-blue); border-radius: 30px;}

#type_of_doors{min-width: 140px;}
.type_of_doors{gap: 20px;}
.buttons button{background-color: rgb(248, 249, 250); border: 2px solid #ddd; transition: 0.3s; border-radius: 3px; min-width: 100px; padding-left:5px; padding-right: 5px; text-align: center;}
.buttons button:hover{border-color: #aaa; background-color: #e9e9e9;}
.buttons button.selected{border-color: var(--theme-blue); background-color: #e9e9e9;}
.a_btn{padding: 10px 15px; border-radius: 6px; background-color: var(--theme-blue); color: #fff; text-transform: capitalize;text-decoration: none; transition: 0.3s; display: inline-block;vertical-align: middle;}

.a_btn:hover{background-color: #0b5ed7; color: #fff;}
.collection_btn button{color: rgb(13,110,253); background-color: #fff;  border: none; border-radius: 2px; position: relative; border:solid 2px transparent; padding: 10px 20px; font-size: 16px; border: 2px solid #d1d1d1;}
.collection_btn button.selected, .collection_btn button:hover{color: #212529; border-color: var(--theme-blue); }
.collection_btn button::after {content:none; position: absolute; left: 0px; right: 0px; bottom: -3px; width: calc(100% - 2px); height: 5px; }
.collection_btn button:hover::after, .collection_btn button.selected::after{background-color: #fff;}
.gap_10{gap: 10px;}
.door_family{border: 2px solid #d1d1d1; text-align: center; background-color: rgb(248, 249, 250); border-radius: 6px; cursor: pointer; height: 100%;}
.door_family:hover{border-color: var(--theme-blue);}
.door_family .family_img{width:100%; padding-bottom:10px;}
.door_family .family_img img{width: 100%;}
.label_big_btn{display: block; position: relative;}
.label_big_btn > div{border: 2px solid #d1d1d1; text-align: center; background-color: rgb(248, 249, 250); border-radius: 6px;}
.label_big_btn input{width: 100%; height: 100%; position: absolute; opacity: 0.001;top: 0; left: 0; right: 0; bottom: 0;}
.label_big_btn input:checked + div{border-color: var(--theme-blue);} 
#panel_type .door_catogary{border: 2px solid #d1d1d1; text-align: center; padding: 10px; cursor: pointer; height: 100%;}
#panel_type .door_catogary:hover{border-color: var(--theme-blue);}
.model_number_col{border: 2px solid #d1d1d1; width: 150px; aspect-ratio: 1; padding:20px; border-radius: 50%; cursor: pointer; transition: 0.1s ease-in-out;}
.model_number_col_inr{/*display: flex;*/ flex-direction: column; justify-content: center; align-items: center;}
.model_number_col.selected{color: #fff; background-color:#303d81 !important; border-color: gold !important;}
.model_number_col.selected span{background-color: gold; color: #000;}
.model_number_col:hover{border-color: var(--theme-blue);}
.model_number_col p{font-size: 18px; margin-left: auto; margin-right: auto;}
.model_number_col p.model_num{/*text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 15px; height: 45px; */}
.model_number_quality_bar li{list-style: none;}
.left_btns{display: none;}
.model_number_img_col_inr{background-color: rgb(234, 250, 255); aspect-ratio: 1; padding: 15px;}
#model_number_img{width: fit-content;}
.select_boxes ul{display: grid; grid-template-columns: auto auto auto auto;background-color: #eafaff; width: 100%; list-style: none; align-items: center; margin-bottom: 0px !important; padding:0px 10px !important;}
.select_boxes ul li{border: 2px solid #d1d1d1; height: 65px; cursor: pointer; background-color: #fff;}
.select_boxes ul li.selected{border-color: var(--theme-blue);}
.image_grid_parent.append_grid ul li.i_am_selected{ background-size: 100% !important; position: relative;}
.image_grid_parent.append_grid ul li.i_am_selected img:not(.for_glass){position: absolute; z-index: 2; width: 100%; height: 100%; background-size: contain; left: 0; top: 0; bottom: 0; right: 0; display: block;}
.image_grid_parent.append_grid ul li.i_am_selected span{width:calc(100% - 5px); height:calc(100% - 5px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-size: cover !important; z-index: 1; display: block;}
.image_grid_parent.append_grid ul li .myCanvas{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 1px); height: calc(100% + 3px); z-index: 10;}
.time_less_data{ text-align: center;}
ul{padding: 0px; margin: 0px;}
.small_list ul{display: flex; flex-wrap: wrap; gap: 10px;}
.small_list ul li{list-style: none; padding: 5px; border:2px solid #d1d1d1; text-align: center; width: 100px; cursor: pointer; display: inline-block; vertical-align: top;}
.small_list ul li:hover{border-color: var(--theme-blue);}
#select_color.small_list ul li:hover span{transform: scale(1.1);}
.error-border{border-color: #f00 !important;}
#select_color.small_list ul li span{ aspect-ratio:1; display: block; border-radius: 50%; margin-bottom: 10px; border: 5px solid #eafaff; box-shadow: 0 5px 10px #ddd; transition: 0.3s ease-in-out;}
.color_img_btn{ border-radius: 50%; overflow: hidden; aspect-ratio: 1; margin-bottom: 10px; border: 5px solid #eafaff; box-shadow: 0 5px 10px #ddd; transition: 0.3s ease-in-out;}
#select_color.small_list ul li:hover .color_img_btn{transform: scale(1.1);}

#window_glass ul li > div{margin-bottom: 5px;}
#window_glass ul li p{font-size: 14px;}
.small_list ul li p{margin-bottom: 0px !important; font-size: 15px;}
.button_type_li{line-height: normal;}
.button_type_li ul{list-style-type: none; display: inline-flex;flex-wrap: wrap; justify-content: start; align-items: center; gap: 8px;}
.button_type_li ul li, .button_type_label label span{background-color: rgb(248, 249, 250); border: 2px solid #ddd; transition: 0.3s; padding:7px 10px; cursor: pointer; display: inline-block; vertical-align: middle; text-transform: capitalize;}
.button_type_li ul li:hover, .button_type_label label span:hover{border-color: var(--theme-blue); background-color: #e9e9e9;}
.button_type_li ul li.selected , .button_type_label label input:checked + span{border-color: var(--theme-blue); background-color: #e9e9e9;}
.button_type_label label{position: relative;}
.button_type_label label input{position: absolute; width: 100%; height: 100%;opacity: 0.001;top: 0; }
.rounder-theme{border-radius: 3px;}


.lock_bar ul > li{ width: 160px; text-align: center;}
.lock_bar li > div{height: 100%; }
.lock_bar li > div >div{margin-bottom: 15px; }
.lock_bar p{font-size: 14px;}
.row_gap_20{row-gap: 20px;}

.selected{border: 2px solid var(--theme-blue); border-color: var(--theme-blue) !important; font-weight: bold;background: #303d81 !important;
color: #fff !important;}
.selected img{background-color: #fff;}
.grey_border{border: 2px solid #d1d1d1;}
.info_for_quatation p{margin-bottom: 0px !important;}

#myCanvas{position: absolute; left: 0px; top: 0; width: 100%; height: 100%;}
.door_operator{list-style-type: none; text-align: center;}
.door_operator select{width: 100%; height: 40px; padding: 0px 10px; font-size: 16px; }
.main_heading {color: #fff; padding: 0.4rem 1rem; background-color: var(--theme-blue); text-transform: capitalize; display: flex; gap: 8%; align-items: center;}
.main_heading input[type="number"]{height: 100%; max-height: 35px; max-width: 120px; padding:0px 10px; font-size: 12px; min-height: 25px;}
.according_heading{cursor: pointer; position: relative;}
.according_heading::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; width: 0px; aspect-ratio: 1;border-style: solid;
border-width: 10px 6.5px 0 6.5px;border-color: #fff transparent transparent transparent; transition: 0.4s;}
.according_heading.closed::after{transform: translateY(-50%) rotate(-180deg);}

dl, ol, ul{margin-bottom: 0px;}
ol, ul{padding-left: 0px;}
.grid_main_row{background-color: #eafaff; padding: 10px;}
.grid_buttons{width: 80px;}
.gridoverflow_wrap{width:calc(100% - 190px); overflow: auto;}
.append_grid_for_selection ul li{flex: 1;  width: 80px; height: 65px; background-color: #fff; cursor: pointer;}
.append_grid_for_selection ul li.i_am_selected{border-color: var(--theme-blue);}
.append_grid_for_selection ul li{border: 2px solid #d1d1d1;}
.grid_buttons ul li{height: 65px; display: flex; align-items: center; justify-content: center; list-style-type: none; }
.grid_buttons ul li span{height: 50px; border: 2px solid #d1d1d1; border-radius: 2px; display: flex; align-items: center; width: 100%; justify-content: center; transition: 0.3s}
.for_all_grid ul li span{cursor: pointer;}
.for_all_grid ul li span:hover{background-color: #f0f0f0;}
.border_2px{border: 2px solid #d1d1d1;}
.door_operator_col_inr{height: 100%; display: flex; gap: 10px; padding: 10px; align-items: center;}
.door_operator_col_inr.selected{background-color: #f0f0f0;}
.door_operator_logo{width: calc(55% - 10px);}
.door_operator_select_box{width: 45%;}
.price_details sup{font-size: 1.2rem;}
#info_for_quatation >* {text-transform: capitalize;}
.door_catogary_btn{cursor: pointer; padding:10px 15px;}

.custom_size{padding:15px 0px;}
.custom_size_input_div{width: calc(100% - 50px);display: inline-flex; gap: 2px; vertical-align: middle;}
 body .custom_size_input_div input{width: calc(100% - 95px);}
.custom_size_input_div button{width: 45px; padding: 0px;  background-color: #7a7a7a; color: #fff; position: relative; outline: none; border: 1px solid #d1d1d1; border-radius: 3px;}
.custom_size .ftinch{display: inline-flex;border: 1px solid #d1d1d1;height:100%;vertical-align: middle;justify-content: center;align-items: center; background-color: #303d81;color: #fff;font-weight: 500;  border-radius: 4px; max-height: 45px; width: 45px;}
.strut_type{display: flex;flex-wrap: wrap; align-items: center; gap: 10px;}
ul li{list-style-type: none;}

.custom_size_input_div button::before{position: absolute; left:50%; transform: translateX(-50%); top: 4px; background-color: #7a7a7a; color: #fff;font-weight: 600;font-size: 35px; line-height: 27px; }
.custom_size_input_div button.plus-btn::before{content: "+";}
.custom_size_input_div button.minus-btn::before{content: "-"; top:5px;}

.createGrid ul{display: flex;}
#create_img > ul > li{position: relative; margin: 2px 0px;}
.createImageimg{display:flex; position: relative;}
.append_grid{position: relative;}
.bg_img_main, .bg_img_main_canvas{position: absolute;  left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: -1;}
.bg_img_main img{width: 100%; height: 100%;}
.bg_img_main_canvas{z-index: 0 !important; }


.window_img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(85%); height: calc(80%); z-index: 10; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;}
.window_img.comercial_window_24x6{width: calc(60%); height: calc(40%); border-radius: 7px;  background-size: calc(100% - 10px) !important;}
.window_img.comercial_window_24x12{width: calc(60%); height: calc(60%); border-radius: 7px;  background-size: calc(100% - 10px) !important;}
.window_img.comercial_window_36x16{width: calc(80%); height: calc(70%); border-radius: 7px; background-size: calc(100% - 10px) !important;}
.window_img.comercial_window_94{width: calc(85%); height: calc(40%); border-radius: 7px;  background-size: calc(100% - 10px) !important;}
.window_img.comercial_window_95{width: calc(85%); height: calc(40%); border-radius: 7px;  background-size: calc(100% - 10px) !important;}
.window_img.comercial_window_105{width: calc(85%); height: calc(40%); border-radius: 7px;  background-size: calc(100% - 10px) !important;}


.window_img img{ width: 100%; height: 100%; display: flex;}
.window_img canvas{position: absolute; z-index: 1; left: -1px; right: -1px; top: -1px; bottom: -1px; width: calc(100% + 2px); height: calc(100% + 2px);}
.alluminum_fullview .window_img{ width: calc(95%); height: calc(90%); }
#create_img.alluminum_fullview{padding: 13px;}

.height21{padding: 5px 0px;}
.height21:first-child{padding-top:0px;}
.height21:last-child{padding-bottom:0px;}

.height24{padding: 10px 0px;}
.height24:first-child{padding-top:0px;}
.height24:last-child{padding-bottom:0px;}

.modelDesc{font-size: 14px; display: block; margin-bottom: 8px;}
.image_grid_parent.append_grid{display: none;}
.backdoorImg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 10; display: none;}


.backdoorImg img{width: 100%;}
#create_img{padding: 10px; overflow: hidden;}
#create_img > ul {position: relative; display: flex; z-index: 10;}
#create_img > ul::before{content: ""; position: absolute; width: 200%; height: 0.5px; left: -50%; bottom:0px; z-index: 10; background-color:var(--stripepartition);}
#create_img > ul:last-child::before{content: none;}

.bigpadding{padding-left: 20px; padding-right: 20px;}
.accordian_heading {cursor: pointer; position: relative;}
.accordian_heading h5{margin-bottom: 0px;}

.accordian_heading::after{content: ""; position: absolute; width: 10px; height: 10px; border:3px solid #fff; top: 13px; transform: rotate(45deg); right: 1rem;border-top: none;border-left: none; transition: 0.3s;}
.accordian_heading.closed::after{transform: rotate(225deg); top: 16px;}
.accordian_data{padding: 15px;}
.custom_row{display: flex; flex-wrap: wrap; gap: 15px;}
.door_collection_family_col{width: 160px;}
#panel_type .door_collection_family_col{width: 200px;}
/* for padding  */
#create_img.long_10_8{padding-top: 5px; padding-bottom: 5px;}
#create_img.long_10_8 >ul{gap: 15px;  padding-left: 50px; padding-right: 50px;}

.mobileImgshowbtn{display: none;}
.custom_button{padding: 6px 20px; background-color: var(--theme-blue); border: none; outline: none; color: #fff; cursor: pointer; transition: 0.3s; font-size: 18px; text-transform: uppercase;}
/* .custom_button:hover{background-color:blue;} */

h5{font-size: 20px !important; margin-bottom: 5px;}
h6{font-size: 18px !important;}
.door_collection_family_col .img{margin-bottom: 8px;}
.quality_of_model{padding: 0px 8px; background-color: grey; color: #fff; font-weight: bold; text-transform: capitalize;}
.left_section_inr{padding: 15px;}
.mobile_visual_notice{display: none;}
.info_for_quatation span{color: #0000EE;}
.door_qty_div{width: 150px;}

.tool-tip{position: relative; display: inline-block;  cursor: pointer; z-index: 5;}
.tool-tip::after{position: absolute; content: ""; width: 150px; height: 100px; background-color: rgb(234, 250, 255); border-radius: 6px; box-shadow: 0px 3px 9px rgba(0,0,0,0.12), 0px 3px 18px rgba(0,0,0,0.08); clip-path: circle(0% at 95% 11%);
  transition: all ease-in-out .3s;bottom: 0px; right: 10px; z-index: 10; padding: 10px; font-size: 14px;}
  .tool-tip::before{width: 50px; height: 50px; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
  .tool-tip:hover::after{clip-path: circle(75%); content: "this is add to cart";}
  .add_cart_tool::after{bottom: auto; top: 100%;}

  .bg_icon_black::before{color: #0D6EFD ;}
  .assosiated_from_model{display: none;}
  .trackdata, .track_suggestiondata{display: flex !important;}
.max-w-600{max-width: 600px;}

.custom_button {

  border: 1px solid #0E1822;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: var(--theme-blue);
  background-size: 200%;
  background-position: 200%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  transition-property: background-position, border, color;
  position: relative;
  z-index: 1;
  display: inline-block; text-decoration: none;
 }
 
 .custom_button:hover {
  border: 1px solid #FF4655;
  color: white;
  background-position: 40%;
 }
 
 .custom_button:before {
  content: "";
  position: absolute;
  background-color: #0E1822;
  width: 0.2rem;
  height: 0.2rem;
  top: -1px;
  left: -1px;
  transition: background-color 0.15s ease-in-out;
 }
 
 .custom_button:hover:before {
  background-color: white;
 }
 
 .custom_button:hover:after {
  background-color: white;
 }
 
 .custom_button:after {
  content: "";
  position: absolute;
  background-color: #FF4655;
  width: 0.3rem;
  height: 0.3rem;
  bottom: -1px;
  right: -1px;
  transition: background-color 0.15s ease-in-out;
 }
 
 .button-borders {
  position: relative;
  width: fit-content;
  height: fit-content;
  display: inline-block;
  padding: 7px;
  vertical-align: middle;
 }
 
 .button-borders:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  border: 1px solid #0E1822;
  border-bottom: 0px;
     /* opacity: 0.3; */
 }
 
 .button-borders:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border: 1px solid #0E1822;
  border-top: 0px;
     /* opacity: 0.3; */
  z-index: 0;
 }
 
 .shape {
  fill: #0E1822;
 }


 .input-group {
  position: relative;
 }
 
 .input {
  transition: border 150ms cubic-bezier(0.4,0,0.2,1);
 }
 
 .user-label {
  position: absolute;
  left: 15px;
  color: #e8e8e8;
  pointer-events: none;
  transform: translateY(1rem);
  transition: 150ms cubic-bezier(0.4,0,0.2,1);
 }
 
 .input:focus, input:valid {
  outline: none;
  border: 1.5px solid var(--theme-blue);
 }
 
 .input:focus ~ label, input:valid ~ label {
  transform: translateY(-50%) scale(0.8);
  padding: 0 .2em;
  color: var(--theme-blue);
 }
.rating-star{display: flex; width: 85%; position: relative; height: 40px; margin: auto; margin-top: -3px;}
.rating-star li{position: absolute;}

.rating-star li i::before{font-size: 15px;}
.rating-star li:first-child{top: -10px; left: 0;}
.rating-star li:nth-child(2){top: 3px; left: 17px;}
.rating-star li:nth-child(3){bottom:7px; left: 50%; transform: translateX(-50%);}
.rating-star li:nth-child(4){top:3px; right: 17px;}
.rating-star li:last-child{top: -10px; right: 0;}

.star-0 li i{color: grey;}

.star-1 li i{color: grey;}
.star-1 li:first-child i{color:gold;}

.star-2 li i{color: grey;}
.star-2 li:first-child i{color: gold;}
.star-2 li:nth-child(2) i{color: gold;}

.star-3 li i{color: gold;}
.star-3 li:last-child i{color: grey;}
.star-3 li:nth-child(4) i{color: grey;}

.star-4 li i{color: gold;}
.star-4 li:last-child i{color:grey;}
 .star-5 li i{color: gold; }

 /* quotation loader start  */

 #quotation_loader{width: 100vw; height: 100vh; position: fixed; background: rgba(0, 0, 0, 0.7); z-index: 10; display: none;}
 .quotation_loading_icon{display: flex;  height: 100%;width: 100%;  justify-content: center; align-items: center;}

 .typewriter {
  --blue: #5C86FF;
  --blue-dark: #275EFE;
  --key: #fff;
  --paper: #EEF0FD;
  --text: #D3D4EC;
  --tool: #FBC56C;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before, .typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before, .typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {
  85%, 92%, 100% {
    transform: translateY(0);
  }

  89% {
    transform: translateY(-4px);
  }

  95% {
    transform: translateY(2px);
  }
}

@keyframes slide05 {
  5% {
    transform: translateX(14px);
  }

  15%, 30% {
    transform: translateX(6px);
  }

  40%, 55% {
    transform: translateX(0);
  }

  65%, 70% {
    transform: translateX(-4px);
  }

  80%, 89% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(14px);
  }
}

@keyframes paper05 {
  5% {
    transform: translateY(46px);
  }

  20%, 30% {
    transform: translateY(34px);
  }

  40%, 55% {
    transform: translateY(22px);
  }

  65%, 70% {
    transform: translateY(10px);
  }

  80%, 85% {
    transform: translateY(0);
  }

  92%, 100% {
    transform: translateY(46px);
  }
}

@keyframes keyboard05 {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }

  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }

  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}

/* quotation loader end */

 .price_tooltip{position: relative;}
 .price_tooltip::before{content:attr(tooltip-data); position: absolute; padding: 3px 15px 12px; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) scale(0); border-radius: 2px;clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 56% 79%, 51% 100%, 46% 79%, 0 78%);background-color:gold;font-size: 14px; transition: 0.2s;color: black;font-weight: bold; width: max-content;}
 .price_tooltip:hover::before{  transform: translateX(-50%) scale(1)}

/* error and succes box  */
.succes_n_error{position: fixed; top: -400px;  left: 50%; transform: translateX(-50%); z-index: 100; width: 25%; min-width: 300px; max-width: 400px; background-color: #fff; transition: 0.2s; display: none;}
.show_popup.succes_n_error{top: 90px;}
.succes_n_error::before{content: ""; position: fixed; height: 100vh; width: 100vw; z-index: -1; background-color: rgba(0, 0, 0, 0.7);left: 50%; top: -90px; transform: translateX(-50%); transition: 0.3s; opacity: 0;}
.show_popup.succes_n_error::before{opacity: 1;;}
.success::before{content: "";}
.error::before{content: ""; line-height: normal; height: auto;}
.succes_n_error::after{content: ""; position: absolute; width: 90%; z-index: 1; height: 12px;  left: 50%; transform: translateX(-50%);border-radius:0px 0px 8px 8px;  bottom: -12px;}
.succes_n_error.success::after{background-color: green; box-shadow: 0px 5px 10px #609d60;}
.succes_n_error.error::after{background-color: #f00; box-shadow: 0px 5px 10px #f56f6f;}
.succes_n_error_inr{padding:50px 40px 40px; text-align: center; position: relative; z-index: 1; background-color: #fff;  border-radius: 8px; }
.mark{position: absolute;  left: 50%; transform: translateX(-50%); width: 60px; height: 60px;top: -30px; border-width: 10px; border-style: solid; border-radius: 50%;}
.success .mark{background-color: green; border-color:#ffffff70; box-shadow: 0px 0px 10px #7fdc7f;}
.error .mark{background-color: red; border-color:#ffffff70; box-shadow: 0px 0px 10px #f56f6f;}
.mark::after{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; color: #fff; font-size: 30px; font-weight: bold;}
.success .mark::after{content: "\2713";}
.error .mark::after{content: "\292B"; top: 42%;}
.popup_close_btn{font-size: 35px; line-height: 21px;text-align: center; cursor: pointer; border: 1px solid #e1e1e1; color: #7a7a7a; position: absolute; right: 10px; top: 10px; border-radius: 50%; transition: 0.2s; width: 30px; height: 30px;}
.success .popup_close_btn:hover{background-color: green;color: #fff;}
.error .popup_close_btn:hover{background-color: #f00;color: #fff;}
.succes_n_error h2{margin: 0px 0px 20px; font-size: 30px;}
.succes_n_error p{color: #575757;}
.error .success_heading{display: none;}
.error .error_heading{display: block;}
.success .error_heading{display: none;}
.success .success_heading{display: block;}

.message_succes_n_error{position: fixed; top: -400px;  left: 50%; transform: translateX(-50%); z-index: 100; width: 25%; min-width: 300px; max-width: 400px; background-color: #fff; transition: 0.2s; display: none;}
.show_popup.message_succes_n_error{top: 90px;}
.message_succes_n_error::before{content: ""; position: fixed; height: 100vh; width: 100vw; z-index: -1; background-color: rgba(0, 0, 0, 0.7);left: 50%; top: -90px; transform: translateX(-50%); transition: 0.3s; opacity: 0;}
.show_popup.message_succes_n_error::before{opacity: 1;;}
.success::before{content: "";}
.error::before{content: ""; line-height: normal; height: auto;}
.message_succes_n_error::after{content: ""; position: absolute; width: 90%; z-index: 1; height: 12px;  left: 50%; transform: translateX(-50%);border-radius:0px 0px 8px 8px;  bottom: -12px;}
.message_succes_n_error.success::after{background-color: green; box-shadow: 0px 5px 10px #609d60;}
.message_succes_n_error.error::after{background-color: #f00; box-shadow: 0px 5px 10px #f56f6f;}
.message_succes_n_error_inr{padding:50px 40px 40px; text-align: center; position: relative; z-index: 1; background-color: #fff;  border-radius: 8px; }
.message_succes_n_error h2{margin: 0px 0px 20px; font-size: 30px;}
.message_succes_n_error p{color: #575757;}

.edit_grid{width: 30px; height: 30px; position: relative; margin: 5px 5px 5px auto; display:table;border: 1px solid transparent; transition: 0.2s;}
.edit_grid::after{content: ""; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/grid_edit_icon.svg) center no-repeat;background-size: contain; padding: 5px;}
.edit_grid:hover{background-color: var(--theme-blue);}
.edit_grid.selected_edit{background-color: var(--theme-blue);}

.door_comp_and_type .door_company_select_box{width: 150px;}
.type_of_doors{width: calc(100% - 165px);}
.type_of_doors .select_box{width: 150px;}
.type_of_doors .quantity_div{width: calc(100% - 165px);}

.bi-card-list::before {
  content: "\f227";
  position: relative;
  top: -1px;
}
.bg_icon_black::before {
    color: #0D6EFD;
    position: relative;
    top: -2px;
}
.menuicon{display: none;}
.model_main_col{width: calc(100% - 315px);}
.model_image_col{width: 300px;}

.cyclage_dropdown{display: inline-block; vertical-align: top; width: calc(100% - 40px);}
.cyclage_info{width: 35px;  padding-left:5px; display: inline-block; vertical-align: middle; position: relative;}

.cyclage_info_icon{cursor: pointer; position: relative;}
.cyclage_info_icon::after{content: ''; position: absolute; top: 0; right: 0;}
.list ul li{margin-bottom: 8px; display: flex; width: max-content;}
.show_on_hover ul li strong{color:var(--theme-blue); display: inline-block; vertical-align: middle; padding-left:8px;}
.show_on_hover ul li span{text-transform: capitalize;}
.show_on_hover{transform: scale(0); border-radius: 10px; background-color: rgb(234, 250, 255); padding: 15px; position: absolute; right: 90%; top: 90%; transition: 0.3s; transform-origin:  right top; min-width: 150px; min-height: 100px; z-index: 10; box-shadow: 0 5px 10px #e7e7e7;}
.cyclage_info:hover .show_on_hover{transform: scale(1); }
.red{color: #f00;}
.blue{color: var(--theme-blue);}
.select_customer .input_box{position: relative;}
.select_customer .input_box .serach_btn{position: absolute; aspect-ratio: 1; height: calc(100% - 2px); top: 1px; right: 1px; border-left: 1px solid #d5d5d5; background-color: #e9e9e9; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; }
.select_customer .input_box .serach_btn:hover{background-color: #e2e2e2;}
.select_customer select{color: var(--theme-blue); text-transform: capitalize;}
#cutomer_search_inputbox{padding-right: 50px!important;}

.flipwindow li:nth-child(even) .window_img img{transform: scaleX(-1);}
.flipodd li:nth-child(odd) .window_img img{transform: scaleX(-1);}

#seal_price_label{color: var(--theme-blue); font-weight: 500;}

.dsp-none{display: none;}
.select_customer_box{padding: 10px 20px; border: 1px solid #d1d1d1; font-weight: normal; text-transform: capitalize;}
.remove-selection{display: inline-block; vertical-align: middle; margin: 0px 0px 3px 3px;  cursor: pointer;}
.remove-selection:hover{ color: #0000EE;}
.remove-selection i::before{font-size: 23px;}








@media only screen and (max-width: 1400px){
  .door_operator_logo {width: 100%;}
  .door_operator_select_box {width: 100%;}
}

@media only screen and (max-width: 1300px){
  .collection_btn button {padding: 10px;}
}

@media screen and (max-width: 1300px){

  .model_main_col{width: 100%;}
.model_image_col{width:100%; max-width: 300px;}

  .bi-card-list::before {top: -3px;}
  #glazing_type ul li{padding: 7px 50px;}
  
}

@media screen and (max-width: 1200px){
  header{padding: 0px 30px;}
  .door_comp_and_type .door_company_select_box { width: 97%;}
.type_of_doors {width: 100%;}
#model_number .col-lg-8.col-sm-6.col-12{width: 50%;}
#model_number .col-lg-4.col-sm-6.col-12{width: 50%;}
#doorOperator .door_operator_col_inr {padding: 7px;}
.door_operator select {padding: 5px;font-size: 12px;}
.bi-card-list::before {top: -2px;}
}

@media screen and (max-width: 1024px){

  header{padding: 0px 25px;}
  .left_section_col{position: fixed; top: 100px; left:calc(-100% - 10px); transition: 0.3s; z-index: 10; width: 100vw; background-color: rgba(0, 0, 0, 0.7) !important; height: 100vh;}
  .left_section_col .left_section_inr{width: 500px; position: absolute; left: -7px; top: 0; background-color: #fff; height: 100%;}
  .left_section_col.show{left: 0px;}
  .right_section_col{width: 100%;}

  .door_comp_and_type .door_company_select_box{width: calc(30% - 15px);}
  .type_of_doors{width: 70%;}
  .header_inr{position: relative;}
  .menuicon{display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; aspect-ratio: 1; border-radius: 4px; border: 1px solid #d1d1d1; background-color: #fff; overflow: hidden;}
  .hamburger_menu{position: absolute; width: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 3px; background-color: #000; transition: 0.3s;}
.hamburger_menu::after, .hamburger_menu::before{content: ''; position: absolute; left: 0; width: 100%; height: 100%; background-color: #000; transition: 0.3s;}
.hamburger_menu::after{top: -9px;}
.hamburger_menu::before{bottom: -9px;}

.menuicon.showing{background-color: #000;}
.menuicon.showing .hamburger_menu::after,.menuicon.showing .hamburger_menu::before, .menuicon.showing .hamburger_menu{background-color: #fff;}

.menuicon.showing .hamburger_menu::after{transform: translate(-50%, -50%) rotate(-90deg); top: 50%; left: 50%;}
.menuicon.showing .hamburger_menu{transform: translate(-50%, -50%) rotate(45deg); top: 50%; left: 50%;}
.menuicon.showing .hamburger_menu::before{transform: translateX(-100px);}
.model_main_col{width: calc(100% - 315px);}
.bg_img_main, .bg_img_main_canvas{z-index: 0;}


}

@media only screen and (max-width:768px){

  .left_section_col {width: 500px; position: static; background-color: #fff !important;}
  .left_section_col .left_section_inr {position: static; width: 100%;}

  .product_main{display: flex; flex-direction: column-reverse; flex-wrap: wrap; }
  header{position: sticky; top: 0; padding:0px 15px; margin-bottom: 10px; z-index: 10;}
  .header_logo {max-width: 48px; padding: 0px 5px;}
  .left_section_col{width: 100%; position: static; padding:0px 10px;}
  .right_section_col{width: 100%; position: static; padding: 0px 10px;}
  .scroll-css{height: auto; overflow: inherit;}
  .image_append_section{position: fixed;right:100%; top:72px;  box-shadow: 0 0 5px #ccc; border-radius: 6px; z-index: 10; transition: 0.4s ease-in-out; width: 100%; padding: 10px;}
  .bgoverlay{ min-height: 400px; display: flex;flex-direction: column; justify-content: center; padding: 10px;}
  .image_append_section.mobileswipped{ right:0;}
  .image_append_section::after{content:""; position: absolute; top:0px; width: 100%; height:100vh ;left: 0; background-color: rgba(0, 0, 0, 0.7); z-index:-1;}
  .mobileImgshowbtn{display: block; position: absolute; top:-72px; left:100%; border-radius: 4px 4px 0px 0px; box-shadow:0px -4px 5px #ccc;; width:40px; aspect-ratio: 1; background-color: rgb(234, 250, 255); transition: 0.3s;}
  .mobileImgshowbtn span{width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .mobileImgshowbtn span::after{content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-right: 2px solid var(--theme-blue);border-bottom: 2px solid var(--theme-blue); transition: 0.3s; transform:translate(-50%, -50%) rotate(-45deg);}
  .image_append_section.mobileswipped .mobileImgshowbtn{left: auto; right: 15px;}
  .image_append_section.mobileswipped .mobileImgshowbtn span::after{transform:translate(-50%, -50%) rotate(135deg);}
 
  .accordian_heading::after{top: 11px;width: 9px; height: 9px;}
  input:not(input[type="radio"], input[type="radio"]){padding: 0px 15px;height: 40px;}
  .custom_size{padding: 10px 0px;}
h5{font-size: 16px !important;}
h6{font-size: 15px !important; margin-bottom: 3px;}
p{font-size: 14px; line-height: normal;}
input:not(input[type="radio"], input[type="radio"]){font-size: 14px;}
span{font-size: 14px;}
ul li{font-size: 14px;}
.small_list ul li p{font-size: 14px;}
select{font-size: 14px; height: 40px; padding: 0px 10px;}
.select_size_btn button{font-size: 14px; padding: 6px 10px;}
.accordian_data{padding: 10px;}
.collection_btn button{font-size: 14px; padding: 6px 5px;}
.button_type_li ul li, .button_type_label label span{padding: 8px 9px;font-size: 14px;}
.model_number_img_col_inr {padding: 10px;display: flex; flex-wrap: wrap; gap: 10px; aspect-ratio: inherit; align-items: flex-start;}
.model_number_img_col_inr > span{width: 50%;}
.model_number_img_col_inr > #model_number_img{width: calc(50% - 10px);}
.model_number_col{width: 100px; padding: 10px;}
.rating-star{height: 35px; margin-top: -7px; width: 90%;}
.rating-star li:nth-child(3){bottom: 11px;}
.rating-star li i::before{font-size: 12px;}
.rating-star li:nth-child(2){top: 0; left: 13px;}
.rating-star li:nth-child(4){top: 0; right: 13px;}
#image_download_section{max-width: 500px;  margin:0px 20px 0px auto;}
.grid_buttons{width: 50px;}
.gridoverflow_wrap{width: calc(100% - 120px);}
.grid_buttons ul li{height: 50px; width: 50px;}
.append_grid_for_selection ul li{height: 50px; min-width: 30px; width: auto; max-width: 150px;}
.append_grid_for_selection{width: max-content;}
.grid_buttons ul li span{height: 40px;}
.product_main{width: 100%; padding: 0px 10px; gap: 15px;}
.custom_row{gap: 10px;}
.type_of_doors{gap:10px; width: calc(100% - 110px);}
.type_of_doors .select_box{width: 120px;}
.type_of_doors .quantity_div{width:calc(100% - 130px);}
.type_of_doors .custom_size_input_div{width:100%;}
body .custom_size_input_div input{width: calc(100% - 60px);}
.door_comp_and_type .door_company_select_box{width: 100px;}
.custom_size_input_div button.minus-btn::before{top: 3px;}
.door_comp_and_type.max-w-600{max-width: 400px;}

.door_company .select_box{width: 110px;}
.quantity_div{width: calc(100% - 120px);}
#type_of_doors{width: 100%; max-width: 180px; min-width: auto;}
.option_wrap{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.custom_size_input_div button{width:35px;}
.custom_size input[type="text"]{width: calc(100% - 70px);}
.custom_button{font-size: 16px;}
.modelDesc{margin-bottom: 0px;}
.a_btn{padding: 7px 10px; font-size: 16px;}
.left_section_inr{padding: 10px;}

.header_inr{display: flex; justify-content: space-between;}
/* .mobile_visual_notice{display: block; color: yellow; font-size: 10px; align-self: end; max-width: 300px; text-transform: capitalize;margin-left: 15px;
  margin-bottom: 10px;} */
  .mobile_visual_notice{display: block; text-align: center;}
.button-borders{padding: 5px;}
.buttons button{min-width: 80px;}
.custom_size button::before{font-size: 24px;}
.custom_size .ftinch{width: 35px;}
.custom_size_input_div{width:calc(100% - 40px);}



.popup_close_btn{border: none; }
.success .popup_close_btn:hover{background-color:inherit;color: #000;}
.error .popup_close_btn:hover{background-color:inherit;color: #000;}

.menuicon{display: none;}
/* .rating-star {
  background: url(../images/rounded_star.png) center 0px no-repeat;
  background-size: 90%;
} */

#model_number_row .model_number_col p{font-size: 11px;}
#model_number .col-lg-8.col-sm-6.col-12 {width: 100%;}
#model_number .col-lg-4.col-sm-6.col-12 {width: 100%;}

.model_main_col{width: 100%;}

}

@media only screen and (max-width: 480px){

  p{line-height: 20px;}
#image_download_section{width:100%;}
.small_list ul li{width: calc(25% - 11px);}
.small_list ul li p{font-size: 8px; line-height: 14px;}
.small_list ul li span{margin-bottom: 4px;}
.custom_size{padding: 5px 0px;}
.accordian_data{padding: 8px 10px;}
.select_size_btn.custom_row button{width: calc(25% - 6px); padding: 6px 0px; min-width: auto;font-weight: bold;}
.select_size_btn.custom_row button.selected{font-weight: 500;}
#size_button.custom_row{gap: 7px;}
.door_collection_family_col{width: calc(33.33% - 7px);}
.collection_btn button::after{content: none;}
.collection_btn button.selected, .collection_btn button:hover{border-bottom: 2px solid var(--theme-blue);}
#panel_type .door_collection_family_col{width: calc(50% - 5px);}
#panel_type .door_catogary{padding: 8px;}
.door_collection_family_col .img{margin-bottom: 3px;}
/* .model_number_col{width:calc(33.33% - 8px); padding: 5px;} */
.quality_of_model{padding: 2px 5px; line-height: normal;} 
.model_number_col_inr{gap: 2px;}
.collection_btn{border-bottom: none;}
.door_family .family_img{padding-bottom: 6px;}
.custom_button{font-size: 14px; line-height: normal;}
.small_list ul{gap: 8px;}
#model_number_row p{font-size: 13px; line-height: 18px; margin-bottom: 0px;}
.modelDesc{font-size: 13px;}
.grid_buttons ul li span{height: 35px;}
.custom_row{gap: 8px;}
.append_grid_for_selection{width: 100%;}
.lock_bar ul > li{width: calc(50% - 7px);}
.lock_bar li > div >div{margin-bottom: 5px;}
.lock_bar p{font-size: 13px; margin-bottom: 0px;}
.lock_bar ul > li img{max-width: 80px; margin: auto;}
.a_btn{font-size: 14px;}
#loader_img img{max-width: 70px;}
/* .buttons button{min-width: auto;} */
/* .door_company.custom_row, .type_of_doors.custom_row{display: inline-flex;} */

.door_comp_and_type .door_company_select_box {
  width: 100%;
}
.type_of_doors {
  gap: 10px;
  width: 100%;
}
.custom_size_input_div button::before {
  font-size: 25px;
}
/* #customSize .col-6{width: 100%;} */
/* .model_number_col {
  width: calc(50% - 8px);
  padding: 5px;
} */
#glazing_type ul li {
  padding: 7px 10px;
  width: fit-content;
}
.grid_main_row {
  padding: 5px;
}
#window_glass ul li p{font-size: 12px;}

.model_image_col{width: 100%;}



}







/* #create_img > ul > li:last-child{transform: scaleX(-1);} */