:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom); 
    --sal: env(safe-area-inset-left);
}

.content {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

BODY           {-webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
                MARGIN:0; COLOR:#000000; FONT-SIZE:6.5pt; FONT-FAMILY:'Verdana'; BACKGROUND:#F2EFE9;}
P              {MARGIN:0; COLOR:#63656B; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana';}
P.LOGIN        {MARGIN:0; COLOR:#000000; FONT-SIZE:9.5pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.BLACK        {MARGIN:0; COLOR:#000000; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.BIG_BLACK    {MARGIN:0; COLOR:#000000; FONT-SIZE:18.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.WHITE        {MARGIN:0; COLOR:#FFFFFF; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.WHTIN        {MARGIN:0; COLOR:#FFFFFF; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana';}
P.TEXTY        {MARGIN:0; COLOR:#000000; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana';}
P.BTHIN        {MARGIN:0; COLOR:#000000; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; }
P.BIG_BTHIN    {MARGIN:0; COLOR:#000000; FONT-SIZE:20.0pt; FONT-FAMILY:'Verdana'; }
P.CERVE        {MARGIN:0; COLOR:#E70408; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.ZELEN        {MARGIN:0; COLOR:#04E708; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.GREEN        {MARGIN:0; COLOR:#339933; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.ORANG        {MARGIN:0; COLOR:#FF9900; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.CTHIN        {MARGIN:0; COLOR:#E70408; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; }
P.BIG_CTHIN    {MARGIN:0; COLOR:#E70408; FONT-SIZE:20.0pt; FONT-FAMILY:'Verdana'; }
P.MODRE        {MARGIN:0; COLOR:#00458C; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; }
P.MODRA        {MARGIN:0; COLOR:#00458C; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
A.MODRA        {MARGIN:0; COLOR:#00458C; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; TEXT-DECORATION: none;}
A.TUCNA        {MARGIN:0; COLOR:#00458C; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; FONT-WEIGHT:bold;}
P.MTHIN        {MARGIN:0; COLOR:#00458C; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; }
P.BELAS        {MARGIN:0; COLOR:#007DFF; FONT-SIZE:8.0pt; FONT-FAMILY:'Verdana'; }
P.SPACE        {MARGIN:0; COLOR:#63656B; FONT-SIZE:5.0pt; FONT-FAMILY:'Verdana';}
P.SMALL        {MARGIN:0; COLOR:#5A595A; FONT-SIZE:7.0pt; FONT-FAMILY:'Verdana'; TEXT-DECORATION: none;}
P.SMRED        {MARGIN:0; COLOR:#E70408; FONT-SIZE:7.0pt; FONT-FAMILY:'Verdana'; TEXT-DECORATION: none;}
P.SMZEL        {MARGIN:0; COLOR:#008000; FONT-SIZE:7.0pt; FONT-FAMILY:'Verdana'; TEXT-DECORATION: none;}

A.WHITE        {MARGIN:0; COLOR:#FFFFFF; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; FONT-WEIGHT:bold;}
A.TAXI0        {MARGIN:0; COLOR:#E70408; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; FONT-WEIGHT:bold;}
A.TAXI0:hover  {MARGIN:0; COLOR:#E70408; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; FONT-WEIGHT:bold;}

P.DENMS        {MARGIN:0; COLOR:#00458C; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; FONT-WEIGHT:bold;}
A.DENMS        {MARGIN:0; COLOR:#00458C; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; FONT-WEIGHT:bold;}

A.KALEN        {MARGIN:0; COLOR:#000000; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; TEXT-DECORATION: none;}
A.KALEN:hover  {MARGIN:0; COLOR:#E70408; FONT-SIZE:10.0pt; FONT-FAMILY:'Arial'; TEXT-DECORATION: none;}

                 
@keyframes pulztext { 0% { opacity: 0.1; }
                     50% { opacity: 1.0; }
                    100% { opacity: 0.1; } }


@keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; }
                    50% { opacity: 1; }
                   100% { transform: scale(1.9); opacity: 0; } }

.blokovanytext { color: #0D0D0D;
                 font-size: 10.0pt;
                 font-weight: bold; }

.obycmodrytext { color: #00458C;
                 font-size: 10.0pt;
                 font-weight: bold; }

.pulzujucitext { color: #00458C;
                 font-size: 10.0pt;
                 font-weight: bold;  
                 animation: pulztext 2s infinite; }

.marker {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 130px;
  left: 200px;
  display: block; }

.pin {
  width: 16px;
  height: 16px;
  position: relative;
  top: 8px;
  left: 8px;
  background: rgba(5, 124, 255, 1);
  border: 4px solid #FFF;
  border-radius: 50%;
  z-index: 1000; }

.pin-effect {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  display: block;
  background: rgba(5, 124, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: pulsate 1s ease-out infinite; }
  

// TOTO BY MALO VEDIE UKLADAT VEDLA SEBA a POD SEBA DVE DIVKA!
//<div class="wrapper">
//    <div id="one">one</div>
//    <div id="two">two</div>
//</div>
//http://jsfiddle.net/cUCvY/1/
  
.mapka { 
  border : 2px solid #000; 
  overflow:hidden;
}

.mapka div {
   min-height: 200px;
}

#cast1 {
  overflow:hidden;
  float:none;
  height: 50%;
  width: 100%;   
}

#cast2 { 
  overflow:hidden;
  overflow-y:scroll;
  height: 50%;   
  width: 100%;     
}

@media all and (orientation:landscape) {
   #cast1 { 
   float: left;
   height: 100%;
   width: 50%;      
  }
   #cast2 { 
   height: 100%;
   width: 50%;      
  }
  
}