@charset "utf-8";
/* CSS Document */

html, body, #map {
    height: 100%;
    width: 100vw;
}
.dataloader{
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%);
    background:white;
    z-index:10;
    font-size:2em;
    padding:0.5em;
    border-radius:50%;
}
.mapycz-canvas-full{
    touch-action: none
}
#mapycz-full > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
    display:block !important;
}
body{
	background:none;
	padding:0 !important;
	margin:0 !important;
	overflow:hidden;
    overscroll-behavior-y: contain;
}
.modal_title{background:#1D679E !important}
.modal_overlay{opacity:0.5 !important}
.modalMod587 .modal_content{
    
}
.newPhoto{color:white !important;display: block; margin:0 0 5px 0}
.mailframe{}

.cluster{
    background:none !important;
}
.cluster > div{
    background:none !important;
    border:none !important;
}
.cluster > div > span{
    background:#38B5EB;
    display:inline-block;
    line-height:30px !important;
    width:30px !important;
    border-radius:50%;
    box-shadow:0 0 15px rgba(0,0,0,0.7);
    color:white;
    border:2px solid white !important;
    transform: translateY(9px) translateX(1px) ;
}

#logo{
	width:150px;
	background:white;
	top:0 !important;
	left:50% !important;
	padding:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	z-index: 2;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;  
	transform: translateX(-50%)
}
@media screen and (min-width: 0px) and (max-width: 900px) and (orientation: portrait){
    #logo{ width:15%; min-width:80px !important; max-width:150px !important;}
}

@media screen and (min-width: 0px) and (max-width: 900px) and (orientation: landscape){
    #logo{ width:15%; min-width:80px !important; max-width:100px !important;}
}

.mypoints {
    position:absolute;
    top:110px;
    left:20px;
    z-index:10;
    padding-left:0px;
}
.mypoints i{
    font-size:5em;
    color:gold;
    text-shadow:0 0 5px rgba(0,0,0,0.5);
}
.mypoints span{
    display:block;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
    width:100%;
    text-align:center;
    padding:20% 0 0 0;
    font-weight:bold;
    font-size:2em;
}
.mypoints div{
    display:block;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
    width:100%;
    text-align:center;
    padding:60% 0 0 0;
    font-size:0.8em;
}
#logoCez{
    position:absolute;
    top:110px;
    left:20px;
    z-index:10;
    padding-left:0px;
	width:150px;
	background:white;
	padding:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
    border-radius:10px;
	display: none;
}
#logoCez a{
    background:url(/storage/cez.png) no-repeat 0px 0px;
    display:block;
    display:inline-block;
    overflow:hidden;
    text-indent:-1300px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:auto;
}
#logoCez a:before{
    content:"";
    display:block;
    padding-top:68.22429906542056%;
    float:left;
}

#logoCez a:after{
    content:"";
    display:block;
    position:relative;
    clear:left;
}
@media screen and (min-width: 0px) and (max-width: 900px) and (orientation: portrait){
    #logoCez{ width:15%; min-width:80px !important; max-width:150px !important;top:15vw !important;}
}

@media screen and (min-width: 0px) and (max-width: 900px) and (orientation: landscape){
    #logoCez{ width:15%; min-width:80px !important; max-width:100px !important;top:15vw !important;}
}

.playContent{
	background:none;
	padding:0;
	margin:0;
	position: relative;
}
.photoResultVms img{
	max-width:100%;
	max-height: 250px;
}
.photoResultVms div{
	text-align: center;
	padding:10px;
}
.gpsSettings{
    color:white;
    margin-bottom:0px;
}
.gpsinfo{
    color:white;
    line-height:1.7em;
}
.trackingsettings{
    display: none;
    padding-top:10px;
}

.buttons{
	padding:0px;
	position: absolute;
	bottom:40px;
	right:10px;
	z-index:90;
}
.buttons.buttonsLeft{
	left:10px;
    right:inherit;
}
.buttons > .icoButt {
	display:block;
	background:none;
	border:none;
	margin-top:10px;
	padding:0;
	position:relative;
}
.buttons > .icoButt > i{
	font-size:2vw;
	width:4vw;
	height:4vw;
    padding:1vw 0vw;
	line-height: 1em;
	background:white;
	border-radius:50%;
	position:relative;
	opacity:1;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	color:#333;
	box-sizing:border-box;
	margin:0 !important;
	display:block;
    text-align:center;
}

