/*#region CONSTANTS */

@import url("https://p.typekit.net/p.css?s=1&k=fgs5xrd&ht=tk&f=139.140.175.176&a=122441021&app=typekit&e=css");

@font-face {
    font-family: Proxima Nova;
    src: url(https://use.typekit.net/af/2555e1/00000000000000007735e603/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/2555e1/00000000000000007735e603/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/2555e1/00000000000000007735e603/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://use.typekit.net/af/4de20a/00000000000000007735e604/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/4de20a/00000000000000007735e604/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/4de20a/00000000000000007735e604/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("opentype");
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://use.typekit.net/af/3322cc/00000000000000007735e616/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/3322cc/00000000000000007735e616/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/3322cc/00000000000000007735e616/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("opentype");
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal
}

@font-face {
    font-family: "AbcomCloudFont";
    src: url(/font/HelveticaNeueLt.ttf) format("truetype");
}

@font-face {
    font-family: 'IBM VGA 8x16';
    src: url(/font/WebPlus_IBM_VGA_8x16.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*#endregion */

/*===============================================================================================================*/

/*#region DOM */
html {
    scroll-behavior: smooth !important;
    overflow-x: hidden;
    height: 100%;
    --scrollbarBG: transparent;
    --thumbBG: black;
}

iframe {
    border: none;
}

body {
    border-top: 10px solid #66CC00;
    overflow-x: hidden;
    background-color: white;
    background-color: #fdfafa;
    color: #666;
    height: 100%;
    scroll-behavior: smooth !important;
    overflow-y: scroll !important;
    font-family: Proxima Nova,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    font-size: 93% !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

    body.wait, body.wait * {
        cursor: wait !important;
    }

label {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    cursor: default !important;
}

li {
    line-height: 150%;
}

img {
    background-color: transparent !important;
    font-size: 7px;
}

sub {
    font-weight: normal !important;
}

dt {
    font-weight: normal !important;
    color: dimgrey;
}

dd {
    margin-bottom: 15px;
}


label.abcom-checkbox-label {
    background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_5ed3110c2dbfa898cff4fe25b69ceb41.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input [type=checkbox].abcom-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=checkbox].abcom-checkbox + label.abcom-checkbox-label {
        padding-left: 25px;
        height: 20px;
        display: inline-block;
        line-height: 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 20px;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].abcom-checkbox:checked + label.abcom-checkbox-label {
        background-position: 0 -20px;
    }

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    font-family: Proxima Nova,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-size: 95% !important;
    font-weight: normal !important;
    margin-bottom: 0 !important;
    border:none !important;
}

textarea {
    min-height: 150px !important;
    padding: 15px;
}

.large-text {
    min-height: 350px !important;
}

a {
    color: green !important; 
    color: #060;
    font-weight: bold !important;
}

    a:hover {
        color: limegreen;
        opacity: .8;
    }

p {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}

h1 {
    clear: both;
    padding-top: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    font-weight: 700;
    font-size: 250%;
    padding-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-family: 'AbcomCloudFont';
    font-weight: normal !important;
    padding-top: 0px !important;
}

    h1 b {
        text-transform: uppercase;
    }

h2 {
    font-size: 26px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

h3 {
    font-size: 120%;
    font-family: Arial;
    background-color: #e6e6e675;
    padding: 15px;
    margin: 0 0 20px 0 !important;
    color: #444;
    font-weight: bold;
}


h4 {
    font-weight: bold;
    padding-top: 20px !important;
    font-size: 110%;
    font-family: Arial, Helvetica, sans-serif;
}

    h4 i {
        vertical-align: middle;
    }

    h4 span {
        vertical-align: middle;
        display: inline-block;
        margin-left: 10px;
    }

h5 {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 15px;
}

h6 {
    font-weight: bold;
    margin-top: 5px;
    font-size:130%;
    margin-bottom: 20px !important;
}

hr {
    height: 1px;
    color: #666;
    margin-top: 20px;
    margin-bottom: 20px;
}


select {
    padding: 8px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #444;
    margin-top: 3px !important;
    display: block !important;
}

    select option {
        padding: 10px !important;
    }

input[type=checkbox] {
    -webkit-appearance: checkbox !important;
}

input[type=file] {
    margin-top: 6px;
    border: 1px solid #222 !important;
    width: 100%;
    padding: 6px;
}

::-webkit-file-upload-button {
    min-width: 150px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    background-color: silver;
    cursor: pointer !important;
    border-radius: 0 !important;
}

    ::-webkit-file-upload-button:hover {
        opacity: .8;
    }



::-ms-browse {
    min-width: 150px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    background-color: silver;
    cursor: pointer !important;
    border-radius: 0 !important;
}

    ::-ms-browse:hover {
        opacity: .8;
    }


b {
    font-weight: bold !important;
}



/*#region radio button overrides */
.radioContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .radioContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.radioContainer:hover input ~ .checkmark {
    background-color: #ccc;
}

.radioContainer input:checked ~ .checkmark {
    background-color: #2196F3;
}

.formControlNote {
    
    display: table;
    margin-top: -28px;
    font-size: 92%;
    margin-left: 14px;
    color: black;
    margin-bottom: 5px;
    background-color: navajowhite;
    border: brown 1px dashed;
    padding: 0px;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radioContainer input:checked ~ .checkmark:after {
    display: block;
}

.radioContainer .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
/*#endregion */

[type=checkbox]:checked + label:before {
    /*border-right: 2px solid green !important;
    border-bottom: 2px solid green !important;*/
}

.white-skin input[type=checkbox].filled-in:checked + label:after {
    background-color: dimgrey;
    border-color: dimgrey;
}

label {
    padding-top: 4px;
    line-height: 15px !important;
    font-weight: 500;
    display: block !important;
    margin-bottom: 5px !important;
    color: #444 !important;
}

    label i.fa {
        margin-left: 4px;
    }


header {
    max-height: 70px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

main {
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    background-color: white;
}


table.dataTable tbody td {
    outline: none !important;
}
/*#endregion */

/*===============================================================================================================*/

/*#region COMMON FORMATING ELEMENTS */

.responseIndicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

.rejectedResponseIndicator {
    background-color: red;
}

.pendingResponseIndicator {
    background-color: yellow;
}

.approvedResponseIndicator {
    background-color: limegreen;
}

.cancelledResponseIndicator {
    background-color: lightgrey;
}

.employedResponseIndicator {
    background-color: dodgerblue;
}

.deletionConfirmationBox {
    background-color: aquamarine;
    display: inline-block;
    clear: both;
    margin: 5px;
    padding: 5px;
    border: 1px solid #999;
    margin-bottom: 20px;
}


.onboardingIcon {
    color: #00c851 !important;
    opacity: 1 !important;
    font-size: 250% !important;
    padding-right: 10px !important;
}

.warning {
    background-color: peachpuff;
    color: darkred;
    border: red 1px solid;
    padding: 15px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.dataOption {
    padding-top: 10px;
    position: relative;
}

    .dataOption input {
        width: calc(100% - 50px);
        position: relative;
        margin-right: 10px;
        height: 30px;
    }

    .dataOption .deletButton {
        position: relative;
        width: 30px;
        top: -1px;
        height: 30px;
    }

.box {
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.availability {
    background-color: mediumseagreen;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid mediumseagreen;
    color: white;
    display: block;
    margin: 5px;
    max-width: 140px;
    text-align: center;
    min-width: 50px;
}

.availabilityVariationSectionHeader {
    background-color: lightseagreen !important;
    margin-top: 10px;
    color: white !important;
}

.variation {
    background-color: lightseagreen;
    border-radius: 10px;
    padding: 7px;
    display: inline-block;
    color: white;
    border: 2px dotted white;
    margin: 5px;
    max-width: 130px;
    text-align: center;
    min-width: 50px;
}

.standardShift {
    border: 2px solid darkgreen;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    color: black;
    display: block;
    margin: 5px;
    max-width: 120px;
    text-align: center
}

    .standardShift sub {
        font-family: 'Courier New';
        font-size: 11px;
    }


.noScheduling {
    background-color: papayawhip;
    padding: 10px;
    text-align: center;
    margin: 15px;
}

    .noScheduling:after {
        content: 'Scheduling is currently not enabled for this organisation. Contact Abcom for further information.';
    }

.noBi {
    background-color: papayawhip;
    padding: 10px;
    text-align: center;
    margin: 15px;
}

    .noBi:after {
        content: 'Business Intelligence is currently not enabled for this organisation. Contact Abcom for further information.';
    }

.noOnboarding {
    background-color: papayawhip;
    padding: 10px;
    text-align: center;
    margin: 15px;
}

    .noOnboarding:after {
        content: 'Onboarding is currently not enabled for this organisation. Contact Abcom for further information.';
    }

.shiftStartPreviousDayIndicator {
    position: absolute;
    height: 20px;
    width: 20px;
    background-color: lightsteelblue;
    text-align: center;
    top: -12px;
    left: -12px;
}

.shiftStartsDifferentDayWarning {
    font-size: 80%;
    display: block;
    opacity: .6;
}

.reportColumnHeaderTitle {
    padding: 10px 20px 10px 0;
    font-weight: bold;
}

.dateDisplay {
    width: 110px;
    position: relative;
    height: 29px;
    pointer-events: none;
    border-left: 1px solid #444;
    border-bottom: 1px solid #444;
    border-top: 1px solid #444;
    padding: 2px;
    margin-top: -29px;
    background-color: white
}

.dateDisplayClear {
    position: relative;
    height: 29px;
    padding: 2px;
    margin-left: 140px;
    margin-top: -29px;
    background-color: white;
    text-align: center;
    border: 1px solid #444;
    width: 30px;
    cursor: pointer;
}

.smallForm {
    min-width: 400px;
}



/*#region DANGER */
.inlineTable {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 0px;
}

    .inlineTable tr {
        margin-top: 10px;
        border-bottom: 1px solid #ddd;
    }


    .inlineTable td {
        padding-right: 10px;
    }

.responsiveTableOuter {
    overflow-x: auto;
}

.inlineChildTableHeader {
    vertical-align: top;
    /*background-color: #eee;*/
    text-transform: uppercase;
    padding: 2px;
    font-weight: bold;
    font-size: 80%;
}

.childListEntryActions {
    vertical-align: top;
    width: 90px;
    min-width: 90px;
    padding-right: 0px !important;
    /*display: inline-block;*/
}

.childListResponsiveHeader {
    text-transform: uppercase;
    color: #000 !important;
    display: block;
    display: none;
    font-weight: bold;
    font-size: 80%;
}

.childListEntryActions div {
    padding-top: 10px;
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
}

.childListEntryActions a {
    display: inline-block;
    cursor: pointer;
    font-size: 110%;
    margin-right: 13px;
    margin-bottom: 10px;
}

.inlineCellResponsiveHeader {
    font-family: 'Segoe UI';
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 5px;
    color: #000 !important;
    display: none;
    font-weight: bold;
    font-size: 80%;
}




@media screen and (max-width: 600px) {

    .inlineTable {
        width: 100%;
        margin-bottom: 0px !important;
    }

    .inlineCellResponsiveHeader {
        margin-left: -10px;
        display: block !important;
    }

    .inlineChildTableHeader {
        display: none !important;
    }

    .childListEntryActions {
        margin-left: -10px;
        display: block;
        width: 100%;
    }

    .inlineTable td {
        display: block;
        padding-left: 10px;
        padding-bottom: 10px;
        font-size: 110%;
    }

    .inlineTable tr {
        display: block;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }
}

.childListEntryActions div {
    display: inline-block;
    cursor: pointer;
    font-size: 110%;
    margin-right: 13px;
    margin-bottom: 10px;
}

.childListEntryDetails {
    padding-left: 15px;
    border-left: 1px solid #ddd;
    vertical-align: top;
    /*background-color: yellow;*/
    margin-left: 80px;
    margin-top: -20px;
    display: inline-block;
    width: calc(100% - 80px);
}

.borderBox {
    border: 1px solid #aaa;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.accessNote {
    padding: 3px;
    font-size: 70%;
    background-color: pink;
    border: 1px solid brown;
    text-transform: uppercase;
}

/*#endregion */




/*#region BUTTONS */

.show-in-new-window {
    display: inline-block;
    padding: 2px 6px;
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
    font-size: 100%;
    background-color: #eee;
    border-radius: 2px;
}

    .show-in-new-window:hover {
        opacity: .7;
    }

    .show-in-new-window::before {
        content: "\2197";
    }

.preview {
    background-color: lavender !important;
    color: black !important;
}

.headerIcon {
    font-size: 33px;
    vertical-align: bottom;
    margin-bottom: 20px;
    width: 45px;
    display: inline-block;
}
.headerIconDisplayText {
    display: inline-block;
    width: calc(100% - 50px);
}

.btn {
    /*font-size: 102% !important;*/
    /*font-family: 'Segoe UI' !important;*/
    margin: 0;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    padding: 10px !important;
    /*box-shadow: 2px 2px 5px white !important;*/
    opacity: .9;
    min-width: 150px !important;
    margin-top: 10px;
    text-transform: uppercase !important;
    border: 1px transparent solid !important;
    border: 1px solid #999 !important;
    cursor: pointer !important;
    color: black !important;
    border-radius: 0px !important;
    font-weight: 600 !important;
    background-color: white;
}

    .btn i {
        /*icons*/
        margin-right: 15px;
    }

    .btn a {
        color: black !important;
    }

    .btn:hover {
        border: 1px solid #000 !important;
        box-shadow: 1px 1px 10px rgba(0,0,0,.2);
        box-shadow: 0px 0px 0px rgba(0,0,0,.2);
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        opacity: 1;
        color: initial !important;
        background-color: #f9f9f9;
    }

.btn-compact {
    font-size: 85% !important;
    max-height: 35px;
    padding: 8px !important;
    margin-top: -5px !important;
    min-width: 80px !important;
}

.btn-small {
    font-size: 95% !important;
    max-height: 45px;
    padding: 10px !important;
    min-width: 100px !important;
}

.btn-responsive {
    width: initial;
}

.btn-standard {
    color: #333 !important;
    background-color: #eee;
    border: 1px #aaa solid !important;
    background-color: white;
}

    .btn-standard:hover {
        border: 1px black solid !important;
    }

.btn-list-inline {
    height: 33px !important;
    padding: 0.7rem !important;
    margin: 0px !important;
    /*margin-top: -3px !important; <= this was too low for view button on left of grid rows*/
    margin-top: -5px !important;
    margin-left: 0px !important;
    margin-right: 3px !important;
    color: white !important;
    text-transform: uppercase;
    line-height: 90%;
    font-weight: 600 !important;
    border-radius: 4px;
    /*margin-bottom: -8px !important; <= this was interfering with view button on left of grid rows */
    text-align: center;
    font-size: 75%;
    font-weight: bold !important;
    cursor: pointer;
    border: 0 !important;
}

    .btn-list-inline::before {
        max-width: 44px !important;
    }

    .btn-list-inline:hover {
    }

.btn-danger {
    color: black !important;
    border: 1px red solid !important;
    background-color: white !important;
    background-color: tomato !important;
}

    .btn-danger:hover {
        background-color: tomato !important;
        color: white !important;
    }


.btn-notice {
    color: black !important;
    border: 1px brown solid !important;
    background-color: moccasin !important;
}



.btn-remove-inline {
    margin-top: -5px !important;
    font-size: 80% !important;
    height: 32px;
    padding: 7px !important;
    min-width: 100px !important;
}

.btn-warning-inline {
    background-color: white !important;
    color: black !important;
    border: 1px solid #aaa !important;
}

    .btn-warning-inline:hover {
        background-color: orange !important;
        color: black !important;
        border: 1px solid #000 !important;
    }

.btn-disabled {
    background-color: #eee !important;
    color: #777 !important;
    border: 1px solid #ccc !important;
    cursor: not-allowed !important;
}

.btn-file {
    background-color: #eee;
    min-width: 350px !important;
    min-height: 100px !important;
}

.btn-tool {
    font-weight: bold;
    color: black !important;
    width: 35px;
    text-align: center;
    padding-top: 3px;
}

    .btn-tool a {
        text-decoration: none !important;
        color: black !important;
    }

.btn-setup {
    /*position:absolute;*/
    margin-top: 1px !important;
    text-wrap: avoid !important;
    background-color: #deb887 !important
}

.btn-view {
    /*margin-left: 10px !important;*/
    color: #444 !important;
    display: inline-block;
    border: 1px green solid !important;
    background-color: white !important;
    color: transparent !important;
    max-width: 35px;
    margin-right: 20px !important;
    content: "\279C" !important;
    overflow: hidden;
}

    .btn-view:before {
        font-weight: bold;
        font-size: 160%;
        margin-left: -3px;
        content: "\279C";
        color: green;
    }

    .btn-view:hover {
        /*background-color: #efe !important;*/
        /*     background-color: forestgreen !important;
        color: forestgreen !important;*/
        background-color: forestgreen !important;
        content: "\279C" !important;
        opacity: 1 !important;
        /*padding-left: 14px !important;*/
        border: 1px green solid !important;
        box-shadow: 5px 5px 5px #bbb;
    }

        .btn-view:hover:before {
            font-weight: bold;
            font-size: 160%;
            /*margin-left: 0px;*/
            content: "\279C";
            color: white !important;
        }


.btn-launch {
    margin-left: 10px !important;
    color: #444 !important;
    display: inline-block;
    border: 1px green solid !important;
    background-color: white !important;
    color: transparent !important;
    max-width: 35px;
    margin-right: 20px !important;
    text-align: center;
}

    .btn-launch:before {
        font-weight: bold;
        font-size: 160%;
        margin-left: -2px;
        content: "\2197";
        color: green !important;
    }

    .btn-launch:hover {
        background-color: #efe !important;
        opacity: 1 !important;
        border: 1px green solid !important;
        box-shadow: 4px 4px 1px #eee;
    }

.btn-go {
    cursor: pointer;
    background-color: #66CC00 !important;
    background-color: green !important;
    color: white !important;
    border: 1px transparent solid !important;
}

    .btn-go:hover {
        color: green !important;
        border: 1px green solid !important;
        background-color: white !important;
    }

    .btn-go a {
        color: green !important;
    }

        .btn-go a:hover {
            color: green !important;
        }

.btn-sign {
    background-color: peachpuff;
    color: black !important;
    padding: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    margin-top: 20px;
    display: block;
    max-width: 110px;
    border: 2px dotted #f96;
}

    .btn-sign:hover {
        opacity: .7;
        background-color: sandybrown;
        box-shadow: 0px 0px 5px #ddd;
    }

.copy-button {
    display: inline-block;
    background-color: powderblue;
    border: 1px #444 solid;
    margin-top: 3px !important;
    min-height: 15px;
    min-width: 30px;
    vertical-align: top;
    margin-left: 10px;
    font-size: 50%;
    text-align: center;
    cursor: copy;
    opacity: .5;
}

    .copy-button:hover {
        opacity: .8;
    }

    .copy-button:active {
        border: black 1px solid;
        opacity: 1;
        background-color: royalblue
    }

.smallDeleteButton {
    cursor: pointer;
    display: inline-block;
    font-size: 70%;
    padding-left: 4px;
    padding-right: 4px;
    top: -2px;
    margin-left: 3px;
    margin-right: 3px;
    position: relative;
    background-color: rgba(178, 178, 178, 0.33);
}

    .smallDeleteButton:hover {
        box-shadow: 0 0 5px #fff;
        background-color: #f55;
        background-color: orangered;
        color: white !important;
    }

.contentReportLauncher {
    cursor: pointer;
    background-color: floralwhite;
    border: 1px solid #ddd;
    display: inline-block;
    width: 20px;
    height: 20px;
    color: black;
    font-size: 80%;
    font-weight: bold;
    padding-left: 7px;
    font-family: 'Arial Rounded MT';
    position: absolute;
    right: 0;
    top: 0;
}

    .contentReportLauncher:after {
        content: '!';
    }

/*#endregion */

/*#region PROGRESS WIDGET */

.progressIndicator {
    font-size: 80%;
    text-transform: uppercase;
    color: black;
    padding: 5px;
    border-radius: 3px;
}

.progressGreen {
    background-color: palegreen;
}

.progressYellow {
    background-color: palegoldenrod;
}

.progressOrange {
    background-color: coral;
}

.progressRed {
    background-color: lightpink;
}
/*#endregion */

.padLeftAndRight {
    padding-left: 15px;
    padding-right: 15px;
}

.menuLinkNew {
    display: inline-block;
    background-color: red !important;
    color: whitesmoke !important;
    font-size: 50%;
    /*    padding-left: 5px;
    padding-right: 5px;
*/
    line-height: 90%;
    padding: 4px 5px;
    margin-left: 10px;
    vertical-align: super
}

/*hide this spacer in normal layout*/
.responsive-menu-spacer {
    display: none;
}

/*used to show that content is NEW (ie messages etc)*/
.newIndicator {
    font-size: 70%;
    font-weight: bold;
    background-color: red;
    color: white;
    padding: 3px;
    width: 50px;
    margin-top: 10px;
    text-align: center
}

/*sections are used to sub format a page*/
.section-container {
    border: 1px #eee solid;
    border: 1px #ddd solid;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 35px;
    margin-left: 15px;
    margin-right: 15px;
}

    .section-container p {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-container h3 {
        background-color: #444;
        background-color: #eee;
        background-color: transparent;
        margin-bottom: -7px !important;
        color: white;
        color: black;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        font-size: 100%;
    }

    .section-container .form-group {
        margin-top: 20px !important;
    }

/*us to indicate if a user is AC enabled*/
.abcom-cloud-enabled {
    display: inline-block;
    margin-top: -5px !important;
    padding: 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 60%;
    border: 1px solid black;
    border-top: #66CC00 solid 3px;
}

.abcom-label {
    font-weight: bold;
    border-left: 5px solid #ddd;
    font-size: 100%;
    padding-bottom: 5px;
    /*padding-bottom: 15px; leaving this off for experiment  */
    margin-bottom: 0px !important;
    padding-left: 15px;
    /*margin-bottom: 5px !important;
    color: #444 !important;
    font-weight: bold !important;*/
}

.sectionComplete {
    background-color: lightgreen;
    border: 1px solid forestgreen;
    border-radius: 5px;
    padding: 15px;
    color: black;
}

.abcom-display {
    margin-top: 0px;
    margin-bottom: 10px; /* 30px this makes it so display elements line up with form elements when switching between view and edit*/
    border-left: 5px solid #ddd;
    padding: 10px;
    padding-left: 15px;
    min-height: 28px;
}

    .abcom-display:empty:before {
        content: "..."
    }

.lightRoundBorder {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.formControlFormatWarning::after {
    font-size: 80%;
    margin-top: 10px;
    display: block !important;
    color: darkred;
    border-color: lightpink;
    border-width: 1px;
    border-radius: 3px;
    content: "! The entered value is not in the correct format" !important;
}

.formControlSizeWarning::after {
    font-size: 80%;
    margin-top: 10px;
    display: block !important;
    color: darkred;
    border-color: lightpink;
    border-width: 1px;
    border-radius: 3px;
    content: "! The entered value is does not meet the size requirements for this field" !important;
}


.formControlRequiredWarning::after {
    font-size: 80%;
    margin-top: 10px;
    display: block !important;
    color: darkred;
    border-color: lightpink;
    border-width: 1px;
    border-radius: 3px;
    content: "! This field is required" !important;
}


/*
.formControlMinLengthWarning:after {
    content: "The entered value does not meet the minimum length";
}*/

.form-warning {
    font-size: 80%;
    text-transform: uppercase;
    color: red;
    margin-top: -20px;
}

.disabled-element {
    opacity: .8;
    cursor: not-allowed !important;
    pointer-events: none;
    background-color: #eee;
}

.disabled-label {
    opacity: .8;
    cursor: not-allowed !important;
    pointer-events: none;
}

.non-interactive {
    pointer-events: none !important;
    cursor: col-resize !important;
}

.rightToDownArrow {
    font-size: 400%;
    text-align: center;
}

    .rightToDownArrow .downArrow {
        display: none;
    }

.vertical-col-seperator {
    background-color: #ddd;
    width: 1px;
    display: inline-block;
    margin-left: -1px;
}

.AJAXselect {
    -moz-appearance: none;
    -webkit-appearance: none;
}

    .AJAXselect::-ms-expand {
        display: none;
    }

/*UI element locked by API*/
.locked {
    background-color: salmon;
    color: floralwhite;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
}

.anchorage {
    margin-top: -30px;
}

.archived {
    color: #aaa !important;
}

.content-box {
    padding: 20px;
    border: 2px #f1f1f1 solid;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.content-box-header {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f1f1f1;
}

.showOnMobile {
    display: none;
}

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

.spacer {
    margin-top: 5px;
    background-color: white !important;
    border: white 1px solid !important;
    display: none;
}

.no-content {
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 15px; /*this was causing issues on announcements index in ops?*/
}

.no-content-with-no-add {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    border: 1px dashed #999;
}

    .no-content-with-no-add p {
        margin-bottom: 0px !important;
    }

.readonly-checkbox {
    cursor: default !important;
}


.employmentRecord {
    background-color: khaki;
    border: 2px dashed lightgrey;
    padding: 15px;
    display: inline-block;
    box-shadow: 20px 20px 30px #eee;
    font-weight: bold;
}

.terminationDetails {
    border: 1px solid coral;
    padding: 0px 5px;
    display: inline-block;
    margin-right: 10px;
}

.btn-terminate {
    background-color: orangered;
    padding: 5px !important;
    border: 1px dashed grey !important;
}

.btn-reinstate {
    padding: 10px !important;
    background-color: lightseagreen;
    border: 1px dashed grey !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    clear: both;
    display: inline-block;
}


.emailBox {
    background-color: dodgerblue;
    color: whitesmoke;
    border: 1px solid black;
    display: inline-block;
    padding: 5px;
    font-weight: normal !important;
    border-radius: 10px;
    font-size: 80%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.onboardingRequestBox {
    padding: 10px;
    background-color: ghostwhite;
    border: 1px solid #eee;
}

.abcomDangerBox {
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 10px 15px;
    background-color: #333;
    color: white;
}

    .abcomDangerBox div {
        display: inline-block;
    }

    .abcomDangerBox:before {
        content: 'Are you sure that you wish to delete';
    }

    .abcomDangerBox:after {
        display: block;
        margin-top: 5px 15px;
        font-weight: bold;
        content: 'This action is permanent and cannot be undone.';
    }

.embed-container {
    /*background-color:azure;*/
    /*height: calc(100% - 60px);*/
    height: calc(100% - 20px);
    min-height: 510px;
    clip-path: inset(0 0 40px 0);
    height: calc(100% + 20px) !important;
    z-index: 50;
}

.biReportTab {
    height: calc(100vh - 275px);
}

.abcomWarningBox {
    background-color: mistyrose;
    border: 1px dashed red;
    color: orangered;
    font-weight: bold;
    padding: 10px 15px;
}

.abcomInstructionBox {
    padding: 10px 15px;
    font-weight: bold;
    background-color: cornflowerblue;
    color: #eef !important;
}

    .abcomInstructionBox a {
        color: #eef !important;
    }

.abcomNoticeBox {
    background-color: #f4f4f4;
    /*font-size: 95%;*/
    font-weight: bold;
    padding: 10px 15px;
    color: #333;
    /*border-radius: 5px;*/
    border: 1px solid #ddd;
}

.abcomSuccessBox {
    background-color: lightgreen;
    padding: 10px 15px;
    color: #333;
    font-weight: bold;
}

.abcomConfirmationBox {
    padding: 10px 15px;
    border: 1px solid #777;
    margin-bottom: 20px;
}




.paginationNav {
    background-color: white;
    margin: 10px;
    position: sticky;
    top: 70px;
    top: 0px;
    padding: 10px;
    border: 1px #eee solid;
    z-index: 60;
}

    .paginationNav button {
        margin: 5px;
        min-width: 100px;
    }

    .paginationNav input {
        margin: 5px;
        min-width: 100px;
    }

.notice {
    background-color: #f4f4f4;
    font-size: 95%;
    padding: 15px;
    color: #333;
    border-radius: 5px;
}

.cfmNotice {
    background-color: orangered;
    font-size: 95%;
    padding: 15px;
    color: #eee;
    margin: 20px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px grey;
}

    .cfmNotice:after {
        content: 'SYSTEM DATA : This item cannot be modified. ';
    }

/*#endregion */

/*===============================================================================================================*/

/*#region UNIQUE FORMATING ELEMENTS */

/*scheduling styles*/
.rosterShiftDisplay {
    font-size: 90%;
}

.rosterShiftDayColumn {
    display: inline-block;
    width: 13.9%;
    vertical-align: top;
    /*border-left: 1px #aaa solid !important;*/
    border-right: 1px #ccc solid !important;
    min-height: 100% !important;
}

    .rosterShiftDayColumn:first-of-type {
        /*border-left: 0px #aaa solid !important;*/
    }

    .rosterShiftDayColumn:last-of-type {
        border-right: 0px #ccc solid !important;
    }

.colourSwatch {
    height: 30px;
    width: 30px;
    border: 1px solid #555;
}

.rosterShiftBreak {
    padding: 10px;
    font-size: 80%;
}

.rosterOuter {
    border: 1px solid grey;
    background-color: aliceblue;
    margin-top: -10px;
    border-radius: 10px;
    margin-bottom: 40px;
    display: flex
    /*background-color:#eee*/
}

.rosterShiftDayColumnHeader {
    padding: 12px;
    font-weight: bold;
    font-size: 85% !important;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0px !important;
}

.rosterShift {
    position: relative;
    /*  background-color:darkslategray;
    color:white;*/
    background-color: white;
    color: black !important;
    margin: 10px;
    margin-bottom: 10px;
    padding: 5px;
    border: 3px solid black;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #00000022;
}

.rosterAreaName {
    background-color: transparent;
    display: inline-block;
    color: dimgrey;
    padding: 5px;
}

.rosterArea {
    /*  background-color:darkslategray;
    color:white;*/

    margin: 10px;
    padding: 5px;
    border: 1px dashed #fff;
}

.rosterShiftTimes {
    /*text-align:center;*/
}

    .rosterShiftTimes span {
        display: inline-block;
        white-space: initial !important;
    }

.rosterShiftOutOfScope {
    border: 2px dashed black;
    /*  background-color: red; testing only*/
}

.noShifts {
    margin: 10px;
    padding: 5px;
    background-color: white;
    color: grey;
    font-size: 70%;
}


/*used as a container for all update pages*/
    .abcom-entity-update-ui {
    padding-top: 15px;
    padding-bottom: 5px;
}

/*used as a container for all create pages*/
.abcom-entity-create-ui {
    padding-top: 5px;
    padding-bottom: 5px;
}

/*used as a container for all details pages*/
.abcom-entity-details-ui {
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 5px;
}

/*#region BREADCRUMB NAV */

.page-breadcrumbs {
    margin-bottom: 10px;
    position: relative;
}

    .page-breadcrumbs a {
        display: inline-block;
        margin-top: 5px;
        padding: 10px 18px 8px 15px;
        padding: 5px;
        margin-right: 10px;
        color: #777 !important;
        border: 1px solid #888;
        font-size: 80%;
        text-transform: uppercase;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

        .page-breadcrumbs a:hover {
            color: black !important;
            background-color: #eee !important;
            border: 1px solid transparent;
            border-left: 6px solid green !important;
            opacity: .8 !important;
            border: 1px solid #888;
            text-decoration: none;
        }

            .page-breadcrumbs a:hover::after {
                color: white !important;
            }

/*#endregion */

/*#region LIGHTBOX FORM */

#lightBoxFormClose {
    position: absolute;
    z-index: 2;
    text-align: center;
    width: 30px;
    /*font-weight: bold;*/
    opacity: 1;
    right: 20px;
    background-color: black;
    color: white;
    cursor: pointer;
    padding-top: 5px;
    height: 30px;
}

#lightBoxFormLoading {
    position: absolute;
    z-index: 2;
    text-align: center;
    width: 100%;
    margin-top: 45%;
    font-weight: bold;
    opacity: 1;
}

    #lightBoxFormLoading img {
        width: 10%;
        margin-bottom: 10px;
    }

#lightBoxFormOuter {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.81);
    text-align: center;
    z-index:3000;
}

#lightBoxFormInner {
    background-color: white;
    position: absolute;
    text-align: left;
    top: 15%;
    height: 70%;
    width: calc(50% + 200px);
    left: calc(25% - 100px);
    max-width: 100%;
    max-height: 100%;
    min-height: 300px;
    background-color: rgba(255, 255, 255, 0.81);
    border: 1px solid #555;
    padding: 20px;
}

#lightBoxFormBrowser {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
    border: 0;
    height: calc(100% - 40px);
    width: calc(100% - 90px);
}
/*#endregion */
/*#region CONTENT REPORT */
.portalContentReport {
    background-color: lightcoral;
    border: 1px solid red;
    color: white !important;
    padding: 20px;
    border-radius: 4px;
}

#contentReportOuter {
    display: none;
    position: fixed;
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.81);
    text-align: center;
}

#contentReportInner {
    background-color: white;
    position: absolute;
    text-align: left;
    top: 30%;
    height: 25%;
    width: calc(50% + 200px);
    left: calc(25% - 100px);
    min-height: 300px;
    background-color: rgba(255, 255, 255, 0.81);
    border: 1px solid #555;
    padding: 20px;
}

    #contentReportInner textarea {
        width: 100%;
        resize: none;
    }

/*#endregion */

.disclaimer {
    position: fixed;
    bottom: 1px;
    left: 5px;
    opacity: .3;
}

/*provides responsive shell styling for the site outer beyond the body tag*/
#siteOuter {
    max-width: 2000px;
    margin: auto;
    min-height: calc(100% - 50px) !important;
    background-color: white;
    border: 1px dotted #f0f0f0;
    scroll-behavior: smooth !important;
    box-shadow: 0px 0px 27px #eee;
}

/*used to stop sesssion timeouts on forms*/
.refresher {
    background-color:red;
    height:1px;
    width: 1px;
    position: fixed;
    left: -200px;
    top: -200px
}

/*#region HELPER TIPS */

#helperTip {
    position: fixed;
    z-index: 20000;
    bottom: 80px;
    left: 27px;
    font-size: 95%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-left: 20px;
    padding-right: 13px;
    background-color: lavenderblush;
    background-color: floralwhite;
    background-color: rgba(127, 141, 178, 0.97);
    background-color: palegreen;
    background-color: white;
    color: white;
    color: black;
    font-weight: 400;
    box-shadow: 0 0 20px #333;
    width: calc(100% - 70px);
    max-width: calc(100% - 70px);
    border: black 3px solid;
    border-radius: 5px;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
    margin-top: -10px !important;
    max-height: 80vh;
}

