/*************************
        Global Styles
*************************/
* {
    outline: none;
}

:root {
    --color-paradise-pink: #F53D6B;
    --color-choral: #FF7D52;
    --color-mango: #FFC233;
    --color-emerald: #2DCA72;
    --color-blue-jeans: #00ACFF;
    --color-majorelle-blue: #7047EB;
    --color-purple-pizzazz: #F75FDE;
    --fixed-containers-width: 140px;
    --max-alert-container-height: 650px;
    --nav-bg-color: rgba(0, 0, 0, 0.95);
    --nav-container-height: 51px;
    --nav-container-width: 120px;
}

::-webkit-scrollbar {
    width: 12px;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background: dodgerblue;
    min-height: 30px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #eee;
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Noto Sans JP', 'Helvetica', Arial, sans-serif;
    color: white;
}

button {
    cursor: pointer !important;
}

insignia, count {
    display: inline;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

#global-bg {
    background-image: url('/img/panorama.svg');
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

#global-bg-dampen {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.45);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Noto Sans JP', 'Helvetica', Arial, sans-serif;
}

label {
    font-weight: 400;
}

label[for] {
    cursor: pointer;
}

img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

iframe {
    border-radius: 5px;
    border: none;
}

ul.no-list-style {
    list-style: none;
}

/* Custom HTML Elements */
ib {
    display: inline-block;
}

vertical-rule {
    display: block;
    width: 1px;
    height: 28vh;
    background: black;
    margin: 0 auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: black;
}


.widget {
    border: 1px solid #cfcfcf;
    margin-top: 0px;
    margin-bottom: 30px;
    background: #ddddddc2;
    color: black;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    padding: 25px;
}

    .widget .widget-header {
        background-color: #357ebd;
        color: #FFFFFF;
        background-image: linear-gradient(top, #fcfcfc, #e8e8e8);
        border-radius: 2px 2px 0 0;
        border-bottom: 1px solid #cfcfcf;
        height: 42px;
        padding: 0px 15px;
        line-height: 42px;
    }

    /* line 171, ../../app/styles/main.scss */
    .widget .widget-body {
        padding: 15px;
        border-bottom: 1px solid #b3b3b3;
        border-radius: 0 0 2px 2px;
    }


.hide-x-overflow {
    overflow-x: hidden;
}

.emoji {
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
    font-weight: 100;
}

#__cosmos_version {
    display: none;
    padding: 5px;
    position: fixed;
    top: 7.5px;
    left: 500px;
    background: linear-gradient(to right, #1565C0, #b92b27);
    color: white;
    font-size: 1em;
    box-shadow: 1px 1px 2px dodgerblue, 1px -1px 2px dodgerblue;
    z-index: 9999991;
    animation: blinker 0.75s steps(120, start) infinite;
}

/* Custom Date interaction */

input[type="date"] {
    cursor: pointer;
    position: relative;
}

    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
    input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
    }

    /* adjust increase/decrease button */
    input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
    }

/* End Custom Date interaction */

footer {
    display: none;
    font-size: 1.15em;
    float: none;
    clear: both;
    position: relative;
    bottom: 10px;
    left: 0;
    right: 0;
}

.body-content {
    clear: both !important;
    position: relative;
    top: 5%;
}

.row {
    float: none !important;
    clear: both !important;
}

.content-section {
    padding-left: 0;
    padding-right: 0;
}

.disp-block {
    display: block;
}

/* Section Navigation */
.sectionNavigationToggle {
    cursor: pointer;
    position: fixed;
    top: var(--nav-container-height);
    left: 0px;
    width: 120px;
    background: #0354a2;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

.sectionNavigationToggle:hover {
    background: #0080fd;
}

.sectionNavigation {
    position: fixed;
    top: calc(var(--nav-container-height) + 29px);
    left: 0px;
    width: 120px;
    background: linear-gradient(to right, #004691, #225989);
    height: 92vh;
    max-height: 92vh;
    overflow-y: auto;
}

    .sectionNavigation ul {
        list-style: none;
        padding-inline-start: 0;
        padding: 5px;
        margin-top: 20px;
    }

        .sectionNavigation ul li {
            padding: 5px;
        }

            .sectionNavigation ul li:not(:last-child) {
                margin-bottom: 10px;
            }

            .sectionNavigation ul li hr {
                border-top: 1px solid #eee;
                width: 100%;
            }

            .sectionNavigation ul li.navHeader {
                font-weight: bold;
                color: white;
                font-size: 1.3em;
            }

                .sectionNavigation ul li.navHeader:not(:first-child) {
                    margin-top: 20px;
                }

            .sectionNavigation ul li.nav {
                cursor: pointer;
                background: #00709a;
                color: white;
                border: 1px solid rgba(0,0,0,0.3);
                box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
                margin-bottom: 15px;
            }

                .sectionNavigation ul li.nav[disabled] {
                    cursor: not-allowed;
                    background: grey;
                }

                .sectionNavigation ul li.nav:not([disabled]):hover {
                    background: #06b4f5;
                }

.navigation-content {
    position: relative;
    display: none;
    width: 95%;
    margin-left: 110px;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 18px;
}

/* Ordering of highlights is important for CSS Specificity */
.purp-drank-highlight {
    background: rgb(147,112,219) !important;
    color: white !important;
}

.gray-highlight {
    background: lightgrey !important;
    color: black;
}

.gray-color {
    color: lightgrey;
}

.purp-drank-color {
    color: rgb(147,112,219) !important;
}

.purple-color {
    color: rgb(225, 119, 251) !important;
}

.pink-color {
    color: hotpink !important;
}

.steelblue-color {
    color: steelblue !important;
}

.red-color {
    color: red !important;
}

.maroon-color {
    color: maroon !important;
}

.lightred-color {
    color: #ff5a5a !important;
}

.orangered-color {
    color: orangered !important;
}


.lightgreen-color {
    color: lightgreen !important;
}

.limegreen-color {
    color: limegreen !important;
}

.green-color {
    color: green !important;
}

.darkgreen-color {
    color: darkgreen !important;
}

.blue-color {
    color: blue !important;
}

.lightblue-color {
    color: lightblue !important;
}

.lightskyblue-color {
    color: lightskyblue !important;
}

.dodgerblue-color {
    color: dodgerblue !important;
}

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

.dodgerblue-highlight {
    background: dodgerblue !important;
    color: white !important;
}

.green-highlight {
    background: green !important;
    color: white !important;
}

.lightgreen-highlight {
    background: lightgreen !important;
    color: black !important;
}

.yellow-highlight {
    background-color: yellow !important;
    color: black !important;
}

.white-highlight {
    background-color: white !important;
    color: black !important;
}

.yellow-highlight-ni {
    background: yellow !important;
    color: black !important;
}

.red-highlight-ni {
    background: firebrick !important;
    color: white !important;
}

    .red-highlight-ni a:not(.btn) {
        color: #05c6ff !important;
    }

.red-highlight {
    background: firebrick !important;
    color: white !important;
}

.cream-highlight {
    background: #fffdd0 !important;
}

.red-shadow {
    box-shadow: 1px 1px 4px red, -1px 1px 4px red;
}

.blue-highlight {
    background-color: lightblue !important;
    color: black !important;
}

.lightskyblue-highlight {
    background-color: lightskyblue !important;
    color: black !important;
}

.pastelred-highlight {
    background: #ffb5b5 !important;
    color: black !important;
}

.lightteal-highlight {
    background: #02b8b8 !important;
    color: white !important;
}

.blue-highlight:hover {
    color: black !important;
}

.blink {
    animation: blinker 0.9s ease infinite alternate;
}

/* Custom Icon */

.mp-info-circle, .mp-info-circle-ib {
    display: block;
    cursor: help;
    height: 20px;
    width: 20px;
    background: dodgerblue;
    color: white;
    border-radius: 50%;
    position: relative;
    font-weight: bold;
    padding: 2px;
    margin: 0 auto;
    font-size: 14px;
    box-shadow: -1px 1px rgba(0,0,0,0.2);
}

.mp-info-circle-ib {
    display: inline-block;
}

    .mp-info-circle::before, .mp-info-circle-ib::before {
        content: "?";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.mp-info-icon {
    position: absolute;
    color: white;
    top: 10%;
    left: 25%;
    font-size: 0.8em;
}

/* Subview Implementation */

.subview {
    display: none;
    position: fixed;
    top: 10%;
    left: 0;
    right: 0;
    border: none;
    border-radius: 5px;
    width: 95%;
    height: 80%;
    padding-left: 10px;
    padding-right: 10px;
    background: #dcdcdc;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #333;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.25em;
    z-index: 999;
}

    .subview.subview-dark {
        background: #333333f7;
        color: white;
    }

.subviewContent {
    margin-top: 2%;
    height: 80%;
    overflow-y: auto;
    overflow-x: hidden;
}

.subviewContent table thead tr th {
    text-align: center;
}

.subviewTable {
    background: #fff;
    color: black;
    width: 100%;
    padding: 0.5em 0;
    overflow: scroll;
    font-size: 16px;
}

.subviewTable:not(.solid-color-subview-table) > tbody > tr:nth-child(even) {
    background: #fafafa;
}

.subviewTable > thead > tr > th, .subviewTable > tbody > tr > th {
    padding: 0.5em;
    box-sizing: border-box;
    border-bottom: solid 3px #ddd;
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    background: #357ebd;
    color: white;
    font-weight: 100;
}

.subviewTable > tbody > tr {
    box-shadow: 1px 1px 2px #fff;
}

.subviewTable > tbody > tr > td {
    padding: 0.25em;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-bottom: solid 3px #ddd;
    border-top: solid 1px #ddd;
    word-break: break-word;
}

.subviewX {
    position: absolute;
    top: 1%;
    right: 0.5%;
    font-size: 1.3em;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: gray;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    outline: none;
    width: 1.2em;
}

    .subviewX:hover {
        color: lightgrey;
    }

#webInfoSubview, #actNotesSubview {
    height: 90%;
    top: 8%;
    background: #333333f0;
    color: white;
}

#webInfoSubviewX {
    right: 1%;
}

#webInfoRefresh {
    position: absolute;
    top: 1%;
    right: 3%;
    font-size: 1.3em;
    outline: none;
    width: 42px;
    border: none;
    background: transparent;
}

