/*** M A P ***/
.map-view {
    position: relative;
    width: 100%;
    height: 600px;
    min-width: 660px;
    min-height: 600px;
    max-width: 1200px;
    max-height: 650px;
    overflow: hidden;
    user-select: none;
    background-color: darkgrey;
    border: 12px solid rgba(20,60,60,0.8);
    box-sizing: border-box;

    /*filter:sepia(0.1) contrast(1.1)*/;
}

/* Version for dialog bird eye version */
.map-view-embedded {
    position: relative;
    width: 95%;
    max-width: 1000px;
    height: 600px;
    overflow: hidden;
    user-select: none;
    background-color: black;
    margin: 0 auto 0 auto;
    min-width: 1000px;
    border: 8px double #788;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 45%;
    border-top: 4px solid #0a0f20;
    display: block;
    box-shadow: 0 40px 40px black;
}

.map-view-embedded-2d {
    position: relative;
    width: 1000px;
    height: 600px;
    overflow: hidden;
    user-select: none;
    margin: -612px auto 0 auto;
    display: block;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 45%;
}

.map-view-embedded-view2d {
    position: relative;
    width: 1004px;
    height: 605px;
    overflow: hidden;
    user-select: none;
    margin: -600px auto 0 auto;
    left: -1px;
    display: block;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 45%;
    background-color: rgba(0,20,15,0.9);
}

.map-wrapper {
    position: relative;
    width: 100%;
}


.map-view-content {
    width: 100%;
    height: 100%;
    perspective: 60cm;
    perspective-origin: center;
    overflow: hidden;
    user-select: none;
    background-color: darkgrey;
    cursor: grab;
}


.map-view-blur {
    filter: blur(1px);
}


.map-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    background-image: url(images/icons/profile/close.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    z-index: 100;
    cursor: pointer;
}

.locationDescriptionWrapper-flex {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    height: auto;
    width: 95%;
    margin: auto;
    justify-content: center;
}


.locationDescription-flex {
    /*width: 95% !important;
    margin: 0px !important;
    padding-left: 20px;*/
}