#helperTipContent {
    max-height: 55vh;
    overflow-y: scroll;
    margin-bottom: 20px;
    padding: 0;
    padding-right: 20px !important;
    white-space: pre-line;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

    #helperTipContent::-webkit-scrollbar {
        width: 6px;
    }

    #helperTipContent::-webkit-scrollbar-track {
        background: var(--scrollbarBG);
    }

    #helperTipContent::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG);
        border-radius: 1px;
        border: 5px solid var(--scrollbarBG);
    }

#helperTip label {
    color: black !important;
}

.abcom-tip {
    background-color: lightyellow;
    border: 1px solid beige;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.tip::before {
    content: "! ";
    font-weight: bold;
    margin-right: 5px;
    height: 100%;
}

/*#endregion */

/*#region ENTITY/ HRI SELECT LISTS */
.entitySelect {
    border: 1px solid #83553a;
    border-radius: 2px;
    font-size: 90%;
    padding: 10px;
    color: black !important;
    max-width: 800px;
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    margin: 1px;
    margin-bottom: 10px !important;
    background-color: gold;
}

    .entitySelect img {
        max-height: 30px;
    }

    .entitySelect:hover {
        margin: 0;
        background-color: #ffd45b;
        border: 2px solid #efba4d;
    }

#OrganisationDbSelectList {
    border: 2px solid gold;
    padding: 10px;
}

    #OrganisationDbSelectList option {
        font-size: 118%;
    }

