* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}
html, body { margin: 0; padding: 0; }

.nom { margin: 0; }
.nop { padding: 0; }
.nopl { padding-left: 0; }
.nopr { padding-right: 0; }
.nomp { margin: 0; padding: 0; }

.thin { font-weight: 200; }
.semibold { font-weight: 600; }
.bold { font-weight: 800; }
.italic { font-style: italic; }

.h-100 { height: 100%; }
.w-100 { width: 100%; }
.w-small { width: 60px; }
.w-toggle, .w-100px { width: 100px; }
.w-200px { width: 200px; }

.relative { position: relative; }
.clickable { cursor: pointer; }

.border-radius-xs { border-radius: 4px; }
.border-radius-m { border-radius: 18px; }
.hidden { display: none; }

.smallest-text { font-size: 9px; }
.smaller-text { font-size: 12px; }
.small-text { font-size: 14px; }
.normal-text { font-size: 16px; }
.large-text { font-size: 20px; }
.larger-text { font-size: 24px; }

.grey-text { color: #444444; }
.white-text { color: #ffffff; }
.red1-text { color: #B00000; }
.blue { background-color: #017DC5; }
.white { background-color: #ffffff; }
.bg-realtime { background-color: #5FCE55; }
.bg-online { background-color: #017DC5; }
.bg-offline { background-color: #DE0000; }

.mb-s { margin-bottom: 4px; }
.mb { margin-bottom: 10px; }
.mb-l { margin-bottom: 20px; }

.p-tb-4px { padding-top: 4px; padding-bottom: 4px; }
.p-lr-8px { padding-left: 8px; padding-right: 8px; }
.p-r-8px { padding-right: 8px; }
.p-b-8px { padding-bottom: 8px; }
.p-t-20px { padding-top: 20px; }
.p-b-20px { padding-bottom: 20px; }
.p-l-24px { padding-left: 24px; }

.border-radius-4px { border-radius: 4px !important; }

.progress { margin: 0; background-color: #d7d7d7; }
.progress .determinate { background-color: #017DC5; }

.input-icon {
    width: 32px;
    height: 32px;
    line-height: 36px;
    vertical-align: middle;
}
.input-field input {
    width: 100%;
    height: 31px;
    border: 0;
}
input:focus {
    outline: 0;
}
input::placeholder {
    color: #999999;
    font-weight: 200;
}

input.browser-default {
    border: none;
    border-radius: 4px;
    height: 36px;
    padding: 0 12px;
}

button.no-shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn, .btn-flat {
    border: 0;
    cursor: pointer;
    position: relative;
    filter: brightness(100%);
    transition: all .2s;
    text-transform: inherit;
}
.btn:hover, .btn-flat:hover { filter: brightness(85%); }
.btn:active, .btn-flat:active { filter: brightness(70%); }

.btn .right-icon {
    position: absolute;
    right: 12px;
    top: 10px;
}
.btn-square { padding: 0 8px; }
.btn svg.right,
.btn .svg-right,
.btn-flat svg.right,
.btn-flat .svg-right {
    float: right !important;
    position: relative;
    top: 6px;
    right: -8px;
}

.btn svg.left,
.btn .svg-left,
.btn-flat svg.left,
.btn-flat .svg-left {
    float: left !important;
    position: relative;
    top: 6px;
    left: -8px;
}

.btn svg.left.small,
.btn .svg-left.small,
.btn-flat svg.left.small,
.btn-flat .svg-left.small {
    float: left !important;
    position: relative;
    top: 10px;
    left: -8px;
}
.btn.blue-outline {
    border: 1px solid #017DC5;
    color: #017DC5;
    background-color: white;
}

.switch label input[type=checkbox]:checked+.lever { background-color: #99CBE7; }
.switch label input[type=checkbox]:checked+.lever:after { background-color: #017DC5; }

table th, table td { border-radius: 0; }
table th { font-weight: normal; }

text.highcharts-credits { visibility: hidden; }

.modal .btn-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    background-color: red;
    color: white;
    cursor: pointer;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 28px;
    vertical-align: middle;
    border-radius: 50%;
}

.modal.small-modal {
    max-width: 600px;
}

.noselect {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.h-auto-container {
    display: flex;
    flex-direction: column;
}
.h-auto-container .row {
    width: 100%;
}
.h-auto {
    height: 0px;
    flex: 1 1 auto;
}
