﻿

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: #000000;
    letter-spacing: .75px;
}

html.mobile body {
    margin-left: 0;
    margin-right: 0;
}

:focus {
    outline-color: #E91E63;
}
button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, div:focus, span:focus {
    outline: 2px solid #E91E63;
}


#gdivBG {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    background-color: #212121;
    position: fixed;
    width: 101%;
    /*height: 100%;*/
    /*height: 3400px;*/
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    z-index: 100;
    height: 100vh !important;
}

#gdivMsgBox, #gdivInputBox {
    position: fixed;
    /*min-width: 400px;*/
    /*min-height: 250px;*/
    /*background-color: #FFFFFF;*/
    /*width: 60%;*/
    /*height: 30%;*/
    top: 37.5%;
    /*left: 20%;*/
    z-index: 100;
    transform: translate(10px, 10px);
}

#gdivMsgBox {
    background-color: white;
    border-radius: 4px;
    padding: 0rem;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    width: 600px !important;
    margin-left: -300px !important;

}

#gcmdMsgOK {
    background-color: #C2185B;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0.25rem;
}

#gdivContentPlaceholder {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    /* margin-left: -200px; */
    /* margin-right: -100px; */
    /* margin-top: -200px; */
    /* margin-bottom: -100px; */
    background: url(data:image/png;base64,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) no-repeat;
    z-index: 99999;
    background-position: center;
    background-color: #fff;
}

#gtblAudit div,  #gtblAudit object {
	float:left;
	line-height:25px;
	margin-right:10px;
}

#gtblAudit .tblAuditDetails object {
	height:25px;
	border:1px solid #EFEFEF;
	border-radius:5px;
	background:#FFFFFF;
	padding:2px;
	border:1px solid #CCCCCC;
}

#gtblAudit .tblAuditDetails object:hover {
	cursor:pointer;
}

#gtblAudit .auditDataColour {
	float:left;
	width:25px;
	height:25px;
	border-radius:5px;
	border:1px solid #CCCCCC;
	-webkit-box-shadow: 2px -2px 15px -5px rgba(0,0,0,0.57); 
	box-shadow: 2px -2px 15px -5px rgba(0,0,0,0.57);
}

#gDivExpandImage {
	padding-top:30px;
	padding-bottom:30px;
	background-color:transparent !important;
	border:0px !important;
	text-align:center;
	box-shadow:0 0 0 0 !important;
}
	#gDivExpandImage img {
		max-width:600px;
	}

	#gDivExpandImage #gcmdExpandImageClose {
		top:0px;
		right:0px;
		position:fixed;
	}
	
	#gDivExpandImage #gcmdExpandImageClose .material-icons { 
		color:#FFFFFF;
		font-size:3rem;
	}
	

html.desktop #gdivMsgBox, html.desktop #gdivInputBox {
    min-width: 400px;
    /*left: 20%;
    width: 60%;*/
    left: 50%;
    width: 800px;
}

html.desktop #gdivMsgBox:not(.ui-draggable), html.desktop #gdivInputBox:not(.ui-draggable) {
    margin-left: -400px;
}

html.mobile #gdivMsgBox, html.mobile #gdivInputBox {
    width: 100%;
}

#gtxtInputBox {
    width: 95%;
    margin: 1em;
    min-height: 4em;
}

#gtxtInputBoxPW {
    width: 250px;
}

#glblMsgLbl {
    padding: 0 5rem;
    text-align: center;
}

#divSaveWarning {
    text-align: center !important;
    font-weight: normal !important;
    font-size: 0.8rem;
    padding: 1rem;
}

#gcmdMsgYes {
    background-color: #C2185B;
    border-radius: 4px;
    color: #ffffff;
    /*    font-size: 1rem;*/
}

#glblMsgLbl, #glblInputBoxIntruc {
    white-space: pre-wrap;
}

#gdivSubmitting {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    /*height: 200px;*/
    margin-top: -100px;
    margin-left: -150px;
    /*background-color: #FFFFFF;*/
    z-index: 100;
    overflow: hidden;
}

#gimgSubmitting {
    display: none;
    overflow: hidden;
}
/*#gdivSubmittingInt
{
    margin-top: 20%;
}*/

#gdivSubmittingInt {
    margin: 0 auto;
    overflow: hidden;
}

    #gdivSubmittingInt svg,
    #gdivPageLoad svg {
        animation: epr_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;
    }

#gdivPageLoad svg {
    position: fixed;
    top: CALC(50% - 122px);
    left: CALC(50% - 122px);
    width: 244px;
    z-index: 1;
    animation: epr_rotate 1s linear infinite;
}

    #gdivSubmittingInt svg circle,
    #gdivPageLoad svg circle {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: epr_dash 1.5s ease-in-out infinite, epr_color 6s ease-in-out infinite;
        stroke-linecap: round;
        stroke-width: 4px;
    }

    #gdivPageLoad svg circle {
        animation: epr_dash .75s ease-in-out infinite, epr_color 3s ease-in-out infinite;
    }

@keyframes epr_rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes epr_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 epr_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: #EC407A;
}

.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 {
    /*width: 800px;*/
    margin-left: auto;
    margin-right: auto;
    padding: .2em;
    /*margin-top: .3em;*/
    /*background-color: aliceblue;*/
    /*border: 1px ridge gray;*/
}

html.desktop div.inputsector {
    width: 800px;
}

html.desktop div.normaldiv 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: 39%;
    }*/

    /*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;
    margin-bottom:10px;
}

div.rightrow {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: right;
    padding: .2em;
}

label.inputsectorlabel, .ui-accordion .ui-accordion-header {
    font-size: 16px;
    display: block;
}

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;
    z-index: 1;
}

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: #FFFFFF;
}

span.inputspan {
    /*padding: .2em;*/
    padding-top: 5px;
    display: inline-block;
}

.ui-widget-content {
    background-color: #FFFFFF;
    color: #000000;
}

.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: transparent;
        color: #880e4f;
        border: 2px solid transparent;
        font-weight: normal;
        /*font-weight: 700;*/
    }

    .ui-state-default, .ui-widget-content button.ui-state-default, .ui-widget-header button.ui-state-default {
        /*text-transform: uppercase;*/
        text-overflow: ellipsis;
    }

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-header {
        background-color: #E91E63;
        color: #FFFFFF;
    }

.ui-button.ui-state-hover, a.ui-state-default.ui-state-hover {
    background-color: #EEEEEE;
}

.ui-state-active.ui-state-hover {
    background-color: #FF80AB;
}

a.ui-state-default.ui-state-highlight {
    background-color: #FFF59D;
    color: grey;
}

#gimgMsgBoxIcon {
    color: rgb(244, 67, 54);
    padding: 1rem 0 0 0;
    font-size: 65px;
}

#glblMsgBoxTitle {
    /*    font-size: 2rem;*/
    font-weight: bold;
    padding: 0 5rem 1rem;
    text-align: center;
    background-color: #FFFFFF !important
}

#gimgInputBoxImg {
    font-size: 42px;
}


hr {
    border-style: outset;
}

/*input, textarea*/
input[type="text"], input[type="password"], textarea, input[type="file"] {
    transition: all .5s ease-in-out 0s;
    transition: background .4s ease-in-out .1s, border .4s ease-in-out .1s;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 2px solid #E0E0E0;
    width: 38%;
    min-height: 20px;
    font-family: Helvetica;
    font-size: 12px;
    resize: none;
    letter-spacing: .75px;
}

html.mobile input[type="text"], html.mobile input[type="password"], html.mobile textarea {
    font-size: 16px;
}

div.inputrow input[type="text"], div.inputrow input[type="password"], div.inputrow textarea {
    margin-right: 9px;
    margin-top: 1px;
    background-color: #ffffff;
    font-weight: 700;
}


button[type="button"], button[type="submit"], button[type="reset"], button {
    padding: 15px;
    border-radius: 42px;
    background: transparent;
    border: 1px solid transparent;
    color: #880e4f;
    font-size: 14px;
    font-weight: 700;
}

a.linkbtn {
    padding: .18em;
    /*border: 1px solid #BBB;*/
    /*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;
}



/*#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: 8em;
    min-height: 1.75em;
}*/
/*div.inputrow input.required, div.inputrow textarea.required, select.required*/
input.required, textarea.required, select.required {
    background: 98% 50% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 20 20' height='28px' viewBox='0 0 20 20' width='28px' fill='%23FF7B7B'%3E%3Crect fill='none' height='20' width='20'/%3E%3Cpolygon points='16.81,7.8 15.31,5.2 11.5,7.4 11.5,3 8.5,3 8.5,7.4 4.69,5.2 3.19,7.8 7,10 3.19,12.2 4.69,14.8 8.5,12.6 8.5,17 11.5,17 11.5,12.6 15.31,14.8 16.81,12.2 13,10'/%3E%3C/svg%3E");
}

required.invalid {
  background-color: rgb(255, 123, 123) !important;
}
/*input, textarea, select
{
    background-color: #FFFFFF;
}*/
input[disabled], textarea[disabled], select[disabled], input[disabled].invalid, textarea[disabled].invalid, select[disabled].invalid {
    background-color: #F0F0F0 !important;
}
/*input:hover
{
    background-color: #EEEEF5;
}*/
/*input[disabled="disabled"]:hover
{
    background-color: #F0F0F0;
}*/
/*input:active
{
	transition: all 0;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}*/
/*input[type="text"], input[type="password"], textarea
{
	border: 1px solid #BBB;

    width: 38%;
}*/
/*input:focus, textarea:focus
{
	background: #FFFFEF;
	border: 1px solid #7C7;
}*/
/*input.required:focus, textarea.required:focus
{
    border-right:  6px solid lightgreen;
}*/

/*	Invalid field styling.	*/
/*input.invalid, textarea.invalid*/
input.invalid {
    background: #FFFFFF 98% 50% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 0 24 24' width='28px' fill='%23B00020'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Cpath d='M10 3h4v12h-4z'/%3E%3C/svg%3E") !important;
    border: 2px solid #b00020 !important;
    border-radius: 3px !important;
}

/*	Uppercase field, Short Time Special field styling.	*/
input.uppercase, textarea.uppercase, input.shorttimespecial, textarea.shorttimespecial {
    text-transform: uppercase;
    text-overflow: ellipsis;
}
/*	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: fixed;
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    border: 1px solid #BBB;
    z-index: 51;
    width: 600px;
    /*height: 300px;*/
    margin-top: -3.6rem;
    margin-left: 9.46rem;
    min-height: 100px;
    max-height: 300px;
}

