/* Mockup font */
@import url('https://fonts.googleapis.com/css2?family=Flow+Block&display=swap');
.mockup-font {
    font-size: 1.5em;
    font-weight: 700;
}

.mockup-font {
    font-family: 'Flow Block', sans-serif;
    color: #b3b3b3;
}

* {
    font-family: IBM Plex Mono;
}

/* Notification */

.ncf-container {
    font-size: 14px;
    box-sizing: border-box;
    position: fixed;
    z-index: 999999
}

.ncf-container.nfc-top-left {
    top: 12px;
    left: 12px
}

.ncf-container.nfc-middle-right {
    top: 8%;
    right: 12px
}

.ncf-container.nfc-top-right {
    top: 12px;
    right: 12px
}

.ncf-container.nfc-bottom-right {
    bottom: 12px;
    right: 12px
}

.ncf-container.nfc-bottom-left {
    bottom: 12px;
    left: 12px
}

@media (max-width: 767px) {
    .ncf-container {
        left:0;
        right: 0
    }
}

.ncf-container .ncf {
    background: #fff;
    transition: .3s ease;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 30px;
    width: 300px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 12px #999;
    color: #000;
    opacity: .9;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    filter: alpha(opacity=90);
    background-position: 15px!important;
    background-repeat: no-repeat!important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ncf-container .ncf:hover {
    box-shadow: 0 0 12px #000;
    opacity: 1;
    cursor: pointer
}

.ncf-container .ncf .ncf-title {
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 6px;
    word-wrap: break-word
}

.ncf-container .ncf .nfc-message {
    margin: 0;
    text-align: left;
    word-wrap: break-word
}

.ncf-container .success {
    background: #51a351;
    color: #fff;
    padding: 15px 15px 15px 50px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==")
}

.ncf-container .info {
    background: #2f96b4;
    color: #fff;
    padding: 15px 15px 15px 50px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=")
}

.ncf-container .warning {
    background: #f87400;
    color: #fff;
    padding: 15px 15px 15px 50px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=")
}

.ncf-container .systemUpdate {
    height: 120px;
    width: 500px;
    background: #B33951;
    color: #fff;
    padding: 15px 15px 15px 50px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=")!important
}

.ncf-container .error {
    background: #bd362f;
    color: #fff;
    padding: 15px 15px 15px 50px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=")!important
}

.ncf-container button {
    position: relative;
    right: -.3em;
    top: -.3em;
    float: right;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: .8;
    line-height: 1;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0
}

.ncf-container button:hover {
    opacity: 1
}

/* Navigation bar */

ul.horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    border-radius: 30px;
    background-color: #e0e1dd;
}

ul.horizontal li {
    border-radius: 30px;
    float: left;
    border: 1px solid #adadad;
    margin-right: 12px;
}

ul.horizontal li a {
    border-radius: 30px;
    display: inline-block;
    font-size: 110%;
    color: #666;
    padding: 23px 16px;
    text-decoration: none;
}

ul.horizontal li a:hover:not(.active) {
    background-color: #cfcfcf;
    color: #000000;
}

ul.horizontal a.active {
    background-color: #415a77;
    color: #ffffff;
    font-weight: bold;
}

.topright {
    position: absolute;
    top: 0px;
    right: 16px;
    font-size: 18px;
}

/* Dropdown menu */
.dropbtn {
    border: none;
    background-color: transparent;
    font-size: 200%;
    height: 100%;
    position: inherit;
    display: inherit;
    cursor: pointer;
    list-style-type: none;
}

.dropdown {
    position: inherit;
    display: inherit;
    float: right;
    height: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    z-index: 1;
}

.grid-container {
    position: absolute;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    background-color: #f1f1f1;
    z-index: 1;

}

.dropdown:hover .grid-container {
    display: grid;
}

.grid-container p:hover {
    margin: 0;
    padding: 0;
    background-color: #cfcfcf;
}

/* HandsonTable */

.handsontable {
    font-family: IBM Plex Mono;
}

.ht_master .wtHolder {
    overflow: auto;
}

.handsontable th {
    background-color: #e0e1dd;
    color: #000000;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.handsontable thead th span.colHeader {
    text-align: center;
    width: 110px;
    vertical-align: middle;
    display: inline-block;
    white-space: pre-line;
}

.handsontable .htAutocompleteArrow {
    font-size: 20px;
    color: #3150db;
}

.handsontable th.beforeHiddenColumn:after {
    content: "◀";
    right: 1px;
    font-size: 15px;
    color: #a6e3a1;
}

.handsontable th.afterHiddenColumn:before {
    content: "▶";
    left: 1px;
    font-size: 15px;
    color: #a6e3a1;
}