.map-cover, .map-weather {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-weather {
    display: none;  /*may be overwritten by specific classes */
}


.map-board {
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(200px) rotateX(60deg);
    user-select: none;
    overflow: visible;
    height: 700px;
    width: 700px;
}


.map-segment {
    position: absolute;
    transform-style: preserve-3d;
    user-select: none;
}


.map-segment-back {
    background-blend-mode: overlay;
    user-select: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.map-actor-selected {
    border: 1px solid blue;
    margin-left: -1px;
    margin-top: -1px;
}

.map-actor-selected > .map-actor-box-top, .map-actor-selected > .map-actor-box-left, .map-actor-selected > .map-actor-box-right > .map-actor-stamp-front {
    background-image:none;
    background-color: rgba(30,80,200,0.8);
}

.map-actor-box {
    position: absolute;
    transform-style: preserve-3d;
    background-size: 100% 100%;
    user-select: none;
}


/* alternative highlighting
.map-actor-canclick:hover {
    filter: drop-shadow(-1px -1px 1px orange) drop-shadow(1px -1px 3px orange) drop-shadow(0px 10px 20px orange);
}

.map-actor-canclick:hover > .map-actor-shadow {
    display:none;
}
*/

.map-actor-canclick:hover > .map-actor-box-top {
    background-image: linear-gradient(to bottom, rgba(230,160,40,0.7), transparent) !important;
}

.map-actor-canclick:hover > .map-actor-box-left, .map-actor-canclick:hover > .map-actor-box-right {
    background-image: radial-gradient(circle at top, rgba(230,160,40,0.5), transparent) !important;
}

.map-actor-canclick:hover > .map-actor-stamp-front {
    background-image: linear-gradient(to bottom, rgba(230,160,40,0.7), transparent) !important;
}


.map-actor-box-top {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}

.map-actor-box-left {
    position:absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}

.map-actor-box-right {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}


.map-actor-wall {
    position: absolute;
    transform-style: preserve-3d;
    background-size: 100% 100%;
}

.map-actor-wall-top {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}

.map-actor-wall-front {
    position:absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}


.map-actor-flat {
    position: absolute;
    transform-style: preserve-3d;
    background-size: 100% 100%;
    background-position:  center;
}

.map-actor-flat-top {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}


.map-actor-stamp {
    position: absolute;
    transform-style: preserve-3d;
    background-size: 100% 100%;
}

.map-actor-stamp-front {
    position:absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
}


.map-actor-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.map-tooltip {
    position: relative;
    width: 70%;
    min-width: 100px;
    max-width: 200px;
    text-align: center;
    margin: auto;
    top: 15%;
    display: block;
    color: #011;
    font-size: 1.0em;
    opacity: 0;
    background-color: rgba(230, 230, 250, 0.75);
    padding: 0 4px 4px 4px;
    border-top: 4px solid whitesmoke;
    box-shadow: 2px 4px 8px 0 rgba(10, 10, 10, 0.7);
    border-radius: 4px;
    font-family: 'vinque', sans-serif;
}

.map-tooltip-ext {
    position: absolute;
    width: 100px;
    text-align: center;
    left: -40px;
    bottom: 50%;
    display: block;
    color: #011;
    font-size: 1.0em;
    opacity: 0;
    background-color: rgba(230, 230, 250, 0.75);
    padding: 0 4px 4px 4px;
    border-top: 4px solid whitesmoke;
    box-shadow: 2px 4px 8px 0 rgba(10, 10, 10, 0.7);
    border-radius: 4px;
    font-family: 'vinque', sans-serif;
    word-break: break-word;
}


.map-actor-canclick {
    cursor: pointer;
}


.map-actor-canclick:hover > .map-tooltip, .map-actor-canclick:hover > .map-tooltip-ext {
    opacity: 1 !important;
}


/*** EDITOR ***/

.editorMap-maplist-item {
    width: 700px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid white;
}

.editorMap-maplist-item-text {
    display: inline-block;
    width: 50%;
    font-size: 1.5em;
}


.editorMap-actorEdit {
    width: 100%;
    min-width: 600px;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    user-select: none;
    border: 12px solid darkslategray;
    border-top: none;
    box-sizing: border-box;
    margin: auto;
}


.editorMap-actorEdit-content {
    width: 90%;
    padding-left: 5%;
}


.editorMap-actorEdit-form {
    display:grid;
    grid-template-columns: repeat(8, 11%);
    grid-gap: 10px;
}

.editorMap-actorEdit-form-input {
    width: 100%;
}

.editorMap-actorEdit-form-label {
    width: 100px;
    text-align: right;
}


.editorMap-templatelist {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    min-height: 200px;
    border: 1px solid white;
    box-sizing: border-box;
}


.editorMap-templatelist-content {
    width: 100%;
    display: flex;
}

.editorMap-templatelist-item {
    height: 80px;
    width: 80px;
    margin: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid white;
    cursor: pointer;
    background-color: darkgrey;
}


/*** MODIFIERS ***/

/*** MODS - night ***/
.map-mod-cover-night-clear {
    background-image: radial-gradient(circle at bottom, transparent, rgba(80,40,40,0.1) 50%, rgba(20,30,60,0.8) 80%);
    background-size: 150% 100%;
    background-position: center;
}


/*** night-clear ***/
.map-mod-night-clear-left {
    background-image: radial-gradient(circle at left, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 65%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-clear-right {
    background-image: radial-gradient(circle at bottom, rgba(180, 170, 160, 0.2), rgba(10, 10, 20, 0.5) 65%);
}

.map-mod-night-clear-top {
    background-color: rgba(20, 20, 50, 0.4);
}

.map-mod-night-clear-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 80%);
}

.map-mod-night-clear-ground {
    background-color: rgba(20, 30, 60, 0.6);
}

.map-mod-shadow-night-clear {
    opacity: 0.8;
}


/*** night-cloudy ***/
.map-mod-cover-night-cloudy {
    background-image: radial-gradient(circle at bottom, transparent, rgba(80,40,40,0.2) 40%, rgba(20,30,60,0.8) 70%);
    background-size: 150% 100%;
    background-position: center;
}


.map-mod-night-cloudy-left {
    background-image: radial-gradient(circle at left, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 65%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-cloudy-right {
    background-image: radial-gradient(circle at bottom, rgba(180, 170, 160, 0.2), rgba(10, 10, 20, 0.5) 65%);
}

.map-mod-night-cloudy-top {
    background-color: rgba(20, 30, 60, 0.7);
}

.map-mod-night-cloudy-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 80%);
}

.map-mod-night-cloudy-ground {
    background-color: rgba(50, 50, 70, 0.5);
}

.map-mod-shadow-night-cloudy {
    opacity: 0.8;
}


/*** night-hazy ***/
.map-mod-cover-night-hazy {
    background-image: radial-gradient(circle at bottom, rgba(40,40,40,0.1) 0%, rgba(60,60,80,0.8) 80%);
    background-size: 150% 100%;
    background-position: center;
}

.map-mod-night-hazy-left {
    background-image: radial-gradient(circle at left, rgba(10, 20, 80, 0.7), rgba(10, 10, 20, 0.5) 65%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-hazy-right {
    background-image: radial-gradient(circle at bottom, rgba(80, 70, 60, 0.6), rgba(50, 50, 90, 0.6) 45%);
}

.map-mod-night-hazy-top {
    background-color: rgba(80, 80, 90, 0.4);
}

.map-mod-night-hazy-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(60, 60, 70, 0.8) 80%);
}

.map-mod-night-hazy-ground {
    background-color: rgba(20, 30, 60, 0.5);
}


.map-mod-shadow-night-hazy {
    opacity: 0.6;
}


/*** night-rain ***/
.map-mod-cover-night-rain {
    background-image: radial-gradient(circle at bottom, transparent, rgba(40,50,80,0.2) 20%, rgba(20,30,60,0.8) 80%);
    background-size: 200% 100%;
    background-position: center;
}

.map-mod-weather-night-rain {
    display: block;
    background: rgba(60,40,50,0.6) url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(-10deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -25%;
    opacity: 0.5;

    animation: rain .35s linear infinite;
}

.map-mod-night-rain-left {
    background-image: radial-gradient(circle at left, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 65%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-rain-right {
    background-image: radial-gradient(circle at bottom, rgba(180, 170, 160, 0.2), rgba(10, 10, 20, 0.5) 65%);
}

.map-mod-night-rain-top {
    background-color: rgba(20, 20, 50, 0.4);
}

.map-mod-night-rain-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 80%);
}

.map-mod-night-rain-ground {
    background-color: rgba(20, 30, 60, 0.5);
}

.map-mod-shadow-night-rain {
    opacity: 0.8;
}


/*** night-snow ***/
.map-mod-cover-night-snow {
    background-image: radial-gradient(circle at bottom, transparent, rgba(180,180,200,0.2) 40%, rgba(20,20,40,0.8) 80%);
    background-size: 150% 100%;
    background-position: center;
}

.map-mod-weather-night-snow {
    display: block;
    background: url(images/maps/shared/weather/snow.png) repeat 0 0;
    transform: rotateX(40deg) skewX(6deg);
    width: 140%;
    left: -20%;
    height: 150%;
    top: -30%;
    opacity: 0.4;
    animation: snow 3s linear infinite;
}

.map-mod-night-snow-left {
    background-image: radial-gradient(circle at left, rgba(70, 70, 150, 0.4), rgba(10, 10, 20, 0.5) 65%), radial-gradient(circle at top right, transparent 70%, rgb(200,200,200) 100%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-snow-right {
    background-image: radial-gradient(circle at bottom, rgba(180, 170, 160, 0.2), rgba(60, 60, 90, 0.75) 65%);
}

.map-mod-night-snow-top {
    background-color: rgba(90, 100, 150, 0.9);
}

.map-mod-night-snow-cone {
    background-image: linear-gradient(to top, rgba(60, 70, 70, 0.5), rgba(90, 110, 120, 0.6) 70%);
}

.map-mod-night-snow-ground {
    background-color: rgba(60, 65, 100, 0.9);
}

.map-mod-shadow-night-snow {
    opacity: 1;
}


/*** night-thunder ***/
.map-mod-cover-night-thunder {
    background-image: radial-gradient(circle at bottom, rgba(30,30,80,0.1) 40%, rgba(20,20,90,0.8) 80%);
    background-size: 200% 100%;
    background-position: center;

    animation: thunder 10s linear infinite;
}

.map-mod-weather-night-thunder {
    display: block;
    background: rgba(60,40,50,0.6) url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(-15deg);
    width: 140%;
    left: -15%;
    height: 130%;
    top: -25%;
    opacity: 0.5;

    animation: rain .35s linear infinite;
}


.map-mod-night-thunder-left {
    background-image: radial-gradient(circle at left, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 65%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-night-thunder-right {
    background-image: radial-gradient(circle at bottom, rgba(180, 170, 160, 0.2), rgba(10, 10, 20, 0.5) 65%);
}

.map-mod-night-thunder-top {
    background-color: rgba(20, 20, 50, 0.4);
}

.map-mod-night-thunder-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 80%);
}

.map-mod-night-thunder-ground {
    background-color: rgba(20, 30, 60, 0.7);
}

.map-mod-shadow-night-thunder {
    opacity: 0.8;
}


/*** MODS - morning ***/
/*** morning-clear ***/
.map-mod-cover-morning-clear {
    background-image: radial-gradient(circle at bottom, transparent 50%, rgba(220,190,150,0.4) 80%, rgba(220,190,160,0.8) 100%);
    background-size: 150% 100%;
    background-position: 80% center;
}


.map-mod-morning-clear-left {
    background-color: rgba(50, 50, 70, 0.7);
}

.map-mod-morning-clear-right {
    background-image: radial-gradient(circle at top left, rgba(240, 170, 80, 0.5), rgba(70, 70, 80, 0.1) 85%);
    mix-blend-mode: darken;
}

.map-mod-morning-clear-top {
    background-color: rgba(150, 100, 90, 0.3);
}

.map-mod-morning-clear-cone {
    background-image: radial-gradient(circle at -10% 60%, rgba(20, 20, 20, 0.8), rgba(210, 190, 100, 0.5) 100%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-morning-clear-ground {
    background-color: rgba(150, 100, 90, 0.3);
}

.map-mod-shadow-morning-clear {
    opacity: 1;
}


/*** morning-cloudy ***/
.map-mod-morning-cloudy-left {
    background-color: rgba(50, 50, 70, 0.5);
}

.map-mod-morning-cloudy-right {
    background-image: radial-gradient(circle at top right, rgba(170, 170, 170, 0.5), rgba(70, 70, 80, 0.1) 85%);
    /*mix-blend-mode: hue;*/
}

.map-mod-morning-cloudy-top {
    background-color: rgba(150, 120, 100, 0.2);
}

.map-mod-morning-cloudy-cone {
    background-image: radial-gradient(circle at -10% 60%, rgba(20, 20, 20, 0.6), transparent 70%);
    /*mix-blend-mode: hue;*/
}

.map-mod-morning-cloudy-ground {
    background-color:  rgba(110, 100, 70, 0.2);
}

.map-mod-shadow-morning-cloudy {
    opacity: 0.2;
}


/*** morning-hazy ***/
.map-mod-cover-morning-hazy {
    background-image: linear-gradient(to bottom, rgba(200,200,200,0.5), transparent);
}

.map-mod-morning-hazy-left {
    background-image: linear-gradient(to bottom, rgba(150, 150, 140, 0.5), rgba(50, 50, 70, 0.5));
    /*mix-blend-mode: revert;*/
}

.map-mod-morning-hazy-right {
    background-image: radial-gradient(circle at top left, rgba(200, 200, 180, 0.7), rgba(70, 70, 80, 0.1) 85%);
    /*mix-blend-mode: revert;*/
}

.map-mod-morning-hazy-top {
    background-color: rgba(210, 200, 190, 0.4);
}

.map-mod-morning-hazy-cone {
    background-image: linear-gradient(to right, rgba(100, 100, 80, 0.4), rgba(150, 150, 140, 0.4) 90%);
}

.map-mod-morning-hazy-ground {
    background-color: rgba(180, 180, 180, 0.5);
    background-blend-mode: hue;
}

.map-mod-shadow-morning-hazy {
    opacity: 0.1;
}


/*** morning-rain ***/
.map-mod-cover-morning-rain {
    background-image: linear-gradient(to bottom, rgba(100,150,160,0.5), transparent 60%);
}

.map-mod-weather-morning-rain {
    display: block;
    background: url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(12deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-morning-rain-left {
    background-color: rgba(50, 60, 80, 0.4);
    mix-blend-mode: normal;
}

.map-mod-morning-rain-right {
    background-image: radial-gradient(circle at top left, rgba(150, 150, 180, 0.7), rgba(70, 70, 80, 0.1) 85%);
    /*mix-blend-mode: revert;*/
}

.map-mod-morning-rain-top {
    background-color: rgba(35, 35, 45, 0.4);
    /*mix-blend-mode: multiply;*/
}

.map-mod-morning-rain-cone {
    background-image: linear-gradient(to right, rgba(10, 20, 80, 0.4), rgba(10, 10, 20, 0.5) 80%);
}

.map-mod-morning-rain-ground {
    background-color: rgba(120, 120, 160, 0.5);
    /*background-blend-mode: color-burn;*/
}

.map-mod-shadow-morning-rain {
    opacity: 0.15;
}



/*** morning-snow ***/
.map-mod-cover-morning-snow {
    background-image: linear-gradient(to bottom, rgba(220,220,200,0.5), transparent 40%);
}

.map-mod-weather-morning-snow {
    display: block;
    background: url(images/maps/shared/weather/snow.png) repeat 0 0;
    transform: rotateX(40deg) skewX(-25deg);
    width: 140%;
    left: -20%;
    height: 150%;
    top: -30%;

    animation: snow 2.5s linear infinite;
}

.map-mod-morning-snow-left {
    background-image: radial-gradient(circle at top center, rgba(50, 50, 70, 0.7) 80%, rgb(200,200,180) 100%);
}

.map-mod-morning-snow-right {
    background-image: radial-gradient(circle at top left, rgba(240, 170, 80, 0.5), rgba(70, 70, 80, 0.1) 85%), radial-gradient(circle at top left, transparent 70%, rgb(240,240,220) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-morning-snow-top {
    background-color: rgba(240, 220, 190, 0.9);
    /*mix-blend-mode: color-dodge;*/
}

.map-mod-morning-snow-cone {
    background-image: linear-gradient(to left, rgba(200, 200, 180, 0.7), rgba(150, 150, 140, 0.5) 90%);
    /*mix-blend-mode: color-dodge;*/
}

.map-mod-morning-snow-ground {
    background-color: rgba(220, 220, 210, 0.8);
    /*background-blend-mode: luminosity;*/
}

.map-mod-shadow-morning-snow {
    opacity: 0.1;
}


/*** morning-thunder ***/
.map-mod-cover-morning-thunder {
    background-image: radial-gradient(circle at bottom, rgba(30,30,80,0.1) 40%, rgba(20,20,90,0.8) 80%);
    background-size: 150% 100%;
    background-position: center;

    animation: thunder 10s linear infinite;
}

.map-mod-weather-morning-thunder {
    display: block;
    background: url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(12deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-morning-thunder-left {
    background-color: rgba(50, 50, 70, 0.5);
}

.map-mod-morning-thunder-right {
    background-image: linear-gradient(to bottom, rgba(140, 170, 180, 0.1), rgba(70, 70, 80, 0.3) 85%);
    /*mix-blend-mode: darken;*/
}

.map-mod-morning-thunder-top {
    background-color: rgba(35, 35, 45, 0.5);
    /*mix-blend-mode: multiply;*/
}

.map-mod-morning-thunder-cone {
    background-image: linear-gradient(to bottom, rgba(20, 20, 40, 0.5), rgba(50, 60, 120, 0.4) 100%);
}

.map-mod-morning-thunder-ground {
    background-color: rgba(80, 80, 120, 0.4);
    /*background-blend-mode: multiply;*/
}

.map-mod-shadow-morning-thunder {
    opacity: 0.3;
}



/*** MODS - day ***/
/*** day-clear ***/
.map-mod-cover-day-clear {
    background-image: radial-gradient(circle at bottom, transparent 50%, rgba(230,230,80,0.1) 70%, rgba(250,250,90,0.8) 100%);
    background-size: 200% 100%;
    background-position: center;
}

.map-mod-day-clear-left {
    background-color: rgba(140, 130, 120, 0.25);
    /*mix-blend-mode: multiply;*/
}

.map-mod-day-clear-right {
    background-image: linear-gradient(to bottom, rgba(240, 230, 100, 0.1), rgba(90, 80, 70, 0.0) 100%);
    /*mix-blend-mode: color-dodge;*/
}

.map-mod-day-clear-top {
    background-image: linear-gradient(to bottom, rgba(240, 230, 220, 0.3), rgba(240, 230, 220, 0.0) 40%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-day-clear-cone {
    background-image: linear-gradient(to right, rgba(50, 50, 80, 0.3), rgba(210, 210, 150, 0.3) 70%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-day-clear-ground {
    background-color: rgba(240, 230, 220, 0.2);
}


/*** day-cloudy ***/
.map-mod-day-cloudy-left {
    background-color: rgba(50, 50, 40, 0.2);
    /*mix-blend-mode: multiply;*/
}

.map-mod-day-cloudy-right {
    background-image: linear-gradient(to bottom, rgba(200, 200, 120, 0.4), rgba(70, 70, 70, 0.4) 100%);
    /*mix-blend-mode: hue;*/
}

.map-mod-day-cloudy-top {
    background-color: rgba(100, 100, 80, 0.2);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-day-cloudy-cone {
    background-image: linear-gradient(to right, rgba(50, 50, 80, 0.3), rgba(210, 210, 150, 0.1) 70%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-day-cloudy-ground {
    background-color: rgba(200, 200, 200, 0.1);
    /*background-blend-mode: hue;*/
}

.map-mod-shadow-day-cloudy {
    opacity: 0.5;
}


/*** day-hazy ***/
.map-mod-cover-day-hazy {
    background-image: linear-gradient(to bottom, rgba(200,200,200,0.4), transparent);
}

.map-mod-day-hazy-left {
    background-color: rgba(120, 120, 120, 0.5);
    /*mix-blend-mode: luminosity;*/
}

.map-mod-day-hazy-right {
    background-image: linear-gradient(to bottom, rgba(220, 220, 170, 0.5), rgba(120, 120, 120, 0.5) 100%);
    /*mix-blend-mode: luminosity;*/
}

.map-mod-day-hazy-top {
    background-color: rgba(100, 100, 100, 0.1);
    /*mix-blend-mode: exclusion;*/
}

.map-mod-day-hazy-cone {
    background-image: linear-gradient(to right, rgba(80, 80, 100, 0.4), rgba(110, 110, 100, 0.5) 70%);
    /*mix-blend-mode: luminosity;*/
}

.map-mod-day-hazy-ground {
    background-color: rgba(180, 180, 180, 0.7);
    /*background-blend-mode: hue;*/
}

.map-mod-shadow-day-hazy {
    opacity: 0.2;
}



/*** day-rain ***/
.map-mod-cover-day-rain {
    background-image: linear-gradient(to bottom, rgba(100,150,160,0.3), transparent 40%);
}

.map-mod-weather-day-rain {
    display: block;
    background: url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(-12deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-day-rain-left {
    background-color: rgba(120, 120, 140, 0.4);
    /*mix-blend-mode: multiply;*/
}

.map-mod-day-rain-right {
    background-image: linear-gradient(to bottom, rgba(140, 130, 200, 0.4), rgba(90, 80, 70, 0.0) 150%);
    /*mix-blend-mode: luminosity;*/
}

.map-mod-day-rain-top {
    background-color: rgba(35, 35, 55, 0.5);
    /*mix-blend-mode: saturation;*/
}

.map-mod-day-rain-cone {
    background-image: linear-gradient(to left, rgba(50, 50, 80, 0.4), rgba(50, 50, 20, 0.5) 100%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-day-rain-ground {
    background-color: rgba(160, 160, 200, 0.3);
    /*background-blend-mode: color-burn;*/
}

.map-mod-shadow-day-rain {
    opacity: 0.2;
}



/*** day-snow ***/
.map-mod-cover-day-snow {
    background-image: linear-gradient(to bottom, rgba(220,220,200,0.3), transparent 40%);
}

.map-mod-weather-day-snow {
    display: block;
    background: url(images/maps/shared/weather/snow.png) repeat 0 0;
    transform: rotateX(40deg) skewX(-10deg);
    width: 140%;
    left: -20%;
    height: 150%;
    top: -30%;

    animation: snow 2.5s linear infinite;
}

.map-mod-day-snow-left {
    background-image: radial-gradient(circle at top right, rgba(50, 50, 70, 0.7) 70%, rgb(200,200,200) 100%);
    /*mix-blend-mode: multiply;*/
}

.map-mod-day-snow-right {
    background-image: linear-gradient(to bottom, rgba(240, 230, 180, 0.4), rgba(90, 80, 70, 0.4) 100%);
    /*mix-blend-mode: saturation;*/
}

.map-mod-day-snow-top {
    background-color: rgba(240, 230, 220, 0.8);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-day-snow-cone {
    background-image: linear-gradient(to bottom, rgba(210, 220, 180, 0.4), rgba(80, 80, 120, 0.5) 80%);
    /*mix-blend-mode: color-dodge;*/
}

.map-mod-day-snow-ground {
    background-color: rgba(170, 160, 160, 0.7);
    /*background-blend-mode: screen;*/
}

.map-mod-shadow-day-snow {
    opacity: 0.5;
}



/*** day-thunder ***/
.map-mod-cover-day-thunder {
    background-image: radial-gradient(circle at bottom, rgba(30,30,80,0.1) 40%, rgba(20,20,90,0.8) 80%);
    background-size: 200% 100%;
    background-position: center;

    animation: thunder 10s linear infinite;
}

.map-mod-weather-day-thunder {
    display: block;
    background: url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(30deg) skewX(-12deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-day-thunder-left {
    background-color: rgba(100, 120, 140, 0.4);
    /*mix-blend-mode: multiply;*/
}

.map-mod-day-thunder-right {
    background-image: linear-gradient(to bottom, rgba(100, 100, 140, 0.6), rgba(70, 80, 90, 0.4) 150%);
    /*mix-blend-mode: luminosity;*/
}

.map-mod-day-thunder-top {
    background-color: rgba(35, 35, 55, 0.8);
    mix-blend-mode: saturation;
}

.map-mod-day-thunder-cone {
    background-image: linear-gradient(to left, rgba(50, 50, 80, 0.4), rgba(50, 50, 20, 0.5) 100%);
    /*mix-blend-mode: hard-light;*/
}

.map-mod-day-thunder-ground {
    background-color: rgba(120, 120, 180, 0.4);
    /*background-blend-mode: color-burn;*/
}

.map-mod-shadow-day-thunder {
    opacity: 0.5;
}



/*** MODS - evening ***/
/*** evening-clear ***/
.map-mod-cover-evening-clear {
    background-image: radial-gradient(circle at bottom, transparent 50%, rgba(230,120,90,0.2) 70%, rgba(250,120,60,0.8) 100%);
    background-size: 150% 100%;
    background-position: 35% center;
}

.map-mod-evening-clear-left {
    background-image: radial-gradient(circle at top left, rgba(240, 100, 120, 0.7), rgba(70, 70, 80, 0.1) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-clear-right {
    background-color: rgba(60, 30, 30, 0.55);
}

.map-mod-evening-clear-top {
    background-color: rgba(140, 60, 80, 0.5);
}

.map-mod-evening-clear-cone {
    background-image: linear-gradient(to left top, rgba(10, 20, 20, 0.4), rgba(200, 50, 20, 0.5) 120%);
}

.map-mod-evening-clear-ground {
    background-color: rgba(140, 60, 80, 0.3);
    background-blend-mode: multiply;
}


/*** evening-cloudy ***/
.map-mod-evening-cloudy-left {
    background-image: radial-gradient(circle at top right, rgba(180, 100, 120, 0.4), rgba(70, 70, 80, 0.3) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-cloudy-right {
    background-color: rgba(60, 30, 30, 0.55);
}

.map-mod-evening-cloudy-top {
    background-color: rgba(90, 60, 80, 0.2);
}

.map-mod-evening-cloudy-cone {
    background-image: linear-gradient(to left top, rgba(10, 20, 20, 0.3), rgba(100, 50, 20, 0.4) 120%);
}

.map-mod-evening-cloudy-ground {
    background-color: rgba(100, 60, 80, 0.3);
}

.map-mod-shadow-evening-cloudy {
    opacity: 0.4;
}



/*** evening-hazy ***/
.map-mod-cover-evening-hazy {
    background-image: linear-gradient(to bottom, rgba(210,180,160,0.6), transparent);
}

.map-mod-evening-hazy-left {
    background-image: radial-gradient(circle at top right, rgba(120, 100, 120, 0.4), rgba(70, 70, 80, 0.3) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-hazy-right {
    background-color: rgba(60, 30, 30, 0.55);
}

.map-mod-evening-hazy-top {
    background-color: rgba(90, 60, 80, 0.5);
}

.map-mod-evening-hazy-cone {
    background-image: linear-gradient(to left, rgba(10, 20, 50, 0.7), rgba(120, 60, 30, 0.2) 80%);
}

.map-mod-evening-hazy-ground {
    background-color: rgba(60, 60, 60, 0.3);
}

.map-mod-shadow-evening-hazy {
    opacity: 0.4;
}


/*** evening-rain ***/
.map-mod-cover-evening-rain {
    background-image: linear-gradient(to bottom, rgba(100,150,160,0.5), transparent 60%);
}

.map-mod-weather-evening-rain {
    display: block;
    background: rgba(70, 50, 50, 0.3) url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(20deg) skewX(-16deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-evening-rain-left {
    background-image: radial-gradient(circle at top right, rgba(120, 100, 120, 0.4), rgba(70, 70, 80, 0.3) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-rain-right {
    background-color: rgba(60, 30, 30, 0.55);
}

.map-mod-evening-rain-top {
    background-color: rgba(40, 40, 50, 0.5);
}

.map-mod-evening-rain-cone {
    background-image: linear-gradient(to left, rgba(10, 20, 80, 0.4), rgba(60, 10, 20, 0.5) 80%);
}

.map-mod-evening-rain-ground {
    background-color: rgba(50, 40, 60, 0.3);
}

.map-mod-shadow-evening-rain {
    opacity: 0.2;
}



/*** evening-snow ***/
.map-mod-cover-evening-snow {
    background-image: linear-gradient(to bottom, rgba(220,200,200,0.5), transparent 40%);
}

.map-mod-weather-evening-snow {
    display: block;
    background: url(images/maps/shared/weather/snow.png) repeat 0 0;
    transform: rotateX(40deg) skewX(-10deg);
    width: 140%;
    left: -20%;
    height: 150%;
    top: -30%;

    opacity: 0.75;

    animation: snow 2.5s linear infinite;
}

.map-mod-evening-snow-left {
    background-image: radial-gradient(circle at top right, rgba(180, 170, 180, 0.6), rgba(70, 70, 80, 0.3) 100%), radial-gradient(circle at top right,transparent 70%, rgb(200,200,200) 100%);;
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-snow-right {
    background-image: radial-gradient(circle at top left, rgba(70, 60, 80, 0.55) 70%, rgb(200,200,200) 100%);
}

.map-mod-evening-snow-top {
    background-color: rgba(220, 200, 170, 0.7);
}

.map-mod-evening-snow-cone {
    background-image: linear-gradient(to bottom, rgba(10, 10, 20, 0.5), rgba(110, 100, 80, 0.4) 80%);
}

.map-mod-evening-snow-ground {
    background-color: rgba(125, 110, 100, 0.8);
}

.map-mod-shadow-evening-snow {
    opacity: 0.3;
}



/*** evening-thunder ***/
.map-mod-cover-evening-thunder {
    background-image: radial-gradient(circle at bottom, rgba(40,30,80,0.1) 30%, rgba(30,20,90,0.8) 80%);
    background-size: 200% 100%;
    background-position: center;

    animation: thunder 10s linear infinite;
}

.map-mod-weather-evening-thunder {
    display: block;
    background: rgba(70, 50, 50, 0.3) url(images/maps/shared/weather/rain.png) repeat 0 0;
    transform: rotateX(20deg) skewX(-16deg);
    width: 140%;
    left: -20%;
    height: 130%;
    top: -15%;

    animation: rain .35s linear infinite;
}

.map-mod-evening-thunder-left {
    background-image: radial-gradient(circle at top right, rgba(120, 100, 120, 0.4), rgba(70, 70, 80, 0.3) 100%);
    /*mix-blend-mode: soft-light;*/
}

.map-mod-evening-thunder-right {
    background-color: rgba(60, 30, 30, 0.55);
}

.map-mod-evening-thunder-top {
    background-color: rgba(30, 30, 50, 0.5);
}

.map-mod-evening-thunder-cone {
    background-image: linear-gradient(to right, rgba(60, 10, 20, 0.5), rgba(10, 20, 80, 0.4) 80%);
}

.map-mod-evening-thunder-ground {
    background-color: rgba(30, 10, 50, 0.3);
}

.map-mod-shadow-evening-thunder {
    opacity: 0.2;
}




/** weather animations **/
/* rain */
@-webkit-keyframes rain {
    from { transform: translate(0, 0); }
    to { transform: translate(0, 100px); }
}

@-moz-keyframes rain {
    from { transform: translate(0, 0); }
    to { transform: translate(0, 100px); }
}

@keyframes rain {
    from { transform: translate(0, 0); }
    to { transform: translate(0, 100px); }
}

/* snow */
@-webkit-keyframes snow {
    0% {transform: translate(0, 0);}
    30% {transform: translate( 3px, 30px);}
    70% {transform: translate(-2px, 70px);}
    100% {transform: translate(0, 100px);}
}

@-moz-keyframes snow {
    0% {transform: translate(0, 0);}
    30% {transform: translate( 3px, 30px);}
    70% {transform: translate(-2px, 70px);}
    100% {transform: translate(0, 100px);}
}

@keyframes snow {
    0% {transform: translate(0, 0);}
    30% {transform: translate( 3px, 30px);}
    70% {transform: translate(-2px, 70px);}
    100% {transform: translate(0, 100px);}
}


/* thunder */
@-webkit-keyframes thunder {
    0% { background-color: transparent;}
    10% { background-color: transparent;}
    10.5% {background-color: rgba(240,240,255,0.7);}
    12% { background-color: transparent;}
    16% { background-color: transparent;}
    16.5% {background-color: rgba(240,240,255,0.8);}
    20% { background-color: transparent;}

    50% { background-color: transparent;}
    50.5% {background-color: rgba(240,240,255,0.7);}
    52% { background-color: transparent;}

    100% { background-color: transparent;}
}

@-moz-keyframes thunder {
    0% { background-color: transparent;}
    10% { background-color: transparent;}
    10.5% {background-color: rgba(240,240,255,0.7);}
    12% { background-color: transparent;}
    16% { background-color: transparent;}
    16.5% {background-color: rgba(240,240,255,0.8);}
    20% { background-color: transparent;}

    50% { background-color: transparent;}
    50.5% {background-color: rgba(240,240,255,0.7);}
    52% { background-color: transparent;}

    100% { background-color: transparent;}
}

@keyframes thunder {
    0% { background-color: transparent;}
    10% { background-color: transparent;}
    10.5% {background-color: rgba(240,240,255,0.7);}
    12% { background-color: transparent;}
    16% { background-color: transparent;}
    16.5% {background-color: rgba(240,240,255,0.8);}
    20% { background-color: transparent;}

    50% { background-color: transparent;}
    50.5% {background-color: rgba(240,240,255,0.7);}
    52% { background-color: transparent;}

    100% { background-color: transparent;}
}

@-webkit-keyframes flicker {
    0% {opacity: 1.0;}
    10% {opacity: 0.8;}
    20% {opacity: 0.9;}
    40% {opacity: 1.0;}
    70% {opacity: 1.0;}
    75% {opacity: 0.8;}
    90% {opacity: 1.0;}
    100% {opacity: 1.0;}
}

@-webkit-keyframes wind {
    0% {background-size: 100% 100%; background-position: center; background-repeat: no-repeat}
    50% {background-size: 95% 100%; background-position: center; background-repeat: no-repeat}
    100% {background-size: 100% 100%; background-position: center; background-repeat: no-repeat}
}