#searchACTNotesGlobal {
    font-size: 12px;
}

#actNotesSubview {
    text-align: left;
}

#webInfoSubview .title, #actNotesSubview .title {
    margin-top: 15px;
    text-align: center;
}

#actNotesSubview .newActNote-textareaGlobal {
    width: 100%;
    height: 400px;
    font-size: 14px;
    background: white;
    color: black;
}

#actNotesSubviewContainerGlobal {
    overflow-y: auto;
    max-height: 72vh;
    width: 64%;
}

#webInfoSubviewContent {
    margin-top: 2%;
    height: 82%;
    max-height: 82%;
    overflow: hidden;
}

#actNotesSubview .newActNote-btn {
    margin-top: 20px;
    vertical-align: bottom;
}

#actNotesSubview .subviewContent {
    height: 71%;
}

#actNotesSubviewTableGlobal {
    font-size: 12px;
    text-align: left;
}

    #actNotesSubviewTableGlobal tbody tr td {
        padding: 5px;
        vertical-align: top;
    }


        #actNotesSubviewTableGlobal tbody tr td section {
            height: 180px;
            max-height: 180px;
            overflow-y: auto;
        }

        #actNotesSubviewTableGlobal tbody tr td a[name="_MailAutoSig"]:hover {
            text-decoration: none;
            color: #428bca;
        }

        #actNotesSubviewTableGlobal tbody tr td img {
            max-width: 100%;
            max-height: 128px;
        }

#webInfo {
    width: 100%;
    height: 100%;
}

/* Creatives */
#postageReceiptsSubview, #artSubview {
    width: 60%;
    height: 90%;
    top: 8%;
    background: #333333de;
    backdrop-filter: blur(10px);
    color: white;
}

#postageReceiptsSubview .pr-sideNav, #postageReceiptsSubview .pr-pdfView,
#artSubview .pr-sideNav, #artSubview .pr-pdfView, #artSubview .art-download {
    display: inline-block;
}

#postageReceiptsSubview .pr-sideNav, #artSubview .pr-sideNav {
    width: 26%;
    position: absolute;
    top: 30px;
    left: 30px;
}

#artSubview .art-download {
    width: 20%;
    position: absolute;
    bottom: 60px;
    left: 30px;
}

#postageReceiptsSubview .pr-pdfViewContainer,
#artSubview .pr-pdfViewContainer {
    width: 70%;
    height: 90%;
    position: absolute;
    top: 30px;
    right: 30px;
}

.previous-creatives {
    display: block;
    width: 40px;
    margin: 0 auto;
}

#art-fileLastUpdated {
    color: lightgreen;
}

/* Status Bar */
.statusbarOuter {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-left: 20px;
    border: 1px inset #333;
    width: 300px;
    height: 21px;
    padding: 5px;
    background: #333;
    box-shadow: 1px 1px 1px 1px #000;
}

.statusbarInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 1%;
    height: 20px;
    z-index: 99;
    box-shadow: 1px 1px 1px 1px #000;
    background: linear-gradient(to bottom, #214bf2 0%,#6093e5 43%,#6093e5 54%,#214bf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.statusbarText {
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 999;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px #000;
}

.dealer-buttons-below-dealername {
    margin-top: 5px;
}

.dealer-web-info-btn, .dealer-act-notes-btn {
    font-size: 11px;
}

.clear {
    float: none !important;
    display: block !important;
}

.alert {
    font-size: 1.75em;
}

    .alert > .glyphicon {
        padding-left: 10px;
        position: relative;
        top: 4px;
    }

    .alert > .dl-horizontal dt {
        white-space: normal;
    }

h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
}

h2 {
    font-weight: bold;
    margin: 0;
}

p {
    margin: 0 !important;
}

hr {
    border-top: 1px solid black;
}

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

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

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

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

.text-separator {
    font-size: 2em;
    color: lightblue;
}

input[type="text"], input[type="date"] {
    color: #000;
    padding: 5px;
    font-size: 1.25em;
}

input[type=submit] {
    margin-top: 2.5%;
    width: 60%;
    font-size: 1.5em;
}

select {
    padding: 5px;
}

.select2-results__options {
    box-shadow: 1px 1px 4px #1e90ffc7;
}

    .select2-results__options li {
        background: #333333d9;
        color: white;
    }

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd;
    color: black;
}