.handsontable .btnRenderer {
    white-space-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}

.handsontable .scrollableCell {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 10%
}

/* Spinning animation */

.loader {
    display: inline-block;
    position: relative;
    transition: padding-right 0.3s ease;
}

.loader.spinning {
    padding-right: 50px;
}

.loader.spinning:before {
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 50%;
    right: 6px;
    top: 50%;
    position: absolute;
    border: 2px solid darken(#212121, 40%);
    border-right: 3px solid #27ae60;
    animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}

.loader.spinning:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0 1px darken(#212121, 10%);
    position: absolute;
    border-radius: 50%;
    animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}

@keyframes rotate360 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes exist {
    100% {
        width: 30px;
        height: 30px;
        margin: -8px 5px 0 0;
    }
}

/* Pretty Multi-select tag */

.form_label {
    position: relative;
    min-height: 88px;
}

.form_text {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.04em;
    color: #686ea1;
}

.form_text:after {
    content: "*";
    position: relative;
    top: 0;
    font-size: 13px;
    color: #f00;
}

.form_label input,
.field_multiselect {
    position: relative;
    width: 100%;
    display: block;
    min-height: 46px;
    border: 1px solid #cdd6f3;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 12px 40px 10px 16px;
    font-size: 14px;
    color: #a8acc9;
    outline-color: #cdd6f3;
}
.form_label input::placeholder,
.field_multiselect::placeholder {
    color: #a8acc9;
}
.form_label input:hover,
.field_multiselect:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
}
.form_label input:focus,
.field_multiselect:focus {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
}

.field_multiselect_help {
    position: absolute;
    max-width: 100%;
    background-color: #fff;
    top: -48px;
    left: 0;
    opacity: 0;
}

.form_label input.error {
    border-color: #eb5757;
}

.error_text {
    color: #eb5757;
}

.field_multiselect {
    padding-right: 60px;
}
.field_multiselect:after {
    content: "";
    position: absolute;
    right: 14px;
    top: 15px;
    width: 6px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='6' height='16' viewBox='0 0 6 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L6 5H0L3 0Z' fill='%23A8ACC9'/%3E%3Cpath d='M3 16L6 11H0L3 16Z' fill='%23A8ACC9'/%3E%3C/svg%3E") 50% 50% no-repeat;
}

.multiselect_block {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 20%;
}

.field_select {
    position: relative;
    top: calc(100% - 2px);
    left: 0;
    width: 100%;
    border: 2px solid #cdd6f3;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    box-sizing: border-box;
    outline-color: #cdd6f3;
    z-index: 6;
}

.field_select[multiple] {
    overflow-y: auto;
}

.field_select option {
    display: block;
    padding: 8px 16px;
    width: calc(370px - 32px);
    cursor: pointer;
}
.field_select option:checked {
    background-color: #eceff3;
}
.field_select option:hover {
    background-color: #d5e8fb;
}

.field_multiselect button {
    position: relative;
    padding: 7px 34px 7px 8px;
    background: #ebe4fb;
    border-radius: 4px;
    margin-right: 9px;
    margin-bottom: 10px;
}
.field_multiselect button:hover, .field_multiselect button:focus {
    background-color: #dbd1ee;
}
.field_multiselect button:after {
    content: "";
    position: absolute;
    top: 7px;
    right: 10px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E") 50% 50% no-repeat;
    background-size: contain;
}

.multiselect_label {
    position: absolute;
    top: 1px;
    left: 2px;
    width: 100%;
    height: 44px;
    cursor: pointer;
    z-index: 3;
}

.field_select {
    display: none;
}

input.multiselect_checkbox {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border: none;
    opacity: 0;
}

.multiselect_checkbox:checked ~ .field_select {
    display: block;
}

.multiselect_checkbox:checked ~ .multiselect_label {
    width: 40px;
    left: initial;
    right: 4px;
    background: #ffffff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E") 50% 50% no-repeat;
}

.multiselect_checkbox:checked ~ .field_multiselect_help {
    opacity: 1;
}

/* Toggle button */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #5CFF6D;
}

