/******************************************/
/**********  AnyHazard.css Root  **********/
:root {
    --background: #444;
    --background-body: #000;
    --background-active: #222eff;
    --background-nonclick: #666;
    --background-white-translucent: rgba(255, 255, 255, 0.8);
    --background-gray-translucent: rgba(100, 100, 100, 0.8);
    --background-transparent: rgba(0, 0, 0, 0);
    --background-disabled: #888;
    --foreground-disabled: #bbb;
    --background-button: #222;
    --border: #888;
    --nonclick-border: #444;
    --foreground: #fff;
    --active-button: #d9875d;
    --red-color: #f25a5a;
    --opacity: 0.9;
    --translucent-opacity: 0.7;

    --tiny-tiny-font: 0.3rem;
    --tiny-font: 0.5rem;
    --smalltiny-font: 0.55rem;
    --smaller-font: 0.65rem;
    --small-font: 0.7rem;
    --normal-font: 1rem;
    --mediumminus-font: 1.2rem;
    --medium-font: 1.5rem;
    --mediumplus-font: 1.7rem;
    --large-font: 2rem;
    --xlarge-font: 3rem;
    --huge-font: 4rem;
    --icon-size: 1rem;

    --ui-z-index: 1000;
    --controls-z-index: 1250;
    --popup-z-index: 1350;
    --cover-z-index: 1500;
    --surface-z-index: 1600;

    --border-radius: 0.2rem;
}

/*********************************************************/
/**********  Focus when "clicking" on a button  **********/
:focus {
    outline: #03a9f4 auto 12px;
    box-shadow: 0px 0px 6px 6px #00bcd4;
}

/* When mouse is detected, ALL focused elements have outline removed */
body.using-mouse :focus {
    outline: none;
}

/***************************************************/
/**********  CSS for "primitive" objects  **********/
html {
    font-size: calc((1vmin) + (1vmax));
    /* font-size: calc((0.4em + 0.5vmin) + (0.4em + 0.5vmax)); */
}

body {
    font-family: 'Roboto', 'HelveticaNeue-Light', 'Helvetica Neue Light',
        'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--background-body);
    color: var(--foreground);
    text-align: center;
    box-sizing: border-box;
}

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