table caption {
    text-align: center;
    font-size: 2em;
    color: #fff;
}

/* Combo Boxxr styles */
.cbxr[readonly] {
    cursor: pointer;
    background-color: white;
}

.cbxr-btn {
    display: none;
    position: absolute;
    margin-top: 0.25em;
    margin-left: -1em;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    background: #357ebd;
    color: #fff;
    font-size: 2em;
    padding: 2px 0 2px 0;
    height: 0.75em;
    line-height: 0.5em;
    z-index: 1;
}

.cbxr-input {
    position: relative;
    z-index: 0;
}

.cbxr-list {
    display: none;
    list-style-type: none;
    text-align: left;
    position: absolute;
    font-size: 1em;
    z-index: 444;
    background: #fff;
    color: #000;
    padding: 5px;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,0.8);
    border-radius: 0 0 5px 5px;
    height: 18em;
    width: 350px;
    overflow-y: auto;
}

    .cbxr-list li {
        cursor: pointer;
        padding: 5px;
    }

        .cbxr-list li:hover {
            background-color: #357ebd;
            color: #fff;
        }

.cbxr-selected {
    background-color: #357ebd;
    color: #fff;
}

.job-input {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.5);
    width: 275px;
}

.job-info-quick-snapshot {
    text-decoration: underline;
    color: blue;
}

/* Loader */

.loadingWrapper {
    position: fixed;
    top: 50px;
    height: 95vh;
    background: rgba(0, 0, 0, 0.6);
    color: black;
    z-index: 1000;
    display: none;
}

#subviewloaderWrapper {
    position: fixed;
    top: 0;
    height: 100vh;
    background: rgba(0, 0, 0, .45);
    z-index: 10000000;
    display: none;
}

#exportWrapper {
    z-index: 1111111;
}

.loaderTextWrapper {
    background-color: #333;
    color: white;
    float: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 5px 9px 8px #262525;
    padding: 2% 0;
    width: 35%;
    border-radius: 20px;
}

.loadingMessage {
    font-size: 2.5em;
    opacity: 1;
}

#backgroundBlackout {
    display: none;
    position: fixed;
    top: var(--nav-container-height);
    height: 95vh;
    background: rgb(0 0 0 / 90%);
    z-index: 888;
}

.btn-primary {
    background-color: #66a6d9;
}

.btn-purp-drank {
    /*background-color: rgb(105, 64, 189);*/
    background-color: rgb(128 83 221);
    color: white;
}

    .btn-purp-drank:visited, .btn-purp-drank:focus, .btn-purp-drank:hover, .btn-purp-drank:active {
        background-color: rgb(82, 50, 148);
        color: white;
    }

.btn.btn-paradise-pink {
    background-color: var(--color-paradise-pink);
    color: white;
}

    .btn.btn-paradise-pink:visited, .btn.btn-paradise-pink:focus, .btn.btn-paradise-pink:hover, .btn.btn-paradise-pink:active {
        background-color: var(--color-paradise-pink);
        color: white;
    }

.btn-marjorelle-blue {
    background-color: var(--color-majorelle-blue);
    color: white;
}

    .btn-marjorelle-blue:visited, .btn-marjorelle-blue:focus, .btn-marjorelle-blue:hover, .btn-marjorelle-blue:active {
        background-color: rgb(84, 46, 161);
        color: white;
    }

.btn-deep-blue {
    background-color: #0c12e0;
    color: white;
}

    .btn-deep-blue:visited, .btn-deep-blue:focus, .btn-deep-blue:hover, .btn-deep-blue:active {
        background-color: #0308c3;
        color: white;
    }

.btn-pink {
    background-color: rgb(222, 94, 216);
    color: white;
}

.btn-pink:visited, .btn-pink:focus, .btn-pink:hover, .btn-pink:active {
    background-color: rgb(205, 76, 199);
    color: white;
}

.btn-text-with-icon {
    position: relative;
    top: -5px;
    left: 3px;
    font-size: 1.15em;
    padding-left: .5%;
}

.form-btn-text-with-icon {
    padding-left: 1.5%;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #d5d5d5;
}

/* Datatables & Forms*/

.noLeftPadding {
    padding-left: 0;
}

.noRightPadding {
    padding-right: 0;
}

.dataTables_wrapper, form, .content-wrapper {
    background-color: #fff !important;
    color: black;
    padding: 2%;
    border: 1px solid #ddd;
}

#dataTable {
    /*display:none;*/
    width: 100% !important;
}

.dataTable {
    padding: 0.5em 0;
}

.dataTable thead th {
    border-bottom: solid 3px #ddd;
    padding: .5%;
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

.dataTable tbody td {
    padding: .5%;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}

.dataTable-with-button {
    margin-top: 2%;
}

.btnCol {
    min-width: 75px;
}


.header-col {
    font-weight: bold;
}

.hiddenCol, .hidden, .is-hidden {
    display: none;
}

.no-table-header thead tr th {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ddd;
}

.no-row-select tbody tr:hover {
    background-color: #fff !important;
    color: #000 !important;
    cursor: default !important;
}

td .fa {
    display: block;
    text-align: center;
}

td .fa-plus-circle {
    color: #47a447 !important;
}

td .fa-minus-circle {
    color: #d2322d !important;
}

.button-form-wrapper {
    clear: both;
}

form .button-row {
    padding-top: .5%;
}

.form-section {
    border-bottom: 1px solid #ddd;
    padding-bottom: 3%;
}

.form-inline .row {
    margin-left: 0;
    margin-right: 0;
}

.form-inline .form-group {
    padding-left: 0;
    padding-right: 2%;
    padding-bottom: .5%;
    margin-left: 0;
    max-width: 50%;
}

.form-group {
    /*width: 100%;*/
    margin: 5px 0 5px 0;
    padding: 5px;
    float: left;
}

.form-group input {
    max-width: 100%;
}

.form-group label {
    text-align: left;
    padding-right: .5%;
}

.form-group input[type=checkbox] {
    position: relative;
    top: 2px;
}

.form-radio-group {
    padding: .5% 0;
    margin-top: 10px
}

.form-radio-group .radio-label-wrapper {
    width: 10%;
    float: left;
}

.form-radio-group .radio {
    width: 5%;
}

.form-radio-group .radio label {
    padding-right: 1%
}

.hidden-job-table {
    border: 1px solid rgba(0,0,0,0.8);
    width: 100%;
}

.hidden-job-table > thead > tr > th, .hidden-job-table > tbody > tr > td {
    border: 1px solid rgba(0,0,0,0.3);
}

.hidden-job-table > tbody > tr:nth-child(odd) {
    background: #ccc;
}

.hidden-job-table > tbody > tr:nth-child(odd):hover {
    text-shadow: none !important;
}

.hidden-job-table > tr > td, .hidden-job-table > tr > th {
    border: 1px solid rgba(0,0,0,0.3) !important;
}

.hidden-job-table > thead > tr > th {
    color: black !important;
    background: rgba(0,100, 220, 0.2) !important;
    font-weight: bold !important;
}

.section-header {
    font-size: 2.5em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.loginfield {
    padding-left: 0;
}

/*Sub Navigation*/

.nav nav-pills {
    cursor: pointer;
}

.nav-pills li a {
    color: #999;
    font-size: 1.25em;
}

.nav-pills li a:hover {
    cursor: pointer;
    color: #004f84;
}

.tg-active {
    background: rgba(53, 126, 189, 0.3);
}

.photos-icon {
    cursor: help;
    display: inline-block;
    height: 28px;
    width: auto;
}

/* IDs */

#photoPreview {
    display: none;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -47%);
    width: 44vw;
    height: 92vh;
    background: rgba(0,0,0,0.95);
}

