body {
padding-top: 0;
margin: 0;
font-family: Roboto,sans-serif;
overflow: hidden
}
.b-map {
width: 100%;
height: 100%
}
.head {
position: absolute;
width: 100%;
height: 30px;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(52, 52, 52, 0.99);
z-index: 3;
padding-left: 10px
}
.head .text {
color: #fff
}
.head .full-version {
margin-left: 5px;
color: #fff;
text-decoration: underline;
color: #000
}
.head .full-version:hover {
opacity: .8
}
@media (max-width: 374px) {
.head {
font-size:14px
}
}
.map-container {
position: absolute;
width: 100%;
height: 100%; } .map-container .b-totals {
z-index: 2
}
.map-container [class*=ymaps-2][class*=-ground-pane] {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='-1 -0.2 0 0.1 0 0 0.7 -0.4 0 -0.1 -0.2 0.5 1 0 -0.3 -0.9 0.1 -0.1 0.9 0'/></filter></svg>#grayscale");
}
.linkToWebsite{
position: absolute;
top: 10px;
left: 10px;
z-index:3;
background: #2A3166;
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
color: white !important;
}
.b-totals { top: 10px;
right: 10px;
text-align: center;
position: relative;
}
.confirmed{
background: #EE7879;
}
.recovered{
background: #00747e;
}
.dead{
background: #2A3166;
}
.info-last-date{
background: #F4ABAA;
}
.vactin{
background: #C07A00;
}
.b-totals .total {
border-radius: 5px;
margin-bottom: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px;
max-width: 180px;
}
.b-totals .total .description {
font-size: 15px;
color: #fff
}
.b-totals .total .amount {
font-size: 22px;
color: #fff
}
.b-totals .total .amount.small {
font-size: 17px
}
.b-totals .total:last-of-type {
margin-bottom: 0
}
.b-totals .total.load {
color: transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: loaderData;
animation-name: loaderData;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: -webkit-gradient(linear,left top,right top,color-stop(8%,#eee),color-stop(18%,#ddd),color-stop(33%,#eee));
background: linear-gradient(90deg,#eee 8%,#ddd 18%,#eee 33%);
background-size: 800px 50px;
position: relative
}
.b-totals .total.load .amount,.b-totals .total.load .description {
color: transparent
}
@media (max-width: 767px) {
.b-totals .total {
padding:5px;
position: relative;
}
}
@media (max-width: 520px) {
.share-map{
display: none !important;
}
.b-totals {
position: relative;
top: 0px;
right: 0px;
margin-left: 10%;
margin-right: 10%;
text-align: center;
width: 50%;
display: table-cell;
transform: scale(0.8,0.8);
}
.b-totals .total .description {
font-size: 10px;
color: #fff
}
.b-totals .total .amount {
font-size: 15px;
color: #fff
}
.b-totals .total .amount.small {
font-size: 17px
}
.b-totals .total {
padding: 5px;
margin-left: 2px;
margin-bottom: 0;
display: inline-flex;
}
.info-last-date{
display: none !important;
}
.vactin{ }
.b-totals .total span span {
display: none !important;
}
.b-totals .total span {
align-self: center !important;
}
}
.share-map {
position: absolute;
bottom: 33px;
right: 3px;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 42px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
background: #fff;
border-radius: 4px;
color: #000;
cursor: pointer;
border: 1px solid #a6a6a6
}
.share-map:hover .initial-text {
display: none
}
.share-map:hover .link-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.share-map .embed-icon {
margin-right: 7px;
width: 20px;
height: 20px
}
.share-map .initial-text {
display: block
}
.share-map .link-wrapper {
display: none
}
.share-map .link-wrapper .cross-icon {
margin-left: 10px;
width: 25px;
height: 25px
}
.share-map .link-wrapper input {
width: 670px;
border: 1px solid #d1d1d1;
font-size: 16px;
padding-left: 7px;
border-radius: 2px;
color: #676666;
outline: none
}