html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", sans-serif
}

body {
    margin: 0;
    -ms-overflow-style: none;
}

#vertical_progress_span {
    top: 115px;
}

#vertical_progress_wrapper {
    height: 200px;
}

#vertical_progress_mask {
    height: 0px;
}

.process-padding-left {
    padding-left: 13px;
}

.run-list-pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.modal-open {
    backdrop-filter: blur(5px);
    z-index: 999999;
    padding-top: 10px;
}

.dialog-open {
    top: 30%;
}

.modal-ninetynine {
    width: 99% !important;
    height: 99% !important;
}

.modal-header-font {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.modal-header-close {
    font-size: 32px;
}

.modal-header-close-font {
    font-size: 32px;
}

.modal-loader-duration {
    animation-duration: 1s;
}

.modal-content-scroll {
    display: none;
    overflow-y: scroll;
}

.cursor-hand {
    cursor: pointer;
}

.w3-red,
.w3-hover-red:hover {
    color: #fff !important;
    background-color: #2e2e2e !important;
}

.w3-text-red,
.w3-hover-text-red:hover {
    color: #fff !important;
    background-color: #474747 !important;
}

.w3-yellow,
.w3-hover-yellow:hover {
    color: #fff !important;
    background-color: #727272 !important;
}

.w3-orange,
.w3-hover-orange:hover {
    color: #fff !important;
    background-color: #4e4e4e !important;
}

.w3-blue,
.w3-hover-blue:hover {
    color: #fff !important;
    background-color: #797979 !important;
}

.color-text-light-blue,
.color-hover-text-light-blue:hover {
    color: #797979 !important;
}

.w3-green,
.w3-hover-green:hover {
    color: #fff !important;
    background-color: #797979 !important;
}

.w3-text-green,
.w3-hover-text-green:hover {
    color: #fff !important;
    background-color: #797979 !important;
}

.w3-text-blue,
.w3-hover-text-blue:hover {
    color: #9e9e9e !important;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

#model_name {
    background-color: #2e2e2e !important;
    display: block !important;
    width: 100% !important;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
    cursor: pointer;
    color: #FFF;
    z-index: 99999;
}

#page_container {
    max-width: 100%;
}

.circle-progress-value {
    stroke-width: 50px;
    stroke: #666666;
}

.circle-progress-circle {
    font-size: 180px;
    stroke-width: 40px;
    stroke: #2e2e2e;
    fill: #2e2e2e;
}

.circle-progress-text {
    fill: white;
    font-weight: bold;
}

.circle-progress {
    width: 100%;
    height: 100%;
}

[class^=circle-progress]>svg,
[class*=" circle-progress"]>svg {
    width: 100%;
    height: 100%;
}

.circle-display-middle {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.custom-scrollbar {
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
    scrollbar-color: var(--palette-black-alpha-20, rgba(0, 0, 0, .2)) transparent;
    scrollbar-width: thin;
}

.custom-scrollbar.scroll-auto-hide {
    scrollbar-color: transparent transparent
}

.custom-scrollbar.scroll-auto-hide:hover {
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
    scrollbar-color: var(--palette-black-alpha-20, rgba(0, 0, 0, .2)) transparent
}

.custom-scrollbar::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 6px solid transparent;
    background: rgba(0, 0, 0, .2);
    background: var(--palette-black-alpha-20, rgba(0, 0, 0, .2));
    border-radius: 10px;
    background-clip: padding-box
}

.custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}

.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
    min-height: 30px
}

.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
    min-width: 30px
}

.custom-scrollbar.scroll-auto-hide::-webkit-scrollbar-thumb {
    background: transparent;
    background-clip: padding-box
}

.custom-scrollbar.scroll-auto-hide:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    background: var(--palette-black-alpha-20, rgba(0, 0, 0, .2));
    background-clip: padding-box
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .3);
    background: var(--palette-black-alpha-30, rgba(0, 0, 0, .3));
    background-clip: padding-box;
    border: 4px solid transparent
}

