/* color scheme */
:root {

    --color-text: black;
    --color-background1: white;
    --color-background2: #CCC;
    --color-background3: rgba(255, 255, 255, 0.5);
    --color-background4: #DDD;

    --color-link: #00A;
    --color-link-hover: #00F;

    --color-input-text: black;
    --color-input-background: white;

    --color-button1-text: white;
    --color-button1-background: #555;
    --color-button1-background-hover: black;

    --color-button2-text: black;
    --color-button2-background: #DDD;
    --color-button2-background-hover: #FFF;

    --color-background-attention: #c55;
    --color-background-confirm: #393;

    --color-shadow1-transparent: rgba(0, 0, 0, 0.3);
    --color-shadow2-transparent: rgba(255, 255, 255, 0.5);
    --color-shadow3-transparent: rgba(0, 0, 0, 0.75);
}

@media only screen and (prefers-color-scheme: dark) {
    :root {

        --color-text: white;
        --color-background1: #1d1d1d;
        --color-background2: #333;
        --color-background3: #1f1f1f;
        --color-background4: #222;

        --color-link: #55D;
        --color-link-hover: #77F;

        --color-input-text: white;
        --color-input-background: #777;

        --color-button1-text: white;
        --color-button1-background: #555;
        --color-button1-background-hover: #777;

        --color-button2-text: black;
        --color-button2-background: #555;
        --color-button2-background-hover: #777;

        --color-background-attention: #933;
        --color-background-confirm: #272;

        --color-shadow1-transparent: rgba(0, 0, 0, 0.3);
        --color-shadow2-transparent: rgba(255, 255, 255, 0.5);
        --color-shadow3-transparent: rgba(0, 0, 0, 0.75);
    }

    ::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: myText;
    color: var(--color-text);
    background: var(--color-background1);
}

body:before,
body:after {
    background-size: contain;
    height: 100%;
    content: '';
    position: fixed;
    width: 100px;
    top: 0;
    background-repeat: repeat-y;
    z-index: 10;
    opacity: 0.3;
}

body:before {
    background-image: url('assets/spear-left.png');
    left: 0;
    background-position: left;
}

body:after {
    background-image: url('assets/spear-right.png');
    right: 0;
    background-position: right;
}

* {
    font-size: 14pt;
}

a {
    color: var(--color-link);
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

.hidden {
    display: none;
}

.myCanvas {
    position: absolute;
    top: 10px;
    left: 10px;
    transform-origin: top left;
    transform: scale(0.213854021, 0.213854021);
    #scale(calc(300 / 1403), calc(460 / 2151));
}

#load-indicator {
    position: absolute;
    top: 235px;
    left: 160px;
    height: 30px;
    width: 30px;
    padding: 10px;
    margin: -25px 0 0 -25px;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    background: var(--color-shadow2-transparent);
    border-radius: 50%;
}

body.size1 #load-indicator,
body.size4 #load-indicator,
body.size5 #load-indicator {
    top: 160px;
    left: 235px;
}


@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

body:not(.size5) .myCanvas {
    border-radius: 100px;
}

body.size1 #portraitCanvas,
body.size4 #portraitCanvas,
body.size5 #portraitCanvas,
body.size0 #landscapeCanvas,
body.size2 #landscapeCanvas,
body.size3 #landscapeCanvas,
body.size5 #landscapeCanvas,
body.size0 #matCanvas,
body.size1 #matCanvas,
body.size2 #matCanvas,
body.size3 #matCanvas,
body.size4 #matCanvas {
    display: none;
}

#sizes {
    position: absolute;
    display: block;
    top: 490px;
    left: 10px;
    padding: 0;
    margin: 0;
    /*transition: top .25s;*/
}

body.size1 #sizes,
body.size4 #sizes,
body.size5 #sizes {
    top: calc(490px - 80px);
}

#sizes input {
    display: none;
}

#sizes label {
    display: inline-block;
    width: 46px;
    height: 46px;
    vertical-align: top;
    text-align: center;
    opacity: 0.5;
}

#sizes label:hover,
#sizes input:checked + label {
    opacity: 1;
    cursor: pointer;
}

#download,
#reset,
#openFontSettings,
#favorites,
#share {
    position: absolute;
    left: 20px;
    top: 795px;
}

#openFontSettings,
#favorites,
#share {
    top: calc(795px + 3em);
}