div.normaldiv ul.autocomplete {
    position: absolute;
    margin-top: -3.6rem !important;
    width: 98%;
    left: 38px;
}

ul.autocomplete li b {
    font-weight: 500;
}

html .desktop .normaldiv ul.autocomplete {
    transform: translateX(-50%);
    left: 50%;
    margin-left: 0px;
}

html.mobile ul.autocomplete {
    width: 100%;
}

/*ul.autocomplete li {
    padding: 8px;*/
    /*transition: all .2s ease-in-out .0s;
	transition: background-color .5s ease-in-out .0s;*/
    /*background: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-weight: normal;*/
   /* font-size: 11px;*/
/*}*/

    ul.autocomplete li b {
       /* font-size: 13px;*/
       font-weight:700;
    }

    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;
    color: #1b5e20;
}
    /*	Highlighted item.	*/
    ul.autocomplete li:hover, ul.autocomplete li.hover {
        /*background: #DDF;*/
        /*border: 1px solid #77C;*/
        /*background: #d7ebf9 url("ui-bg_glass_100_e4f1fb_1x400.png") 50% 50% repeat-x;*/

        /*CEP requested pink hovers*/
        background: #F06292;
        cursor: pointer;
        color: #FFFFFF;
    }

    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: -1px;
        z-index: 1;
        outline: 1px solid #E91E63;
    }

    table.sorttable tr th {
        /*font-size: 12px;*/
        font-size: 11px;
        background-color: #E91E63;
        color: #FFFFFF;
        /*border-bottom: 2px solid lightgray;*/
        /*height: 3em;*/
        height: 26px;
        text-align: left;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        border: 1px solid #E91E63;
    }

    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 td::after {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 2px;
            content: '';
            border-left: 1px solid lightgrey;
        }
        table.sorttable tr.no-result td::after,
        table.sorttable tr td:last-of-type::after {
            content: none;
        }
            /*table.sorttable tr th:hover*/
            /*{*/
            /*background: #DDF;*/
            /*border: 1px solid #77C;*/
            /*cursor: pointer;*/
            /*}*/
            table.sorttable tr th.sorted {
                background: #DFD;
                /*border: 1px solid #7C7;*/
            }

    table.sorttable tr th.sorteddesc {
        background: #FDD;
        /*border: 1px solid #C77;*/
    }

/* Input Helper stylings.	*/
div.inputhelp {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #BBB;
    padding: .2em;
    /*width: 40em;
    margin-left: 100px;
    margin-right: auto;*/
    /*width: 70%;
	margin-left: 15%;
	margin-right: 15%;*/
    margin-top: -.15em;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    z-index: 50;
    /*-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);*/
}

html.desktop div.inputhelp {
    /*width: 40em;
    margin-left: 100px;
    margin-right: auto;*/
    left: 25%;
    width: 50%;
    margin-left: 0px;
    margin-right: 25%;
}

html.mobile div.inputhelp {
    width: 100%;
}
/*div.inputhelp.datepick b, div.inputhelp.datepick a
{
	margin-left: 17%;
	text-decoration: none;
}*/
/*div.inputhelp.datepick {
    width: 550px;
}*/
html.desktop div.inputhelp.datepick {
    /*width: 550px;*/
}

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: #FFFFFF;
        -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;
    /*position: fixed;*/
    top: 0;
    left: 0;
    right: 0;
    /*min-width: 800px;*/
    z-index: 90;
    margin: 0;
    padding: 0;
    /*background-color: #f2f5f7;*/
    /*background: #d7ebf9 url("ui-bg_glass_80_d7ebf9_1x400.png") 50% 50% repeat-x;*/
    /*background-color: #6ac5f7;*/
    background-color: #E91E63;
    border-bottom: 1px solid #BBB;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.topbarheader > a {
    color: #FFFFFF;
}

.topbarheader:hover > a {
    color: black;
}

html.desktop ul.topbar {
    min-width: 800px;
    position: fixed;
}

html.mobile ul.topbar {
    /*max-width: 500px;*/
}

#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-right: 2em;*/
        margin-left: 7px;
        margin-right: 7px;
    }

#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: #FFF;
    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 {
    /*transition: all .2s ease-in-out .0s;
	transition: background-color .5s ease-in-out .0s;*/
    text-align: left;
    text-decoration: none;
    display: block;
    /*padding: .5em;*/
    padding: .4em;
    /*border: 1px solid #f2f5f7;*/
    /*color: grey;*/
    font-size: 14px;
}
/*ul.topbar li a:hover + ul, ul.topbar li ul:hover {
	display: block;
}*/
ul.topbar li:hover ul, ul.topbar li ul:hover {
    display: block;
}
/*#IE7 ul.topbar li a:hover + ul, #IE7 ul.topbar li ul:hover {
	margin: 0px;
}*/
#IE7 ul.topbar li:hover ul, #IE7 ul.topbar li ul:hover {
    margin: 0px;
    margin-left: -3px;
}

ul.topbar li:hover {
    /*background: #DDF;*/
    /*background: #d7ebf9 url("ui-bg_glass_100_e4f1fb_1x400.png") 50% 50% repeat-x;*/
    background-color: #FFFFFF;
    /*border: 1px solid #77C;*/
}

#IE7 ul.topbar li:hover {
    background-color: #FEFFFF;
}

ul.topbar li ul li a:hover {
    /*background-color: #6ac5f7;*/
    background-color: #FF80AB;
    color: #FFFFFF;
}

#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;
    /*min-width: 800px;*/
    z-index: 98;
    /*z-index: 150;*/
    background: #FFF;
    border-top: 1px solid #BBB;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-align: center;
    vertical-align: middle;
    /*-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);*/
}

html.desktop div.bottombar {
    min-width: 800px;
}

html.mobile div.bottombar {
    /*max-width: 500px;*/
}

#gdivFooter {
    z-index: 98;
}

#gdivFooter:hover {
    z-index: 98;
}

.globalcentre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

div.normaldiv, div.iframediv {
    position: fixed;
    /*position: absolute;*/
    /*top: 1em;*/
    /*left: 50%;*/
    /*width: 800px;*/
    /*height: 700px;*/
    height: auto;
    /*margin-left: -400px;*/
    background-color: #FFFFFF;
    z-index: 100;
}

html.desktop div.normaldiv {

    width: 800px;
    /*min-height: 400px !important;*/
    max-height: 95vh !important;

    overflow: hidden;
    border: solid 2px #D81B60;
    /*padding: 24px;*/
    background-color: #FAFAFA;
    box-shadow: 0 0 1em #CCCCCC;
    /*width: 800px;
    margin-left: -400px;
    min-height: 400px;*/
    padding: 0px;
    overflow-y:auto;
}

html.desktop div.normaldiv > div.inputsector > div {
    max-height: calc(95vh - 6.5em);
    overflow: auto;
}

    html.desktop div.normaldiv:not(.ui-draggable) {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

html.desktop div.normaldiv > .inputsector {
    padding: 0px;
    margin-top: -2px;
}

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;
}

div.smalldiv {
    /*position:fixed;*/
    /*min-width: 450px;*/
    min-height: 400px;
    background-color: #FFFFFF;
    /*width: 50%;*/
    /*height: 50%;*/
    /*top: 25%;*/
    /*left: 25%;*/
    z-index: 100;
}

html.desktop div.smalldiv {
    position: fixed;
    min-width: 450px;
    /*width: 50%;
    left: 25%;*/
    left: 50%;
    width: 800px;
    margin-left: -400px;
    min-height: 400px;
    /*top: 25%;*/
    top: 0px;
}

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 {
    background-color: rgb(255, 123, 123);
}

#togjfx.jqfxdis {
    background-color: rgb(200, 255, 192);
}

#togjfx:hover, #gItemNewIM:hover, #gItemNewIMHelp:hover, #gcmdSetDesks:hover, #gcmdSetChannels:hover {
    cursor: pointer;
}

li.mailunread {
    background-color: rgb(255, 123, 123);
}

    li.mailunread:hover, li.mailunread #gItemMail:hover {
        background: rgb(255, 233, 237);
    }

img.badge {
    position: fixed;
    max-height: 88px;
    display: none;
    z-index: 90;
    height: 50px;
    right: 4px;
    top: 8px;
    color: #E91E63;
    background-color: #FFFFFF;
    border: 3px solid #E91E63;
    border-radius: 4px;
}

img.badgesystems {
    position: fixed;
    left: 95px;
    z-index: -1;
    max-height: 88px;
}

img.ccs {
    position: fixed;
    right: 1em;
    top: 1em;
    z-index: 89;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #EEEEEE;
    z-index: -1 !important;
}

a.training {
    position: fixed;
    right: 0px;
    margin: 5px;
    font-size: 14px;
    /*    color: red;*/
    margin-top: 6px;
    /*    top: 0px;*/
    z-index: 91;
    color: white;
    position: absolute;
    left: 238px;
    top: 130px;
    opacity: 0.85;
}

div#glblErrorCont {
    position: absolute;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* min-width: 800px; */
    z-index: 89;
    /* z-index: 150; */
    background: #FFF;
    border-top: 1px solid #BBB;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-align: center;
    vertical-align: middle;
}

#glblErrorCont .material-icons {
    display: none;
    position: absolute;
    right: 15px;
    top: 0px;
}

#glblErrorCont:hover .material-icons {
    display: block;
}

#glblError {
    max-height: 200px;
    /*overflow-y: scroll;*/
    overflow-y: auto;
    user-select: text;
}

#gdivConError, #gdivSesExpiry {
    background-color: red;
    color: #FFFFFF;
    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;
	border-radius:5px;
	background-color: #e91e63e0 !important; 
}

.alertdialog:hover {
	background-color: #e91e63 !important; 
}

.alertdialog .ui-widget-content {
    background-color: none!important; 
    color: #FFFFFF !important; 
	padding:8px;
}

.alertdialog .ui-widget-content {
     box-shadow: 0 0 0;
	 font-size:0.9rem;
}

.alertdialog .material-icons {
	color:#FFFFFF !important;
	float:left;
}

.alertdialog .ui-widget-content .material-icons {
	float:left;
	padding-right:8px; padding-bottom:8px;
}


.alertdialog  .ui-dialog-titlebar {
    position: relative;
    padding: 8px;
	margin-bottom: 8px;
}

.alertdialog  .ui-widget-header  {
    background-color: ; 
    color: #FFFFFF;
	line-height:24px;
}
.alertdialog .ui-widget-header .ui-state-default {
    /* font-weight: 700; */
	margin-top: -14px;
    padding: 12px;
}

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: #FFFFFF;
        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%;
        white-space: pre-wrap;
    }

    div.imdialog div.imhistdiv div.imhistitmrpypend {
        color: gray;
        white-space: pre-wrap;
        background-color: #FFFFFF;
    }

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;
    }

