body {
    padding: 0;
    font-family: 'Roboto', Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 12px;
    color: #404040;
    background: #FFFFFF;
    margin-bottom: 0px;
    margin-bottom: 3em;
    overflow-x: hidden;
    min-height: 100%;
    overflow-y: scroll;
    color: #212121;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 50px;
    letter-spacing: .75px;
}

html.mobile body {
    margin-left: 0;
    margin-right: 0;
}

/* HIDE HIDDEN ELEMENTS (JQuery-UI 1.13.2 Fix) */
.hiddenlabel {
    display: none !important;
}

:focus {
    outline-color: #e91e63;
}

#gdivBG {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    background-color: gray;
    position: absolute;
    width: 130%;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    z-index: 99;
}

#gdivMsgBox, #gdivInputBox {
    position: fixed;
    min-height: 250px;
    top: 35%;
    z-index: 99999;
}

#gdivContentPlaceholder {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    background: url(data:image/png;base64,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) no-repeat;
    z-index: 99999;
    background-position: center;
    background-color: #FFFFFF;
}

html.desktop #gdivMsgBox, html.desktop #gdivInputBox {
    min-width: 400px;
    left: 50% !important;
    width: 800px;
    margin-left: -400px;
}

html.mobile #gdivMsgBox, html.mobile #gdivInputBox {
    width: 100%;
}

#gtxtInputBox {
    width: 95%;
    margin: 1em;
    min-height: 4em;
}

#gtxtInputBoxPW {
    width: 250px;
}

#glblMsgLbl, #glblInputBoxIntruc {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

#gdivSubmitting {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    margin-top: -100px;
    margin-left: -150px;
    z-index: 100;
    overflow: hidden;
}

#gimgSubmitting {
    display: none;
    overflow: hidden;
}

#gdivSubmittingInt {
    margin: 0 auto;
    overflow: hidden;
}

    #gdivSubmittingInt svg,
    #gdivPageLoad svg {
        animation: pts_rotate 2s linear infinite;
        margin: auto;
        position: fixed;
        top: CALC(50% - 122px);
        left: CALC(50% - 122px);
        width: 244px;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    #gdivSubmittingInt p.progress-bar {
        font-weight: 900;
        font-size: 32px;
        padding-top: 40px;
        position: relative;
    }

    #gdivSubmittingInt p.progress-bar-eta {
        font-weight: 900;
        font-size: 12px;
        position: relative;
    }

#gdivPageLoad svg {
    position: fixed;
    top: CALC(50% - 122px);
    left: CALC(50% - 122px);
    width: 244px;
    z-index: 1;
    animation: pts_rotate 1s linear infinite;
}

    #gdivSubmittingInt svg circle,
    #gdivPageLoad svg circle {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: pts_dash 1.5s ease-in-out infinite, pts_color 6s ease-in-out infinite;
        stroke-linecap: round;
        stroke-width: 4px;
    }

    #gdivPageLoad svg circle {
        animation: pts_dash .75s ease-in-out infinite, pts_color 3s ease-in-out infinite;
    }

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

@keyframes pts_dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes pts_color {
    100%, 0% {
        stroke: #F44336;
    }

    40% {
        stroke: #e91e63;
    }

    66% {
        stroke: #9C27B0;
    }

    80%, 90% {
        stroke: #673AB7;
    }
}

a {
    color: #212121;
    text-decoration: none;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #212121;
}

a img {
    border: 0;
}

.material-icons {
    color: #e91e63;
}

.icon32 {
    font-size: 32px;
}

.pagehead .material-icons {
    display: inline-block;
    font-size: 48px;
}

.pagetitle {
    font-size: 18px;
    line-height: 48px;
    vertical-align: top;
}

div.inputsector {
    margin-left: auto;
    margin-right: auto;
    padding: .2em;
}

html.desktop div.inputsector {
    width: 800px;
}

html.desktop div.normaldiv div.inputsector {
    width: auto;
}

html.desktop div.normaldiv.large div.inputsector {
    width: auto;
}

div.inputrow {
    /*padding-top: .2em;*/
}

    div.inputrow input[type="checkbox"], div.inputrow .groupmulti {
        margin-left: 31.5%;
        margin-right: auto;
        margin-bottom: .5em;
    }

    div.inputrow input[type="text"] + input[type="checkbox"] {
        margin-left: auto;
    }

    div.inputrow button[type="button"], div.inputrow select {
        width: 38.9%;
    }

    div.inputrow select {
        height: 24px;
        font-weight: bold;
    }

div.centrerow {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center;
    padding: 0;
    padding-top: .2em;
    padding-bottom: .2em;
}

div.rightrow {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: right;
    padding: .2em;
}

div.leftrow {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: left;
    padding: .2em;
}

label.inputsectorlabel, .ui-accordion .ui-accordion-header {
    font-size: 16px;
    display: block;
    padding: 6px 6px 6px 8px;
}

label.inputlabel {
    /*padding: .2em;*/
    /*padding-top: .5em;*/
    padding-top: 5px;
    width: 30%;
    /*float: left;*/
    display: inline-block;
    text-align: right;
    margin-right: .5em;
    vertical-align: top;
}

label.inputlabelhelp {
    /*font-weight: bold;*/
    text-decoration: underline;
    font-style: italic;
    color: rgb(59, 170, 227);
}

    label.inputlabelhelp:hover {
        cursor: pointer;
    }

div.inputlabeltip {
    background-color: white;
}

span.inputspan {
    /*padding: .2em;*/
    padding-top: 5px;
    display: inline-block;
}

.ui-widget-content {
    background-color: white;
}

.ui-state-active, .ui-widget-content, ul.autocomplete, #gdivSesExpiry {
    box-shadow: 0 0 1em #CCCCCC;
}

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background-color: white;
        color: #212121;
        border: 1px solid #DDDDDD;
        font-weight: normal;
    }

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-header {
        background-color: #e91e63;
        color: white;
    }

.ui-button.ui-state-hover, a.ui-state-default.ui-state-hover {
    background-color: #EEEEEE;
}

.ui-state-active.ui-state-hover {
    background-color: #e91e63;
}

a.ui-state-default.ui-state-highlight {
    background-color: #FFF59D;
    color: grey;
}

#gimgMsgBoxIcon, #gimgInputBoxImg {
    font-size: 42px;
}

hr {
    border-style: outset;
}

/*input, textarea*/
input[type="text"], input[type="password"], input[type="number"], textarea {
    transition: all .5s ease-in-out 0s;
    transition: background-color .4s ease-in-out .1s;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 38%;
    min-height: 20px;
    font-family: Helvetica;
    font-size: 12px;
    resize: none;
    border: 1px solid #9E9E9E;
    font-weight: bold;
}

select {
    border: 1px solid #9E9E9E;
    font-weight: bold;
}

    select:hover {
        border: 1px solid #9E9E9E;
    }

html.mobile input[type="text"], html.mobile input[type="password"], html.mobile textarea {
    font-size: 16px;
    border: 1px solid #9E9E9E;
    font-weight: bold;
}

div.inputrow input[type="text"], div.inputrow input[type="password"], div.inputrow textarea {
    margin-right: 9px;
    margin-top: 1px;
    /*margin-bottom: 1px;*/
    font-weight: 700;
}

button[type="button"], button[type="submit"], button[type="reset"], button {
    padding: .2em;
    /*min-width: 10em;
    min-height: 2.3em;*/
    min-width: 118px;
    min-height: 26px;
}

a.linkbtn {
    padding: .18em;
    min-width: 118px;
    min-height: 24px;
}

#IE7 button[type="button"], #IE7 button[type="submit"], #IE7 button[type="reset"], #IE8 button[type="button"], #IE8 button[type="submit"], #IE8 button[type="reset"] {
    min-width: 0px;
    width: 10em;
    min-height: 0px;
    height: 2.5em;
}

#IE7 div.inputrow button[type="button"], #IE8 div.inputrow button[type="button"] {
    width: 38%;
}

.ui-dialog-titlebar-close, .imsendmsg {
    min-height: 0 !important;
    min-width: 0 !important;
}

