select,
div,
button,
textarea,
span,
input,
img,
label{
    box-sizing: border-box;
	font-family:sans-serif;
}
div{
    margin: 0px;
    padding: 0px;
}
img{
    margin: 0px;
    padding: 0px;
}
.fullpc table, .fullpc th, .fullpc td {
	max-width:850px;
    border: 1px solid black;
    text-align:center;
	font-size: 1.00em;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');



/* ==== CLASSES ==== */
.top-area {display:block; position:relative; clear:both; overflow:hidden; min-height:200px;}
.top-area .left {display:block; position:relative; width:35%; float:left;}
.top-area .right {display:block; position:relative; width:35%; float:right;}
.top-area .logo {display:block; position:absolute; top:50%; left:38%; right:38%; text-align:center; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.top-area .logo img {max-width:100%;}

.icon-text-field {display:table; width:100%; table-layout:fixed; position:relative; border-bottom:1px dashed #333; word-break: keep-all;}
.icon-text-field.no-line {border-bottom:0;}
.icon-text-field input[type="text"] {display:block; position:relative; width:100%; box-sizing:border-box; height:30px; text-align:left; padding:0 10px; color:#000;}
.icon-text-field input[type="text"].point {font-weight:800; color:#000;}
.icon-text-field .icon {display:table-cell; height:30px; vertical-align:middle; width:90px; padding-left:20px; box-sizing:border-box; color:#777;}
.icon-text-field .icon:before {content:""; display:block; position:absolute; top:50%; left:0; width:15px; height:15px; background:url('https://i.imgur.com/wnVubts.png') no-repeat 50% 50%; background-size:contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.icon-text-field span + span {width:auto !important; padding-left:0;}
.icon-text-field span + span:before {display:none;}
.icon-text-field span.effect {
    display: table-cell; height: 30px; vertical-align: middle; width: 90px; padding-left: 20px; box-sizing: border-box; color: #777;}
.icon-text-field textarea {height:50px; text-align:left; padding:5px 10px;}

.icon-text-field.sub-text span {}
.icon-text-field.sub-text span:before {display:none;}

.icon-text-field .side {width:60px !important; text-align:center;}
.icon-text-field .side input[type="checkbox"] {display:none;}
.icon-text-field .side input[type="checkbox"] + label {display:inline-block; position:relative; vertical-align:middle; text-align:left; text-indent:-999px; overflow:hidden; width:15px; height:15px; border-radius:100%; box-sizing:border-box; border:2px solid #000; cursor:pointer; margin:0;}
.icon-text-field .side input[type="checkbox"]:checked + label {background:#333;}

.icon-text-field .select-group em {display:block; height: 30px; float:left; position:relative; font-style: normal;}
.icon-text-field .select-group input {
	position: absolute; width: 100%; height: 28px; opacity: 0;
}
.icon-text-field .select-group span {
	pointer-events: none; height: 30px; display: inline-table; 
    padding: 8px 3px; background-color: white; color: #dddddd;
}
.icon-text-field .select-group span.black {
	color: #000;
}
.icon-text-field .select-group input:checked + span {
	color: #000000;
}
.icon-text-field .select-group select  {
	text-align: left; text-align-last:left;width:65px; font-weight:bold; vertical-align: middle; height: 32px; color: #000000; position: absolute;
}
.icon-text-field .select-group select:focus {
	background: transparent;
}
.icon-text-field .select-group em.selector {
	display:none; white-space: nowrap;
}
.icon-text-field .select-group {
	display: flex; justify-content: space-between;
}
.icon-text-field .select-group input:checked + em.selector {
	display:block;
}

.icon-text-row {display:block; overflow:hidden; clear:both; width: 100%; height:auto;}
.icon-text-row .cols {width:50%; float:left;}
.icon-text-row .icon-text-field span {width:70px;}
.icon-text-row.group-3 .cols {width:33.33%;}

.design-text-field {text-align:center; margin-top:-20px;}
.design-text-field .item {display:inline-block; vertical-align:middle; width:70px; height:70px; background:url('https://i.imgur.com/To23ccc.png') no-repeat 50% 50%; background-size:contain;}
.design-text-field .item p {display:block; position:relative; height:55%; margin:0;}
.design-text-field .item span {display:block; position:absolute; top:50%; left:0; right:0; color:#fff; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.design-text-field .item input[type="text"] {display:block; position:relative; width:80%; margin:0 auto; box-sizing:border-box; text-align:center; color:#000; font-weight:800; font-size:13px;}

.senario-area {display:block; position:relative; clear:both; overflow:hidden; margin:20px 0;}
.senario-area .left {display:block; position:absolute; width:300px; top:0; left:0; }
.senario-area .right {display:block; position:relative; margin-left:350px; min-height:270px;}

.senario-area .design-text-area {text-align:center; font-weight:800;width:300px; height:271px; padding:45px; background:url('https://i.imgur.com/FqueMIm.png') no-repeat 50% 50%; background-size:contain; box-sizing:border-box;}
.senario-area .design-text-area textarea {display:block; margin-top:5px; height:160px; width:100%; text-align:left;}

.design-graph-bar.ty1 {width: 57%;}
.design-graph-bar.ty2 {width: 42%;}
.design-graph-bar {display:inline-block; position:relative; line-height:40px; height:40px; overflow:hidden; padding:0 32px 0 135px; background:url('https://i.imgur.com/99M42p7.png') repeat-x 0 50%; background-size: auto 100%;}
.design-graph-bar:before {content:""; display:block; position:absolute; top:0; left:0; width:40px; bottom:0; background:url('https://i.imgur.com/M4VO22z.png') no-repeat 0 50%; background-size:auto 100%; box-sizing:border-box; }
.design-graph-bar .tail,
.design-graph-bar.ty2:after {content:""; display:block; position:absolute; top:0; right:0; width:32px; bottom:0; background:url('https://i.imgur.com/M4VO22z.png') no-repeat 100% 50%; background-size:auto 100%; box-sizing:border-box; }
.design-graph-bar + .design-graph-bar {margin-top:10px;}
.design-graph-bar span {display:block; position:absolute; top:0; bottom:0; line-height:40px; padding-left:25px; left:40px; }
.design-graph-bar select,
.design-graph-bar input[type="number"] {height:30px; text-align:center; font-weight:800; color:#000; width:40px; box-sizing:border-box;}
.design-graph-bar select {margin-bottom:6px;}


.design-graph-bar span:before {content:""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:20px; height:20px; background:url('https://i.imgur.com/VV4zOa1.png') no-repeat 50% 50%; background-size:contain;}
.design-graph-bar.ty2 span:before {background-image:url('https://i.imgur.com/KGrf90v.png');}

.sub-design-title {display:block; position:relative; font-family: sans-serif; font-size:13px; font-weight:800; margin-top:20px; margin-bottom:10px; background:url('https://i.imgur.com/PQC0K0S.png') no-repeat 50% 50%; background-size:contain; height:40px; text-align:center; line-height:40px;}
.sub-design-title.ty2 {background-image:url('https://i.imgur.com/eCvmnOn.png'); background-size: 540px 40px; width:540px;}
.sub-design-title.ty3 {background-image:url('https://i.imgur.com/46qPhvI.png'); background-size: 300px 40px; width:300px;}

.floot-roll-box {display:block; clear:both; overflow:hidden;}
.floot-roll-box .roll-left {width:30%; float:left;}
.floot-roll-box .roll-right {width:68%; float:right; margin-right:1px;}
.floot-roll-box table {width:100%; height:100px;}
.floot-roll-box table td {vertical-align:middle;}
.floot-roll-box .roll-left button[type=action],
.floot-roll-box .roll-right button[type=roll] {height:20px; width:20px; line-height:20px; font-size:1.1em; margin:0; padding:0;}
.floot-roll-box .roll-left button[type=action]:before {font-family: "dicefontd20";
    content: "t";}


.spell-table {position:relative; padding:26px 20px 20px; background:url('https://i.imgur.com/D6OiWLf.png') no-repeat 50% 50%; background-size:100% 100%; box-sizing:border-box;}
.spell-table table {width:100%; vertical-align:middle;}
.spell-table th {background: white}
.spell-table .dim th {background: #e4e4e4}
.spell-table .soul-spec {background:url('https://i.imgur.com/C7AvDtk.png') no-repeat 0 50%; background-color: white; background-size:auto 100%; padding-left:20px;}
.spell-table .soul-spec input {height:30px;}
.spell-table .table-title th {vertical-align: top;}

.other-book-box {clear:both; overflow:hidden; display:block;}
.other-book-box .sub-design-title {font-size:16px;}
.other-book-box .book-left {width:540px; float:left;}
.other-book-box .relation-right {width:300px; float:right;}


/* ==== CLASSES ==== */
.underlined{
    border-bottom: 1px solid black;
}
.bordered{
    border: 1px solid black;
    margin-bottom: 4px;
}
.titled{
    margin-top: -13px;
    padding-top: 25px;
}
.block{display: block;}
.inbox{
    padding-left:2px;
    padding-bottom: 20px;
    margin-bottom: 12px;
    text-align: left;
}
.inboxright{
    padding-bottom: 20px;
    text-align: right;
}
.indent{
    text-indent: 10px;
}
.padindent{
    padding-left: 10px;
}
.margindent {
    margin-left: 10px;
}
.bold{
    font-weight: bold;
}
.center{
    text-align: center;
}
.invisible {
    opacity: 0;
}




/* ==== DIVS ==== */

div.fullpc{
    display: block;
    vertical-align: top;
    text-align: left;
    width: 850px;
    max-width: 850px;
    background-color: white;
    font-family: 'Times New Roman';
    color: black;
}

div.myrow{
    width: 100%;
    text-align: left;
}
div.myrow.right{
    text-align: right;
}
div.myrow.right input,
div.myrow.right select {
    font-size:9.5pt;
}
.bordered.titled.inboxright div.myrow.right{
    font-size: 1pt;
}
div.myrow.center{
    text-align: center;
}
div.colhalf{
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
div.col1third{
    display: inline-block;
    vertical-align: top;
    width: 276px;
    max-width: 25%;
    margin: 1px;
    text-align: center;
}
div.col2third{
    display: inline-block;
    vertical-align: top;
    width: 560px;
    max-width: 37%;
}
.blacklabel{
    display: inline-flex;
    align-items: center;
    background-color: black;
    color: white;
    text-align: center;
    vertical-align: top;
    height: 24px;
    text-transform: uppercase;
    border: none;
}
.blacklabel.pnty {
    flex-flow: row nowrap;
    justify-content: space-between;
}
.blacklabel.sqr {
    flex-flow: column wrap;
    justify-content: center;
}
.blacklabel.right {
    flex-flow: row nowrap;
    justify-content: flex-end;
}
.blacklabel .big {
    display: inline-block;
    line-height: 1.0em;
    font-weight: bold;
	font-size: 15px;
}
.blacklabel .big.only {
    flex-grow: 2;
}
.blacklabel .med {
    display: block;
    font-size: 0.80em;
    line-height: 0.85em;
	overflow-wrap: break-word;
}
.blacklabel .med.only {
    margin-top: 2px;
}
img.brdleft,
img.brdright {
    display: inline-block;
    height: inherit;
}
img.brdleft {margin-right: 4px;}
img.brdright {margin-left: 4px;}
div.identity{
    display: inline-block;
    margin-left: 4px;
}
div.boxed.greybg{
    background-color: #DDD;
}
div.subcol {
    display: inline-block;
    vertical-align: top;
}
div.initiative {display: block;}
.identity span{
    display: block;
    margin-left: 2px;
    text-transform: capitalize;
    font-size: 1.03em;
    color: black;
}
.identity input[type=text].medium {width: 100px;}
.identity input[type=text].small {width: 46px;}
.initiative .blacklabel {width: 70px;}

.initiative div.boxed {margin-left: 5px;}

.magictable {display: flex;flex-direction: row;align-items: center;column-gap: 2px;}

.acitems .item {width: 190px;}
.acitems .equipped {width: 16px;}
.acitems .ac,
.acitems .flat,
.acitems .touch,
.acitems .natural,
.acitems .deflection,
.acitems .dodge,
.acitems .check,
.acitems .max,
.acitems .spellfailure {width: 32px;}
.acitems .spacer.type,
.acitems .type {width: 63px;}
.acitems .lab.totals {width: 90px;}
.acitems .lab.shield,
.acitems .lab.armor {width: 50px;}
.repeating_acitems_container div.myrow {padding-left: 16px; height: 21px;}

.attacks {text-align: right;}
.attacks div.padindent {padding-left: 22px;}
.attacks .dmgbase {width: 120px;}
.attacks .dmgtype {width: 120px;}
.attacks span.lbl.atk {
    width: 55px;
    vertical-align: bottom;
}
.attacks .blacklabel .weapon-title {width: 180px;}
.attacks .blacklabel .atk-title {width: 105px;}
.attacks .blacklabel .damage-title {width: 50px;}
.attacks .blacklabel .ammo-title {width: 40px;}
div.attack {margin-bottom: 2px;}
.attack .weapon {
    display: inline-block;
    width: 208px;
    text-align: left;
    font-size: 1.1em;
    padding-left: 2px;
    vertical-align: top;
}
.attack .weapon .vs {
    width: auto;
    text-align: right;
    font-family: sans-serif;
    font-size: 0.8em;
    white-space: pre;
    vertical-align: top;
}
.attacks .atk {
    display: inline-block;
    width: 105px;
    vertical-align: top;
}
.attacks .damage {
    display: inline-block;
    width: 50px;
    vertical-align: top;
}
.attacks .atk .pseudoattr,
.attacks .damage .pseudoattr {
    text-align: center;
    font-family: sans-serif;
    font-size: 0.95em;
}
.attacks .ammo {width: 40px;}
.attacks select.type {width: 55px;}
.attacks select.vs {width: 90px;}
.attacks select.dmg {width: 70px;}

.skills .blacklabel {width: 85%;}
.skills .blacklabel.totalranks {
    width: 165px;
    margin-left: 133px;
}
.skills .name {width: 180px;}
.skill .number,
.spellcasting .number,
.spells .number {
    width: 30px;
    text-align: center;
}
.skill span.perform,
.skill span.craft,
.skill span.knowledge,
.skill span.profession,
.skill span.custom {width: 60px;}
.skill span.custom.only {width: 180px;}
.skill input[type="text"].craft,
.skill input[type="text"].knowledge,
.skill input[type="text"].perform,
.skill input[type="text"].profession,
.skill input[type="text"].custom {width: 117px;}

.spellcasting .perlevel {margin-bottom: 1px;}
.spellcasting .perlevel .lab,
.spellcasting .perlevel .level {
    width: 40px;
    margin: 0px 1px 0px 1px;
}
.spellcasting .perlevel .boxed {margin: 0px 1px 0px 1px;}
.spells .blacklabel {width: 60%;}
div.spell {margin-top: 2px;}
.spell .lab {text-align: left;}
span.std {width: 80px;}
input[type="text"].std {
    font-size: 1.2em;
    line-height: 1.2em;
}
div.ability,
div.acvalues,
div.initiative,
div.repeating_acitems_container,
div.saves,
div.babs,
div.attackmods,
div.defenses,
div.attack,
div.skill,
div.concentration,
div.spell,
div.statblock,
div.encumbrance,
div.speeds,
div.gearitem,
div.skills,
div.attacks {
    position: relative;
}

.spell input[type="text"].std {width: 180px;}
.fullpc .feat input[type="text"].std,
.fullpc .ability input[type="text"].std {width: 320px;}
.statblock .feat input[type="text"].std {width: 210px;}
.autoex.std {
    display: inline-block;
    vertical-align: bottom;
}
.spell .autoex.std {
    width: 180px;
    max-width: 180px;
}
.fullpc .feat .autoex.std {
    width: 320px;
    max-width: 320px;
}
.statblock .feat .autoex.std {
    width: 210px;
    max-width: 210px;
}
.spell span.med {width: 95px;}
.spell input[type="text"].med {
    width: 150px;
    font-size: 1.2em;
    line-height: 1.2em;
}

.statblock .npcatk .attack {
    display: inline-block;
    position: relative;
}
.spells .pseudoattr.sml {width: 25px;}
.fullpc .money .blacklabel,
.fullpc .feats .blacklabel,
.fullpc .traits .blacklabel,
.fullpc .gear .blacklabel.title {width: 95%;}
.fullpc .gear .blacklabel.total {
    width: calc(100% + 2px);
    padding-right: 2px;
    margin-top: 2px;
    margin-right: -2px;
    margin-bottom: -2px;
}
.gear .qty  {width: 50px;}
.gear .total {width: 35px;}
.gear .weight {width: 85px;}
.gear .wtotal {
    width: 45px;
    color: black;
}
.gearitem input.item {width: 260px;}
.gear span.overload {color: white;}
.gear input.overload[value="over"] + span.overload {
    font-weight: bold;
    color: #BE202E;
    text-transform: uppercase;
}

.encumbrance .lab.std {width: 75px;}

/* ===== SPANS ===== */
span.roundblack {
    background-color: black;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    font-size: 0.8em;
    height: 12px;
    width: 12px;
    line-height: 12px;
    vertical-align: bottom;
    text-align: center;
}
span.spacer{
    min-width: 10px;
    text-align: center;
}
span.lab {
    text-align: center;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: 0.84em;
    line-height: 1.1em;
    text-transform: capitalize;
    white-space: pre;
    color: black;
}
.lab.right{text-align: right;}
.abilities .lab:first-child {width: 80px;}
.abilities .lab {width: 50px;}
.hpvalues .lab {width: 40px;}
.initiative .lab {width: 45px;}
.acvalues .lab,
.saves .lab,
.babs .lab,
.attackmods .lab,
.defenses .lab,
.speeds .lab {width: 40px;}

.lbl {
    text-align: left;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: 0.95em;
    line-height: 1.2em;
    text-transform: capitalize;
    white-space: pre;
}
.lbl.right {text-align: right;}
.lbl.upper {text-transform: uppercase;}

span.pseudoattr {
    font-size: 1.2em;
    line-height: 16px;
    height: 18px;
    vertical-align: bottom;
    white-space: pre-line;
    overflow: hidden;
}
div.boxed span.pseudoattr {
    min-width: 36px;
    margin-top: 3px;
}
.acitems div.boxed {width: 28px;}
.acitems div.boxed span.pseudoattr {
    min-width: 26px;
    width: 26px;
}

.skills .lab.class {width: 20px;}
.skills .lab.name {
    width: 176px;
    text-align: left;
}
.skills .lab.total,
.skills .lab.ability,
.skills .lab.ranks,
.skills .lab.misc {width: 39px;}
.skills .lab.temp {width: 37px;}
.skill div.skillability {display: none;}
.skill input.skillability[value="strength"] + div.skillability,
.skill input.skillability[value="dexterity"] + div.skillability {display: inline-block;}

.fullpc .feat,
.fullpc .ability {margin-top: 2px;}

.statblock .senses {width: 350px;}
.statblock .type {width: 325px;}
.statblock .aura {width: 458px;}
.statblock .skill {
    width: 115px;
    text-align: right;
}
span.npc-section {
    display: block;
    width: 100%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 1.15em;
    margin-top: 10px;
    padding-left: 2px;
}

.multiclass {
    text-align: left;
    white-space: nowrap;
}
.multiclass .lab {
    width: 30px;
    font-weight: bold;
}
.labline.multiclass.bord {border-bottom: 1px dotted #CCC;}
.multiclass .lab.spellcasting {
    width: 176px;
    text-transform: uppercase;
    text-align: left;
}
.multiclass .lab.class {width: 140px;}
.multiclass .lab.fav {width: 15px;}
.multiclass .lab.hd {width: 24px;}
.multiclass .lab.spell,
.multiclass .spell {
    width: 20px;
    text-align: center;
}
.multiclass .ability {width: 70px;}
.multiclass .lab.fail {
    width: 20px;
    text-align: left;
}
.multiclass .boxed {width: 30px;}

/* ===== INPUTS ===== */
input, textarea{
    background-color: transparent;
    text-align:center;
    display: inline-block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family: '';
    font-size: 1.0em;
    color: rgb(85, 85, 85);
    border: none;
    border-radius: 0;
    box-shadow: none;
    resize:none;
}
input:focus, textarea:focus, select:focus{
    background-color: #f5f5f5;
    outline: none;
}

input[type="text"].right {text-align: right;}
input[type="text"].spsml {width: 20px;}
input[type="text"].sml {width: 30px;}
input[type="text"].small {width: 45px;}
input[type="text"].smlmed {width: 80px;}
input[type="text"].medium {width: 140px;}

input[type="number"]{
    text-align: center;
    vertical-align: middle;
}
input[type="number"].nospin::-webkit-inner-spin-button,
input[type="number"].nospin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
input[type=number].nospin {
    -moz-appearance:textfield;
}
input[type="number"].spsml {width: 20px;}
.npc-display input[type="number"].spsml {vertical-align: top;}
input[type="number"].sml {width: 30px;}
div.boxed input[type="number"]{
    width: 36px;
    height: 18px;
    margin-top: 2px;
}
.identity input[type="number"],
.attacks input[type="number"],
.spells input[type="number"],
.statblock input[type="number"].medium {width: 35px;}
.repeating_acitems_container input[type="number"] {width: 28px;}
.spells input[type="number"].sml {width: 25px;}
.skill input[type="number"],
.spellcasting input[type="number"] {width: 30px;}
input[type="number"].underlined,
input[type="text"].underlined {vertical-align: bottom;}

select {
    width: auto;
    text-align: center;
    text-align-last:center;
    height: 19px;
    line-height: 1.1em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: capitalize;
    vertical-align: bottom;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-size: 1.0em;
    font-family: sans-serif;
    border: none;
    border-radius: 0;
    box-shadow: none;
    resize: none;
    background: transparent;
}
select.alignment {
    width: 110px;
}
select.size {
    width: 80px;
}
.repeating_acitems_container select{
    width: 50px;
}

.myrow .spell-name {flex:1;width:100px;}
.myrow .spell-cost {width:52px;}
.myrow .spell-type,
.myrow .spell-skill,
.myrow .spell-target {width:58px;}
.myrow .spell-charge,
.myrow .spell-correction {width:45px;}

.magictable input:last-child {
	margin: 0px 7px 0px 5px;
}
.magictable input:first-child {
	margin: 0px 0px 0px 18px;
}

/* ===== ABILITIES ===== */
.baseattr {
    opacity: 0;
    height: 0px;
    width: 0px;
    pointer-events: none;
    display: inline;
    position: absolute;
}
.finalattr {
    display: inline-block;
}
.boxed:hover .baseattr,
.boxed .baseattr:focus {
    opacity: 1;
    width: 36px;
    height: 18px;
    pointer-events: auto;
    position: static;
}
.boxed:hover .finalattr,
.boxed .baseattr:focus ~ .finalattr {
    display: none;
}
/* ===== FLAGS ===== */
.boxed .attr-flag:not([value="0"]) + span,
.spellcasting .attr-flag:not([value="0"]) + span,
.spells .attr-flag:not([value="0"]) + span.prepared {color: #501414;}
.boxed .attr-flag:not([value="0"]) + span:after,
.spellcasting .attr-flag:not([value="0"]) + span:after,
.spells .attr-flag:not([value="0"]) +  span.prepared:after {
    content: "e";
    font-family: "Pictos";
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    margin-left: 1px;
}
.boxed .attr-flag:not([value="0"]) + .finalattr{color: #501414;}
.boxed .attr-flag:not([value="0"]) + .finalattr:after{
    content: "e";
    font-family: "Pictos";
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    margin-left: 1px;
}
.skill .attr-flag:not([value="0"]) + span {color: #501414;}
.skill .attr-flag:not([value="0"]) + span:after{
    font-family: "Pictos";
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 1px;
}
.skill .attr-flag[value="1"] + span:after {
    content: "U";
}
.skill .attr-flag[value="2"] + span:after {
    content: "e";
}
.skill .attr-flag[value="3"] + span:after {
    content: "Ue";
}
.spell .attr-flag + span{
    position: absolute;
    right: 75px;
}
.spell .attr-flag:not([value="0"]) + span:after{
    font-family: "Pictos Three";
    font-size: 1.2em;
    font-weight: bold;
    color: #BE202E;
    background: #DDD;
    content: "g";
}
.spell .domain-flag + span {
    margin-left: 2px;
}
.spell .domain-flag:not([value="0"]) + span:after {
    font-family: "Times New Roman";
    font-size: 0.60em;
    font-weight: normal;
    color: black;
    background: transparent;
    content: "D";
    vertical-align: super;
    line-height: 0.9em;
}

/* ===== BUTTONS ===== */
button[type="compendium"].myrol,
button[type="roll"].myrol {
    text-align: center;
    text-decoration: none;
    background:none;
    background-image:none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    padding: inherit;
    margin: 2px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: inherit;
    text-align: inherit;
    vertical-align: inherit;
    border-radius: none;
}
button[type="compendium"].myrol:hover,
button[type="roll"].myrol:hover{
    color: #aaa;
}
.charsheet .spell-table button[type="roll"].myrol:before, .blacklabel button[type="roll"].myrol.big:before{
    content: none;
}
.charsheet .spell-table button[type="roll"].myrol{
	font-size: 13px;
}
.blacklabel button[type="roll"].myrol.big {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    line-height: 1.0em;
}
.blacklabel button[type="roll"].myrol.big.only {
    flex-grow: 2;
}
button[type="roll"].myrol.margindent {margin-left: 14px;}
.statblock  button[type="roll"].myrol{margin: 0px 0px 0px 0px;}
button[type="roll"].myrol.underl {
    margin-left: 14px;
    border-bottom: 1px dotted #999;
}
.spells .spell button[type="roll"].myrol.underl,
.spelllike .spell button[type="roll"].myrol.underl {font-style: italic;}
.spells .spell button[type="roll"].myrol.underl {
    margin-right: 2px;
    border-bottom: 1px dotted transparent;
}
button[type="roll"].myrol.underl:hover,
.spells .spell button[type="roll"].myrol.underl:hover {border-bottom: 1px dotted #BE202E;}

.statblock .attack .lbl.atk {width: 55px;}
.statblock .prep {
    width: 55px;
    text-align: center;
}

button[type="compendium"].myrol {
    display: none;
}
.fromcompendium:not([value=""]) + button[type="compendium"].myrol {
    display: inline-block;
}

/* ===== PSEUDO CHECKS and RADIOS ===== */
input[type="checkbox"].pseudocheck,
input[type="radio"].pseudocheck {
    opacity: 0;
    width: 13px;
    cursor: pointer;
    z-index: 10;
    margin-top: 3px;
    line-height: 13px;
}
input[type="checkbox"].pseudocheck + span,
input[type="radio"].pseudocheck + span {
    font-size: 13px;
    line-height: 13px;
    white-space: nowrap;
    display: inline-block;
    margin-left: -13px;
}
input[type="checkbox"].pseudocheck + span::before,
input[type="radio"].pseudocheck + span::before {
    text-align: middle;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
}
input[type="checkbox"].pseudocheck + span::before {
    content: "��";
    line-height: 18px;
    font-size: 18px;
}
input[type="checkbox"].pseudocheck:checked + span::before {
    content: "��";
}
input[type="radio"].pseudocheck + span {
    border: 1px solid black;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    vertical-align: bottom;
}
input[type="radio"].pseudocheck + span::before {
    content: "";
    margin-top: -4px;
}
input[type="radio"].pseudocheck:checked + span::before {
    content: "��";
}
/* ==== LEFT FILLED RADIO  ==== */
.dots {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.spell div.dots {
    width: 70px;
    text-align: left;
    vertical-align: top;
}
.dots input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: 1;
}
.dots input[type="radio"],
.dots input[type="radio"] + span {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 3px -1px 0px -1px;
}
.dots input[type="radio"] + span {
    vertical-align: top;
    position: relative;
    background: transparent;
}
.dots input[type="radio"]:not([value="0"]) + span {
    border: 1px solid black;
    border-radius: 50%;
}
.dots input[type="radio"]:not([value="0"]) + span::before {
    content: "��";
    position: absolute;
    top: -3px;
    left: 0px;
}
.dots input[type="radio"]:checked ~ input[type="radio"] + span::before {
    content: " ";
}
.dots input[type="radio"][value="0"] + span:before {
    content: "��";
    font-family: sans-serif;
    font-size: 1.2em;
    line-height: 0.9em;
    position: relative;
}
.dots input[type="radio"][value="0"]:hover + span:before {
    font-weight: bold;
    color: #BE202E;
}
/* ===== PSEUDO TABS ===== */
div.tabmain,
div.tabadd,
div.tabspell,
div.tabconf {
    display: none;
    text-align: center;
    width: 100%;
    border-top: 1px solid black;
    padding-top: 4px;
}
input.tabmain:checked ~ div.tabmain{
    display: block;
}
input.tabadd:checked ~ div.tabadd{
    display: block;
}
input.tabspell:checked ~ div.tabspell{
    display: block;
}
input.tabconf:checked ~ div.tabconf{
    display: block;
}
input.tabmain,
input.tabadd,
input.tabspell,
input.tabconf{
    margin: 0;
    margin-top: -4px;
    margin-bottom: -4px;
    padding: 0;
    display: inline-block;
    opacity: 0;
    width: 110px;
    height: 20px;
    z-index: 2;
}
input.tabmain + span,
input.tabadd + span,
input.tabspell + span,
input.tabconf + span{
    color: #666666;
    background-color: #BBBBBB;
    font-size: 0.85em;
    text-align:center;
    display: inline-block;
    width: 110px;
    height: 20px;
    margin: 0;
    margin-left: -110px;
    margin-right: -5px;
    padding:0;
    margin-bottom: -1px;
    text-transform: uppercase;
    border: 1px solid #666666;
    border-bottom-color: black;
    z-index: 1;
}
input.tabmain:checked + span,
input.tabadd:checked + span,
input.tabspell:checked + span,
input.tabconf:checked + span{
    font-weight: bold;
    color: black;
    background-color: white;
    border-left-color: black;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: white;
}
/* ===== OPTIONS ===== */
.options-flag {
    opacity: 0;
    position: absolute;
    width: 16px;
    min-height: 16px;
    z-index: 2;
}
input.options-flag {
	margin-left: 2px;
}
.options-flag + span {
    position: absolute;
    white-space: nowrap;
    width: 16px;
    height: 16px;
    font-size: 16px;
    font-family: pictos;
    color: #BBBBBB;
    cursor: pointer;
    margin-top: 0px;
	margin-left: 2px;
    display: none;
}
.options-flag:hover + span,
.options-flag:checked + span {
    color: #C3996B;
    display: block;
}
.abilities .options-flag,
.abilities .options-flag + span,
.acvalues .options-flag,
.acvalues .options-flag + span,
.initiative .options-flag,
.initiative .options-flag + span,
.saves .options-flag.fortitude,
.saves .options-flag.fortitude + span,
.babs .options-flag.bab,
.babs .options-flag.bab + span,
.attackmods .options-flag.melee,
.attackmods .options-flag.melee + span,
.defenses .options-flag.cmd,
.defenses .options-flag.cmd + span,
.attacks .options-flag,
.attacks .options-flag + span,
.concentration .options-flag,
.concentration .options-flag + span,
.spell .options-flag,
.spell .options-flag + span,
.speeds .options-flag,
.speeds .options-flag + span {
    top: -2px;
    left: 5px;
}
.saves .options-flag.reflex,
.saves .options-flag.reflex + span {
    top: -2px;
    left: 148px;
}
.saves .options-flag.will,
.saves .options-flag.will + span {
    top: -2px;
    left: 281px;
}
.babs .options-flag.cmb,
.babs .options-flag.cmb + span {
    top: -2px;
    left: 262px;
}
.attackmods .options-flag.ranged,
.attackmods .options-flag.ranged + span {
    top: -2px;
    left: 215px;
}
.defenses .options-flag.sr,
.defenses .options-flag.sr + span {
    top: -2px;
    left: 174px;
}
.abilities .ability:hover .options-flag + span,
.acvalues:hover .options-flag + span,
.initiative:hover .options-flag + span,
.acitem:hover .options-flag + span,
.saves:hover .options-flag + span,
.babs:hover .options-flag + span,
.attackmods:hover .options-flag + span,
.defenses:hover .options-flag + span,
.attack:hover .options-flag + span,
.skill:hover .options-flag + span,
.concentration:hover .options-flag + span,
.spell:hover .options-flag + span,
.statblock .head-info:hover .options-flag + span,
.statblock .npcatk .attack:hover .options-flag + span,
.feat:hover .options-flag + span,
.ability:hover .options-flag + span,
.metamagic:hover .options-flag + span,
.encumbrance:hover .options-flag + span,
.speeds:hover .options-flag + span {
    display: block;
}

.options,
.options-fortitude,
.options-reflex,
.options-will,
.options-bab,
.options-cmb,
.options-melee,
.options-ranged,
.options-cmd,
.options-sr {
    display: none;
    margin-top: 2px;
    border-top: 1px dotted rgba(195,153,107,0.2);
    border-bottom: 2px dotted #C3996B;
	margin:5px 10px;
}
.fullpc .options,
.options-fortitude,
.options-reflex,
.options-will,
.options-bab,
.options-cmb,
.options-melee,
.options-ranged,
.options-cmd,
.options-sr {
    background-color: rgb(250,250,250);
}
.spelllike .options,
.npcatk .options {
    background-color: rgb(250,250,250);
}

.options-flag:checked ~ .options,
.options-flag.fortitude:checked ~ .options-fortitude,
.options-flag.reflex:checked ~ .options-reflex,
.options-flag.will:checked ~ .options-will,
.options-flag.bab:checked ~ .options-bab,
.options-flag.cmb:checked ~ .options-cmb,
.options-flag.melee:checked ~ .options-melee,
.options-flag.ranged:checked ~ .options-ranged,
.options-flag.cmd:checked ~ .options-cmd,
.options-flag.sr:checked ~ .options-sr {
    display: inherit;
}

.optional-flag,
.optional-flag0 {display: none;}
.optional,
.tabspell.optional.inl,
.tabspell.optional.inl + span.optional.inl,
.spells .col1third.optional.inl {display: none;}
.optional-flag:not([value=""]) + .optional.blk,
.optional-flag0:not([value="0"]) + .optional.blk {display: block;}
.optional-flag:not([value=""]) + .optional.inl,
.optional-flag0:not([value="0"]) + .optional.inl,
.optional-flag0:not([value="0"]) + .tabspell.optional.inl,
.optional-flag0:not([value="0"]) + .tabspell.optional.inl + span.optional.inl,
 .spells .optional-flag0:not([value="0"]) + .col1third.optional.inl {display: inline-block;}

 .list-checker {
	 text-align:left; height: 100%; padding-top: 3px;
 }
 .list-checker .options-flag + span {
	 display: inline-block;
	 text-transform: none;
 }
 .list-checker .options-flag:checked + span {
	 display: inline-block;
 }

/* ===== AUTO EXPAND TEXTAREA ===== */
.autoex {
    position: relative;
    cursor: text;
    font-size: 1.1em;
    line-height: 1.4em;
    min-height: 1.4em;
    text-align: left;
}
.autoex span {
    visibility: hidden;
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    text-align: inherit;
    min-height: inherit;
}
.autoex textarea {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.5em;
    white-space: pre-wrap;
    text-align: inherit;
    min-height: inherit;
}

.hpvalues.autoex {
    font-size: 1.15em;
    line-height: 1.15em;
}
/* ===== REPEATING SECTIONS CTRL ===== */
.fullpc .repcontrol {
    margin-top: 2px;
    min-height: 27px;
    width: 90%;
    text-align: center;
}
.repcontrol .btn {
    border: none;
    color: white !important;
    background: none;
    box-shadow: none;
    font-size: 0;
}
.fullpc .repcontrol .btn {padding: 0px 0px 0px 0px;}
.statblock .repcontrol .btn {
    padding: 0px 0px 0px 0px;
    margin-left: 10px;
    display: inline-block;
    width: 25px;
    font-size: 0px;
}

.repcontrol .btn:focus {outline: 0;}
.repcontrol .repcontrol_add:before {
    content: '&';
    font-family: pictos;
    color: black;
    display: inline-block;
}
.fullpc .repcontrol  .repcontrol_add:before,
.fullpc .repcontrol .repcontrol_edit:after {
    border: 1px solid black;
    border-radius: 50%;
    font-size: 13px;
    padding: 3px;
    height: 12px;
    width: 12px;
    line-height: 12px;
}
.statblock .repcontrol .repcontrol_add:before,
.statblock .repcontrol .repcontrol_edit:after {
    font-size: 12px;
    padding: 2px;
    height: 10px;
    width: 10px;
    line-height: 10px;
}

.repcontrol .repcontrol_edit:after {
    content: '(';
    font-family: pictos;
    color: black;
    display: inline-block;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
    content: ')';
    vertical-align: bottom;
}

.repcontrol .repcontrol_edit:hover:after,
.repcontrol .repcontrol_add:hover:before {
    color: #C3996B;
    border-color: #C3996B;
}
.repcontainer .repitem .itemcontrol {z-index: 10;}
.repcontainer .repitem .itemcontrol .repcontrol_del {
    float: right;
    font-size: 10px;
    padding: 0px;
    height: 18px;
    width: 18px;
}
.repcontainer .repitem .itemcontrol .repcontrol_move {
    cursor: move;
    float: left;
    font-size: 10px;
    padding: 0px;
    height: 18px;
    width: 18px;
}
.statblock .npcatk .repitem,
.statblock .npcatk .repcontrol,
.statblock .npcatk .repcontainer {vertical-align: top;}
.statblock .npcatk .repitem {display: inline-block;}
.statblock .npcatk .repcontrol {display: inline-block;}
.statblock .npcatk .repcontainer {display: inline;}
.statblock .npcatk.melee .repcontainer,
.statblock .npcatk.feats .repcontainer {max-width: 560px;}
.statblock .npcatk.ranged .repcontainer {max-width: 545px;}
.statblock .npcatk.special .repcontainer {max-width: 500px;}
.statblock .npcatk.spells .repcontainer {max-width: 540px;}

/* Templates Frame */
.sheet-rolltemplate-modulation-table,
.sheet-rolltemplate-fate-mutation-table,
.sheet-rolltemplate-ordinary-scene-table,
.sheet-rolltemplate-fumble-table,
.sheet-rolltemplate-event-table {
	width: 100%;
	max-width: 500px;
	display: table;
	table-layout: fixed;
	word-break: keep-all;
	text-align: center;
}

.sheet-rolltemplate-modulation-table .sheet-template-top,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top,
.sheet-rolltemplate-fumble-table .sheet-template-top,
.sheet-rolltemplate-event-table .sheet-template-top {
	height: 25px;
	padding: 0px;
	margin: 0px;
	display: table-row;

}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-left {
	width: 30px;
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100px;
}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-center {
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/thline.png");
	background-repeat: repeat-x;
	background-size: auto 40px;
	background-position: top;
}
.sheet-rolltemplate-modulation-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-top .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-top .sheet-right {
	width: 30px;
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100px;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle,
.sheet-rolltemplate-fumble-table .sheet-template-middle,
.sheet-rolltemplate-event-table .sheet-template-middle {
	display: table-row;
}

.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-left {
	width: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_v_line.png");
	background-repeat: repeat-y;
	background-size: 45px auto;
	background-position: left;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-center {
	display: table-cell;
	background: white;
}
.sheet-rolltemplate-modulation-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-middle .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-middle .sheet-right {
	width: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_v_line.png");
	background-repeat: repeat-y;
	background-size: 45px auto;
	background-position: right;
}

.sheet-rolltemplate-modulation-table .sheet-template-bottom,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom,
.sheet-rolltemplate-fumble-table .sheet-template-bottom,
.sheet-rolltemplate-event-table .sheet-template-bottom {
	height: 25px;
	display: table-row;
}

.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-left,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-left {
	width: 30px;
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100px;
}

.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-center,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-center {
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/thline.png");
	background-repeat: repeat-x;
	background-size: auto 40px;
	background-position: bottom;
}

.sheet-rolltemplate-modulation-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-fate-mutation-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-ordinary-scene-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-fumble-table .sheet-template-bottom .sheet-right,
.sheet-rolltemplate-event-table .sheet-template-bottom .sheet-right {
	width: 30px;
	height: 25px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/t_corner.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100px;
}

/* asdfasdfasdfasdf */
/* asdfasdfasdfasdf */
/* asdfasdfasdfasdf */

.sheet-rolltemplate-Magic {
	width: 100%;
	max-width: 500px;
	display: table;
	table-layout: fixed;
	word-break: keep-all;
	text-align: center;
}

.sheet-rolltemplate-Magic .sheet-template-top {
	height: 30px;
	padding: 0px;
	margin: 0px;
	display: table-row;
}

.sheet-rolltemplate-Magic .sheet-template-top .sheet-left {
	width: 30px;
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_1.png");
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

.sheet-rolltemplate-Magic .sheet-template-top .sheet-center {
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_2.png");
	background-repeat: repeat-x;
	background-size: auto 30px;
}

.sheet-rolltemplate-Magic .sheet-template-top .sheet-right {
	width: 30px;
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_1_3.png");
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

.sheet-rolltemplate-Magic .sheet-template-middle {
	display: table-row;
}

.sheet-rolltemplate-Magic .sheet-template-middle .sheet-left {
	width: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_2_1.png");
	background-repeat: repeat-y;
	background-size: 30px auto;
}

.sheet-rolltemplate-Magic .sheet-template-middle .sheet-center {
	display: table-cell;
	background: white;
}

.sheet-rolltemplate-Magic .sheet-template-middle .sheet-right {
	width: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_2_3.png");
	background-repeat: repeat-y;
	background-size: 30px auto;
}

.sheet-rolltemplate-Magic .sheet-template-bottom {
	height: 30px;
	display: table-row;
}

.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-left {
	width: 30px;
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_1.png");
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-center {
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_2.png");
	background-repeat: repeat-x;
	background-size: auto 30px;
}

.sheet-rolltemplate-Magic .sheet-template-bottom .sheet-right {
	width: 30px;
	height: 30px;
	display: table-cell;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Magica_Logia/img/rt_3_3.png");
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

.sheet-rolltemplate-Magic .sheet-divider,
.sheet-rolltemplate-modulation-table .sheet-divider,
.sheet-rolltemplate-fate-mutation-table .sheet-divider,
.sheet-rolltemplate-ordinary-scene-table .sheet-divider,
.sheet-rolltemplate-fumble-table .sheet-divider,
.sheet-rolltemplate-event-table .sheet-divider {

	height: 0px;
	border-bottom: 1px solid #999;
}

.sheet-rolltemplate-Magic .sheet-title,
.sheet-rolltemplate-modulation-table .sheet-title,
.sheet-rolltemplate-fate-mutation-table .sheet-title,
.sheet-rolltemplate-ordinary-scene-table .sheet-title,
.sheet-rolltemplate-fumble-table .sheet-title,
.sheet-rolltemplate-event-table .sheet-title {
	font-size: 1.1em;
	font-weight: bold;
	color: #222222;
	padding-bottom: 7px;
	text-align: center;
}

.sheet-rolltemplate-Magic .sheet-subtitle,
.sheet-rolltemplate-modulation-table .sheet-subtitle,
.sheet-rolltemplate-fate-mutation-table .sheet-subtitle,
.sheet-rolltemplate-ordinary-scene-table .sheet-subtitle,
.sheet-rolltemplate-fumble-table .sheet-subtitle,
.sheet-rolltemplate-event-table .sheet-subtitle {
	text-align: center;
	font-size: 1.2em;
	font-family: 'Noto Serif KR', serif;
    text-align: center;
    color: #fff;
    background: #222;
    padding: 5px 20px;
	margin: 3px 0px;
}

.sheet-rolltemplate-Magic .sheet-desc,
.sheet-rolltemplate-Magic .sheet-desc .inlinerollresult,
.sheet-rolltemplate-modulation-table .sheet-desc,
.sheet-rolltemplate-fate-mutation-table .sheet-desc,
.sheet-rolltemplate-ordinary-scene-table .sheet-desc,
.sheet-rolltemplate-fumble-table .sheet-desc,
.sheet-rolltemplate-event-table .sheet-desc {
	background-color: transparent;
	border: 0px;
	font-size: 13px;
	padding-top: 10px;
	font-weight: normal;
	color: #404040;
}
.sheet-rolltemplate-modulation-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-fate-mutation-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-ordinary-scene-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-fumble-table .sheet-desc .inlinerollresult,
.sheet-rolltemplate-event-table .sheet-desc .inlinerollresult {
	background-color: transparent;
	border: 0px;
}

.sheet-rolltemplate-Magic .sheet-skillname {
	text-align: center;
	font-size: 1.2em;
	font-family: 'Noto Serif KR', serif;
    text-align: center;
    color: #222;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
    padding: 5px 20px;
	margin: 3px 0px;
}

.sheet-rolltemplate-Magic .sheet-recite {
	font-size: 13px;
	font-family: 'Noto Serif KR', serif;
	padding: 20px 15px;
	margin-top: 10px;
    background: #f8f8f8;
}

.sheet-rolltemplate-Magic .sheet-recite .inlinerollresult {
	font-size: 13px;
}

.sheet-rolltemplate-Magic .sheet-target {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 3px;
	font-size: 0.95em;
	font-weight: bold;
}
.sheet-rolltemplate-Magic .sheet-spec {
	padding-top: 7px;
}
.sheet-rolltemplate-Magic .sheet-spec span {
	font-size: 0.9em;
}

.sheet-rolltemplate-Magic .sheet-random {
	display: grid;
	grid-template-columns: 1fr;
    border: 1px dotted #999;
    padding: 3px;
    margin: 10px;
	margin-top: 15px;
	text-decoration: none;
}
.sheet-rolltemplate-Magic .sheet-random.sheet-button {
    border: 3px double #999;
    background: #fafafa;
}

.sheet-rolltemplate-Magic .sheet-random.sheet-button:hover {
	background: #eeeeee;
	color: #dc143c;
	cursor: pointer;
}

.sheet-rolltemplate-Magic .sheet-random a,
.sheet-rolltemplate-Magic .sheet-random div {
   grid-row-start: 1;
   grid-column-start: 1;
   padding: 5px;
   z-index: 49;
}

.sheet-rolltemplate-Magic .sheet-random a {
	display: block;
    text-align: center;
	background-color: transparent;
	color: transparent;
	border: 0px;
	z-index: 50;
}

.sheet-rolltemplate-Magic .sheet-random span {
	display: block;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 5px;
}

.sheet-rolltemplate-Magic .sheet-random .sheet-area {
	font-size: 1em;
    margin: 0px;
    font-weight: normal;
	color: #444;
}

/* ===== ROLL TEMPLATES ===== */
.sheet-rolltemplate-Magic,
.sheet-rolltemplate-npc {font-family: sans-serif;}

/* API buttons */
/*.sheet-rolltemplate-Magic a[href^="~"] {
    background-color: transparent;
    padding: 0px 0px 0px 0px;
    color: #182C4A;
    display: inline-block;
    border: none;
    text-align: left;
    font-family: sans-serif;
    font-size: 0.95em;
    line-height: 1em;
    text-transform: capitalize;
    white-space: pre;
    font-weight: bold;
}*/
.sheet-rolltemplate-Magic a:hover {color: #BE202E;}

/* Rolls */
.sheet-rolltemplate-Magic .inlinerollresult,
.sheet-rolltemplate-npc .inlinerollresult {
    background-color: transparent;
    border: none;
    padding: 0px 0px;
    font-weight: bold;
    cursor: help;
    font-size: 1.25em;
    padding: 2px;
}
.sheet-rolltemplate-Magic .inlinerollresult {color: #000;}

.sheet-rolltemplate-Magic .sheet-mdl,
.sheet-rolltemplate-Magic .sheet-mdl span {
	vertical-align: middle;
    display: inline-block;
    padding-top: 1px;
    font-size: 1.06em;
}

.sheet-rolltemplate-Magic .sheet-resright .inlinerollresult,
.sheet-rolltemplate-npc .sheet-bigres .inlinerollresult {
    font-size: 1.6em;
    line-height: 1.45em;
}
.sheet-rolltemplate-Magic .success,
.sheet-rolltemplate-npc .success {
    color: #247305;
}
.sheet-rolltemplate-Magic .failure,
.sheet-rolltemplate-npc .failure {
    color: #BE202E;
}
.sheet-rolltemplate-Magic .inlinerollresult.fullcrit,
.sheet-rolltemplate-npc .inlinerollresult.fullcrit {
    border: none;
    color: #247305;
}
.sheet-rolltemplate-Magic .inlinerollresult.importantroll,
.sheet-rolltemplate-npc .inlinerollresult.importantroll {
    border: none;
    color: #4A57ED;
}
.sheet-rolltemplate-Magic .inlinerollresult.fullfail,
.sheet-rolltemplate-npc .inlinerollresult.fullfail {
    border: none;
    color: #BE202E;
}

/* classes */
.sheet-rolltemplate-Magic div,
.sheet-rolltemplate-Magic span,
.sheet-rolltemplate-Magic img,
.sheet-rolltemplate-npc div,
.sheet-rolltemplate-npc span,
.sheet-rolltemplate-npc img {
    box-sizing: border-box;
}
.sheet-rolltemplate-Magic div,
.sheet-rolltemplate-npc div {
    margin: 0px;
    padding: 0px;
}
.sheet-rolltemplate-Magic img,
.sheet-rolltemplate-npc img {
    margin: 0px;
    padding: 0px;
}
.sheet-rolltemplate-Magic .sheet-center,
.sheet-rolltemplate-npc .sheet-center {text-align: center;}
.sheet-rolltemplate-Magic .sheet-right,
.sheet-rolltemplate-npc .sheet-right {text-align: right;}
.sheet-rolltemplate-Magic .sheet-ital,
.sheet-rolltemplate-npc .sheet-ital {font-style: italic;}
.sheet-rolltemplate-Magic .sheet-inl,
.sheet-rolltemplate-npc .sheet-inl {display: inline;}
.sheet-rolltemplate-Magic .sheet-bold,
.sheet-rolltemplate-npc .sheet-bold {font-weight: bold;}
.sheet-rolltemplate-Magic .sheet-vtop,
.sheet-rolltemplate-npc .sheet-vtop {vertical-align: top;}

.sheet-rolltemplate-Magic .sheet-myrow,
.sheet-rolltemplate-npc .sheet-myrow {
    padding: 5px;
	border:1px solid #182C4A;
	border-top:0px;
	border-bottom:0px;
	background:#fff;
}
.sheet-rolltemplate-Magic .sheet-vtop + .sheet-myrow {background: linear-gradient(to left,white,#D8DBE6);}
.sheet-rolltemplate-npc .sheet-bordered .sheet-myrow:nth-child(even) {background: linear-gradient(to left,#c3996b7a,white);}


.sheet-rolltemplate-Magic span.sheet-notes,
.sheet-rolltemplate-npc span.sheet-notes {
    font-family: sans-serif;
    font-size: 0.9em;
    color: black;
}

.sheet-rolltemplate-Magic .sheet-lbl,
.sheet-rolltemplate-npc .sheet-lbl {
    text-align: left;
    font-family: sans-serif;
    line-height: 1em;
    text-transform: capitalize;
    white-space: pre;
}

.sheet-rolltemplate-Magic .sheet-bordered,
.sheet-rolltemplate-npc .sheet-bordered {
	border-bottom:1px solid #182C4A;
    text-align: left;
    vertical-align: top;
    position: relative;
}

/* ICONS */
.sheet-rolltemplate-Magic .sheet-icon,
.sheet-rolltemplate-npc .sheet-icon {
    position: absolute;
    top: 6px;
    left: -40px;
    width: 40px;
    text-align: center;
}
.sheet-rolltemplate-Magic .img {padding-bottom:10px;}
.sheet-rolltemplate-Magic .img img,
.sheet-rolltemplate-npc .img img {display:block; margin:0 auto;}

.element-to-determine-style-A3[value='1'] ~ div .element-to-style-A3,
.element-to-determine-style-B3[value='1'] ~ div .element-to-style-B3,
.element-to-determine-style-C3[value='1'] ~ div .element-to-style-C3,
.element-to-determine-style-D3[value='1'] ~ div .element-to-style-D3,
.element-to-determine-style-E3[value='1'] ~ div .element-to-style-E3,
.element-to-determine-style-F3[value='1'] ~ div .element-to-style-F3,
.element-to-determine-style-A5[value='1'] ~ div .element-to-style-A5,
.element-to-determine-style-B5[value='1'] ~ div .element-to-style-B5,
.element-to-determine-style-C5[value='1'] ~ div .element-to-style-C5,
.element-to-determine-style-D5[value='1'] ~ div .element-to-style-D5,
.element-to-determine-style-E5[value='1'] ~ div .element-to-style-E5,
.element-to-determine-style-F5[value='1'] ~ div .element-to-style-F5,
.element-to-determine-style-A7[value='1'] ~ div .element-to-style-A7,
.element-to-determine-style-B7[value='1'] ~ div .element-to-style-B7,
.element-to-determine-style-C7[value='1'] ~ div .element-to-style-C7,
.element-to-determine-style-D7[value='1'] ~ div .element-to-style-D7,
.element-to-determine-style-E7[value='1'] ~ div .element-to-style-E7,
.element-to-determine-style-F7[value='1'] ~ div .element-to-style-F7,
.element-to-determine-style-A9[value='1'] ~ div .element-to-style-A9,
.element-to-determine-style-B9[value='1'] ~ div .element-to-style-B9,
.element-to-determine-style-C9[value='1'] ~ div .element-to-style-C9,
.element-to-determine-style-D9[value='1'] ~ div .element-to-style-D9,
.element-to-determine-style-E9[value='1'] ~ div .element-to-style-E9,
.element-to-determine-style-F9[value='1'] ~ div .element-to-style-F9,
.element-to-determine-style-A11[value='1'] ~ div .element-to-style-A11,
.element-to-determine-style-B11[value='1'] ~ div .element-to-style-B11,
.element-to-determine-style-C11[value='1'] ~ div .element-to-style-C11,
.element-to-determine-style-D11[value='1'] ~ div .element-to-style-D11,
.element-to-determine-style-E11[value='1'] ~ div .element-to-style-E11,
.element-to-determine-style-F11[value='1'] ~ div .element-to-style-F11 {
	background-color: transparent;
	color:white;
}

.element-to-determine-style-A2[value='1'] ~ div .element-to-style-A2,
.element-to-determine-style-B2[value='1'] ~ div .element-to-style-B2,
.element-to-determine-style-C2[value='1'] ~ div .element-to-style-C2,
.element-to-determine-style-D2[value='1'] ~ div .element-to-style-D2,
.element-to-determine-style-E2[value='1'] ~ div .element-to-style-E2,
.element-to-determine-style-F2[value='1'] ~ div .element-to-style-F2,
.element-to-determine-style-A4[value='1'] ~ div .element-to-style-A4,
.element-to-determine-style-B4[value='1'] ~ div .element-to-style-B4,
.element-to-determine-style-C4[value='1'] ~ div .element-to-style-C4,
.element-to-determine-style-D4[value='1'] ~ div .element-to-style-D4,
.element-to-determine-style-E4[value='1'] ~ div .element-to-style-E4,
.element-to-determine-style-F4[value='1'] ~ div .element-to-style-F4,
.element-to-determine-style-A6[value='1'] ~ div .element-to-style-A6,
.element-to-determine-style-B6[value='1'] ~ div .element-to-style-B6,
.element-to-determine-style-C6[value='1'] ~ div .element-to-style-C6,
.element-to-determine-style-D6[value='1'] ~ div .element-to-style-D6,
.element-to-determine-style-E6[value='1'] ~ div .element-to-style-E6,
.element-to-determine-style-F6[value='1'] ~ div .element-to-style-F6,
.element-to-determine-style-A8[value='1'] ~ div .element-to-style-A8,
.element-to-determine-style-B8[value='1'] ~ div .element-to-style-B8,
.element-to-determine-style-C8[value='1'] ~ div .element-to-style-C8,
.element-to-determine-style-D8[value='1'] ~ div .element-to-style-D8,
.element-to-determine-style-E8[value='1'] ~ div .element-to-style-E8,
.element-to-determine-style-F8[value='1'] ~ div .element-to-style-F8,
.element-to-determine-style-A10[value='1'] ~ div .element-to-style-A10,
.element-to-determine-style-B10[value='1'] ~ div .element-to-style-B10,
.element-to-determine-style-C10[value='1'] ~ div .element-to-style-C10,
.element-to-determine-style-D10[value='1'] ~ div .element-to-style-D10,
.element-to-determine-style-E10[value='1'] ~ div .element-to-style-E10,
.element-to-determine-style-F10[value='1'] ~ div .element-to-style-F10,
.element-to-determine-style-A12[value='1'] ~ div .element-to-style-A12,
.element-to-determine-style-B12[value='1'] ~ div .element-to-style-B12,
.element-to-determine-style-C12[value='1'] ~ div .element-to-style-C12,
.element-to-determine-style-D12[value='1'] ~ div .element-to-style-D12,
.element-to-determine-style-E12[value='1'] ~ div .element-to-style-E12,
.element-to-determine-style-F12[value='1'] ~ div .element-to-style-F12,
.element-to-determine-style-MuLian[value='1'] ~ div .element-to-style-MuLian,
.element-to-determine-style-MuoChie[value='1'] ~ div .element-to-style-MuoChie,
.element-to-determine-style-Soul[value='1'] ~ div .element-to-style-Soul {
  background-color: transparent;
  color:white;
}

.element-to-determine-style-A[value='1'] ~ div .element-to-style-A,
.element-to-determine-style-B[value='1'] ~ div .element-to-style-B,
.element-to-determine-style-C[value='1'] ~ div .element-to-style-C,
.element-to-determine-style-D[value='1'] ~ div .element-to-style-D,
.element-to-determine-style-E[value='1'] ~ div .element-to-style-E,
.element-to-determine-style-Z[value='1'] ~ div .element-to-style-Z{
  background-color: black;

}

.spell-table .inner  {background: #333333;}
.select-color[value="1"] ~ .spell-table .inner {background: #999999;}
.select-color[value="2"] ~ .spell-table .inner {background: #4492b0;}
.select-color[value="3"] ~ .spell-table .inner {background: #7d0c02;}
.select-color[value="4"] ~ .spell-table .inner {background: #b2a7d3;}
.select-color[value="5"] ~ .spell-table .inner {background: #8ab2fe;}
.select-color[value="6"] ~ .spell-table .inner {background: #5584e3;}
.select-color[value="7"] ~ .spell-table .inner {background: #203581;}
.select-color[value="8"] ~ .spell-table .inner {background: #1e1f54;}
.select-color[value="9"] ~ .spell-table .inner {background: #d8ad2b;}
.select-color[value="10"] ~ .spell-table .inner {background: #e3bf95;}
.select-color[value="11"] ~ .spell-table .inner {background: #897050;}
.select-color[value="12"] ~ .spell-table .inner {background: #473a2a;}
.select-color[value="13"] ~ .spell-table .inner {background: #9ece8b;}
.select-color[value="14"] ~ .spell-table .inner {background: #516948;}
.select-color[value="15"] ~ .spell-table .inner {background: #7fb550;}
.select-color[value="16"] ~ .spell-table .inner {background: #7f57a5;}
.select-color[value="17"] ~ .spell-table .inner {background: #ff869a;}

.color-item {text-align:center;margin:5px;}
.color-item label {width:30px;height:20px;margin-bottom:0px;}
.color-item input {}

.sheet-rolltemplate-Magic .blacklabel .big,
.sheet-rolltemplate-npc .big {display:block; font-size:12px; padding:0 0 5px; text-align:center; font-weight:normal; border-bottom:1px solid rgba(255,255,255,.3); margin-bottom:5px;}
.sheet-rolltemplate-npc .big {color: #3C2517;}

.sheet-rolltemplate-Magic .sheet-resright,
.sheet-rolltemplate-npc .sheet-resright {
    display: block;
	text-align:center;
    border-top: 0px;
    border-bottom: 0px;
	background:#fff;
    clear: both;
	font-size: 1.3em;
	text-transform: uppercase;
	line-height: 1.0em;
	padding: 10px;
}

/* -------------------------------------------------------------------------- */

button[type=roll].old-roll,
button[type=action].old-roll {
  color: #BEBEBE;
  background-color: #BEBEBE;
  font-weight: bold;
  text-align:center;
  width: 20px;
  height: 20px;
  margin: 0.0 !important;
  padding: 0.0em !important;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 13pt;
}

button[type=action].old-roll::before {
	font-family: "dicefontd20";
    content: "t";
}