.building.tunnel .img-wrap {
    opacity: 0.9;
}

.row-cost-indicator {
    color: #42b2bd;
    font-size: 3rem;
    float: right;
    height: var(--cell-size);
    align-content: end;
    position: absolute;
    right: 1rem;
    pointer-events:none;
    touch-action: none;
}

.building {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    user-select: none;
    contain: size style;
}
.building.off-screen,
.building.part-of-larger-building *,
.building.part-of-larger-building {
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
    contain: strict;
    content-visibility: hidden;
}


.building > .img-wrap {
    width: 100%;
    height: 100%;
    pointer-events: all;
}
/* Added these background images to improve image display time with low internet speeds */
.building:not(.rock):not(.tunnel) > .img-wrap {
    background-size: contain;
}
.building[data-width="1"][data-height="1"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-1x1-low_80.webp");
}
.building[data-width="2"][data-height="1"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-2x1-low_80.webp");
}
.building[data-width="3"][data-height="1"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-3x1-low_80.webp");
}
.building[data-width="1"][data-height="2"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-1x2-low_80.webp");
}
.building[data-width="2"][data-height="2"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-2x2-low_80.webp");
}
.building[data-width="3"][data-height="2"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-3x2-low_80.webp");
}
.building[data-width="1"][data-height="3"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-1x3-low_80.webp");
}
.building[data-width="2"][data-height="3"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-2x3-low_80.webp");
}
.building[data-width="3"][data-height="3"]:not(.rock):not(.tunnel) > .img-wrap {
    background-image: url("../buildings/webp/building-empty-3x3-low_80.webp");
}



/* Quality frames as foreground*/
.building:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.building[data-width="1"][data-height="1"] {
    width: calc(100% + 1px);
    height: calc(100% + 1px);
}

.building:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    pointer-events: none;
    touch-action: none;
}
.building[data-width="1"][data-height="1"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-1x1_100.webp") 1x,
            url("../images/webp/frame-default-1x1_80.webp") 0.8x,
            url("../images/webp/frame-default-1x1_60.webp") 0.6x,
            url("../images/webp/frame-default-1x1_40.webp") 0.4x,
            url("../images/webp/frame-default-1x1_20.webp") 0.2x
    );
}
.building[data-width="2"][data-height="1"] {
    width: calc(200% + 1px);
    height: calc(100% + 1px);
}
.building[data-width="2"][data-height="1"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-2x1_100.webp") 1x,
            url("../images/webp/frame-default-2x1_80.webp") 0.8x,
            url("../images/webp/frame-default-2x1_60.webp") 0.6x,
            url("../images/webp/frame-default-2x1_40.webp") 0.4x,
            url("../images/webp/frame-default-2x1_20.webp") 0.2x
    );
}
.building[data-width="3"][data-height="1"] {
    width: calc(300% + 1px);
    height: calc(100% + 1px);
}
.building[data-width="3"][data-height="1"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-3x1_100.webp") 1x,
            url("../images/webp/frame-default-3x1_80.webp") 0.8x,
            url("../images/webp/frame-default-3x1_60.webp") 0.6x,
            url("../images/webp/frame-default-3x1_40.webp") 0.4x,
            url("../images/webp/frame-default-3x1_20.webp") 0.2x
    );
}
.building[data-width="1"][data-height="2"] {
    width: calc(100% + 1px);
    height: calc(200% + 1px);
}
.building[data-width="1"][data-height="2"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-1x2_100.webp") 1x,
            url("../images/webp/frame-default-1x2_80.webp") 0.8x,
            url("../images/webp/frame-default-1x2_60.webp") 0.6x,
            url("../images/webp/frame-default-1x2_40.webp") 0.4x,
            url("../images/webp/frame-default-1x2_20.webp") 0.2x
    );
}
.building[data-width="2"][data-height="2"] {
    width: calc(200% + 1px);
    height: calc(200% + 1px);
}
.building[data-width="2"][data-height="2"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-2x2_100.webp") 1x,
            url("../images/webp/frame-default-2x2_80.webp") 0.8x,
            url("../images/webp/frame-default-2x2_60.webp") 0.6x,
            url("../images/webp/frame-default-2x2_40.webp") 0.4x,
            url("../images/webp/frame-default-2x2_20.webp") 0.2x
    );
}
.building[data-width="3"][data-height="2"] {
    width: calc(300% + 1px);
    height: calc(200% + 1px);
}
.building[data-width="3"][data-height="2"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-3x2_100.webp") 1x,
            url("../images/webp/frame-default-3x2_80.webp") 0.8x,
            url("../images/webp/frame-default-3x2_60.webp") 0.6x,
            url("../images/webp/frame-default-3x2_40.webp") 0.4x,
            url("../images/webp/frame-default-3x2_20.webp") 0.2x
    );
}