#photoPreview img {
    display: block;
    max-width: 100%;
    height: 96%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#imagePreviewContainer {
    display: none;
    position: fixed;
    top: 46px;
    left: 0;
    margin: 0 auto;
    text-align: center;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    width: 100vw;
    background: #333;
    padding: 4vh 4vw 10vh;
    z-index: 999;
}

#imagePreview {
    max-width: 92vw;
}

#imagePreviewClose {
    position: fixed;
    top: 5.5%;
    left: 4px;
    background: transparent;
    border: transparent;
    color: white;
    font-size: 32px;
}

#imagePreviewHeader {
    color: white;
    font-size: 28px;
    margin-bottom: 20px;
}

#TrafficForm {
    display: inline-block;
}


#loginForm .col-md-8 {
    padding-left: 0px !important;
}

#createUserForm {
    display: inline-block !important;
}

#nav-container {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004f84+0,002d4b+100 */
    /*	background: #004f84;
	background: linear-gradient(to bottom, #004f84 0%,#002d4b 100%);*/
    background: var(--nav-bg-color);
    padding: 0.5% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    font-size: 10px;
    height: var(--nav-container-height);
}

#nav-container .nav-inner-container {
    position: absolute;
    left: 9px;
}

#brand {
    display: inline-block;
    height: 1em;
    margin-right: 5px;
}

#brand a, #brand a:visited {
    color: white;
    text-decoration: none;
}

#brand img {
    width: 32em;
    height: auto;
}

#hamlin_logo {
    vertical-align: middle;
    max-height: calc(var(--nav-container-height) - 20px);
}

#hamyBrandLabel {
    padding-left: 0;
    font-size: 1.7em;
    color: #fff;
}

.link-like:not(.btn) {
    cursor: pointer !important;
    color: blue;
    text-decoration: underline;
}

    .link-like:not(.btn):hover {
        color: darkblue;
    }

.red-highlight .link-like {
    color: lightskyblue;
}

#main-content form {
    margin: 0 auto 2.5% auto;
}

#menu-nav {
    display: inline-block;
    width: 60%;
    text-align: right;
}

    #menu-nav ul {
        display: inline;
        text-align: right;
        list-style: none;
        background-color: none !important;
    }

        #menu-nav ul a, #menu-nav ul span.link-like {
            display: block;
            color: lightblue;
            text-decoration: none;
            font-size: 1.25em;
            line-height: 1.5em;
        }

        #menu-nav ul li {
            padding: 2px 10px;
            position: relative;
            display: inline-block;
        }

        #menu-nav ul a:hover, #menu-nav ul span.link-like:hover {
            color: rgb(255,111,0);
            /*border-bottom: 2px solid rgb(255,111,0);*/
        }

        #menu-nav ul ul {
            display: none;
            position: absolute;
            top: 85%;
            left: -20%;
            padding: 0;
            z-index: 999999999;
        }

            #menu-nav ul ul a:hover, #menu-nav ul ul span.link-like:hover {
                color: rgb(255, 111, 0);
            }

            #menu-nav ul ul ul {
                top: 0;
                left: 100%;
                z-index: 999999999;
            }


        #menu-nav ul li:hover > ul {
            display: block;
        }

    #menu-nav .menu li > span {
        cursor: pointer;
        display: block;
        color: lightblue;
        text-decoration: none;
        font-size: 1.25em;
        line-height: 1.5em;
    }

        #menu-nav .menu li > span:hover {
            color: rgb(255,111,0);
        }

        #menu-nav .menu li > span#__directory {
            position: relative;
            top: 5px;
            cursor: help !important;
            font-size: 1.5em !important;
            text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
        }

            #menu-nav .menu li > span#__directory::before {
                content: 'Directory';
                color: white;
                background: dodgerblue;
                padding: 2px;
                font-size: 9px;
                border-radius: 3px;
                position: absolute;
                top: -14px;
                left: -65%;
                z-index: -1;
            }

#__oohYea {
    display: none;
    position: fixed;
    font-size: 1.5em;
    padding: 5px;
    background: white;
    z-index: 9999;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
}

    #__oohYea .clippr {
        font-weight: bold;
        background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

#__ohno {
    display: none;
    position: fixed;
    font-size: 1.5em;
    padding: 5px;
    background: white;
    z-index: 9999;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
}

    #__ohno .clippr {
        font-weight: bold;
        background: linear-gradient(to right, #1a2a6c, #b21f1f, #fdbb2d);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

.sub-menu-nav a, .sub-menu-nav span.link-like {
    text-align: left;
    padding: 5px 0;
    width: 200px;
}

.sub-menu-nav > li {
    background: var(--nav-bg-color);
}

    .sub-menu-nav > li:nth-child(1) {
        margin-top: 2%;
    }

.bodyInit {
    overflow-y: hidden !important;
}

#logoutForm {
    background: none;
    padding: 0;
    border: none;
    display: inline !important;
}

/* Notification Styles */

#notificationClearAllNotifications {
    position: absolute;
    top: 5px;
    right: 5px;
}

#notificationCounterAll {
    font-size: 1.2rem;
    position: absolute;
    top: -2%;
    right: 0;
}

#notificationLinkMenuContainer, #__directoryPopunder, #__ticketContainer {
    display: none;
    padding: 5px;
    background-color: rgba(66,66,66,0.98);
    color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: fixed;
    top: 52px;
    left: 48%;
    width: 20%;
    max-width: 20%;
    box-shadow: 1px 1px 4px #000;
    z-index: 10;
}

#notificationLinkMenu {
    list-style: none;
    max-height: 400px;
    overflow-y: auto;
}

#notificationLinkMenuHeader {
    font-size: 2.2rem;
    margin-bottom: 10px !important;
}

#notificationLinkMenu li {
    margin-left: -7%;
    padding: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

    #notificationLinkMenu li > p {
        font-size: 1rem;
        font-style: italic;
        margin-top: 5px !important;
    }

        #notificationLinkMenu li > p > button {
            margin-left: 20px;
        }

#notificationLinkMenu > li > a {
    color: lightblue;
}

.has-notifications {
    color: lightgreen;
}

/* Directory Pop Under */

#__directoryPopunder {
    width: 40%;
    max-width: 40%;
    left: 55%;
    padding: 20px;
    background-color: rgba(11, 11, 11, 0.98);
}

#__directoryResults {
    list-style: none;
    max-height: 10vh;
    overflow-y: auto;
}

    #__directoryResults li {
        padding: 5px;
    }

/* Classes */

.align-items-center {
    margin: 0 auto;
}

.bold-cell {
    font-weight: bold;
}

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

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

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

#forgotPasswordLinkContainer {
    padding-top: 3%;
    font-size: 1.1em;
}

#forgotPasswordLink, #tvLoginStartLink {
    color: #428bca;
}

#forgotPasswordLink:hover, #forgotPasswordLink:focus,
#tvLoginStartLink:hover, #tvLoginStartLink:focus
{
    color: #2a6496;
    text-decoration: underline;
}