input.required, textarea.required {
    background: right 2px no-repeat url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkY4MEFCIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMiA5LjI0bC03LjE5LS42MkwxMiAyIDkuMTkgOC42MyAyIDkuMjRsNS40NiA0LjczTDUuODIgMjEgMTIgMTcuMjcgMTguMTggMjFsLTEuNjMtNy4wM0wyMiA5LjI0ek0xMiAxNS40bC0zLjc2IDIuMjcgMS00LjI4LTMuMzItMi44OCA0LjM4LS4zOEwxMiA2LjFsMS43MSA0LjA0IDQuMzguMzgtMy4zMiAyLjg4IDEgNC4yOEwxMiAxNS40eiIvPgoKPC9zdmc+);
    background-color: #FFFFFF;
}

select.required {
    background: 98% no-repeat url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkY4MEFCIiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMiA5LjI0bC03LjE5LS42MkwxMiAyIDkuMTkgOC42MyAyIDkuMjRsNS40NiA0LjczTDUuODIgMjEgMTIgMTcuMjcgMTguMTggMjFsLTEuNjMtNy4wM0wyMiA5LjI0ek0xMiAxNS40bC0zLjc2IDIuMjcgMS00LjI4LTMuMzItMi44OCA0LjM4LS4zOEwxMiA2LjFsMS43MSA0LjA0IDQuMzguMzgtMy4zMiAyLjg4IDEgNC4yOEwxMiAxNS40eiIvPgoKPC9zdmc+);
    background-color: #FFFFFF;
}

input[disabled], textarea[disabled], select[disabled], input[disabled].invalid, textarea[disabled].invalid, select[disabled].invalid {
    background-color: #F0F0F0 !important;
}

/*	Invalid field styling.	*/
input.invalid {
    background-color: rgb(255, 123, 123) !important;
}

select.invalid {
    background: rgb(255, 123, 123) !important;
    color: black;
}

/*	Uppercase field, Short Time Special field styling.	*/
input.uppercase, textarea.uppercase, input.shorttimespecial, textarea.shorttimespecial {
    text-transform: uppercase;
}
/*	Uppercase field, Short Time Special field styling.	*/
input.lowercase, textarea.lowercase {
    text-transform: lowercase;
}

/*	Autocomplete stylings.	*/
/*	UL (item list).	*/
ul.autocomplete {
    list-style: none;
    position: absolute;
    display: none;
    max-height: 11em;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin-top: -.15em;
    border: 1px solid #BBB;
    z-index: 51;
}

html.desktop ul.autocomplete {
    width: 40em;
    margin-left: 100px;
    margin-right: auto;
}

html.mobile ul.autocomplete {
    width: 100%;
}

ul.autocomplete li {
    padding: .2em;
    /*transition: all .2s ease-in-out .0s;
	transition: background-color .5s ease-in-out .0s;*/
    background: white;
    border: 1px solid white;
    font-weight: normal;
    font-size: 11px;
}

    ul.autocomplete li b {
        font-size: 13px;
    }

    ul.autocomplete li span {
        display: inline-block;
    }

    ul.autocomplete li img {
        float: left;
        display: inline;
    }
    /*	Selected item.	*/
    ul.autocomplete li.selected {
        background: #DFD;
        border: 1px solid #7C7;
    }
    /*	Highlighted item.	*/
    ul.autocomplete li:hover, ul.autocomplete li.hover {
        background: #6ac5f7;
        cursor: pointer;
        color: white;
    }

    ul.autocomplete li.inactive {
        color: #BDBDBD;
    }

table.sorttable {
    width: 96%;
    border-collapse: collapse;
    margin-left: 2%;
    margin-right: 2%;
    table-layout: fixed;
    /*border: 1px solid #BBB;*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    /*font-size: 12px;*/
    font-size: 11px;
    /*-moz-box-shadow: .3em .3em .5em rgba(0,0,0,.3);
	-webkit-box-shadow: .3em .3em .5em rgba(0,0,0,.3);
	box-shadow: .3em .3em .5em rgba(0,0,0,.3);*/
}

    table.sorttable thead tr, table.sorttable thead tr th {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 1;
        outline: 1px solid #e91e63;
    }

    table.sorttable tr th {
        /*font-size: 12px;*/
        font-size: 11px;
        background-color: #e91e63;
        color: white;
        /*border-bottom: 2px solid lightgray;*/
        /*height: 3em;*/
        height: 26px;
        text-align: left;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    table.sorttable tr td {
        padding: .2em;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid lightgrey;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        word-wrap: break-word;
    }

    table.sorttable tr th.sorted {
        background: #DFD;
    }

    table.sorttable tr th.sorteddesc {
        background: #FDD;
    }

/* Input Helper stylings.	*/
div.inputhelp {
    position: absolute;
    background: white;
    border: 1px solid #BBB;
    padding: .2em;
    margin-top: -.15em;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    z-index: 50;
}

html.desktop div.inputhelp {
    left: 25%;
    width: 50%;
    margin-left: 0px;
    margin-right: 25%;
}

html.mobile div.inputhelp {
    width: 100%;
}

div.inputhelp.datepick b {
    width: 10%;
    margin-left: 37%;
    margin-right: auto;
}

div.inputhelp.datepick a#dtpNext {
    margin-left: 1em;
    float: right;
}

div.inputhelp.datepick a#dtpPrev {
    margin-right: 1em;
    float: left;
}

div.inputhelp.datepick table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #BBB;
    margin-top: .2em;
}

    div.inputhelp.datepick table tr td.day {
        border: 1px solid #BBB;
        cursor: pointer;
        text-align: center;
        padding: .2em;
        background-color: white;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

        div.inputhelp.datepick table tr td.day:hover {
            background-color: lightgray;
        }

        div.inputhelp.datepick table tr td.day.today {
            background: #DDF;
            border: 1px solid #77C;
        }

        div.inputhelp.datepick table tr td.day.selectedday {
            background: #DFD;
            border: 1px solid #7C7;
        }

a.dateicon {
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    text-align: center;
}

    a.dateicon:hover {
        cursor: pointer;
        background-color: lightgrey;
    }

#dtpHdPrev {
    width: 15%;
    text-align: left;
    font-weight: bold;
}

#dtpHdDate {
    width: 70%;
    text-align: center;
}

#dtpHdNext {
    width: 15%;
    text-align: right;
    font-weight: bold;
}

#dtpHdPrev, #dtpHdNext {
    cursor: pointer;
}

#dtpTblMain tr th {
    font-weight: normal;
}

ul.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    margin: 0;
    padding: 0;
    background-color: #e91e63;
    border-bottom: 1px solid #BBB;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.topbarheader > a {
    color: white;
}

.topbarheader:hover > a {
    color: black;
}

html.desktop ul.topbar {
    min-width: 800px;
    position: fixed;
}

/*Looks to be legacy code
    #OLDIE ul.topbar {
    position: absolute;
    bottom: auto;
    top: expression(eval(document.documentElement.scrollTop));
}*/

ul.topbar, ul.topbar ul {
    text-align: center;
    list-style: none;
    display: inline;
}

    ul.topbar > li {
        vertical-align: top;
        display: inline-block;
        padding: .2em;
        padding-bottom: 0;
        margin-left: 7px;
        margin-right: 7px;
        font-weight: 700;
    }

    /*Looks to be legacy code
    #OLDIE ul.topbar ul {
    padding: 0;
    margin: 0;
    list-style: none;
}*/

    ul.topbar li ul {
        /*transition: opacity .5s ease-in-out .5s;*/
        position: absolute;
        display: none;
        padding-left: 0;
        background: #FFFFFF;
        border: 1px solid #BBB;
        border-top: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    ul.topbar li ul {
        margin-left: -3px;
    }

    ul.topbar li a {
        text-align: left;
        text-decoration: none;
        display: block;
        padding: .4em;
        font-size: 14px;
    }

    ul.topbar li:hover ul, ul.topbar li ul:hover {
        display: block;
    }

#IE7 ul.topbar li:hover ul, #IE7 ul.topbar li ul:hover {
    margin: 0px;
    margin-left: -3px;
}