#share {
    left: calc(40px + 11.8em);
}

#reset {
    left: calc(40px + 9em);
}

#openFontSettings {
    left: calc(40px + 6.2em);
}

button {
    box-sizing: border-box;
    background: var(--color-button1-background);
    border: none;
    color: var(--color-button1-text);
    padding: 0.5em 0.7em;
    cursor: pointer;
    border-radius: 5px;
}

label.image-upload img,
button img {
    height: 1em;
    position: relative;
    top: 3px;
    margin-right: 0.2em;
}

input[type="url"] {
    padding-right: 2em;
}


button:hover,
button:focus {
    background: var(--color-button1-background-hover);
}

button {
    cursor: pointer;
    box-shadow: 0px 1px 1px var(--color-shadow1-transparent);
}

button:active {
    position: relative;
    top: 1px;
    box-shadow: none;
}

body.size1 #download,
body.size4 #download,
body.size5 #download,
body.size1 #reset,
body.size4 #reset,
body.size5 #reset {
    top: calc(795px - 80px);
}

body.size1 #openFontSettings,
body.size4 #openFontSettings,
body.size5 #openFontSettings,
body.size1 #favorites,
body.size4 #favorites,
body.size5 #favorites {
    top: calc(795px - 80px + 3em);
}

body.size1 #share,
body.size4 #share,
body.size5 #share {
    top: calc(795px - 80px + 6em);
}

body.size2 #color2splitselector {
    display: none;
}

#table {
    border-collapse: collapse;
    width: calc(100% - 160px);
    position: relative;
    table-layout: fixed;
    margin: 0.5em 80px;
    border-radius: 10px;
    background-color: var(--color-background3);
}

#image-positioning table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
}

td,
th {
    vertical-align: top;
    text-align: left;
    border: solid 2px transparent;
}

.heading-credits {
    font-size: 0.6em;
}

.heading-credits a {
    font-size: 1em;
}

td > div,
th > div {
    padding: 9px;
    background: var(--color-background2);
    border-radius: 7px;
}

th {
    font-family: myTitle;
}

col {
    width: 323px;
    /* 300 + 2*10 (padding) + 3 (border) */
    transition: width .25s;
}

body.size1 col,
body.size4 col,
body.size5 col {
    width: 483px;
}

body.size0 label[for=price]:after,
body.size3 label[for=price]:after {
    content: " (bottom left)";
}

body.size1 label[for=price]:after {
    content: " (top left)";
}

label[for=preview]:after {
    content: "Preview (top corners)";
}

body.size2 label[for=preview]:after {
    content: "Price";
}

label[for=type2]:after {
    content: "Heirloom";
}

body.size2 label[for=type2]:after {
    content: "Type";
}

body.size0 .hideForDefaultCard,
body.size1 .hideForLandscape,
body.size2 .hideForDoubleCard,
body.size3 .hideForBaseCards,
body.size4 .hideForPileMarker,
body.size5 .hideForMats,
body.size1.trait .hideForTraits {
    visibility: collapse;
    display: none !important;
}

body.size1 #previewCell,
body:not(.size2) .doubledForDoubleCards + td {
    visibility: collapse;
}

body.size1 #priceCell > div,
body:not(.size2) .doubledForDoubleCards > div,
body.size3 .doubledForBaseCards > div,
body.size4 .doubledForPileMarkers > div,
body.size1.trait .doubledForTraits > div {
    width: calc(200% + 5px);
    box-sizing: border-box;
}

body:not(.size2) label[for=normalcolor1]:before {
    content: "Primary ";
}

body:not(.size2) label[for=normalcolor2]:before {
    content: "Secondary ";
}

label,
input,
textarea,
select {
    display: block;
    width: 100%;
    margin: 0;
    margin-top: 0.25em;
    border: none;
    outline: none;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
}

input,
textarea,
select {
    color: var(--color-input-text);
    background: var(--color-input-background);
}

label {
    padding: 0;
}

textarea {
    resize: vertical;
}

input[type=number] {
    display: inline-block;
    width: 30%;
    margin-right: 3%;
}

input[type=range] {
    cursor: pointer;
    padding: 0;
}

label.image-upload input[type="file"] {
    display: none;
}