.building[data-width="1"][data-height="3"] {
    width: calc(100% + 1px);
    height: calc(300% + 1px);
}
.building[data-width="1"][data-height="3"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-1x3_100.webp") 1x,
            url("../images/webp/frame-default-1x3_80.webp") 0.8x,
            url("../images/webp/frame-default-1x3_60.webp") 0.6x,
            url("../images/webp/frame-default-1x3_40.webp") 0.4x,
            url("../images/webp/frame-default-1x3_20.webp") 0.2x
    );
}
.building[data-width="2"][data-height="3"] {
    width: calc(200% + 1px);
    height: calc(300% + 1px);
}
.building[data-width="2"][data-height="3"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-2x3_100.webp") 1x,
            url("../images/webp/frame-default-2x3_80.webp") 0.8x,
            url("../images/webp/frame-default-2x3_60.webp") 0.6x,
            url("../images/webp/frame-default-2x3_40.webp") 0.4x,
            url("../images/webp/frame-default-2x3_20.webp") 0.2x
    );
}
.building[data-width="3"][data-height="3"] {
    width: calc(300% + 1px);
    height: calc(300% + 1px);
}
.building[data-width="3"][data-height="3"]:not(.rock):not(.tunnel):not(.part-of-larger-building) > .img-wrap::after {
    background-image: image-set(
            url("../images/webp/frame-default-3x3_100.webp") 1x,
            url("../images/webp/frame-default-3x3_80.webp") 0.8x,
            url("../images/webp/frame-default-3x3_60.webp") 0.6x,
            url("../images/webp/frame-default-3x3_40.webp") 0.4x,
            url("../images/webp/frame-default-3x3_20.webp") 0.2x
    );
}


.building>.img-wrap>img{
    height: 100%;
    max-width: 100%;
    transition: border-radius 0.5s linear;
    pointer-events: none; /* prevents Edge visual image search buttons */
}

.building.rock {
    border-bottom: 0.2rem dotted #336d7180;
}


.building.in-construction .building-controls,
.building.empty .building-controls,
.building.rock.selected .delete,
.building.rock.selected .building-controls {
    display:none !important;
}
/*.building.rock.reachable-for-excavation.selected .delete{*/
/*    display:block;*/
/*}*/
.building:not(.empty):not(.rock),
.building.rock.reachable-for-excavation:hover {
    cursor: pointer;
}

.building.rock.rock-addon.reachable-for-excavation.selected .info-wrap .name,
.building.rock:not(.rock-addon) .info-wrap .name {
    display:none;
}

.building.rock .building-controls {
    align-items: end;
}

.building>.info-wrap{
    top: 0;
    left: 0;
    position: absolute;
    padding: 0;
    height: 100%;
    width: 100%;
    display:none;
    flex-direction: column;
    justify-content: flex-start;

    backdrop-filter: blur(0.3rem);
    background-color: #00000080;
    box-shadow: inset 0 0 0 0.075rem #020202, inset 0 0 0 0.15rem #42b2bd, inset 0 0 2rem 0 #42b2bd;
    pointer-events:none;
    border-radius: var(--rounded-border-zoomable);
    color:white;
}

.building.selected:not(.in-construction)>.info-wrap{
    z-index:1;
}

.building.empty.drop-target>.info-wrap,
.building.in-construction>.info-wrap,
.building.selected>.info-wrap{
    display: flex;
}
.building.in-construction>.img-wrap>img {
    filter: grayscale(0.5) sepia(0.5);
}


.building.rock.drop-target::after,
.building:not([data-slots="0"]).drop-target::after,
.building.in-construction.drop-target::after,
.building.empty.drop-target::after,
.building.in-construction::after,
.building.selected::after{
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events:none;
    border-radius: var(--rounded-border-zoomable);
    box-shadow: inset 0 0 0 0.075rem #020202, inset 0 0 0 0.15rem #42b2bd;
}

.building:hover::after{
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events:none;
    border-radius: var(--rounded-border-zoomable);

    box-shadow: inset 0 0 0 0.075rem #020202, inset 0 0 0 0.15rem #42b2bd;
}

.building[data-width="2"]:not(.part-of-larger-building),
.building[data-width="2"]:not(.part-of-larger-building){
    width: 200%;
}

.building[data-width="3"]:not(.part-of-larger-building),
.building[data-width="3"]:not(.part-of-larger-building){
    width: 300%;
}

.building[data-height="2"]:not(.part-of-larger-building),
.building[data-height="2"]:not(.part-of-larger-building){
    height: 200%;
}

