body {
    background-color: #053d41;
    font-family: sans-serif;
    zoom: 200%;
}

textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    margin: auto;
    border: none;
    resize: none;
    background-color: rgba(0, 0, 0, 0);
    /*border: 1px solid red;*/
}


.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav ul li {
    float: left;
    text-align: left;
    padding: 14px 16px;
    font-size: 17px;
    list-style-type: none;
    text-decoration: none;

}

.character-sheet{
    overflow: hidden;
}

.character-sheet-background {
    position: relative;
    margin: auto;
    width: 595px;
    height: 842px;
    left: 0px;
    top: 0px;
    background: #ffffff;
    border: 2px solid #000000;


}

.Logo {
    position: relative;
    width: 139px;
    height: 50px;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.Portrait {
    position: relative;
    width: 140px;
    height: 160px;
    border: 2px solid black;
    border-radius: 6px;
    float: left;
    top: 0px;
    left: 2px
}

.player-info {
    position: relative;
    border: 2px solid #000000;
    border-radius: 5px;
    float: right;
    width: 434px;
    height: 202px;
    top: -42px;
    right: 12px;
    overflow: hidden;
}

.basic-player-info {
    display: grid;
    grid-template-columns: 216px 216px;
    grid-template-rows: auto auto;
    float: right;
    width: 432px;
    height: 80px;

}

.player-info-item {
    /*background-color: aqua;*/
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.player-info-item:nth-child(2),
.player-info-item:nth-child(4) {
    border-right: none;
}

.item-label {

    position: relative;
    margin: auto;
    width: 61px;
    height: 11px;


    border: 1px solid #000000;
    border-bottom: none;

    border-radius: 345px 345px 0px 0px;
    transform: rotate(-180deg);
    top: 0%;
}

.label-text {
    position: relative;
    margin: -1px auto;
    font-size: 8px;
    font-family: sans-serif;
    text-align: center;
    font-weight: bold;
    transform: rotate(180deg);

}



input#name,
input#player,
input#race-class,
input#exp {
    margin: auto;
    border: none;
    text-align: center;
}

.text-label-wrapper {
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
}

.guard-compass {
    position: relative;
    top: 40%;
    width: 125px;
    height: 122px;
    border-right: 2px solid black;
}

.guard-compass .item-label {
    top: -124%;
    transform: rotate(0deg);
    width: 90px;
}

.guard-compass .item-label .label-text {
    top: 10%;
    transform: rotate(0deg);
}

.guard-compass img {
    position: relative;
    top: -65%;
    margin-left: 4px;
}

.guard-compass input {
    position: relative;
    width: 35px;
    height: 35px;
    text-align: center;
    border: none;
    background-color: rgba(0, 0, 0, 0);
}

#GC-top {
    top: -147%;
    right: -34.4%
}

#GC-right {
    top: -125%;
    right: -26%
}

#GC-left {
    top: -125%;
    right: 53%
}

#GC-bottom {
    top: -131%;
    right: -34.4%
}

.spell-slots {
    position: relative;
    float: right;
    top: -21.6%;
    height: 122px;
    width: 303px;

}


.spell-slot-grid {
    display: grid;
    grid-auto-rows: 26px;
    grid-template-columns: 160px 1500px;
}

.spell-slot-row {
    position: relative;
    /*border: 1px solid red;*/
    top: 11px;
    left: 1%;
    width: 130px;
    height: 10px;
    float: left;
}

[class^=spell-slot-buttons] {
    position: relative;
    width: 100px;
    height: 9px;
    border: 2px solid black;
    border-radius: 12px;

    top: -120%;
    display: inline-grid;
    grid-template-columns: 20px 20px 20px 20px 20px;
    overflow: hidden;
}

.SS-button,
.SS-button-toggled {
    position: relative;
    top: -20%;
    height: 15px;
    width: 20px;
    /* background-color: red;*/
    border-right: 1px solid black;
}

.SS-button {
    background-color: white;
}

.SS-button-toggled {
    background-color: rgb(54, 54, 54);
}


[id^="spell-slot-text"] {
    position: relative;
    height: 15px;
    width: 20px;
    top: -130%;
    border: none;
    border-bottom: 1px solid black;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}

.Stats_Health {

    position: relative;
    float: left;
    height: 160px;
    width: 590px;
    top: -37px;
    left: 2px;
    background-color: rgba(0, 0, 0, 0);
}

