.placeorder{ display:flex; flex-direction: column; margin:1em 0 0 0; list-style: none; padding: 0;  }
.orderstep{ width:100%; border-radius:10px; }

#required-step, #optional-step > dl, #optional-step > .option_group{ background:#FFF; border-radius:10px; padding:5px 25px; margin-bottom:1em;}

.orderstep.active{ display:table; }
.orderstep h1{ margin:0 0 0.3em 0; font-weight:300; font-size: clamp(36px,2.4vw,48px); }
.orderstep h1 i::before{ font-family: "Font Awesome 5 Pro"; content:'\f104'; font-weight:400; font-style:normal; cursor:pointer; margin-right:0.25em; }

.orderstep dl{ margin:0; }
.orderstep dt + dd.other:has(input), .other_option:has(input){transition: max-height 0.5s ease; max-height: 200px; overflow: hidden;}
.orderstep dt + dd.other:has(input:disabled), .other_option:has(input:disabled){ max-height: 0; }

.orderstep input:is([type=radio],[type=checkbox]):checked + label{ background-color:#01a6d8; color:#FFF }
.orderstep dd.active input:is([type=radio],[type=checkbox]):checked + label{ border-color: #00a3d4; background-color:#00a3d4; color:#FFF }

.list_option_dt.gray *{ color:#999; }
.list_option_dt .optionselect, .list_option_dt .optionother, .list_option_dt .text{ border-color:#999; }
.list_option_dt.active .optionselect, .list_option_dt.active .optionother, .list_option_dt.active .text{ border-color:#000 }

#optional-step{ display:none;}
#optional-step > .option_group > .group_content.active{ display:block; }

.option_list{display:flex; flex-wrap: wrap;}
.option_list > input +  label{ user-select: none; width:33%; font-size:16px; background-color:#FFF; border:1px solid #CCC; margin-right: -1px; padding:0.75em 0; text-align:center; cursor:pointer}
.option_list > input:checked +  label.on{ background-color:#21c6f8; }
.option_list > input + label i:before{ font-family: 'Font Awesome 5 Pro';  font-weight: 300; content:"\f0c8"; font-style:normal; margin-right:0.3em }
.option_list > input:checked + label i:before{ font-weight: 400; content:"\f14a";}

.order_option_dt{ width:100%; overflow:hidden; padding:1em 0 1em 0; display:flex; list-style:none;  }
.list_option_dt{ flex: 0 0 100%;  transition: all 0.5s ease; }

#required-step .option_list.hidden + .order_option_dt{ padding-top:0; }

.option_title{ font-size:24px; margin:0.6em 0 0.6em 0; font-weight:800;}
.option_title i{ font-style:normal; }

.option_title .subprice{ float:right; padding-right:1em; color:#999; font-weight:normal; font-size:14px; line-height:24px;}

select.optionselect option{ color:#000; }
select.optionselect option.ishint{ color:#999 }
select.optionselect:has(.ishint:checked ){ color:#999 }

select.optionselect option.isoptionname{ display:none; }
.optionselect-dropdown + .select-group select.optionselect option.isoptionname{ display:block; }

.optionselect-dropdown{ width:95%; display:none; }
.optionselect-dropdown dl dt{ cursor:pointer; line-height:200%; border-bottom:1px solid #CCC;}
.optionselect-dropdown dl dd{ display:none; border:1px solid #CCC; padding:10px 10px 20px 10px;  }
.optionselect-dropdown dl dd .note{ color:#999; line-height:180%;}

.radio-container{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style:none; padding:0;}
.radio-container input[type=radio]{ display: none; }
.radio-container label{ display:inline-block; cursor:pointer; width:100%; height:100%; text-align:center; font-size:14px; line-height:150%;}
.radio-container label img{ display:block; width:97%; border:4px solid transparent; margin:0.4em 0; background-position:50% 50%; background-size:cover; aspect-ratio: 1 / 1; }

.radio-container input:checked + label.has-image{ background-color:transparent; color:#01a6d8; font-weight:800;}
.radio-container input:checked + label img{border:4px solid #01a6d8;}

.radio-container label.no-image{ border:1px solid #CCC; margin:0.5em 0 0 0; min-height:5em; display: flex;  align-items: center;}
.radio-container label.no-image span{margin:1em 0; width:90%; text-align:center; display:inline-block;}


.optionselect-dropdown dl dt i:before{ font-family: "Font Awesome 5 Pro"; content:'\f105'; font-weight:400; font-style:normal; padding:0 0.5em 0 0.75em;  }
.optionselect-dropdown dl dt.active{ border-bottom:0;}
.optionselect-dropdown dl dt.active i:before{ content:'\f107'; }
/*
.price_button{ margin:0; display: table-row; vertical-align: bottom; height:67px; }
.price_button button,.price_button input{ float:right; cursor:pointer; margin-top:1em; clear: right;}
.price_button .total-price{ float:left; margin-top:1em;}
.price_button #progressplace{ float:right; margin-top:1em; font-size:18px}
*/


.order_items input[type="radio"]{ display:none; }

.order_products{ list-style:none; padding:0; margin:0; position:relative; width:calc(100% + 14px);}
.order_products > li{float:left; width:calc(50% - 14px); background-color:#e7eff4; margin:0 10px 10px 0; font-size:18px; font-weight:900; }
.order_products > li input:is([type=radio],[type=checkbox]) + label{ width:100%; height:100%; display:inline-block; cursor:pointer; display:flex; align-items: center; border:2px solid transparent; border-radius:10px; overflow:hidden;}
.order_products > li > label img{ height:92px; vertical-align: middle; margin:0 10px 0 0px;}
.order_products > li > label span{ display:inline-block; }


.order_option{ display:flex; gap:20px; flex-wrap: wrap; align-items: stretch; margin:0 0 2em 0; }
.order_option label{  text-align:center; display:inline-block; padding:0.5em 0.75em; user-select: none; transition: all 0.2s ease; }
.order_option input:is([type=radio],[type=checkbox]) + label{ background-color:#fff; border:1px solid #CCC; border-radius:10px; cursor:pointer; }

.order_option label sup{display:block; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.order_option label sup img{ width:80%; }
.order_option label sup .spacerthumb{ border:1px solid #000; background-color:#a8a9ad}
.orderstep input:is([type=radio],[type=checkbox]):checked + label sup .spacerthumb{ border:1px solid #ccc; background-color:#000 }

.order_option label strong{font-size:18px;}
.order_option label.list_option_-1 { margin-top: 10px; width: 100%; padding:1em;}
.order_option label.list_option_other{ width:100%; text-align:left; display:none;}
.order_option label.list_option_-1 i, .order_option label.list_option_other i{ font-size:24px; color:#36a8d2; }
.order_option label.list_option_other input{ padding-right:55px; }
.order_option label.list_option_other input + span{position: absolute; top: 47.5%; margin-left:-45px; color:#999; pointer-events: none;}
.order_option label.list_option_other input + span + span{position: absolute; top: 47.5%; margin-left:9%; }

.radio-group ul{ list-style:none; padding:0; display: flex; flex-wrap: wrap; /* flex-direction: column; */ }
.radio-group ul li{ display: inline-block; margin-bottom: 0; box-sizing: border-box;}

.radio-group input[type=radio], .checkbox-group input[type=checkbox]{ display:none; }

.radio-group input[type=radio] + label, .checkbox-group input[type=checkbox] + label{
    border-radius: 3px;
    font-size: 16px;
    padding: 15px;
    cursor: pointer;
    display:inline-block;
    margin: 5px 10px 5px 0;
	background: #e7eff4;
    transition: all .3s ease;
	border: 2px solid transparent;
	user-select: none;
}

.filelist{line-height:175%; min-height:100px;}

.cart_filebox{ position:relative; margin-bottom:50px;}
.cart_filebox input {
    cursor: pointer;
    position: absolute;
    z-index: 100;
	left:0;
	right:0;
	bottom:0;
	top:0;
    opacity: 0;
    overflow: hidden;
}



.description_part{ flex:12; position: relative; }
.placeorder_part{ flex:8; align-items: center; }

#summary-float{display:none; width:100%; position:sticky; top:0px; z-index:99; background:#FFF; padding-top:20px; height:140px; border-bottom:1px solid #999}
#summary-float .button-solid{ background-color:#e6e7e9; border:3px solid #333; color:#000;}
#summary-float .button-solid:hover{ text-decoration:none; background-color:#56c8f2; color:#FFF; }
.button-submit{ padding: 0.75em 0.75em; }

.s-sticky {position:sticky; top:12px; transition: all 0.5s ease;}

#s-order-effect{ display:none; position: absolute; top: 0;left: 0; width: 100%;  height: 100%; background-color:rgba(255,255,255,0.8); z-index:90;}
#s-order-effect .s-sticky > *{ margin:0 10px 0 auto; width:80%; }
#s-order-hicd{ border:5px solid #01a6d8; background-color:#bcbdc0; text-align:center; padding:1em;}
#s-order-hicd h4{ font-size:24px; }

.total-price{ float:left; display:flex; align-items: center; margin:0 1em 0 0;}
.total-price-left{float:left; padding-right:8px; margin-right:8px; border-right:1px solid #ccc;}
.total-price--baseoption{ font-family:'Roboto Condensed'; font-size:24px; font-weight:bold}
.total-price--split{font-weight:300; font-size:12px; line-height:180%;}

.total-price--sum{ font-family:'Roboto Condensed'; font-size:28px; font-weight:bold;}

.total-buttons{ float:left; }