@charset "utf-8";

/**********************************************************
	CoC Sheet Style : Sample Code
-----------------------------------------------------------
	Made by. Rout (Avocado / Tateck)
**********************************************************/

.sheet-wrap input[type="text"],
.sheet-wrap input[type="number"],
.sheet-wrap select {display:block; width:100%;}
.sheet-wrap input[type="number"] {height:30px; border:none; text-align:center;}
.sheet-wrap input[type="number"]::-webkit-outer-spin-button,
.sheet-wrap input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin:0;}

.sheet-wrap input[type="checkbox"] {display:none;}
.sheet-wrap input[type="checkbox"] + * {position:relative;}
.sheet-wrap input[type="checkbox"] + *:before {content:"✔"; margin-right:.2em; opacity:.3;}
.sheet-wrap input[type="checkbox"]:checked + * {font-weight:800;}
.sheet-wrap input[type="checkbox"]:checked + *:before {opacity:1;}

.sheet-specs-box {display:block; overflow:hidden; border-bottom:1px solid rgba(0,0,0,.2); margin-bottom:1em; padding-bottom:.5em;}
.sheet-specs-box .sheet-item {display:block; position:relative; width:11.11%; float:left; padding:3px; box-sizing:border-box;}
.sheet-specs-box .sheet-item .sheet-tit {text-align:center;}
@media all and (max-width:640px) {
	.sheet-specs-box .sheet-item {width:20%;}
}


.sheet-other-box {overflow:hidden; border-bottom:1px solid rgba(0,0,0,.2); margin-bottom:1em; padding-bottom:1em;}

.sheet-other-box .sheet-fight {width:40%; float:left;}
.sheet-other-box .sheet-fight > * {width:33.33%; float:left; padding:5px; box-sizing:border-box;}

.sheet-other-box .sheet-ins {width:55%; float:right;}
.sheet-other-box .sheet-ins .sheet-item {width:33.33%; float:left; padding:5px; box-sizing:border-box;}
.sheet-other-box .sheet-ins .sheet-frame strong {display:block; clear:both;}
.sheet-other-box .sheet-ins .sheet-frame input[type="number"],
.sheet-other-box .sheet-ins .sheet-frame input[type="text"]{display:block; vertical-align:middle; width:38%; float:left; text-align:center;}
.sheet-other-box .sheet-ins .sheet-frame .dash {display:block; width:15%; text-align:center; line-height:30px; float:left;}
.sheet-other-box .sheet-ins .sheet-checkbox {display:block; clear:both; padding-top:.5em;}
.sheet-other-box .sheet-ins .sheet-checkbox label {display:inline-block; vertical-align:middle; margin-right:.5em;}

.sheet-other-box .sheet-madness-box {clear:both; width:100%; float:none;}

@media all and (max-width:640px) {
	.sheet-other-box .sheet-fight,
	.sheet-other-box .sheet-ins {float:none; width:auto;}
}


.sheet-spec-list {clear:both; overflow:hidden; padding-bottom:1em;}
.sheet-spec-list > * {width:25%; float:left; padding:4px; box-sizing:border-box;}
.sheet-spec-item {position:relative; margin-bottom:.5em; height:20px; line-height:20px;}
.sheet-spec-item .sheet-name {font-size:13px; letter-spacing:-0.02em; margin-right:3em;}
.sheet-spec-item .sheet-name:before {display:none;}
.sheet-spec-item .sheet-name .sheet-w-txt {position:relative; height:20px; padding:0; font-size:1em; padding-right:3em;}
.sheet-spec-item .sheet-name .sheet-w-txt input {height:100%; padding:0 0 0 .4em;}
.sheet-spec-item .sheet-name .sheet-w-txt span {position:absolute; top:0; right:0;}
.sheet-spec-item .sheet-grade {display:block; position:absolute; top:0; right:0; width:2.5em; height:100%; padding:0;}
.sheet-spec-item .sheet-grade * {height:100% !important;; padding:0; font-size:11px;}
.sheet-group-area {margin-bottom:.5em;}

@media all and (max-width:830px) {
	.sheet-spec-list > * {width:50%;}
	.sheet-spec-list > *:nth-child(2) ~ * {border-top:1px dashed rgba(0,0,0,.2); margin-top:1em; padding-top:1em;}
}
@media all and (max-width:640px) {
	.sheet-spec-item .sheet-name {font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
	.sheet-spec-item .sheet-name p {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}



.sheet-backs-group {display:block; overflow:hidden;}
.sheet-backs-group * {box-sizing:border-box;}
.sheet-backs-group .sheet-backs {display:block; position:relative; width:50%; padding:5px; float:left;}
.sheet-backs-group .sheet-backs .sheet-cols-wrap {display:block; position:relative; overflow:hidden; margin:0 -5px; font-size:12px;}
.sheet-backs-group .sheet-backs .sheet-cols-wrap .sheet-cols {display:block; position:relative; padding:0 5px; width:50%; float:left;}
.sheet-backs-group .sheet-backs .sheet-cols-wrap .sheet-cols textarea {display:block; position:relative; height:170px;}

.sheet-backs-group .sheet-rows {display:block; position:relative; padding-left:60px; height:30px; line-height:30px; margin-bottom:5px;}
.sheet-backs-group .sheet-rows strong {display:block; position:absolute; top:0; left:0; width:60px; font-size:12px;}
.sheet-backs-group .sheet-rows span {display:block; position:relative; height:30px;}
.sheet-backs-group .sheet-txt textarea {height:100px;}

.sheet-backs-wrap .sheet-title {display:block; position:relative; overflow:hidden; margin-bottom:.5em; font-weight:800;}
.sheet-backs-wrap .sheet-title strong {font-weight:800; font-size:1.05em;}
.sheet-backs-wrap .sheet-title:before {content:"◇";}
.sheet-backs-wrap * ~ .sheet-title {margin-top:30px;}

.sheet-backs-wrap .sheet-tit {display:block; position:relative; font-size:1em; padding-bottom:1em;}