.entityTypeOuter {
    border: 1px solid;
    margin-bottom: -2px;
}

.organisationEntityType {
    background-color: gold;
    border: 1px solid black
}

.entityHeader {
    color: black;
    font-weight: bold;
    box-shadow: none !important;
    background-color: rgba(255,255,255,.3);
    position: relative !important;
    min-width: initial !important;
    display: none;
}

    .entityHeader:hover {
        display: none;
    }

.entityHeaderLabel {
    display:inline-block;
    padding: 15px;
    font-weight: bold;
    margin-top: -20px;
    margin-bottom: -3px !important;
    background-color: rgba(255,255,255,.3);
    max-height:44px !important;
}
entityHeaderLabel:hover {
    display: inline-block;
    padding: 15px;
    font-weight: bold;
    margin-top: -20px;
    margin-bottom: -3px !important;
    background-color: rgba(255,255,255,.3);
}


.companyEntityType {
    background-color: peachpuff;
    border: 1px solid black
}

.siteEntityType {
    background-color: lemonchiffon;
    border: 1px solid black
}

.entityTypeContent {
    margin-top: -10px;
    color: black !important;
}

.entityType div {
    padding: 10px;
}

/*#endregion */


/*#region ATTACHMENTS */
.fileImage {
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
}

.fileText {
    font-family: Arial;
    padding-top: 15px;
    height: 50px;
    display: inline-block;
    vertical-align: middle
}

.uploadedImage {
    cursor: pointer;
    max-width: 95%;
}
/*#endregion */


/*#region ACCESS PERMISSION STYLES */

.accessType {
    display: inline-block;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    font-size: 110%;
    color: white;
}

    .accessType div {
        margin-left: 20px;
        font-weight: normal;
    }

.adminAccess {
    background-color: dodgerblue;
}

.supportAccess {
    background-color: darkorange;
}

.organisationAccess {
}




.companyAccess {
}


.grecaptcha-badge {
    visibility: hidden;
}


/*#endregion */


/*#region LOGIN PAGE */

#loginContainer {
    text-align: center;
}

#loginOuter {
    text-align: center;
    margin-top: calc(30vh - 200px);
}

#emailLoginContainer {
    min-width: 300px !important;
    background-color: #eee;
    text-transform: initial !important;
    cursor: pointer;
    padding: 10px;
    padding: 15px;
    font-weight: bold;
    overflow-y: hidden;
    border-radius: 5px;
    border: 0px !important;
    transition: height .4s ease-in-out
}

.affiliateLoginButton {
    min-width: 250px !important;
    color: yellow !important;
    min-height: 45px !important;
    text-transform: initial !important
}

/*#endregion */

/*payslip stuff*/

.payslipClockingCol {
    text-align: center;
}

.payslipClockingHeader {
    font-weight:bold; 
    padding:5px;
}

.payslipClockingMinutesSubHeader {
    min-height: 30px;
}



.mobileReportNavBlocker {
    display: block;
    position: absolute;
    right: 36px;
    width: 50px;
    height: 30px;
    z-index: 100;
    background-color: white;
}
/*test banner*/
#sandboxBanner {
    background-color: orangered;
    color: #fff;
    padding: 1px 20px 1px 25px;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 50%;
    opacity: 1;
    position: fixed;
    width: 100%;
    top: 0;
    left:0
}

/*#region COMMAND CONSOLE */

#consoleOuter {
    display: none;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index:1500;
}

#consoleInner {
    margin: 30px;
    background-color: transparent;
    height: calc(100% - 80px);
    padding: 2px;
    width: calc(100%-20px);
    border: white 2px solid;
    border: 5px ridge;
}

#console {
    resize: none;
    background-color: black;
    font-family: 'IBM VGA 8x16';
    -webkit-font-smoothing: none;
    color: white;
    margin: -2px;
    border-radius: 0;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    padding: 20px;
    font-size: 110%;
}

/*#endregion */

/*a plus button for adding things to lists etc*/
.plusTool {
    display: inline-block;
    height: 33px;
    text-align: center;
    width: 33px;
    border: 1px solid grey;
    padding: 4px;
    color: black !important;
    background-color: #eee;
    margin-right: 5px;
    margin-bottom: 5px;
}


/*#region MESSAGES */

/*view original recipient list for messages*/
.viewOriginal {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 60%;
    padding: 5px;
    display: inline-block;
    border: 1px solid #555;
    margin-bottom: 10px;
}

.messageRecipient {
    padding: 5px;
    margin-top: 3px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid black;
}

    .messageRecipient::before {
        content: "►"
    }

.messageReadReceipt {
    opacity: .5;
    font-size: 70%;
    text-transform: uppercase;
    border: 1px solid #333;
    padding: 3px;
}

.messageReadReceiptPrefix {
    font-size: 70%;
    color: #999;
    text-transform: uppercase;
}

.messageCountTicker {
    position: absolute;
    right: 32px;
    margin-top: 3px;
    height: 27px;
    padding: 5px;
    background-color: white;
    cursor: pointer;
    text-align: right
}

    .messageCountTicker a {
        padding: 2px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: red !important;
        color: white !important;
    }

.messageTimeline {
    border-left: 2px solid #444;
}

.messageTimelineEnd {
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(64,64,64,1) 100%);
    height: 30px;
    width: 2px;
}

.messageOriginal {
    border: 2px solid #333;
    border: 1px solid #fdd;
    background-color: snow;
    border-radius: 4px;
    font-size: 130%;
    padding: 20px;
    position: relative;
}

.messageTimelineEntry {
    display: inline-block;
    width: 23px;
}

    .messageTimelineEntry div {
        /*background-color: #444 !important;*/
    }

    .messageTimelineEntry hr {
        position: relative;
        background-color: black !important;
        top: -20px;
        margin-top: -20px !important;
    }

.messageTimelineEntryDetails {
    /*top: -10px;*/
    position: relative;
    width: calc(100% - 30px);
    display: inline-block;
}

.messageActionMessage {
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #000;
    border: 1px solid #fbb;
    background-color: snow;
    background-color: transparent;
    border-radius: 3px;
    padding-top: 10px;
}

    .messageActionMessage pre {
        padding: 10px;
    }

    .messageActionMessage .messageTimelineEntryAction {
        display: none;
    }

    .messageActionMessage div {
        font-size: 120%;
    }

.messageActionRecipientRemoved {
    padding-left: 20px;
    padding-top: 10px;
}

    .messageActionRecipientRemoved div {
        font-size: 90%;
    }

.messageActionRecipientAdded {
    padding-left: 20px;
    padding-top: 10px;
}

    .messageActionRecipientAdded div {
        font-size: 90%;
    }

.messageReadReceiptRowToggle {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 60%;
    padding: 3px;
    background-color: #ddd;
    color: #777
}

/*#endregion */

/*#region PORTAL BIG BUTTONS */

.dashboard-nav-item {
    display: inline-block;
    width: 100%;
    height: 240px;
    height: 110px;
    margin-right: 10px;
    opacity: .8;
    position: relative;
    margin-bottom: 10px;
    transition: opacity .5s;
    border: 1px black solid;
    border-radius: 10px;
    opacity: .7;
    border-radius: 3px;
}

    .dashboard-nav-item div p {
        color: white;
        color: #555;
        font-size: 60%;
        font-weight: normal;
    }

    .dashboard-nav-item:active {
    }

    .dashboard-nav-item:hover {
        opacity: .7;
        opacity: 1;
        box-shadow: 3px 3px 3px #aaa;
    }

    .dashboard-nav-item i {
        /*this is the circle*/
        position: absolute;
        left: calc(50% - 50px);
        left: 20px;
        top: 30px;
        top: 0px;
        font-size: 355%;
        padding-bottom: 0%;
        color: floralwhite;
        background-color: #fff;
        background-color: transparent;
        color: #555;
        border-radius: 60px;
        min-width: 105px;
        text-align: center;
        line-height: 120%;
        padding-top: 20px;
        max-height: 105px;
    }

    .dashboard-nav-item div {
        width: 100%;
        left: 20px;
        left: 140px;
        top: 20px;
        /*bottom: 20px;*/
        /*width: calc(100% - 40px);*/
        position: absolute;
        color: white;
        color: #555;
        font-size: 150%;
        font-family: Arial;
        text-align: center;
        text-align: left;
        width: calc(100% - 150px);
    }

/*#endregion */


/*#region SYSTEM LOG */

#systemLogOuter td {
    word-break: break-word;
    z-index: 50;
    padding: 10px;
    min-width: 40px;
}

#systemLogOuter th {
    z-index: 50;
    padding: 10px;
    min-width: 40px;
}
/*#endregion */

/*#region ACCESS DENIED PAGE */

.access-denied {
    background-color: linen;
    margin: 15px;
    padding: 20px;
}

    .access-denied h1 {
        font-weight: bold;
        font-size: 700% !important;
        margin-right: 40px;
        margin-bottom: 40px !important;
    }

    .access-denied h4 {
        font-size: 70% !important;
    }

    .access-denied label {
        font-weight: 300 !important;
    }

