@charset "utf-8";

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

.sheet-wrap * {transition:none !important; -webkit-transition:none !important;}
.sheet-wrap textarea,
.sheet-wrap input[type="text"],
.sheet-wrap input[type="number"],
.sheet-wrap select {display:block; width:100%; font-family:'Arial';}
.sheet-wrap input[type="number"] {height:30px; 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-wrap .sheet-center {text-align:center;}

.sheet-wrap .theme-form {margin-top:1em;}
.sheet-wrap .theme-form td {padding:1.5em 10px;}

.sheet-title {font-size:1.05em; font-weight:800; margin-bottom:1em;}
.sheet-title:before {content:"■";}

.sheet-sub-title {font-size:1.02em; font-weight:800; margin:1.5em .2em .5em;}
.sheet-sub-title:before {content:"□ ";}

.sheet-wrap {position:relative; padding-left:30px; padding-top:1em; padding-bottom:1em;}

.sheet-wrap .sheet-header {position:absolute; top:0; left:0; width:30px; bottom:0; border-top-width:0; border-radius:0;}
.sheet-wrap .sheet-reduction {position:absolute; top:8em; left:0; width:7em; padding-left:4em; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; box-sizing:border-box; font-size:1.2em;}
.sheet-wrap .sheet-reduction p {position:absolute; top:0; left:0; font-weight:800; line-height:2;}
.sheet-wrap .sheet-reduction input {font-size:1.4em; color:unset; background:transparent; border:none; font-style:italic; font-weight:800; padding:0; text-align:left;}
.sheet-wrap .sheet-graph {position:absolute; top:9em; left:0; bottom:0; right:0; font-size:1.2em;}
.sheet-wrap .sheet-graph > * {display:block; position:absolute; width:5px; height:20%; left:50%; top:0; margin-left:-6px;}
.sheet-wrap .sheet-graph > * + * {left:auto; margin-left:0; right:50%; margin-right:-6px; top:10%;}
.sheet-wrap .sheet-graph .theme-box {padding:0;}
.sheet-wrap .sheet-graph .bar {border:none; padding:0; width:100%; border-radius:0; height:0; background:#333; transition:.3s all !important; -webkit-transition:.3s all !important;}
.sheet-wrap .sheet-graph * + * .bar {background:#000;}

.sheet-default-spec {position:relative; padding:0 10px;}
.sheet-breed-wrap {display:table; width:100%; table-layout:fixed;}
.sheet-breed-wrap > * {display:table-cell;}
.sheet-breed-wrap .sheet-dash {width:1.5em; text-align:center;}
.sheet-breed-wrap select {background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0; appearance: none; -webkit-appearance:none; text-align-last: center; text-align: center; -ms-text-align-last: center; -moz-text-align-last: center;}
.sheet-breed-wrap select::-ms-expand{ display:none;}
.sheet-breed-wrap select option {color:#000;}
.sheet-breed-wrap .sheet-breed select {font-weight:800;}
@media all and (max-width:600px) {
	.sheet-breed-wrap {display:block; width:auto;}
	.sheet-breed-wrap > * {display:block; width:auto; float:left;}
	.sheet-breed-wrap .sheet-breed {float:none; clear:both;}
	.sheet-breed-wrap .sheet-breed + .sheet-dash {display:none;}
	.sheet-breed-wrap .sheet-syndrom {width:30%;}
	.sheet-breed-wrap .sheet-dash {width:5%; line-height:30px;}
}

.sheet-profile {display:block; overflow:hidden; clear:both;}
.sheet-profile > * {float:left; width:60%; box-sizing:border-box;}
.sheet-profile > * + * {width:40%; padding-left:1em;}
.sheet-profile dl {display:table; width:100%; table-layout:fixed;}
.sheet-profile dl.half {width:49%; float:left;}
.sheet-profile dl.half + .half {float:right;}
.sheet-profile dl > * {display:table-cell; vertical-align:middle}
.sheet-profile dl dt {width:3em; font-weight:600;}
.sheet-profile dl dd {white-space:nowrap;}
.sheet-profile dl dd select {display:inline-block; width:30%;}
.sheet-profile dl dd select option {color:#000;}
.sheet-profile dl dd input {display:block; width:100% !important;}
.sheet-profile dl dd select + input {display:inline-block !important; width:69% !important;}

.sheet-profile select {background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0;}
.sheet-profile input[type="text"] {background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0;}

@media all and (max-width:770px) {
	.sheet-profile > * {width:70%;}
	.sheet-profile > * + * {width:30%;}
}
@media all and (max-width:670px) {
	.sheet-profile > *,
	.sheet-profile > * + * {width:auto; float:none; padding-left:0;}
}

.sheet-status {display:block; overflow:hidden;}
.sheet-status dl {display:block; position:relative; width:16.66%; float:left; margin:0; padding:0 .5em; box-sizing:border-box;}
.sheet-status dl > * {display:block; margin:0;}
.sheet-status dt {text-align:center; font-weight:600;}
.sheet-status dd input[type="text"],
.sheet-status dd input[type="number"] {background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0; height:3em; font-size:1.1em;}
.sheet-status dl.side dd {padding-top:1em;}
.sheet-status dl.side dd p {display:block; position:relative; padding-left:4em; font-size:.8em;}
.sheet-status dl.side dd p span {display:block; position:absolute; top:0; left:0; line-height:2.2em;}
.sheet-status dl.side dd input[type="text"],
.sheet-status dl.side dd input[type="number"] {height:2.2em;}

@media all and (max-width:660px) {
	.sheet-status dl {width:33.33%; margin-bottom:1em;}
}


.sheet-spec-group {overflow:hidden;}
.sheet-spec-group > * {display:block; width:25%; float:left; padding:.5em; box-sizing:border-box;}
.sheet-spec-group .ui-btn {cursor:default;}
.sheet-spec-group .sheet-tit {display:table; width:100%; table-layout:fixed; font-size:1.05em;}
.sheet-spec-group .sheet-tit > * {display:table-cell; vertical-align:middle; text-align:center;}
.sheet-spec-group .sheet-tit strong {width:4em; padding:0; border-radius:0; border-bottom-width:0;}
.sheet-spec-group .sheet-tit input[type="number"] {background:transparent; color:unset; border-width:0; border-top-width:1px; border-radius:0; padding:0; font-weight:800; font-size:1.2em;}
.sheet-spec-group .sheet-txt-tit {width:100%; border-radius:0;}

.sheet-skill {display:table; width:100%; table-layout:fixed; font-size:.9em; margin-bottom:.5em;}
.sheet-skill > * {display:table-cell; vertical-align:middle;}
.sheet-skill * + * {width:4em; padding-left:.5em;}
.sheet-skill * + * input[type="number"] {display:inline; background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0; width:50%; height:2em; vertical-align:middle;}
.sheet-skill * + * input[type="number"] + span {display:inline-block; vertical-align:middle; width:auto;}
.sheet-skill .sheet-txt > * {display:inline-block; vertical-align:middle;}
.sheet-skill .sheet-txt input[type="text"] {display:inline-block; background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0; width:50%; height:2em; vertical-align:middle; font-size:1em;}
@media all and (max-width:680px) {
	.sheet-spec-group > * {display:inline-block; vertical-align:top; width:49%; float:none;}
	.sheet-spec-group > * + * + * {margin-top:1em;}
}


.sheet-data-item {position:relative; padding-left:25px; overflow:hidden; padding-bottom:.3em; font-size:.9em;}
.sheet-data-item.sheet-has-titus {padding-left:50px;}

.sheet-data-item .sheet-check-flag,
.sheet-data-item .sheet-check-flag-visual {display:block !important; position:absolute !important; width:25px; height:2.5em !important; top:0; left:0; float:none; cursor:pointer;}
.sheet-data-item .sheet-check-flag {z-index:5; opacity:0;}
.sheet-data-item .sheet-check-flag-visual:before {content:"⧉" !important; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:2.5em;}

.sheet-data-item .sheet-titus-flag,
.sheet-data-item .sheet-titus-flag-visual {display:block !important; position:absolute !important; width:25px; height:2.5em !important; top:0; left:25px; float:none; cursor:pointer;}
.sheet-data-item .sheet-titus-flag {z-index:5; opacity:0;}
.sheet-data-item .sheet-titus-flag-visual:before {content:"𝒯" !important; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:2.5em;}
.sheet-data-item .sheet-titus-flag:checked + .sheet-titus-flag-visual ~ * {opacity:.4;}

.sheet-data-item .sheet-data-default {display:table; width:100%; table-layout:fixed; position:relative;}
.sheet-data-item .sheet-data-default > * {display:table-cell; vertical-align:middle; padding:0 .3em;}

.sheet-data-item .sheet-data-default input[type="text"],
.sheet-data-item .sheet-data-default input[type="number"],
.sheet-data-item .sheet-data-default textarea {background:transparent; color:unset; border-width:0; border-bottom-width:1px; border-radius:0; padding:0; height:2.5em; }

.sheet-data-item .sheet-data-side input[type="text"],
.sheet-data-item .sheet-data-side input[type="number"],
.sheet-data-item .sheet-data-side textarea {font-size:1em;}
.sheet-data-item .sheet-data-side textarea {display:block;}
.sheet-data-item .sheet-data-side input[type="text"],
.sheet-data-item .sheet-data-side input[type="number"] {height:2em; padding:0 .4em;}

.sheet-data-item .sheet-data-side {margin-top:5px; font-size:11px;}
.sheet-data-item .sheet-data-side dl {display:table; width:100%; table-layout:fixed; margin:0;}
.sheet-data-item .sheet-data-side dl + dl {margin-top:.4em;}
.sheet-data-item .sheet-data-side dl > * {display:table-cell; vertical-align:middle;}
.sheet-data-item .sheet-data-side dl dt {width:3.5em; font-weight:600;}
.sheet-data-item .sheet-data-side dl dt ~ dt {padding-left:.5em;}
.sheet-data-item .sheet-data-side dd span,
.sheet-data-item .sheet-data-side dd span ~ * {display:inline-block; vertical-align:middle; width:auto;}
.sheet-data-item .sheet-data-side dd span {padding-right:.5em;}
.sheet-data-item .sheet-data-side dd span ~ span {padding-left:.5em;}
.sheet-data-item .sheet-data-side dd span ~ input[type="text"] {width:6em; max-width:25%;}
.sheet-data-item .sheet-data-side dd textarea {height:8em;}

.sheet-data-item .sheet-data-side {display:none; width:auto; float:none; clear:both;}
.sheet-data-item .sheet-check-flag:checked ~ .sheet-data-side {display:block;}

.sheet-data-item .sheet-lv {width:2.5em; text-align:right;}
.sheet-data-item .sheet-lv-val {width:3em;}
.sheet-data-item .sheet-spec {width:4.5em; text-align:center;}
.sheet-data-item .sheet-spec * {text-align:center;}

.sheet-data-item .sheet-spec2 {width:5em; text-align:center;}
.sheet-data-item .sheet-spec2 * {text-align:center;}

.sheet-data-item .sheet-dice {width:5em; text-align:center;}
.sheet-data-item .sheet-dice * {text-align:center;}

.sheet-data-item .sheet-type {width:6em;}

@media all and (max-width:480px) {
	.sheet-data-item input[type="text"],
	.sheet-data-item input[type="number"],
	.sheet-data-item select,
	.sheet-data-item textarea {font-size:11px;}
}