ul.topbar li:hover {
    background-color: white;
}

#IE7 ul.topbar li:hover {
    background-color: #FEFFFF;
}

ul.topbar li ul li a:hover {
    background-color: #e91e63;
    color: white;
}

/*Looks to be legacy code
    #OLDIE ul.topbar ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#OLDIE ul.topbar li {
    float: left;
    position: relative;
    width: 10em;
    margin: 0px;
    margin-top: -0.2em;
}*/

div.bottombar {
    position: absolute;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: #FFFFFF;
    border-top: 1px solid #BBB;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-align: center;
    vertical-align: middle;
}

html.desktop div.bottombar {
    min-width: 800px;
}

.globalcentre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

div.normaldiv, div.iframediv {
    position: absolute;
    height: auto;
    background-color: white;
    z-index: 9999;
}

html.desktop div.normaldiv {
    left: 50%;
    width: 800px;
    min-height: 400px;
    top: 50%;
}

    html.desktop div.normaldiv.widediv {
        width: 80%;
        min-width: 80%;
    }

html.desktop div.iframediv {
    left: 50%;
    width: 1100px;
    /*margin-left: -550px;*/
    min-height: 550px;
    height: 100%;
    border: none;
}

html.mobile div.normaldiv, html.mobile div.iframediv {
    width: 100%;
}

/* Iframe CSS */
#ifmMainWrap {
    position: relative;
    width: 100%;
    height: 100%;
}

    #ifmMainWrap iframe {
        width: 100%;
        height: 100%;
    }

#ifmMainClose {
    position: absolute;
    z-index: 200;
    right: -40px;
    top: 5px;
    min-height: 30px;
    min-width: 30px;
    height: 30px;
    width: 30px;
    /* Cleric Theming*/
    background: #e91e63; /* magenta */
    border: none;
    border-radius: 5px;
}

div.smalldiv {
    min-height: 400px;
    background-color: white;
    z-index: 100;
}

html.desktop div.smalldiv {
    position: fixed;
    min-width: 800px;
    width: 800px;
    min-height: 400px;
    border-radius: 10px;
    margin: 0px;
    top: 10%;
    left: 50%;
}

html.mobile div.smalldiv {
    position: absolute;
    width: 100%;
}

.rowradio:hover, .rowcheck:hover {
    background-color: #DEDEDE;
}

#gdivInfoMain {
    overflow: scroll;
    height: 530px;
}

    #gdivInfoMain div.inputsector {
        width: 700px;
    }

td.tdJrnyIDInfo:hover {
    cursor: pointer;
    background-color: #DFD;
}

html.mobile div.enqresultsdiv {
    width: 100%;
    overflow: scroll;
}

html.mobile table.enqresultstbl {
    width: 1200px;
}

#togjfx.jqfxenb, #togalerts.jqfxenb {
    background-color: rgb(255, 123, 123);
}

    #togalerts.jqfxenb::after {
        content: 'Alerts Disabled'
    }

#togjfx.jqfxdis, #togalerts.jqfxdis {
    background-color: rgb(200, 255, 192);
}

    #togalerts.jqfxdis::after {
        content: 'Alerts Enabled'
    }

#togjfx:hover, #gItemNewIM:hover, #gItemNewIMHelp:hover, #gcmdSetDesks:hover, #gcmdSetChannels:hover, #togalerts.hover, #gcmdShowPhoneDialer:hover {
    cursor: pointer;
}

li.mailunread {
    /*background-color: #ff1515;*/
}

    li.mailunread:hover, li.mailunread #gItemMail:hover {
        background: rgb(255, 233, 237);
    }

span.mailnumber {
    background: red;
    color: white;
    padding: 2px;
    position: absolute;
    font-size: 15px;
    font-weight: 700;
    top: 2px;
    left: 7px;
    min-width: 20px;
    line-height: 20px;
    border-radius: 50%;
    box-shadow: 0px 3px 6px #000000;
}

img.badge {
    position: absolute;
    z-index: -1;
    max-width: 200px;
    max-height: 100px;
}

@media (max-width: 999px) {
    img.badge {
        opacity: 40%;
    }

    a.training {
        opacity: 40%;
        font-size: 18px !important
    }
}

img.ccs {
    position: fixed;
    right: 0px;
    bottom: 50px;
    z-index: -1;
    height: 75px;
    background: white;
}

a.training {
    position: fixed;
    right: 0px;
    margin: 5px;
    color: red;
    margin-top: 6px;
    top: 0px;
    z-index: 91;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#glblErrorCont .material-icons {
    display: none;
    position: absolute;
    right: 15px;
    top: 0px;
}

#glblErrorCont:hover .material-icons {
    display: block;
    cursor: pointer;
}

#glblError {
    max-height: 200px;
    overflow-y: auto;
    user-select: text;
}

#gdivConError, #gdivSesExpiry {
    background-color: red;
    color: white;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Alert Styles */
#gdivAlertFrame {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.alertdialog {
    position: fixed;
    z-index: 200;
}

.alertdialog-crew-alarm > div:first-child {
    background-color: #D50000;
}

.alertdialogbody:hover {
    /*text-decoration: underline;*/
    cursor: pointer;
    background-color: #EEEEEE;
    transition: color .4s, background .4s;
}

div.imdialog {
    /*position:fixed;*/
    z-index: 200;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(166,166,166,1);
    -moz-box-shadow: 0px 0px 10px 1px rgba(166,166,166,1);
    box-shadow: 0px 0px 10px 1px rgba(166,166,166,1);
}

    div.imdialog div.imhistdiv {
        height: 90px;
        width: 100%;
        vertical-align: top;
        overflow-y: scroll;
    }

    div.imdialog div.immsgdiv {
        height: 50px;
    }

        div.imdialog div.immsgdiv textarea {
            height: 50px;
            width: 80%;
            resize: none;
            float: left;
            display: inline;
        }

        div.imdialog div.immsgdiv button {
            height: 100%;
            width: 15%;
            float: right;
            display: inline;
        }

    div.imdialog div.imhistdiv div.imhistitmrcv {
        text-align: left;
        padding: 3px;
        background-color: white;
        margin-bottom: 8px;
        margin-right: 10%;
        white-space: pre-wrap;
    }

    div.imdialog div.imhistdiv div.imhistitminprog {
        background-color: #FFE082;
    }

    div.imdialog div.imhistdiv div.imhistitmrpy {
        text-align: left;
        padding: 3px;
        background-color: rgb(215, 235, 249);
        margin-bottom: 8px;
        margin-left: 10%;
        text-wrap: wrap;
        line-break: anywhere;
        user-select: text;
    }

    div.imdialog div.imhistdiv div.imhistitmrpypend {
        color: gray;
        white-space: pre-wrap;
        background-color: white;
    }

li.noresults {
    color: red;
    text-align: center;
}

#gdivSelectListData {
    overflow-y: scroll;
    height: 300px;
}

#gdivDeskListData {
    overflow-y: scroll;
    height: 450px;
}

    #gdivDeskListData tr.gtrDeskCA:hover {
        background-color: lightgrey;
    }

#gdivChannelListData {
    overflow-y: scroll;
    height: 450px;
}

    #gdivChannelListData tr.gtrDeskCA:hover {
        background-color: lightgrey;
    }

#gtblSelectListData tr:hover {
    cursor: pointer;
    background-color: lightgrey;
}

body, .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.textselect, input[type="text"], input[type="password"], textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

a.csvdownload {
    display: none;
    font-size: 18px;
    color: #e91e63;
}

    a.csvdownload:hover {
        color: red;
    }

a.csvdownloadclose {
    position: absolute;
    top: 0;
    right: 0;
}

    a.csvdownloadclose i.material-icons {
        font-size: 36px;
    }

a.csvdownloadicon {
    display: inline-block;
    height: 32px;
    width: 32px;
}

    a.csvdownloadicon i.material-icons {
        font-size: 48px;
    }

