.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:20px; padding:5px 35px; margin-bottom:3em; box-shadow:2px 2px 10px 10px rgba(0, 0, 0, 0.05);}

.orderstep .optionselect, .orderstep .optionother, .orderstep .text{ border:1px solid #CCC; height: 45px;  line-height: 45px; padding-left: 15px; }

#format, #quantity{ width:100% !important; min-width:fit-content;}

.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; }
.other_option:has(input){transition: max-height 0.5s ease; max-height: 200px; overflow: hidden;}
.other_option:has(input:disabled){ max-height: 0; margin:0; }

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

#optional-step-22222222222{ display:none;}


.group_title{ font-size:18px; line-height:200%; margin-top:0.7em;}
.groupprice{ float:right; color:#999; font-weight:100; font-size:14px}

.order_option_dt.gray{ display:none}
.order_option_dt.active{ }
.list_option_dt .optionselect, .list_option_dt .optionother, .list_option_dt .text{ border-color:#999 }

.option_group.item-count-n .group_content{ display:flex; flex-wrap: wrap; gap:4%; }
.option_group.item-count-n .option_list{ width:30%; margin:0 0 1.25em 0;  }
.option_group.item-count-n .option_list > input +  label{ padding:0; }


#required-step .item-count-1 .group_content.active{ }
#required-step .item-count-1 .option_list{ float:right; margin-top:-3em; width:fit-content;}
#required-step .item-count-1 .option_list big{ display:none}

.option_list > input:is([type=radio],[type=checkbox]):checked + label{ background-color:transparent !important; color:inherit }

.option_list > input +  label{ display: flex; align-items:center; justify-content:center; user-select: none; background-color:transparent; padding:0.75em 0; cursor:pointer}
.option_list > input + label i{ position: relative; border:2px solid #333; font-style:normal; flex:7; aspect-ratio: 1 / 1; display:inline-block; border-radius:5px; margin-right:0.4em; overflow:hidden}

.option_list > input:checked + label i{ border:2px solid #666;}
.option_list > input:checked.on + label i{ border:2px solid #01a6d8;}

.option_list > input:checked + label i:before{ content: ""; position: absolute;top: 43%;left: 50%;width: 20%;height: 50%; transform: translate(-50%, -50%) rotate(45deg); border-right: 3px solid; border-bottom: 3px solid; border-color:#666; }
.option_list > input:checked.on + label i:before{ border-color:#01a6d8}

.option_list > input + label span{ flex:13; user-select: none; font-size:18px; font-weight:800;}
.option_list > input + label span big{ font-size:14px;}

.item-count-1 .option_list > input[required] + label{ background-color:transparent; padding:0.5em 0 0.75em 0; color:#6C6D70; font-size:18px; font-weight:800; border:none; width:fit-content; cursor:default; }
.item-count-1 .option_list > input[required] + label i{ display:none;}
/*
.item-count-1 .option_list > input[required] + label{ width:100%;}
.item-count-1 .option_list > input[required] + label span small{ margin-top:-3em;}
*/
#optional-step .item-count-1 .option_list > input + label{ }
#optional-step .item-count-1 .option_list > input + label span small{ float:right; margin-left:1em;}

.sub_optionname{ color: #999; }
.list_option_dt > .suboptionformat + .suboptioncontent:nth-last-child(1) .sub_optionname { display:none;  }
.list_option_dt > .suboptioncontent ~ .suboptioncontent { display: none; }

.order_option_dt{ width:100%; padding:0; margin:0 0 1em 0; display:flex; list-style:none;  }

.list_option_dt{ flex: 0 0 100%;  transition: all 0.5s ease; }
.radio-checker-parent{ position: relative; display:flex; flex-wrap: wrap; gap:4%; margin: 0.6em 0 0 0; }

.radio-group{ border:0; margin:0; padding:0; }
.radio-checker{position: relative;min-height:4em; font-weight:800; margin-bottom:2em; cursor:pointer; width:30%; font-size:14px; display:flex; align-items:center; justify-content:center; border:1px solid #999; padding:5px 1em; border-radius:10px; }
.radio-checker + .radio-group{ display:none; clear:both; float:left; width:100%; margin:0 0 2em 0; }
.radio-checker.checkbox-start + .radio-group{ margin:0 0 1em 0; }

.radio-checker-only1 .checktype-20{display:none;}
.radio-checker-only1 .radio-checker.checktype-20 + .radio-group{ display:block; }

.foil-style .radio-group, .item-count-n .order_option_dt{ border:2px solid #CCC; padding:5px 15px 15px 15px; margin-top:0; background-color:#F7F7F7; position: relative;}
.item-count-n .order_option_dt{ padding:1em; }

.foil-style .radio-group::before, .item-count-n .order_option_dt::before {
	content: "";
	position: absolute;
	width:15px; height:15px;
	top: -1.1px;	
	transform: translate(-50%, -50%) rotate(45deg);
	border-left: 2px solid #CCC; border-top: 2px solid #CCC;
	background-color: #F7F7F7;
}

.order-pos-1::before{left: 6%;}
.order-pos-3::before{left: 40%;}
.order-pos-5::before{left: 74%;}

/*
.foil-style .radio-group .arrowup{ display:inline-block; width: 10px; height: 10px; position:relative; margin-top:-10px}
.foil-style .radio-group .arrowup:after{ content: ""; position: absolute; top:0; left:0; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); border-left: 2px solid; border-top: 2px solid; border-color:#CCC;}
*/

.foil-style .radio-checker{ min-height:1em; border:0; padding:0 25px 0 0;}
.foil-style .radio-checker span{ flex:11; user-select: none;}
.foil-style .radio-checker i{ position: relative; border:2px solid transparent; font-style:normal; flex:9; aspect-ratio: 1 / 1; display:inline-block; border-radius:5px; margin-right:0.4em; overflow:hidden}

.foil-style .radio-checker.active i{ border:2px solid #666 !important;}
.foil-style .radio-checker.active.on i{ border:2px solid #01a6d8 !important;}
.foil-style .radio-checker.active i:before{ content:""; display:block; position: absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,0.75); }

.foil-style .radio-checker.active i:after{ content: ""; position: absolute; top: 43%; left: 50%; width: 20%; height: 50%; transform: translate(-50%, -50%) rotate(45deg); border-right: 3px solid; border-bottom: 3px solid; border-color:#666;}
.foil-style .radio-checker.active.on i:after{ border-color:#01a6d8; }

.edge-style .radio-checker.on{ background-color:#01a6d8; color:#FFF;}
.edge-style .radio-checker span{text-align:center; user-select: none;}


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

.item-count-1 .subprice{ display:none; }
.option_list .subprice{ color:#999; font-weight:normal; font-size:12px;}

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;  height: auto; object-fit: cover; overflow: hidden;}

.radio-container input:checked + label.has-image{ background-color:transparent; color:#01a6d8; font-weight:800; text-align:center;}
.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;}

#required-step .radio-group label.has-image{display:flex; align-items:center;}
#required-step .radio-group label.has-image > *{ flex:1 }

.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-top:3em; }

/*.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:30px; flex-wrap: wrap; align-items: stretch; margin:0 0 2.5em 0; }
.order_option label{  text-align:center; display:inline-block; padding:0.8em 0.5em; 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; font-size:14px }

.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:0px solid #000; background-color:#a8a9ad}
.orderstep input:is([type=radio],[type=checkbox]):checked + label sup .spacerthumb{ border:0px solid #ccc; background-color:#000 }

.order_option label strong{font-size:14px;}
.order_option label.list_option_-1 { margin-top: 0px; width: 100%; padding:1em;}
.order_option label.list_option_other{ width:100%; text-align:left; padding:1em 2em; 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; width:33.3%}

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

#required-step .radio-group .ishint{ display:none; }

.radio-group input[type=radio] + label, .checkbox-group input[type=checkbox] + label{
	width:90%;
    border-radius: 3px;
    font-size: 14px;
	text-align:center;
    padding: 0.8em;
    cursor: pointer;
    display:inline-block;
    margin: 0 auto 0 0;
	background: #fff;
    transition: all .3s ease;
	border: 1px solid #CCC;
	user-select: none;
}
.checkbox-group{ margin-right:1em; }
.checkbox-group input[type=checkbox] + label{
	width:100%;
}
#optional-step .radio-group input[type=radio] + label{ padding:0 5px }
#optional-step .radio-group label img{ display:block; width:80%; border:2px solid transparent; margin:0 auto 0 auto; /* background-position:50% 50%; background-size:cover; */ aspect-ratio: 1 / 1; height: auto;   object-fit: cover; overflow: hidden;}

#optional-step .radio-group input + label.no-image{ min-height:4em; padding:5px 1em; font-size:14px; height:85%; margin-top:0.5em; margin-bottom:1em; display:flex; align-items:center; justify-content:center;}

#optional-step .radio-group input + label.has-image{ color:#000; background-color:transparent; font-weight:300; text-align:center; border:0; margin-bottom:1em;}
#optional-step .radio-group input + label.has-image img{ border: 2px solid #FFF; border-radius:7px}

#optional-step .radio-group input:checked + label.has-image{ color:#01a6d8; font-weight:800; }
#optional-step .radio-group input:checked + label.has-image img{ border: 2px solid #01a6d8;}

#optional-step .radio-group input + label.has-image i{position: relative; display:inline-block; width:100%; }
#optional-step .radio-group input:checked + label.has-image i:after{ font-family: "Font Awesome 5 Pro"; content: "\f058"; font-weight:800; font-style:normal; position: absolute; right:calc(10% + 5px); bottom:5px; color:#0CF; font-size:24px; text-shadow: 0 0 10px rgba(255, 255, 255, 1);}

#optional-step .list_option_dt.gray .radio-group input:checked + label.has-image img{ border: 5px solid #999; }
#optional-step .list_option_dt.gray .radio-group input:checked + label.has-image i:after{ border-color:#999 }

#optional-step .radio-group .ishint{ display:none; }
#optional-step .foil-style .radio-group .ishint{ width:100%; display:block; line-height:180%;}
#optional-step .foil-style .radio-group .ishint input[type=radio] + label{ font-size:16px; background-color:transparent; text-align:left; color:#6C6D70; padding:0 0 0 1em; font-weight:800; border:0; }
#optional-step .foil-style .radio-group  .ishint input + label.no-image{ width:100%; min-height:1em; display:flex; align-items:center; justify-content:left; padding:0;}

#optional-step .edge-style .radio-group ul li{ width:16%; }
#optional-step .edge-style .radio-group  input + label{ border-radius:50%; width:70%; height:auto; min-height:0; padding:0; aspect-ratio: 1 / 1; border:1px solid #000; margin-bottom:0.8em; }
#optional-step .edge-style .radio-group  input + label.has-image i{ width:100%; height:auto; padding:0; aspect-ratio: 1 / 1; }
#optional-step .edge-style .radio-group  input + label.has-image img{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:0;}
#optional-step .edge-style .radio-group  input + label.no-image{ display:inline-block; }
#optional-step .edge-style .radio-group  input + label.no-image span{ display:none; }
#optional-step .edge-style .radio-group  input + label i{position: relative; display:inline-block; width:100%; height:100%; }

#optional-step .edge-style .radio-group  input:checked + label{ border:1px solid #01a6d8;}
#optional-step .edge-style .radio-group  input:checked + label i:after{ content: ""; display:block; position: absolute; top: 30%; left: 60%; width: 35%; height: 70%; transform: translate(-50%, -50%) rotate(45deg); border-right: 3px solid #01a6d8; border-bottom: 3px solid #01a6d8;}

.data_option{ width:100%;}

.forfbm-note{ width:100%; font-size:16px; font-weight:800; color:#6C6D70; margin-top:0.5em}
li + .forfbm-note{line-height:250%;}

.forfbm-list{ width:100%; display: flex; flex-wrap: wrap;}
.forfbm-checker{ font-weight:800; cursor:pointer; width:33.3%; padding-right:25px; font-size:14px; display:flex; flex-direction: column; align-items:center;}
.forfbm-checker input{display:none;}
.forfbm-checker span{ flex:1; }
.forfbm-checker i{ position: relative; width:45%; font-style:normal; flex:3; aspect-ratio: 1 / 1; display:inline-block; border-radius:5px; margin-bottom:0.4em; }
.forfbm-checker i:before{ content:""; position: absolute; border:2px solid #000000; top:20%; left:20%; right:20%; bottom:20%; border-radius:5px; }
.forfbm-checker input:checked + i:after{ content: ""; position: absolute; top: 28%; left: 67%; width: 30%; height: 70%; transform: translate(-50%, -50%) rotate(45deg); border-right: 3px solid #01a6d8; border-bottom: 3px solid #01a6d8;}
.forfbm-checker input:checked:disabled + i:after{ border-color:#999;}



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

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

#basepricestable table{ border:1px solid #333; width:60%; border-radius:10px; margin:1em auto; overflow:hidden}
#basepricestable table tr td{text-align:center; border-bottom:1px solid #333;font-size: 14px;}
#basepricestable table tr:last-child td {border-bottom: none; padding-bottom:12px;}

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

#summary-float{display:none; width:100%; position:sticky; top:0px; z-index:99; background:#FFF; padding-top:10px; 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; }
#summary-options { margin:0; display:grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 5px; list-style: none; padding: 0;}
#summary-options li { line-height:120%; font-size:14px; }
#summary-options li small { font-size:10px; color:#999 }


.button-submit{ padding: 0.75em 0.75em; }

.s-sticky {position:sticky; top:0; 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:100%; }
#s-order-thumb{margin-top:0;border:3px solid #CCC;}
#s-order_optionname{ width:100%; line-height:200%; padding:0.4em 1em 1em 1em; font-size:18px; font-weight:800; background-color:#FFF}
#s-order_optiodesc{  font-size:14px; font-weight:300;}
#s-order_optionvalue{ width:100%; line-height:200%; padding:1.5em 1em 1em 1em; font-size:16px; font-weight:800; background-color:#FFF; color:#999; text-align:right}

#s-order-hicd{ border:3px solid #01a6d8; background-color:#bcbdc0; text-align:center; padding:1em 3em;}
#s-order-hicd h4{ font-size:24px; }

.total-price{ float:right; display:flex; align-items: center; margin:40px 2em 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:20px; font-weight:bold}
.total-price--split{font-weight:300; font-size:12px; line-height:180%;}
.total-price-right{text-align:right;}
.total-price-txt{ font-size:14px; }
.total-price--sum{ font-family:'Roboto Condensed'; font-size:24px; font-weight:bold;}

.total-buttons{ float:left; }