.buttons > .icoButt i{text-align: center; }
.buttons > .icoButt .icolabel{}


.buttons > .icoButt.savePosition > i{
	background:#00a5ec;
	color:white;
	z-index:1;
}
.buttons > .icoButt.savePosition > .icolabel{
	font-size:2vw;
	line-height: 4vw;
	width:11vw;
	height:4vw;	
	background:white;
	color:#00a5ec;
	position:absolute;
	top:0;
	right:0;
	padding:0 6vw 0 2vw;
	border-radius:2.5vw;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	font-weight:bold;
    text-transform:uppercase;
}
.buttons > .icoButt.rolbarInfo > i{
	background:#00a5ec;
	color:white;
	z-index:1;
}
.buttons > .icoButt.logMeOut > i{
	background:#bb0000;
	color:white;
	z-index:1;
}

@media (orientation: landscape) and (max-width: 699px) {
    .buttons{
       padding:0 4vw 0 2vw; 
    }
    .buttons > .icoButt > i{
        font-size:2vw;
        width:4vw;
        height:4vw;
        padding:1vw;
    }
}

@media (orientation: portrait)  and (max-width: 699px) {
	
   .buttons > .icoButt > i{
		font-size:5vw;
		width:12vw;
		height:12vw;
	  	padding:4vw 3vw;
 	}
	.buttons > .icoButt.savePosition > .icolabel{
		font-size:5vw;
		line-height: 15vw;
		width:38vw;
		height:15vw;	
		padding:0 6vw 0 5vw;
		border-radius:7.5vw;
	}
	
}

.photoFrameControl{
	left:0;
	right:0;
	bottom:30px;
	position:absolute;
	text-align: center;
}
.photoFrameControl > div{
	width:50px;
	height:50px;
	font-size: 30px;
	text-align: center;
	line-height: 50px;
	border-radius:50%;
	display: inline-block;
	background:rgba(0,0,0,0.3);
	color:white;
	margin:0 5px;
}
.photoFrameControl > div.shootButton{
	background:red;
	margin-right:30px;
}
.photoFrameControl > div.frontBackButton{
}
.photoFrameControl > div.cancelButton{
	display:none;
}
.photoFrameControl > div.saveButton{
	background:green;
	display:none;
	margin-right:100px;
}

.myRoutePoint{
	border:1px solid #eee;
	background:#f5f5f5;
	padding:20px;
	margin-bottom:3px;
	position:relative;
}
.myRoutePoint h3{font-weight: bold;}


.photoFrame{max-height: 100vh !important;}
.photoFrameStream,.photoFrameCapture{
	transform-origin: 0% 0%;
}
.photoFrame{
	position:relative;
}
.photoFrameStream video{
	display: none;
}
.photoFrameCapture{
	width:100%;
	height:calc(100%);
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:0;
	display: none;
}
.photoFrameCapture img{
	width:100%;
	height:auto;
}
.photoModal .modal_content{
	padding:0;
}
.photoModal .modal_title{
	background:none !important;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index: 3;
	height:0;
	padding:0;
}
.photoModal .modal_title span{
	position:absolute;
	top:10px;
	left:40px;
}
.photoModal .modal_title i{
	position:absolute;
	top:10px;
	left:10px;
}