#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: #FF80AB;
}

    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;
    /*background-image:url('static/img/32/arrow-down.png');*/
}

    a.csvdownloadicon i.material-icons {
        font-size: 48px;
    }
/*tr.rowcollapse {
    background: url("minus.png") no-repeat right #FFFFFF;
}
tr.rowexpand {
    background: url("plus.png") no-repeat right #FFFFFF;
}*/
.iconexpand, .iconcollapse {
    float: right;
    font-size: 18px;
}

tr.rowcollapse .iconexpand {
    display: none;
}

tr.rowexpand .iconcollapse {
    display: none;
}


/* Map Toolbar */
div.maptoolbar {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    /*z-index: 60;*/
}

/* Map Toolbar Icon */
div.maptoolbaricon {
    position: absolute;
    padding: 3px;
    margin: 0px;
    height: 25px;
    width: 25px;
    /*z-index: 60;*/
    /*border-radius: 6px;*/
    /*background: url('/static/img/32/setup.png') no-repeat lightgrey center;*/
    background-color: #FFFFFF;
    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;
    }

/* Map Toolbar Context Menu */
/*.maptoolbarmenu li.pressed {
    background-color: #E0E0E0;
    outline: 1px solid grey;
}*/

/*.toolbar {

}*/
.toolbar-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    /*border: 2px solid #FFFFFF;*/
    border: 2px solid transparent;
}
/*.toolbar-active {
    color: #03A9F4;
}*/
.toolbar-active:hover {
    border: 2px outset grey;
    cursor: pointer;
}
/*.toolbar-disabled:hover, .toolbar-disabled i:hover {
    cursor: not-allowed;
}*/
.toolbar-pressed {
    background-color: #E91E63;
    border: 2px inset lightgrey;
}

    .toolbar-pressed i {
        color: #FFFFFF;
    }

.toolbar-disabled {
    background-color: #FFFFFF;
    pointer-events: none;
}

    .toolbar-disabled i, .toolbar-disabled a {
        color: lightgrey;
        pointer-events: none;
    }

/*div.maptoolbarmap {
    width: 240px;
}
div.maptoolbarrouting {
    width: 110px;
}
div.maptoolbarlayers {
    width: 370px;
}*/
.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: #FFFFFF;
    }

        .ol-zoom button span.ui-button-text {
            padding: 0;
        }

        .ol-zoom button:hover {
            background-color: lightgrey;
            cursor: pointer;
        }

.ol-zoom-in {
    /*border-radius:6px 6px 0px 0px;*/
    border-bottom: none;
}
/*.ol-zoom-out {
    border-radius:0px 0px 6px 6px;
}*/

/* Map Toolbar Icons - MAP */
/*span.maptoolbartoolreset {
    background: url('/static/img/map/tbr_reset.png') no-repeat center;
}
span.maptoolbartoolselect {
    background: url('/static/img/map/tbr_select.png') no-repeat center;
}
span.maptoolbartoolnearest {
    background: url('/static/img/map/tbr_nearest.png') no-repeat center;
}
span.maptoolbartoolruler {
    background: url('/static/img/map/tbr_ruler.png') no-repeat center;
}
span.maptoolbartoolradius {
    background: url('/static/img/map/tbr_radius.png') no-repeat center;
}
span.maptoolbartoolpolygon {
    background: url('/static/img/map/tbr_polygon.png') no-repeat center;
}*/

/* Map Toolbar Icons - LAYERS */
/*span.maptoolbartoolmapbook {
    background: url('/static/img/map/tbr_mapbook.png') no-repeat center;
}
span.maptoolbartoolresicons {
    background: url('/static/img/map/tbr_resicons.png') no-repeat center;
}
span.maptoolbartoolreslabels {
    background: url('/static/img/map/tbr_reslabels.png') no-repeat center;
}
span.maptoolbartoolhosps {
    background: url('/static/img/map/tbr_hosps.png') no-repeat center;
}
span.maptoolbartoolresbase {
    background: url('/static/img/map/tbr_resbase.png') no-repeat center;
}
span.maptoolbartoolacsbase {
    background: url('/static/img/map/tbr_acsbase.png') no-repeat center;
}
span.maptoolbartoolzones {
    background: url('/static/img/map/tbr_zones.png') no-repeat center;
}
span.maptoolbartoolfeatures {
    background: url('/static/img/map/tbr_features.png') no-repeat center;
}
span.maptoolbartoolveharea {
    background: url('/static/img/map/tbr_veharea.png') no-repeat center;
}
span.maptoolbartooltraffic {
    background: url('/static/img/map/tbr_traffic.png') no-repeat center;
}
span.maptoolbartoolroute {
    background: url('/static/img/map/tbr_route.png') no-repeat center;
}
span.maptoolbartoolrouteopt {
    background: url('/static/img/map/tbr_routeopt.png') no-repeat center;
}
span.maptoolbartooliso {
    background: url('/static/img/map/tbr_iso.png') no-repeat center;
}
span.maptoolbartooljrnys {
    background: url('/static/img/map/tbr_jrnys.png') no-repeat center;
}*/

.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: #FF80AB; /* TR added to bump up hierarchy */
}

tr.inactive-record {
    color: #9E9E9E;
}

.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;
}

div.newlayout table.newlayouttbl {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
}

    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: 0px;
    right: 0px;
    z-index: 66;
    background-color: #FFFFFF;
    font-size: 24px;
    height: 24px;
    width: 24px;
}

    .gmapclose:hover {
        cursor: pointer;
    }


/*div.maptoolbaricon, div.maptoolbar, div.maptoolbarmap {
    position: absolute;
    padding:3px;
    margin:0px;
    height: 32px;
    z-index: 60;
    border-radius: 6px;
}*/

/*div.maptoolbaricon:hover {
    background: url('/static/img/32/setup.png') no-repeat grey center;
}*/


/* 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: #FFFFFF;
}

    .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;
    }

        .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;
        }

.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: #FFFFFF;
    /*margin-top: -30px;*/
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
}
/*.contextMenu-parent:hover ul {
    display: block;
}*/

#gdivStatus td {
    padding: 2px 8px 4px 8px;
}

    #gdivStatus td:hover {
        background-color: #E0E0E0;
        cursor: pointer;
    }

#gdivStatus i.material-icons {
    position: absolute;
    margin-top: -2px;
    font-size: 20px;
}

#gdivStatus span {
    margin-left: 28px;
    white-space: pre;
    line-height: 0;
}



/*div.imdialog table {
    width:100%;
    height:100%;
}
div.imdialog tr.trIMHistory {
    vertical-align: top;
}
div.imdialog tr.trIMMsg {
    height:100px;
}
div.imdialog textarea {
    width:100%;
    height:100%;
}*/



.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;
}

/* 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: .26;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

/* CHECK BOX */
input[type="checkbox"] + label {
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: left;
    min-width: 48px;
    padding: 0;
    margin-left: -8px;
}

    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';
        text-transform: none;
    }


input[type="checkbox"]:checked + label::before {
    content: 'check_box';
    color: #E91E63;
    text-transform: none;
}

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"] {
    /*display: none;
    opacity: 0;*/
    width: 0px;
    height: 0px;
}

/* 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 */
        text-transform: none;
    }

input[type="radio"]:checked + label::before {
    content: 'check_circle';
    color: #E91E63;
    text-transform: none;
}

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;
}
    /* 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 {
    border: 0;
    /*font-size: 11px;
    padding: 0 1em;*/
}

input[type="radio"] + label {
    border: 0;
    /*font-size: 11px;
    padding: 0 1em 0 0;*/
}

input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
    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;
}

#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 !important;
    color: #FFF !important;
    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: #FFF;
    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: #FFF;
        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: .87;
        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 {
        position: fixed;
        left: 50%;
        top: 50%;
        color: #FFFFFF;
        transform: translate(-50%, -50%);
        padding: 16px;
        margin: 0 !important;
        background: #C2185B;
        border-radius: 8px;
        z-index: 1;
        border: solid;
        transition: .25s;
        text-align: center;
    }

/*        div.feature-discovery > :first-child h1 {
            text-transform: uppercase;
        }

        div.feature-discovery > :first-child h3 {
            text-transform: lowercase;
        }*/

    div.feature-discovery.show-feature > :first-child {
        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: #FFFFFF;
        height: 26px;
        text-align: left;
        border-radius: 0;
        border-spacing: 0;
        border-top: 1px solid #E91E63;
        border-bottom: 1px solid #E91E63;
    }

    .scrolltable > thead > tr > th:last-child {
        outline: none;
        border: none;
    }

    .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.paging-table.scrolllist div.inputrow > a > p {
            text-decoration: none;
            position: relative;
        }

        div.paging-table.scrolllist div.inputrow > a > p:hover {
            color: #000;
        }

        div.paging-table.scrolllist div.inputrow > a > p:before  {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #E91E63;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: 0.8s ease-in-out 0.1s;
            transition: all 0.8s ease-in-out 0.1s;
            transform-origin: 0 50%;
        }

        div.paging-table.scrolllist div.inputrow >  a > p:hover:before   {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }

/* Material icons in inputsector labels */

.inputsectorlabel-icon {
    color: #FFFFFF;
    vertical-align: middle;
}

label.inputsectorlabel i {
    padding-left: 10px;
    padding-right: 10px;
}


/* File selects */

label.filelabel {
    border: 2px solid #E0E0E0;
    cursor: pointer;
    height: 26px;
    margin-top: 1px;
    padding-top: 0px;
    width: 4%;
    text-align: center;
    box-sizing: border-box;
}

input.filevalue {
    width: 34%;
    margin-left: -9px;
    text-overflow: ellipsis;
}

input.fileinput {
    display: none;
}

div.narrowsector2 label.filelabel {
    width: 8%;
}

div.narrowsector2 input[type="text"].filevalue {
    width: 52%;
}

a.fileopenbtn {
    position: absolute;
}

img.fileimg {
    max-height: CALC(100% - 12px);
    max-width: CALC(100% - 12px);
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 4px;
    background: white;
}

div.filepreview {
    width: calc(100% - 8px);
    height: 200px;
    display: inline-block;
    text-align: center;
    border: 1px solid #CCCCCC;
    margin-bottom: 2px;
    margin-left: 2px;
    border-radius: 8px;
    background: 50% 50% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='%23EEEEEE'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M0 0h24v24H0zm0 0h24v24H0zm21 19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2' fill='none'/%3E%3Cpath d='M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42l3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4 4-3.99z'/%3E%3C/svg%3E");
}

