/* ############## BUILDING ############## */
#visitor-btn-image {
    max-width: 100%;
    border-radius: var(--rounded-border-zoomable);
}

#button-open-visitor-popup>span {
    height: 2em;
}

#button-dismiss-visitor {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 4rem;
    max-height: 4rem;
}

#button-dismiss-visitor svg {
    width: 100%;
    height: 100%;
}

#button-dismiss-visitor>span {
    display: none;
}

#button-dismiss-visitor:hover svg {
    fill: red;
}

.visitor-wrap {
    position: relative;
    max-height: 100%;
    max-width: 60%;
}
.visitor-wrap .time-left {
    display: block;
    top: 1.25em;
    right: 1.25em;
    left: unset;
    margin-top: unset;
    margin-left: unset;
    --countdown-diameter: 4em;
    --color-countdown: #42b2bd;
    --color-countdown-bg: #336d71;
}
.visitor-wrap .time-left .counter {
    font-size: 0.75rem;
}
.visitor-wrap .time-left .counter::after {
    font-size: 0.6rem;
    line-height: 0;
    margin-top: -0.2em;
}

/* ############## POPUP ############## */
#popup-visitor {
    --manual-input-width: clamp(3em, 10vw, 6.5em);
    --manual-switch-width: 6.5em;
}

#popup-visitor-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: 50%;
    display:none;
    z-index: 1;
}
#popup-visitor-background.visible {
    display: block;
}

#popup-visitor-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: top 0.3s ease-out, bottom 0.3s ease-out;
    pointer-events: none;
    touch-action: none;
    z-index: 1;
}

#popup-visitor {
    display: none;
    max-width: min(1536px, 90%);
    max-height: calc(100% - 6em);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    aspect-ratio: 1.778;
    pointer-events: all;
    touch-action: unset;
    font-size: clamp(10px, 1.5vw, 18px);
}
#popup-visitor.visible {
    display: flex;
}

@media only screen and (max-width: 900px) {
    #popup-visitor {
        aspect-ratio: unset;
        max-width: 100%;
    }
}

#visitor-text {
    position: absolute;
    z-index: 1;
    bottom: 0;
    max-width: 30%;
    padding: 1em;
}

#visitor-text p {
    font-size: clamp(0.5em, 2vw, 1em);
    text-align: center;
}

#visitor-controls .caption,
#visitor-controls figcaption {
    text-align: left;
}

#visitor-buttons {
    display: flex;
    justify-content: right;
    padding: 0.5em;
}

#visitor-confirm-btn,
#visitor-reset-btn {
    cursor: pointer;
}
#visitor-reset-btn {
    margin-right: 1em;
}

#popup-visitor.not-balanced #visitor-confirm-btn {
    cursor: not-allowed;
}
#popup-visitor.not-balanced #visitor-confirm-btn svg {
    fill: red;
}
#popup-visitor:not(.not-balanced) #visitor-confirm-btn:hover svg {
    fill: #42B2BD;
}
#visitor-reset-btn:hover svg {
    fill: yellow;
}

#visitor-image {
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--rounded-border) / 2);
}

#visitor-panel {
    background: #00000080;
    width: 38.2%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: start;
    text-align: center;
    border-radius: 0 var(--rounded-border) var(--rounded-border) 100px;
}

@media only screen and (max-width: 799px) {

    #popup-visitor {
        flex-direction: column;
        aspect-ratio: unset;
    }
    #visitor-controls {
        padding: 0em !important;
        height: 100% !important;
    }
    #visitor-panel {
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: -25%;
        border-radius: unset;
        background: linear-gradient(to top, #194a4f 75%, transparent);
        max-height: 50vh;
    }
    #visitor-text {
        margin: 1em;
        max-width: unset;
        top: 0;
        bottom: unset;
        transform: translateY(-100%);
        padding: 0.25em 1em;
    }
}

#visitor-controls {
    overflow-y: scroll;
    padding-right: 3px;
    padding-top: 1em;
    height: 100%;
}
#visitor-top .resource-value-pair,
#visitor-controls .resource-value-pair {
    flex-direction: row;
    margin-left: 6px;
}

#visitor-controls .slider-resource-inventory {
    color: #9d9d9d;
}

#visitor-top {
    position: relative;
}