.iconexpand, .iconcollapse {
    float: right;
    font-size: 18px;
}

tr.rowcollapse .iconexpand {
    display: none;
}

tr.rowexpand .iconcollapse {
    display: none;
}

.gMapToolTip {
    display: none;
    position: absolute;
    z-index: 1;
    background: white;
    border: 2px solid lightgrey;
    pointer-events: none;
    padding: 6px;
    max-width: 500px;
}

/* Map Toolbar */
div.maptoolbar {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 100%;
}

/* Map Toolbar Icon */
div.maptoolbaricon {
    position: absolute;
    padding: 3px;
    margin: 0px;
    height: 25px;
    width: 25px;
    background-color: white;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    color: #03A9F4;
}

    div.maptoolbaricon:hover {
        /*background: url('/static/img/32/setup.png') no-repeat grey center;*/
        background-color: lightgrey;
        cursor: pointer;
    }

.toolbar-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    border: 2px solid transparent;
}

.toolbar-active:hover {
    border: 2px outset grey;
    cursor: pointer;
}

.toolbar-pressed {
    background-color: #e91e63;
    border: 2px inset lightgrey;
}

    .toolbar-pressed i {
        color: white;
    }

.toolbar-disabled {
    background-color: white;
    pointer-events: none;
}

    .toolbar-disabled i {
        color: lightgrey;
        pointer-events: none;
    }

.ol-zoom {
    position: absolute;
    top: 40px;
    left: 4px;
}

    .ol-zoom button {
        min-width: 30px;
        min-height: 30px;
        width: 30px;
        height: 30px;
        display: block;
        background-color: white;
    }

        .ol-zoom button span.ui-button-text {
            padding: 0;
        }

        .ol-zoom button:hover {
            background-color: lightgrey;
            cursor: pointer;
        }

.ol-zoom-in {
    border-bottom: none;
}

.auditalt {
    color: #FF9800;
}

#gtblLog tbody tr:hover {
    background-color: lightgrey;
    cursor: pointer;
}
/*.rowselect {*/
.rowselect, tr.rowselect {
    background-color: #F8BBD0; /* TR added to bump up hierarchy */
}

.rowhover:hover {
    background-color: lightgrey;
    cursor: pointer;
    transition: background .4s;
}
/*.rowselect:hover {*/
.rowselect:hover, tr.rowselect:hover {
    background-color: #e91e6370; /* TR added to bump up hierarchy */
}

tr.inactive-record {
    color: #9E9E9E;
}

label.inputsectorlabel.inactive-record {
    background-color: #D32F2F !important;
}

div.inputsector.inactive-record {
    outline: 4px solid #D32F2F !important;
}

.mapmagnifier {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 150px;
    border: 2px solid grey;
    z-index: 150;
    pointer-events: none;
}

    .mapmagnifier canvas {
        border-radius: 150px;
    }

/* New Page Layout CSS >>> */
div.newlayout div.inputsector, #divTopTbr {
    width: 1000px;
}

div.newlayout .ui-accordion .ui-accordion-content {
    /*padding: 1px;*/
    padding: 3px;
    overflow: hidden;
}

div.newlayout table.newlayouttbl {
    width: 100%;
    table-layout: fixed;
}

    div.newlayout table.newlayouttbl > tbody > tr > td {
        vertical-align: top;
        padding: 0px;
        margin: 0px;
    }

    div.newlayout table.newlayouttbl tr td button[type=button] {
        height: 25px;
        min-height: 0px;
        vertical-align: inherit;
    }

div.newlayout label.inputlabel {
    width: 100px;
}

div.newlayout input[type="text"], div.newlayout input[type="password"], div.newlayout textarea, div.newlayout .inputrow button, div.newlayout label.ui-button, #IE7 div.newlayout button[type="button"], #IE8 div.newlayout button[type="button"] {
    width: 210px;
    margin-right: 0px;
}

div.newlayout .inputrow select {
    width: 212px;
}

div.newlayout .inputrow label.ui-button {
    min-height: 0px;
    height: 23px;
}

div.newlayout .inputrow .ui-button-text-only .ui-button-text {
    padding: .2em 1em;
}

/*div.newlayout div.inputrow input[type=checkbox] + label.ui-button {
    width: 210px;
}*/

div.newlayout div.labelautowidth label.ui-button {
    width: auto;
}

div.newlayout .colspan3 {
    width: 866px;
    height: 40px;
}

div.newlayout .colspan2 {
    width: 536px;
    height: 40px;
}

div.newlayout button {
    padding: 0px;
}
/* <<< New Page Layout CSS */

/*.lognotes {
    max-height: 125px;
    overflow: auto;
}*/

.gmap {
    width: 100%;
    height: 100%;
    z-index: 65;
}

.gmapclose {
    position: absolute;
    top: 100px;
    right: 0px;
    z-index: 66;
    background-color: white;
    font-size: 24px;
    height: 24px;
    width: 24px;
}

    .gmapclose:hover {
        cursor: pointer;
    }

/* Context Menu Styling */
.contextMenu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
}

    .contextMenu * {
        transition: color .4s, background .4s;
    }

    .contextMenu li {
        min-width: 150px;
        /*overflow: hidden;*/ /* GB - Removed due to Chrome62 causing massive padding issue */
        white-space: nowrap;
        padding: 0px;
        border-bottom: 1px solid #ecf0f1;
        list-style-type: none;
        background-color: white;
    }

        .contextMenu li.pressed {
            background-color: #E0E0E0;
            outline: 1px solid grey;
        }

        .contextMenu li i {
            font-size: 14px;
            padding-right: 3px;
        }

        .contextMenu li a {
            text-decoration: none;
            padding: 6px 20px 6px 10px;
            display: block;
        }

        .contextMenu li:hover {
            background-color: #ecf0f1;
            cursor: pointer;
        }

.overFlowy {
    overflow-y: scroll;
    height: 150px;
}

.contextMenu-parent > a {
    background: url("menu_right.png") no-repeat right;
}

.contextMenu-parent ul {
    display: none;
    position: absolute;
    /*left: 100%;*/
    padding-left: 0px;
    background-color: white;
    /*margin-top: -30px;*/
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
}

/*.contextMenu-parent:hover ul {
    display: block;
}*/

#gdivStatus {
    overflow-x: auto;
}

    #gdivStatus i {
        font-size: 16px;
    }

    #gdivStatus td {
        padding-left: 4px;
        padding-right: 4px;
        display: table-cell;
    }

        #gdivStatus td:hover {
            background-color: lightgrey;
            cursor: pointer;
        }

    #gdivStatus i {
        vertical-align: text-bottom;
    }

    #gdivStatus span {
        margin-left: 5px;
        white-space: pre;
    }

.hideele {
    display: none;
}

#IE7 ul.topbar li.topbarheader {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

/* FIX FOR BUTTONs REPLACING INPUTs */
.ui-button .ui-button-text {
    pointer-events: none;
}

.ui-button:hover {
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
}

.ui-button:active {
    background-color: #e91e63;
    color: #FFFFFF;
}

    .ui-button:active .ui-button-icon {
        background-image: url(../js/jquery-ui-1.13.2.custom/images/ui-icons_ffffff_256x240.png);
    }

.ui-button:not(.ui-checkboxradio-radio-label):active .ui-button-text {
    color: #FFFFFF;
}

/* Disable pointer events */
.disable-ui {
    pointer-events: none;
}

/* Behind Div code - used to fade/blur data behind dim layers*/
.behind-div {
    pointer-events: none;
    opacity: .90;
}

/* CHECK BOX */
input[type="checkbox"] + label {
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: left;
    min-width: 48px;
    padding: 0;
    margin-left: -8px;
    display: inline-block;
}

    input[type="checkbox"] + label::before {
        font-family: 'Material Icons';
        font-size: 24px; /* Preferred icon size */
        height: 1em;
        width: 1em;
        vertical-align: middle;
        border-radius: 100%;
        background-color: transparent;
        transition: .25s;
        content: 'check_box_outline_blank';
        color: #BDBDBD;
        padding: 4px;
        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
        /* Support for IE. */
        font-feature-settings: 'liga';
    }

