* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-family: 'Inter', sans-serif;
}

:root {
    --menuitem: #FFFFFF;
    --menuitemhover: rgb(255, 216, 0);
    --red: rgb(215, 25, 55);
    --green: rgb(0, 175, 35);
    --blue: rgb(0, 105, 255);
    --orange: rgb(255, 105, 0);
    --yellow: rgb(255, 190, 0);
    --purple: rgb(115, 0, 165);
    --black: rgb(0,0,0);
    --magenta: #dc1467;
    --lightgray: rgb(150, 150, 150);
    --darkgray: rgb(100, 100, 100);
}

.monospace {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 400 !important;
}

.page {
    min-width: 1250px;
    width: 100%;
}

.topnav {
    background-color: #062E3F;
    height: 50px;
}

.subnav {
    background-color: #ffffff;
    border-bottom: 1px solid rgb(224,224,224);
    padding-left: 20px;
    height: 40px;
}

.workspace {
    padding-top: 30px;
    padding-bottom: 50px;
    width: 100%;
    height: calc(100vh - 90px);
    overflow-y: auto;
    background-color: #f3f6f9;
}

.workspace-content {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    min-width: 1250px;
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
}

.workspace::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
}

.workspace::-webkit-scrollbar-thumb {
    background-color: rgb(210,210,210);
}