/*#endregion */


/*used to style body for 'print friendly' pages etc that have no standard header*/
.noHeaderBody {
    font-size: 95% !important;
    border-top: 0px !important;
    overflow-x: hidden;
    background-color: white;
    color: #666;
    scroll-behavior: smooth !important;
    overflow-y: initial !important;
    font-family: 'Inter', sans-serif;
    font-family: Arial, Helvetica, sans-serif;
}

/*#region ANNOUNCEMENTS */

.announcement-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    padding: 20px;
    height: 100%;
    z-index: 100000;
    opacity: .98;
    box-sizing: border-box;
    overflow-y: scroll
}

.announcement-inner {
    background-color: white;
    padding: 20px;
    height: 100%;
    box-sizing: border-box
}

.announcement-title {
}

.announcement-text {
    margin-bottom: 30px;
}

.announcement-iframe {
    width: 100%;
    height: 45vh;
}

.announcement-recipient {
    background-color: lightslategray;
    border-radius: 20px;
    padding: 8px 16px;
    display: inline-block;
    color: white;
    cursor: default;
    font-size: 70%;
    margin-top: -5px;
    margin-bottom: 15px;
    margin-right: 15px;
}

.announcement-recipient-no-link {
    opacity: .7;
    cursor: not-allowed;
}

.announcement-recipient-link {
    cursor: pointer !important;
    color: white;
}

    .announcement-recipient-link:hover {
        opacity: .8;
    }



/*#endregion */

/*when deleting, can sub in a new item*/
.selectDeletionSubstitute {
    border: 1px solid green;
    box-shadow: 1px 1px 5px #ddd;
    margin: 15px;
    border-radius: 5px;
    padding: 20px;
}

/*footer*/
.footer-background {
    background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(255,255,255,1) 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#ffffff',GradientType=0 ) !important; /* IE6-9 */
    position: fixed;
    bottom: -10px;
    height: 130px;
    height: 80px;
    width: 100%;
    z-index: 90;
    pointer-events: none;
}

/*#region ACCESS JOIN SUCCESS PAGE*/

.joined-entity {
    color: white;
    max-width: 900px;
    border-radius: 10px !important;
    border: double !important;
    position: relative;
    font-size: 120%;
    line-height: 100%;
    box-shadow: 1px 5px 5px #ddd;
}

    .joined-entity img {
        position: relative;
        vertical-align: top;
        vertical-align: middle !important;
        margin: 20px;
        display: inline-block;
        width: 10%;
        min-width: 50px;
    }

    .joined-entity div {
        vertical-align: middle !important;
        position: relative;
        vertical-align: top;
        display: inline-block;
        width: 60%;
        margin-left: 0px;
        margin-right: 20px;
    }

.joined-entity-organisation {
    background-color: gold;
    color: black;
    border-color: lemonchiffon !important;
}

.joined-entity-company {
    background-color: peachpuff;
    border-color: tan !important;
    color: black;
}

.joined-entity-site {
    background-color: lemonchiffon;
    border-color: tan !important;
    color: black;
}

.joined-entity-employee {
    background-color: darkseagreen;
    border-color: lightseagreen !important;
    color: white;
}

.joined-entity-support {
    background-color: #bbb;
    border-color: grey !important;
    color: white;
}

/*#endregion */

/*#region DOCUMENTS */

.reviewDocument {
    padding: 30px;
    margin: 15px;
    background-color: ivory;
    border-radius: 10px;
    box-shadow: 0px 2px 0px lightgrey;
    margin-bottom: 30px;
    border: 1px grey solid;
    transition-property: opacity, max-height;
    transition-duration: 0.3s, .4s;
    transition-delay: 0.1s, 0.1s;
    transition-timing-funtion: linear;
    max-height: 2000px;
    overflow-y: visible;
}

.signatureRequired {
    text-align: center !important;
    color: #eee;
    background-color: orangered;
    padding: 5px;
}

.signature {
    max-width: 70%;
    display: block;
}


.signatureBox {
    margin-bottom: 30px;
    margin-top: -20px;
    border: 2px dotted peachpuff;
    padding: 20px;
    border-radius: 5px;
}

/*#endregion */

/*#region UNSUPPORTED BROWSER */

/*user is redirected to browser failure if they are not using a browser that is supported*/
#browserFailure {
    text-align: center;
    margin: 30px;
    border: 3px solid #faa;
    padding: 30px;
    border-radius: 20px;
    display: block;
    width: calc(100% - 60px);
    box-shadow: 0px 0px 45px #ddd;
}

    #browserFailure img {
        max-height: 50px !important;
    }

    #browserFailure a {
        margin-top: 20px;
        margin-right: 40px;
        display: inline-block;
        text-align: center;
        color: black !important;
        font-weight: bold !important;
    }

/*#endregion */

/*#region OPS DASHBOARD TILES*/

.operationsElement {
    width: calc(22% - 15px);
    min-height: 175px;
    display: inline-block;
    border: 1px solid #ddd;
    float: unset;
    position: relative;
    color: black;
    padding: 10px;
    margin-bottom: 15px;
    margin-right: 15px;
    text-align: center;
    padding-bottom: 20px;
    border-radius: 5px;
    padding-top: 15px;
    box-shadow: 4px 4px 9px #eee;
}

    .operationsElement img {
    }

.operationsElementHeader {
    font-size: 70%;
    text-transform: uppercase;
}

.operationsElement:hover {
    opacity: .8;
    box-shadow: 2px 2px 3px #eee;
}

/*#endregion */

/*currently only used in portal to show user active emp*/
.activeEmployment {
    text-transform: uppercase;
    background-color: darkseagreen;
    display: inline-block;
    border-radius: 5px;
    font-size: 80%;
    font-weight: bold;
    padding: 8px;
    color: white;
    margin-top: 8px;
}

/*#endregion */

/*===============================================================================================================*/

/*#region BOOTSTRAP MDB & LIB PASSIVE OVERIDES  */


.dropdown-toggle::after {
    color: black;
    margin-left: 10px;
}

.fa-large {
    color: #444;
}

.dropdown-menu.show {
    /*margin-top: 10px !important;*/
    box-shadow: 3px 3px 10px #eee;
}

    .dropdown-menu.show a {
        color: dimgrey !important;
    }

.fa-question-circle {
    margin-left: 5px !important;
    margin-right: 5px !important;
    opacity: .4;
    color: green;
    cursor: default;
}

    .fa-question-circle:hover {
        opacity: 1 !important;
    }

.form-check-label {
    cursor: default;
    margin-top: 20px;
    margin-bottom: 35px !important;
}

.form-control-colour {
    width: 65px;
    height: 50px;
    border: 0;
    padding-left: 15px;
    background-color: white;
    border-left: 5px solid #ddd;
    cursor: crosshair;
}

.form-control {
    font-size: 100%;
    margin-right: 15px !important;
    height: initial;
    min-height: 42px;
    margin-bottom: 23px !important;
    padding: 8px !important;
    border-radius: 1px !important;
    border-left: #ddd solid 5px;
    -webkit-transition: border-left .2s ease-in;
    -moz-transition: border-left .2s ease-in;
    -o-transition: border-left .2s ease-in;
    -ms-transition: border-left .2s ease-in;
    transition: border-left .2s ease-in;
}

    .form-control :active {
        border-color: red !important;
    }

    .form-control:focus {
        color: #495057;
        background-color: aliceblue;
        border-color: black !important;
        border-left: green solid 5px !important;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12) !important;
        box-shadow: initial !important;
    }

    .form-control:read-only:focus {
        color: #495057;
        background-color: aliceblue;
        border-color: black !important;
        border-left: transparent solid 1px !important;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12) !important;
    }

.control-label {
}

.disabled, :disabled {
    /*opacity:.2 !important;*/
}

.form-check {
    margin-left: -20px !important;
    color: green;
}

.form-check-input[type="checkbox"]:disabled + label, label.btn input[type="checkbox"] + label {
    cursor: default !important;
}

.form-check-input[type="checkbox"]:disabled:not(:checked) + label::before, label.btn input[type="checkbox"]:disabled:not(:checked) + label::before {
    border-color: #eee !important;
    background-color: #eee !important;
}

/* Style the button that is used to open and close the collapsible content */
.collapsibleHead {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px 20px;
    width: 100%;
    border: none;
    border-radius: 5px;
    text-align: left;
    outline: none;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .collapsibleHeadActive, .collapsibleHead:hover {
        background-color: #eee;
    }

.breakoutSection {
    border: 1px solid #ddd;
    box-shadow: 0px 3px 5px #f7f7f7;
    padding: 15px;
    margin-bottom: 10px;
}

/* Style the collapsible content. Note: hidden by default */
.collapsibleContent {
    padding: 20px 20px 10px 20px;
    border-radius: 5px;
    display: none;
    background-color: #f8f8f8;
    background-color: gainsboro;
    background-color: floralwhite;
    background-color: #f8f8f8;
    margin-top: -5px;
}

#accordion .panel {
    border: none;
    border-radius: 0;
    margin-bottom: 5px;
    box-shadow: none;
}

#accordion .panel-heading {
    padding: 0;
    border: none;
    border-radius: 0;
    position: relative;
}

#accordion .panel-title a {
    display: block;
    padding: 20px 30px;
    margin: 0;
    background: #e65e36;
    font-size: 17px;
    font-weight: bold;
    color: #f9e2ad;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

    #accordion .panel-title a:before,
    #accordion .panel-title a.collapsed:before {
        content: "";
        width: 20px;
        height: 2px;
        background: #f9e2ad;
        position: absolute;
        top: 30px;
        right: 30px;
    }

    #accordion .panel-title a:after,
    #accordion .panel-title a.collapsed:after {
        content: "";
        width: 2px;
        height: 20px;
        background: #f9e2ad;
        position: absolute;
        bottom: 18px;
        right: 39px;
        transition: all 0.3s ease 0s;
    }

    #accordion .panel-title a:after {
        height: 0;
    }

#accordion .panel-body {
    padding: 20px 30px;
    background: #56522b;
    border-top: 2px solid #000;
    font-size: 15px;
    color: #f9e2ad;
    line-height: 28px;
    letter-spacing: 1px;
}

.picker__weekday-display {
    background-color: #539a4a !important;
}

.picker__nav--next {
    bottom: 10px !important;
    width: 3% !important;
    right: -10px !important;
    padding-left: 15px !important;
}

    .picker__nav--next:hover {
        background-color: #9bce97 !important;
    }

.picker__nav--prev {
    bottom: 10px !important;
    width: 3% !important;
    padding-left: 25px !important;
}

    .picker__nav--prev:hover {
        background-color: #9bce97 !important;
    }


.picker__box .picker__table .picker__day--selected, .picker__box .picker__table .picker__day--selected:hover, .picker__box .picker__table .picker--focused {
    background-color: #3ca730 !important;
}

.picker__header {
    background-color: #88bb84 !important;
    padding-bottom: 10px;
}

.picker__date-display {
    background-color: #88bb84 !important;
}

.picker__header select {
    width: 35% !important;
}

.custom-select {
    min-width: 80px;
    display: inline !important;
}

#toast-container {
    position: fixed !important;
    top: 35px;
    right: 25px;
}

.md-toast {
    opacity: 1 !important;
    min-width: 400px;
}

.card-header {
    padding: 10px 20px 10px 20px !important;
    color: black;
    background-color: #eee !important;
}

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

#pbOuter {
    height: 25px;
    background-color: darkgrey;
    box-shadow: 3px 3px 5px #ddd;
    width: 100%;
    top: 0;
    position: fixed;
    left: 0;
    z-index: 10000;
}

#pbInner {
    background-color: forestgreen;
    height: 25px;
    width: 0;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    -ms-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

#pbText {
    position: absolute;
    top: 4px;
    left: 9px;
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px #000;
    background-color: transparent;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.megatext {
    font-size: 2000%;
}

.paramCheckbox {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: initial !important;
    width: 2vh;
    max-width: 1.5vh;
    /*min-height: 52px; was making the checboxes too small in requestRequiredFile details  */ 
    margin-top: 0px;
    margin-right: 5px;
}

.paramCheckboxLabel {
}


.paramCheckboxSmall {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: initial !important;
    width: 2vh;
    max-width: 1.5vh;
    min-height: 42px;
    margin-top: -5px;
    margin-right: 5px;
}

.paramCheckboxLabel {
}


.fixed-sn main {
    padding-top: 0 !important;
}

.tab-content {
    padding: 10px !important;
}

.toast {
    margin: 25px auto !important;
}

.toast-message {
    margin: 15px !important;
}

.required:after {
    content: " * ";
    color: red;
    cursor: default;
    line-height: 135%;
}

.field-validation-error {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 90%;
    width: 100%;
    vertical-align: top;
    line-height: 1.8em;
}

    .field-validation-error::before {
        content: "\2617";
        display: block;
        margin-top: -20px;
        margin-bottom: -5px;
    }



.login-error {
    margin: 0 !important;
    margin-bottom: 20px !important;
}

    .login-error::before {
        display: none !important;
    }

.validation-summary-errors::before {
    content: "One or more errors occurred ...";
    font-size: 100% !important;
    font-weight: bold;
    margin-left: 15px;
}

.validation-summary-errors {
    width: calc(100% - 30px);
    color: red;
    padding-top: 20px;
    padding-right: 20px;
    font-size: 90%;
    background-color: whitesmoke;
    border: 1px solid lightpink;
    margin-bottom: 20px;
    margin-top: 0px;
    margin: 10px 0px 25px 15px;
    -webkit-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    -ms-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}

    .validation-summary-errors li {
        margin-left: -10px;
    }