input[type="checkbox"]:checked + label::before {
    content: 'check_box';
    color: #e91e63;
}

input[type="checkbox"] + label:hover::before {
    background-color: rgba(0, 0, 0, .06);
}

input[type="checkbox"] + label:active::before {
    background-color: rgba(255, 17, 98, .26);
}

input[type="checkbox"]:focus + label::before {
    background-color: rgba(255, 17, 98, .15);
}

input[type="checkbox"] {
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
}

/* END CHECK BOX */

/* RADIO BUTTON */
input[type="radio"] + label {
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: left;
    min-width: 48px;
    padding: 0;
    margin-left: -8px;
}

    input[type="radio"] + label::before {
        font-family: 'Material Icons';
        font-size: 24px; /* Preferred icon size */
        height: 1em;
        width: 1em;
        vertical-align: middle;
        border-radius: 100%;
        background-color: transparent;
        transition: .25s;
        content: 'radio_button_unchecked';
        color: #BDBDBD;
        padding: 4px;
        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
        /* Support for IE. */
        font-feature-settings: 'liga';
        display: inline-block; /* GB - Added for IE */
    }

input[type="radio"]:checked + label::before {
    content: 'radio_button_checked';
    color: #e91e63;
}

input[type="radio"] + label:hover::before {
    background-color: rgba(0, 0, 0, .06);
}

input[type="radio"] + label:active::before {
    background-color: rgba(255, 17, 98, .26);
}

input[type="radio"]:focus + label::before {
    background-color: rgba(255, 17, 98, .15);
}

input[type="radio"] {
    /*display: none;*/
    width: 0px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
    /* END RADIO BUTTON */

    /* Radio/Check Kill Other UI */

    input[type="checkbox"]:not(:checked) + label.ui-state-default,
    input[type="radio"]:not(:checked) + label.ui-state-default {
        color: black;
        background: transparent;
        box-shadow: none;
    }

input[type="checkbox"] + label.ui-button {
    border: 0;
    /*font-size: 11px;
    padding: 0 1em;*/
}

input[type="radio"] + label.ui-button {
    border: 0;
    /*font-size: 11px;
    padding: 0 1em 0 0;*/
}

input[type="checkbox"]:checked + label.ui-button,
input[type="radio"]:checked + label.ui-button {
    color: black;
    background: transparent;
    box-shadow: none;
    font-weight: 700;
}

input[type="checkbox"] + label > span.ui-button-text,
input[type="radio"] + label > span.ui-button-text {
    display: inline-block;
    padding: initial;
    padding: 0;
    margin: 0;
}

input[type="checkbox"] + label > span.ui-icon,
input[type="radio"] + label > span.ui-icon {
    display: none;
}
/* Radio/Check Kill Other UI End*/

.waves-effect {
    transition: color .15s .4s;
}

    .waves-effect.ui-state-active {
        transition: color 0s;
    }

    .waves-effect .ui-button-text {
        position: relative;
        z-index: 1 !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .waves-effect .waves-ripple {
        background: #e91e63 !important;
    }

#gcmdNav.waves-effect .waves-ripple, #gdivNav .waves-effect .waves-ripple {
    background: -webkit-radial-gradient(rgba(255, 64, 129, 0.2) 0, rgba(255, 64, 129, 0.3) 40%, rgba(255, 64, 129, 0.4) 50%, rgba(255, 64, 129, 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
    background: -o-radial-gradient(rgba(255, 64, 129, 0.2) 0, rgba(255, 64, 129, 0.3) 40%, rgba(255, 64, 129, 0.4) 50%, rgba(255, 64, 129, 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
    background: -moz-radial-gradient(rgba(255, 64, 129, 0.2) 0, rgba(255, 64, 129, 0.3) 40%, rgba(255, 64, 129, 0.4) 50%, rgba(255, 64, 129, 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
    background: radial-gradient(rgba(255, 64, 129, 0.2) 0, rgba(255, 64, 129, 0.3) 40%, rgba(255, 64, 129, 0.4) 50%, rgba(255, 64, 129, 0.5) 60%, rgba(255, 255, 255, 0) 70%) !important;
    transition: 0.5s;
}

#toolSearchResults .waves-ripple {
    display: none;
}

/* Feature Discovery */

div.feature-host {
    position: absolute;
    display: inline-block;
}

div.feature-host {
    position: absolute;
    width: 50vmax;
    top: 50vmax;
    border-radius: 100%;
    background: #e91e63;
    color: #FFFFFF;
    box-shadow: 0 0 3em #777;
}

div.feature-discovery {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    border-radius: 100%;
    background: #e91e63;
    color: #FFFFFF;
    opacity: 0;
    pointer-events: none;
    transition: 1s;
    z-index: 100;
}

    div.feature-discovery div.feature {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 0;
        width: 0;
        margin-left: 0;
        margin-top: 0;
        border-radius: 100%;
        background: #FFFFFF;
        transition: 0;
    }

    div.feature-discovery > * {
        display: block;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: .25s;
    }

    div.feature-discovery div.feature * {
        position: static;
    }

    div.feature-discovery.show-feature {
        height: 40vmax;
        width: 40vmax;
        margin-left: -40vmax;
        margin-top: -40vmax;
        padding-left: 40vmax;
        padding-top: 40vmax;
        opacity: .95;
        transition: 1s;
    }

        div.feature-discovery.show-feature > * {
            top: auto;
            left: auto;
            width: auto;
            height: auto;
            zoom: 1;
            transition: .25s;
        }

        div.feature-discovery.show-feature div.feature {
            height: 10vmax;
            width: 10vmax;
            margin-left: -5vmax;
            margin-top: -5vmax;
        }

    div.feature-discovery > :first-child {
        margin-top: 6vmax;
    }

    div.feature-discovery h3 {
        opacity: .87;
    }
/* Feature Dicovery */

/*
    Styles table with scrollable tbody and stationary thead e.g frmMailEnquiry - user select table
*/
.scrolltable-container {
    height: 400px;
}

.scrolltable thead tr:after {
    /*to compensate for the scrollbar width*/
    content: "";
    width: 17px;
    display: table-cell;
    background-color: #e91e63;
    border: 1px solid #e91e63;
}

.scrolltable {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    .scrolltable thead {
        flex: 0 0 auto;
        width: 100%;
    }

    .scrolltable tbody {
        flex: 1 1 auto;
        display: block;
        overflow-y: scroll;
    }

        .scrolltable tbody tr {
            width: 100%;
        }

        .scrolltable thead, .scrolltable tbody tr {
            display: table;
            table-layout: fixed;
        }

    .scrolltable th {
        background-color: #e91e63;
        color: white;
        height: 26px;
        text-align: left;
        border-radius: 0;
        border-spacing: 0;
        border-top: 1px solid #e91e63;
        border-bottom: 1px solid #e91e63;
    }

    .scrolltable tr, .scrolltable td {
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid lightgrey;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        word-wrap: break-word;
    }

/* Lists */

div.scrolllist > div {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}

div.scrolllist input[type="checkbox"] {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

div.scrolllist .scrolllist-inactiverecord {
    color: #bdbdbd !important;
}

/* Material icons in inputsector labels */

.inputsectorlabel-icon {
    color: white;
    vertical-align: middle;
}

/* File selects */

label.filelabel {
    border: 1px solid #DDDDDD;
    cursor: pointer;
    height: 24px;
    margin-top: 1px;
    padding-top: 0px;
    width: 4%;
    text-align: center;
    box-sizing: border-box;
}

input.filevalue {
    width: 34%;
    margin-left: -9px;
}

div.narrowsector2 label.filelabel {
    width: 8%;
}

div.narrowsector2 input[type="text"].filevalue {
    width: 52%;
}

/* Simple dividers */

div.divider-top {
    padding-bottom: 10px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 10px;
}

div.divider-bottom {
    padding-top: 10px;
    border-top: 1px solid #DDDDDD;
    margin-top: 10px;
}

/* Container for popup windows */
div.popup-container {
    background-color: transparent;
}

/* Dropdown menus - e.g. Resource Manager Record */

/* The dropdown container */
.dropdown {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

/* The dropdown button text/icon */
.dropdown-title {
    margin-left: -7px;
}

.dropdown-title-icon {
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99;
}

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

        /* Add a grey background color to dropdown links on hover */
        .dropdown-content div:hover {
            background-color: #ddd;
            cursor: pointer;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Align link text with icon */
.dropdown-label {
    vertical-align: super;
    margin-left: 5px;
    cursor: pointer;
}

/* Dropdowns against a record - to be shown when opening a valid record id */
.dropdown-record {
    display: none;
}

/* Styles for the Colour Picker widget */
.mcs-colour {
    cursor: pointer;
}

.mcs-sample {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    transition: all .4s ease-in-out .1s !important;
}

.mcs-swatch {
    margin: 0 auto 0 auto;
    width: 250px;
    height: 100px;
    background-image: none;
}

.mcs-slider {
    margin: 15px auto 15px auto;
    clear: left;
    width: 250px;
}

.mcs-red .ui-slider-range {
    background: #ef2929 !important;
}

.mcs-red .ui-slider-handle {
    border-color: #ef2929;
}

.mcs-green .ui-slider-range {
    background: #8ae234 !important;
}

.mcs-green .ui-slider-handle {
    border-color: #8ae234;
}

.mcs-blue .ui-slider-range {
    background: #729fcf !important;
}

.mcs-blue .ui-slider-handle {
    border-color: #729fcf;
}

.mcs-label {
    font-size: 18px;
    padding: 6px 6px 10px 8px;
    display: block;
}

.mcs-row {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.mcs-cell {
    display: table-cell;
    border: 1px solid #DDDDDD;
    width: 30%;
    vertical-align: top;
}

.mcs-basic, .mcs-custom {
    border: 1px solid #DDDDDD;
    height: 100%;
    width: 100%;
}

.mcs-custom-add, .mcs-custom-del {
    position: fixed;
    margin-top: 4px;
}

.mcs-sub-cell {
    display: table-cell;
    width: 30%;
    padding: 3px;
}

.mcs-sub-row {
    display: table;
    height: 35px;
    width: 95%;
    padding-left: 6px;
    padding-right: 6px;
    table-layout: fixed;
}

/* Audit window */

#gdivAudit > div > div label:not(:nth-child(1)) {
    width: 118px;
}

#gdivAudit > div > div label:nth-child(1) {
    width: 172px;
}

.divaudit-jrnyopt {
    display: none;
}

#txtAuditText {
    margin-left: 8px;
    width: 329px;
}

/* Pending Jrnys */

#gTblPending {
    width: 6000px;
}

#gDivPendingContainer {
    width: 100%;
    overflow: auto;
    height: 60vh;
}

#gDivPending {
    width: 80vw;
    margin-left: -40vw;
}

#gDivPendingSrch {
    margin-top: 5px;
}

#gTblPending > thead > tr > th {
    z-index: 2;
}

#gTblPending > tbody > tr td {
    position: relative;
}

#gTblPending > tbody > tr > td > div {
    height: 5vh;
    width: 3.7vw;
    text-overflow: ellipsis;
    overflow: hidden;
}

#gTblPending > tbody > tr.highlight {
    background: lightgrey;
    box-shadow: 0px 0px 2px 4px lightgrey;
}

    #gTblPending > tbody > tr.highlight > td > div > div {
        position: absolute;
        max-height: 20vh;
        background: lightgrey;
        z-index: 1;
        max-width: 3.7vw;
        margin-bottom: 5px;
        box-shadow: 0px 0px 2px 5px lightgrey;
    }

