body {background-color: #C0C0C0; font-family: Arial, Helvetica, sans-serif;}
h1, h2, h3, h4 {font-weight: bold;}
a {text-decoration: underline;}
.metra-blue-bg {background-color: rgb(4, 60, 119);}
.metra-red-bg, .tab-button-active {background-color: #db2242!important;}
.metra-blue {color: rgb(4, 60, 119);}
.metra-red {color: #db2242;}
.metra-orange-bg {background-color: #FF4500!important;}
.metra-col-left {width: 69%; height: inherit;}
.metra-col-mid {width: 2%; height: inherit;}
.metra-col-right {width: 29%; height: inherit;}
.metra-head {height: 127px;}
/*.metra-hlavicka div {height: inherit;}*/
.metra-head a {font-weight: bold; text-decoration: none;}
.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; height: 20px; width: 20px;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
.metra-button-blue {background-color: #043c77; color: white; font-weight: bold;}
.metra-button-red {background-color: rgb(219, 34, 66); color: white; font-weight: bold;}
.metra-button-blue a {text-decoration: none;}
.metra-button-red a {text-decoration: none;}
.metra-confirm-modal .w3-modal-content {top: -50px; left: 50px;}
.metra-confirm-modal {z-index: 100;}
.metra-bottom-bar-blue {border-bottom: 2px solid rgb(4, 60, 119) !important;}
.cursor-pointer {cursor: pointer;}
.metra-table-link {display: block; width: 100%; height: 100%; text-decoration: none;}
.metra-table-link:hover {text-decoration: none;}
.metra-table a {text-decoration: none;}
.metra-table a:hover {text-decoration: none;}
/*.metra-button-blue:hover {text-decoration: none;}*/
a[class*="metra-button-"]:hover {text-decoration: none; color: white;}
.table-strip {background-color: #f1f1f1;}
.metra-input-small {width: inherit;}
/* pridava vlastnost w3-mobile na jakoukoliv sirku obrazovky */
.metra-mobile-any {display:block;width:100%!important;}
.metra-top-user-menu {width:100%; text-overflow: ellipsis;}
.margin-right-8 {margin-right: 8px;}

.metra-login-bg {background-image: url("/img/EITN-background.jpg");   background-repeat: no-repeat;
  background-size: cover;     width: 100%;}
.blur {  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  
	width: 100%;
}
.metra-white-bg-opacity {background-color: rgba(255, 255, 255, 0.4)}
.hide {display: none;}

.flash-info {background-color: #043c77;}
.flash-error {background-color: rgb(219, 34, 66);}
.flash-success {background-color: #4CAF50;}

.flash-disappear {animation-name: disappear; animation-duration: 10s; animation-iteration-count: 1; animation-fill-mode: forwards;}
@keyframes disappear {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

.metra-separator::after {content: ", ";}
.metra-body {width: 95%; margin-left: auto; margin-right: auto;}
.bold-text {font-weight: bold;}
.normal-text {font-weight: 100;}
.metra-border-red {border-color: #db2242 !important;}
.half-width {width: 50%;}
.blink {animation: blink 1s step-end 2}
@keyframes blink { 50% { visibility: hidden; }}
.metra-display-columns {column-count: 7; column-gap: 1em; column-rule: 1px solid #757575;}
.amr-cmd, .aes-text-input {width: 100%; min-height: 150px;}
.amr-repeaters-input, .amr-sensors-input {text-align: center; width: 8em; margin-left: auto; margin-right: auto; background-color: transparent;}

/*.red-dot {background-color: rgb(219, 34, 66); width: 1em; height: 1em; border-radius: 50%; display: block; margin-left: auto; margin-right: auto;}
.green-dot {background-color: rgb(0,128,0); width: 1em; height: 1em; border-radius: 50%; display: block; margin-left: auto; margin-right: auto;}*/

.red-dot {background-color: rgb(219, 34, 66); width: 1em; height: 1em; border-radius: 50%; margin-left: auto; margin-right: auto;}
.green-dot {background-color: rgb(0,128,0); width: 1em; height: 1em; border-radius: 50%; margin-left: auto; margin-right: auto;}
.orange-dot {background-color:  rgb(255,140,0); width: 1em; height: 1em; border-radius: 50%; margin-left: auto; margin-right: auto;}
.dot-in-line {position: relative; top: 0.2em;}
.col-30 {width: 3.33%;}
.table-row-green {background-color: green !important;}
.table-row-red, .table-cell-red {background-color: red !important;}
.table-row-yellow {background-color: yellow !important;}

#MetraModalContent {max-height: 500px; overflow-y: scroll;}
#MetraModal {z-index: 100;}

/* úprava některých nastavení w3.css */
.w3-modal{padding-top:100px;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.4.em}h5{font-size:1.2em}h6{font-size:1em}
.w3-button:hover {background-color: rgb(219, 34, 66) !important; color: white !important;}
.w3-sidebar {max-height: 200px !important;}

/* styly pro mapu sítě */
.netmap-link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.netmap-text-sn {
  fill: white;
  font-weight: bold;
}

.netmap-text {
  fill: white;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: top;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}