.form-group {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

    .form-group label {
        color: #757575;
        cursor: text;
    }

/*#endregion */

/*===============================================================================================================*/

/*#region HEADER & MAIN NAV*/

.menu-footer {
    border-top: #000 1px solid;
    background-color: #f6f6f6;
    height: 20px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 80%;
    /*position: fixed;*/
    position: absolute;
    /*width: calc(100% - 15px);*/
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    height: 50px;
    padding-top: 15px;
    z-index: 1000;
text-align:left;
}

.logo {
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: -60px;
    margin-right: -30px;
}

.logo-image {
    display: inline-block;
    background-color: transparent;
}

    .logo-image img {
        height: 32px;
        width: 32px;
    }

.logo-text {
    display: none;
    position: absolute;
    top: 23px;
    left: 75px;
    color: #222;
    width: 200px;
    font-size: 150% !important;
    font-weight: normal;
    font-family: Arial !important;
    text-transform: uppercase;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

.navbar-toggle {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 10px;
    border: 0;
    background-color: white;
}

.navbar-toggle-icon-bar {
    width: 100%;
    height: 3px;
    margin-bottom: 7px;
    background-color: #333;
}

.navbar-toggler {
    margin-left: -10px !important;
    position: absolute;
    width: 100% !important;
    text-align: left;
    top: 5px !important;
    color: #fff !important; /*old*/
    color: #222 !important;
    padding-top: 5px;
    font-size: 22px !important;
    padding-left: 35px;
}

.navbar-toggler-icon {
    font-size: 15px !important;
    width: 32px;
    margin: 0;
}

.top-nav {
    margin-bottom: 10px !important;
}

.abcom-nav-link-outer {
    margin-left: 70px;
}

.abcom-nav-link {
    border: 0 !important;
    color: black !important;
    padding: 0 !important;
    padding-bottom: 15px !important;
    margin: 12px !important;
    font-weight: normal;
    border-bottom: 5px transparent solid !important;
    background-color: transparent !important;
    margin-right: 15px !important;
}
    .abcom-nav-link:hover {
        opacity:.6;
    }

    .abcom-nav-link a {
    }

.abcom-nav-link-active {
    border-bottom: 5px #444 solid !important;
}

.abcom-nav-link-support-active {
    background-color: red;
    border-bottom: 5px #444 solid !important;
}

.abcom-nav-link-disabled {
    pointer-events: none;
    opacity: .2;
}

.nav a {
    color: black !important;
}

.nav-item {
    max-width: 90%;
    margin-top: 0px !important;
}


/*SIDE NAV*/
.side-nav {
    width: 0px !important;
}

.nav-link-disabled {
    pointer-events: none;
    opacity: .2;
}

.md-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0px !important;
    margin-bottom: -10px !important;
    background-color: #eee !important;
    box-shadow: none !important;
}

.tab-pane {
    border-left: 1px #eee solid;
    border-right: 1px #eee solid;
    padding-top: 25px !important;
    padding-bottom: -10px !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    margin-top: -30px !important;
    border-bottom: 1px #eee solid;
    margin-bottom: 30px;
}

.nav-tabs {
    background-color: #eee !important;
}

.navbar {
    box-shadow: none !important;
    min-height: 55px;
    padding: 0 !important;
    background-color: transparent !important;
}

.navbar-nav {
    padding: 15px !important;
    width: calc(100% - 100PX) !important;
}

.top-buttonbar {
    margin-top: 0px;
}

    .top-buttonbar a {
        min-width: 100px !important;
    }

.bottom-buttonbar {
    padding-top: 30px;
}


.abcom-buttonbar {
    margin-right: -10px !important;
}

    .abcom-buttonbar .btn {
        min-width: 100px;
        margin-right: 10px !important;
    }

.abcom-dropdown-menu {
    margin: 12px;
    border-top: 5px solid #444;
    border-radius: 0;
    margin-top: -17px !important;
    padding-bottom: 0 !important;
}

.abcom-menu-item-disabled {
    cursor: default !important;
    pointer-events: none;
    color: #ddd !important;
}

    .abcom-menu-item-disabled a {
        color: #aaa !important;
    }

    .abcom-menu-item-disabled :hover {
        color: #aaa !important;
    }

/*#endregion */

/*#region OVERLAY AND WIDGET ITEMS */
/*these sit above the main dom as lightbox/floating type UI elements*/

#logoutButton {
    text-align: center;
    background-color: #444;
    color: white !important;
    padding: 5px;
    position: absolute;
    width: 27px;
    height: 29px;
    top: 7px;
    right: 5px;
    display: block
}

.hri-display {
    border: 1px solid black;
    padding: 5px;
    color: black !important;
    margin-top: 1px;
    background-color: gold;
    padding-right: 30px;
    height: 30px;
    cursor: default
}

.user-display {
    border: 1px solid black;
    padding: 5px;
    margin-right: 26px;
    color: black !important;
    margin-top: 2px;
    background-color: whitesmoke;
    height: 29px;
    padding-right: 10px;
    padding-left: 10px;
    padding-right: 40px;
}

/*logout*/
#logoutConfirmation {
    position: fixed;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.64);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-out;
    z-index: 40000;
}

#logoutConfirmationInner {
    text-align: center;
    position: absolute;
    top: 50%;
    top: 30px;
    right: 30px;
    /*transform: translateY(-50%);*/
    /*width: 80%;*/
    max-width: 320px !important;
    background-color: white;
    /*margin-left: calc(50% - 160px);*/
    box-shadow: 0 0 111px #444;
    border-radius: 3px;
}

    #logoutConfirmationInner div {
        padding-top: 10px;
        margin-left: 30px;
        margin-right: 30px;
    }

    #logoutConfirmationInner .OKbutton {
        background-color: green;
        border: 0;
        padding: 15px;
        font-size: 110%;
        margin-bottom: 15px;
        width: 130px;
        margin-right: 15px;
        color: white;
        border-radius: 1px;
        font-weight: bold;
    }

        #logoutConfirmationInner .OKbutton:hover {
            box-shadow: 0px 0px 7px #bbb;
        }

    #logoutConfirmationInner .cancelButton {
        background-color: #aaa;
        border: 0;
        padding: 15px;
        font-size: 110%;
        width: 100px;
        color: white;
        border-radius: 1px;
    }

        #logoutConfirmationInner .cancelButton:hover {
            box-shadow: 0px 0px 7px #bbb;
        }

#loadingOverlay {
    position: fixed;
    z-index: 21000;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: rgba(222, 222, 222, 0.9);
    background-color: rgba(255, 255, 255, 0.95);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

.headerQualifier {
    margin-top: 20px;
    margin-bottom: -25px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 89%;
}

#loadingOverlayInner {
    border: 2px solid #ddd;
    margin-top: 38vh;
    text-align: center;
    /*width: calc(90% );*/
    margin-left: calc(50% - 85px) !important;
    display: inline-block;
    /*border:1px solid black;*/
    background-color: white;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 230px #fff;
    border-radius: 10px;
    padding: 30px;
}

    #loadingOverlayInner img {
        width: 90%;
        max-width: 80px;
    }

#lightBoxImageOuter {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#lightBoxImage {
    max-height: 80%;
}

.mcauth {
    background-color: red !important;
    /*text-transform: lowercase !important;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold !important;
    /*font-size: 130% !important;*/
    /*border: 1px red solid !important;*/
    /*margin-top: 5px !important;*/
    /*padding: 12px !important;*/
    opacity: 1;
}

    .mcauth a {
        font-weight: bold !important;
        color: gold !important;
        text-transform: initial !important;
    }

    .mcauth:hover {
        /*opacity:.8 !important;*/
        /*box-shadow:1px 1px 15px #888;*/
        color: red !important;
        background-color: #a00 !important;
        /*border: 1px red solid !important;*/
    }

#params {
    overflow: hidden;
    transition: height 3s;
}


#inlineDataView {
    display: none;
    width: 100%;
    /*margin-top: 25px;*/
    border: 0;
    overflow: hidden;
}


#expandParams {
    display: none;
    margin-bottom: 25px !important;
    margin-left: 15px !important;
    margin-top: 0px !important;
}

.reportIcon {
    border: 3px solid blue;
    text-align: center !important;
    font-weight: bold !important;
    color: black !important;
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
    max-width: 150PX;
}

    .reportIcon img {
        max-height: 80px;
        float: left;
        margin-left: calc(50% - 40px);
        break-after: always !important;
    }

    .reportIcon span {
        clear: both;
        float: left;
    }



/*change log*/
#launchChangeLog {
    display: inline-block;
    padding: 10px;
    margin: 15px;
    cursor: pointer;
    border: 4px solid #dde !important;
}

#changeLog {
    position: fixed;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.4);
    min-height: 100%;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

#changeLogInner {
    overflow-y: scroll !important;
    width: calc(100% - 70px);
    margin-left: 26px;
    min-width: 250px;
    max-width: 2000px;
    margin-top: 120px;
    height: calc(100% - 190px);
    min-height: 150px;
    border: 1px solid #aaa;
    background-color: white;
    box-shadow: 0 0 111px #ddd;
    border-radius: 3px;
    padding: 20px;
}

#changeLogInnerContent {
}

.changeLogBeforeValue {
    border: 1px solid black;
    display: inline-block;
    width: 40%;
    width: calc(47% - 20px);
    padding: 10px;
    vertical-align: top;
    overflow-x: scroll;
}

.changeLogAfterValue {
    overflow-x: scroll;
    border: 1px solid black;
    display: inline-block;
    width: 40%;
    width: calc(47% - 20px);
    padding: 10px;
    vertical-align: top;
}

#changeLogInner .cancelButton {
    background-color: #aaa;
    border: 0;
    padding: 5px;
    font-size: 110%;
    width: 100px;
    color: white;
    border-radius: 1px;
}

    #changeLogInner .cancelButton:hover {
        box-shadow: 0px 0px 7px #bbb;
    }





/*announcement recipients*/
.employeeRecipient {
    display: inline-block;
    border: 3px double grey !important;
    font-size: 70%;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.entityTypeRecipient {
    display: inline-block;
    padding: 5px;
    border: 3px double black !important;
    border: 1px double #222 !important;
    border-radius: 2px !important;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    color: black !important;
    font-size: 95%;
    font-weight: 300;
}

    .entityTypeRecipient .entityTypeRecipientHeader {
        font-size: 60%;
        padding: 2px;
        padding-bottom: 1px;
        padding-right: 4px;
        position: absolute;
        font-weight: bold;
        margin-top: -15px;
        display: inline-block;
        background-color: white;
        background-color: black;
        background-color: #555;
        color: black;
        color: white;
        margin-bottom: -5px;
        text-transform: uppercase
    }


/*tags*/

.abcom-tag {
    padding: 7px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #222;
    text-shadow: 1px 2px 2px black;
    text-shadow: 0px 0px 3px black;
    color: white !important;
    margin-right: 5px;
    margin-top: -5px !important;
    margin-bottom: 10px;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 95%;
    cursor: default;
}

.abcom-tag-small {
    font-size: 80%;
    padding: 4px 0 0 0;
    width: 28px !important;
    height: 28px;
    text-align: center;
    margin-right: 5px;
    display: inline-block !important;
    margin-left: 0px;
}

.abcom-tag-interactable:hover {
    box-shadow: 3px 3px 5px #aaa;
    transition: box-shadow linear .2s;
}

/*tag additions during update*/
.additions {
    padding: 15px;
    background-color: #ecfae3;
    border: 1px green outset;
    font-size: 80%;
    margin-bottom: 15px;
}

    .additions .additionsHeader {
        font-weight: bold;
    }

/*tag deletions during update*/
.deletions {
    padding: 15px;
    background-color: #fff0f0;
    font-size: 80%;
    border: 1px red outset;
    margin-bottom: 15px;
}

    .deletions .deletionsHeader {
        font-weight: bold;
    }



/*header items (these appear in the menu header but float above it on scroll down etc)*/
.entity-item {
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 80%;
    font-weight: bold;
    color: black;
    padding: 6px;
    margin-left: 5px;
    float: right;
    display: inline-block;
    height: 32px;
    z-index: 1000;
    text-transform: uppercase;
    font-size: 80% !important;
    background-color: #eee;
    cursor: pointer;
    width: 33px !important;
}

    .entity-item a {
        color: black !important;
        margin: 5px;
    }

.hri-item {
    display: inline-block;
    clear: left;
    float: right;
    font-size: 90%;
    height: 32px !important;
    text-align: right;
    background-color: gold;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px dotted brown;
    pointer-events: none !important;
}

.location-item {
    text-transform: uppercase;
    font-size: 50%;
    font-weight: bold;
    margin-left: 25px;
    color: red;
    margin-top: 5px;
    z-index: 2000;
    position: fixed;
    cursor: not-allowed;
}

.user-background-item {
    z-index: 10000;
    position: absolute;
    font-size: 80%;
    top: 12px;
    right: 22px;
    min-width: 20px;
    padding: 5px;
    position: fixed;
}

.user-item {
    font-size: 90%;
    height: 32px !important;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    padding: 6px;
}


.abcom-item {
    position: absolute;
    top:12px;
    /*font-size: 70%;*/
    /*color: white;*/
    /*font-weight: bold;*/
    /*text-transform: uppercase;*/
    /*top: -3px;*/
    /*height: 15px !important;*/
/*    padding-left: 3px;
    padding-right: 3px;
*/ 
/*background-color: orangered;*/
margin-left:-25px;
    pointer-events: none !important;
}
.abcom-item img {
    width:20px;
}

.hri-universal-item {
    position: absolute;
    font-size: 90%;
    height: 32px !important;
    top: 80px;
    right: 80px;
    text-align: right;
    background-color: orangered;
    color: white !important;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px dotted brown;
    pointer-events: none !important;
}

.help-item {
    line-height: 28px;
    text-decoration: none !important;
    top: 75px;
    right: 20px;
    display: none;
}

.logout-item {
    float: right;
    display: inline-block;
    border: 0 !important;
    background-color: #eee;
    height: 33px;
    width: 33px;
}


/*footer and side widget items */
.ticket-item {
    bottom: 20px;
}

.to-top-item {
    position: fixed;
    right: 16px;
    background-color: #eee;
    bottom: calc(20% + 70px);
    height: 35px;
    opacity: .7;
}

.debugger-item {
    font-size: 100%;
    padding: 8px;
    position: fixed;
    bottom: 10px;
    right: 90px;
    background-color: red;
    color: white;
    z-index: 1000;
    cursor: not-allowed;
}

.loginFinePrint {
    font-size: 70%;
    font-weight: bold;
    opacity: .7;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    text-align: center;
}

.bigHeader {
    font-size: 330%;
    font-family: Arial, Helvetica, sans-serif;
}

.about-item {
    font-size: 100%;
    z-index: 30000;
    width: 70px;
    text-align: center;
    padding: 8px;
    position: fixed;
    bottom: 10px;
    right: 20px;
    background-color: white;
    color: black;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.r2wNotVerified {
    margin-top: -5px;
    display: inline-block;
    text-align: center;
    border: 1px solid #300;
    border-radius: 3px;
}

.support-item {
    position: fixed;
    font-family: Arial !important;
    background-color: orange;
    padding: 6px;
    color: black;
    text-decoration: underline !important;
    z-index: 1000;
    bottom: 10px;
    left: 105px;
    font-size: 12px;
    opacity: .8;
    pointer-events: initial !important;
}

    .support-item:hover {
        opacity: 1;
        z-index: 1000 !important;
        position: fixed !important;
    }



/*about dialogue popup*/
#about-box {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(70, 70, 70, 0.77);
    z-index: 40000;
    display: none;
}

#about-box-close {
    background-color: yellowgreen;
    color: white;
    font-weight: bold;
    position: absolute;
    border-radius: 3px;
    float: right;
    right: 12%;
    top: 12%;
    position: relative;
    width: 35px;
    height: 35px;
    text-align: center;
    padding-top: 6px;
    cursor: pointer;
}

    #about-box-close:hover {
        box-shadow: 4px 4px 4px #ddd;
    }

#about-box-inner {
    margin-top: 10vh;
    height: 80vh;
    width: 80vw;
    margin-left: 10vw;
    background-color: white;
}

#about-box-content {
    padding: 3% 5%;
}

#about-box-title {
    text-transform: uppercase;
    font-size: 30px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#eula {
    width: 100%;
    font-size: 65%;
    height: calc(75vh - 180px) !important;
    overflow-y: scroll;
    user-select: none;
    padding-right: 30px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    /*overflow:auto;*/
}