#gTblPending > tbody > tr.dim {
    opacity: 0.5;
}

#gDivPendingSrch > table {
    width: 100%;
    margin: 0 auto;
}

#gDivPendingSrch label.inputlabel {
    width: 35%;
}

#gDivPendingSrch input {
    width: 118px;
}

@media print {
    #gDivPending {
        width: 100vw;
        margin-left: 0px;
        left: 0;
    }
}

#gTblPending thead tr th,
#gTblPending tbody tr td {
    white-space: normal;
    overflow: visible;
    text-overflow: ellipsis;
}

#gTblPending tbody tr:hover,
#gTblPending tbody tr:hover td {
    background: lightgrey;
}

/* Tooltip - https://chrisbracco.com/a-simple-css-tooltip/ */
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    position: relative;
}

    /* Base styles for the entire tooltip */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after {
        position: absolute;
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        pointer-events: none;
    }

    /* Show the entire tooltip on hover and focus */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }

    /* Base styles for the tooltip's directional arrow */
    .tooltip:before,
    [data-tooltip]:before {
        z-index: 1001;
        border: 6px solid transparent;
        background: transparent;
        content: "";
    }

    /* Base styles for the tooltip's content area */
    .tooltip:after,
    [data-tooltip]:after {
        z-index: 1000;
        padding: 8px;
        width: 160px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #FFFFFF;
        content: attr(data-tooltip);
        font-size: 14px;
        line-height: 1.2;
    }

    /* Directions */

    /* Top (default) */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after,
    .tooltip-top:before,
    .tooltip-top:after {
        bottom: 100%;
        left: 50%;
    }

    [data-tooltip]:before,
    .tooltip:before,
    .tooltip-top:before {
        margin-left: -6px;
        margin-bottom: -12px;
        border-top-color: #000;
        border-top-color: hsla(0, 0%, 20%, 0.9);
    }

    /* Horizontally align top/bottom tooltips */
    [data-tooltip]:after,
    .tooltip:after,
    .tooltip-top:after {
        margin-left: -80px;
    }

    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after,
    .tooltip-top:hover:before,
    .tooltip-top:hover:after,
    .tooltip-top:focus:before,
    .tooltip-top:focus:after {
        -webkit-transform: translateY(-12px);
        -moz-transform: translateY(-12px);
        transform: translateY(-12px);
    }

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform: translateX(-12px);
    transform: translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    transform: translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    transform: translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}

.training-system {
    background-color: #fff9c4 !important;
}

.read-only-system {
    background-color: #00FFFF !important;
}

/* Tree View List */
div.tree-view-list {
    overflow-y: scroll;
    height: 450px;
}

    div.tree-view-list tr.trParent:hover {
        background-color: lightgrey;
    }

input[type="checkbox"]:checked.tree-view-list-partial + label::before {
    content: attr(data-icon);
    color: #e91e63;
    text-transform: none;
}
/* / Tree View List */

.newMail {
    animation: 1.4s newMailAlert infinite;
}

@keyframes newMailAlert {
    0% {
        background: red;
        color: white;
    }

    50% {
        background: white;
        color: black;
    }

    100% {
        background: red;
        color: white;
    }
}

/* Close button on records */
.btn-close {
    border: 2px solid #D32F2F !important;
}

/*Print Destination window*/
#divPrintDestination {
    display: none;
}

#divPrintType {
    height: 305px;
}

.printOptions {
    transition: .5s;
    overflow: hidden;
    border-top: 1px solid #BDBDBD;
    border-bottom: 1px solid #BDBDBD;
    width: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .printOptions.selected {
        padding-top: 5px;
        padding-bottom: 5px;
        height: 100px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .printOptions:not(.selected) {
        height: 0px;
        border: none;
    }

    .printOptions > .inputrow label.inputlabel {
        width: 26%;
    }

    .printOptions > .inputrow input[type="text"] {
        width: 60%;
    }

    .printOptions > div.inputrow select {
        width: 60%;
    }

    .printOptions > .inputrow {
        width: 100%;
        display: block;
    }

#divPrintType > label {
    display: block;
    text-align: center;
}

#divPrintType span.ui-button-text {
    width: 8vw;
}

#divPrintType input[type="radio"] + label::before {
    font-size: 35px;
}

#divPrintType input[type="radio"] + label[for="radPrint"]::before {
    content: 'print';
}