.btn {
/*    border-radius: 0;*/
    transition: background-color linear .4s;
/*    box-shadow: 1px 1px rgb(0 0 0 / 33%);*/
}

.btn[disabled] {
    pointer-events: auto;
    cursor: not-allowed !important;
}

.btn-xxs {
    font-size: 11px;
    line-height: 1.3;
    padding: 1px 5px;
}


#alertContainer, .alertContainer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    padding: 1%;
    text-align: center;
    font-size: 2em;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #000;
    background: #333;
    color: white;
    background: #2b2b2bba;
    backdrop-filter: blur(10px);
    word-break: break-word;
    max-height: var(--max-alert-container-height);
    overflow-y: auto;
    z-index: 1000;
}

.alertContainer:not(.msgContainer, #hoverInfoClickContainer)::before, #loaderTextWrapper::before {
    content: "";
    position: absolute;
    pointer-events: none;
    background-image: linear-gradient(115deg, rgb(79, 207, 112), rgb(250, 214, 72), rgb(167, 103, 229), rgb(18, 188, 254), rgb(68, 206, 123));
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    inset: 0px;
    padding: 2px;
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
    animation: 6s linear 6s infinite normal none running hueRotate;
}

.alertContainer pre {
    max-height: 70vh;
    overflow-y: auto;
}

#loaderTextWrapper::before {
    border-radius: 20px;
}

.alertContainer input, .alertContainer select, .alertContainer textarea {
    padding: 3px;
    font-size: 16px;
    color: black;
}

.alertContainer a, .alertContainer a:visited, .alertContainer a:hover {
    color: dodgerblue;
}

.alertContainer select {
    max-width: 100%;
}

#msgContainer, .msgContainer {
    background: #2b2b2bba;
    backdrop-filter: blur(10px);
    border-radius: 0;
    padding: 0;
    overflow-y: initial;
    z-index: 999;
}

.msgContainer .globalfn-custom-text-characters-remaining-container {
    position: absolute;
    bottom: 25px;
    font-size: 0.5em;
}

.msgContainer .row {
    margin-left: 0;
    margin-right: 0;
}

.msgContainer hr {
    border-top: 1px solid white;
}

#msgContainer .window-top, .msgContainer .window-top {
    top: -45px;
    cursor: move;
    width: 100%;
    height: 25px;
    padding: 5px;
    background: linear-gradient(to right, #0371b4, #1cb5e0);
    display: flex;
    align-items: center;
}

.msgContainer .window-top .title {
    border: none;
    position: absolute;
    left: 5px;
    font-size: .5em;
}

#msgContainer .round, .msgContainer .round {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    margin-right: 6px;
    box-shadow: 1px 1px 2px #000;
    position: absolute;
    right: 5px;
    top: 5px;
}

#msgContainer .round.red, .msgContainer .round.red {
    background-color: red;
}

#msgContainer .content, .msgContainer .content {
    max-height: calc(var(--max-alert-container-height) - 90px);
    overflow-y: auto;
}

#msgContainer .content .msg-content, .msgContainer .content .msg-content {
    padding: 1%;
}

#msgContainer .btn-content, .msgContainer .btn-content {
    padding-bottom: 20px;
    margin-top: 10px;
    text-align: center;
}

.msgContainer textarea.apa-getText {
    width: 100%;
    height: 250px;
    padding: 5px;
    font-size: 1.1em;
}

.msgContainer input.apa-getText {
    width: 100%;
    padding: 5px;
    font-size: 1.1em;
}

.msgContainer .apa-buttonArea .apa-btn[data-type="ok"] {
    margin-right: 20px;
}


/* Sticky Header and Table Styles */
table.sticky-headers {
    position: relative !important;
}

table.sticky-headers tr th {
    position: sticky !important;
    top: 0px !important;
    z-index: 3 !important;
}

.widget table.sticky-headers tr th {
    top: -26px !important;
}

/* Resizable Inputs */

.resizable-input {
    /* make resizable */
    position: relative;
    overflow: hidden;
    resize: horizontal;
    display: inline-block;
    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;
    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 100%;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-right: 0.5em;
}

/* add a visible handle */
.resizable-input::after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
    z-index: 2;
}

.resizable-input > input:hover,
.resizable-input:hover::after {
    background: rgba(81, 86, 241, 0.3);
    outline: 1px dotted #0095ff;
}

.apa-getText {
    width: 95%;
}

textarea.apa-getText {
    padding: 10px;
    height: 200px;
}

#hoverInfoWindow {
    display: none;
    position: fixed;
    z-index: 9999999;
    width: auto;
    max-width: calc(100vw / 2);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(33,33,33,0.9);
    backdrop-filter: blur(10px);
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #7f7f7fab, -1px -1px 1px #7f7f7fab;
    padding: 10px;
    font-size: 1em;
    word-break: break-word;
}

#hoverInfoClickContainer {
    text-align: left;
    width: 45%;
    font-size: 1.5rem;
    max-height: 85vh;
    background: #2b2b2bed;
}

    #hoverInfoClickContainer vertical-rule, #hoverInfoWindow vertical-rule {
        background: white;
        height: 40vh;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100000;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: lightblue;
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}


/* .squaredThree */
.squaredThree {
    display: inline-block;
    position: relative;
    margin: 10px
}

    .squaredThree label {
        width: 14px;
        height: 14px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #D7B1D7;
        border-radius: 4px;
    }

        .squaredThree label:after {
            content: '';
            width: 9px;
            height: 5px;
            position: absolute;
            top: 4px;
            left: 4px;
            border: 3px solid #fcfff4;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .squaredThree label:hover::after {
            opacity: 0.3;
        }

    .squaredThree input[type=checkbox] {
        visibility: hidden;
    }

        .squaredThree input[type=checkbox]:checked + label:after {
            opacity: 1;
        }
/* end .squaredThree */


#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    background: #ddd;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

.label-text {
    position: relative;
    left: 10px;
}

.hover-info {
    cursor: help;
}

.btn.hover-info, a.hover-info, a img.hover-info {
    cursor: pointer;
}

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    transition: .3s ease-out;
}

    .waves-effect .waves-ripple {
        position: absolute;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px;
        opacity: 0;
        background: rgba(0, 0, 0, 0.2);
        transition: all 0.7s ease-out;
        transition-property: transform, opacity;
        transform: scale(0);
        pointer-events: none;
    }

    .waves-effect.waves-light .waves-ripple {
        background-color: rgba(255, 255, 255, 0.45);
    }

    .waves-effect.waves-red .waves-ripple {
        background-color: rgba(244, 67, 54, 0.7);
    }

    .waves-effect.waves-yellow .waves-ripple {
        background-color: rgba(255, 235, 59, 0.7);
    }

    .waves-effect.waves-orange .waves-ripple {
        background-color: rgba(255, 152, 0, 0.7);
    }

    .waves-effect.waves-purple .waves-ripple {
        background-color: rgba(156, 39, 176, 0.7);
    }

    .waves-effect.waves-green .waves-ripple {
        background-color: rgba(76, 175, 80, 0.7);
    }

    .waves-effect.waves-teal .waves-ripple {
        background-color: rgba(0, 150, 136, 0.7);
    }

    .waves-effect input[type="button"],
    .waves-effect input[type="reset"],
    .waves-effect input[type="submit"] {
        border: 0;
        font-style: normal;
        font-size: inherit;
        text-transform: inherit;
        background: none;
    }