.htmlMarkerFull{
	text-align: center; 
	font-size: 35px; 
	font-weight: bold; 
	width: 0.75em; 
	position: absolute; 
    cursor: pointer;
    margin-left:-0.2em;
}
.htmlMarkerFull:hover{
	z-index: 10000 !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.htmlMarkerFull > div{
	position: absolute; 
	left: 0; 
	top: 0; 
	text-align: center; 
	width: 100%; 
	font-weight: bold; 
	font-size: 0.4em; 
	line-height:2em;
	text-shadow:0 0 0.3em rgba(0,0,0,0.5);
    pointer-events:none;
}
.smap .cluster img {
display: none !important;
}

.closeSide{
    border:1px solid black;
    line-height:30px;
    width:30px;
    position:absolute;
    right:20px;
    top:10px;
    text-align:center;
    z-index:200;
    cursor:pointer;
    background:white;
}
.closeSide:hover{
    background:black;
    color:white;
}
#leftSide{
    position:fixed;
    width:420px;
    max-width:100%;
    background:rgba(255,255,255,0.95);
    z-index:92;
    height:calc(100%);
    transform: translate(-100%,0);
    transition:all 0.3s ease-in-out;
    box-shadow:0 0 50px rgba(0,0,0,0.5);
}
#leftSide > span{
    position:absolute;
    top:50%;
    right:0;
    line-height:50px;
    width:130px;
    display:block;
    background:#00a453;
    overflow:hidden;
    cursor:pointer;
    text-align:center;
    font-size:20px;
    z-index:2;
    transform-origin: right;
    transform:rotate(90deg) translate(0,-15px);
    border-top-right-radius:10px;
    border-top-left-radius:10px;   
    user-select: none; 
    color:white;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
    transition:all 0.3s ease-in-out;
}
#leftSide.leftSideOpen > span{ 
    background:rgba(255,255,255,0.95);
    color:black;
    box-shadow:none;
    transition:all 0.3s ease-in-out;
}
#leftSide #leftSideInside{
   overflow-y:auto;
    height:100vh; 
    padding-bottom:50px;
    box-sizing:border-box;
}
#leftSide #leftSideInside > div{
    padding:20px 20px 0px 20px;
    
}
#leftSide > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0d8";
	font-weight:bold;
}
#leftSide.leftSideOpen > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0dd";
	font-weight:bold;
}

#leftSide.leftSideOpen{
    transform: translate(0,0);
    transition:all 0.3s ease-in-out;
    z-index:100;
}

#leftSide h2{padding:20px 20px 0px 20px;}
#leftSide h3{padding:0 0 0 0}

#rightSide{
    position:fixed;
    top:0;
    right:0;
    width:420px;
    max-width:100%;
    background:rgba(255,255,255,0.95);
    z-index:91;
    height:calc(100%);
    transform: translate(100%,0);
    transition:all 0.3s ease-in-out;
    box-shadow:0 0 50px rgba(0,0,0,0.5);
}
#rightSide > span{
    position:absolute;
    top:50%;
    left:0;
    width:130px;
    line-height:50px;
    display:block;
    background:#00a453;
    overflow:hidden;
    cursor:pointer;
    text-align:center;
    font-size:20px;
    z-index:2;
    transform-origin: left;
    transform:rotate(-90deg) translate(0,-25px);
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    user-select: none; 
    color:white;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
    transition:all 0.3s ease-in-out;
}
#rightSide.rightSideOpen > span{ 
    background:rgba(255,255,255,0.95);
    color:black;
    box-shadow:none;
    transition:all 0.3s ease-in-out;
}

#rightSide > div{
    padding:20px;
    height:100%;
}
#rightSide > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0d8";
	font-weight:bold;
}
#rightSide.rightSideOpen > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0dd";
	font-weight:bold;
}

#rightSide.rightSideOpen{
    transform: translate(0,0);
    transition:all 0.3s ease-in-out;
    z-index:100;
}

#rightSide h2{}
#rightSide h3{padding:0 0 5px 0}


#bottomSide{
    position:fixed;
    bottom:0;
    left:50%;
    max-width:100%;
    background:rgba(0,0,0,0.95);
    z-index:91;
    transform: translate(-50%,95%);
    transition:all 0.3s ease-in-out;
    box-shadow:0 0 50px rgba(0,0,0,0.5);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
#bottomSide > span{
    position:absolute;
    top:0;
    left:50%;
    padding:10px 20px 10px 20px;
    display:block;
    background:#000;
    overflow:hidden;
    cursor:pointer;
    text-align:center;
    font-size:20px;
    z-index:2;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    user-select: none; 
    color:white;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
    transform: translate(-50%,-99%);
    transition:all 0.3s ease-in-out;
     white-space: nowrap;
    
}
#bottomSide.bottomSideOpen > span{ 
    background:rgba(0,0,0,0.95);
    box-shadow:none;
    transition:all 0.3s ease-in-out;
}