.content-area {
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.row-left {
    justify-content: left !important;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-25 {
    margin-top: 25px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-25 {
    margin-bottom: 25px;
}

.text-size-big {
    font-size: 1.2em;
}

.text-size-normal {
    font-size: 1em;
}

.text-size-small {
    font-size: 0.9em;
}

.text-size-tiny {
    font-size: 0.7em;
}

.text-weight-light {
    font-weight: 300;
}

.text-weight-normal {
    font-weight: 400 !important;
}

.text-weight-semibold {
    font-weight: 600;
}

.text-weight-bold {
    font-weight: 700;
}

.text-align-left {
    text-align: left !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

.text-align-justify {
    text-align: justify !important;
}

.text-align-right-mobile-center {
    text-align: right !important;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.color-black {
    color: #000000 !important;
}

.color-red {
    color: var(--red) !important;
}

.color-green {
    color: var(--green) !important;
}

.color-blue {
    color: var(--blue) !important;
}

.color-orange {
    color: var(--orange) !important;
}

.color-yellow {
    color: var(--yellow) !important;
}

.color-purple {
    color: var(--purple) !important;
}

.color-magenta {
    color: var(--magenta) !important;
}

.color-lightgray {
    color: var(--lightgray) !important;
}

.color-darkgray {
    color: var(--darkgray) !important;
}

.color-black {
    color: #000000 !important;
}

.color-white {
    color: #ffffff !important;
}

.link {
    text-decoration: none;
    color: var(--blue);
    cursor: pointer;
    user-select: none;
}

    .link:hover {
        text-decoration: underline;
    }

#mobile-menu-close, #mobile-menu-list, #mobile-menu-search, #search-button-go, #search-button-close {
    display: none;
}

.logo {
    color: #ffffff;
    font-weight: 600;
    line-height: 50px;
    font-size: 0.9em;
    user-select: none;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    padding-right: 20px;
}

    .logo a {
        text-decoration: none;
        color: #ffffff;
    }

.menu {
    float: left;
    height: 50px;
}

    .menu .menu-item {
        position: relative;
        float: left;
    }

        .menu .menu-item .menu-item-title {
            display: block;
            height: 50px;
            line-height: 50px;
            font-weight: 600;
            font-size: 0.8em;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
            color: var(--menuitem);
            user-select: none;
        }

            .menu .menu-item .menu-item-title:hover {
                color: var(--menuitemhover);
            }


        .menu .menu-item .menu-item-submenu {
            position: absolute;
            background-color: #FFFFFF;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            top: 50px;
            min-width: 200px;
            border-right: 1px solid rgb(220, 220, 220);
            border-left: 1px solid rgb(220, 220, 220);
            border-bottom: 1px solid rgb(220, 220, 220);
            display: none;
            box-shadow: 0px 0px 10px 0px rgba(150,150,150,0.2);
            z-index: 500;
        }

            .menu .menu-item .menu-item-submenu a {
                white-space: nowrap;
                display: block;
                font-size: 0.8em;
                padding-top: 6px;
                padding-bottom: 6px;
                border-bottom: 1px dotted rgb(230,230,230);
                z-index: 1000;
                cursor: pointer;
                text-decoration: none;
                color: rgb(60,60,60);
            }

                .menu .menu-item .menu-item-submenu a i {
                    margin-right: 10px;
                }

                .menu .menu-item .menu-item-submenu a:hover {
                    color: var(--blue);
                }

                .menu .menu-item .menu-item-submenu a:last-child {
                    border-bottom: none;
                }

.search-bar {
    float: right;
    height: 50px;
    width: 300px;
    margin-right: 20px;
    padding-top: 10px;
}

    .search-bar input {
        display: block;
        width: 100%;
        height: 30px;
        background-color: #0A3A4C;
        border: 1px solid #021f52 !important;
        padding-left: 8px;
        padding-right: 8px;
        color: #ffffff;
        border: none;
    }

        .search-bar input:focus {
            border: 1px solid #f4d7e0 !important;
        }

        .search-bar input::placeholder {
            color: #ffffff;
            opacity: 0.5;
        }



.menu-right {
    float: right;
    height: 50px;
    margin-right: 10px;
}

    .menu-right .menu-item-right {
        position: relative;
        float: left;
        user-select: none;
    }

        .menu-right .menu-item-right .menu-item-right-notification {
            position: absolute;
            top: 10px;
            left: 28px;
            background-color: red;
            color: #ffffff;
            font-size: 0.6em;
            min-width: 12px;
            text-align: center;
            border-radius: 4px;
            padding-left: 2px;
            padding-right: 2px;
        }

        .menu-right .menu-item-right .menu-item-right-title {
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 1.2em;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
            color: var(--menuitem);
        }

            .menu-right .menu-item-right .menu-item-right-title:hover {
                color: var(--menuitemhover);
            }


        .menu-right .menu-item-right .menu-item-right-submenu {
            position: fixed;
            background-color: #FFFFFF;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            top: 50px;
            right: 0px;
            min-width: 250px;
            max-width: 300px;
            height: calc(100vh - 50px);
            border-right: 1px solid rgb(220, 220, 220);
            border-left: 1px solid rgb(220, 220, 220);
            border-bottom: 1px solid rgb(220, 220, 220);
            box-shadow: 0px 0px 10px 0px rgba(150,150,150,0.2);
            overflow-y: auto;
            display: none;
            z-index: 8000;
        }

            .menu-right .menu-item-right .menu-item-right-submenu a {
                white-space: nowrap;
                display: block;
                font-size: 0.8em;
                padding-top: 6px;
                padding-bottom: 6px;
                border-bottom: 1px dotted rgb(230,230,230);
                z-index: 1000;
                cursor: pointer;
                text-decoration: none;
                color: rgb(60,60,60);
            }

                .menu-right .menu-item-right .menu-item-right-submenu a i {
                    margin-right: 10px;
                }

                .menu-right .menu-item-right .menu-item-right-submenu a:hover {
                    color: var(--blue);
                }

                .menu-right .menu-item-right .menu-item-right-submenu a:last-child {
                    border-bottom: none;
                }


        .menu-right .menu-item-right div .menu-item-right-user {
            display: block;
            height: 100px;
            width: 100px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            border-radius: 50%;
            border: 1px solid rgb(224,224,224);
        }

        .menu-right .menu-item-right div .menu-item-right-heading {
            font-weight: 600;
            font-size: 0.9em;
            display: block;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 20px;
            text-align: center;
            font-style: normal;
        }

            .menu-right .menu-item-right div .menu-item-right-heading a {
                font-weight: 300;
            }

        .menu-right .menu-item-right div .notify-bubble {
            white-space: unset;
            height: unset;
            padding-top: 8px;
            padding-bottom: 4px;
            padding-left: 6px;
            padding-right: 6px;
            border-bottom: 1px dotted rgb(220,220,220);
            font-size: 0.8em;
        }

            .menu-right .menu-item-right div .notify-bubble:last-child {
                border-bottom: none;
            }

            .menu-right .menu-item-right div .notify-bubble span {
                color: rgb(100,100,100);
                display: inline-block;
            }


        .menu-right .menu-item-right div .notify-bubble-unread {
            background-color: rgb(242,242,242);
            margin-bottom: 3px;
            margin-top: 3px;
            border: 1px solid rgb(220,220,220);
        }

.leftnav a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    margin-bottom: 10px;
    text-decoration: none;
    color: rgb(110,110,110);
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 6px;
    border: 1px solid rgb(230,230,230);
    user-select: none;
    cursor: pointer;
}

.leftnav img {
    width: 22px;
    height: 22px;
    margin-top: 3px;
}

.leftnav a:hover {
    background-color: #ffffff;
    border: 1px solid rgb(210,210,210);
    color: #000000;
}

.subnav a {
    line-height: 40px;
    font-size: 0.8em;
    color: rgb(100,100,100);
    text-decoration: none;
    display: inline-block;
    margin-right: 15px;
    user-select: none;
    cursor: pointer;
}

    .subnav a i {
        margin-right: 6px;
    }

    .subnav a:hover {
        color: var(--blue);
    }


h1 {
    font-weight: 700;
    color: #000000;
    font-size: 1.2em;
}


    h1 i {
        float: left;
        margin-top: 5px;
        margin-right: 10px;
        height: 35px;
        width: 35px;
        border: 1px solid rgb(200,200,200);
        border-radius: 50%;
        text-align: center;
        font-size: 1.1em;
        padding-top: 2px;
    }

    h1 span {
        display: block;
        font-size: 0.6em;
        color: var(--lightgray);
    }

.workspace-content h1 {
    margin-bottom: 20px;
}

.card {
    background-color: #FFFFFF;
    border: 1px solid rgb(220,220,220);
    height: 100%;
    border-radius: 2px;
}

.card-shadow {
    box-shadow: 0px 0px 15px 0px rgba(0,0,0, 0.1);
    border: 1px solid rgb(230,230,230);
}


.card .card-title, .dialog .card-title {
    border-bottom: 1px solid rgb(220,220,220);
    position: relative;
}

.card .card-title-bg, .dialog .card-title-bg {
    background-color: rgb(245,245,245);
}

.card .card-title a, .dialog .card-title a {
    float: right;
    text-decoration: none;
    cursor: pointer;
    margin-left: 4px;
}

.card .card-title i {
    display: inline-block;
    margin-right: 10px;
}

.card-title a:not(:last-child)::before {
    content: '|';
    display: inline-block;
    margin-right: 4px;
    color: var(--lightgray);
}

.button {
    display: inline-block;
    font-weight: 600;
    padding: 8px;
    min-width: 110px;
    cursor: pointer;
    background-color: rgb(230,230,230);
    border: 1px solid rgb(210,210,210);
    color: rgb(70,70,70);
    text-decoration: none;
    margin-right: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    user-select: none;
    vertical-align: middle;
}

    .button i {
        margin-right: 5px;
    }

    .button img {
        display: inline-block;
        vertical-align: middle;
        height: 16px;
        width: 16px;
    }

    .button:disabled {
        cursor: not-allowed;
        background-color: rgb(240,240,240);
        border: 1px solid rgb(230,230,230);
        color: rgb(200,200,200);
    }

.button-red:enabled:hover,
.button-green:enabled:hover,
.button-blue:enabled:hover,
.button-orange:enabled:hover,
a.button-red:hover,
a.button-green:hover,
a.button-blue:hover,
a.button-orange:hover {
    filter: brightness(120%);
}

.button:enabled:active,
a.button:active {
    filter: brightness(90%);
}

.button-green {
    background-color: var(--green);
    border: 1px solid var(--green);
    color: #FFFFFF;
}

.button-red {
    background-color: var(--red);
    border: 1px solid var(--red);
    color: #FFFFFF;
}

.button-blue {
    background-color: var(--blue);
    border: 1px solid var(--blue);
    color: #FFFFFF;
}

.button-orange {
    background-color: var(--orange);
    border: 1px solid var(--orange);
    color: #FFFFFF;
}


.key-value {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid rgb(220,220,220);
}

    .key-value:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }


.tag {
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
    color: #FFFFFF;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 2px;
}

.tag-red {
    background-color: var(--red);
}

.tag-green {
    background-color: var(--green);
}

.tag-blue {
    background-color: var(--blue);
}

.tag-orange {
    background-color: var(--orange);
}

.tag-yellow {
    background-color: var(--yellow);
}

.tag-gray {
    background-color: var(--lightgray);
}

.tag-purple {
    background-color: var(--purple);
}

.tag-white {
    background-color: #ffffff;
    border: 1px solid var(--lightgray);
    color: var(--darkgray);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

    .table-wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #ffffff;
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background-color: rgb(220,220,220);
    }

.table {
    border-collapse: collapse;
    width: 100%;
}

    .table a {
        cursor: pointer;
        text-decoration: none;
        user-select: none;
    }

    .table img {
        height: 16px;
        width: 16px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
    }

    .table th, .table td {
        padding: 6px;
        border-bottom: 1px solid rgb(240,240,240);
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 11px;
    }

    .table th {
        text-transform: uppercase;
        font-weight: 700;
        border-top: 1px solid rgb(240,240,240);
        background-color: rgb(244,244,244);
    }

.table-hover tr:not(:first-child):hover {
    background-color: rgb(245,245,245);
}

.table-stripes {
}

    .table-stripes tr:nth-child(2n+2) {
        background-color: rgb(245,245,245);
    }

.table-grid {
}

    .table-grid th {
        background-color: rgb(240,240,240);
        border: 1px solid rgb(220,220,220);
    }

    .table-grid td, .table-grid th {
        border: 1px solid rgb(220,220,220);
    }

.table .row-highlight {
    background-color: rgb(255, 255, 220);
}

.table-data {
    border-collapse: collapse;
}

    .table-data a {
        text-decoration: none;
        user-select: none;
        cursor: pointer;
    }

    .table-data i {
        margin-right: 5px;
    }

    .table-data th, .table-data td {
        padding: 4px;
        white-space: nowrap;
        text-align: left;
        font-size: 11px;
    }

    .table-data th {
        padding-right: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .table-data td {
        padding-right: 10px;
    }

.table-data-underline {
}

    .table-data-underline td, .table-data-underline th {
        border-bottom: 1px solid rgb(240,240,240);
    }

.table-data input[type=text] {
    display: inline-block;
    width: 100%;
}


.pagination {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .pagination a {
        display: inline-block;
        font-size: 0.8em;
        padding: 6px;
        background-color: rgb(245,245,245);
        border: 1px solid rgb(220,220,220);
        margin: 1px;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
    }

        .pagination a:hover {
            background-color: rgb(230,230,230);
        }

.alert {
    width: 100%;
    padding: 10px;
    background-color: rgb(214, 231, 255);
    border: 1px solid #2a5298;
    color: #2a5298;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    border-radius: 4px;
}

    .alert i {
        margin-right: 10px;
    }

    .alert a {
        text-decoration: underline;
        cursor: pointer;
        color: #000000;
    }

        .alert a.alert-action {
            float: right;
            color: #000000;
        }

.alert-red {
    background-color: rgb(255, 201, 209);
    border: 1px solid rgb(215, 25, 55);
    color: rgb(215, 25, 55);
}

.alert-green {
    background-color: rgb(212, 255, 221);
    border: 1px solid rgb(0, 175, 35);
    color: rgb(0, 175, 35);
}

.alert-orange {
    background-color: #ffd4b3;
    border: 1px solid rgb(255, 105, 0);
    color: rgb(255, 105, 0);
}

.alert-yellow {
    background-color: rgb(255, 250, 224);
    border: 1px solid rgb(255, 190, 0);
    color: rgb(219, 163, 0);
}


.link-bar {
    display: block;
    text-decoration: none;
    user-select: none;
    padding: 6px;
    border-bottom: 1px solid rgb(240,240,240);
    font-size: 0.8em;
    letter-spacing: 0.05em;
    color: rgb(50,50,50);
    cursor: pointer;
}

    .link-bar i {
        margin-right: 6px;
    }

    .link-bar:hover {
        background-color: rgb(245,245,245);
    }

    .link-bar:last-child {
        border-bottom: none;
    }

input[type=file] {
    width: 100%;
    overflow: hidden;
}

.input-label {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(130,130,150);
    margin-bottom: 5px;
    user-select: none;
}

    .input-label i {
        margin-right: 5px;
    }

input.input,
select.input,
div.input {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgb(180,180,180);
    height: 28px;
    line-height: 35px;
    padding-left: 4px;
    padding-right: 4px;
    letter-spacing: 0.05em;
    color: #000000;
}

div.input {
    line-height: unset;
    padding: 3px;
}

select.input {
    cursor: pointer;
}

    input.input:disabled,
    select.input:disabled {
        cursor: not-allowed;
        background-color: rgb(245,245,250);
    }

    input.input:read-only,
    select.input:read-only {
        cursor: pointer;
    }

    input.input:focus,
    select.input:focus,
    textarea.input:focus {
        border: 1px solid #13c56b;
        background-color: #f2fff9;
    }

.input.input-error, .input.input-error:focus {
    border: 1px solid var(--red);
}

textarea {
    resize: none;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid rgb(180,180,180);
    padding: 10px;
    letter-spacing: 0.05em;
    min-height: 100px;
}

    textarea:focus {
        border: 1px solid #13c56b;
        background-color: #f2fff9;
    }

input[type=checkbox],
input[type=radio] {
    display: inline-block;
    border: 1px solid rgb(150,150,150);
    height: 15px;
    width: 15px;
    margin-right: 2px;
    border-radius: 0;
    cursor: pointer;
    vertical-align: middle;
}

label {
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}

    label:last-child {
        margin-right: 0;
    }

.full-width {
    width: 100%;
}

.dialog {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

.dialog-box {
    display: block;
    position: fixed;
    width: 600px;
    background-color: #FFFFFF;
    top: 100px;
    left: calc(50vw - 300px);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    max-height: 500px;
    overflow-y: auto;
    border-radius: 8px;
}

.dialog-box-small {
    display: block;
    position: fixed;
    width: 300px;
    background-color: #FFFFFF;
    top: 100px;
    left: calc(50vw - 150px);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    border-radius: 8px;
}

.dialog-box-big {
    display: block;
    position: fixed;
    width: 1000px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background-color: #FFFFFF;
    top: 50px;
    left: calc(50vw - 500px);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

.dialog-box-loader {
    display: block;
    position: fixed;
    width: 250px;
    background-color: #FFFFFF;
    top: 150px;
    left: calc(50vw - 125px);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    padding: 12px;
    text-align: center;
    font-size: 0.9em;
    user-select: none;
}

    .dialog-box-loader img {
        height: 24px;
        width: auto;
        margin-right: 8px;
        display: inline-block;
        vertical-align: middle;
    }

.recaptcha {
    width: 100%;
    height: 70px;
    overflow: hidden;
    margin-top: 5px;
    border: 2px solid rgb(220,220,220);
    background-color: rgb(249,249,249);
}

    .recaptcha div {
        width: 200px;
        overflow-x: hidden;
        position: relative;
        top: -1px;
        left: -1px;
    }

.notebook {
    font-size: 0.9em;
    display: block;
}

    .notebook .notebook-entry {
        padding: 6px;
        border-bottom: 1px solid rgb(220,220,220);
    }

        .notebook .notebook-entry:last-child {
            border-bottom: none;
        }

.uppercase {
    text-transform: uppercase !important;
}

.separator {
    font-size: 0.7em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    user-select: none;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px;
    font-weight: 600;
    border-bottom: 1px solid rgb(220,220,220);
}

.output-label {
    border-bottom: 1px solid rgb(220,220,220);
    font-size: 0.75em;
    font-weight: 600;
    padding-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.popup {
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(0,0,0,0.8);
    color: #ffffff;
    display: inline-block;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    border-radius: 12px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    border: 1px solid rgb(220,220,220);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    z-index: 5000;
    user-select: none;
    display: none;
}

    .popup .color-green {
        color: #adff2f !important;
    }

    .popup .color-yellow {
        color: rgb(255,216,0) !important;
    }

.ui-autocomplete {
    position: absolute;
    cursor: default;
    z-index: 7100 !important;
}

.ui-autocomplete-loading {
    background-image: url('/images/core/loader-mini.gif');
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position-x: right;
    background-position-y: center;
}

canvas {
    display: block;
    width: 100%;
    height: auto;
}

hr {
    width: 100%;
    border-bottom: 1px solid rgb(220,220,220);
}

.do-blink {
    animation: blink 1s infinite !important;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}