.cursor-copy, .copy-text {
    cursor: copy;
}

/* Generic toggler and toggler container selectors */

.toggler {
    cursor: pointer;
    position: fixed;
    top: var(--nav-container-height);
    background: #0354a2;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

    .toggler:hover {
        background: #0080fd;
    }

.toggleContainer {
    position: fixed;
    background: #333;
    height: 92vh;
    max-height: 92vh;
    overflow-y: auto;
}

    .toggleContainer ul {
        position: absolute;
        list-style: none;
        padding-inline-start: 0;
        padding: 5px;
        margin-top: 10px;
        top: -10px;
        width: 150px;
    }

        .toggleContainer ul li {
            position: relative;
            font-size: 11px;
            color: white;
            padding: 5px;
        }

            .toggleContainer ul li:not(:last-child) {
                margin-bottom: 10px;
            }

            .toggleContainer ul li hr {
                border-top: 1px solid #eee;
                width: 100%;
            }

            .toggleContainer ul li label {
                position: relative;
                top: 2px;
                color: lightgreen;
            }

            .toggleContainer ul li input, .toggleContainer ul li select {
                height: 28px;
                padding: 6px;
                font-size: 11px;
                line-height: 1.428571429;
                color: #555555;
                vertical-align: middle;
                background-color: #ffffff;
                border: 1px solid #cccccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
                transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            }

                .toggleContainer ul li input[type=text] {
                    display: block;
                    width: 100%;
                }

            .toggleContainer ul li.navHeader {
                font-weight: bold;
                color: white;
                font-size: 1.3em;
            }

                .toggleContainer ul li.navHeader:not(:first-child) {
                    margin-top: 20px;
                }

            .toggleContainer ul li.nav {
                cursor: pointer;
                background: #00709a;
                color: white;
                border: 1px solid rgba(0,0,0,0.3);
                box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            }

                .toggleContainer ul li.nav:hover {
                    background: #06b4f5;
                }

.col-sm-1.col-sm-1-cust {
    width: 2% !important;
}

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

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

#ui-datepicker-div {
    z-index: 1000 !important;
}

tr.red-highlight a {
    color: white !important;
}

.fake-link {
    cursor: pointer;
    color: dodgerblue;
    border-bottom: 1px solid #000;
}

    .fake-link:hover {
        color: blue;
    }

pre {
    outline: 1px solid #ccc;
    padding: 5px;
}

.string {
    color: green;
}

.number {
    color: darkorange;
}

.boolean {
    color: blue;
}

.null {
    color: magenta;
}

.key {
    color: red;
}

.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 1.1rem;
}

.filterable-folder-widget {
    padding: 18px;
    background-color: #fff;
    color: black;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}

    .filterable-folder-widget > input {
        display: block;
        width: 100%;
        min-height: 30px;
        margin-bottom: 20px;
        border: 0 none;
        border-bottom: 1px solid #ccc;
        outline: none;
    }

.filterable-folder-container {
    margin: 10px;
    padding: 0 20px;
    margin: 0;
}

.filterable-folder-wrapper {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 15vh;
    overflow-y: auto;
}

.filterable-file-item,
.filterable-folder-item {
    margin-left: -16px;
    padding-left: 20px;
    list-style-type: none;
}

.filterable-file-item {
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAsUlEQVQ4T2NkgIKE2q4DMDZW+j+jAgPj//0LmssSkeUZEQZ0/1/QXArnoxuSUNPdwMDIEMDwn2HDgpbSBpg8aQYw/H/PwMCQwMDIMHFBc9kCkCGkGODAwMAAwiBd9TDXYhiQUNtdwPCfgR97ePy7uKClfENCLcK7RLsA2UC8BoADi4HhP44YObigpfTAsHfBgMcC3vwAzze0TAcUuKDrAMN/RlwJCNVcRoaPC5pLA0CCALOMnRHTr6OKAAAAAElFTkSuQmCC') no-repeat left center;
}

.filterable-folder-item {
    font-weight: bold;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA6UlEQVQ4T62TvQ3CMBCF31OgDxPACGwATAAjeAOgSKpECgoCiRTABmYDNgA2yAawAUpNwiGHH0GBlATcuPH3vbPvTPy4+COPXKCCpY30sgORPIU6dLtF5FTeYgWgA2KtQ1fnQj8amQ2C81fJVcZ65sZUfhTr0GmrYN5iZjWLpIqwC0oLVjah8hd7WPUBsvQIwC4ieD9zFwgDELuyMCCHuwDcAliWFgg2jwoQgxxWEDzeICfZqSDoPa9QHjZpVq1B5UUnEIXa91GhSKKnrm3mQEqXngNyMNNqBKYD/QqSsQ6d1X8+U4X0F3IDjRRPOikDqHUAAAAASUVORK5CYII=') no-repeat left center;
}

#popOutInfo {
    display: none;
    position: fixed;
    top: var(--nav-container-height);
    right: 0px;
    background: linear-gradient(to right, #07478b, #001933);
    color: white;
    box-shadow: -1px 1px 4px #000;
    z-index: 777;
    width: 1px;
    height: 1px;
    font-size: 1.2rem;
}


    /* Class names are backwards right now */
    #popOutInfo.popin {
        display: block;
        animation: popOutInfoPopIn 0.65s forwards;
    }

    #popOutInfo.popout {
        display: block;
        animation: popOutInfoPopOut 0.65s forwards;
    }

    #popOutInfo .popOutInfo-inner {
        position: relative;
        top: 5px;
        left: 55px;
        max-width: 96%;
    }

    #popOutInfo .popOutInfo-inner-content {
        max-height: 52vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 0;
    }

    #popOutInfo .popout-job-section {
        margin-bottom: 0;
    }

    #popOutInfo .popOutInfo-x {
        cursor: pointer;
        position: absolute;
        top: 10px;
        left: 15px;
        border: none;
        border-radius: 5px;
        background: transparent;
        color: #b7b7b7;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
        font-size: 2.25rem;
    }

        #popOutInfo .popOutInfo-x:hover {
            color: white;
        }

    #popOutInfo input[disabled] {
        background: #888;
    }

    #popOutInfo input[type="text"], #popOutInfo input[type="date"] {
        font-size: 1.2rem;
    }

/* Flexbox Globals */
.flex-justify-center {
    display: flex;
    justify-content: center;
    align-content: center;
}

.flex-row {
    display: flex;
}

    .flex-row.justify-space-around {
        justify-content: space-around;
    }

    .flex-row.justify-space-between {
        justify-content: space-between;
    }

    .flex-row.justify-center {
        justify-content: center;
    }

    .flex-row.row-gap {
        margin-bottom: 20px;
    }

/* Quill styles */
.ql-toolbar {
    background: white;
    color: black;
    text-align: left;
}

#popUnderNavError {
    display: none;
    position: fixed;
    top: calc(var(--nav-container-height) + -1px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: red;
    color: white;
    font-size: 1.2em;
    border: 1px solid #0009;
    box-shadow: 1px 1px 4px #ff0000;
    padding: 10px;
}

.datepicker.datepickerSpawn {
    text-align: center !important;
    position: relative;
    z-index: 1;
}

.datepicker.datepickerSpawn + .dpspawn {
    position: relative;
    top: -2em;
    z-index: 2;
    font-size: 1.25em;
    left: 0.5em;
}