input:focus + .slider {
    box-shadow: 0 0 1px #5CFF6D;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Exclude checkbox */

.customcheck {
    position: relative;
}

.customcheck input {
    display: none;
}

.customcheck input~.checkmark {
    background: #3d8a00;
    width: 25px;
    display: inline-block;
    position: relative;
    height: 25px;
    border-radius: 2px;
}


.customcheck input:checked~.checkmark {
    content: '';
    background: #ee0b0b;
    width: 25px;
    display: inline-block;
    position: relative;
    height: 25px;
    border-radius: 2px;
    vertical-align:middle;
    margin-right:10px;
}

.customcheck input~.checkmark:after {
    display: none;
}

.customcheck input~.checkmark:before {
    content: '';
    position: absolute;
    background: none;
    border: 2px solid #fff;
    border-bottom: 0;
    border-right: 0;
    width: 6px;
    top: 2px;
    left: 9px;
    height: 13px;
}

.customcheck input~.checkmark:after {
    transform: rotate(135deg);
    z-index: 1;
}

.customcheck input~.checkmark:before {
    transform: rotate(-135deg);
    z-index: 1;
}

.customcheck input:checked~.checkmark:after,
.customcheck input:checked~.checkmark:before {
    display: block;
    content: '';
    background: #fff;
    border: none;
    position: absolute;
    width: 2px;
    height: 16px;
    left: 12px;
    top: 4px;
}

/* Search text input */

.text-field__input {
    min-width: 250px;
    field-sizing: content;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #bdbdbd;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.text-field__input::placeholder {
    color: #212529;
    opacity: 0.4;
}

.text-field__input:focus {
    color: #212529;
    background-color: #fff;
    border-color: #bdbdbd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
}

/* Custom */

h3.headers {
    padding: 0;
    margin: 0;
}

h3.plain_header {
    display: inline;
    font-weight: 100;
    padding: 0;
    margin: 0;
}

h3.bold_inline {
    display: inline;
    padding: 0;
    margin: 0;
}

h3.plain_inline {
    font-weight: 100;
    display: inline;
    padding: 0;
    margin: 0;
}

h3.summaryStat {
    font-size: 20px;
    font-weight: normal;
    margin: 5px;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

div.inline_alignment {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

button.navbarButton {
    border: none;
    background-color: transparent;
    font-size: 200%;
    height: 100%;
    position: inherit;
    display: inherit;
    cursor: pointer;
}

button.navbarButton.locked {
    opacity: 0.5;
    cursor: wait;
}

div.buttonDiv {
    position: inherit;
    display: inherit;
    float: right;
    height: 10px;
}

div.parent {
    padding: 1rem;
}

div.inline-child {
    display: inline-block;
    vertical-align: top;
}

div.inline-child-middle {
    display: inline-block;
    vertical-align: middle;
    align-items: center;
    text-align: center;
}

p.rows {
    text-align: center;
    vertical-align: middle;
}

p.rows-copyPointer:hover {
    cursor: pointer;
}

button.rowButton {
    border: none;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
}

div.login-block {
    text-align: center;
}

div.input-box {
    position: relative;
    padding-bottom: 20px;
}

input.login {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 11px;
    width: 300px;
}

label.login-label {
    font-size: 145%;
    position: relative;
    top: -10px;
    left: 10px;
    background: #fff;
    padding: 0 5px;
}

button.login-btn {
    position: relative;
    border: none;
    background-color: transparent;
    font-size: 200%;
    cursor: pointer;
}

h1.login-header {
    text-align: center;
}

h2.login-header {
    position: relative;
}

div.alertStat {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
}

button.alertStat {
    margin-top: 10px;
    display: inline;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    color: #000000;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 250ms;
    touch-action: manipulation;
    padding: 6px;
    margin-right: 3px;
}

button.alertStat:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: #000000;
    transform: translateY(-1px);
}

button.alertStat.selected {
    border: solid 3px #000000;
    background-color: #415a77;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    color: #ffffff;
    transform: translateY(0);
    padding: 3px;
}

span.alertStatMain, span.alertStat {
    color: inherit;
    font-size: 15px;
    font-weight: 600;
}

span.alertStatMain {
    margin: 5px;
}

span.alertStat {
    font-weight: bold;
    margin-left: 5px;
}

span.boldNum {
    font-weight: bold;
}

.tooltip {
    display: inline-block;
    position: relative;
}

.tooltip i{
    display: inline-block;
    position: relative;
}

.tooltip i:hover {
    cursor: pointer;
}

.tooltip span {
    visibility: hidden;
    width: 35em;
    background-color: #e0e1dd;
    border: solid 3px #000000;
    color: #000000;
    text-align: left;
    font-size: medium;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 999999;
    top: -1em;
    left:  100%;
    margin-left:1em;
    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip p {
    margin: 5px;
}

.tooltip a {
    font-weight: bold;
}

.tooltip input {
    display:none;
}

.tooltip span:hover {
    cursor: text;
}

.tooltip input:checked+span {
    visibility: visible;
    opacity: 1;
    z-index: 99999;
}