html, body {
    height: 100%;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: black;
}
.version {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    right: -23px;
    top: 18px;
    width: 100px;
    height: 19px;
    background-image: url(/img/hud/versionbg.png);
    background-size: auto 100%;
    background-position: center;
    transform: rotate(45deg);
    color: #f3f1ac;
    font-size: 0.7em;
    text-align: center;
    font-family: fangsong;
    line-height: 180%;
}
.webapp_notice {
    color: #ff3a3a;
    background-color: #08090ac7;
    border: 1px solid black;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 30px;
    text-align: center;
}
.map {
    width: 100%;
    height: 190%;
    min-height: 190%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
.mapboxgl-ctrl-bottom-right {
    position:inherit !important;
}
.marker {
    z-index: 1;
}
.marker-z {
    z-index: 2;
}
.marker-res {
    z-index: 0;
}
.marker-icon {
    width: 10vmin;
}
.marker-icon-large {
    width: 25vmin;
}
.zmarker-icon {
    pointer-events: none;
    width: 10vmin;
}
.resource-icon {
    width: 5vmin;
}
.hud {
}
.stats {
    pointer-events: none;
    position: fixed;
    z-index: 80;
    left: 0;
    bottom: 0;
    width: 38px;
}
.inventory_button {
    position: fixed;
    z-index: 100;
    right: -8px;
    bottom: -3px;
    width: 80px;
}
.inventory_button img {
    width: 100%;
}
.item_notifications {
    pointer-events: none;
    position: fixed;
    z-index: 99;
    width: 75px;
    right: 0;
    bottom: 105px;
    text-align: right;
}
.pop_inventory_item {
    display: inline-block;
}
.pop_inventory_item img {
    width: 30px;
    margin: 3px 5px;
}
.pop_center_inventory_item {
    position: fixed;
    display: inline-block;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
}
.pop_center_inventory_item img {
    width: 60px;
}
.popitem_fountainLeft {
    offset-path: path("m 0 0 a 3 1 -85 1 0 -150 130");
    animation: fountainLeft 1500ms 1 ease-out;
}

.popitem_fountainRight {
    offset-path: path("m 0 0 a 1 3 -5 1 1 150 130");
    animation: fountainRight 1500ms 1 ease-out;
}
@keyframes fountainRight {
    0% {
        offset-distance: 0%;
        transform: rotate(0deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        transform: rotate(65deg);
        opacity: 0;
    }
}
@keyframes fountainLeft {
    0% {
        offset-distance: 0%;
        transform: rotate(0deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        transform: rotate(-65deg);
        opacity: 0;
    }
}
@keyframes fountainFade {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: .6;
    }

    100% {
        transform: rotate(360deg) scale(.9);
        opacity: 0;
    }
}
.overlay, .weather, .damageoverlay {
    display: none;
    pointer-events: none;
    z-index: 69;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-repeat: no-repeat;
    padding-top: 100%;
}
.overlay {
    display: block;
    padding-top: unset;
    height:100%;
}
.deathoverlay {
    display: none;
    opacity: 0%;
    pointer-events: none;
    z-index: 70;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/img/hud/blood/overlay.png);
    background-size: 100% 100%;
}
.deathoverlay .confirmation {

}
.action {
    z-index: 60;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.action div { /*NOTE: hides panolense controlbar*/
    display:none !important;
}
.actionm, .actionl {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: auto 100%;
    background-position-x: 0%;
    background-repeat: repeat-x;
}
.actionm {
    z-index: 70;
    background-color: brown;
}
.actionl {
    z-index: 80;
    background-color:brown;
}
.action_close {
    position:fixed;
    left:0;
    top:0;
    width:25px;
    height:25px;
}
.system_message {
    position: fixed;
    z-index: 102;
    width: 100%;
    height: 100%;
}
.system_message_container {
    position: fixed;
    display: block;
    background-color: ghostwhite;
    padding: 3px;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius:10px;
}
.system_message_actions{
    display: block;
}
.system_message_title {
    display: block;
    color: cornflowerblue;
    text-align: center;
}
.system_message_message {
    display: block;
    color: dimgray;
    padding-bottom: 5px;
    border-bottom: solid 1px lightgray;
}
.system_message_no, .system_message_yes {
    color: slategrey;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    width: 48%;
    padding: 3px 5px 3px 5px;
}
.system_message_yes {
    color: cornflowerblue;
    border-left: solid 1px lightgray;
}
.player_marker {
    position: fixed;
    z-index: 2;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.player_marker img {
    width: 120px;
    pointer-events:none;
}
.player_map_3d {
    height: 260px;
    width: 250px;
}
.dev_menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: black;
    color: white;
    padding: 30px 10px;
    width: 100%;
    /*height: 100%;*/
    font-size: 1.3em;
}
.dev_menu table {
    width: 100%;
}
.dev_menu tr {
    width: 100%;
}
.dev_menu tr td:first-child {
    text-align: right;
}
.dev_menu tr td {
    width: 50%;
    padding: 5px 10px;
}
.player_notificationbar {
    pointer-events: none;
    position: fixed;
    z-index: 98;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    padding: 2px 2px 2px 20px;
}
.player_notificationbar > span {
    pointer-events: all;
    position: relative;
}
.player_notificationbar img {
    height: 100%;
}
.noticeCount {
    pointer-events: none;
    display: inline-block;
    position: absolute;
    right: 0;
    width: 20px;
    background-image: url('/img/hud/countbg.png');
    background-repeat: no-repeat;
    background-size: 20px;
    color: white;
    line-height: 22px;
    font-weight: 500;
    font-size: 0.8em;
    text-align: center;
    vertical-align: middle;
}
.loading {
    pointer-events:none;
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loading img {
    max-width:25%;
    max-height:25%;
    transform-origin: 50% 50%;
    animation: 1.47059s linear 0s infinite normal forwards running loadingSpin;
}
@keyframes loadingSpin {
    0% {
        animation-timing-function: cubic-bezier(0.5856,0.0703,0.4143,0.9297);
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.login {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    background-color: #390000;
    background-image: url('/img/web/dream1.jpg');
    background-size: cover;
    background-position-x: 30%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: 60s linear 0s infinite normal forwards running backgroundPan;
}
@keyframes backgroundPan {
    0% {
        background-position-x: 40%;
    }

    50% {
        background-position-x: 60%;
    }

    100% {
        background-position-x: 40%;
    }
}
.login_container {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    background-color: #08090ac7;
    padding: 50px;
    border: 2px solid black;
    clip-path: polygon(0 0, 20% 0, 100% 10%, 100% 100%, 80% 100%, 0% 90%);
    width: 100%;
    max-width: 390px;
}
.login_title {
    color: whitesmoke;
    font-weight: 600;
}
.login_message, .login_err {
    color: whitesmoke;
    font-size: small;
}
.login_form {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    width: 100%;
}
.login_form input {
    width: 100%;
    margin: 2px 0 3px 0;
}
.login_form button {
    padding: 0 50px;
}
.cancelLogin {
    margin: 0 47px 0 0;
    color: whitesmoke;
}
.notifcations {
    pointer-events: none;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 101;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #7777775e;
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
    animation: 60s linear 0s infinite normal forwards running;
}
@keyframes playerdeath_light_backgroundPan {
    0%, 100% {
        background-position-x: 40%;
        background-image: url("/img/act/light/playerdeath.jpg");
    }

    50% {
        background-position-x: 60%;
        background-image: url("/img/act/light/playerdeath2.jpg");
    }
}
@keyframes playerdeath_dark_backgroundPan {
    0%, 100% {
        background-position-x: 40%;
        background-image: url("/img/act/dark/playerdeath.jpg");
    }

    50% {
        background-position-x: 60%;
        background-image: url("/img/act/dark/playerdeath2.jpg");
    }
}
.message_container {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    background-color: #08090ac7;
    padding: 50px;
    border: 2px solid black;
    clip-path: polygon(0 0, 20% 0, 100% 10%, 100% 100%, 80% 100%, 0% 90%);
    max-width: 390px;
}
.message_title {
    color: whitesmoke;
    font-weight: 600;
}
.message_text {
    color: whitesmoke;
    font-size: smaller;
}
.message_actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
.message_actions span {
    pointer-events: all;
    border: 2px solid black;
    padding: 3px 30px;
    color: black;
    background-color: whitesmoke;
    font-weight: 600;
    margin: 7px 0 0 0;
    cursor:pointer;
}
@media all and (display-mode: standalone) {
    .webapp_notice {
        display: none;
    }
}

.inventory {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
}
.inventory_menu {
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow: auto;
}
.inventory_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: black;
}
.inventory_header {
    display: flex;
    width: 100%;
    height: 30px;
    color: whitesmoke;
    font-weight: 600;
    font-size: larger;
    overflow: hidden;
    border-bottom: 3px solid #220f00;
    background-color: black;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23391a00' fill-opacity='0.36' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.inventory_header span {
    margin-right: 7px;
    margin-left: 6px;
}

.inventory_header img {
    height: 100%;
    padding: 0 10px 0 0;
}
.inventory_items {
    display: inline-block;
    flex: 1;
    width: 100%;
    height: 100%;
    border: 3px solid #220f00;
    background-color: #110700;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232d2d2d' fill-opacity='0.36' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    overflow: hidden;
}
.inventory_items > span, .equipment_inventory_items {
    display: inline-block;
    width: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.inventory_items > span::-webkit-scrollbar, .equipment_inventory_items::-webkit-scrollbar {
    display: none;
}
.inventory_items.full > span {
    height: 100%;
}

.inventory_items.half > span {
    height: 50%;
}
.inventory_player_info {
    display: flex;
    width: 100%;
    height: 58px;
    background-color: black;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23391a00' fill-opacity='0.36' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.inventory_poi_items {
}
.inventory_item {
    display: inline-block;
    width: 20%;
    float: left;
    position: relative;
    border: 3px outset slategrey;
    background-color: darkgoldenrod;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1 / 1;
    padding: 0px 3px;
    color: white;
    line-height: 20px;
    font-weight: 500;
    font-size: 1.4em;
    text-align: right;
    text-shadow: 2px 2px 2px #000;
    max-width: 90px;
    /*min-width: 75px;*/
}
.ui-inventory-sort-highlight {
    display: inline-block;
    width: 20%;
    float: left;
    position: relative;
    border: 3px outset slategrey;
    background-color: darkgoldenrod;
    padding: 0px 3px;
    aspect-ratio: 1 / 1;
}
.inventory_player_items .ui-selecting, .inventory_dropbag_items .ui-selecting {
    border: 3px outset #FECA40;
}
.inventory_player_items .ui-selected, .inventory_dropbag_items .ui-selected {
    border: 3px outset #F39814;
}
.inventory_item img {
    width: 100%;
}
.inventory_item-icon {
    width: 100%;
}
.inventory_item-quantity {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: whitesmoke;
    background-color: slategray;
    text-align: right;
    padding: 0 5px;
}
.inventory_details {
    display: grid;
    grid-template-areas: 'inventory_details';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    background-color: #120700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23391a00' fill-opacity='0.36' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.inventory_options {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 0 10px;
    background-color: #120700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23391a00' fill-opacity='0.36' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.inventory_details_header {
    grid-area: inventory_details;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 0 10px;
}
.inventory_details_description_container
{
    width:100%;
}
.inventory_details_name {
    font-size: 1.7em;
    font-weight: 500;
    color: white;
    padding-left: 5px;
}
.inventory_details_qty {
    font-size: 1.7em;
    font-weight: 500;
    color: navajowhite;
}
.inventory_details_desc {
    display: block;
    flex: 1;
    font-size: 1em;
    color: white;
    line-height: 18px;
    text-align: justify;
    overflow: hidden;
}
.inventory_details_profile_img {
    height:200px;
}
.inventory_details_profile_img img {
    height: 100%
}
.menu_disabled {
    pointer-events: none;
    color: dimgray;
}

.menu_selected {
    text-decoration: underline;
}
.prevent-select, .prevent-select * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.inventory_actions {
    grid-area: inventory_details;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: #000000f5;
    z-index: 100;
}
.inventory_actions>span {
    width: 100px;
    height: 120px;
    color: whitesmoke;
    font-size: x-large;
    text-align: center;
}
.inventory_actions img {
    height:100px;
}
.inventory_action_count {
    grid-area: inventory_details;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000f5;
    z-index: 101;
    flex-wrap: nowrap;
    color: whitesmoke;
    font-size: x-large;
}
.inventory_action_count>span{
    white-space:nowrap;
    width:100%;
    text-align:center;
}
.inventory_action_count_number {
    font-size: 1.7em;
    font-weight: 500;
    color: navajowhite;
}
.inventory_action_count_name {

}
.inventory_action_count_slider_container>span {

}
.inventory_action_count_slider {
    display: inline-block;
    width: 40%;
}
.inventory_action_count_slider_one, .inventory_action_count_slider_all {
    line-height: 28px;
    overflow: hidden;
    height: 27px;
    display: inline-block;
}
.inventory_action_count_slider_minus {
    margin: 0px 18px 0 8px;
    font-size: xxx-large;
    line-height: 21px;
    overflow: hidden;
    height: 27px;
    display: inline-block;
}
.inventory_action_count_slider_plus {
    margin: 0px 8px 0 14px;
    font-size: xxx-large;
    line-height: 21px;
    overflow: hidden;
    height: 27px;
    display: inline-block;
}
.inventory_action_count_accept, .inventory_action_count_cancel {
    width: 50%;
    min-width: 162px;
    max-width: 200px;
    display: inline-block;
    background-color: #509366;
    margin-top: 25px;
}
.inventory_action_count_cancel {
    background-color: #935050;
}
.inventory_player_info_column {
    display: inline-block;
    width: 140px;
    font-size: small;
    color: whitesmoke;
}
.inventory_player_info_column > span {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
.statbar {
    display: inline-block;
    width: 65px;
    height: 10px;
    overflow: hidden;
    border: 1px solid darkgray;
    background-color: #b5b5b5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23767676' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.statbar span {
    display: inline-block;
    height: 100%;
    float: left;
    background-color: #a00000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23fc0000' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
}
.staticon {
    margin-top: 1px;
    width: 55px;
    height: 55px;
    border: 1px solid black;
    border-radius: 20px;
    overflow: hidden;
}
.staticon > span {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.staticon img {
    width: 100%;
}
.staticon .statfill {
    display: flex;
    justify-content: flex-start;
    flex-direction: column-reverse;
    overflow: hidden;
    transform: translate(0, -100%);
}
/*.staticon .Health {
    clip-path: polygon(34.5% 38.8%, 43.4% 21.2%, 49.1% -0.2%, 51.3% 1.6%, 53.2% 14.2%, 54.3% 22.4%, 61.4% 35.6%, 79% 50.6%, 95.5% 63.4%, 95.5% 80%, 77.2% 94%, 48.3% 99.6%, 19.9% 94%, 1.5% 80%, 1.5% 63.4%, 18% 51.2%);
}
.Health .statfill {
    background-color: #c80000;
}
.staticon .Hydration {
    clip-path: polygon(0 0, 100% 0, 100% 8%, 94% 8%, 94% 11%, 100% 11%, 100% 29%, 95% 31%, 100% 32%, 100% 50%, 96% 52%, 100% 53%, 100% 71%, 100% 97%, 98% 100%, 2% 100%, 0 97%, 0 71%, 0 51%, 4% 50%, 0 49%, 0 32%, 3% 30%, 0 29%, 0 9%, 6% 9%, 7% 6%, 0 6%);
}
.Hydration .statfill {
    background-color: #0768e0;
}
.staticon .Sustenance {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.Sustenance .statfill {
    background-color: #832f04;
}
.staticon .Energy {
    clip-path: polygon(41% 0%, 72% 0%, 55% 34%, 75% 34%, 27% 100%, 44% 49%, 25% 49%);
}
.Energy .statfill {
    background-color: #b1c800;
}*/
.inventory_player_info_details {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    z-index: 100;
    overflow: hidden;
    background-color: black;
    color: whitesmoke;
}
.player_equipment_container {
    justify-content: unset;
}
.equipment_inventory_items {
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid #adb5bd;
}
.equipment_display {
    position: relative;
    background-image: url(/img/hud/silhouette.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 0;
    padding-top: 100%;
}
.equipment_display > span {
    position: absolute;
    display: block;
    background-color: #603e3b91;
    border: 2px solid #dee2e6;
    transform: translate(-50%, 0);
    width: 13%;
}
.equipment_display > span:empty {
    height: 0;
    padding-top: 13%;
}
.equipment_display > span > span {
    position: unset;
    min-width: unset;
    max-width: unset;
    width: 100%;
    border-width: 0;
}
.equipment_display .Head {
    left: 50%;
    top: 20%;
}
.equipment_display .Arms {
    left: 32%;
    top: 29%;
}
.equipment_display .Chest {
    left: 50%;
    top: 36%;
}
.equipment_display .Hands {
    left: 14%;
    top: 30%;
}
.equipment_display .Legs {
    left: 50%;
    top: 58%;
}
.equipment_display .Feet {
    left: 50%;
    top: 85%;
}
.equipment_display .Weapon {
    left: 85%;
    top: 30%;
}
.equipment_display .Bag {
    left: 75%;
    top: 52%;
}
.equipmentSlotHighlight {
    border-color: yellow !important;
    background-color: #59603b91 !important;
}
.weather {
    z-index: 71;
    height: 100%;
    padding-top: unset;
}
.weather.night {
    background-color: #00000052;
    background: radial-gradient(circle at center bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.60) 80%);
}
.weather.hot {
    box-shadow: inset 0 0 20px #f8a1007d;
}
.rain_layer.back-row {
    display: none;
    bottom: 60px;
    opacity: 0.5;
}
.rain_layer div {
    z-index: 72 !important;
}
.rain_layer .drop {
    position: absolute;
    bottom: 100%;
    width: 15px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}
@keyframes drop {
    0% {
        transform: translateY(0vh);
    }

    75% {
        transform: translateY(105vh);
    }

    100% {
        transform: translateY(105vh);
    }
}
.rain_layer .stem {
    width: 1px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
    animation: stem 0.5s linear infinite;
}
@keyframes stem {
    0% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
.rain_layer .splat {
    width: 15px;
    height: 10px;
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 1;
    transform: scale(0);
    animation: splat 0.5s linear infinite;
}
@keyframes splat {
    0% {
        opacity: 1;
        transform: scale(0);
    }

    80% {
        opacity: 1;
        transform: scale(0);
    }

    90% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}
.weatherNotice img, .moonNotice img {
    height: 50px;
    position: fixed;
    z-index: 72;
    right: 86px;
}
.moonNotice img{
    right: 43px;
}