.inline-backstop-img {
    height: 1em;
}

.cursor-pointer {
    cursor: pointer;
}

.position-relative {
    position: relative;
}

div.search-list-esign-receiver, div.search-list-esign-cc {
    display: none;
    background: linear-gradient(to right, #606c88, #3f4c6b);
    color: white;
    border: 1px solid rgb(0 0 0 / 32%);
    position: absolute;
    z-index: 9999;
    max-height: 100px;
    width: 100%;
    overflow-y: auto;
    border-radius: 5px;
}

div.search-list-esign-receiver section, div.search-list-esign-cc section {
    cursor: pointer;
    padding: 5px;
    text-align: left;
    font-size: 0.7em;
}

div.search-list-esign-receiver section:hover, div.search-list-esign-cc section:hover {
    background-color: dodgerblue;
    color: white;
}

.esign-preview-iframe {
    outline: 0;
    height: 71vh;
    width: 100%;
    position: relative;
}

#esign-allPartiesRequiredToSign {
    display: inline-block;
    height: 32px;
    width: 32px;
}

#esign-addMoreCopyRecipientsBtn, #esign-addMoreSignersBtn {
    margin-left: 20px;
}

#esign-receiversReviewList, #esign-ccOnlyList {
    max-height: 20vh;
    overflow-y: auto;
}

#esign-receiversReviewList li, #esign-ccOnlyList li {
    background: #eee;
    color: black;
    padding: 5px;
    font-size: 1rem;
    border: 1px solid #00000096;
    margin-top: 2px;
}

#esign-ccOnlyList li {
    font-size: 1.5rem;
}

#esign-leftSidePreview header {
    background: lightgray;
    color: black;
    font-weight: bold;
    font-size: 0.6em;
}

#esign-leftSidePreview ul {
    list-style: none;
    padding-inline-start: 0;
}

#esign-additionalJobNumbersList {
    height: 15vh;
    max-height: 15vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#esign-previousFormsList {
    height: 28vh;
    max-height: 28vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#esign-previousFormsList .cancelled-highlight {
    background: #9f0c13;
}

#esign-previousFormsList .pending-highlight {
    background: #3e3efb;
}

#esign-leftSidePreview li {
    position: relative;
    background: #5c5c5c;
    color: white;
    border: 1px solid rgb(0 0 0 / 50%);
    font-size: 0.5em;
    margin-top: 3px;
    padding: 8px;
}

#esign-addMoreJobsSelect + .select2.select2-container {
    font-size: 15px;
}

#esign-addMoreJobsSelect + .select2.select2-container .select2-selection.select2-selection--single {
    height: 30px;
}

#esign-addMoreJobsBtn {
    vertical-align: bottom;
}

#customEsignDocMessage {
    width: 100%;
    height: 300px;
    background: white;
    color: black;
}

.remove-esign-job {
    position: absolute;
    top: -5px;
    right: -4px;
}

/* Apple Style Toggle from CSSScript.com */
/*
	<label class="form-switch" data-onstatus="On" data-offstatus="Off" data-defaultstate="false">
		<input type="checkbox">
		<i></i>
		<span>Off</span>
	</label>
*/

.form-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.form-switch i {
    position: relative;
    display: inline-block;
    margin-right: .5rem;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s linear;
}

.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all 0.25s linear;
}

.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after {
    transform: translate3d(16px, 2px, 0);
}

.form-switch input {
    display: none;
}

.form-switch input:checked + i {
    background-color: #4BD763;
}

.form-switch input:checked + i::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked + i::after {
    transform: translate3d(22px, 2px, 0);
}

.form-switch span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: green;
}

.test-job-label {
    display: inline-block;
    padding: 2px;
    margin: 2px 0 6px;
    background: green;
    color: white;
    font-size: 0.9em;
    border-radius: 2px;
}

.do-a-barrel-roll {
    animation: doABarrelRoll 3s forwards;
}

.invert {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    z-index: 1000;
    background: #fff;
    left: 0;
    mix-blend-mode: difference;
}

.white-border-top {
    border-top: 1px solid white;
}

.cbjq-container {
    display: inline-block;
    width: 100%;
    position: relative;
}

.cbjq-input, .cbjq-list {
    cursor: pointer;
    width: 100%;
    margin: 0 !important;
}

.cbjq-input {
    position: relative;
    border: 1px solid rgb(0 0 0 / 30%);
    border-radius: 5px;
    padding: 5px 30px 5px 5px !important;
    z-index: 1;
}

.cbjq-input-arrow {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.msgContainer .cbjq-input-arrow {
    font-size: 1.25rem;
}

.cbjq-scroll {
    max-height: 195px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: -5000px;
    z-index: 999;
    background: white;
    color: black;
    margin: 0 !important;
    box-shadow: 1px 1px 4px #1e90ffc7;
}

.cbjq-list .cbjq-item, .cbjq-list .clusterize-no-data {
    cursor: pointer;
    width: 100%;
    padding: 5px;
    border: 1px solid rgb(0 0 0 / 30%);
    background: #fff;
    color: black;
    height: 30px !important;
    overflow: hidden;
    margin: 0 !important;
}

.cbjq-list .cbjq-item:hover {
    background: lightskyblue;
}

.flatpickr-current-month .numInputWrapper {
    width: 4ch !important;
    display: inline-block;
}


.global-search-wrapper {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgb(0 0 0 / 75%);
    color: white;
}

.global-search-wrapper div {
    font-size: 3em;
}

.global-search-wrapper section {
    margin-top: 20px;
    width: 15%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
}

.global-search-wrapper section .search-box {
    display: inline-block;
    box-shadow: 1px 1px 2px rgb(33 33 33 / 50%);
    border-radius: 5px;
    width: 100px;
    height: 100px;
}

.global-search-wrapper section .top-left-box {
    animation: wrapper-top-left-box 1.5s infinite;
    background-color: pink;
}

.global-search-wrapper section .top-right-box {
    animation: wrapper-top-right-boxr 1.5s infinite;
    background-color: lightskyblue;
}

.global-search-wrapper section .bottom-left-box {
    animation: wrapper-bottom-left-box 1.5s infinite;
    background-color: lightgreen;
}

.global-search-wrapper section .bottom-right-box {
    animation: wrapper-bottom-right-box 1.5s infinite;
    background-color: #7F55B1;
}

.global-search-wrapper section .bottom-right-box {
    box-shadow: none;
}

/* Ticket Styles */

#__ticketContainer {
    display: none;
    padding: 50px;
    width: 50%;
    max-width: unset;
    resize: both;
    overflow: auto;
    z-index: 1000;
}

#__ticketContainer xel {
    position: absolute;
    top: 10px;
    right: 10px;
    color: lightgrey;
    font-size: 1.5em;
    cursor: pointer;
}

#__ticketContainer xel:hover {
    color: white;
}

#__ticketContainer .ticket-emoji {
    display: inline-block;
    animation: rotate-ticket 1.5s ease-in-out infinite;
    margin-right: -5px;
}

#menu-nav ul li#__ticketNewTicketToggle {
    display: none;
    cursor: pointer;
    font-size: 1.5em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}

#__ticketNewTicketToggle span {
    position: relative;
    top: 5px;
}

