#skillContainer{    
  width: 400px; 
}

#skillLabel{
  display:block;  
  font-size: 16px;  
  margin:5px 0px;   
  font-weight: 400;
  margin:10px 0px;    
}

#skillBar{      
  width: 100%;
  height:20px;  
  display:inline-block;
  text-align: left;
  border-radius:5px;
  overflow: hidden;    
  position: relative;  
  padding: 0px;
  background-color: white;
  /* background-color: #f7f7f7; /* BILE HRATKY */
}

#bar{
  position: absolute;  
  left:0px;
  top:0px;
  width:0%;
  height:100%;  
  display: inline-block;
  z-index: 2;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 0px solid transparent;
}

/* NOVINKA, ZARAZKA MAX KAM JSEM DOJEL */
#myMaxBar{    
  position: absolute;  
  left:0px;
  top:0px;  
  width:0%;
  height:100%;    
  border-right: 1px solid #cbcfd3;  
  background-color: #e0e2e5;
  z-index: 1;

  /* NOVE ROZSIRENI NA BILOU */   
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 0px solid #cbcfd3;  
}

#myMaxBar.level0{ background: linear-gradient(to right, #bdc3c7, #95a5a6 400px); opacity:0.6; }
#myMaxBar.level1{ background: linear-gradient(to right, #f39c12, #db8c10 400px); opacity:0.6; }
#myMaxBar.level2{ background: linear-gradient(to right, #f1c40f, #d9b00e 400px); opacity:0.6; }
#myMaxBar.level3{ background: linear-gradient(to right, #2ecc71, #27ae60 400px); opacity:0.6; }
#myMaxBar.level4{ background: linear-gradient(to right, #27ae60, #1f8b4d 400px); opacity:0.6; }

#bar.level0{ background: linear-gradient(to right, #bdc3c7, #95a5a6 400px); }
#bar.level1{ background: linear-gradient(to right, #f39c12, #db8c10 400px); }
#bar.level2{ background: linear-gradient(to right, #f1c40f, #d9b00e 400px); }
#bar.level3{ background: linear-gradient(to right, #2ecc71, #27ae60 400px); }
#bar.level4{ background: linear-gradient(to right, #27ae60, #1f8b4d 400px); } /*puvodne sirka 400px*/

#masteryBar50,#masteryBar80,#masteryBar95,#masteryBar98{    
  height: 100%;
  border-right: 1px solid #dfe6e9;
  border-right: 1px solid #d1d8e0; /* SVETLY DESIGN */
  z-index: 3;
}
#masteryBar50{  
  position: absolute;
  left: 25%;
  top:0px;  
}
#masteryBar80{  
  position: absolute;
  left: 50%;
  top:0px;
}
#masteryBar95{  
  position: absolute;
  left: 75%;
  top:0px;
}
#masteryBar98{  
  position: absolute;
  left: 100%;
  top:0px;
}

#circle{  
  margin-left: 10px;
  margin-bottom: -8px;
  border-radius: 50px;  
  width: 50px;
  height: 50px;  
}

#circle.level0{
  background: url('https://umimeto.org/asset/global/img/badges/shield-0.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;  
}
#circle.level1{
  background: url('https://umimeto.org/asset/global/img/badges/shield-1.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level2{
  background: url('https://umimeto.org/asset/global/img/badges/shield-2.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level3{
  background: url('https://umimeto.org/asset/global/img/badges/shield-3.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level4{
  background: url('https://umimeto.org/asset/global/img/badges/shield-4.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level3x{
  background: url('https://umimeto.org/asset/global/img/badges/shield-3-1.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level3xx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-3-2.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level3xxx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-3-3.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level3xxxx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-3-4.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level4x{
  background: url('https://umimeto.org/asset/global/img/badges/shield-4-1.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level4xx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-4-2.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level4xxx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-4-3.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}
#circle.level4xxxx{
  background: url('https://umimeto.org/asset/global/img/badges/shield-4-4.svg');
  background-repeat: no-repeat; 
  background-position: center center;   
  background-size: 75% auto;
  background-color: white;    
}

/********************** LEVEL BASED *****************************/
#levelBar {
  display: flex;
  justify-content: center;
  margin: 0 20px;
}

#levelBar .barBox {
  height: 20px;
  flex: 0 1 70px;
}

#levelBar .barBox + .barBox {
  border-left: 1px solid var(--gray);
}

#levelBar .barBox:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#levelBar .barBox:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

#levelBar .barBox.unfinished {
  background-color: white;
}
#levelBar .barBox.current {
  background-color: var(--yellow);
}
#levelBar .barBox.solved {
  background-color: var(--greenHover);
}

.whiteScreen #levelBar .barBox.unfinished {
  background-color: var(--lightGray);
}

/********************** MOBILNI VERZE *****************************/

@media screen and (max-width: 550px) {

  #skillContainer{    
    width: 260px;     
  }

}