#bottomSide > div{
    padding:20px;
    width:100%;
    text-align:center;
    box-sizing:border-box;
}
#bottomSide > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0d8";
	font-weight:bold;
}
#bottomSide.bottomSideOpen > span:before{
	font-family: 'Font Awesome 6 Pro';
	content: "\f0dd";
	font-weight:bold;
}

#bottomSide.bottomSideOpen{
    transform: translate(-50%,0);
    transition:all 0.3s ease-in-out;
    z-index:100;
}

#bottomSide h2{}
#bottomSide h3{padding:0 0 5px 0}

#bottomSide .buttons{
	padding:0px;
	position: relative;
	bottom:inherit;
	right:inherit;
	z-index:0;
}
#bottomSide .buttons > .icoButt {
	display:inline-block;
	background:none;
	border:none;
	margin-top:0;
	padding:0;
	position:relative;
}
#bottomSide .closeSide{
    border:none;
    line-height:30px;
    width:30px;
    position:absolute;
    right:0px;
    top:0px;
    text-align:center;
    z-index:200;
    cursor:pointer;
    color:white;
    border-top-right-radius:10px;
    background:none;
}

@media screen and (min-width: 0px) and (max-width: 699px) and (orientation:portrait){
    #leftSide > span{font-size:20px; width:110px; line-height:30px; transform:rotate(90deg) translate(30px,-50%); }
    #rightSide > span{font-size:20px; width:110px; line-height:30px; transform:rotate(-90deg) translate(-30px,-50%);}
    #bottomSide > span{font-size:15px; width:40%; line-height:30px; padding:0}
    #bottomSide{width:95%;}
}

@media screen and (min-width: 0px) and (max-width: 900px) and (orientation:landscape){
    #leftSide > span{font-size:16px; width:90px; line-height:30px; transform:rotate(90deg) translate(30px,-50%); }
    #rightSide > span{font-size:16px; width:90px; line-height:30px; transform:rotate(-90deg) translate(-30px,-50%);}
    #bottomSide > span{font-size:16px; width:40%; line-height:30px; padding:0}
    #bottomSide{width:95%;}
}


.filterBlock{
    padding:10px 0;
}
.filterBlock .filterBlockContent{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.05+0,0+100;Neutral+Density */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    padding:10px 10px;
}

.filterBlock .filterBlockContent.contentOblasti a .weather{
    position:absolute;
    top:10px;
    right:10px;
    color:grey;
    text-align:center;
    background:white;
    padding:10px;
    border-radius:20px;
    width:50px;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
}
.filterBlock .filterBlockContent.contentOblasti a .weather .fa{
    font-size:2em;
    font-weight:100;
    color:#000;
    margin-bottom:5px;
}
.filterBlock .filterBlockContent.contentOblasti a .weather .temp{
    font-size:1em;
    font-weight:100;
}
.filterBlock .filterBlockContent.contentOblasti a:hover .weather .fa{
    font-weight:700;
    color:#1D679E;
}
.filterBlock .filterBlockContent.contentOblasti a{
    position:relative;
}
.filterBlock .filterBlockContent.contentOblasti a[data-region="celaoblast"]{
    font-weight:bold;
    text-transform:uppercase;
    display:block;
    padding:10px 10px;
    border-radius:5px;
    margin-bottom:3px;
    text-decoration:none;
    font-size:1.3em;
}
.filterBlock .filterBlockContent.contentOblasti a:not([data-region="celaoblast"]){
    display:block;
    padding:20px 10px;
    border:1px solid rgba(0,0,0,0.1);
    background:rgba(0,0,0,0.03);
    border-radius:5px;
    margin-bottom:3px;
    text-decoration:none;
    min-height:45px;
}

.filterBlock .filterBlockContent.contentOblasti a:hover{
    background:rgba(0,0,0,0.05);
}

.filterBlock .filterBlockContent.contentSearch{
     padding:10px 15px 10px 20px;
}
.filterBlock .filterBlockContent.contentSearch .icoButt{
    margin:0 3px 0 0;
}
.filterBlock .filterBlockContent.contentSearch input{
    width:calc(100% - 70px)
}