audio.fileaudio {
    position: absolute;
    max-height: CALC(100% - 12px);
    max-width: CALC(100% - 12px);
    max-width: 100%;
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 4px;
}

div.filepreview.filepreviewaudio {
    min-height: 76px;
    height: auto;
}

/* Simple dividers */

div.divider-top {
    padding-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 10px;
}

div.divider-bottom {
    padding-top: 10px;
    border-top: 1px solid #E0E0E0;
    margin-top: 10px;
}

div.ui-accordion-content:not(.inputsector) > .centrerow.divider-bottom {
    margin-bottom: 0px;
}

/* 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-nav {
    position: absolute;
    margin-left: 165px;
    margin-top: 5px;
}

.mcs-nav > a {
    color: #BDBDBD;
}

.mcs-row .toolbar-disabled {
    background-color: #FAFAFA;
}

.mcs-hex {
    text-align: center;
    font-size: 16px !important;
    line-height: 30px;
    position: absolute;
    width: 83px;
    height: 30px;
    transform: translate(-50%, -115%);
    left: 50%;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    background: none;
    border: none;
}

.mcs-opacity-icon {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-top: 7px;
}

input.mcs-rgb {
    width: 40px;
    position: absolute;
    margin-top: 7px;
    margin-left: 20px;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.mcs-opacity-icon > img {
    width: 150px;
    max-width: 150px;
    margin-top: 10px;
}

.mcs-icon {
    position: absolute;
    z-index: 99;
    width: 50px;
    height: 50px;
}

.mcs-nav > a.active {
    color: #E91E63;
}

.mcs-colour {
    cursor: pointer;
    color: rgba(0,0,0,0) !important;
    text-align: center;
}

.mcs-colour.mcs-empty {
    color: black !important;
}

.mcs-sample {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px !important;
    font-weight: bold;
    transition: all .4s ease-in-out .1s !important;
}

.mcs-thumbnail {
    display: list-item;
    border: 1px solid #E0E0E0;
    background-color: #FFFFFF;
}

.mcs-swatch {
    margin: 0 auto 0 auto;
    width: 250px;
    height: 120px;
    background-image: none;
    position: relative;
}

.mcs-slider {
    margin: 11px 0px 10px 24px;
    clear: left;
    width: 185px;
    display: inline-block;
}

.mcs-red .ui-slider-range {
    background: #ef2929;
}

.mcs-red .ui-slider-handle {
    border-color: #ef2929;
    background: #ef2929DD;
    border-radius: 100%;
}

.mcs-green .ui-slider-range {
    background: #8ae234;
}

.mcs-green .ui-slider-handle {
    border-color: #8ae234;
    background: #8ae234DD;
    border-radius: 100%;
}

.mcs-blue .ui-slider-range {
    background: #729fcf;
}

.mcs-blue .ui-slider-handle {
    border-color: #729fcf;
    background: #729fcfDD;
    border-radius: 100%;
}

.mcs-alpha .ui-slider-range {
    background: #BDBDBD;
}

.mcs-alpha .ui-slider-handle {
    border-color: #BDBDBD;
    background: #BDBDBDDD;
    border-radius: 100%;
}

.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 #E0E0E0;
    width: 30%;
    vertical-align: top;
    padding-bottom: 6px;
}

.mcs-basic, .mcs-custom {
    border: 1px solid rgb(189, 189, 189);
    height: 100%;
    width: 100%;
}

.mcs-sub-cell {
    display: table-cell;
    width: 30%;
    padding: 3px;
}

.mcs-sub-row {
    display: table;
    height: 44px;
    width: 95%;
    padding-left: 6px;
    padding-right: 6px;
    table-layout: fixed;
}

.mcs-contrast > .material-icons {
    vertical-align: middle;
}

.mcs-custom-active {
    outline: 2px solid #e91e63;
}

/* Styles for image viewer widget */
#divImageViewer {
    z-index: 9999 !important;
    width: 100vw !important;
    height: calc(100vh - 25px) !important;
    margin-top: -11px;
}

.miv-div > .inputsector {
    height: 100%;
}

.miv-container {
    height: 100%;
    box-sizing: border-box;
    padding: 0px !important;
}

.miv-toolbar {
    position: absolute;
    border: 1px solid #e0e0e0;
    width: 94px;
    height: 87.7%;
    margin-top: 10px;
    z-index: 999;
    margin-left: 10px;
    height: 830px;
    background: #FFF;
}

#miv-exit {
    right: 20px !important;
    position: absolute !important;
    top: 10px !important;
}

#miv-exit > i {
    position: absolute !important;
    top: 0 !important;
    margin-top: 0px !important;
    right: 0 !important;
    color: #EC407A !important;
    vertical-align: middle !important;
    cursor: pointer;
    z-index: 999;
    font-size: 30px;
}

.miv-shortcut {
    margin-top: 20px;
    padding: 5px;
    width: 67px;
    font-size: 16px;
    font-weight: bold;
    height: 31px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-right: 14px;
    border-radius: 4px;
    border: 2px solid #E91E63;
    background: #fff;
}

.miv-shortcut:hover {
    background-color: #e91e63;
    color: #fff;
}

.miv-tool {
    padding: 23px;
    cursor: pointer;
}

.miv-sliderval {
    position: absolute;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    font-family: 'roboto';
    font-size: 16px;
    color: #880E4F;
    font-weight: 700;
    margin-top: 8px;
    width: 42px;
    text-align: center;
}

.miv-tool > i.material-icons {
    font-size: 40px;
    color: #880E4F;
    padding: 3px;
}

.miv-tool.miv-active > i.material-icons {
    transform: translateY(1px);
    filter: saturate(200%);
    box-shadow: 1px 1px 1px 1px;
    border-radius: 4px;
}

.miv-image {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    z-index: 99;
}

#miv-reset .miv-sliderval {
    display: none;
}

#miv-reset.miv-active .miv-sliderval {
    display: block;
}

.miv-image > object {
    display: block !important;
    object-fit: contain !important;
    /*min-width: 100% !important;*/
    max-width: 100% !important;
    /*min-height: 100% !important;*/
    max-height: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    cursor: initial !important;
}

.miv-image.expand > object {
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: initial !important;
    max-height: initial !important;
}

.miv-slider .ui-slider-handle {
    border: 2px solid #E91E63;
    border-radius: 4px;
}

.miv-slider-container {
    position: absolute;
    width: 200px;
    margin-top: -37px;
    right: -195px;
    background: white;
    padding: 10px;
    box-shadow: 1px 1px 1px 1px;
    color: #880E4F;
    filter: saturate(200%);
    display: none;
    padding-left: 19px;
    padding-right: 15px;
    z-index: 999;
    background: #f5f5f5;
}

.miv-active > .miv-slider-container {
    display: block !important;
}

/* 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;
}*/

/* 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;
}

#tblMain > tbody > tr > td {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/*Print Destination window*/
#divPrintDestination {
    display: none;
}

#divPrintType {
    height: 500px;
}

.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;
    background: #FFFFFF;
   
}

    .printOptions.selected {
        padding-top: 5px;
        padding-bottom: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
    }

.printOptions:not(.selected) {
    height: 0px;
    border: none;
    background: transparent;
}

    .printOptions > .inputrow label.inputlabel {
        position: relative;
        top: 10px;
    }

/*.printOptions > .inputrow input[type="text"] {
    width: 60%;
}*/

.printOptions > div.inputrow select {
    width: 100%;
}

.printOptions > .inputrow {
    width: calc(100% - 126px);
    display: block;
}

#divPrintType > label.inputlabel {
 
}

#divPrintType span.ui-button-text {
    width: 200px;
    text-align: left;
}

#divPrintType label[for="divDestCSV_headers"], #divPrintType label[for="chkPrintSearchWrapCols"], #divPrintType label[for="chkPrintSearchWrapColsNewPage"] {
margin-left: -30px;
}

#divPrintType input[type="checkbox"] + label > span.ui-button-text {
    padding-top: 6px;
}
#divPrintType input[type="radio"] + label {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    padding-top: 10px;
}
#divPrintType input[type="radio"] + label::before {
    font-size: 35px;
    margin-right: 5px;
}

#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;
}

tr.settingrow > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lblMySettings {
    box-shadow: none;
    border-bottom: none;
}

.settingstable > thead > tr {
    outline: none !important;
    top: -2px !important;
}

.settingstable thead tr, .settingstable thead tr th {
    top: -2px !important;
}

tr.settingrow > td {
    width: 1%;
    font-size: 14px;
    white-space: nowrap;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border: none;
    color: #333;
    text-overflow: ellipsis;
}

.settingstable {
    border-collapse: collapse;
    background: white;
    box-shadow: rgb(204, 204, 204) 0px 0px 16px 0px;
}


.settingstable > thead > tr > th {
    outline: none !important;
    text-indent: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    border: none;
    overflow: hidden;
    word-break: normal;
    background: #E91E63 !important;
    font-size: 17px;
    color: #fff;
    font-weight: unset;
}

.settingstable tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

.settingstable tbody tr, .settingstable tbody tr td {
    /*font-family: unset;*/
    font-size: 15px;
    /*color: #808080;*/
    color: #000;
    line-height: 1.2;
    font-weight: normal;
    height: 50px;
    vertical-align: top;
    border-bottom: none;
}

#gDivMySettings {
    width: 1000px;
    overflow: hidden;
}

.ui-resizable-handle {
    position: absolute;
    right: 0;
    width: 4px;
    background: #D81B60;
}

    .ui-resizable-handle:hover,
    .ui-resizable-handle:active {
        background: #FFFFFF;
    }

    .ui-resizable.ui-resizable-resizing {
        border: 2px dashed #E91E63 !important;
    }
.ui-resizable-helper {
    opacity: .84;
    background: #880E4F;
    color: #880E4F;
    border: 2px solid #FFFFFF !important;
    line-height: 100%;
}

#gDivMySettingsWrapper {
    margin-top: 30px;
    box-shadow: none;
}

#gDivMySettingsInputsector {
    background: #FAFAFA;
    /*height: 555px;*/
}

#gDivMySettings > div > div {
    height: 435px;
    padding-top: 0px;
    padding-bottom: 30px;
}

#gDivMySettings #divClose {
    border: none;
    z-index: 99;
    background: white;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    padding-bottom: 10px;
    height: 33px;
    margin-top: 0px;
    padding-top: 10px;
    box-sizing: content-box;
}

