html {
    background-image: url('images/new_background3.png');
    background-size:cover;
    background-position-x: center;
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0px;
    box-sizing: border-box;
    color: #fff;
    font-family: system-ui;

}
h1 {
    text-shadow: 3px 1px 3px #0f2a30;
    margin-bottom: 10px;
    font-size: 2.2em;
}

p {
    text-shadow: 0px 0px 4px #0f2a30,0px 0px 4px #0f2a30,0px 0px 4px #0f2a30;
    margin:0px;
    font-size: large;
}

#wifi-message.animate {
    animation: wifi-message-animate 0.15s 6;

}
.top #messages {
    margin-top: 30px;
}
.top #messages #message, .top #messages #wifi-message {
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin: 0px;
}

.top #language-picker-select{
    position: fixed;
    right: 0px;
    top: 0px;
    margin: 15px;
}

.top #language-picker-select img {
    width: 35px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.top #language-picker-select #current-language {
    padding: 3px;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: rgb(6, 166, 196);
}

.top #language-picker-select .options {
    position: absolute;
    top: 45px;
    display: none;
    flex-direction: column;
    background: rgb(6, 166, 196);
    border: 1px solid #ccc;
    border-radius: 6px;
    z-index: 10;
}

.top #language-picker-select .options div {
    padding: 3px;
    text-align: center;
}

.top #language-picker-select .options div:hover {
    background-color: #f0f0f0;
}

.wrap {
    width: 100%;
    overflow:auto;
}

.container {
    visibility:hidden;
    opacity: 0;
    transition: opacity 0.35s, visibility 0.35s;
}

.container.active-mode {
    visibility: visible;
    opacity:1;
    transition: opacity 0.35s 0.35s, visibility 0.35s 0.35s;
}

.container.container-invisible {
    display: none;
}

.top {
    height: 20%;
    padding: 10px;
    padding-top: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
}

.center {
    height: 60%;
    text-align: center;
    padding-top:18.5vh;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.center .lock_button {
    background-image: url(images/enable_button.png);
    box-shadow: rgb(61 52 43) 8px 16px 19px 0px;
    border-color: rgb(6, 166, 196);
    border-radius: 14vh;
    text-align: center;
    display: inline;
    margin: auto;
    width: 27.85vh;
    height: 27.85vh;
    background-size: cover;
}

#spinner {
    visibility: hidden;
    position: absolute;
    height: 27.9vh;
    opacity: 70%;
}

.center .lock_button.pressed {
    box-shadow: rgb(61 52 43) 4px 8px 19px 0px;
}

.center .lock_button.opening {
    box-shadow: rgb(61 52 43) 2px 10px 19px 0px;
    padding-top:4px;
}

.center .lock_button:disabled {
    background-image: url(images/disable_button.png);
}

.center #nightModeControl {
    padding-top: 40px;
}

.bottom {
    height: 40%;
    background: linear-gradient(rgb(29 132 143 / 0%), rgb(32 133 142))
}

.bottom-pusher {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.layer {
    text-align: center;
    padding: 10px 0px;
}

.layer.admin .column p {
    padding: 18px 0px;
    line-height: 16px;

}

.layer .column {
    float: left;
    width: 50%;
    padding: 0px 0px 20px 0px;
    box-sizing: border-box;
}

.layer .column:first-child {
    padding-right: 10px;
}

.layer .column:last-child {
    padding-left: 10px;
}

#spinner.spinner-loading {
    visibility: visible;
}

.button-color-blue  {
    background-color: initial;
    background-image: linear-gradient(165deg, rgb(95 244 249), rgb(8 123 165) 40%);
    color: #FFFFFF;
}

.button-color-white  {
    background-color: initial;
    background-image: linear-gradient(165deg, rgb(244 255 255), rgb(232 227 206) 40%);
    color: #06262f;
}

.button-color-red  {
    background-color: initial;
    background-image: linear-gradient(165deg, rgb(253 215 189), rgb(186 55 60) 40%);
    color: #FFFFFF;
}

.button-color-blue-dark  {
    background-color: initial;
    background-image: linear-gradient(165deg, rgb(64,94,106), rgb(14,39,59) 40%);
    color: #FFFFFF;
}

/* CSS */
.button-72 {
    align-items: center;
    border-radius: 42px;
    border-style: none;
    cursor: pointer;
    display: flex;
    box-shadow: rgb(65 60 60) 0 2px 6px;
    font-size: 18px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .04em;
    line-height: 16px;
    margin: 0;
    padding: 18px 18px;
    text-align: center;
    text-shadow: rgba(255,255,255,0.8) 0 -10px 18px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width:100%;
}

.button-color-blue:hover {
    background-image: linear-gradient(165deg, #097ba4, #05455c 40%);
}

.button-color-white:hover {
    background-image: linear-gradient(165deg, #e1d6bc, #bfac86 40%);
}


.button-color-red:hover {
    background-image: linear-gradient(165deg, #c24b47, #792027 40%);
}

.button-color-blue-dark:hover  {
    background-image: linear-gradient(165deg, rgb(64,94,106), rgb(14,39,59) 40%);
}

input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 42px;
    font-size: 21px;
    background: #f5f2e8;
    text-align: center;
}

#version.layer, #version p {
    padding: 0px;
    margin: 0px;
}

#version p {
     border-style: solid;
     border-width: 1px;
     display: inline-block;
     padding: 2px;
     border-radius: 4px;
     background-color: #125467;
     font-size: 6px;
 }


@keyframes wifi-message-animate {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, 5px) rotate(3deg); }
    50% { transform: translate(0, 0) rotate(0deg); }
    75% { transform: translate(-5px, 5px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}