.rl-main > .content .map{
  display: block;      
}

.rl-main > .content .map svg{
  max-height: 300px;
  max-width: 300px;
  width: auto;
  height: auto;
}

/* Scale SVG to fit inside small preview containers */
.map svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rl-main > .content .map svg{  
  background-color: #e0f9fb;
  border-radius:6px;  
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);    
  border: 2px solid #e8eced;
}

/* HVEZDICKY PROTO, ZE SE TO APLIKUJE BUD NA PATH NEBO NA CIRCLE ELEMENT */
.rl-main > .content .map *.active{  
  stroke-width: 4;
  cursor: pointer;
  fill:none;  
}
.rl-main > .content .map *.active.fill{
  stroke-width: 2;
  fill:#d1d5d8;    
}

.rl-main > .content .map *.activeHover{ 
  stroke-width: 4;
  stroke:red;   
  cursor: pointer;
  fill:none;
}
.rl-main > .content .map *.activeHover.fill{
  stroke-width: 2;
  fill:#f0c52f;
}

.rl-main > .content .map *.correct{
  stroke-width: 4;
  stroke:#2dae62; 
}
.rl-main > .content .map *.correct.fill{
  stroke-width: 2;
  fill:#35cc73;  
}

.rl-main > .content .map *.wrong{
  stroke-width: 4;
  stroke:#C0392B; 
}
.rl-main > .content .map *.wrong.fill{
  stroke-width: 2;
  fill:#E74C3C;  
}

.rl-main > .content .map *.selected{
  stroke-width: 4;
  stroke:#fe9800;  
}
.rl-main > .content .map *.selected.fill{
  stroke-width: 2;
  fill:yellow !important;
}

.map *.preview-highlight {
  stroke-width: 4;
  stroke: var(--orange) !important;
  fill: var(--orange) !important
}

.map *.preview-highlight-line {
  stroke-width: 15;
  stroke: var(--orange) !important;
  fill: none;
}

.land{
  fill:#ffffed;  
  fill:white;  
}



/****** LEARNING MAP ********/
.rl-main > .content .learningMap{
  display: block;      
}

.rl-main > .content .learningMap svg{  
  max-height: 400px;
  max-width: 600px;
  width: auto;
}

.rl-main > .content .learningMap svg{  
  background-color: #e0f9fb;
  border-radius:6px;  
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);    
  border: 2px solid #e8eced;
}

/* HVEZDICKY PROTO, ZE SE TO APLIKUJE BUD NA PATH NEBO NA CIRCLE ELEMENT */
.rl-main > .content .learningMap *.active{  
  stroke-width: 4;
  cursor: pointer;
  fill:none;  
}
.rl-main > .content .learningMap *.active.fill{
  stroke-width: 2;
  fill:#d1d5d8;    
}

.rl-main > .content .learningMap *.activeHover{ 
  stroke-width: 4;
  stroke:red;   
  cursor: pointer;
  fill:none;
}
.rl-main > .content .learningMap *.activeHover.fill{
  stroke-width: 2;
  fill:#f0c52f;
}