.building[data-height="3"]:not(.part-of-larger-building),
.building[data-height="3"]:not(.part-of-larger-building){
    height: 300%;
}

.building.in-construction .info-wrap {
    box-shadow: inset 0 0 2rem 0 #a86e00;
}
.building.in-construction::after {
    outline: 0.2rem dashed #020202;
    outline-offset: -0.2rem;
    box-shadow: inset 0 0 0 0.1rem #020202, inset 0 0 0 0.2rem #a86e00, inset 0 0 0 0.3rem #020202;
}

.building .info-wrap .name {
    font-size: 1.5rem;
    color: #fcfdfd;
    white-space: nowrap;
    border-radius: var(--rounded-border-zoomable) var(--rounded-border-zoomable) 0 0;
    border-bottom: 0.15rem dotted #2a6b7b;
    padding: 0.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
}
.building.in-construction .info-wrap .name {
    background-color: #a86e0080;
    border-color: #a86e00;
}
.building.in-construction .time-left.no-worker .counter {
    display:none;
}
.building.in-construction .time-left.no-worker::before {
    background-image: url('../images/icon-build.svg');
    background-repeat: no-repeat;
    background-size: 1.5rem;
    background-position: center;
}

.building .working-speed {
    position: absolute;
    width: 100%;
    top: 3rem;
    left: 0;
    opacity: 0.75;
    font-size: max(12px, 0.7rem);
    text-align: center;
    text-shadow: 0 0 0.1rem black, 0 0 0.2rem black, 0 0 0.4rem black;
    font-weight: 800;
    color:white;
    display:none;
}
.building:not(.selected):hover .working-speed {
    display:block;
}
.overlay-person-drag .building:not(.selected):hover .working-speed {
    display:none;
}
.building button {
    pointer-events:all;
    flex-grow: 10;
    font-size: calc(var(--cell-size) / 11);
}
.building button:after{
    padding:0.25rem;
    bottom:-1rem;
    left:-0.25rem;
    border-radius: var(--rounded-border-zoomable);
}
.building button>span {
    border-radius: var(--rounded-border-zoomable);
}


.building #btn-adventure {
    height: 100%;
}

.building.drop-target .delete,
.building.in-construction .delete,
.building.empty .delete{
    display:none;
}

.building.part-of-larger-building>button {
    display:none;
}





.reclaim-value {
    color: white;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display:none;
    pointer-events:none;
    z-index: 1;
}

.building-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-bottom: 1.25rem; /* partly offset the name top bar height when centering */
}

.building-controls .building-details {
    text-shadow: 0 0 0.1rem black, 0 0 0.2rem black, 0 0 0.4rem black;
    padding: 0.5rem;
    font-size: 0.75rem;
    max-width: calc(var(--cell-size) * 1.8);
    text-align: center;
}

.building-controls .production-wrap .current-status {
    text-align: center;
}

.building-controls .production-wrap .current-status .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.building-controls .building-details .tooltip-stat:nth-of-type(2) {
    margin-top: 0.5rem;
}

.building-controls .less-important {
    color: grey;
    font-size: 0.8rem;
}

.building.production:not(.producing-or-empty):not(.part-of-larger-building) > .slot-overlay {
    display: flex;
    background-color: #bd7c423d;
    box-shadow: inset 0 0 2rem 0 #bd4242, inset 0 0 0 1px #bd4242;
}

.overlay-construction-drag .building.empty.fits-here>.slot-overlay {
    display: flex;
}

.overlay-excavation .building.reachable-for-excavation .reclaim-value,
.overlay-person-drag .building.reachable-for-excavation .reclaim-value {
    display: flex;
}
.building.rock-addon.selected:not(.reachable-for-excavation) .reclaim-value {
    display: flex;
    padding-top: 2rem;
    height: calc(100% - 2rem);
}
.building.rock-addon.selected:not(.reachable-for-excavation) .reclaim-value .resource-value-pair::after {
    content: '?';
}
.building.rock-addon.selected:not(.reachable-for-excavation) .reclaim-value .resource-value {
    display: none;
}
.recipe-selection-form {
    display:flex;
    flex-direction: column;
    margin: 1rem;
    justify-content: center;
    position: relative;
}
.recipe-select {
    pointer-events: all;
    touch-action: auto;
    height: 2rem;
    text-shadow: 0 0 0.1rem black, 0 0 0.2rem black, 0 0 0.4rem black;
}
.max-storage {
    font-size: 0.66rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.1rem;
}
.max-storage::after {
    content: '';
    background-image: url('../images/icon-max-storage.svg');
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    background-size: 1.2em 1.2em;
}



.school-wrap {
    position: absolute;
    top: 2rem;
    right: 4rem;
    height: calc(100% - 4rem);
    min-width: 6rem;
    display:none;
}