table.settingstable.empty::after {
    position: absolute;
    content: 'NO SETTINGS FOUND!';
    top: 50%;
    transform: translate(-50%);
    left: 50%;
}

i.settingaction {
    padding: 3px;
    margin-top: 10px;
}

tr.settingrow > td > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 15px;
}

tr.settingrow > td > div.expand {
    white-space: normal;
    word-break: break-all;
    user-select: text;
}



.settingstable > tbody > tr > td:first-child,
.settingstable > thead > tr > th:first-child {
    padding-left: 10px;
}

#gTblMySettings > thead > tr > th:first-child {
    width: 215px !important;
}

#gTblMySettings > thead > tr > th:nth-child(3) {
    width: 425px !important;
}

#gTblMySettings > thead > tr > th:last-child {
    width: 85px !important;
}

.settingstable .mcs-sub-cell {
    width: 37px;
}

#importSettingsFile {
    visibility: hidden;
    position: absolute;
    bottom: 0;
}

#cmdMySettingsExport, #cmdDeviceDiagnosticsExport, #cmdDeviceDiagnosticsPrint  {
    color: #388E3C;
}

#cmdMySettingsImport {
    color: #1976D2;
}

#cmdMySettingsClearAll {
    color: #D32F2F;
}

#divSettingsOpts, #divDeviceDiagnosticsOpts, #divMySettingsOptsEdit {
    position: absolute;
    left: 16px;
    margin-top: 2px;
}

#divSettingsOpts i.material-icons , #divDeviceDiagnosticsOpts  i.material-icons, #divMySettingsOptsEdit i.material-icons {
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 6px;
    padding-bottom: 3px;
    /*border: 1px solid #BDBDBD;
    box-shadow: rgb(204, 204, 204) -1px 1px 2px 0px;*/
}

#divSettingsOpts i.material-icons:hover,  #divDeviceDiagnosticsOpts i.material-icons:hover, #divMySettingsOptsEdit i.material-icons:hover {
    background: #E0E0E0;
}


#gTblDeviceDiagnostics {
	border-collapse:collapsed;
	border-spacing:0px;
	padding:15px;
}

#gTblDeviceDiagnostics td {
	padding:10px;
	background:#efefef;
	line-height:25px;
}
#gTblDeviceDiagnostics .material-icons {
	color:#ffffff;
}

#gDivMyProfile {
    width: 1000px;
    overflow: hidden;
}

#gDivMyProfileContainer {
    height: 400px;
    padding-top: 0px;
    overflow-y: hidden;
    /*padding-bottom: 30px;*/
}

#gTblMyProfile {
    height: 130%;
    overflow: hidden;
}

    #gTblMyProfile > object {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

        #gTblMyProfile > object > #gdivMsgBox {
            top: 22.5%;
            left: 5%;
        }


#divMain.main-search {
    margin-left: 85px;
}

#h4Main {
    font-size: 30px;
    margin-left: 85px;
    text-indent: -85px;
    visibility: hidden;
    margin-bottom: 138px;
}

#divMainSearch {
    font-size: 16px;
    width: 790px;
    margin: auto;
    height: 44px;
    margin-bottom: 32px;
    position: relative;
}
 
img.main-search {
    background:transparent;
}

#inputMainSearch {
    background-color: #FFF;
    border: 2px solid transparent;
    border-radius: 4px;
    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: 25px;
    padding-bottom: 20px;
    background: #FFF;
    border-radius: 4px;
    border:1px solid #EFEFEF;
    border-bottom:2px solid #EFEFEF;
}

.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: 40px;
    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;
    height: 148px;
    top: 46px;
    left: calc(50% + 42px);
    transform: translate(-50%);
    border: none;
}

#toolSearchResults.main-search {
    display: block;
    position: fixed;
    overflow: auto;
    padding: 1em;
    background: #FFF;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    opacity: 1;
    transition: .5s;
    z-index: 75;
    position: absolute;
    left: 0;
    max-width: none;
    max-height: calc(76vh - 165px);
    top: 0px;
    border-radius: 4px;
    overflow: hidden;
    padding-top: 44px;
    height: calc(76vh - 165px);
    width: 97%;
}

#toolSearchResults.main-search ul {
    list-style: none;
    padding: 0px;
    padding-left: 3px;
    padding-right: 3px;
    background: #FFF;
    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;
}*/

input#inputMainSearch:not(.searching):focus {
    border: 2px solid #e91e63;
}

input#inputMainSearch:focus + i#iMainSearch {
    color: #000;
}

#toolSearchResults.searching {
    box-shadow: #e91e63 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
}

#toolSearchResults.main-search.searching + #divMainSearchInput {
    box-shadow: none;
}

.searching + #divMainSearchInput > input#inputMainSearch {
    left: 2px;
    top: 2px;
}

#divMainSearchInput {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    border-bottom: 2px solid #E0E0E0;
}

#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;
}

    /*span#toolSearchResults.searching::after {
    content: ' ';
    width: 100px;
    z-index: 99;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: absolute;
    top: 92px;
    right: -67px;
}*/
    #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;
}

#toolSearchResults.adding-shortcut + #divMainSearchInput::after {
    content: 'Add Shortcut';
    position: absolute;
    width: 100%;
    height: 100%;
    top: -57%;
    right: 35%;
    z-index: 81;
    color: #fff;
    border-radius: 13px;
    font-size: 1.5em;
    text-shadow: -1px -1px 0 #212121, 1px -1px 0 #212121, -1px 1px 0 #212121, 1px 1px 0 #212121;
    text-align: center;
}

#toolSearchResults.adding-shortcut {
    box-shadow: #e91e63 0px 0px 1px 8px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
}


@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;
    }
}


/*New settings styles 30092021*/

#gTblMySettings th, #gTblMySettings td {
    border-right: 1px solid #e0e0e0;
}

#gDivMySettings #divClose {
    margin: 0px;
}

table#gTblMySettings {
    border: 1px solid #e0e0e0;
    width: 100%;
    margin: 0px;
    box-shadow: none;
    margin-top: -2px;
}

#gTblMySettings > thead > tr {
    cursor: pointer;
}

#gTblMySettings .sorticon {
    color: #fff !important;
}

#gTblMySettings > tbody > tr > td:last-child {
    text-align: center;
}

div#gDivMySettingsContainer {
    overflow: hidden;
    height: 100%;
    overflow-y: auto;
    border-bottom: 1px solid #e0e0e0;
}

#gDivMySettingsWrapper {
    overflow: hidden;
    border: none;
    padding-bottom: 5px !important;
    margin-top: 20px;
}


/*styles for modFeatureTour*/

.mft-tooltip-container {
    position: absolute;
    background-color: #FFF;
    border-radius: 4px;
    /* box-shadow: 0 0 1em #eeeeee; */
    visibility: visible;
    width: 300px;
    /* border: 2px solid #616161; */
    padding: 0;
    opacity: 0.88;
}

.mft-tooltip-container:hover {
    opacity: 1 !important;
}

.mft-tooltip-anchor {
    z-index: 1000000;
    position: absolute;
    visibility: hidden;
    background-color: transparent;
}

.mft-active {
    z-index: 999999;
}

.mft-window {
    box-shadow: rgb(33 33 33 / 80%) 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
    position: absolute;
    z-index: 999998;
    opacity: 1;
    border-radius: 4px;
}

.mft-overlay {
    position: fixed;
    cursor: pointer;
    z-index: 99999;
    opacity: 0;
    inset: 0px;
}

.mft-tooltip-content {
    /*padding: 10px;*/
    font-size: 14px;
    padding-bottom: 0px;
}

.mft-tooltip-footer {
    text-align: center;
    padding: 8px;
}

.mft-button.mft-button-next {
    background: #e91e63;
    /*    border: 1px solid #ad7e8e;*/
    float: right;
    color: white;
}

.mft-button.mft-button-back {
    float: left;
}

.mft-button.mft-button-next:hover {
    background: #fce4ec;
    color: #616161;
}

.mft-button {
    background: #eeeeee;
    border: 1px solid #e0e0e0;
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    min-width: 56px;
    text-align: center;
}

.mft-button:hover {
    background: #616161;
    color: #fff;
    box-shadow 1px 1px 1px 1px;
}

.mft-button.disabled {
    visibility: hidden !important;
    cursor: default !important;
}

.mft-button.mft-button-page {
    pointer-events: none;
    border: 1px solid transparent;
    background: transparent;
    color: #616161;
}

.mft-component {
    opacity: 0;
}

.mft-tooltip-arrow {
    border: 5px solid transparent;
    content: "";
    position: absolute;
}

.mft-icon {
    position: absolute;
}

.mft-icon.mft-icon-exit {
    right: 0;
}

.mft-icon.mft-icon-exit i {
    color: #9e9e9e;
    font-size: 16px;
    padding: 7px;
    padding-top: 5px;
}

.mft-tooltip-arrow.bottom {
    top: -10px;
    left: 10px;
    border-bottom-color: #fff;
}

.mft-tooltip-arrow.bottomright {
    top: -10px;
    right: 10px;
    border-bottom-color: #e91e65;
}

.mft-tooltip-arrow.right {
    top: 10px;
    left: -10px;
    border-right-color: #e91e65;
}

.mft-tooltip-arrow.left {
    top: 10px;
    right: -10px;
    border-left-color: #e91e65;
}

.mft-tooltip-arrow.top {
    bottom: -10px;
    left: 10px;
    border-top-color: #fff;
}

.mft-tooltip-arrow.topright {
    bottom: -10px;
    right: 10px;
    border-top-color: #fff;
}

.mft-component, .mft_component * {
    transition: all .4s ease-in-out .1s !important;
}

.mft-component.mft-tooltip-anchor, .mft_component.mft-tooltip-anchor * {
    transition: all .3s ease-in-out .1s !important;
}

.mft-tooltip-content-inner {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0.5rem 1rem;
}

.mft-tooltip-content-header {
    font-weight: normal;
    font-size: 16px;
    color: #e91e63;
    margin-top: 0px;
    padding-bottom: 5px;
    background-color: #e91e63;
    color: white;
    /* padding-top: 0.5rem; */
    padding: 0.5rem 1rem;
}

.mft-tooltip-header > .mft-icon-exit > .material-icons {
    color: #FFFFFF;
    padding: 0.65rem;
}

.mft-tooltip-content-bullet:before {
    content: " ";
    border-radius: 18px;
    background: #424242;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
    margin-top: 6px;
}

.mft-help {
    position: fixed;
    bottom: -5.5px;
    right: -15px;
    margin-bottom: 30px;
    margin-right: 15px;
    background: white;
    border-radius: 4px 0 0 0;
    padding: 0px;
    height: 40px;
    z-index: 99;
    border-bottom: none;
    border-left: 1px solid #BBB;
    border-top: 1px solid #BBB;
}

