body {background-color: #C0C0C0; font-family: Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight: bold;}
.metra-modra-bg {background-color: rgb(4, 60, 119);}
.metra-modra {color: rgb(4, 60, 119);}
.metra-cervena-bg {background-color: rgb(219, 34, 66);}
.metra-cervena {color: rgb(219, 34, 66);}
.metra-orange-bg {background-color: #FF4500!important;}
.metra-slp-lev {width: 69%; height: inherit;}
.metra-slp-str {width: 2%; height: inherit;}
.metra-slp-prv {width: 29%; height: inherit;}
.metra-hlavicka {height: 127px;}
.metra-hlavicka a {font-weight: bold; text-decoration: none;}
.metra-menu {width: 100%;}
.metra-menu div, .metra-menu button, .metra-menu a {width: 100%;}
.metraLoader { border: 0.5em solid #f3f3f3; border-top: 0.5em solid rgb(4, 60, 119); border-bottom: 0.5em solid rgb(219, 34, 66); border-radius: 50%; width: 5em; height: 5em; margin-left: auto; margin-right: auto; animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
#MetraLoaderSmall { border: 2px solid #f3f3f3; border-top: 2px solid rgb(4, 60, 119); border-bottom: 2px solid rgb(219, 34, 66); border-radius: 50%; width: 5em; height: 5em; margin-left: auto; margin-right: auto; animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
.metra-button-modry {background-color: rgb(4, 60, 119); color: white; font-weight: bold;}
.metra-button-cerveny {background-color: rgb(219, 34, 66); color: white; font-weight: bold;}
.metra-button-modry a {text-decoration: none;}
.metra-button-cerveny a {text-decoration: none;}
#settingsProgress, #servicesProgress {width: 0%; text-align: center; padding-top: 0.2em; padding-bottom: 0.2em; margin-top: 1em; margin-bottom: 1em;}
/*#MetraLogin {margin-left: auto; margin-right: auto;}*/
#MetraLogin a {width: 100%;}
.metra-setting-head {font-weight: bold; color: rgb(4, 60, 119);}
.metra-bottom-bar {border-bottom: solid 2px rgb(4, 60, 119)!important;}
.red-dot {background-color: rgb(219, 34, 66); width: 1em; height: 1em; border-radius: 50%; display: block; margin-left: auto; margin-right: auto;}
.blue-dot {background-color: rgb(4, 60, 119); width: 1em; height: 1em; border-radius: 50%; display: block; margin-left: auto; margin-right: auto;}
/*#MetraVPNtable th, #MetraVPNtable td {border: 1px solid #ddd; padding-left: 0; padding-right: 0;}*/
#MetraVPNtable tr td:nth-child(1n+2) {border-left: 1px solid #ddd; border-right: 1px solid #ddd}
#MetraVPNtable th, #MetraVPNtable td {padding-left: 0; padding-right: 0;}
#MetraVPNtable th {text-align: center;}
#MetraVPNtable {user-select: none;}
.metra-pointer {cursor: pointer;}
.metra-red-border {border: solid 2px rgb(219, 34, 66);}
.metra-netstat {margin-left: auto; margin-right: auto; width: 95%;}
.metra-separator::after {content: " / ";}
.metra-colon-separator::after {content: ": ";}
.metra-zip-file::after{content: " [.ZIP]";}
.metra-upd-file::after{content: " [.UPD]";}
.metra-percents::after{content: " [%]";}
.metra-no-one::after{content: " 1";}
.metra-no-two::after{content: " 2";}
#MetraSettingsSendFreqSelect {width: 90%;}
.metra-grayscale {filter: grayscale(100%);}
.metra-not-allowed {cursor:not-allowed;}
.metra-preformatted {max-height: 400px; overflow-y: scroll; overflow-x: scroll;}

/* úpravy pro zobrazení na mobilech */
@media (max-width:600px){footer div{text-align: center!important;}}
@media (min-width:600px) and (max-width:1000px){.lang-selector {padding-top: 4px!important; padding-bottom: 4px!important; padding-left: 8px!important; padding-right: 8px!important;} .metra-menu {margin-top: 0px!important;}}
/* úprava některých nastavený w3.css */
.w3-modal{padding-top:200px;background-color:rgba(0,0,0,0.6)}
h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1em}
/* kruhový graf */

.metra-circular-chart {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    max-height: 120px;
  }
  
  .circle-bg {
    fill: none;
    stroke: rgb(219, 34, 66);
    stroke-width: 3.8;
  }
  
  .circle {
    fill: none;
    stroke: rgb(4, 60, 119);
    stroke-width: 3.8;
    stroke-linecap: butt;
    stroke-dasharray: 0,100;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
 /* .metra-circular-chart.orange .circle {
    stroke: rgb(4, 60, 119);
  }*/
  
  .percentage {
    /*fill: #666;
    font-family: sans-serif;*/
    font-size: 0.5em;
    text-anchor: middle;
  }

/* floating dots */

.stage {
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative;
  padding: 2rem 0;
  margin: 0 -5%; */
  padding-top: 0.5em;
  overflow: hidden;
}

  .dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: white;
    color: white;
    animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
  }
  
  .dot-floating::before, .dot-floating::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-floating::before {
    left: -12px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: white;
    color: white;
    animation: dotFloatingBefore 3s infinite ease-in-out;
  }
  
  .dot-floating::after {
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: white;
    color: white;
    animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
  }
  
  @keyframes dotFloating {
    0% {
      left: calc(-50% - 5px);
    }
    75% {
      left: calc(50% + 105px);
    }
    100% {
      left: calc(50% + 105px);
    }
  }
  
  @keyframes dotFloatingBefore {
    0% {
      left: -50px;
    }
    50% {
      left: -12px;
    }
    75% {
      left: -50px;
    }
    100% {
      left: -50px;
    }
  }
  
  @keyframes dotFloatingAfter {
    0% {
      left: -100px;
    }
    50% {
      left: -24px;
    }
    75% {
      left: -100px;
    }
    100% {
      left: -100px;
    }
  }