#divPrintType input[type="radio"] + label[for="radPDF"]::before {
    content: 'picture_as_pdf';
}

#divPrintType input[type="radio"] + label[for="radHTML"]::before {
    content: 'code';
}

#divPrintType input[type="radio"] + label[for="radCSV"]::before {
    content: 'assignment';
}

#divPrintType input[type="radio"]:checked + label::before {
    color: #e91e63;
    text-transform: none;
}

div#gdivLinkedAbortAssociated {
    width: 55%;
    margin-left: 0 !important;
    transform: translateX(-50%);
}

input#chkAssociatedJourney {
    height: 15px;
    width: 15px;
    position: relative;
}

.pinkColour,
.blueColour,
.greenColour,
.redColour,
.orangeColour,
.purpleColour,
.blackColour,
.openColours {
    height: 40px;
    width: 40px;
    text-align: center;
    margin: 5px 2px 5px 2px;
    cursor: pointer;
    line-height: 40px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.5s;
    box-shadow: 2px 2px 6px #6d6d6d;
    border: 2px solid #25252525;
}

.pinkColour {
    background: #e91e63;
    color: #ffffff;
    border: 2px solid black;
}

.blueColour {
    background: #2196f3;
    color: #ffffff;
}

.greenColour {
    background: #41a535;
    color: #ffffff;
}

.redColour {
    background: #ff5252;
    color: #ffffff;
}

.purpleColour {
    background: #e040fb;
    color: #ffffff;
}

.orangeColour {
    background: #ffab40;
    color: #000000;
}

.blackColour {
    background: #292929;
    color: #ffffff;
}

.openColours i.material-icons {
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 40px;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: black;
}

/*#gdivUserSettings {
    box-shadow: 3px 3px 25px;
}*/
#gdivUserSettings .inputsector {
    width: 90%;
}

.inputrow.colourGrid {
    position: relative;
    display: inline-flex;
    grid-auto-flow: column;
    justify-content: left;
}

p.changeColourWarning,
p.changeAlertWarning {
    font-size: 11px;
    text-align: right;
    font-style: italic;
    margin-bottom: 0px;
}

.userSettingsHeader span {
    text-transform: capitalize;
}

.alertsContent {
    display: inline-flex;
    box-shadow: 2px 2px 5px #828282;
    text-align: center;
    cursor: pointer;
    margin: 5px;
}

    .alertsContent i.material-icons {
        font-size: 40px;
        text-align: center;
        background-color: transparent !important;
        display: block;
        min-width: 90px;
    }

    .alertsContent label.inputlabel {
        padding-top: 5px;
        display: inline-block;
        text-align: center;
        width: 100% !important;
    }

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCCCCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFFFFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

    .custom-menu li {
        padding: 8px 12px;
        cursor: pointer;
        list-style-type: none;
        transition: all .3s ease;
        user-select: none;
    }

        .custom-menu li:hover {
            background-color: #DEF;
        }

#tblMain thead {
    background: #E91E63 !important;
}

.sorttable tbody tr.rowselect:not(.no-result),
.sorttable tbody tr.rowselect:not(.no-result) td {
    background: #FCE4EC !important;
}

/*Scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

#divMainSearch {
    font-size: 16px;
    width: 790px;
    margin: auto;
    height: 44px;
    margin-bottom: 12px;
    position: relative;
    margin-top: 15px;
}

#inputMainSearch {
    background-color: #FFFFFF;
    border: none;
    border-radius: calc(0.5 * 44px);
    font-family: inherit;
    font-size: inherit;
    height: 100%;
    outline: none;
    padding-inline-end: 20px;
    padding-inline-start: 50px;
    position: relative;
    width: 100%;
    z-index: 80;
}

#iMainSearch {
    color: #616161;
    position: absolute;
    top: 13px;
    left: 16px;
    font-size: 21px;
    cursor: default !important;
    z-index: 80;
}

#divMainShortcuts {
    display: flex;
    flex-wrap: wrap;
    height: calc(var(--row-count) * var(--tile-size));
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 2px;
    transition: opacity 300ms ease-in-out;
    width: 600px;
    margin: auto;
    zoom: 1.3;
    margin-top: 0px;
    padding-bottom: 20px;
    background: #FFFFFF;
    border-radius: calc(0.5 * 44px);
}

.main-shortcut {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    height: var(--tile-size);
    opacity: 1;
    outline: none;
    position: relative;
    text-decoration: none;
    transition-duration: 300ms;
    transition-property: left, top;
    transition-timing-function: ease-in-out;
    user-select: none;
    width: var(--tile-size);
}

.main-shortcut-icon {
    align-items: center;
    /*background-color: rgba(241, 243, 244, 1);*/
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: var(--icon-size);
    justify-content: center;
    margin-top: 16px;
    width: var(--icon-size);
}

.main-shortcut-title {
    align-items: center;
    border-radius: 12px;
    color: rgba(0, 0, 0, 1);
    display: flex;
    height: var(--title-height);
    line-height: calc(var(--title-height) / 2);
    margin-top: 6px;
    padding: 2px 8px;
    width: 90%;
    text-align: center;
}

.main-shortcut-icon i.material-icons {
    font-size: 38px;
    /*font-size: var(--icon-size) !important;*/
}

.main-shortcut-title span {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: calc(var(--title-height) * 0.35);
}

.main-shortcut:hover {
    background: #f5f5f5;
}

img.badge.main-search,
img.badgesystems.main-search {
    position: fixed;
    z-index: -1;
    max-height: 148px;
    top: 46px;
    left: calc(50% + 42px);
    transform: translate(-50%);
}

#toolSearchResults.main-search {
    display: block;
    position: fixed;
    overflow: auto;
    padding: 1em;
    background: #FFFFFF;
    box-shadow: rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
    opacity: 1;
    transition: .5s;
    z-index: 75;
    position: absolute;
    left: 0;
    max-width: none;
    max-height: calc(76vh - 165px);
    top: 0px;
    border-radius: calc(0.5 * 44px);
    overflow: hidden;
    padding-top: 44px;
    height: calc(76vh - 165px);
    width: 96%;
}

    #toolSearchResults.main-search ul {
        list-style: none;
        padding: 0px;
        padding-left: 3px;
        padding-right: 3px;
        background: #FFFFFF;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        /*margin-right: -30px;*/
        margin-left: -15px;
        padding-left: 30px;
    }

        #toolSearchResults.main-search ul.navSubSec {
            margin-top: 0px;
        }

            #toolSearchResults.main-search ul.navSubSec li.searching-match {
                top: 0px;
                margin-top: 0px;
                /*margin-left: -30px;*/
            }

    #toolSearchResults.main-search strong::before {
        visibility: hidden;
    }

    #toolSearchResults.main-search strong {
        font-weight: 400;
    }

    #toolSearchResults.main-search a {
        font-weight: 400;
    }

    #toolSearchResults.main-search .navSubSec li:not(.searching-match) a {
        min-height: 100px;
    }

#gdivNav.main-search > div > ul > li:first-child {
    display: none;
}

#toolSearchResults.main-search.searching + #divMainSearchInput {
    box-shadow: none;
}

#divMainSearchInput {
    height: 100%;
    width: 100%;
    border-radius: calc(0.5 * 44px);
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}

#toolSearchResults.main-search .navSubSec.nomatch li {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

#toolSearchResults.main-search .navSubSec li {
    position: relative;
}

.main-shortcut-more {
    border-radius: 15px;
    margin-top: 5px;
    margin-right: 5px;
    color: #616161 !important;
    font-size: 16px !important;
    padding: 2px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

:hover > .main-shortcut-more {
    opacity: 1;
}

.main-shortcut-more:hover {
    background: #E0E0E0;
}

#toolSearchResults.main-search ul::-webkit-scrollbar {
    display: inherit !important;
}

#toolSearchResults.main-search ul::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(158,158,158,0.8);
    height: 35px;
}

#toolSearchResults.main-search ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgb(0 0 0 / 30%);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-top: 52px;
    background: transparent;
}