.mft-help > i {
    font-size: 40px;
    color: #E91E63;
    opacity: 0.5;
}

.mft-help > i:hover {
    opacity: 1;
}

.mft-tooltip-content-inner i {
    color: #e91e63 !important;
}


#tblMain > tbody > tr.menu-open {
    z-index: 1000;
    box-shadow: #e91e63 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
}


/*NEW STYLES 29102021 */
.pagehead.globalcentre {
    background-image: url(../img/login_images/login_medics_1.jpg);
    position: sticky;
    top: -130px;
    left: 0;
    right: 0;
    height: 250px;
    z-index: 89;
    margin-left: -10px;
    margin-right: -20px;
    margin-top: -30px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2em #212121;
    margin-bottom: 1.75rem;
    background-color: rgb(233 30 99 / 60%);
    background-blend-mode: multiply;
    text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}


    .pagehead.globalcentre i.material-icons {
        position: absolute;
        left: 100px;
        top: 138px;
        font-size: 7rem;
        background: white;
        border-radius: 6px;
        text-shadow: none;
    }

.pagetitle {
    position: absolute;
    left: 224px;
    top: 150px;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

#gcmdNav, #gdivNav {
    z-index: 999999;
    border: 0;
}

#gdivNav {
    z-index: 999998;
}

img.shadowborder {
    z-index: 999998;
}

#divSearchMinimise {
    margin: 0px !important;
}

.stickyBottomMargin {
    margin-bottom: 130px !important; /*stickybottom = 85px, statusbar = 40px, padding = 5px*/
}

.pagehead.globalcentre i.material-icons {
    padding: 1.5rem;
    font-size: 5rem;
    border: 3px solid #E91E63;
}

.pagetitle {
    position: absolute;
    left: 245px;
    top: 172px;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.normaldiv .pagehead.globalcentre {
    height: 122px;
    position:sticky;
    top:-30px;
}

.normaldiv .pagehead.globalcentre i.material-icons {
    left: 13px;
    top: 37px;
    font-size: 3rem;
}

.normaldiv .pagetitle {
    left: 129px;
    top: 62px;
    font-size: 2.3rem;
}



#gcmdMsgCancel {
    background-color: #fff;
    color: #C2185B;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0.25rem;
}

.pageSubHeader {
    margin-left: 2%;
    margin-right: 2%;
   /* background-color: #E91E63; */
   /*  padding: 1rem;  */
   /*  color: white; */
   border-bottom:3px solid #E91E63;
   padding-top:1rem;
   padding-bottom:1rem;
    font-size: 1rem;
}

.incident_header {
    background-image: url(../img/header_images/imgs_new/incident_amb.jpg) !important;
    background-position-y: 59%;
}

.patientDetails_header {
    background-image: url(../img/header_images/imgs_new/patient_details.jpg) !important;
    background-position-y: 2.5%;
}

.primarySurvey_header {
    background-image: url(../img/header_images/imgs_new/primary_survey_tablet.jpg) !important;
    background-position-y: 56%;
}

.observations_header {
    background-image: url(../img/header_images/imgs_new/observations_spo2.jpg) !important;
    background-position-y: 66%;
}

.acuteMedicalAssessmentSection_header {
    background-image: url(../img/header_images/imgs_new/acute_medical_assessment.jpg) !important;
    background-position-y: 17%;
}

.secondarySurvey_header {
    background-image: url(../img/header_images/imgs_new/secondary_survey_tablet.jpg) !important;
    background-position-y: 20%;
}

.medicalAssessment_header {
    background-image: url(../img/header_images/imgs_new/medical_assessment.jpg) !important;
    background-position-y: 21%;
}

.traumaAssessment_header {
    background-image: url(../img/header_images/imgs_new/trauma_assessment.jpg) !important;
    background-position-y: 39%;
}

.interventionAssessment_header {
    background-image: url(../img/header_images/imgs_new/intervention_assessment.jpg) !important;
    background-position-y: 19%;
}

.drugs_administered_header {
    background-image: url(../img/header_images/imgs_new/drugs_admin.jpg) !important;
}

.disposition_header {
    background-image: url(../img/header_images/imgs_new/disposition_tablet.jpg) !important;
    background-position: center;
}

.exceptions_header {
    background-image: url(../img/header_images/imgs_new/exceptions_cuff.jpg) !important;
    background-position-y: 75%;
}

.destinations_header {
    background-image: url(../img/header_images/imgs_new/destinations_amb.jpg) !important;
    background-position-y: 40%;
}

div#ui-datepicker-div {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 0rem;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    min-width: 400px;
    padding: 3px;
    transform: translateX(-12.5%);
    font-size: 14px;
    border: 2px solid #e91e63;
    z-index: 53 !important;
}

div#ui-datepicker-div a {
    border-radius: 4px; 
    padding: 8px;
    text-align: center;
    border: 0;
    font-weight: 700;
}

div#ui-datepicker-div a.ui-state-default.ui-state-highlight {
    background: #F8BBD0;
    color: black;
}

div#ui-datepicker-div a:hover {
    background: #880E4F !important;
    color: white !important;
}

div#ui-datepicker-div .ui-state-active,
div#ui-datepicker-div .ui-widget-content .ui-state-active, 
div#ui-datepicker-div .ui-widget-header .ui-state-active, 
div#ui-datepicker-div .ui-widget-header {
    background-color: #E91E63 !important;
    color: #FFFFFF !important;
    border-radius:4px;
}

div#ui-datepicker-div .ui-datepicker-title {
    padding: 8px
}

div#ui-datepicker-div .ui-datepicker-title select {
    appearance: none;
    background: #E91E63;
    border: 0;
    text-align: center;
    font-weight: 700;
    color: white;
    font-size: 1.25rem;
    border:0px solid transparent;
    margin: 0 4px;
    width: auto;
    padding: 4px 8px;
    margin-top: -4px;
}

div#ui-datepicker-div .ui-datepicker-title select  > option { 
    background-color: #FAFAFA;
	color:#000;
	font-weight:700;
	font-size:1rem;
}


div#ui-datepicker-div span.ui-icon {
    background: none;    
}

div#ui-datepicker-div .ui-datepicker-next, 
div#ui-datepicker-div .ui-datepicker-prev {
    top: 12px !important;
}

    div#ui-datepicker-div .ui-datepicker-next {
        right:6px;
    }

    div#ui-datepicker-div .ui-datepicker-prev {
        left:6px;
    }


    div#ui-datepicker-div .ui-datepicker-next::after,
    div#ui-datepicker-div .ui-datepicker-prev::after {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
        cursor: pointer;
        font-weight: 700;
        color: white;
    }

div#ui-datepicker-div .ui-datepicker-next::after {
    content: 'arrow_forward';
}
div#ui-datepicker-div .ui-datepicker-prev::after {
    content: 'arrow_back';
}

button {
    color: #000000;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
}

#cmdSrchList2Confirm span,
#cmdSrchListQualityConfirm span,
#cmdSortByPrev,
#cmdFiltersPrev,
#cmdHeadersPrev,
#cmdHeadersSave,
#cmdNewReport,
#cmdEditSubmit span,
#cmdUpdateSubmit span,
#cmdSrchList1Confirm span,
#cmdGroupSave span,
#cmdUserSave span,
#cmdFuncSave span,
#cmdRecSave span,
#cmdUsersOk span,
#cmdSubmitSearch span,
#gcmdAuditClose span,
#cmdGroupsOk span,
#cmdDocmanConfirm span,
#cmdSubmitRecord span {
    margin-left: 1.5rem;
}

#cmdTestCadOK span,
#cmdAddCaseSubmit span,
#cmdInboxMore span,
#cmdOutboxMore span,
#cmdMsgReply span,
#cmdSrchList3Confirm span,
#cmdFieldEditSubmit span,
#cmdTestCADPushConfirm span {
    margin-left: 1.5rem;
}

#cmdSendNewMsg span,
#cmdNewMsg span {
    margin-left:2rem;
}

#cmdSrchList2Confirm,
#cmdTestCadOK,
#cmdAddCaseSubmit,
#cmdSrchListQualityConfirm,
#cmdInboxMore,
#cmdOutboxMore,
#cmdMsgReply,
#cmdSrchList3Confirm,
#cmdDocmanConfirm,
#cmdFieldEditSubmit,
#cmdTestCADPushConfirm,
#cmdHeadersSave,
#cmdSortBySave,
#cmdFiltersNext,
#cmdViewsOpen,
#cmdNewReport,
#cmdEditSubmit,
#cmdUpdateSubmit,
#cmdSrchList1Confirm,
#cmdGroupSave,
#cmdUserSave,
#cmdFuncSave,
#cmdSendNewMsg,
#cmdSubmitSearch,
#cmdRecSave,
#gcmdAuditClose,
#cmdNewMsg,
#cmdUsersOk,
#cmdGroupsOk,
#cmdSubmitRecord {
    border: 1px solid #f8bbd0 !important;
    font-weight: 700;
    background-color: #fce4ec !important;
}


    #cmdSrchList2Confirm::before,
    #cmdTestCadOK::before,
    #cmdAddCaseSubmit::before,
    #cmdSrchListQualityConfirm::before,
    #cmdInboxMore::before,
    #cmdOutboxMore::before,
    #cmdMsgReply::before,
    #cmdSrchList3Confirm::before,
    #cmdDocmanConfirm::before,
    #cmdFieldEditSubmit::before,
    #cmdTestCADPushConfirm::before,
    #cmdSortByPrev::before,
    #cmdFiltersPrev::before,
    #cmdHeadersPrev::before,
    #cmdHeadersSave::before,
    #cmdSortBySave::before,
    #cmdFiltersNext::before,
    #cmdViewsOpen::before,
    #cmdNewReport::before,
    #cmdEditSubmit::before,
    #cmdUpdateSubmit::before,
    #cmdSrchList1Confirm::before,
    #cmdGroupSave::before,
    #cmdUserSave::before,
    #cmdFuncSave::before,
    #cmdSendNewMsg::before,
    #cmdRecSave::before,
    #cmdSubmitSearch::before,
    #gcmdAuditClose::before,
    #cmdNewMsg::before,
    #cmdUsersOk::before,
    #cmdGroupsOk::before,
    #cmdSubmitRecord::before {
        position: absolute;
        left: 8px;
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 28px;
        display: inline-block;
        line-height: 28px;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
        cursor: pointer;
        color: #880e4f;
    }

    #cmdSrchList2Confirm::before,
    #cmdTestCadOK::before,
    #cmdAddCaseSubmit::before,
    #cmdSrchListQualityConfirm::before,
    #cmdSrchList3Confirm::before,
    #cmdDocmanConfirm::before,
    #cmdFieldEditSubmit::before,
    #cmdTestCADPushConfirm::before,
    #cmdGroupsOk::before,
    #cmdUsersOk::before,
    #cmdSrchList1Confirm::before,
    #cmdEditSubmit::before {
        content: 'check_circle';
    }

        #cmdSortByPrev::before,
        #cmdFiltersPrev::before,
        #cmdHeadersPrev::before {
            content: 'navigate_before';
        }

    #cmdHeadersSave::before,
    #cmdSortBySave::before,
    #cmdFiltersNext::before,
    #cmdViewsOpen::before {
        right:-65px;
        content: 'navigate_next';
    }