label.image-upload,
#color-switch button,
#image-positioning button {
    margin-top: 0.9em;
    margin-bottom: 0.5em;
    border-radius: 5px;
    border: none;
    color: var(--color-button2-text);
    background-color: var(--color-button2-background);
    padding: 0.3em 1em;
    cursor: pointer;
    font-family: Arial;
}

label.image-upload:hover,
label.image-upload:focus,
#color-switch button:hover,
#color-switch button:focus,
#image-positioning button:hover,
#image-positioning button:focus {
    background-color: var(--color-button2-background-hover)
}

#color-switch {
    position: absolute;
    margin-top: -2.5em;
    margin-left: -6em;
}

label.image-upload,
#color-switch button {
    padding: 0.2em 0.4em;
}

label.image-upload {
    float: right;
    width: 2em;
    font-size: 0.9em;
    margin-top: calc(-1.6em - 5px);
    border: 1px solid var(--color-input-background);
}

[data-status]:after {
    position: absolute;
    top: 492px;
    left: 10px;
    background: var(--color-background3);
    padding: 0.7em 0.7em;
    min-width: 270px;
    content: attr(data-status);
    cursor: wait;
}

.checkbox input,
.checkbox label {
    width: auto;
    margin-right: .5rem;
    display: inline-block;
}

.type-checkboxes {
    float: right;
}

label[for="type"] {
    width: auto;
    display: inline-block;
}

body.size1 [data-status]:after,
body.size4 [data-status]:after,
body.size5 [data-status]:after {
    top: calc(492px - 80px);
}

#legend {
    position: absolute;
    left: 10px;
    top: 540px;
    margin-bottom: 0;
    text-align: center;
    font-family: myText;
}

body.size1 #legend,
body.size4 #legend,
body.size5 #legend {
    top: calc(540px - 80px);
}

#legend li {
    display: block;
    width: 230px;
    margin-right: 2%;
    text-align: left;
}

#legend li span.def {
    width: 25px;
    display: inline-block;
    text-align: center;
    font-family: mySpecials;
}

[name=recolor]:nth-of-type(3n) {
    color: black;
    background: #DDF;
}

[name=recolor]:nth-of-type(3n+1) {
    color: black;
    background: #FDD;
}

[name=recolor]:nth-of-type(3n+2) {
    color: black;
    background: #DFD;
}

.remark {
    font-weight: normal;
    font-style: italic;
}

.popup {
    position: fixed;
    top: 2em;
    left: 2em;
    height: calc(100% - 4em);
    width: calc(100% - 4em);
    box-sizing: border-box;
    background: var(--color-background2);
    overflow-y: scroll;
    box-shadow: 0 0 50px 50px var(--color-shadow3-transparent);
    z-index: 100;
    padding: 0;
}

.popup .menu {
    position: fixed;
    left: 2em;
    width: calc(100% - 6em);
    padding: 1em;
    background: var(--color-background2);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    z-index: 110;
}

.popup .menu input.search {
    display: inline-block;
    max-width: 30%;
    padding: 0.5em;
}

.popup .menu button {
    margin-top: 0.25em;
}

button.close,
button.delete {
    float: right;
}

button.confirm:hover,
button.confirm:focus {
    background-color: var(--color-background-confirm);
}

button.delete {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
}

button.delete:hover,
button.delete:focus,
button.delete-all:hover,
button.delete-all:focus {
    background-color: var(--color-background-attention);
}

.popup-content {
    width: 100%;
    padding: 1em 0;
    margin: 0;
    margin-top: 4em;
    list-style-type: none;
    background: var(--color-background4);
    box-sizing: border-box;
}

#manage-fonts .popup-content {
    padding: 1em;
}

#manage-fonts .popup-content label {
    margin-top: 1em;
}

#manage-fonts .popup-content input {
    margin: 0.5em 0;
}

#manage-fonts #fontInputTitle {
    font-family: myTitle;
}

#manage-fonts #fontInputSpecials {
    font-family: mySpecials;
}

#manage-fonts #fontInputText {
    font-family: myText;
}

#manage-fonts .remark {
    margin: 1em;
    font-family: myText;
}

#favorites-list li {
    box-sizing: border-box;
    width: 100%;
    padding: 0 1.5em;
}

#favorites-list li a {
    width: calc(100% - 7em);
    display: inline-block;
    padding: 0.5em 0;
    text-decoration: none;
}

#favorites-list li.active {
    background: var(--color-background3);
}

#favorites-list li:hover {
    background: var(--color-background3);
}