#eula-body {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    font-size: 75%;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    margin-bottom: 100px;
    margin-top: -0px;
    padding: 30px;
    background-color: white;
    overflow-y: scroll;
    /*overflow:auto;*/
}

#release-body {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    margin-bottom: 100px;
    margin-top: -0px;
    padding: 30px;
    background-color: white;
    overflow-y: scroll;
    /*overflow:auto;*/
}



/*#endregion */

/*#region TABS & INTRA-PAGE NAVIGATION*/

.classic-tabs .nav li a.active {
}

.abcom-tabs {
    border: 1px solid #aaa !important;
    margin: 15px !important
}

    .abcom-tabs ul {
        background-color: #f2f2f2 !important;
    }

    .abcom-tabs li {
        width: 50% !important;
        margin-right: 0 !important;
    }

        .abcom-tabs li a {
            padding: 10px !important;
            margin: 10px !important;
        }

.tab-content {
    padding: 0px !important;
}

.intra-view-nav {
    margin-bottom: 0px;
}

.intra-view-nav-option {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
    padding: 8px 10px;
    color: black !important;
    background-color: #ddd;
    text-align: center;
    color: #000 !important;
    border-radius: 3px;
    min-width: 45px;
    opacity: .7;
    font-weight: bold !important;
}

    .intra-view-nav-option span::before {
        content: "\02794";
    }

    .intra-view-nav-option:hover {
        text-decoration: none !important;
        opacity: 1;
        color: black !important;
    }

.setup-nav-option {
    background-color: burlywood !important;
}

.support-nav-option {
    background-color: orangered !important;
    color: white !important;
}

    .support-nav-option:hover {
        color: white !important;
    }


.operations-nav-option {
    background-color: powderblue !important;
}

.scheduling-nav-option {
    background-color: lightcoral;
}


.intra-view-nav-home {
    color: black !important;
    font-weight: normal;
    padding-left: 10px;
    color: #ccc !important;
}

    .intra-view-nav-home:hover {
        text-decoration: none !important;
        color: #333 !important;
    }

.not-active a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: black !important;
}

/*#endregion */

/*#region DATALISTS*/

.dataTables_wrapper .row:first-child {
    margin-top: 30px;
    margin-top: 10px;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

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

.datatable-search {
    padding: 10px;
    height: initial;
    min-height: 55px;
    margin-top: 25px;
    width: calc(100% - 40px) !important;
    margin-left: 30px !important;
}

.icon-button-column-cell {
    width: 100px;
    max-width: 100px !important;
}

.icon-button-column-header {
    width: 30px !important;
}

.dataTables_filter {
    margin-top: -77px;
    margin-top: -7px;
    margin-left: -15px !important;
    margin-bottom: -10px !important;
}

    .dataTables_filter label {
        vertical-align: bottom !important;
        margin-top: -10px;
        color: white !important;
    }


.dataTables_length label {
    margin-top: 15px;
    margin-bottom: -10px !important;
    margin-left: 15px;
}

.dataTables_length select {
    margin: 5px !important;
}

.littleTip {
    display: inline-block;
    padding: 0px;
    color: white;
    font-size: 85%;
    width: 18px;
    line-height: 18px;
    font-weight: bold;
    font-family: 'Courier New';
    text-align: center;
    margin-right: 8px;
    background-color: cornflowerblue;
}

#onboardingTemplatePreviewInner {
    margin-top: 15px;
}

#onboardingTemplatePreviewOuter {
    padding: 10px;
    border: 1px solid #dddddd;
    background-color: #f7f7f7;
    margin-top: -23px !important;
    font-size: 80%;
}

.abcom-table {
    font-size: 95% !important;
    width: calc(100% ) !important;
    background-color: white;
    margin-top: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 20px;
    transition: opacity 1s ease-in-out;
    opacity: .4;
}

    .abcom-table thead {
        margin-top: -20px !important;
    }

.abcom-table-loader {
    background-color: #f8f8f8;
    padding: 10px;
    color: black;
    margin-top: 20px;
    margin-bottom: 40px;
}


.dataTables_processing {
    margin-top: -10px !important;
    margin-bottom: 10px;
    font-size: 80%;
    padding: 4px;
    box-shadow: none !important;
    border-bottom: 2px solid green;
    border-radius: 0;
}

.ajax-table-wrapper .dataTables_wrapper .row:first-child {
    visibility: hidden;
    display: none;
    background-color: red !important;
}

.dataTables_wrapper {
    margin-top: -10px !important;
    margin-bottom: -20px !important;
}

.abcom-table-scrollable {
    /*changing this this does not work - it misaligns the column headers from content on datagrids*/
}

/*this is to hide the sorters on first column*/
.abcom-table th:first-child::before {
    display: none !important;
}

.abcom-table th:first-child::after {
    display: none !important;
}

.abcom-table th::before {
    right: initial !important;
    margin-left: -20px;
}

.abcom-table th::after {
    right: initial !important;
    margin-left: -20px;
}

.abcom-table th:first-child::after {
    display: none !important;
}

.abcom-table tr td:first-child + td a {
    font-weight: bold !important;
    top: 3px !important;
}

#employee_list_table_wrapper .row:first-of-type {
    margin-bottom: 0 !important;
}


.abcom-table-add {
    margin-bottom: -83px !important;
}

.abcom-table tr {
    border-bottom: 1px solid #f5f5f5;
}

.abcom-table td {
    word-break: normal;
    font-size: 100% !important;
    padding-left: 20px !important;
    padding-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-bottom: 10px;
    padding-right: 30px !important;
    padding-left: 0px !important;
    vertical-align: top !important;
    /*white-space: nowrap;  DISABLED THIS as it was stopping org recipients from wrapping in the org ann list in ops/site/detail view */
}

    .abcom-table td:first-of-type {
        word-break: initial !important;
    }

/*the below two styles stops the first column from being too big ....but not all lists have the VIEW button first col ...... */
.abcom-table th:first-of-type:empty {
    width: 70px !important;
    max-width: 70px !important;
}

.abcom-table td:first-of-type:not(:empty) {
    width: 60px !important;
    max-width: 60px !important;
    overflow: hidden;
}

.abcom-table td a {
    font-weight: 500;
}

.abcom-table thead th {
    padding-right: 30px !important;
    font-weight: bold !important;
    padding-top: 20px !important;
    padding-left: 0px !important;
    padding-bottom: 15px !important;
    vertical-align: bottom !important;
}

.ajax_table {
    transition: 1s;
}

    .ajax_table td {
        column-span: none !important;
    }


.ajax_table_search_outer {
    display: block;
    text-align: right;
    position: relative;
}

.ajax_table_search {
    margin-top: 20px;
    padding: 10px;
}

.ajax_table_search_button {
    border: 1px solid #444 !important;
    width: 45px;
    padding: 10px !important;
    cursor: pointer;
}

.ajax_table_clear_search_button {
    border: 1px solid #444 !important;
    cursor: pointer;
    width: 45px;
    padding: 10px !important;
}

.ajax_table_wrapper .datatable-search {
    display: none !important;
}

.ajax_table_wrapper .dataTables_length {
    display: none !important;
}


.ajax_table_loader {
    background-color: #f8f8f8;
    padding: 10px;
    display: block !important;
    /*height: 0;*/
    overflow: hidden;
    /*opacity:.1 !important;*/
    transition: 0.4s;
    color: black;
    margin-top: 20px;
    margin-bottom: -5px !important;
}


.currencyHeader {
    text-align: right;
}

.abcom-table-error {
    border: 1px solid red;
    background-color: cornsilk;
    margin-bottom: 15px;
    padding: 10px;
    display: none;
    margin-top: -80px; /*added this to bring error up on ajax lists*/
}


.ajax_table thead th {
    background-color: seashell;
    pointer-events: none;
}

    .ajax_table thead th::after {
        color: white;
    }

    .ajax_table thead th::before {
        color: white;
    }


.ajaxTableHeader {
    font-weight: bolder !important;
    /*background-color: seashell;*/
}

    .ajaxTableHeader::after {
        color: white !important;
    }

    .ajaxTableHeader::before {
        color: white !important;
    }

.ajax_table_wrapper {
    overflow: hidden;
}

.ajax_table thead th {
    font-weight: normal !important;
    font-style: italic !important;
    background-color: white;
    pointer-events: none;
}



.dtr-title {
    margin-right: 10px;
}

.dataTables_empty {
    padding: 20px 0 20px 0 !important;
    font-weight: 600;
    /*margin-left: -13px !important;*/
    display: block;
    opacity:.5;
    min-width: 222px;
}


.dataTables_info {
    margin-top: -10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 0px !important;
    margin-left: 0px;
    font-size: 75%;
    text-transform: uppercase;
    font-weight: bold;
}

    .dataTables_info:empty {
        display: none;
    }

.dataTables_paginate {
    margin-top: -20px !important;
    margin-right: 15px !important;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.search-group-outer {
    margin-bottom: 80px !important;
    margin-top: -15px !important;
}

.search-group-inner {
    position: absolute !important;
    right: -10px !important;
    width: 330px;
}

.pagination .page-item.active .page-link:hover {
    background-color: #fff !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.pagination .page-item.active .page-link {
    background-color: #f2f2f2 !important;
    box-shadow: none;
}

.pagination .page-item .page-link:hover {
    background-color: white !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.dtr-details {
    font-size: 90%;
    width: 100%;
    margin-left: -5px !important;
    margin-bottom: 5px !important;
}

    .dtr-details li {
        border-bottom: 0 !important;
    }


.dtr-data {
    clear: both !important;
    display: block;
    margin-left: 25px;
    padding-top: 5px;
}

.dtr-title {
    margin-left: 5px;
    margin-top: 5px !important;
}

/*this is the little expander + symbol that allows responsive data table rows to be expanded*/
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    top: 13px !important;
    margin-top: 10px !important;
    vertical-align: central;
    margin-left: 0px;
    max-width: 20px !important;
}

/*first row in tables*/
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
    position: relative;
    padding-left: 10px !important;
    cursor: pointer;
    min-width: 70px !important;
}

table.dataTable.dtr-inline.collapsed input {
    margin-top: 2px !important;
    margin-left: 25px !important;
}

.icon-button-column-cell {
    width: 80px;
    max-width: 80px !important;
}

.selected a {
    color: #75bf40;
}

/*#endregion */

/*#region MENU GRIDS (ie for primary graphical navigation)*/

.menu-main-item {
    height: 100%;
    display: inline-block;
    text-align: center;
    width: 13.5%;
    vertical-align: top;
    z-index: 1;
    position: relative;
}

    .menu-main-item:hover {
        box-shadow: #666 5px 5px 10px !important;
    }

.menu-main a {
    font-weight: normal;
    color: black !important;
}

    .menu-main a:hover {
        text-decoration: none;
    }

.menu-main-item img {
    width: 100%;
    max-width: 95px;
}

.menu-main-arrow-critical {
    margin-left: 50%;
    margin-top: -10px;
    font-size: 150%;
    color: green;
}

.menu-main-item-step {
    height: 20px;
    width: 20px;
    position: absolute;
    left: 30px;
    z-index: 1000;
}

.menu-main-item-progress {
    height: 20px;
    width: 20px;
    left: 60px;
    position: absolute;
    color: transparent;
}

.menu-main-item-non-group-outer {
    height: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    z-index: 1;
    position: relative;
    margin-right: 20px;
    width: 47%;
}

.menu-main-item-group {
    border: 1px solid black;
    z-index: 1;
    background-color: #f4f4f4;
    position: relative;
    margin-bottom: 15px;
    text-align: center;
}

.menu-main-item-primary {
    width: calc(100% - 30px);
    padding: 15px;
    margin: 15px;
    border: 1px solid #888;
    background-color: white;
    text-align: center;
    display: inline-block;
    overflow: hidden
}

    .menu-main-item-primary:hover {
        background-color: darkseagreen;
        box-shadow: #666 5px 5px 10px !important;
    }

    .menu-main-item-primary:active {
        background-color: darkseagreen;
    }

    .menu-main-item-primary img {
        margin-top: calc(5vh -20px);
        width: 100%;
        max-width: 95px;
    }

.menu-main-item-primary-inner {
    margin-top: 3vh;
}

.menu-main-item-primary-header {
    clear: both;
    font-weight: bold;
}

.menu-main-item-primary-text {
    color: #222;
    font-weight: normal;
    display: none;
}

.menu-main-secondary-item-row {
    text-align: center;
    padding-left: 4%;
    margin-bottom: 20px;
}

.menu-main-item-secondary-item-container-header {
    padding: 5px;
}

.menu-main-item-secondary {
    width: calc(21% );
    padding: 15px;
    border: 1px dashed #888;
    background-color: #f6f6f6;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: 7.5px;
    margin-right: 7.5px;
    max-height: 25vw;
    height: 15vh !important;
    min-height: 150px;
}

    .menu-main-item-secondary:hover {
        box-shadow: #666 5px 5px 10px !important;
    }

.menu-main-item-secondary-header {
    clear: both;
    margin-top: 1vh !important;
    line-height: 90%;
}

.menu-main-item-secondary-text {
    /*font-size: 80%;*/
    display: none;
    color: #222;
    font-weight: normal;
}

.menu-main-item-secondary img {
    width: 100%;
    max-width: 95px;
}

/*#endregion */

/*#region LOGGING*/

.log_general {
    background-color: orange;
    text-align: center !important;
    font-weight: 600;
    padding-left: 20px !important;
    padding-right: 0px !important;
    color: white;
}

.log_exception {
    background-color: red;
    text-align: center !important;
    font-weight: 600;
    padding-left: 20px !important;
    padding-right: 0px !important;
    color: white;
}

/*#endregion */

/*#region PORTAL NOTIFICATION FEED */

.notifications {
    margin-top: 30px;
    background-color: white;
}

.notification {
    border-left: 1px solid grey;
}

.notification-content-read {
    margin-bottom: 30px;
}

.notification-content-unread {
    margin-bottom: 30px;
    background-color: whitesmoke;
    border: 1px solid #ddd;
}

.notification-end span {
    font-size: 150%;
    margin-left: -5px;
}

.notification-fade-out {
    background-color: lemonchiffon;
    -webkit-animation: notification-fade-out ease-in-out 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: notification-fade-out ease-in-out 1;
    animation: notification-fade-out ease-in-out 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
    animation-delay: 4s;
}