.building:not(.selected).school-is-ready .school-wrap,
.building:not(.selected) .school-wrap.in-progress {
    display: block;
}

.school-wrap .school-setup {
    background-color: #000000bf;
    border-radius: var(--rounded-border-zoomable);
    padding: 0.5rem;
    color: white;
    height: 100%;
}

.in-progress .school-wrap {
    pointer-events: none;
    touch-action: none;
}

.in-progress .school-setup {
    display: none;
}

.school-wrap .button-start-school {
    margin: 0.5rem 0;
    height: 3rem;
    width: 100%;
}

.school-wrap .button-start-school>span {
    font-size: 1rem;
}


.lesson-not-affordable .button-start-school,
.contains-fully-trained .button-start-school {
    pointer-events: none;
    touch-action: none;
}

.lesson-not-affordable .button-start-school>span,
.contains-fully-trained .button-start-school>span {
    background-color: grey;
    box-shadow: inset 0 0.075rem 0 #d0d0d0, 0 0.5rem 0 #575757;
}

.school-wrap .timer-wrap .time-left {
    top: calc(50% + 0.5rem);
    --color-countdown: #42b2bd;
    --color-countdown-bg: #336d71;
}

.school-wrap .school-detail-duration,
.school-wrap .school-detail-cost {
    padding-right: 0.5rem;
    text-align: right;
}

.school-wrap .resource-value-pair {
    flex-direction: row;
    gap: 0.25rem;
}


.building-top-bar {
    position: relative;
    padding: 0 0.25rem;
}

.building-top-bar .delete {
    display: block;
    width: 2rem;
    padding: 0.5rem;
    height: 100%;
    pointer-events: all;
    touch-action: auto;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 2rem;
}

.in-progress .building-top-bar .delete {
    display: none;
}

.building-top-bar .delete::after {
    content:'';
    display:block;
    width: 100%;
    height: 100%;
    background-image: url("../images/destroy_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.building-top-bar .delete:hover::after {
    background-image: url("../images/destroy_icon_hover.png");
}




.building .abort-button {
    display:none;
}

.building .abort-button::after {
    display:none;
}

.building.in-construction .abort-button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem 0 0;
    margin: 0;
}
.building.in-construction .abort-button:hover{
    color:red;
    text-shadow: 0 0 0.1rem black;
}

.production-ready-overlay {
    position: absolute;
    width: 100%;
    height: calc(100% - 0.5rem);
    top: 0;
    left: 0;
    display: none;
}

.building .production-ready-overlay.ready {
    display:flex;
}
.overlay-person-drag .production-ready-overlay.ready {
    display:none;
}

.claim-resources-button {
    pointer-events: all;
    flex-grow: 10;
    cursor: grab;
}

.claim-resources-button:hover {
    animation: alternateCursor 0.3s infinite alternate;
}

@keyframes alternateCursor {
    0% {
        cursor: grab;
    }
    100% {
        cursor: grabbing;
    }
}



.claim-resources-button>span {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    position: relative;
    padding: 0 0.5rem;
    text-shadow: 0 0.075rem 0 #000;
    justify-content: end;
    font-size: 1.5rem;
}

.building .production-ready-overlay .claim-resources-button .wrapper {
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    width: calc(var(--cell-size) * 2 - 3rem);
    filter: drop-shadow(0 0.5rem 0.5rem black);
    pointer-events: none;
    touch-action: none;
}

/*.resource-value-pair {*/
/*    flex-shrink: 1;*/
/*    min-width: 0;*/
/*}*/


.claim-resources-button .icon-summary-4 {
    font-size: 4rem;
    display: contents;
}
.claim-resources-button .icon-summary-3 {
    font-size: 3rem;
    display: contents;
}
.claim-resources-button .icon-summary-2 {
    font-size: 2rem;
    display: contents;
}
.claim-resources-button .icon-summary-1 {
    font-size: 1.5rem;
    display: contents;
}
.claim-resources-button .icon-summary-0 {
    font-size: 1rem;
    display: contents;
}

.claim-resources-button::after {
    display:none;
}


.innovation-description {
    color: greenyellow;
    margin: 0;
}

.innovation-description:first-of-type {
    margin-top: 0.5rem;
}

.innovation-description:first-of-type::before {
    content: 'Innovations: ';
    width: 100%;
    display: block;
    text-decoration: underline;
}

.beds-and-rent-display,
.lifter-time-remaining {
    width: 100%;
    display: block;
    color: #aaa;
}

.beds-and-rent-display .resource-value-pair {
    flex-direction: row;
    vertical-align: middle;
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
}

.beds-and-rent-display .beds {
    margin-right: 1.5rem;
}