#cmdNewReport::before {
    content: 'add';
}

#cmdNewMsg::before,
#cmdSendNewMsg::before {
    left: 15px;
    content: 'send';
}

    #cmdUpdateSubmit::before,
    #cmdGroupSave::before,
    #cmdUserSave::before,
    #cmdFuncSave::before,
    #cmdRecSave::before,
    #cmdSubmitRecord::before {
        content: 'save';
    }

    #cmdSubmitSearch::before {
        content: 'search';
    }

#gcmdAuditClose::before {
    content: 'close';
}


#cmdMsgReply::before {
    content: 'reply';
}

#cmdInboxMore::before,
#cmdOutboxMore::before {
    content: 'south';
}


ul.autocomplete {
    background: rgba(0,0,0,.54);
    border-radius: 4px;
    transform: translateX(-25%);
    border: 1px solid #EEEEEE;
}

    ul.autocomplete::-webkit-scrollbar {
        display: none;
    }

    ul.autocomplete li {
        border-radius: 4px;
        padding: 8px;
        border: 1px solid #f8bbd0;
        background: #fce4ec;
        color: #880e4f;
        margin: 4px;
        margin-left:15px;
        margin-right:15px;
    }


#pageHeadActions {
    position: absolute;
    top: 139px;
    right: 40px;
    z-index: 999999999999999999999;
}

    #pageHeadActions ul {
        list-style-type: none;
        padding: 0;
    }

        #pageHeadActions ul li {
            display: inline-block;
            text-align: center;
        }

            #pageHeadActions ul li a {
                display: block;
                padding: 12px !important;
                color: #FFFFFF;
                background-color: rgb(233 30 99 / 81%);
                margin-right: -4px;
            }

                #pageHeadActions ul li a:hover {
                    background-color: #E91E63;
                }

                #pageHeadActions ul li a .material-icons {
                    color: #FFFFFF;
                }

.pageHeadActionsFirst {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.pageHeadActionsLast {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.highlightindicator {
    position: fixed;
    width: 18px;
    height: 2px;
    background: #fbc02d;
    right: 0;
    border: 1px solid #9e9e9e;
}

strong.highlight {
    background: #ffeb3b;
    display: inline-block;
    padding: 0px;
    animation-duration: 1s;
    animation-name: flasher;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    pointer-events: none;
}

@keyframes flasher {
    from {
        background: #ffeb3b;
    }

    to {
        background: #fff;
    }
}

/* Cleric Tabs */

.ct-tab table.sorttable {
    width: 100%;
    margin: 0;
}

    .ct-tab table.sorttable tr th {
      /*  font-size: 1rem;*/
        padding: 12px;
    }

.ct-flush {
    padding: 0px !important;
}

.ct-title {
    background-color: #e91e63;
    padding: 1rem;
    color: #FFF;
    margin-top:-1px;
}

.ct-body {
    border: 1px solid #e91e63;
    background: #FFF;
    padding: 1.5rem;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    margin-top:-1px;
}

.ct-tabs {
    border-bottom: 3px solid #e91e63;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: stretch;
    width: 100%;
    column-gap: 7px;
}

    .ct-tabs li {
        flex: 1;
    }

.ct-tab-link {
    margin-bottom: -1px;
    background: 0 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: block;
    padding: 0.8rem;
    background: #880e4f;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    white-space: nowrap;
    text-align: center;
}

.ct-tabs .active {
    background-color: #e91e63;
}

.ct-tab {
    display: none;
}

.ct-content .show {
    display: block;
}

.ct-tabs-lg li a {
    font-size:1rem;
}


/*TOAST STYLES*/

.toastDiv {
    position: fixed;
    z-index: 9999;
    /*left: 50%;
    transform: translate(-50%);*/
    min-width: 230px;
    transition: opacity 1s ease-in-out;
    border: 2px solid #e91e63;
    border-left: 10px solid #e91e63;
    opacity: 0;
    border-radius: 8px;
    background: #FFF;
    font-size: 1rem;
    padding: 1.25rem;
    box-shadow: 3px 3px 6px rgb(0 0 0 / 50%); /*3px 10px 20px rgb(0 0 0 / 18%);*/
    margin-left: 0.75vw;
}

    .toastDiv > div {
        display: inline-block;
        vertical-align: middle;
        padding-right: 1rem;
    }

    .toastDiv > .toastText {
        padding-right: 2rem;
        font-size: 1.25rem;
    }

    .toastDiv > .toastExit {
        display: inline-block;
        vertical-align: top;
        font-size: 1.25rem;
        color: #424242;
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        cursor: pointer;
    }

    .toastDiv > .toastText > .toastHeader {
        font-weight: bold;
        margin-bottom: 0.25rem;
    }

    .toastDiv > .toastText > .toastContent {
        color: #424242;
        font-size: 1rem;
        max-width: 205px;
        text-overflow: ellipsis;
        white-space: pre;
        overflow: hidden;
    }

.toastCont.toastLeft {
    box-shadow: -3px 5px 6px rgb(0 0 0 / 50%);
}

div.toastIcon > i {
    font-size: 2.5rem;
}

.toastDiv.active {
    opacity: 1;
    transition: opacity 1s ease-out;
}

div.toastCont:not(.forcestack):not(.active) {
    display: none;
}

#spanAlertCount {
    margin-left: 0px !important;
}

div.toastCont.stacked {
    position: fixed;
    bottom: calc(1em + 25px);
    right: 1em;
    border: 3px solid #e91e63;
    border-left: 4px solid #e91e63;
    border-radius: 8px;
    background: #FFF;
    font-size: 1rem;
    box-shadow: 3px 3px 6px rgb(0 0 0 / 50%);
    width: 330px;
    z-index: 9999;
    height: 385px;
    overflow: visible;
    padding-top: 0px;
    cursor: grab;
    min-height: 129px;
    background: #f5f5f5;
}

div.toastCont.heighttest {
    opacity: 0 !important;
    display: block !important;
}

.toastCont.toastLeft.stacked {
    left: 1em;
    right: initial;
}

.toastDiv.toastRemove {
    transition: opacity 0.5s !important;
}

.toastExit:hover {
    color: #d81b60;
}

div.toastCont.stacked .ui-resizable-handle {
    z-index: 9999 !important;
    width: 100%;
    background: transparent;
    height: 15px;
}

div.toastDisplay {
    max-height: calc(100% - 8px);
    padding: 1.25rem;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
}

/*div.toastCont.stacked .toastDiv:last-child {
    border-bottom: none !important;
}*/

div.toastCont.stacked .toastDiv {
    position: relative;
    bottom: initial !important;
    right: initial !important;
    box-shadow: none !important;
    border-radius: 0px;
    width: 90%;
    margin-left: -20px;
    padding-left: 55px;
    padding-right: 30px;
    margin-bottom: 0px !important;
    border: 2px solid transparent !important;
    border-bottom: 2px solid #f5f5f5 !important;
}

div.toastCont.forcehide {
    display: none;
}

div.toastCont.forcemax {
    height: 514px !important;
}

div.toastCont.forcemin {
    height: 140px !important;
}

div.toastCont.stacked .toastIcon {
    position: absolute;
    left: 6px;
    top: 25px;
}

div.toastCont.stacked i.toastExit.material-icons {
    top: 20px;
    right: 35px
}

div.toastCont.stacked .toastDiv > .toastText > .toastContent {
    max-width: 230px;
}

.toastBadge > i.material-icons {
    font-size: 30px;
    color: #fff;
}

.toastBadge > div {
    font-size: 21px;
    font-weight: bold;
    color: #fff;
}

.toastBadge {
    position: absolute;
    top: -25px;
    left: 5px;
    background: #e91e63;
    height: 39px;
    width: 39px;
    z-index: 10000;
    border-radius: 4px;
    opacity: 1;
    transition: opacity 0.5s;
    border: 2px solid #FFF;
    display: none;
    justify-content: center;
    align-items: center;
}

.toastCont.stacked .toastBadge {
    display: none;
}

.toastCont.stacked .toastBadge.active {
    display: flex !important;
}

.toastBadge.toastDelete {
    left: 87px;
    opacity: 0;
}

.toastBadge.toastHistory {
    left: 46px;
    opacity: 0;
}

.toastCont.history .toastBadge.toastHistory {
    opacity: 1;
    background: #f57c00;
}

.toastCont.history .toastBadge.toastTotal {
    opacity: 1;
    background: #f57c00;
}

.toastCont.history .toastBadge.toastDelete {
    background: #f57c00;
}

.toastBadge.toastDelete:hover, .toastBadge.toastHistory:hover {
    background: #910039;
}

.toastBadge.toastConfirm:hover {
    background: #025102;
}

.toastBadge.toastCancel:hover {
    background: #a90707;
}

.toastCont:hover .toastBadge {
    opacity:1;
}

.toastTime {
    position: absolute;
    font-size: 9px;
    bottom: 6px;
    left: 77px;
    color: #757575;
}

.toastCont.stacked .toastTime {
    margin-top: 4px;
    bottom: 5px;
    left: 55px;
}

.toastModal {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.toastModal.active {
    display: block;
}

.toastCont.active {
    display: block;
}

.toastCont.stacked .toastModalWrapper {
    position: absolute;
    width: 60%;
    height: 50%;
    top: 50%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    box-shadow: #ffffffb8 0px 0px 1px 2px, rgb(33 33 33 / 50%) 0px 0px 0px 500px;
    background: linear-gradient(320deg, rgb(233 30 99 / 80%) 0%, rgb(233 30 99 / 80%) 22%, rgb(233 30 129 / 90%) 100%);
    backdrop-filter: blur(2px);
}

.toastModalBottom {
    width: 100%;
    height: 50%;
}

.toastModalTop {
    width: 100%;
    height: 50%;
}

.toastBadge.toastConfirm {
    display: none;
    left: 87px;
    background: #27ba2d;
}

.toastBadge.toastCancel {
    display: none;
    left: 128px;
    background: #ed1818;
}

.toastBadge.toastMinimise {
    opacity: 0;
    left: 271px;
    height: 25px;
    width: 30px;
    top: -17px;
}

.toastList:empty:after {
    content: 'No alerts found';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #757575;
    width: 100%;
    height: calc(100% - 8px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
}

.toastListHistory:empty:after {
    content: 'No historic alerts found';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #757575;
    width: 100%;
    height: calc(100% - 8px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
}

.toastModalBottom > div {
    display: block;
    color: #fff;
    width: 50%;
    padding: 2px;
    border: 2px solid #ffffffb8;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    margin-bottom: 6%;
    padding-top: 5px;
    padding-bottom: 5px;
    background: linear-gradient(320deg, rgb(204 8 75 / 85%) 0%, rgb(172 0 59 / 85%) 22%, rgb(127 3 63 / 85%) 100%);
    cursor: pointer;
}

.toastModalBottom > div:hover {
    background: rgb(233 30 129 / 90%);
    color: #fff;
}

    .toastModalBottom > div:hover {
        background: #fff;
        color: #830530;
        border: 2px solid #830530;
    }

.toastModalBottom {
    padding: 0px;
    width: 100%;
    position: relative;
    margin: 0px;
}

.toastModalText {
    color: #fff;
    text-align: center;
    padding-top: 10px;
    font-size: 24px;
}

.toastListHistory {
    display: none;
}

.toastCont.history .toastListHistory {
    display: block;
}

.toastCont.history .toastList {
    display: none;
}

.toastListHistory i.material-icons {
    color: #f57c00 !important;
}

.toastListHistory .toastDiv {
    background: #fffde7 !important;
}


body {
    background: #fafafa;
}


label.inputlabel {
    text-align:left;
    width:unset;
}
 div .inputrow input[type="text"],  div.inputrow input[type="password"],  div.inputrow textarea,  textarea,  input[type="text"]{
    width: calc(100% - 2.2rem);
}

input[type="text"], input[type="password"], textarea, select, .ccsSelect {
    padding: 14px 13px 11px 16px !important;
    border-radius: 4px;
    border: 2px solid #CCC;
    margin-bottom: 8px;
}

    .ccsSelect:focus {
        outline: 0;
        border: 2px solid #E91E63;
    }



    #frm div.inputrow textarea {
        padding-top: 22px !important;
    }

#frm .inputrow {
    position: relative;
    padding: 6px;
    margin: 0px auto;
    
}



.displayRecord .inputrow {
    max-width: 600px;
}

label.inputlabel {
    position: absolute;
    top: -5px;
    left: 20px;
    background: #fff;
    width: unset;
    color: #555;
    border-radius: 4px;
    padding-top: 2px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
}

#gdivAudit label.inputlabel {
    position: relative;
    top: 10px;
    left: 20px;
    background: #fff;
    width: unset;
    padding-left: 4px;
    padding-right: 4px;
    color: #555;
}

#frm label.filelabel {
    position: absolute;
    border: 0px;
    height: 48px;
    width: 48px;
    left: unset !important;
    top: 6px;
    right: -2px;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 24px;
    padding: 5.5px 12px;
    text-align: center;
    background: #E91E63 !important;
    color: white !important;
    border-radius: 0px 4px 4px 0px;
}