.notification-content {
    border-top: 1px solid grey;
    display: inline-block;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.notification-new {
    position: relative;
    top: -2px;
    margin-left: 10px;
    color: darkorange;
    font-size: 70%;
    text-transform: uppercase;
    font-weight: bold;
    background-color: red;
    padding-left: 3px;
    padding-right: 3px;
    color: white;
    font-weight: bold;
    display: inline-block;
}

.notifyCount {
    display: inline-block;
    font-size: 100%;
    font-weight: bold;
    margin-left: 10px;
    background-color: red;
    min-width: 23px;
    border-radius: 13px;
    color: white;
}

    .notifyCount:empty {
        display: none;
    }

.notification-timestamp {
    font-size: 70%;
    margin-bottom: 3px;
}

.notification-header {
    background-color: white;
    padding-left: 10px;
    margin-top: -20px;
    font-weight: bold;
}

.systemAnnouncementHeader {
    color: white;
    color: red !important;
    margin-top: 3px;
    display: block;
}

.nonSystemAnnouncementHeader {
    background-color: #fff;
    color: black;
    margin-top: 3px;
    display: block;
}

.thick-seperator {
    color: black;
    height: 2px;
}

.notification-details {
    background-color: white;
    padding-bottom: 30px;
    padding-right: 25px;
    padding-left: 25px;
    padding-top: 10px;
    font-size: 95%;
}

    .notification-details a {
        font-weight: bold !important;
        color: #080 !important;
    }

.notification-link {
    margin-top: 10px;
    border: 1px solid green;
    padding: 9px;
    background-color: white;
    color: green;
    display: inline-block;
    transition: 0.3s;
    text-transform: uppercase;
}

    .notification-link:hover {
        opacity: .8;
        transition: 0.3s;
        box-shadow: 5px 5px 5px #eee;
    }

@-webkit-keyframes notification-fade-out {
    from {
        background-color: lemonchiffon;
    }

    to {
        background-color: white;
    }
}

@-moz-keyframes notification-fade-out {
    from {
        background-color: lemonchiffon;
    }

    to {
        background-color: white;
    }
}

@keyframes notification-fade-out {
    from {
        background-color: lemonchiffon;
    }

    to {
        background-color: white;
    }
}

/*#endregion */

/*#region NEW MAIN MENUS*/

.menu-grid {
    /*margin-top: 10px;*/
}

    .menu-grid a {
        font-weight: normal;
        color: black !important;
    }

        .menu-grid a:hover {
            text-decoration: none;
        }

.menu-grid-arrow-critical {
    margin-left: calc(50% - 10px);
    margin-top: -10px;
    font-size: 150%;
    color: green;
}

.menu-grid-item-step {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 15px;
    z-index: 1000;
    font-size: 80%;
    padding-top: 5px;
}

.menu-grid-item-progress {
    height: 20px;
    width: 20px;
    left: 60px;
    position: absolute;
    color: transparent;
}

.menu-grid-item-non-group-outer {
    height: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    z-index: 1;
    position: relative;
    margin-right: 0px;
    width: 43.5%;
    margin-top: 1px;
    margin-left: 16px;
    margin-left: 0px;
    margin-right: 16px;
}

.menu-grid-next {
    text-transform: uppercase;
    font-size: 70%;
    background-color: #f6f6f6;
    background-color: #fff;
    padding: 5px;
    display: block;
    right: 15px;
    position: absolute;
    margin-top: -11px;
    color: black;
    width: 25px;
    display: none;
}

    .menu-grid-next:hover {
        background-color: #fff !important;
        background-color: darkseagreen !important;
    }

.menu-grid-item-group {
    z-index: 1;
    background-color: #fafafa;
    background-color: white;
    position: relative;
    margin-bottom: 15px;
    text-align: center;
}

.menu-grid-item-primary {
    width: calc(100% - 30px);
    margin: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    text-align: center;
    display: inline-block;
    -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(80%);
    opacity: .8;
    min-width: 120px;
}

    .menu-grid-item-primary:hover {
        background-color: white;
        box-shadow: #ddd 0px 0px 11px !important;
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
        opacity: 1;
    }

    .menu-grid-item-primary:active {
        background-color: darkseagreen;
    }

    .menu-grid-item-primary img {
        margin-top: calc(5vh - 30px);
        max-width: 95px;
    }

.menu-grid-item-primary-inner {
    padding-bottom: 20px;
    align-content: center !important;
    text-align: center !important;
}



.menu-grid-item-primary-header {
    font-weight: bold;
    margin-top: 20px !important;
}

.menu-grid-item-primary-text {
    font-size: 80%;
    font-weight: normal;
    display: none;
}

.menu-grid-secondary-item-row {
    text-align: center;
}

.menu-grid-item-secondary-item-container-header {
    padding: 5px;
    text-transform: uppercase;
    font-size: 70%;
    color: #555;
}

.menu-grid-item-secondary {
    width: calc(27% );
    width: 120px;
    border: 1px dashed #888;
    background-color: #f6f6f6;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: 7.5px;
    margin-right: 7.5px;
    height: 150px !important;
    min-height: 100px;
    margin-bottom: 20px;
    background-color: #fff;
    -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(80%);
    opacity: .8;
    min-width: 135px;
}

    .menu-grid-item-secondary:hover {
        box-shadow: #666 5px 5px 10px !important;
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
        opacity: 1;
    }

.menu-grid-item-secondary-header {
    clear: both;
    font-size: 13px;
    margin-top: 1vh !important;
    line-height: 90%;
}

.menu-grid-item-secondary-text {
    font-size: 80%;
    display: none;
    color: #222;
    font-weight: normal;
}

.menu-grid-item-secondary img {
    max-height: 120px;
    height: 40%;
    margin-top: calc(15% + 10px);
}

.menu-grid-item-image {
    margin-top: 20px !important;
}


@media (max-width: 600px) {


    .menu-grid-item-non-group-outer {
        width: 100%;
    }

    .menu-grid-item-group-outer {
        width: 100%;
    }


    .menu-grid-item-secondary {
        width: calc(43% );
    }
}

.disabled-menu-item {
    opacity: .2;
}

    .disabled-menu-item a {
        cursor: not-allowed !important;
        pointer-events: none;
    }

.disabled-menu-item-tooltip {
    opacity: 2;
    cursor: not-allowed !important;
}

    .disabled-menu-item-tooltip:hover::after {
        content: 'Access locked.';
        opacity: 1 !important;
        font-size: 70%;
        bottom: 5px;
        position: absolute;
        background-color: pink;
        left: calc(50% - 40px);
        padding: 5px;
    }

/*#endregion */

/*#region DROPZONE OVERRIDES*/

.dropzone {
    border: 2px solid rgba(0, 0, 0, 0.0);
    background: white !important;
}

.dropzone-ui {
    font-size: 120% !important;
    min-height: calc(100vh - 1000px) !important;
    border: dashed 3px grey !important;
    position: relative;
    min-width: calc(100% - 40px) !important;
    padding: 20%;
}

.dropzone.dz-clickable {
    cursor: pointer;
}

    .dropzone.dz-clickable * {
        cursor: default;
    }

    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
        cursor: pointer;
    }

.dropzone.dz-started .dz-message {
    display: none;
}

.dropzone.dz-drag-hover {
    border-style: solid;
}

    .dropzone.dz-drag-hover .dz-message {
        opacity: 0.5;
    }

.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
}

    .dropzone .dz-message .dz-button {
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
    }

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px;
}

    .dropzone .dz-preview:hover {
        z-index: 1000;
    }

        .dropzone .dz-preview:hover .dz-details {
            opacity: 1;
        }

    .dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 10px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
    }

    .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1;
    }

    .dropzone .dz-preview.dz-image-preview {
        background: white;
    }

        .dropzone .dz-preview.dz-image-preview .dz-details {
            -webkit-transition: opacity 0.2s linear;
            -moz-transition: opacity 0.2s linear;
            -ms-transition: opacity 0.2s linear;
            -o-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
        }

    .dropzone .dz-preview .dz-remove {
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
    }

        .dropzone .dz-preview .dz-remove:hover {
            text-decoration: underline;
        }

    .dropzone .dz-preview:hover .dz-details {
        opacity: 1;
    }

    .dropzone .dz-preview .dz-details {
        z-index: 20;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        font-size: 13px;
        min-width: 100%;
        max-width: 100%;
        padding: 2em 1em;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        line-height: 150%;
    }

        .dropzone .dz-preview .dz-details .dz-size {
            margin-bottom: 1em;
            font-size: 16px;
        }

        .dropzone .dz-preview .dz-details .dz-filename {
            white-space: nowrap;
        }

            .dropzone .dz-preview .dz-details .dz-filename:hover span {
                border: 1px solid rgba(200, 200, 200, 0.8);
                background-color: rgba(255, 255, 255, 0.8);
            }

            .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
                    border: 1px solid transparent;
                }

            .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
                background-color: rgba(255, 255, 255, 0.4);
                padding: 0 0.4em;
                border-radius: 3px;
            }

    .dropzone .dz-preview:hover .dz-image img {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        -ms-transform: scale(1.05, 1.05);
        -o-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        -webkit-filter: blur(8px);
        filter: blur(8px);
    }

    .dropzone .dz-preview .dz-image {
        border-radius: 10px;
        overflow: hidden;
        width: 120px;
        height: 120px;
        position: relative;
        display: block;
        z-index: 10;
    }

        .dropzone .dz-preview .dz-image img {
            display: block;
        }

    .dropzone .dz-preview.dz-success .dz-success-mark {
        -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .dropzone .dz-preview.dz-error .dz-error-mark {
        opacity: 1;
        -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
        pointer-events: none;
        opacity: 0;
        z-index: 500;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        margin-left: -27px;
        margin-top: -27px;
    }

        .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
            display: block;
            width: 54px;
            height: 54px;
        }

.dz-progress {
    display: none;
}

.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: pulse 6s ease infinite;
    -moz-animation: pulse 6s ease infinite;
    -ms-animation: pulse 6s ease infinite;
    -o-animation: pulse 6s ease infinite;
    animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transform: scale(1);
    border-radius: 8px;
    overflow: hidden;
}

    .dropzone .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        -webkit-transition: width 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out;
        -ms-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out;
    }

.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    /*opacity: 0;*/
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white;
}

    .dropzone .dz-preview .dz-error-message:after {
        content: '';
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626;
    }


.dz-remove {
    color: #444 !important;
    font-size: 60%;
    text-transform: uppercase;
    font-weight: bold !important;
}


.dropzone .dz-preview {
    margin-bottom: 30px !important;
}

.dropzone .dz-error-message {
    margin-top: 20px !important;
}

/*#endregion */

/*#region HIDE MOBILE ONLY CONTENT*/

/*@media screen and (max-width: 600px) {*/
.hideOnMobile {
    /*visibility: hidden !important; 
        max-height:0 !important;
        max-width:0 !important;*/
}
/*}*/

@supports (-ms-ime-align:auto) {
    .hideInEdge {
        display: none !important;
    }
}

/*#endregion */

/*#region BI */

/*bi*/
#report-container {
    height: calc(100vh - 220px) !important;
    width: calc(100% - 30px); /* 16:9 aspect ratio */
    margin: auto;
    margin-top: 0px;
    /*filter: invert(100%);*/
}

@media only screen and (max-width: 574px) {
    #report-container {
        height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */
    }
}

/*#endregion*/

/*===============================================================================================================*/

/*#region MEDIA QUERIES*/


/*laptops*/
@media (max-height: 700px) {



    .btn {
        padding: 10px !important;
        font-size: 80% !important;
    }

    h1 {
        font-size: 180% !important;
        font-weight: 600 !important;
    }

    .page-breadcrumbs a {
        font-size: 68% !important;
        font-weight: bold !important;
    }

    body {
        font-size: 92% !important;
    }

    .abcom-table td {
        padding-top: 15px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 674px) {
    .form-control {
        font-size: 100%;
        margin-right: 15px !important;
        height: initial;
        min-height: 45px !important;
        margin-bottom: 23px !important;
        padding: 10px !important;
        border-radius: 1px !important;
    }
}

@media (max-width: 574px) {

    #logoutConfirmationInner {
        text-align: center;
        position: relative;
        top: 50%;
        right: initial;
        transform: translateY(-50%);
        /*width: 80%;*/
        max-width: 320px !important;
        background-color: white;
        margin-left: calc(50% - 160px);
        box-shadow: 0 0 111px #444;
        border-radius: 3px;
    }


    main {
        margin-top: 10px !important;
    }

    #emailContainer {
        max-width: 100% !important;
        min-width: initial !important;
    }

    .emailLoginButton {
    }

    #loginOuter {
        margin-top: calc(-15% - 20px);
    }



    .menu-header {
        margin-bottom: 80px !important;
    }

    .navbar {
        /*margin-top: 140px !important;*/
        margin-top: -75px !important;
    }


    .btn-file {
        min-width: initial !important;
        width: 100%;
    }

    body {
        font-size: 90% !important;
    }

    .dashboard-nav-item {
        width: calc(100% ) !important;
        display: block !important;
        max-height: initial !important;
        height: 200px !important;
    }

        .dashboard-nav-item i {
            /*this is the circle*/
            position: absolute;
            left: 20px;
            left: calc(50% - 50px);
            top: 40px;
            font-size: 355%;
            padding-bottom: 0%;
            color: floralwhite;
            background-color: #fff;
            background-color: transparent;
            color: #555;
            border-radius: 60px;
            min-width: 105px;
            text-align: center;
            line-height: 120%;
            padding-top: 20px;
            top: 10px;
            max-height: 105px;
        }

        .dashboard-nav-item div {
            width: 100%;
            left: 20px;
            bottom: 30px;
            width: calc(100% - 40px);
            position: absolute;
            color: white;
            color: #555;
            font-size: 150%;
            font-family: Arial;
            text-align: center;
            top: 100px;
        }





    #logoutButton {
        position: absolute !important;
    }



    .abcom-buttonbar .btn {
        min-width: 100px;
        width: calc(50% - 20px) !important;
    }

    .abcom-buttonbar {
        margin-top: -10px;
        margin-right: -25px !important;
        text-align: left !important;
    }

    .top-buttonbar {
        margin-top: 10px !important;
    }

    .btn-responsive {
        width: 100% !important;
    }


    .edit-btn {
        margin-top: 10px !important;
    }

    .operationsElement {
        width: calc(100% ) !important;
    }
}

@media (max-width: 671px) {
    .user-item {
        padding-top: 2px;
        font-size: 70%;
    }

    .logo-text {
        display: none;
    }

    .menu-main-item-secondary {
        width: calc(40%) !important;
        margin-bottom: 20px;
    }
}