#visitor-top .heading-wrap,
#visitor-controls .visitor-slider-resource-inventory-wrap,
#visitor-top .money-displays-wrap {
    font-size: clamp(10px, 1.5vw,18px);
    width: calc(100% - var(--manual-input-width));
}

#visitor-top .heading-wrap .visitor,
#visitor-top .heading-wrap .ruler {
    width: 50%;
}

#visitor-top .money-displays-wrap,
#visitor-top .heading-wrap>h1 {
    display: flex;
    justify-content: space-around;
}

#visitor-top .heading-wrap>h1 {
    font-size: max(2vw, 1em);
}

#visitor-top .profession {
    font-size: 0.5em;
    opacity: 0.6;
    display: block;
}

#visitor-top .money-displays-wrap {
    position: relative;
}

#money-difference {
    position: absolute;
    right: 1em;
    bottom: 0;
    text-align: right;
}

.money-item-price,
#money-difference {
    font-size: clamp(8px, 1.2vw,14px);
}


.visitor-slider {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}
.visitor-slider-range-price-wrap {
    display: flex;
    flex-direction: row;
    position: relative;
}
.unit-price-wrap {
    position: absolute;
    width: calc(100% - var(--manual-input-width) - 4em + 0.5em - 1px);
    left: calc(2em - 0.5em + 1px);
    display: none;
}
.visitor-slider:hover .unit-price-wrap,
.visitor-slider:focus .unit-price-wrap,
.visitor-slider:active .unit-price-wrap {
    display: block;
}
.unit-price {
    position: absolute;
    top: -32px;
    transform: translateX(-50%);
    background: white;
    padding: 5px 8px 2px 8px;
    font-size: 14px;
    border-radius: var(--rounded-border-zoomable);
    color: black;
    text-shadow: none;
    pointer-events: none;
    touch-action: none;
}
.unit-price::after {
    content:'';
    display: block;
    width: 8px;
    height: 8px;
    background-color: white;
    position: absolute;
    bottom: -4px;
    left: calc(50% - 4px);
    transform: rotateZ(45deg);
}
.unit-price .resource-value-pair {
    height: 100%;
    width: 3em;
}
.visitor-slider-resource-inventory-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1em;
    margin-top: 0.25em;
}
.visitor-slider .manual-input {
    width: var(--manual-input-width);
    padding: 0;
    margin-left: 0.5em;
    height: 34px;
    align-self: center;
    text-align: center;
    font-family: inherit;
    border: none;
    border-radius: var(--rounded-border);
    font-size: clamp(0.75em, 1.5vw,1em);
}


/* ############## RESOURCE SLIDER ############## */

input[type=range] {
    box-sizing: border-box;
    font-size: 1em;
    line-height: 1;
    height: 2em;
    background-color: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    width: 100%;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 4em;
    height: 2em;
    margin-top: 0;
    border-radius: var(--rounded-border);
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-color: black;
    background-image: url('../images/resource-bedsUsage.png');
}
input[type=range]::-moz-range-thumb {
    width: 4em;
    height: 2em;
    margin-top: 0;
    border-radius: var(--rounded-border);
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-color: black;
    background-image: url('../images/resource-bedsUsage.png');
}
input[type=range]::-ms-thumb {
    width: 4em;
    height: 2em;
    margin-top: 0;
    border-radius: var(--rounded-border);
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-color: black;
    background-image: url('../images/resource-bedsUsage.png');
}

input[type=range]:hover::-webkit-slider-thumb {
    border-color: rgba(255,255,255,0.7);
}
input[type=range]:hover::-moz-range-thumb {
    border-color: rgba(255,255,255,0.7);
}
input[type=range]:hover::-ms-thumb {
    border-color: rgba(255,255,255,0.7);
}
input[type=range]:active::-webkit-slider-thumb {
    border-color: #ffffff;
    background-color: #42b2bd;
}
input[type=range]:active::-moz-range-thumb {
    border-color: #ffffff;
    background-color: #42b2bd;
}
input[type=range]:active::-ms-thumb {
    border-color: #ffffff;
    background-color: #42b2bd;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    height: 1em;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    background-color: transparent;
}
input[type=range]::-moz-range-track {
    width: 100%;
    cursor: pointer;
    height: 0;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    background-color: transparent;
}
input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}