@media (min-width: 701px) and (max-width: 900px) {
    #divMainSearch {
        width: 620px;
        margin-left: 45px;
    }

    img.badge.main-search,
    img.badgesystems.main-search {
        max-height: 118px;
        top: 66px;
    }

    #divMainShortcuts {
        width: 450px;
        margin-left: 38px;
        --tile-size: 90px !important;
    }

    .main-shortcut {
        --tile-size: 90px !important;
    }

    .main-shortcut-icon {
        --icon-size: 45px !important;
    }

    .main-shortcut-title {
        --title-height: 30px !important;
    }

    #toolSearchResults.main-search {
        width: 590px;
    }

        #toolSearchResults.main-search .navSubSec li {
            width: 122px;
        }

        #toolSearchResults.main-search .material-icons {
            font-size: 44px;
        }

        #toolSearchResults.main-search .navSubSec li:not(.searching-match) a {
            font-size: 13px;
            min-height: 80px;
        }
}

@media (max-width: 700px) {
    #divMainSearch {
        width: 480px;
    }

    img.badge.main-search,
    img.badgesystems.main-search {
        max-height: 100px;
        top: 88px;
    }

    #divMainShortcuts {
        width: 360px;
        --tile-size: 72px !important;
    }

    .main-shortcut {
        --tile-size: 72px !important;
    }

    .main-shortcut-icon {
        --icon-size: 36px !important;
    }

    .main-shortcut-title {
        --title-height: 24px !important;
    }

    #toolSearchResults.main-search {
        width: 450px;
        /*left: -32px;*/
        z-index: 80;
    }

        #toolSearchResults.main-search .navSubSec li {
            width: 100px;
        }

        #toolSearchResults.main-search .material-icons {
            font-size: 35px;
        }

        #toolSearchResults.main-search .navSubSec li:not(.searching-match) a {
            font-size: 11px;
            min-height: 70px;
        }
}

#divStartSearch {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 10px;
    background-color: #EFEFEF;
    color: #757575;
}

#divNoResults {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #757575;
}

    #divNoResults .searchResultsIcon {
        width: 70px;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        background-color: #757575;
        border-radius: 50%;
    }

    #divNoResults .material-icons {
        font-size: 50px;
        line-height: 70px;
        width: 100%;
        color: #FFFFFF;
        padding-bottom: 25px;
    }

#gTblDeviceDiagnostics {
    border-collapse: collapsed;
    border-spacing: 0px;
    padding: 15px;
}

    #gTblDeviceDiagnostics td {
        padding: 10px;
        background: #efefef;
        line-height: 25px;
    }

    #gTblDeviceDiagnostics .material-icons {
        color: #ffffff;
    }

#divSettingsOpts, #divDeviceDiagnosticsOpts {
    position: absolute;
    left: 13px;
    margin-top: 2px;
}

    #divDeviceDiagnosticsOpts i.material-icons {
        padding-top: 2px;
        padding-left: 5px;
        padding-right: 5px;
        margin-right: 6px;
        padding-bottom: 3px;
    }

        #divDeviceDiagnosticsOpts i.material-icons:hover {
            background: #E0E0E0;
        }


.cds-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 7px;
    align-items: stretch;
}

.cds-row-center {
    align-items: center;
}

.cds-col {
    flex: 1;
}

.cds-col-2 {
    flex: 2;
}

.cds-col-auto {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.cds-mb-0 {
    margin-bottom: 0px !important;
}

.cds-mb-1 {
    margin-bottom: 5px;
}

.cds-mb-2 {
    margin-bottom: 10px;
}

.cds-mb-3 {
    margin-bottom: 15px;
}

.cds-divider {
    border-top: 1px solid #d2d2d2;
}

.cds-divider-right {
    padding-right: 10px;
    border-right: 1px solid #d2d2d2;
}

.cds-mb-1 {
    margin-bottom: 5px;
}

.cds-mb-2 {
    margin-bottom: 10px;
}

.cds-mb-3 {
    margin-bottom: 15px;
}

.cds-widget {
    border: 1px solid #CCCCCC;
    background: #EFEFEF;
    padding: 8px;
    font-size: 32px;
}

    .cds-widget h4 {
        margin: 0;
        font-size: 14px;
        padding-bottom: 8px;
    }

.cds-container {
    max-width: 96%;
    margin: 0 auto;
}

.pulse-blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 10px;
    height: 20px;
    width: 20px;
    transform: scale(1);
    animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.pulse-blob.orange {
    background: rgba(255, 121, 63, 1);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
    }
}

.pulse-blob.green {
    background: rgba(51, 217, 178, 1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}

.inputsector-style2 .inputsectorlabel {
    background: #efefef;
    padding: 12px 28px;
    color: #000;
    box-shadow: unset !important;
    font-weight: 700;
}

.inputsector-style2 .inputsectorlabel-icon {
    color: #E91E63 !important;
}

.pageSubHeader {
    border-bottom: 3px solid #E91E63;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 50px;
}

    .pageSubHeader h1 {
        font-size: 1.2rem;
        line-height: 1rem;
    }

.ol-rotate {
    position: absolute;
    top: 105px;
    margin-left: 5px;
}

.ol-rotate-reset {
    width: 28px !important;
    min-width: unset !important;
}

    .ol-rotate-reset .ui-button-text {
        padding: 0px !important;
        width: 22px !important;
    }

.ol-compass {
    display: block;
}

.scrolltable-container {
    border: 1px solid #EFEFEF;
}

    .scrolltable-container table {
        width: 100%;
        margin: 0px;
    }

        .scrolltable-container table thead {
            position: sticky;
            top: 0;
            z-index: 5;
        }

.missedRowSel > span, .missedRowSel > td {
    /* background-color:#84FFFF !important;
            background-color:#EC407A !important;*/
    /*color: white;*/
    background-color: #F8BBD0 !important;
}

.ui-selectmenu-button {
    border: 1px solid transparent;
}

.ui-menu .ui-menu-item {
    padding: 0px;
}

.ui-menu .ui-menu-item-wrapper {
    padding: 6px;
    border-bottom: 1px solid #EFEFEF;
    margin: 0 2px;
}

    .ui-menu .ui-menu-item-wrapper.ui-state-active {
        background-color: #E0E0E0;
        outline: 1px solid #CCCCCC;
        border: 0px;
        color: #333333;
        font-weight: normal;
        box-shadow: unset;
    }

.actCol {
    display: inline-block;
    float: right;
    width: 25%;
}

ul.autocomplete li.inactive .actCol {
    color: #000000 !important;
}

#divMapContainer {
    background-color: #d5f4f8 !important;
}

.sticky-table-tr {
    position: sticky;
    z-index: 10;
    top: 0;
}

aside {
    position: fixed;
    bottom: 35px;
    left: 0px;
    width: 100vw;
    background-color: #333; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    color: #fff; 
    padding: 4px; 
    border-radius: 8px;
}

.marquee-warning {
    background: #FFC107;
    color: #000000;
    font-weight: 600;
    letter-spacing: 1.5px;
}

/* Marquee styles */
.marquee {
    --gap: 1rem;
    position: relative;
    flex: 1;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__content {
    display: flex;
    min-width: 100%;
    margin: 0px;
    padding: 2px;
}

@keyframes scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
    .marquee__content {
        animation-play-state: paused !important;
    }
}

/* Enable animation */
.enable-animation .marquee__content {
    animation: scroll 30s linear infinite;
}

.marquee__content:hover {
    animation-play-state: paused;
}
/* Reverse animation */
.marquee--reverse .marquee__content {
    animation-direction: reverse;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
    max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
    position: absolute;
    top: 0;
    left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
    animation-name: scroll-abs;
}

@keyframes scroll-abs {
    from {
        transform: translateX(calc(100% + var(--gap)));
    }

    to {
        transform: translateX(0);
    }
}

.marquee__content li {
    display: inline-block;
    margin-left: 2px;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0, 0.5);
    flex: none;
}

    .marquee__content li .cds-row {
        align-items: center;
    }

.marquee_icon .material-icons {
    vertical-align: middle;
    padding: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}