/*core responsive change zone for MDB*/
@media (max-width: 768px) {

    .mobileReportNavBlocker {
        display: none !important;
    }

    .rosterOuter {
        display: block !important;
        /*background-color:#eee*/
    }

    .rosterShiftDisplay {
        font-size: 100%;
    }

    .smallForm {
        min-width: 90% !important;
    }

    .dataTables_wrapper .row:first-child {
        font-size: 80%;
        padding: 0 !important;
    }

        .dataTables_wrapper .row:first-child select {
            padding: 5px !important;
            min-height: 15px;
        }

        .dataTables_wrapper .row:first-child input {
            padding: 5px !important;
            min-height: 15px;
        }

        .dataTables_wrapper .row:first-child label {
            padding: 2px !important;
            margin: 2px !important;
        }

    .datatable-search {
        margin-top: 0px;
        min-height: 40px;
        margin-left: 20px !important;
        width: calc(100% - 30px) !important;
    }


    .notifyCount {
        min-width: 19px;
        /*display: inline-block;
        line-height: 200%;
        font-size: 100%;
        font-weight: bold;
        border-radius: 17px;
        margin-left: 10px;
        background-color: red;
        min-width: 23px;
        min-height: 20px;
        color: white;*/
    }



    .intra-view-nav-option {
        min-height: 35px;
        font-size: 85%;
        margin-right: 5px;
        margin-bottom: 8px;
        display: inline-block;
    }

    .operationsElement {
        width: calc(47% - 5px);
    }

    /*.bottom-buttonbar {
        margin-top: 40px;
        padding-top: 30px;
        position:fixed;
        bottom:45px;
        left:25px;
        background-color:white;
    }

        .bottom-buttonbar .btn {
            background-color:white !important;
            max-height:30px;
        }*/




    .abcom-buttonbar .btn {
        /*width: calc(100% - 25px) !important;*/
    }

    .btn-table-add {
        /*margin-top: 0px !important;*/
        margin-bottom: 0px !important;
    }



    #toast-container {
        width: calc(100% - 50px) !important;
    }

    .md-toast {
        min-width: 100% !important;
    }

    .abcom-table-add {
        margin-bottom: 5px !important;
    }

    .abcom-buttonbar {
        /*margin-bottom: 20px;*/
    }




    /*.search-box {
        width: 250px;
        float: left;
        margin-left: 0 !important;
        padding: 18px !important;
        width: calc(100% + 15px) !important;
    }*/

    .dataTables_filter {
        margin-top: 10px;
        margin-left: -15px !important;
    }

    .menu-main-item-non-group-outer {
        width: 100%;
    }

    h3 {
        font-size: 120%;
    }
}

@media (max-width: 992px) {

    main {
        margin-top: 40px;
    }

    .navbar {
        margin-top: 60px;
    }


    .logo-image {
        display: none !important;
    }

    .showOnMobile {
        display: initial;
    }

    /*this is the point at which point the UI switches to the responsive burger menu */
    #helperTip {
        width: calc(100% - 54px) !important;
        max-width: calc(100% - 54px);
    }



    .btn-view {
        cursor: pointer;
        /*background-color: red !important;*/
        height: 20px !important;
        width: 20px !important;
        padding: 5px !important;
        margin-top: 2px !important;
        /*margin-left: 20px !important;*/
        position: relative;
        left: 30px !important;
    }




    .btn {
        cursor: pointer;
        /*font-size: 98% !important;
        padding: 10px !important;*/
    }

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


    h1 {
        padding-bottom: 0px !important;
        margin-top: 20px !important;
        /*font-size: 28px;*/
        font-size: 220%;
        margin-bottom: 0px !important;
    }

    .top-nav {
        /*margin-top: 20px;*/
        background-color: #fff !important;
        margin-bottom: 10px !important;
        top: 15px;
        top: 5px;
        /*position:fixed;
        margin-top:90px;
        background-color:yellow !important;*/
    }

    .responsive-menu-spacer {
        display: block;
        display: none;
        height: 0px;
        margin-top: 20px;
        /*margin-bottom: -20px;*/
        margin-bottom: 0px;
        opacity: 0;
    }

    .vertical-col-seperator {
        background-color: #ddd;
        width: 100%;
        height: 1px;
        display: block;
        margin-left: 0;
    }

    .abcom-collapse-menu {
        margin-top: -5px;
        margin-left: 11px;
        /*width: 80% !important;*/
        margin-right: -70px !important;
        /*border-left: 1px solid #ddd;*/
    }

    .abcom-collapse-menu-item {
        color: black !important;
        font-size: 80%;
        padding: 9px;
        display: block !important;
        /*margin-left: 17px;*/
        margin-left: 20px;
        width: initial !important;
        white-space: normal;
    }

        .abcom-collapse-menu-item:hover {
            margin-left: 29px;
            /*font-weight:bold !important;*/
            /*background-color: white !important;
            background: rgb(248,248,248);
            background: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(255,255,255,1) 100%);*/
            background-color: transparent !important;
        }


        .abcom-collapse-menu-item i {
            margin-right: 10px;
            display: none;
        }

    .abcom-top-menu-icon {
        width: 20px;
    }

    .abcom-dropdown-menu {
        display: none !important;
    }

    .abcom-nav-link-outer {
        margin-bottom: 10px;
        margin-left: 70px !important;
        margin-top: 0 !important;
    }

        .abcom-nav-link-outer ul {
            padding: 0px !important;
        }

    .abcom-nav-link {
        font-weight: bold !important;
        width: 100% !important;
        padding-bottom: 0px !important;
        border-left: 5px solid #f7f7f7 !important;
        text-align: left;
        /*padding-left: 20px !important;*/
        /*margin-top: 15px !important;*/
        padding-left: 20px !important;
    }

    .abcom-nav-link-active {
        border-bottom: 0 !important;
        border-left: 5px #444 solid !important;
    }
}




/*this is the point at which the UI switches to full normal nav menu*/
@media (max-width: 1292px) {

    .dashboard-nav-item {
        /*width: 45%;*/
        width: 100%;
        display: inline-block !important;
    }
}

@media (max-width: 1199px) {
    .rightToDownArrow .downArrow {
        display: block !important;
    }

    .rightToDownArrow .rightArrow {
        display: none !important;
    }
}


/*this is the point at which the UI switches to full normal nav menu*/
@media (max-width: 1300px) {

    .rosterShiftDayColumn {
        width: 100%;
        /*padding-bottom: 30px;*/
        border-left: 1px #fff solid !important;
        border-right: 1px #fff solid !important;
    }

    .rosterShiftDayColumnHeader {
        font-size: 120%;
    }
}



/*at this resolution we change menu cards to be side by side*/
@media (min-width: 1500px) {
    .menu-main-row :last-child {
        margin-right: 0px !important;
    }

    .menu-main-arrow-optional {
        display: block;
    }

    .menu-main-arrow-critical {
        display: inline-block;
        font-size: 4vw;
        margin-left: calc(-2% + -3px);
        margin-right: calc(-2% + -3px);
        text-shadow: 4px 4px 5px #ddd;
        margin-top: 8.5vh;
        position: relative;
        z-index: 1000;
        color: green;
        transform: rotate(-90deg);
        font-size: 36px !important;
        margin-left: calc(-.04% - 22px) !important;
        margin-right: -17px !important;
    }

    .menu-main-item-non-group-outer {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        z-index: 1;
        position: relative;
        margin-right: 20px;
        width: 12.2vw;
    }

    .menu-main-item-group-outer {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        z-index: 1;
        position: relative;
        margin-right: 20px;
        width: 12.1vw;
    }

    .menu-main-item-group {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        border: 1px solid black;
        z-index: 1;
        background-color: #eee;
        position: relative;
        width: 100%;
    }

    .menu-main-item {
        background-color: #f5f5f5;
        padding: 30px;
        border: 1px solid #777;
        margin-right: 7px;
        box-shadow: #ddd 4px 4px 5px;
        min-height: 50vh;
    }

    .menu-main-item-primary {
        padding: 15px;
        margin: 15px;
        background-color: white;
        display: block;
        height: calc(10vw);
        /*min-height: 380px !important;*/
    }

    .menu-main-item-primary-inner {
        margin-top: calc(1vw + 2px);
    }

    .menu-main-item-primary-header {
        clear: both;
        font-size: calc(13px + 3 * ((100vw - 320px) / 680));
        line-height: 110%;
        margin-top: .1vh;
        position: absolute;
        text-align: center;
        width: 100%;
        padding: 1vw;
        margin-left: -30px;
        font-weight: bold;
    }

    .menu-main-item-primary-text {
        padding: .5vw;
        margin-top: 5vw;
    }

    .menu-main-secondary-item-row {
        padding-left: 0;
    }

    .menu-main-secondary-item-container-outer {
        width: 100% !important;
        display: inline-block;
        text-align: center;
        padding: 0;
    }

    .menu-main-item-secondary {
        width: calc(100% - 30px) !important;
        padding: 15px;
        border: 1px dashed #888;
        background-color: white;
        height: 10vw;
        margin: 0px 15px 15px 0px;
    }

    .menu-main-item-secondary-header {
        clear: both;
        font-size: 14px;
        line-height: 90%;
        margin-top: 10%;
    }

    .menu-main-item-secondary-text {
        font-size: 80%;
        display: none;
    }
}



@media (min-width: 992px) {
    /*this is the point at which the UI switches to full normal nav menu*/

        .abcom-collapse-menu {
        display: none !important;
    }

    .abcom-top-menu {
        display: block;
        margin-top: 10px;
        margin-bottom: 30px;
        margin-left: 25px;
        margin-right: 25px;
    }

        .abcom-top-menu .show {
            transition: .003s !important;
        }

    .dropdown {
        /*margin-right: 20px;*/
        display: inline-block;
    }


    .dropdown-item {
        padding: 5px !important;
        padding-right: 30px !important;
        /*font-size: 95% !important;*/
        /*font-family: Arial !important;*/
        text-shadow: none !important;
        font-smooth: never;
        -webkit-font-smoothing: none;
        font-weight: 400 !important;
    }

        .dropdown-item:hover {
            background-color: #abb !important;
            box-shadow: none !important;
        }

        .dropdown-item:focus {
            background-color: transparent !important;
        }

        .dropdown-item:active {
            background-color: #eee !important;
        }

    .dropdown .dropdown-menu .dropdown-item:hover {
        color: black !important;
        color: white !important;
    }

    .abcom-top-menu-dropdown-menu {
        margin-top: -5px !important;
        border: 1px solid #999;
        border-top: 5px #999 solid !important;
        border-radius: 0 !important;
    }

    .abcom-dropdown-menu-item-icon {
        margin: 10px;
        font-size: .8em !important;
        color: #000;
        min-width: 30px;
    }

    .abcom-dropdown-menu-item {
        font-size: 100% !important;
        color: black !important;
    }

        .abcom-dropdown-menu-item:hover {
            color: red !important;
            color: black !important;
        }

        .abcom-dropdown-menu-item:active {
            background-color: #eee !important;
        }

    .abcom-top-menu-item {
        padding-bottom: 20px;
        /*font-size: 90%;*/
        color: black !important;
        line-height: 390%;
        border-bottom: #fff 5px solid;
        transition: 0s !important;
    }

    .abcom-top-menu-item-active {
        border-bottom: #999 5px solid;
    }

    .abcom-top-menu-item-disabled {
        color: #aaa !important;
        cursor: default !important;
    }

        .abcom-top-menu-item-disabled:hover {
            color: #aaa !important;
        }

    .menu-sub-item {
        margin-left: 5px;
    }

        .menu-sub-item:hover {
            background-color: #eee !important;
        }

    .menu-top-item-inactive :hover {
        background-color: #fff !important;
    }

    .menu-top {
        transition: none !important;
    }

    .menu-hide-on-expand {
        display: none;
    }

    .menu-top-item-active {
        background-color: #fff;
        border-left: none !important;
        padding-left: initial;
    }

        .menu-top-item-active a {
            color: black !important;
        }

    .nav-extension {
        display: none;
    }

    .nav-item-selected {
        display: none;
    }

    .nav-extension-active {
        display: none;
    }

    .fixed-sn .fixed-sn .page-footer .container-fluid {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}



/*at this resolution we change menu cards to be side by side*/
@media (min-width: 1250px) {

    .menu-grid-arrow-optional {
        display: block;
    }

    .menu-grid-arrow-critical {
        display: inline-block;
        font-size: 4vw;
        margin-left: calc(-2% + -3px);
        margin-right: calc(-2% + -3px);
        text-shadow: 4px 4px 5px #ddd;
        margin-top: 4vw;
        position: relative;
        z-index: 1000;
        color: green;
        transform: rotate(-90deg);
        font-size: 36px !important;
        margin-left: calc(-.04% - 22px) !important;
        margin-right: -17px !important;
    }

    .menu-grid-item-non-group-outer {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        z-index: 1;
        position: relative;
        margin-right: 0px;
        width: 12.3vw;
        max-width: 380px;
        max-height: 480px;
    }

    .menu-grid-item-group-outer {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        z-index: 1;
        position: relative;
        margin-right: 10px;
        width: 13.2%;
        max-width: 330px;
        max-height: 480px;
    }

        .menu-grid-item-group-outer:last-child {
            margin-right: -20px;
        }

    .menu-grid-next {
        display: none;
    }

    .menu-grid-item-group-no-frame {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        border: 1px solid white;
        z-index: 1;
        background-color: white;
        position: relative;
        width: 100.5%;
    }

        .menu-grid-item-group-no-frame ::after {
            margin-right: -3px !important;
        }

    .menu-grid-item-image {
        height: 5vw !important;
        max-height: 100px;
        margin-top: 18% !important;
    }

    .menu-grid-item-group {
        height: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        border: 1px solid black;
        z-index: 1;
        background-color: #eee;
        position: relative;
        width: 100%;
    }

    .menu-grid-item-primary {
        margin: 15px;
        width: calc(100% - 30px ) !important;
        background-color: #f9f9f9;
        display: table;
        max-width: 300px !important;
        /*max-height: 270px !important;
        height: 9vmax !important;*/
    }

    .menu-grid-item-primary-inner {
        height: 100%;
        width: 100%;
        word-wrap: normal;
        display: normal;
        max-height: initial;
        max-height: 250px !important;
        padding-bottom: initial !important;
    }

        .menu-grid-item-primary-inner img {
            margin-top: 20%;
        }

    .menu-grid-item-primary-header {
        line-height: 105%;
        font-size: 1vw;
        font-size: .8vw;
        font-size: .83em;
        /*font-family: sans-serif;*/
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        padding-left: 1vw;
        padding-right: 1vw;
        width: 100%;
        max-width: 300px;
        height: 3.8vw;
        word-wrap: normal;
        display: inline-block;
        overflow: hidden;
        /*line-height: 300%;*/
        margin-top: .1vh;
    }

        .menu-grid-item-primary-header span {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
        }

    .menu-grid-secondary-item-row {
        width: calc(100% - 30px );
        padding-left: 0;
        margin-bottom: 0 !important;
        text-align: center;
    }

    .menu-grid-secondary-item-container-outer {
        width: 100% !important;
        display: inline-block;
        text-align: center;
        padding: 0;
    }

    .menu-grid-item-secondary {
        border: 1px dashed #888;
        background-color: white;
        height: 10vw;
        min-height: 150px;
        margin: 0;
        margin-bottom: 15px;
        width: calc(100% );
        min-width: initial;
    }

        .menu-grid-item-secondary img {
            margin-top: 20px;
            width: 40%;
            max-height: 65px;
            max-width: 65px;
        }

    .menu-grid-item-secondary-header {
        clear: both;
        font-size: 14px;
        line-height: 110%;
        margin-top: 1vh !important;
        padding: 5px;
    }

    .menu-grid-item-secondary-text {
        font-size: 80%;
        display: none;
    }
}




@media (min-width: 2000px) {

    #changeLogInner {
        margin-left: calc(50% - 1000px) !important;
    }

    .menu-grid-item-primary-header {
        font-size: 120% !important;
    }

    .menu-grid-item-secondary-header {
        font-size: 120% !important;
    }
}



@media (min-width: 2750px) {

    .menu-grid-arrow-critical {
        margin-top: 110px !important;
    }
}

/*#endregion */