#element-money-florin input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-money-florin.png');
}
#element-money-albus input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-money-albus.png');
}
#element-money-denar input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-money-denar.png');
}
#element-bedsCapacity input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-bedsCapacity.png');
}
#element-bedsUsage input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-bedsUsage.png');
}
#element-food input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-food.png');
}
#element-stone input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-stone.png');
}
#element-wood input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-wood.png');
}
#element-textiles input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-textiles.png');
}
#element-travel-rations input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-travel-rations.png');
}
#element-coal input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-coal.png');
}
#element-tools input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-tools.png');
}
#element-iron-ore input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-iron-ore.png');
}
#element-silver-ore input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-silver-ore.png');
}
#element-gold-ore input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-gold-ore.png');
}
#element-iron input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-iron.png');
}
#element-silver input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-silver.png');
}
#element-gold input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-gold.png');
}
#element-sun-crystal input[type=range]::-webkit-slider-thumb {
    background-image: url('../images/resource-sun-crystal.png');
}


#element-money-florin input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-money-florin.png');
}
#element-money-albus input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-money-albus.png');
}
#element-money-denar input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-money-denar.png');
}
#element-bedsCapacity input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-bedsCapacity.png');
}
#element-bedsUsage input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-bedsUsage.png');
}
#element-food input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-food.png');
}
#element-stone input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-stone.png');
}
#element-wood input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-wood.png');
}
#element-textiles input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-textiles.png');
}
#element-travel-rations input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-travel-rations.png');
}
#element-coal input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-coal.png');
}
#element-tools input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-tools.png');
}
#element-iron-ore input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-iron-ore.png');
}
#element-silver-ore input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-silver-ore.png');
}
#element-gold-ore input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-gold-ore.png');
}
#element-iron input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-iron.png');
}
#element-silver input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-silver.png');
}
#element-gold input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-gold.png');
}
#element-sun-crystal input[type=range]::-moz-range-thumb {
    background-image: url('../images/resource-sun-crystal.png');
}


#element-money-florin input[type=range]::-ms-thumb {
    background-image: url('../images/resource-money-florin.png');
}
#element-money-albus input[type=range]::-ms-thumb {
    background-image: url('../images/resource-money-albus.png');
}
#element-money-denar input[type=range]::-ms-thumb {
    background-image: url('../images/resource-money-denar.png');
}
#element-bedsCapacity input[type=range]::-ms-thumb {
    background-image: url('../images/resource-bedsCapacity.png');
}
#element-bedsUsage input[type=range]::-ms-thumb {
    background-image: url('../images/resource-bedsUsage.png');
}
#element-food input[type=range]::-ms-thumb {
    background-image: url('../images/resource-food.png');
}
#element-stone input[type=range]::-ms-thumb {
    background-image: url('../images/resource-stone.png');
}
#element-wood input[type=range]::-ms-thumb {
    background-image: url('../images/resource-wood.png');
}
#element-textiles input[type=range]::-ms-thumb {
    background-image: url('../images/resource-textiles.png');
}
#element-travel-rations input[type=range]::-ms-thumb {
    background-image: url('../images/resource-travel-rations.png');
}
#element-coal input[type=range]::-ms-thumb {
    background-image: url('../images/resource-coal.png');
}
#element-tools input[type=range]::-ms-thumb {
    background-image: url('../images/resource-tools.png');
}
#element-iron-ore input[type=range]::-ms-thumb {
    background-image: url('../images/resource-iron-ore.png');
}
#element-silver-ore input[type=range]::-ms-thumb {
    background-image: url('../images/resource-silver-ore.png');
}
#element-gold-ore input[type=range]::-ms-thumb {
    background-image: url('../images/resource-gold-ore.png');
}
#element-iron input[type=range]::-ms-thumb {
    background-image: url('../images/resource-iron.png');
}
#element-silver input[type=range]::-ms-thumb {
    background-image: url('../images/resource-silver.png');
}
#element-gold input[type=range]::-ms-thumb {
    background-image: url('../images/resource-gold.png');
}
#element-sun-crystal input[type=range]::-ms-thumb {
    background-image: url('../images/resource-sun-crystal.png');
}


/* ############## SWITCH INPUT ELEMENT ############## */