.filterBlock.filterBlockExpander{
    border-bottom:1px dotted #ddd;
}
.filterBlock.filterBlockExpander.filterBlockExpanderOpen{
    border-bottom:none;
}
.filterBlock.filterBlockExpander > h3{
    cursor:pointer;
    line-height:2em;
    position:relative;
    font-size:1.5em;
}
.filterBlock.filterBlockExpander > h3:before{
    font-family: 'Font Awesome 6 Pro';
	content: "\f055";
	font-weight:bold;
	position:absolute;
	top:0;
	right:0;
    color:black;
}
.filterBlock.filterBlockExpander.filterBlockExpanderOpen > h3:before{content: "\f056";}
.filterBlock.filterBlockExpander > div{
    display:none;
}
.filterBlock.filterBlockExpander.filterBlockExpanderOpen > div{
    display:block;
}

.infoBlock{
    padding:10px 0;
    height:100%;
}

.infoBlock .infoBlockMenu{
    padding-bottom:20px;
}
.infoBlock .infoBlockMenu .icoButt{
    margin:0 5px 5px 0;
}

.infoBlock .infoBlockContent{
    background:#eee;
    padding:20px;
    border-radius:10px;
    height:calc(100% - 190px) !important;
    overflow:hidden;
    overflow-y:auto;
}

.recDiv{
    padding:20px 20px;
    position:relative;
    background:white;
    margin-bottom:5px;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    border-radius:10px;
    border:3px solid white;
}

.recDiv.recDivGrid {
    display: grid;
    grid-template-columns: 100px calc(100% - 100px);
}
.recDiv > .recType{
    padding:0 0 10px 0;
}
.recDiv .recDate{
    padding:3px 0px;
    margin-bottom:5px;
    color:#000;
}

.recDiv  .recDate.recDateWithImg{
    padding:5px 10px;
    position:absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    color:#ddd;
    font-size:10px;
}

.recDiv50{
    float:left;
    width:46%;
    background:white;
    text-align:center;
    padding:5px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    margin:2%;
    box-sizing:border-box;
    min-height: 250px;
}
.recDiv.recDiv50:last-child{
    border-bottom:none;
    padding-bottom:10px;
    margin-bottom:0px;
}
.recDiv50 .icoButt{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    margin:0;
    border-radius:7px;
}
.choosenew-categories a{
    width:40% !important;
}
.choosenew-categories a i{
    opacity:1 !important;
}

.temperatureRow{padding-bottom:10px;font-weight:bold;}
.stateRow{padding:10px 0;}
.stateRow.state3007 i{color:green}
.stateRow.state3008 i{color:orange}
.stateRow.state3009 i{color:red}

.routeInfo{
    position:absolute;
    background:rgba(0,0,0,0.7);
    font-size:.8em;
    padding:5px 10px;
    top:50%;
    left:50%;
    z-index:99;
    color:white;
    pointer-events: none;
    border-radius:5px;
}
.routeInfo:after{
    position:absolute;
    top:-5px;
    left:50%;
    margin-left:-5px;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0,0,0,0.7) transparent;
}

.pinInfo{
    position:absolute;
    background:rgba(0,0,0,0.7);
    font-size:.8em;
    padding:5px 10px;
    top:50%;
    left:50%;
    z-index:99;
    color:white;
    pointer-events: none;
    border-radius:5px;
    transform: translateX(-50%);
}
.pinInfo:after{
    position:absolute;
    bottom:-5px;
    left:50%;
    margin-left:-5px;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: rgba(0,0,0,0.7) transparent transparent  transparent;
}

.specialRouteEvent{
    background:#eee;
    padding:10px 10px 0px 10px;
    border:1px solid #ccc;
    margin-bottom:30px;
    border-radius:5px;
}
.specialRouteEvent .icoButt{
    font-size:1.2em;
    margin:0 0 10px 0;
}
.legend{
    list-style:none;
}
.legend li{
    padding:5px 0;
}

.legendIcons{
    list-style:none;
}
.legendIcons li{
    padding:2px 0;
}
.legendIcons li > span{
    font-size:1rem;
}
.legendIcons li > span > i:nth-child(2){
    transform: translateY(-4px) scale(0.8);
}

.regionGraph{
    width:calc(100% - 100px);
    box-sizing: border-box;
    border-radius:5px;
    overflow:hidden;
}
.regionGraph > div{
    float:left;
    box-sizing:border-box;
    height: 10px;
}