#frm input.filevalue {
    margin-left: 0px;
}

#frm input .datepick {
    position: static !important;
}

#frm .ui-accordion .ui-accordion-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: none !important;
    border: 1px solid #EEEEEE;
    border-bottom: 2px solid #EEEEEE;
    background: #FFF;
    padding:15px;
}

 label.inputsectorlabel, #frm .ui-accordion .ui-accordion-header {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 12px !important;
    box-shadow: none !important;
}

label.inputsectorlabel.search_hiding {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

#frm .mcs-colour-label {
    top: 8px !important;
    color: #FFF !important;
    background: #00000087 !important;
    padding: 10px !important;
    left: 7px !important;
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
    min-width: 15% !important;
    text-align: center !important;
    line-height: 25px;
}

#frm .mcs-sample-label {
    display: none !important;
}

#frm .disabled-labled {
    color: #9e9e9e;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 8px;
}



#frm input[disabled], #frm textarea[disabled] {
    border: 1px solid #e0e0e0;
    color: #9e9e9e;
    background: #F5F5F5 !important;
}

 button[type="button"],  button[type="submit"],  button[type="reset"],  button {
    border-radius: 42px;
    padding: 6px;
    border: 2px solid transparent;
    color: #000;
    opacity: .84;
    transition: color 0s, opacity .5s;
    background-color: transparent;
    color: #880e4f;
}

     button[type="submit"] {
        background: #FCE4EC;
    }

     button[type="reset"] {
        border: 0;
        background-color: #fce4ec ;
    }

     button[type="button"]:hover, #frm button[type="submit"]:hover#frm, button[type="reset"]:hover, #frm button:hover {
        opacity: .92;
    }

     button[type="button"]:active, #frm button[type="submit"]:active, #frm button[type="reset"]:active, #frm button:active {
        opacity: 1;
    }



.pagehead.globalcentre {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none;
}
.pagetitle {
    margin-top: 6px;
}

#gdivStatus {
    background-color: #f5f5f5;
    padding: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    #gdivStatus i.material-icons {
        line-height: 14px;
    }

.mft-help {
    bottom: 10.5px;
    background-color: #f5f5f5;
}

.focused-label {
    color: #E91E63 !important;
    font-weight: 700;
    z-index: 52 !important;
    border-radius: 4px;
    outline: 1px solid #f48fb1;
}

.focused-label-checkbox {
    outline: none !important;
}

#frm input[type="checkbox"] + label.ui-button {
    border: 0;
    text-align:left;
    z-index: 52;
}

input.datepick {
    position: static !important;
    z-index: 10 !important;
}

.searchlistbutton {
    position: absolute;
    border: 0px;
    height: 36px;
    width: 32px;
    left: unset !important;
    top: 7px;
    right: 10px;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 36px;
    padding: 5.5px 12px;
    text-align: center;
    background: #E91E63 !important;
    color: white;
    border-radius: 0px 4px 4px 0px;
}

    .searchlistbutton .material-icons {
        line-height:30px;
        color: #FFFFFF;
    }

   /* html.desktop ul.autocomplete {
        margin-left: 100px;
        margin-right: auto;
        width: calc(100% - 20px) !important;
    }*/
ul.autocomplete {
    background: #ffffff;
    border-radius: 4px;
    border: 2px solid #e91e63;
    box-shadow: 0 0 0 200vw #00000033;
}

.autocomplete-searchfilter {
    font-weight: 500;
    padding: 16px;
    background: #ffffff;
    position: sticky;
    top: 0px;
    color: #880e4f;
    border-bottom: 1px solid; 
}

    .autocomplete-searchfilter::after {
        margin-left: 2px;
        border-right: 1px solid black;
        content: "";
        animation: caret-blink 1s linear infinite;
    }
@-webkit-keyframes caret-blink {
    50% { opacity: 0; }
}

.autocomplete-searchfilter span {
    position: absolute;
    padding-left: 4px;
}
    div .inputrow button[type="button"], div.inputrow select, div.inputrow button[type="button"] {
        border-radius: 42px;
        /* border: 1px solid #CCC !important;*/
        /* height: 44px;*/
        /*  padding: 11px;*/
    }

div.inputrow select, select {
    border-radius:4px;
    height:44px;
}

div.newlayout .inputrow select, select {
    width: calc(100% - 5px);
}

html.desktop div.normaldiv {
    border-radius: 10px;
}

.scrolllist-showselected .material-icons, .scrolllist-showall .material-icons {
    line-height: 48px;
}

.centrerow input[type="text"] {
    max-width: 50% !important;
}

input.mcs-sample {
    width:50% !important;
}

.mcs-contrast {
    width:40%;
    text-align:center;
    line-height:48px;
}

button.inlinecmd, .inlinecmd {
    min-width: 0px !important;
    height: 48px !important;
    border-radius: 4px !important;
    max-width: 25%;
    margin-top: -2px !important;
    background: #fce4ec !important;
    border: 1px solid #f8bbd0 !important;
}

html.desktop div.normaldiv {
    background:#FFF;
}

#docDownload, .secondary_input_button {
    position: absolute;
    border: 0px;
    height: 22px;
    padding-top: 0px;
    right: 57px !important;
    left: unset !important;
    background-color: #EFEFEF !important;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 28px;
    padding: 10.5px 12px;
    margin-top: -53px;
    text-align: center;
    color: #E91E63;
}

.ui-button-text {
    padding:unset;
}

#toolPageLink .material-icons {
    font-size:28px;
}

/* width */
::-webkit-scrollbar {
    display: initial !important;
    width: 16px;
}

/* Track */
::-webkit-scrollbar-track, *::-webkit-scrollbar-track {
    background: #f06292;
}

/* Handle */
::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
    background: #f8bbd0;
    border: 2px solid #f06292;
    border-left-width: 3px;
    border-radius: 4px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover {
        background: #f8bbd0;
    }


.ccsSelect {
    top: 1.75rem;
    left: 8px;
    right: 8px;
    bottom: 0px;
    z-index: 0;
    background: 98% 50% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 0 24 24' width='28px' fill='%23757575'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}
.ccsSelect + ul.options {
    position: absolute;
    z-index: 2;
    background: #FFF;
    border: 2px solid #E93E63;
    border-top: 0;
    border-radius: 4px;
    margin-top: -0.65rem;
    width: calc(100% - 3.65rem);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid #E93E63;
    max-height: calc(300px - 3rem);
    overflow: auto;
}

.ccsSelect + ul.options li {
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #f8bbd0;
    background: #fce4ec;
    color: #880e4f;
    margin: 4px;
    list-style: none;
    margin-left: -36px;
    min-height: 1rem;
    font-weight: 700;
}

.ccsSelect + ul.options li.selected {
    background: #DFD;
    border: 1px solid #7C7;
    color: #1b5e20;
}

.ccsSelect + ul.options li.hover {
    background: #F06292;
    cursor: pointer;
    color: #FFFFFF;
}

select {
    appearance: none;
    border: 0;
    text-align: left;
    font-weight: 700;
    width: auto;
    padding: 4px 8px;
    margin-top: -4px;
}

select > option {
    background-color: #FAFAFA;
    color: #000;
    font-weight: 700;
}