.switch-money-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.switch {
    position: relative;
    display: inline-block;
    width: var(--manual-switch-width);
    height: 2.25em;
    font-size: clamp(10px, 1.5vw,18px);
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2em;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 2em;
    width: 2em;
    left: 0.125em;
    bottom: 0.125em;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;

}

.switch input:disabled:checked + .slider {
    background-color: #808080;
}

.switch input:checked + .slider {
    background-color: #42b2bd;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #42b2bd;
}

.switch input:checked + .slider:before {
    -webkit-transform: translateX(calc(var(--manual-switch-width) - 2em - 0.35em));
    -ms-transform: translateX(calc(var(--manual-switch-width) - 2em - 0.35em));
    transform: translateX(calc(var(--manual-switch-width) - 2em - 0.35em));
}


/* ############## BUILDING BLUEPRINTS | INNOVATIONS ############## */

.visitor-innovation-offer,
.visitor-blueprint-offer {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
    padding-top: 1em;
    padding-left: 1em;
    gap: 1em;
    background-color: #00000080;
    border-radius: var(--rounded-border-zoomable);
}

.visitor-innovation-offer .building-image,
.visitor-blueprint-offer .building-image {
    max-height: 5em;
    max-width: 100%;
}

.visitor-innovation-offer .building-ui-token,
.visitor-blueprint-offer .building-ui-token {
    margin: 0;
}

.visitor-innovation-offer {
    border: 3px solid green;
    background-color: #00800080;
    padding: 0.5em 0em 0.5em 0.5em;
}

.visitor-innovation-offer .reward-text-icon {
    font-size: 3em;
}

/* ############## PERSONS ############## */

.visitor-person-offer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
    gap: 1em;
    background-color: #00000080;
    border-radius: 2em var(--rounded-border-zoomable) var(--rounded-border-zoomable) 2em;
}

.visitor-person-offer .person-ui-token {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    margin: 0;
}

.visitor-person-offer .person-ui-token > img {
    width: 4em;
    height: 4em;
    border-radius: 100%;
}

.person-ui-token figcaption .description {
    font-size: 0.8em;
    display: block;
    color: #9d9d9d;
}

/* ############## PERSON INPUT SLOT ############## */

.visitor-person-input-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
    padding-top: 1em;
    flex-wrap: wrap;
    background-color: #00000080;
    border-radius: var(--rounded-border-zoomable);
}

.visitor-slot-wrap {
    display: flex;
    position: relative;
    min-width: 30%;
}

.visitor-input-slot {
    position: relative;
    width: 3em;
    height: 3em;
    margin: 0.75em;
    pointer-events:none;
    touch-action: none;
}

.visitor-input-slot .inner {
    width:100%;
    height:100%;
    border-radius: 50%;
    border: outset 0.3em #fff;
    background-color: #ffffff80;
    background-image: url('../images/resource-bedsUsage.png');
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    transform: translate(-0.3em, -0.3em);
}
.visitor-person-input-slot .money-item-price {
    width: var(--manual-switch-width);
    padding: 0.75em;
    text-wrap: nowrap;
}
.visitor-person-input-slot .money-item-price .money-display {
    float: right;
}

.visitor-person-input-slot .caption {
    margin-left: 0.5em;
    width: 80%;
}

.visitor-person-input-slot .caption .description {
    font-size: 0.8em;
    display: block;
    color: #9d9d9d;
}

.visitor-person-input-slot .person-dropoff-zone {
    position: absolute;
    display: flex;
}
.visitor-person-input-slot .person-dropoff-zone .person-assignment-token {
    width: 3em;
    height: 3em;
    margin: 0.75em;
}

.overlay-person-drag .visitor-person-input-slot {
    background-color: #42b2bd3d;
    box-shadow: inset 0 0 2rem 0 #42b2bd, inset 0 0 0 1px #42b2bd;
}

/* ############## DECISION BUTTON ############## */

.visitor-unique-decision {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    border-radius: var(--rounded-border-zoomable);
    margin-top: 1em;
    padding-left: 0.5em;
    padding-bottom: 0.5em;
}

.visitor-decision-button>span {
    padding: 0.5em;
}

/* ############## DECISION BUTTON | LABEL ############## */
.visitor-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    border-radius: var(--rounded-border-zoomable);
    margin-top: 1em;
}

.visitor-label .description {
    font-size: 0.8em;
    display: block;
    color: #9d9d9d;
    margin: 1em;
}