﻿/*Глобальные стили*/
.flex-container {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;   
}

.leaflet-control-attribution {
    display: none;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    overflow: hidden;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}

.mapcontainer {
    width: 100%;
    height: 100%;
}

.themap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(images/thebg.png);
    background-repeat: repeat;
}

[data-container=mini-iframe] > .header-mini-iframe {
    height: 50px;
    background: rgba(255, 255, 255, 0.78);
    z-index: 9999;
    position: relative;
    box-shadow: 0 0 30px rgba(61, 145, 222, 0.2);
    align-items: center;
    padding: 0 10px;
}
[data-container=mini-iframe] > .header-mini-iframe > .logo-container {
    background-image: url('images/logot.svg');
    width: 150px;
    height: 30px;
    background-size: 150px;
    background-repeat: no-repeat;
}
[data-container=mini-iframe] .leaflet-control-zoom {
    top: 70px;
    border: none;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    border: none;
    box-shadow: none;
}
[data-container=mini-iframe] .leaflet-control-zoom > a {
    border-radius: 100%;
}
[data-container=mini-iframe] .leaflet-control-zoom > a:first-child {
    width: 40px;
    height: 40px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 30px rgba(61, 145, 222, 0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    color: #3d91de;
}

[data-container=mini-iframe] .leaflet-control-zoom > a:last-child {
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 30px rgba(61, 145, 222, 0.2);
    margin-top: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    color: #3d91de;
    font-size: 20px;
    padding: 0;
    font-weight: bold;
}

[data-container=mini-iframe] > .footer-mini-iframe {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.78);
    z-index: 9999;
    box-shadow: 0 0 30px rgba(61, 145, 222, 0.2);
    padding: 0 10px;
    text-align: center;
    line-height: 20px;
}

[data-container=mini-iframe] > .footer-mini-iframe > div{display:inline-block}

[data-container=mini-iframe] > .footer-mini-iframe > div > * {
    font-size: 10px;
    margin: 0 10px;
    color: #3d91de;
}

[data-container=mini-iframe] .caption-container {
    z-index: 999;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
[data-container=mini-iframe]  .caption-container > .caption-elem {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 22px;
    color: #3d91de;
}

[data-container=mini-iframe] .leaflet-control-zoom > a:hover
{background-color: rgba(255, 255, 255, 1);}

/*--------legend-container------*/
[data-container=mini-iframe] > .body-mini-iframe > .legend-container {
    width: 200px;
    right: 0;
    background: rgba(255, 255, 255, 0.78);
    position: absolute;
    box-shadow: 0 0 30px rgba(93, 165, 230, 0.2);
    z-index: 9999;
    bottom: 30px;
    right: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

[data-container=mini-iframe] > .body-mini-iframe > .legend-container[data-visible=true] > .head-legend-container > span {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); 
}

[data-container=mini-iframe] > .body-mini-iframe > .legend-container[data-visible=false] > .body-legend-container {
    height: 0;
    overflow: hidden; 
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .head-legend-container {
    height: 30px;
    padding: 0 10px;
    align-items: center;
    background: rgba(236, 236, 236, 0.32);
    justify-content: space-between; 
    cursor: pointer;
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .head-legend-container > label {
    color: #3d91de;
    font-size: 13px;
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .head-legend-container > span {
    height: 10px;
    width: 10px;
    background-repeat: no-repeat;
    background-position: center;
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container {
    height: 70px;
    padding: 0 10px;
    align-items: center;
    box-sizing: border-box;
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container > .itm-legend {
    width: 100%;
    height: auto;
    align-items: center;
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container > .itm-legend > .head {
    width: 100%;
    justify-content: space-between;  
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container > .itm-legend > .head > label {
    color: #949090;
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container > .itm-legend > .gradient-container {
    width: 100%;
    height: 30px;
    margin-top: 4px;
    border-radius: 3px; 
}
[data-container=mini-iframe] > .body-mini-iframe > .legend-container > .body-legend-container > .itm-legend > .gradient-container > .f1 {
    width: 100%;
    background-image: linear-gradient(to right, #63A69F 20%, #F2E1AC 20%, #F2E1AC 40%, #F2836B 40%, #F2836B 60%, #F2594B 60%, #F2594B 80%, #CD2C24 80%);
}

[data-container=mini-iframe] .arrow-down {background-image: url('images/icons/angle-arrow-down.svg'); background-size: 10px;}