#skillContainer{
  --skillContainerWidth: 400px;
  width: var(--skillContainerWidth);
}

#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; 
  position: relative;  
  padding: 0;
  margin-top: 5px;
  background-color: white;
}

#bar, #myMaxBar {
  position: absolute;  
  left:0px;
  top:0px;
  width:0%;
  height:100%;  
  display: inline-block;
  z-index: 2;
  border-radius: 5px;
  transition: width 300ms ease-out;
}

/* ZARAZKA MAX KAM JSEM DOJEL */
#myMaxBar{
  z-index: 1;
  opacity: 0.45;
  filter: saturate(0.7);
}

#myMaxBar.level0, #bar.level0
{background: linear-gradient(to right, #bdc3c7, #95a5a6 calc(var(--skillContainerWidth) * 0.25)); border: 1.5px solid var(--darkGray);}

#myMaxBar.level1, #bar.level1
{background: linear-gradient(to right, var(--orange) 0px, var(--yellow) calc(var(--skillContainerWidth) * 0.625)); border: 1.5px solid var(--orangeHover);}

#myMaxBar.level2, #bar.level2
{background: linear-gradient(to right, var(--yellow) 0px, #d9b00e calc(var(--skillContainerWidth) * 0.75)); border: 1.5px solid #c19d0c;}

#myMaxBar.level3, #bar.level3
{background: linear-gradient(to right, var(--green) calc(var(--skillContainerWidth) * 0.6875), #27ae60 var(--skillContainerWidth)); border: 1.5px solid #229954;}

#myMaxBar.level4, #bar.level4
{background: linear-gradient(to right, #27ae60, #229954 var(--skillContainerWidth)); border: 1.5px solid #1E8449;}


#masteryBar50,#masteryBar80,#masteryBar95,#masteryBar98{    
  height: 100%;
  border-right: 1px solid var(--lightGrayHover); /* default, not re-colored by inclusion of .level# */
  z-index: 3;
  position: absolute;
  top:0px; 
}
#masteryBar50{  
  left: 25%;
}
#masteryBar80{  
  left: 50%;
}
#masteryBar95{  
  left: 75%;
}
#masteryBar98{  
  display: none;
}

#bar.level1~#masteryBar50 {
  border-right: 1.5px solid var(--orangeHover) !important;
}

#bar.level2~#masteryBar50,
#bar.level2~#masteryBar80 {
  border-right: 1.5px solid #c19d0c !important;
}

#bar.level3~#masteryBar50,
#bar.level3~#masteryBar80,
#bar.level3~#masteryBar95 {
  border-right: 1.5px solid #229954 !important;
}

#bar.level4~#masteryBar50,
#bar.level4~#masteryBar80,
#bar.level4~#masteryBar95 {
  border-right: 1.5px solid #1E8449 !important;
}

#bar.level0[style*="width: 0%"],
#myMaxBar.level0[style*="width: 0%"] {
  visibility: hidden;
}

#circle{  
  margin-left: 10px;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  position: relative;
  top: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75% auto;
  background-color: white;
}

#circle.level0{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-0.svg');
}
#circle.level1{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-1.svg');
}
#circle.level2{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-2.svg');
}
#circle.level3{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-3.svg');
}
#circle.level4{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-4.svg');
}
#circle.level3x{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-3-1.svg');
}
#circle.level3xx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-3-2.svg');
}
#circle.level3xxx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-3-3.svg');
}
#circle.level3xxxx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-3-4.svg');
}
#circle.level4x{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-4-1.svg');
}
#circle.level4xx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-4-2.svg');
}
#circle.level4xxx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-4-3.svg');
}
#circle.level4xxxx{
  background-image: url('https://umimeto.org/asset/global/img/badges/shield-4-4.svg');
}

.white-screen #skillBar {
  background-color: var(--lightGray);
}

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

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

  #skillContainer{
    --skillContainerWidth: 260px;
    width: var(--skillContainerWidth);
  }

}