div {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.crew-titles {
    font-size: var(--smalltiny-font) !important;
    /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
    /* opacity: 0.8 !important; */
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0.5rem !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border: rgba(0, 0, 0, 0) 0px solid !important;
    box-shadow: none !important;
    /* color: var(--foreground-disabled); */
}

.crew-titles:before {
    display: none;
}

.small-crew {
    display: none;
}

*[class*='label_ambulance'] {
    display: block !important;
}

*[class*='label_engine'] {
    display: block !important;
}

.leaflet-tooltip:before .crew-titles {
    right: 0;
    margin-right: -12px;
    border-color: #00000000 transparent transparent transparent !important;
}

.leaflet-tooltip {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    /* background-color: rgba(255, 255, 255, 0.4);
     */
    /* font-size: var(--small-font); */
    background-color: rgba(255, 255, 255, 0) !important;
    border: rgba(0, 0, 0, 0) 0px solid !important;
    box-shadow: none !important;
    padding: 0.1rem;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    margin-top: 0.5rem;
}

.smaller-font {
    font-size: var(--smaller-font);
}

.medium-font {
    font-size: var(--medium-font);
}

.large-font {
    font-size: var(--large-font);
}

.huge-font {
    font-size: var(--huge-font);
}

.box {
    color: var(--foreground);
    padding: 0.01rem;
    margin: 0.05rem;
    /* border-radius: var(--border-radius); */
    opacity: var(--opacity);
    background-color: var(--background);
    font-size: var(--small-font);
}

.button {
    background-color: var(--background-button);
    border-radius: var(--border-radius);
    padding: 0.3rem;
    margin: 0.05rem;
    cursor: pointer;
    font-size: var(--small-font);
    display: grid;
    vertical-align: middle;
    /* border-width: 0.05em;
    border-style: solid;
    border-color: var(--border); */
}

.button-smaller {
    font-size: var(--tiny-font);
    padding: 0.05rem;
}

.button-fueltype {
    padding: 0.6rem;
}

.taller {
    min-height: 1.5rem;
}

.taller-limited {
    max-height: 1.5rem;
}

@media (max-width: 800px) {
    .button > .no-narrow-screen {
        display: none;
    }

    .button > .icon {
        font-size: 2em;
    }
}

.button .label-below {
    font-size: var(--smalltiny-font);
    padding-top: 0.25rem;
}

.button .label-right {
    font-size: var(--smalltiny-font);
}

.controlsZIndex {
    z-index: var(--controls-z-index);
}

/************************************************/
/*****  Loading Service - Load/Save Dialog  *****/

.loading-dialog {
    text-align: center;
    padding-top: 18rem;
    z-index: var(--cover-z-index);
    font-size: var(--large-font);
}

.loadingellipsis {
    margin: 2px;
}

.loadingellipsis:after {
    display: inline-block;
    animation: dotty steps(1, end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}

/*****************************************************/
/*****  Main Cover - Startup and Loading Screen  *****/
.main-cover {
    position: absolute;
    background: #222;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
}

.main-cover .main-title {
    font-size: var(--huge-font);
    padding-top: 10rem;
    top: 30%;
    text-align: center;
}

.main-cover .main-title .title {
    color: #d12424;
    font-weight: bold;
}

.main-cover .main-title .subtitle {
    color: #fff;
    font-weight: bold;
}

.main-cover .main-title .loading {
    margin-top: 4rem;
    font-size: var(--large-font);
    color: var(--foreground-disabled);
}

.main-cover .main-title .url {
    margin-top: 10rem;
    font-size: var(--medium-font);
    color: var(--foreground-disabled);
}

/*************************************/
/*****  Special Icon formatting  *****/
.iconFloodWave {
    content: url(../images/icons/anyhazard_flood_icon.png);
    margin: 0 auto;
    margin-top: 0%;
    /* margin-bottom: -4%; */
    padding: 0px;
    /* width: var(--small-font); */
}

.iconWatershed {
    content: url(../images/icons/anyhazard_watershed_icon.png);
    margin: 0 auto;
    margin-top: 0%;
    /* margin-bottom: -7%; */
    padding: 0px;
    /* width: var(--small-font); */
}

.iconRainy {
    content: url(../images/icons/anyhazard_rainy_icon.png);
    margin: 0 auto;
    margin-top: 0%;
    /* margin-bottom: -7%; */
    padding: 0px;
    /* width: var(--small-font); */
}

.icon-hoselay {
    content: url(../images/icons/hose_icon2.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-traffic-light {
    content: url(../images/svg/traffic-light-10.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-ready-evac {
    content: url(../images/svg/one-man-walking-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.green-border {
    border: 0.3em solid #78f25a;
}

.red-border {
    border: 0.3em solid var(--red-color);
}

.yellow-border {
    border: 0.3em solid #ffe800;
}

.lightgrey-border {
    border: 0.3em solid #ccc;
}

.red-font-glow {
    /* color: var(--red-color);
     */
    text-shadow: 0 0 0.02rem var(--red-color), 0 0 0.02rem var(--red-color),
        0 0 0.02rem var(--red-color);
}

.icon-set-evac {
    content: url(../images/svg/carrying-suitcase-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-fast-car {
    content: url(../images/svg/noun-fast-car-594480.svg);
    padding: 0px;
    width: var(--mediumplus-font);
    margin-left: auto;
    margin-right: auto;
}

.icon-destination {
    content: url(../images/svg/destination-1-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-evacuation-template {
    /* content: url(../images/svg/polygon-svgrepo-com.svg); */
    content: url(../images/svg/geojson-file-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-draw-evacuation-area {
    content: url(../images/svg/polygon-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-cody {
    content: url(../images/svg/sitting-on-a-chair-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

.icon-arrow-right {
    font-size: var(--large-font);
    font-weight: bolder;
}

.icon-arrow-left {
    font-size: var(--large-font);
    font-weight: bolder;
}

.icon-restart-size {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: var(--mediumminus-font);
    --icon-size: 0.9rem;
}

.icon-close-size {
    font-size: var(--mediumplus-font);
    --icon-size: 1.4rem;
}

.icon-submit {
    content: url(../images/svg/submit-svgrepo-com.svg);
    padding: 0px;
    width: var(--icon-size);
    margin-left: auto;
    margin-right: auto;
}

/*************************************************/
/**********  Selected buttons turn Blue **********/
.selected-button {
    color: var(--foreground) !important;
    background-color: var(--background-active) !important;
    text-shadow: 1px 1px var(--background-nonclick) !important;
}

/* Clicked buttons */
.active-button {
    color: var(--foreground) !important;
    background-color: var(--active-button) !important;
    text-shadow: 1px 1px var(--background-nonclick) !important;
}

/* Disabled buttons -- e.g. when traffic is unavailable */
.disabled-button {
    color: var(--foreground-disabled) !important;
    background-color: var(--background-disabled) !important;
}

.disabled-button .name {
    color: var(--foreground-disabled) !important;
}

.ownership-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: calc(var(--popup-z-index) - 1);
    background-color: var(--background-white-translucent);
    opacity: var(1);
    font-size: var(--large-font);
    vertical-align: middle;
}

.ownership-cover .message {
    font-size: var(--medium-font);
    background-color: var(--background-gray-translucent);
    text-align: center;
    color: var(--foreground);
    padding: 2rem;
}

.ownership-cover .button {
    font-size: var(--medium-font);
    max-width: 24rem;
    padding: 1.5rem;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
}

/* The map div */
#OLmap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--background-body);
}

.leaflet-control-zoom {
    visibility: hidden;
}

.leaflet-control-scale {
    margin-bottom: 10em !important;
}

.info-container {
    position: absolute;
    top: 0;
    z-index: var(--ui-z-index);
    width: 100%;
    background-color: #00000000;
    margin-top: 0;
    pointer-events: none;
}

.info-container .info {
    font-size: var(--small-font);
    pointer-events: auto;
    opacity: var(--translucent-opacity);
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    text-align: center;
    width: fit-content;
    padding: 0.2rem;
    margin-top: 0;
}

/***************************************************/
/**********  Laser Server/Pointer Status  **********/
.status {
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--opacity);
    z-index: var(--controls-z-index);
}

.status > .item {
    float: left;
    /*padding: 2px 5px 2px 5px;*/
    font-size: var(--small-font);
    color: var(--foreground);
    background-color: var(--background-nonclick);
    border-left: 1px solid #aaa;
    padding: 0.2rem;
    margin-top: 0;
}

.item .icon {
    display: inline-block;
    vertical-align: middle; /* align with text */
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 0.25rem; /* some spacing before "Laser" */
}

.item.laser-status {
    cursor: pointer;
    z-index: var(--controls-z-index);
}

.status .laser-off {
    color: #fff;
}

.status .laser-on {
    color: #78f25a;
}

.status .no-network {
    color: #ffe800;
}

/* .status :first-child {
    border-left: none;
} */

#wind-meter-container {
    position: absolute;
    top: 2rem;
    left: 0;
    opacity: var(--opacity);
    z-index: var(--ui-z-index);
    width: 9rem;
    height: 9rem;
}

#wind-meter {
    width: 100%;
    height: 100%;
}

.show-ui {
    opacity: var(--opacity);
    z-index: var(--ui-z-index);
    position: absolute;
    bottom: 0;
    right: 0;
}

/** The bottom area where the controls and menus are **/
.bottom-control-area {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: var(--controls-z-index);
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 5vw;
    width: 100vw;
}

.bottom-button-group {
    color: var(--foreground);
    opacity: var(--opacity);
    z-index: var(--controls-z-index);
    display: flex;
    flex-direction: row;
}

.bottom-button-group > .button {
    margin: 0.1rem;
    margin-bottom: 0rem;
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
    /* center text vertically */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* make the buttons fill the space when centering text vertically*/
    justify-content: center;
}

.bottom-button-group .icon {
    font-size: var(--icon-size);
}

.center-text-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    flex-wrap: wrap;
}

/* .bottom-control-area :first-child :first-child  {
    margin-left: 0.0rem;
    border-radius: 0rem var(--border-radius) var(--border-radius) 0rem;
}
.bottom-control-area :last-child :last-child  {
    margin-right: 0.0rem;
    border-radius: var(--border-radius) 0rem 0rem var(--border-radius);
} */
.bottom-control-area .clock {
    display: flex;
    flex-direction: column;
    background-color: var(--background-nonclick);
    border-width: 0;
    padding: 0;
    margin-bottom: 0;
    width: 8rem;
    margin-top: 0.35%;
    /* this is a hack to make the clock line up with the other buttons */
}

.bottom-control-area .acres {
    font-size: var(--smaller-font);
    background-color: var(--background);
    border-width: 0;
}

.bottom-control-area .time {
    padding: 0.09rem;
}

/** The modes menu **/
.modes {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: var(--medium-font);
}

.modes {
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--medium-font);
    z-index: var(--ui-z-index);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    align-content: end;
    pointer-events: none;
    height: calc(100% - 2rem);
}

.modes > * {
    pointer-events: auto;
}

.modes .selected-box.modes-not-open {
    /* font-weight: bold;
    font-size: var(--normal-font); */
    margin-bottom: 0.5rem;
}

.modes .selected-box {
    background-color: var(--background-active);
    color: var(--foreground-active);
    text-shadow: 1px 1px var(--border);
}

/*
    padding: 0.3rem;
    margin: 0.05rem;
*/

.mode-box {
    border-radius: var(--border-radius);
    padding: 0.35rem;
    margin: 0.1rem;
    width: 5em;
    font-size: var(--smaller-font);
    margin-right: 0;
}

.mode-box .icon {
    font-size: var(--icon-size);
}

.modes .icon {
    font-size: var(--icon-size);
}

.modes .label-below {
    font-size: var(--smalltiny-font);
    padding-top: 0.3rem;
}

.modes .label {
    font-size: var(--small-font);
}

.mode-box-search {
    border-radius: var(--border-radius);
    /*padding-bottom: 0.2rem;*/
    /*margin-bottom: 0.1rem;*/
    /*width: 100vw;
        margin-right: 0;
*/
    font-size: var(--smaller-font);
    align-items: center;
}

.three-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
}

.ymd-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.1rem;
}

.hm-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.1rem;
}

.tswfa-button-row {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
    grid-gap: 0.5rem;
    padding-top: 0.5rem;
}

.three-item-title {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-gap: 0.5rem;
}

.three-button-row-density {
    display: grid;
    grid-template-columns: 0.7fr 1.6fr 0.7fr;
    grid-gap: 0.5rem;
}

.two-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.4rem;
}

.card {
    margin-bottom: 0.5rem;
}

.card .label {
    background-color: var(--background-nonclick);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding-left: var(--small-font);
    padding-right: var(--small-font);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.card .small {
    font-size: var(--tiny-font);
}

.card .medium {
    font-size: var(--small-font);
}

.card .large {
    font-size: var(--medium-font);
}

.card .label-narrow {
    background-color: var(--background-nonclick);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--popup-z-index);
    background: var(--background-gray-translucent);
    display: grid;
    align-content: center;
    justify-content: center;
}

.popup .head {
    display: grid;
    /*grid-template-columns: auto var(--huge-font);*/
    background-color: var(--background);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    /*align-items: end;*/
    align-content: center;
}

.popup .title {
    font-size: var(--medium-font);
    font-weight: bold;
    text-align: center;
    padding: 1rem;
}

.popup .body {
    font-size: var(--normal-font);
    text-align: center;
    padding: 0.5rem;
    background-color: var(--background);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.popup .explanation {
    font-size: var(--normal-font);
    text-align: center;
    padding-bottom: 1.5rem;
}

.popup .button {
    font-size: var(--medium-font);
}

.exit-button {
    font-size: var(--large-font);
    font-weight: bolder;
    text-align: center;
    padding: 1rem;
    margin: 0.2rem;
}

.qrcode {
    padding: 4rem;
    background-color: #fff !important;
}

.qrcode img {
    margin-left: auto;
    margin-right: auto;
}

/** The scenario selector menu **/
.popup-list-box {
    width: 100vw;
    height: 100vh;
    z-index: var(--popup-z-index);
    background: var(--background-transparent);
    position: absolute;
    top: 0;
    left: 0;
    align-content: center;
    display: grid;

    /* align-content: space-between; */
    /* grid-template-columns: 4em auto; */
}

.popup-list-box .head {
    display: grid;
    grid-template-columns: 8rem auto 3rem 5rem;
    align-items: center;
    background-color: var(--background-gray-translucent);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    /*margin-bottom: 0;*/
    vertical-align: middle;
}

.popup-list-box .main-title {
    font-size: var(--xlarge-font);
    text-align: center;
    font-weight: bold;
}

.popup-list-box .label {
    font-size: var(--normal-font);
    text-align: center;
    font-weight: bold;
    margin: 0.05rem;
}

/* .popup-list-box .head .exit-button {
    font-size: var(--large-font);
    font-weight: bolder;
} */

.popup-list-box .inner-container {
    width: 80vw;
    background-color: var(--background-gray-translucent);
    margin-top: 0;
}

.scrollable-list-container {
    height: 65vh;
    display: grid;
    grid-template-columns: 4rem 10fr 4rem;
    grid-gap: 1vw;
}

.scrollable-list {
    height: inherit;
    display: flex;
    flex-flow: column wrap;
    justify-content: left;
    align-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.scrollable-list .button {
    margin: 0.4rem;
    max-width: 20rem;
    min-width: 7rem;
    overflow-wrap: anywhere;
}

.scrollable-list .line-break {
    flex-basis: 100%;
}

.scrollable-list::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.tab-label-active {
    background-color: var(--background-active) !important;
    margin-bottom: 0px !important;
}

.tab-label {
    color: var(--foreground) !important;
    text-shadow: 1px 1px var(--background-body) !important;
    border-radius: 1em 1em 0 0;
    float: left;
    background-color: var(--background);
    cursor: pointer;
    padding: 0.5rem;
    margin: 1px;
    border-width: 0.3rem;
    border-style: solid;
    border-color: var(--border);
}

.time-slider {
    position: absolute;
    bottom: 5rem;
    left: 14%;
    width: 72%;
    background: linear-gradient(
        0deg,
        var(--background-body) 0.2em,
        var(--background-transparent) 0.2em
    );
    background-position: 0 1.7rem;
    outline: 0;
    box-shadow: none;
    border-radius: 2rem;
    margin: 1rem;
    padding: 0;
}

.time-slider .slider-handle {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    background-color: var(--background);
    pointer-events: none;
    position: relative;
    left: 0%;
    transform: translate(-1em, 0);
    padding: 0;
    margin: 0;
}

/**************************************/
/**********  Scenario Maker  **********/

.scenario-maker-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.scenario-maker-container * {
    pointer-events: auto;
}

.scenario-maker-container .bounding-box-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 990;
    pointer-events: none;
}

.scenario-maker-container input[type='text'] {
    font-size: var(--small-font);
    width: 18rem;
    height: 2rem;
    border: 0px solid var(--border);
    margin: 0.35rem;
    border-radius: var(--border-radius);
    background: var(--background-white-translucent);
}

/* 
.scenario-maker-container input[type='text']:focus {
    outline: none;
} 
*/

.scenario-maker-container .ui-container {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--controls-z-index);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: end;
    justify-items: end;
    pointer-events: none;
}

.scenario-maker-container .ui-container .list-container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.scenario-maker-container .ui-container .button {
    /* min-width: 8rem; */
    margin: 0.5rem;
    pointer-events: all;
}

.scenario-maker-container .search-result-container {
    /* width: 80%; */
    pointer-events: all;
}

.scenario-maker-container .ui-container .middle-column {
    display: grid;
    align-content: space-between;
    align-items: end;
    pointer-events: none;
}

.scenario-maker-container input[type='checkbox'] {
    width: 0.7rem;
    height: 0.7rem;
}

.scenario-maker-container .dup-checkpoint-checkbox {
    padding: 0.5rem;
}

.layers-list .button {
    padding: 0.05rem;
    margin: 0.15rem;
    max-height: 1.5rem;
    min-width: 10rem;
}

.layers-list .scroll-right {
    max-height: 100% !important;
}

.layers-list .scroll-left {
    max-height: 100% !important;
}

/* Full-screen cover for "anysurface": drawing the calibration messages, the stripe scan,
 * and laser cursor.
 */
.surface {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cover-z-index);
}

.surface #scan-canvas,
.surface #pointer-canvas,
.surface #align-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.surface .align-message {
    position: absolute;
    font-size: var(--normal-font);
    color: #888;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: var(--surface-z-index);
}

.surface #align-bot-canvas {
    z-index: var(--surface-z-index);
}

.surface #align-top-canvas {
    z-index: var(--surface-z-index);
}

.surface .calib-container {
    position: absolute;
    z-index: var(--surface-z-index);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    border: 0;
    margin: 0;
    padding: 0;
}

.surface .calib-container .message {
    text-shadow: none;
    position: absolute;
    color: black;
    font-size: calc((0.4em + 1vmin) + (0.4em + 1vmax));
    width: 100%;
    text-align: center;
    top: 10%;
}

.surface .calib-container .mound-square {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 3px solid black;
    top: 50%;
    left: 50%;
    margin-left: -70px;
}

#anysurface-calibrator-container {
    background-color: #f8f8ff;
    pointer-events: painted !important;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cover-z-index);
    box-sizing: border-box;
    overflow: auto;
}

#anysurface-calibrator-container:focus,
#anysurface-calibrator-container *:focus {
    outline: none !important;
    box-shadow: none !important;
}

#anysurface-calibrator-container .close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: var(--surface-z-index);
    background: #ffffff;
    border: 0.25rem solid #000000;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    color: #000;
    font-size: 1rem;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.2s;
}

#anysurface-calibrator-container .close-button:hover {
    box-shadow: 0 0 0.75rem red;
    transform: translateY(-0.1rem);
}