#__ticketNewTicketToggle span::before {
    content: 'New Ticket';
    color: white;
    background: dodgerblue;
    padding: 2px;
    font-size: 9px;
    border-radius: 3px;
    position: relative;
    top: -17px;
    left: 37px;
    z-index: -1;
}

#__ticketMessage {
    width: 100%;
    background-color: #fff;
    color: black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 25vh;
    overflow: auto;
    resize: vertical;
}

    #__ticketMessage::placeholder {
        color: #bbb;
    }

#total-unhandled-takeoverrequests, .total-unhandled-takeoverrequests {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    border: none;
    width: 21px;
    text-align: center;
    font-size: 1.5em;
    font-style: normal;
}

.dropdown-btn-container {
    position: relative;
    display: inline-block;
}

.dropdown-btn-scroll {
    position: fixed;
    z-index: 1000;
    width: 100px;
    background: white;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 50%);
}

.dropdown-btn-scroll button-selection {
    display: block;
    padding: 5px;
    color: black;
    cursor: pointer;
    border-bottom: 1px solid rgb(0 0 0 / 20%);
}

.dropdown-btn-scroll button-selection:hover {
    background-color: lightskyblue;
}

#historyContainer {
    display: none;
    position: fixed;
    width: 100vw;
    background-color: #f1f2f4;
    padding: 3px;
    bottom: 0;
    left: 0;
    z-index: 999;
    text-align: left;
    box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}

/* #historyContainer span {
	position: absolute;
	top: 0px;
	right: 0px;
} */

.history-element {
    background-color: #e5e6ea;
    color: #1a2b47;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    border: none;
    display: inline-block;
    border-radius: 3px;
    margin-left: 5px;
}

.history-element a {
    color: black;
    text-decoration: none;
}

.history-element:hover {
    background-color: #d0d5db;
}

/*.removeFavoriteItem {
	right:0;
	position: relative;
}*/

#historyItems {
    display: none;
    list-style-type: none;
    background-color: white;
    border: 1px solid #d0d5db;
    padding: 5px;
    position: absolute;
    bottom: 26px;
    left: 0;
    z-index: 1000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 20vw;
    height: 30vh;
    overflow-y: auto;
}

#historyItems li {
    color: #333;
    text-align: left;
    padding: 10px;
    background-color: #f1f2f4;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
}

#historyItems li:hover {
    background-color: #e0e0e0;
}

#toggleHistoryBar {
    right: 0;
}

.addFavoriteItem {
    margin-top: 5px;
    margin-right: 12px;
    color: transparent;
    text-shadow: 0 0 0 gray;
}

.addFavoriteItem[data-state="clicked"] {
    text-shadow: 0 0 0 #2abde9
}

.emoji-fav {
    color: transparent;
    text-shadow: 0 0 0 #2abde9;
}

.del-fav-item {
    position: absolute;
    top: 0;
    background: #c24848;
    border-radius: 9px;
    font-size: 10px;
    color: transparent;
    text-shadow: 0 0 0 white;
}

.loader_cube_container {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader_cube {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

.loader_cube--glowing {
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.loader_cube--color {
    z-index: 1;
    filter: blur(2px);
    background: linear-gradient(135deg, #1afbf0, #da00ff);
    animation: cubeRotate 2.5s ease-in-out infinite;
}

@keyframes cubeRotate {
    50% {
        transform: rotate(-80deg);
    }
}


@keyframes hueRotate {
    100% {
        filter: hue-rotate(-360deg);
    }
}

@keyframes rotate-ticket {
    0% {
        transform: rotate3d(0, 0, 1, 155deg);
    }

    12.5% {
        transform: rotate3d(0.25, 0, 1, 155deg);
    }

    25% {
        transform: rotate3d(0.5, 0, 1, 155deg);
    }

    37.5% {
        transform: rotate3d(0.75, 0, 1, 155deg);
    }

    50% {
        transform: rotate3d(1, 0, 1, 155deg);
    }

    62.5% {
        transform: rotate3d(0.75, 0, 1, 155deg);
    }

    72.5% {
        transform: rotate3d(0.5, 0, 1, 155deg);
    }

    87% {
        transform: rotate3d(0.25, 0, 1, 155deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 155deg);
    }
}

@keyframes wrapper-top-left-box {
    25% {
        transform: translateX(130%);
    }

    50% {
        transform: translateY(120%) translateX(130%);
    }

    75% {
        transform: translateY(120%) translateX(0);
    }

    100% {
        transform: translate(0, 0);
    }
}


@keyframes wrapper-top-right-boxr {
    25% {
        transform: translateY(120%);
    }

    50% {
        transform: translateY(120%) translateX(-130%);
    }

    75% {
        transform: translateY(0) translateX(-130%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes wrapper-bottom-left-box {
    25% {
        transform: translateY(-120%);
    }

    50% {
        transform: translateY(-120%) translateX(130%);
    }

    75% {
        transform: translateY(0) translateX(130%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes wrapper-bottom-right-box {
    25% {
        transform: translateX(-130%);
    }

    50% {
        transform: translateY(-120%) translateX(-130%);
    }

    75% {
        transform: translateY(-120%) translateX(0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes doABarrelRoll {
    from {
        transform: rotate(0deg) scale(0.1);
    }

    to {
        transform: rotate(1080deg) scale(1.0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes popOutInfoPopOut {
    from {
        width: 100vw;
        height: 95vh;
        max-height: 95vh;
    }

    to {
        width: 1px;
        height: 1px;
    }
}

@keyframes popOutInfoPopIn {
    from {
        width: 1px;
        height: 1px;
    }

    to {
        width: 100vw;
        height: 95vh;
        max-height: 95vh;
    }
}

@keyframes darkenCard {
    from {
        background-color: inherit;
        color: black;
    }

    to {
        background-color: #333;
        color: white;
    }
}

@keyframes slightlyDarkenCard {
    from {
        background-color: inherit;
        color: black;
    }

    to {
        background-color: #777;
        color: white;
    }
}

@keyframes selectCard {
    from {
        background-color: inherit;
        color: black;
    }

    to {
        background-color: dodgerblue;
        color: white;
    }
}

@keyframes unselectCard {
    from {
        background-color: dodgerblue;
        color: white;
    }

    to {
        background-color: white;
        color: black;
    }
}

@keyframes productionReadyCard {
    from {
        background-color: inherit;
        color: black;
    }

    to {
        background-color: green;
        color: white;
    }
}

@keyframes blinker {
    to {
        opacity: 0;
    }
}



@media screen and (max-width: 1376px) {
    #menu-nav {
        width: 82%;
    }

    #menu-nav > ul > li > a, #menu-nav > .menu > li > span {
        font-size: 1.1em;
    }

    #menu-nav ul li {
        padding: 0 5px;
    }

    .nav-inner-container.container {
        font-size: 0.8rem;
    }

    #notificationCounterAll {
        right: -2px;
    }

    #DateRangeContainer {
        margin-left: 2%;
    }

    #alertContainer, .alertContainer {
        width: 80%;
    }

    .msgContainer .btn-content .btn {
        font-size: 1.2rem;
    }

    #actNotesSubview .newActNote-textareaGlobal {
        height: 25vh;
    }

    #actNotesSubviewContainerGlobal {
        max-height: 60vh;
    }

    #loaderWrapper {
        top: 0;
        height: 100vh;
        position: fixed;
    }
}