/* default css */
:root{
    --door-color: #333;
    --block-color: #333;
}
.text-orange{ color: #F65D36 !important; }
.border-orange{ border-color: #F65D36; }
.bg-orange{ background-color: #F65D36; }
.btn-orange{background-color: #F65D36;border-color: #F65D36;outline: none !important;}
.btn-orange:hover, .btn-orange:active, .btn-orange:focus{background-color: #F65D36 !important;border-color: #F65D36 !important;box-shadow: none !important; opacity: 0.5;}
.btn-orange:focus{opacity: 1;}
.placeholder-right::placeholder{ text-align: right; }

/* Chrome, Safari, Edge, Opera */
.no-updown-arrow::-webkit-outer-spin-button,
.no-updown-arrow::-webkit-inner-spin-button { -webkit-appearance: none;margin: 0; }
/* Firefox */
.no-updown-arrow { -moz-appearance: textfield; }

span.temp-count{ font-size: 0.8rem; }

/* custom-radio */
.custom-radio .uncheck{ display: block;color: #d9d9d9; }
.custom-radio .checked{ display: none;color: #d9d9d9; }
.custom-radio input:checked ~ .checkmark { border-color: #F65D36 !important; }
.custom-radio input:checked ~ .checkmark .checked{ display: block; }
.custom-radio input:checked ~ .checkmark .uncheck{ display: none; }
.custom-radio .option-text{ color: #447384; }

.checkmark .check-icon{ font-size: 24px; }

/* default-colors-palette */
.default-colors-palette .border-orange{ border-color: #F65D36 !important; }
.default-colors-palette span{ cursor: pointer; }

/* custom-accordion css */
.custom-accordion .accordion-button:not(.collapsed){ background-color: #447384;color: #fff; }
.custom-accordion .accordion-item:first-child{ border-top-left-radius: 10px;border-top-right-radius: 10px; }
.custom-accordion .accordion-item:last-child{ border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; }
.custom-accordion .accordion-item .accordion-button::after{display: none;}
.custom-accordion .accordion-item .accordion-button{ justify-content: space-between; }
.custom-accordion .accordion-item .accordion-button .arrow{ transition: 0.2s; }
.custom-accordion .accordion-header .accordion-button{outline: none !important;box-shadow: none !important;}
.custom-accordion .accordion-item .accordion-button:not(.collapsed) .arrow{ transform: rotate(180deg); }
.panel-frame-color:not(.active) .active-icon{ display: none; }
.panel-frame-color.active{ background-color: transparent !important;border-color: #d9d9d9; }
.panel-frame-color span{ cursor: pointer; }

/* info-box css */
.info-box{ position: relative; }
.info-box:before{content:"";position: absolute;top: -9px;height: 15px;width: 15px;border-top: 1px solid #d9d9d9;border-left: 1px solid #d9d9d9;background-color: #fff;transform: rotate(45deg) skew(10deg, 10deg);}
.address-zipcode-box{position: relative;}
.address-zipcode-box .error-span{ position: absolute;bottom: -25px;left: 0px; }


/* glass-designer css start */
.glass-designer{display: flex;width: 100%;height: calc(100vh - 109px);font-family: "Sarabun", sans-serif;font-weight: 400;font-style: normal;}

/* design-board */
.design-board{ display: block; padding: 50px; }

/* steps-nav css start */
.steps-nav{position: relative;display: block;width: 100%;min-height: 55px;background-color: #fff;padding: 0px 20px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.steps-nav ul{ position: relative;overflow: hidden;overflow-x: auto;list-style-type: none;display: flex;justify-content: center;padding: 0px;margin: 0px auto;align-items: center;height: 100%;max-width: 1000px;gap: 10px;}
.steps-nav ul li{position: relative;width: auto;display: flex;align-items: center;    gap: 10px;}
.steps-nav ul li .step-text{ display: flex;align-items: center; color: #5A6B71; gap: 7px; }
.steps-nav .badge{width: 27px;height: 27px;font-size: 14px;background-color: #f7f7f7;color: #5A6B71;}
.steps-nav .complete{ display: none;background-color: #447384 !important;color: #fff; }
.steps-nav li:not(.active).completed .complete{ display: flex; }
.steps-nav li:not(.active).completed .badge:not(.complete){display: none;}
.steps-nav ul li .arrow{display: inline-block;text-align: center;width: 40px;font-size: 16px;}
.steps-nav ul li:first-child .arrow {display: none;}
.steps-nav li.active .badge{ background-color: #F65D36;color: #fff; }

/* designer-controller css start */
.glass-designer .designer-controller{display: flex;flex-wrap: wrap;background-color: #fff;box-shadow: 0 2px 3px rgba(0,0,0,0.1);height: 100%;width: 30%; }
.designer-controller .steps-wrapper{position: relative; overflow: hidden; overflow-y: auto;}
.designer-controller .step:not(.active){ display: none; } 
.next-step-btn:disabled{ background-color: #F65D36;border-color: #F65D36;color: #fff;opacity: 0.2; }


/* designer-canvas css start */
.glass-designer .designer-canvas{ display: flex;align-items: stretch;justify-content: space-between;background-color: #f7f7f7;width: 70%;flex-direction: column;}
.designer-canvas .design-panel{ display: flex;justify-content: center;align-items: center; width: 100%;height: 100%;background-color: #f7f7f7; }
/* .designer-canvas .design-panel .design-frame-wrapper.blur .glass-frame, .designer-canvas .design-panel .design-frame-wrapper.blur .dimension{ filter: blur( 10px); }
.designer-canvas .design-panel .design-frame-wrapper.blur:after{content: "";position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);font-weight: bold;background-image: url("/assets/image/broken_icon.png");background-repeat: no-repeat;background-position: center;background-size: 50%;width: 100%;height: 100%;} */

.glass-frame{ display: flex;align-items: center;justify-content: stretch;position: relative;transition: 0.2s; border: none;box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);zoom: 1.5; }
.design-frame-wrapper.track{border-width: 5px;border-style: solid;border-color: #333;}
.design-frame-wrapper.beading .glass-frame{border: 1px solid #444;border-style: ridge;}
.design-frame-wrapper.junction .glass-item{ border-left-color: #1581BC;  }
/*.design-frame-wrapper.supportblock .glass-item:first-child .support-block:before,
.design-frame-wrapper.supportblock .glass-item:first-child .support-block:after{ display: none; } */
.design-frame-wrapper.supportblock .glass-item .support-block:before,
.design-frame-wrapper.supportblock .glass-item .support-block:after{content:"";width: auto;height: auto;position: absolute;background-color: var(--block-color); border-top: 3.5px solid var(--block-color);border-bottom: 3.5px solid var(--block-color);border-left: 3.5px solid var(--block-color);border-right: 3.5px solid var(--block-color);padding: 0px;margin: 0px;z-index: 9;}
.design-frame-wrapper.supportblock .glass-item .support-block:before{ left: 70%;bottom: 0px; }
.design-frame-wrapper.supportblock .glass-item .support-block:after{ left: 20%;bottom: 0px; }

/* .glass-item.door ~ .glass-item .support-block{ display : none } */
.glass-item.door ~ .glass-item ~ .glass-item .support-block{ display: inline-block; }

.design-frame-wrapper.junction .glass-item.door ~ .glass-item{ border-left: none; }
.design-frame-wrapper.junction .glass-item.door ~ .glass-item ~ .glass-item{ border-left: 1.5px solid #1581BC; }

.design-frame-wrapper:not(.door-has-offset).door-on-left{ border-left: none; }
.design-frame-wrapper:not(.door-has-offset).door-on-right{ border-right: none; }




/* design-frame-wrapper */
.design-frame-wrapper{ position: relative; }
.dimension{position: absolute;width: 100%;}
.dimension[data-content=""]{  display: none; }
.dimension:after{content: attr(data-content);display: inline-block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 15px;color: #000;width: auto;text-align: center;background-color: #f7f7f7;border-radius: 30px;padding: 0px 12px;margin: 0 auto;z-index: 9;}

.wall-width-dimension{top: -25px;display: block;width: 100%;}
.wall-width-dimension:before{content:"";position: absolute;width: 100%;height: 1px;background-color: #666;top: 50%;left: 0px;transform: translate(0% , -50%);}

.wall-height-dimension{top: 0px;left: -25px;width: 1px;height: 100%;display: block;padding: 0px;background-color: #666; z-index: 9; } 
.wall-height-dimension:after{position: relative;left: -40%;top: 50%;padding: 0px 12px;white-space: nowrap;height: 25px;transform: rotate(-90deg) translate(0%, -170%);}

/* glass css start */
.glass-item{ position: relative;transition: 0.2s;padding: 0px; border: 0px;min-height: 300px;min-width: 90px;background: linear-gradient(to right, #e6f7ff, #ffffff);border-left: 1.5px solid transparent; }
.glass-item:first-child{border-left: none;}
.glass-item .sound-proof{ display: none; position: absolute;top: 10px;right: 10px;background-color: #fff;padding: 7px;border-radius: 50%;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);zoom: 0.7; }
.glass-item.no-sound .sound-proof{ display: block; }
.glass-item.door .sound-proof{ display: none !important; }

/* glass dimension */
.glass-item:before{content: attr(data-panel);position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);font-size: 10px;z-index: 200;color: #000;padding: 0px 5px; }
.glass-item.offset:before{content: attr(data-offset);transform: rotate(-90deg) translate(-50%, -50%);color: orangered;width: 17px;font-size: 10px;}
.glass-item.door:before{ content: attr(data-door);font-size: 10px;color: green; }
.glass-item.door.double-door:before{top: 100%;transform: translate(-50%,100%); }

/* sound-proofing */
input[data-soundproofing="true"] ~ .checkmark:after{content:"";background-color: #fff;background-image: url(/assets/image/volume-off.svg);border-radius: 50%; background-position: bottom right;background-position: center;background-repeat: no-repeat;position: absolute;bottom: 5px;right: 5px;width: 30px;height: 30px;}

.small-panel.glass-item .sound-proof{ right: 0px; }

/* rotate-dimension */
.rotate-dimension:before{ transform: translate(-50%,-50%) rotate(-90deg); }

/* door css */
.glass-item.door{display: flex;align-items: stretch;flex-direction: column;height: 100%;padding: 0px 3px 0px 3px;background: #333;border-left: none;}
.glass-item.door.door-sill:after{content:"";position: absolute;bottom: -10px;left: 0px;right: 0;width: 100%;height: 5px;background-color: #5A6B71;}
.glass-item.door .door{display: flex;width:100%;height: 100%;border: 1px solid #bababa;flex: 1;align-items: stretch;flex-direction: column;position: relative;margin: -0.5px 0px -5.2px 0px;}

.glass-item.door .door:before, .glass-item.door .door:after{ content:"";width:1px;height: 10px;background-color: var(--door-color);position: absolute; }
.glass-item.door .door:before{ left: -1px;top: 5%; }
.glass-item.door .door:after{ left: -1px;bottom: 5%; }

.glass-item.door .door .door-glass{position: relative;display: flex;width:100%;height: 100%;border: 5px solid #333;background: linear-gradient(to right, #e6f7ff, #ffffff);flex: 1;}
.glass-item.door .door .door-glass:before, .glass-item.door .door .door-glass:after{ content:""; }
.glass-item.door .door .door-glass:before{display: block;width:100%;height:100%;position: absolute;border: 1px solid #7c7c7c;background-image: url("../../assets/image/door-opening.png");background-position: center;background-size: 100% 100%;background-repeat: no-repeat; z-index: 99;}
.glass-item.door .door .door-handle{position: absolute;top: 48%;right: 0px;transform: translate(7px, -60%);z-index: 1;}

.glass-item.door.right .door:before{ left: auto; right: -1px;top: 5%; }
.glass-item.door.right .door:after{ left: auto; right: -1px;bottom: 5%; }

.glass-item.door.right .door .door-glass:before{transform: rotateY(190deg);}
.glass-item.door.right .door .door-handle{right: auto;left: -11%;transform: translate(15%,-48%);}
.glass-item.door.right .door .door-handle img{ transform: rotateY(190deg); }

.glass-item.door.double-door {flex-direction: row;}
.glass-item.door.double-door .door{ height: unset; }
.glass-item.door.double-door .door:last-child .door-glass:before, .glass-item.door.double-door .door:last-child .door-glass:after{ transform: rotateY(190deg); }
.glass-item.door.double-door .door:first-child .door-handle{transform: translate(6px, -60%);}
.glass-item.door.double-door .door:last-child .door-handle { right: auto;left: -11%;transform: translate(-10%, -60%);}
.glass-item.door.double-door .door:last-child .door-handle img { transform: rotateY(190deg); }

.glass-item.door.double-door .door:last-child:before{ left: auto; right: -1px;top: 5%; }
.glass-item.door.double-door .door:last-child:after{ left: auto; right: -1px;bottom: 5%; }

.door-spacing{position: relative;display: block;width: 100%;background-color: #f7f7f7;height: 1px;}
.door-spacing:after{ content:"";position: absolute;display: block;width: 100%;height: 5px;left:0px;bottom: -4px;background-color: #f7f7f7; }


.custom-radio input[type="radio"][disabled] ~ .checkmark{ cursor: not-allowed; opacity: 0.3; } 


/* cart page css */
.shopping-cart {display: flex;width: 100%;height: calc(100vh - 109px);font-family: "Sarabun", sans-serif;font-weight: 400;font-style: normal;}
.shopping-cart .cart-section{display: flex;align-items: stretch;justify-content: space-between;background-color: #fff;width: 70%;flex-direction: column; position: relative;overflow: hidden;overflow-y: auto;}
.shopping-cart .cart-summary-section{display: flex;align-items: center;justify-content: space-between;background-color: #f7f7f7;width: 30%;position: relative;overflow: hidden;overflow-y: auto; }

.qty-field{display: inline-flex;align-items: center;width: auto;}
.qty-field .btn{ height: 40px;width: 40px; }
.qty-field .qty-input-field{height: 40px;width: 40px;}