.Stats {
    position: relative;
    float: left;
    width: 270px;
    height: inherit;

    border: 2px solid black;
    border-radius: 6px 0px 0px 6px;
}

td input {
    position: relative;
    height: 35px;
    width: 40px;
    top: -3px;
    left: 1px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

td img {
    right: 20%;
    top: 0%;
}

td {
    font-size: 10px;
    font-weight: 600;
}

.Health {
    position: relative;
    float: right;
    width: 310px;
    height: inherit;
    border: 2px solid black;
    border-radius: 0px 6px 6px 0px;
    right: 12px;
}

.MaxHP input,
.Initiative input {
    border: none;
    border-bottom: 1px solid black;
    width: 50px;
    text-align: center;

}

.MaxHP,
.Initiative {
    font-size: 10px;
    margin-bottom: 3px;
    color: #696969;
    margin-left: 2px;
    margin-right: 2px;
}

.MaxHP {
    float: left;
}

.Initiative {
    float: right;
}

.Health .item-label {
    transform: rotate(0deg);
    margin: auto;
    width: 100px;
    top: 18px;
}



#Status {
    left: 1px;
    top: 6px;
}

.Talents {
    position: relative;
    width: 140px;
    height: 310px;
    top: -32px;
    left: 2px;
    float: left;
    border: 2px solid black;
    border-radius: 6px;
}

.Health .item-label .label-text,
.Talents .item-label .label-text,
.Strikes .item-label .label-text,
.Notes .item-label .label-text,
.Languages .item-label .label-text,
.Traits .item-label .label-text,
.Equipment .item-label .label-text,
.Portrait .item-label .label-text,
.spell-slots .item-label .label-text  {
    transform: rotate(0deg);
}

.Talents .item-label,
.Strikes .item-label,
.Notes .item-label,
.Languages .item-label,
.Traits .item-label,
.Equipment .item-label,
.Portrait .item-label,
.spell-slots .item-label {
    transform: rotate(0deg);
    margin: auto;
    width: 100px;
    top: 1px;
}


.spell-slots .item-label{
    top:-91px;
}

.Strikes .item-label {
    top: -339px;
}

.Notes .item-label {
    top: -3px;
}

.Languages .item-label {
    top: -365px;
    width: 120px;
}

.Traits .item-label {
    top: -225px;
}

.Equipment .item-label {
    top: -85px;
    width: 120px;
}

.Portrait .item-label{
    top: 145px;
}

.Talent-Item {
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 2px;
}

.Talent-Dot,
.Talent-Dot-Toggled {
    position: relative;
    float: left;
    width: 22px;
    height: 7px;
    border: 1px solid black;
    border-radius: 20px;
    top: 3px;
    margin-right: 2px;
    margin-left: 2px;
}

.Talent-Dot {
    background-color: white;
}

.Talent-Dot-Toggled {
    background-color: black;
}

.Notes {
    position: relative;
    float: right;
    height: 310px;
    width: 140px;
    border: 2px solid black;
    border-radius: 6px;
    top: -32px;
    right: 10px;
}

.Strikes {
    position: relative;
    margin: auto;
    height: 310px;
    width: 288px;
    border: 2px solid black;
    border-radius: 6px;
    top: 330px;
    right: 4px;
}

.Strikes textarea {
    bottom: 359px;
    left: 2px;
}

.Languages {
    position: relative;
    width: 140px;
    height: 140px;
    border: 2px solid black;
    border-radius: 6px;
    top: 335px;
    left: 2px;
}

.Traits {
    position: relative;
    width: 140px;
    height: 140px;
    border: 2px solid black;
    border-radius: 6px;
    top: 195px;
    left: 147px;
}

.Equipment {
    position: relative;
    width: 288px;
    height: 140px;
    border: 2px solid black;
    border-radius: 6px;
    top: 55px;
    left: 293px;
}

.Languages textarea {
    bottom: 360px;
    left: 1px;
}

.Traits textarea {
    bottom: 220px;
    left: 1px;
}

.Equipment textarea {
    bottom: 80px;
    left: 2px;
}


[id^=Bonus-Stat] {
    position: relative;
    height: 15px;
    width: 26px;
    left: 32px;
    bottom: 3px;
}

#FileUpload{
    background-color: #F0F0F0;
    border: 2px solid black;
    color:#000000;
    padding: 1px 6px;
}

#output{
    overflow: hidden;
    height: 156px;
}

.Portrait .item-label{
    background-color: #ffffff;
    top:-11px;
}