.custom-scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.custom-scrollbar-hidden::-webkit-scrollbar {
    width: 0
}

.scroll-hidden {
    overflow: hidden !important;
}

.v-scroll-hidden {
    overflow-y: hidden !important;
}

.h-scroll-hidden {
    overflow-x: hidden !important;
}

a {
    color: #2e2e2e !important;
}

a:hover {
    color: #2e2e2e !important;
}

form {
    border: 3px;
}

input[type=text],
input[type=password] {
    width: 100%;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

h2:hover,
header:hover,
footer:hover {
    cursor: pointer;
}

.login-padding {
    padding: 12px 20px;
}

.white {
    color: #fff !important;
}

.red {
    color: #2e2e2e !important;
}

.red:hover {
    color: #2e2e2e !important;
}

.button-blue {
    color: #fff !important;
    background-color: #3f3f3f !important;
}

.w3-giant {
    font-size: 80px !important;
}

.w3-light-red,
.w3-hover-light-red:hover {
    color: #fff !important;
    background-color: #e6cfcc !important;
}

.w3-text-light-red,
.w3-hover-text-light-red:hover {
    color: #e6cfcc !important;
}

.w3-dark-red,
.w3-hover-dark-red:hover {
    color: #fff !important;
    background-color: #2e2e2e88 !important;
}

.w3-text-dark-red,
.w3-hover-text-dark-red:hover {
    color: #2e2e2e88 !important;
}

.w3-light-green,
.w3-hover-light-red:hover {
    color: #fff !important;
    background-color: #e2e2e2 !important;
}

.w3-text-light-green,
.w3-hover-text-light-green:hover {
    color: #cae0cb !important;
}

.color-light-blue,
.color-hover-light-blue:hover {
    color: #fff !important;
    background-color: #e2e2e2 !important;
}

.color-text-light-blue,
.color-hover-text-light-blue:hover {
    color: #838383 !important;
}

.color-dark-blue,
.color-hover-dark-blue:hover {
    color: #fff !important;
    background-color: #7e7d7d !important;
}

.color-text-dark-blue,
.color-hover-text-dark-blue:hover {
    color: #2e2e2e !important;
}

.w3-dark {
    background-color: #3f3f3f !important;
}

.w3-dark-grey {
    background-color: #363636 !important;
}

.word-wrap {
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.cpu-load {
    float: left;
    width: 33%;
    height: 118px;
    margin-top: 16px;
    padding-top: 54px;
}

.network-traffic {
    margin-top: 16px;
    padding-top: 8px;
    height: 40px;
}

.service-button {
    width: 100%;
}

.service-td {
    padding: 2px !important;
}

.round {
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
}

.round-left {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}

.round-right {
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
}

.capitalize {
    text-transform: capitalize;
}

#vertical_progress_span {
    z-index: 100;
    position: relative;
    color: white;
    font-weight: bold;
}

#vertical_progress_wrapper {
    width: 100%;
    margin-top: -18px;
    margin-bottom: 16px;
    background-color: #2e2e2e;
    border-radius: 14px 14px 14px 14px;
    -webkit-border-radius: 14px 14px 14px 14px;
    -moz-border-radius: 14px 14px 14px 14px;
}

#vertical_progress_mask {
    background-color: #696969;
    border-radius: 14px 14px 0px 0px;
    -webkit-border-radius: 14px 14px 0px 0px;
    -moz-border-radius: 14px 14px 0px 0px;
}

#cpu_load_container {
    height: 150px;
}

#cpu_load_01_minute_avg {
    border-radius: 14px 0 0 14px;
    -webkit-border-radius: 14px 0 0 14px;
    -moz-border-radius: 14px 0 0 14px;
}

#cpu_load_05_minute_avg {
    border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
}

#cpu_load_15_minute_avg {
    border-radius: 0 14px 14px 0;
    -webkit-border-radius: 0 14px 14px 0;
    -moz-border-radius: 0 14px 14px 0;
}