input.disabled-look-label:disabled {
    background-color: transparent !important;
    border: none !important;
    color: inherit;
    font: inherit;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: default !important;
    opacity: 1.0 !important;
}

.Help,
.popup {
    font-style: italic;
}

.H1,
thead {
    font-variant: normal;
}

.dgHeader,
.repeaterHeader {
    vertical-align: top;
}

/*new*/
.dgHeaderSticky {
    position: sticky;
    top: 0;
}

.dgHeaderBlack {
    vertical-align: middle;
    background-color: rgb(200, 200, 200);
    border: white;
    color: black;
    padding: 5px;
    font-family: "Noto Sans", sans-serif !important;
    line-height: 12px;
}

    .dgHeaderBlack td {
        border: 1px solid white;
        border-bottom: 1px solid white;
    }

.MainContainerWithMenuBorder {
    width: 100%;
    padding: 0.42em;
    border: 1px solid #999;
    border-top: none;
}

/* used in components */
.MenuHover {
    background-color: #cfd5e2;
    color: #333;
}

.TFNYellowBackground {
    background-color: rgb(204, 204, 0) !important;
}

.TFNYellowForeground {
    color: rgb(204, 204, 0) !important;
}

.TFNOrangeBackground {
    background-color: rgb(255, 120, 0) !important;
}

.TFNOrangeForeground {
    color: rgb(255, 120, 0) !important;
}

.TFNGreenBackground {
    background-color: rgb(177, 199, 54) !important;
}

.TFNWhiteForeground {
    color: rgb(255, 255, 255) !important;
}

.TFNBlackForeground {
    color: rgb(0, 0, 0) !important;
}

.TFNGreenForeground {
    color: rgb(157, 179, 44) !important;
}

.TFNBlueBackground {
    background-color: rgb(21, 151, 209) !important;
}

.TFNBlueForeground {
    color: rgb(21, 151, 209) !important;
}

.TFNPurpleForeground {
    color: rgb(145, 59, 127) !important;
}

.TFNPurpleBackground {
    background-color: rgb(145, 59, 127) !important;
}

.ToolTip {
    color: rgb(151, 145, 133);
    font-size: 90%;
}

hr {
    border: 1px solid #fff;
    border-bottom-color: #ccc;
    margin-top: 0.6em;
}

.Label150 {
    width: 150px;
    white-space: nowrap;
}

input,
select {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 1em !important;
}

.ctlDate {
    display: inline;
}

.menuDropdown {
    background-color: transparent;
    color: black;
    padding: 0.25em 1.2em 0.25em 0em;
    width: auto;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 55%;
    background-size: 0.5em;
    background-image: url(../Images/menu-down.svg);
    border-radius: 0.167em;
    border-color: transparent;
    border-style: dotted;
}

.menuDropdownDisabled {
    cursor: default !important;
    text-decoration: none !important;
    background-color: transparent !important;
    background-color: unset !important;
    color: unset !important;
}

    .menuDropdownDisabled a:hover {
        cursor: default !important;
        text-decoration: none !important;
        background-color: transparent !important;
        background-color: unset !important;
        color: unset !important;
    }

.menuHeader {
    border-top: 1px solid #fff;
    padding-left: 0.83em;
    padding-bottom: 0.42em;
    padding-top: 0.42em;
}

.menuItemLink {
    padding-left: 1.6em;
    padding-bottom: 0.42em;
    padding-top: 0.42em !important;
}

.menuTable {
    border-spacing: 0;
    border: 0;
    padding: 0.42em;
    width: 100%;
    max-width: 350px;
    min-width: 250px;
}

.row .col,
img {
    max-width: 100%;
}

.tableRow {
    align-items: stretch !important;
}

.tableRowLine {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #ccc;
}


.rounded-border {
    border: 1px solid #ccc !important;
    border-radius: 0.25em;
}

body {
    padding: 0;
    margin: 0;
    color: #333;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 75%;
    background-color: #fff;
}

.padded-body {
    padding: 0;
    margin: 0;
    color: #333;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 75%;
    background-color: #fff;
    padding: 0 0 0 1em;
}

.NoticeboardTitleBackground {
    background-color: #ffdf62;
}

.DashBoardSubHeader {
    padding: 0.25em 0 0.16em 0.16em;
    font-weight: 700;
    font-size: medium;
}

.ManagementDashBoardSubHeader {
    font-weight: 700;
    font-size: medium;
    padding-bottom: 20px;
    padding-top: 10px;
    color: black;
}

.LoadingBackground {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: wait;
    z-index: 10010;
    /* center the loading message */
    display: flex;
    justify-content: center;
    align-items: center;
}

.LoadingBoxTable {
    background-color: #eee !important;
    border-color: transparent !important;
    padding: 2em;
}

.LoadingText {
    color: #315b7e !important;
}

.LoadingPrompt {
    width: 350px;
    background-color: whitesmoke;
    border-color: rgb(213, 213, 213);
}

.LoadingPromptText {
    text-align: center;
    color: #315b7e !important;
    padding: 2em;
}

.LoadingPromptTextTitle {
    font-size: 15pt;
}

.LoadingPromptTextDetail {
    font-size: 11pt;
}

.H1DarkShade,
.PagerStyle,
.Warning {
    font-weight: 700;
}

.ModalBackground {
    background-color: #808080;
    opacity: 0.7;
}

.Hidden {
    visibility: hidden !important;
    display: none !important;
}

.SoftHidden {
    display: none !important;
}

.Help {
    color: #daa520;
}

.HelpShade {
    color: #696969;
    background-color: #fffacd;
}

.PagerStyle {
    background-color: #fff;
}

.Visible {
    visibility: visible;
    display: inline;
}

.PagerStyle {
    color: #06c;
    font-size: 0.9em;
}

.Warning {
    text-align: left;
    color: Red;
}

.MobileLinkButton,
.LinkButtonGrey {
    padding: 0;
    margin: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

input.LinkButton {
    cursor: pointer;
    border-style: none;
}

input.LinkButtonGrey {
    border-style: none;
    background-color: transparent;
    color: grey;
}

.MobileLinkButton {
    border: none;
    background-color: #fff;
    color: #333;
    height: 19px;
    background-repeat: no-repeat;
}

input + label {
    margin-left: 0.25em;
    margin-right: 1em;
}

#ctl07_trNews .menu-inner table table span,
.accordionContent span span a {
    position: relative;
    bottom: 0.3em;
}

#ctl07_trForum .menu-inner table table span {
    position: relative;
    bottom: 0.5em;
}

.NormalLightShade {
    background-color: #eff1f1;
}

.NoShade {
    background-color: white !important;
    font-weight: bold;
}

.HelpLightShade {
    /*background-color: #f8f7c9;*/
    background-color: #f9f8d9;
    color: #666;
}

.NormalDarkShade {
    background-color: #c5d5ed;
    color: #333;
}

.NormalGrayText {
    color: #696969;
}

.NormalBlackText {
    color: #333;
    text-decoration: none;
    font-weight: 400;
}

.popup,
a:hover {
    text-decoration: underline;
}

.Watermark {
    color: #999;
    background-color: #fbfbfb;
}

.H2LightShade {
    color: #333;
    font-weight: 700;
    font-size: 1em;
}

.H2LightShadeNews {
    font-weight: 700;
    font-size: 1em;
    padding: 0 0.25em 0.25em;
}

.H3ColourShade,
.H3DarkShade,
.H3MenuShade,
.H3RedShade {
    font-size: 1em;
    font-family: "Noto Sans", sans-serif !important;
}

.H2RedShade,
.H3ColourShade,
.H3DarkShade,
.H3MenuShade,
.H3RedShade {
    padding-top: 0;
    margin: 0;
    color: #333;
    font-weight: 700;
}

.H2LightShadeNews img {
    position: relative;
    top: 0.25em;
}

.H3LightShade {
    font-weight: 700;
    font-size: 1em;
}

/*new*/
.H3DarkGreyShade {
    font-weight: 700;
    /*font-size: small;*/
    background-color: rgb(200, 200, 200);
    color: black;
    align-content: center;
    line-height: 25px;
    text-align: right;
}
/*new*/
.TableCellGrey {
    background-color: #F4F4F4;
    color: black;
    align-content: center;
    line-height: 25px;
    border-color: rgb(200, 200, 200);
    text-align: right;
}

.H3RedShade {
    background-color: #fcc;
}

.H3MenuShade {
    background-color: #eff1f4;
}

.H2 {
    font-weight: 700;
    font-size: 1em;
}

/*new*/
.H2DarkShade h2 {
    font-weight: 700;
    font-size: 1em;
    margin: 0 0 1em 0;
    font-size: 1.25em;
    line-height: 2.5;
    padding-left: 0.5em;
    background-color: rgb(200, 200, 200);
}

.H2RedShade {
    font-size: 1em;
    background-color: #fcc;
}

.H3LightShadeTFN,
.LightShade {
    padding-top: 0;
    background-color: #eff1f1;
}

.H3 {
    font-weight: 700;
}

.H3LightShadeTFN {
    margin: 0;
    color: #333;
    font-weight: 700;
    font-size: 1em;
}

.Comment {
    color: grey;
}

.H1 {
    font-weight: 700;
    font-size: 1.25em;
    color: #333;
}

.popup {
    font-weight: 700;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.InputButton,
button {
    border: 1px solid #333;
    padding-right: 0.15em;
    padding-left: 0.15em;
    color: #333;
    font-weight: 400;
    font-size: 0.9em;
    background-color: #dddce3;
    text-decoration: none;
}

/*new */
.gridview {
    background-color: #fff;
    padding: 10px;
}

    .gridview a {
        border-radius: 50%;
        background-color: rgb(200, 200, 200);
        padding: 5px 10px 5px 10px;
        color: #fff;
        text-decoration: none;
        align-content: center;
    }

        .gridview a:hover {
            background-color: #343a40;
            color: white;
            align-content: center;
        }

    .gridview span {
        background-color: #343a40;
        color: #fff;
        border-radius: 50%;
        padding: 5px 10px 5px 10px;
    }

    .gridview td {
        padding: 20px;
        line-height: 20px;
    }

.Header,
.bold,
.dgPager,
.notice,
thead {
    font-weight: 700 !important;
}

.Header {
    font-size: small;
    border: 1px solid #dcdcdc;
}

.NoBorder,
td,
tr {
    border: none;
}

.checkB-align label {
    position: relative;
    top: -3px;
}

.dgPager {
    color: #025aaa;
    font-size: 0.9em;
    background-color: #f5f5f5;
    text-align: center;
    padding: 5px;
    line-height: 20px;
}

    .dgPager td {
        color: #025aaa;
        font-size: 0.9em;
        background-color: #f5f5f5;
        text-align: center;
        border: 1px solid #dbd6be;
        padding: 10px;
        line-height: 20px;
    }

.GrayTotalFont,
.TotalFont {
    font-weight: bold;
    text-decoration: underline overline;
    text-align: right;
}

.NoBorder {
    background-color: transparent;
}

.Tab {
    margin-left: 30px;
}

.GrayTotalFont {
    color: grey;
    display: inline;
}

thead {
    font-size: 1em;
    background-color: #d5dae6;
}

.GSpace_DATAGRID_SELECTEDPAGE {
    font-weight: 700;
    color: Red;
}

.autocomplete_completionListElement {
    visibility: hidden;
    margin: 0 !important;
    background-color: #d1e0fa;
    color: #333;
    border: 1px solid #333;
    cursor: default;
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
}

.menu,
.menu-inner {
    border-radius: 0.83em;
}

.autocomplete_highlightedListItem {
    background-color: #8eb4f2;
    color: #333;
    padding: 1px;
}

.autocomplete_listItem {
    background-color: #fff;
    color: #333;
    padding: 1px;
}

.menu,
.menu-inner,
.ptr,
.tr,
.wtr {
    padding: 0.42em;
}

.menu {
    background-color: #025aaa;
}

.menu-inner {
    background-color: #fff;
}

.clear {
    font-size: 1px;
    height: 1px;
}

.Development {
    background-color: #e1e4ed;
    font-size: 0.9em;
    font-weight: bolder;
}

.demo-version,
.dgHeader,
.dgHeaderBig,
.nav-meta,
.repeaterHeader {
    font-weight: 700;
}

/*new*/
.dgHeaderBlack {
    font-weight: 700;
}

    .dgHeaderBlack td {
        text-align: center;
        border-left: 2px solid white;
        border: 2px solid white;
        padding: 10px;
        color: black;
        background-color: rgb(200, 200, 200);
    }

.dgHeader span {
    line-height: 25px;
    padding: 5px;
    border-radius: 2px;
}

.dgHeader td,
.dgHeader th {
    text-align: center;
    border-left: 1px solid #cccccc;
}

    .dgHeader td:empty,
    .dgHeader th:empty {
        border: none !important;
    }

.pbl {
    background: 0 100% no-repeat #025aaa;
}

.pbr {
    background: 100% 100% no-repeat;
}

.ptl {
    background: no-repeat;
}

.popupBG {
    background-color: #025aaa;
}

.VersionHeader {
    font-size: 0.8em;
}

.error {
    color: red;
}

.ajax__fileupload {
    overflow: hidden !important;
}

.ajax__fileupload_selectFileContainer {
    height: 40px !important;
    width: 100px !important;
}

.ajax__fileupload_selectFileButton {
    height: 22px !important;
    background-color: #f3f7dd !important;
    background-image: url(../Images/android-clipboard.svg) !important;
    padding-left: 2em !important;
    background-repeat: no-repeat !important;
    background-position: 0.5em center !important;
    background-size: 1em !important;
    border-radius: 2px !important;
    border: 1px solid #888 !important;
    padding: 0.5em 0.75em !important;
    background-color: #eee !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 1em !important;
    width: 70px !important;
    text-align: right !important;
}

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
    background: 0 0 !important;
}

.ajax__tab_theme .ajax__tab_header {
    font-size: 1em !important;
    background: url(TabStyles/tab-line.png) bottom repeat-x !important;
    display: block !important;
    /*height: 80px;*/
    cursor: pointer !important;
}

    .ajax__tab_theme .ajax__tab_header .ajax__tab_outer {
        margin-left: 0.42em !important;
        margin-right: 0.25em !important;
        cursor: pointer !important;
        height: 27px !important;
        padding-left: 0.3em !important;
    }

    .ajax__tab_theme .ajax__tab_header .ajax__tab_inner {
        background-image: linear-gradient(#f0f0f0, #e2e2e2) !important;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border: 1px solid #d7d7d7;
        border-bottom: none;
        color: #666 !important;
        padding: 0.25em 0.83em 0.16em 0 !important;
        cursor: pointer !important;
        width: 100%;
        height: 27px !important;
        text-align: center;
    }

.ajax__tab_theme .ajax__tab_hover .ajax__tab_inner {
    color: #333 !important;
    cursor: pointer !important;
    border: 1px solid #d7d7d7;
    text-align: center;
}

.ajax__tab_theme .ajax__tab_active .ajax__tab_outer {
    border-bottom-color: #fff !important;
    cursor: pointer !important;
    text-align: center;
}

.ajax__tab_theme .ajax__tab_active .ajax__tab_inner {
    background-image: linear-gradient(#f5f5f5, #ffffff) !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #d7d7d7;
    border-bottom: none;
    color: #333 !important;
    cursor: pointer !important;
    text-align: center;
}

.ajax__tab_theme .ajax__tab_body {
    font-size: 0.9em !important;
    padding: 0.6em !important;
    background-color: #fff !important;
    border: 1px solid #d7d7d7 !important;
    border-top-width: 0 !important;
}

.ajax__tab_default .ajax__tab {
    height: 36px !important;
}

.dgHeader {
    font-size: 1em;
}

.redBack {
    background: Red;
}

.yellowBack {
    background: #ff0;
}

.greenBack {
    background: green;
}

.barBorder {
    border: 1px solid #333;
    width: 130px;
}

.accordion {
    width: 400px;
}

.accordionHeader,
.accordionHeaderSelected {
    color: #fff;
    font-weight: 700;
    padding: 0.5em;
    margin-top: 0.5em;
    cursor: pointer;
}

    .accordionHeader:first-of-type,
    .accordionHeaderSelected:first-of-type {
        margin-top: 0;
    }

.accordionContent {
    border-top: none;
    padding: 1em 0.5em 0.5em 0.5em;
}

input,
textarea {
    border-color: #ccc;
    border: 1px solid #ccc;
    padding: 0.25em;
}

    input[type="text"] {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

select {
    border-color: #ccc;
    border: 1px solid #ccc;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0.25em;
}

.repeaterHeader {
    font-size: 0.9em;
}

.dgHeaderBig {
    font-size: 1em;
}

.extra-light-padding h3 {
    padding: 0.1em;
}

.extra-light-padding li {
    padding-bottom: 0.1em !important;
}

.light-padding td {
    padding: 0.5em !important;
}

.h3-style {
    display: block;
    font-size: 1.17em;
    -webkit-margin-start: 0px;
    font-weight: bold;
}

/*new*/
.tableDashboard th {
    background-color: #666;
    color: white;
    padding: 10px;
}

.dgItemBig {
    border: 1px solid #dbd6be;
    background-color: #f9f9fe;
}

.dgItemBlackBorder {
    border: 1px solid #000000;
}

.dgItemThin {
    border: 0.5px solid white;
    border-bottom: 0.5px solid white;
    border-left: 0.5px solid white;
    line-height: 25px;
}

    .dgItemThin td {
        border: white;
        line-height: 30px;
    }

.dgAlternatingItemBig {
    background-color: #efeff7;
    border: 1px solid #dbd6be;
}

.dashboard-state-icon {
    margin-right: 0.25em;
    margin-left: 0.25em;
    position: relative;
    top: 0.25em;
}

img {
    height: auto;
}

.row-top {
    align-items: flex-start;
}

.row {
    display: flex;
    flex-wrap: wrap;
    /* CC extras */
    align-items: center;
    justify-content: space-between;
}

.row-top {
    align-items: flex-start;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
    position: relative;
    width: 100%;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.offset-1 {
    margin-left: 8.333333%;
}

.offset-2 {
    margin-left: 16.666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.333333%;
}

.offset-5 {
    margin-left: 41.666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.333333%;
}

.offset-8 {
    margin-left: 66.666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.333333%;
}

.offset-11 {
    margin-left: 91.666667%;
}

@media (min-width: 36em) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-sm-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offset-sm-1 {
        margin-left: 8.333333%;
    }

    .offset-sm-2 {
        margin-left: 16.666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.333333%;
    }

    .offset-sm-5 {
        margin-left: 41.666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.333333%;
    }

    .offset-sm-8 {
        margin-left: 66.666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.333333%;
    }

    .offset-sm-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 48em) {
    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.333333%;
    }

    .offset-md-2 {
        margin-left: 16.666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.333333%;
    }

    .offset-md-5 {
        margin-left: 41.666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.333333%;
    }

    .offset-md-8 {
        margin-left: 66.666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.333333%;
    }

    .offset-md-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 62em) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.333333%;
    }

    .offset-lg-2 {
        margin-left: 16.666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.333333%;
    }

    .offset-lg-5 {
        margin-left: 41.666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.333333%;
    }

    .offset-lg-8 {
        margin-left: 66.666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.333333%;
    }

    .offset-lg-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 75em) {
    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.333333%;
    }

    .offset-xl-2 {
        margin-left: 16.666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.333333%;
    }

    .offset-xl-5 {
        margin-left: 41.666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.333333%;
    }

    .offset-xl-8 {
        margin-left: 66.666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.333333%;
    }

    .offset-xl-11 {
        margin-left: 91.666667%;
    }
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.d-inline-flex {
    display: inline-flex;
}

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

.bdplTitle th {
    width: 80px !important;
}

#ctlReportButtons_btnGenerate_up,
#ctl03_ctlReportButtons_btnGenerate_up {
    padding-left: 7px;
}

    #ctlReportButtons_btnGenerate_up span a,
    #ctl03_ctlReportButtons_btnGenerate_up span a {
        position: relative;
        bottom: 4px;
    }

.popupRow {
    padding: 3px !important;
    border-bottom: 1px solid lightgrey !important;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.alternate {
    background-color: #f0f0f0;
}

.changed {
    background-color: #025aaa;
    color: white;
    padding: 5px;
}

.notChanged {
    padding: 5px;
}

/* override specific font-family rules from frameworks */

.autocomplete-item,
.autocomplete-disabled-item,
.toastrMessage,
.toastrTitle,
.ui-widget,
.ui-widget input,
.ui-widget textarea.body,
input,
select,
textarea,
button,
.ui-btn,
legend,
.ui-collapsible .ui-collapsible-heading-toggle,
body,
input,
select,
textarea,
button,
.ui-btn,
.bdplPopUp,
.bdplPopUp th,
.bdplPopUp td,
.bdplPopUp div {
    font-family: "Noto Sans", sans-serif !important;
}

/* table styles (excluding menus) */

.TableDefault {
    border-spacing: 1px;
    padding: 1px;
    border: none;
    width: 100%;
    font-size: 1em !important;
}

    .TableDefault input {
        font-size: 1em !important;
    }

.TableDefaultNoPadding {
    border-spacing: 0;
    padding: 0;
    border: none;
    width: 100%;
}

.TableDefaultWithMorePadding {
    border-spacing: 1px;
    padding: 3px;
    border: none;
    width: 100%;
    font-size: 1em !important;
}

.CaptureTable {
    background-color: #f8f8fb;
}

table {
    border: 0;
}

/*Ionic card styles*/

.ion-card {
    display: block;
    overflow: hidden;
    padding: 10px;
    margin: auto;
    border-radius: 2px;
    width: calc(99% - 20px);
    font-size: 1em;
    background: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    background-color: #1597d1;
}

    .ion-card .ion-card-header,
    .ion-card .card-title-md,
    .ion-card .card-content,
    .ion-card h1,
    .ion-card h2,
    .ion-card h3,
    .ion-card h4,
    .ion-card h5,
    .ion-card h6,
    .ion-card p {
        color: #fff;
        padding-left: 16px;
    }

.ion-card-header {
    font-size: 1.2em;
    color: #222;
    padding: 16px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ion-buttons-bar {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ion-button {
    text-align: center;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 0;
    display: inline-block;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: top;
    vertical-align: -webkit-baseline-middle;
    -webkit-transition: background-color, opacity 100ms linear;
    transition: background-color, opacity 100ms linear;
    -webkit-font-kerning: none;
    font-kerning: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    contain: content;
    border-radius: 2px;
    overflow: hidden;
    height: 2.5em;
    font-size: 1.1em;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    margin: 0.4rem 0.2rem !important;
    padding: 0 1.1em !important;
    border-width: 1px;
    border-style: solid;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #ffffff !important;
    background-color: transparent !important;
}

.ion-button-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*Ionic card styles end*/

/* Default table styles */
/* We use a class for backwards compatibility for now. */
.table {
    border-collapse: collapse;
    line-height: 1.75;
}

    .table td,
    .table th {
        padding: 0 0.75em;
    }

    .table th {
        background-color: #e1e4ed;
    }

    .table th {
        text-align: left;
    }

    .table tr {
        background-color: #f9f9fe;
        /*border: 1px solid #e1e1e1;*/
    }

    .table.table-plain th {
        background-color: transparent;
    }

    .table.table-plain tr {
        background-color: transparent;
        border-color: transparent;
    }

    /* matches .HelpLightShade, replaces tips */
    .table caption {
        /*background-color: #f8f7c9;*/
        background-color: #f9f8d9;
        color: #666;
        text-align: left;
        margin-bottom: 1em;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 2.5em;
        background-image: url(../Images/information-circled.svg);
        background-size: 1.5em;
        background-position: 0.5em center;
        background-repeat: no-repeat;
    }

.table-totals {
    line-height: 2.50;
}

    .table-totals td {
        text-align: right !important;
    }

.totals-row th {
    text-align: right !important;
}
/* By default, let tables scroll on smaller screens */
.table-wrapper {
    max-width: 100%;
    overflow-x: scroll;
}

.table input[type="image"] {
    padding: 0.25em 0.25em 0.25em 0;
    margin-right: 0.5em;
}

.table.table-light th {
    background-color: transparent;
}

.table.table-light tr {
    background-color: transparent;
}

/* for some tables, convert them to "cards" */

@media (max-width: 50em) {
    .table-responsive-md table,
    .table-responsive-md tbody,
    .table-responsive-md tr,
    .table-responsive-md th,
    .table-responsive-md td {
        display: block;
    }

    .table-responsive-md tr {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .table-responsive-md td {
        display: flex; /* This makes long data cells wrap */
    }

        .table-responsive-md thead,
        .table-responsive-md th:empty,
        .table-responsive-md td:empty {
            display: none;
            visibility: hidden;
        }

        .table-responsive-md th[data-title]:before,
        .table-responsive-md td[data-title]:before {
            content: attr(data-title);
            display: inline-block;
            font-weight: bold;
            width: 8em;
        }

    .table-responsive-md .numerical,
    table.table-responsive-md .numerical {
        text-align: left;
    }

    /* fix double-up borders */

    .table tr:not(:first-child) {
        border-top: none;
    }
}

/* numerical data, where supported */
.table {
    font-variant-numeric: lining-nums tabular-nums;
}

    .numerical,
    .table .numerical {
        white-space: nowrap;
    }

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

/* text utility classes */
.text-center,
.textAlignCenter {
    text-align: center;
}

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

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

/* typography */

h1 {
    font-size: 1.5em;
    line-height: 2.5;
    margin: 0.25em 0;
    padding-left: 0.5em;
    color: #fff;
}

h2 {
    margin: 0 0 1em 0;
    font-size: 1.25em;
    line-height: 2.5;
    padding-left: 0.5em;
    border-radius: 5px;
}

aside .card {
    border: none;
}

aside h3 {
    background-color: transparent;
}

h3 {
    margin: 0;
    padding: 0.5em 0 0.5em 0.5em;
    line-height: 2;
    font-size: 1.3em;
    border-radius: 5px;
}

h6 {
    margin: 0 0 1em 0;
    font-size: 1.3em;
}

h4 {
    margin: 0 0 1em 0;
}

table h3 {
    font-size: 1em;
}

.table-align-top tr {
    vertical-align: top;
}

.numerical-large {
    font-size: 1.5em;
    display: block;
    text-align: center;
}

/* charts */

.chart {
    margin-bottom: 2em;
}

    .chart h3 {
        display: inline-block;
        margin-right: 1em;
    }

/* override for freshdesk form*/

.freshwidget-theme {
    font-weight: normal !important;
    font-family: Tahoma, Verdana, Arial, Helvetica !important;
    font-size: 11px !important;
    padding: 2px 5px !important;
}

/* replacing wbl, wbr, wtl, wtr */

.modal-content {
    background-color: white;
    display: block;
    padding: 0.5em;
    margin: 0 0.5em;
}

.modal-content {
    padding: 1em;
}

.modal {
    background-color: #025aaa;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    left: 0 !important;
}

.modal-gray-background {
    background-color: #c0c0c0;
}

.modal-white-background {
    background-color: white;
}

.modal-icon {
    padding-left: 3em;
    background-repeat: no-repeat;
    background-position: 0.5em center;
    background-size: 2em;
}

.modal-warning {
    background-image: url(../Images/information-circled.svg);
}

.modal label {
    font-weight: bold;
    display: block;
    margin-bottom: 1em;
}

.modalinline label {
    display: inline;
}

.modal label input {
    margin-top: 0.25em;
}

.modal-footer {
    text-align: center;
    padding-top: 1em;
}

.textbox-full {
    width: 100%;
}

/* links */

a:active,
a:link,
a:visited {
    color: #535353;
}

a:focus,
a:hover {
    /*outline: solid 0.25em #eef;*/
    background-color: #eef;
}

a img {
    margin-right: 0.25em;
}

/* disabled states */

[disabled],
.disabled,
input.LinkButton.disabled,
input.LinkButton[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* lists */

.width-short {
    width: 100%;
    max-width: 10em;
}

.width-medium {
    width: 100%;
    max-width: 20em;
}

.width-long {
    width: 100%;
    max-width: 30em;
}

.width-extra-long {
    width: 100%;
    max-width: 40em;
}

.column-header {
    background-color: #7f7e7e;
    color: #fff;
    margin: 0 0 1em 0;
    font-size: 1.25em;
    line-height: 2.5;
    padding-left: 0.5em;
    font-family: "Noto Sans", sans-serif !important;
    font-weight: bold;
    padding: 0 0 0 1em;
    border-bottom: 1px solid #c0c0c0;
}

    .column-header:hover {
        background-color: #393D3B !important;
    }

    .column-header a {
        text-decoration: none;
        color: #fff;
        display: block;
    }

        .column-header a:hover, a:focus {
            background-color: transparent;
        }

.hvr1:hover td {
    background: #f5f5f5;
}

.list-plain,
.list-plain ul {
    list-style: none;
    margin: 0 0 2em 0;
    padding: 0;
}

    .list-plain:last-of-type,
    .list-plain ul:last-of-type {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .list-plain a {
        display: block;
        padding: 0.15em;
        margin-bottom: 0.5em;
    }

aside .list-plain li {
    margin-bottom: 1em;
}

.list-flex li {
    display: flex;
    align-items: center;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.list-uncentred li {
    align-items: initial;
}

.list-flex h3 {
    font-size: 1em;
    width: 5em;
}

.list-flex-wide h3 {
    width: 20em;
}

.list-flex-extra-wide h3 {
    width: 25em;
}

.list-flex-medium h3 {
    width: 10em;
}

.list-flex li > * {
    margin-right: 0.5em;
}

.list-flex .alert {
    padding: 0.25em 0.5em;
    margin-bottom: 0;
}

.list-inline {
    list-style: none;
    margin: 0 0 1em 0;
    padding: 0;
}

    .list-inline li {
        display: inline-block;
        margin-left: 1em;
    }

        .list-inline li:first-child {
            margin-left: 0;
        }

.list-pad {
    background-color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

aside .list-plain.list-pad {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 2em;
}

.dashboard .list-pad {
    position: absolute;
    left: 0;
    z-index: 1;
}

.list-pad a {
    display: block;
    padding: 0.75em 1em;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid #bbb;
    margin-bottom: 0;
}

    .list-pad a:hover,
    .list-pad a:focus {
        outline: solid 0.1em rgba(150, 150, 150, 0.5);
        color: #535353;
    }

.list-pad li,
aside .list-pad li {
    margin: 0;
}

.list-pad h3,
.list-pad h4 {
    background-color: transparent;
    padding: 0.75em 1em;
    padding-bottom: 0;
    margin-top: 1em;
    margin-bottom: 0;
    text-transform: uppercase;
}

.list-pad li:first-child h3,
.list-pad li:first-child h4 {
    margin-top: 0;
}

/* dashboard specifics */

.customer-balance h3 {
    font-size: 1em;
    margin: 0;
}

.customer-balance .list-flex h3 {
    width: 15em;
}

.order-audit .list-flex h3 {
    font-size: 1em;
    margin: 0;
}

.order-audit h3 {
    font-size: 1em;
    margin: 0;
}

/* panels */

.panel-expanded {
    padding: 0 1em 1em 1em;
}

    .panel-expanded table {
        margin-left: -0.5em;
    }

    .panel-expanded h3 {
        font-size: 1em;
    }

/* layout */

.iframe {
    height: 50vh;
    width: 100%;
    overflow: auto;
}

.container,
.pricecheck .update-panel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* ReSharper disable once CssNotResolved because it lies */
    grid-gap: 10px;
}

@media (max-width: 50em) {
    .three-column-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 27em) {
    .three-column-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.three-column-grid > div {
    border: 1px solid #e1e4ed;
    padding: 1em;
}

    .three-column-grid > div label {
        display: inline;
    }

main,
aside {
    flex-basis: 25em;
}

main {
    flex-grow: 1;
    flex-shrink: 0;
    margin: 1em;
}

aside {
    flex-grow: 0;
    flex-shrink: 1;
    margin: 1em;
}


@media (max-width: 46em) {
    aside {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        margin: 2em;
    }
}

aside h2 {
    margin: 0 -1px 0 -1px; /* for visually matching the box shadow */
    border-top-right-radius: 0.167em;
    border-top-left-radius: 0.167em;
}

aside h3 {
    margin-bottom: 0.5em;
}

.pricecheck main {
    flex: 1 0 25em;
    margin: 1em;
}

.pricecheck aside {
    flex: 0 1 25em;
    margin: 1em;
}

@media (max-width: 46em) {
    .pricecheck aside {
        flex: 1 0 100%;
        margin: 1em auto;
    }
}

main > section {
    margin-bottom: 2em;
}

aside [aria-current="page"] a {
    background-color: #eef;
    text-decoration: none;
}

.notification {
    margin-bottom: 1em;
}

section {
    margin-bottom: 2em;
}

/* top nav */
nav {
    padding: 0.5em;
}

.nav-meta {
    margin-right: 1em;
    margin-left: 1em;
}

.nav-main {
    background-color: #eff1f4;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0.5em 0;
}

@media (min-width: 25em) {
    nav ul {
        display: flex;
        flex-wrap: wrap;
    }
}

nav li {
    margin: 0 1em 1em 0;
    display: flex;
    align-items: center;
}

    nav li:empty {
        display: none;
    }

.nav-main li {
    margin: 0 1em;
}

nav img {
    margin-right: 0.5em;
    width: 1.5em;
    height: 1.5em;
    position: relative;
    top: 0.25em;
}

nav a {
    display: block;
}

.nav-bar {
    display: flex;
    align-items: center;
    background-color: #eff1f4;
    margin-bottom: 1em;
    border-radius: 5px;
}

    .nav-bar [type="radio"] {
        margin-top: 0;
    }

    .nav-bar input + label {
        bottom: 0;
    }

    .nav-bar input:last-child,
    .nav-bar span:last-child {
        margin-left: auto !important;
    }

.nav-bar-alt input:last-child,
.nav-bar-alt span:last-child {
    margin-left: 0.5em !important;
}

.nav-bar > * {
    margin-right: 1.5em;
    text-align: center;
    display: flex;
    align-items: center;
}

.nav-bar input {
    flex-shrink: 0;
}

.nav-bar > *:empty {
    margin-right: 0;
}

nav.nav-bar a {
    display: flex;
    margin-left: 1.5em;
}

.navs {
    display: flex;
    margin-bottom: 2em;
}

    .navs nav {
        border-radius: 0.25em;
        position: relative;
        margin-right: 1em;
        padding: 0;
    }

.demo-version {
    background-color: #e6c068;
    text-align: center;
    border-radius: 0.5em;
    padding: 0 0.5em;
    width: 4em;
    margin-right: auto;
    margin-left: 1em;
}

.logo {
    display: block;
    max-width: 30em;
    max-height: 4.4em;
}

@media (min-width: 50em) {
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

[role="banner"] {
    padding-left: 1em;
}

/* alerts */

.alert {
    padding: 1em;
    margin: 0 0 0.5em 0;
    background-color: #fff;
    display: block;
    border-radius: 0.25em;
}

.alert-danger {
    border-color: #daa;
    background-color: #fcc;
    color: #733;
}

.alert-success {
    border-color: #b2c735;
    background-color: #c9d871;
    border-radius: 0;
}

.gray {
    background-color: #d3d3d3 !important;
}

.alert-info {
    border-color: transparent;
    background-color: #f5f5a7;
    /*background-color: #f9f8d9;*/
}

.alert-new-dash {
    margin-bottom: 1em;
}

    .alert-new-dash a {
        border-radius: 2px;
        border: 1px solid #888;
        padding: 0.5em 0.75em;
        background-color: #eee;
        text-decoration: none;
    }

.alert p {
    margin-top: 0;
}

.alert h2,
.alert h3 {
    background-color: transparent;
    padding: 0;
}

    .alert h2:after {
        display: none;
    }

.alert h2 {
    text-transform: uppercase;
}

.dashboard-alerts {
    margin: 0 auto 1em auto;
    max-width: 80em;
}

/* Dashboard Navs */
.navs {
    margin-top: -1.9em;
    margin-left: -1.3em;
    border-bottom: 1px;
    border-bottom-color: rgb(200, 200, 200);
    border-bottom-style: solid;
}

aside .navs {
    margin-left: -0.3em;
}

.navs-orange {
    border-bottom-color: #f47321;
}

.navs-blue {
    border-bottom-color: #0695d0;
}

.navs-gray {
    border-bottom-color: #c0c0c0;
}

.navs-green {
    border-bottom-color: #b2c735;
}

.navs-purple {
    border-bottom-color: #903b7b;
}

/* card colours */

.card {
    border: none;
}

.card-white-background {
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.card-green-background {
    background-color: #a9be2f;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.card-white-background h2 a {
    color: white;
    text-decoration: none;
}

    .card-white-background h2 a:hover {
        color: white;
        text-decoration: none;
        background-color: inherit;
    }

.card h3 {
    background-color: transparent;
}

.card-green .news-date {
    color: #b2c735;
}

/* card header colours */
.card h2 {
    background-color: #7f7e7e;
    color: #fff;
    border-top-right-radius: 0.167em;
    border-top-left-radius: 0.167em;
    font-size: 1.6em;
}

.integrity-card {
    border-style: solid;
    padding: 10px;
    margin: 10px;
    width: 465px;
    height: 100%
}

    .integrity-card h2 {
        line-height: 1.25;
        color: black;
    }

    .integrity-card header {
        display: inline-flex;
    }

#integrity-card-footer {
    margin-bottom: 0;
    padding: 1em 0 0;
}

.flex-row {
    display: flex; /* equal height of the children */
}

.flex-col {
    flex: 1; /* additionally, equal width */
    height: 80%
}

.card h3 span,
.card strong span {
    color: #7f7e7e;
}

.card-purple h3 span,
.card-purple strong span {
    color: #333;
}

.card-purple h2 {
    background-color: #903b7b;
    color: #fff;
}

.card-orange h2 {
    background-color: #f47321;
    color: #fff;
}

.card-blue h2 {
    background-color: #0695d0;
    color: #fff;
}

.card-gray h2 {
    background-color: #c0c0c0;
    color: black;
}

.card-green h2 {
    background-color: #a9be2f;
    color: #fff;
}

.card-purple h3 span,
.card-purple strong span {
    color: #903b7b;
}

.card-purple h3 span,
.card-purple strong span {
    color: #903b7b;
}

.card-orange h3 span,
.card-orange strong span {
    color: #f47321;
}

.card-orange h3 span,
.card-orange strong span {
    color: #f47321;
}

.card-blue h3 span,
.card-blue strong span {
    color: #0695d0;
}

.card-gray h3 span,
.card-gray strong span {
    color: #c0c0c0;
}

.card-blue h3 span,
.card-blue strong span {
    color: #0695d0;
}

.card-green h3 span,
.card-green strong span {
    color: #a9be2f;
}

.card-green h3 span,
.card-green strong span {
    color: #a9be2f;
}

.card h4 {
    font-weight: normal;
}

/* logotype things */
.logotype,
.card .logotype {
    color: #f47321;
}

.card .logotype-plain {
    font-weight: bold;
    color: #333;
}

.logotype-device {
    display: inline-block;
    border-radius: 50%;
    padding: 0 0.25em;
    line-height: 1;
    background-color: #fff;
}

.card-body .logotype-device {
    background-color: #f47321;
    color: #fff;
}

.card header .logotype-device {
    color: #7f7e7e;
}

.card-purple header .logotype-device {
    color: #903b7b;
}

.card-green header .logotype-device {
    color: #a9be2f;
}

.card-orange header .logotype-device {
    color: #f47321;
}

.card-blue header .logotype-device {
    color: #0695d0;
}

.card-gray header .logotype-device {
    color: #c0c0c0;
}

h1 .logotype-device {
    color: #f47321;
}

.logotype-plain .logotype-device {
    background-color: #333;
    color: #fff;
}

.orange-unread {
    color: #f47321;
}

/* Header */

h1 {
    padding-right: 1em;
    line-height: 2.2;
    margin-top: 0;
    margin-bottom: 1em;
    background-color: #696969;
}

/* sidebar dashboard */
.side-bar-container {
    margin-top: 2em;
}

.sidebar-row {
    display: flex;
}

.sidebar-content {
    flex: 81%;
    margin-right: 0;
}

.sidebar-bar {
    flex: 19%;
    margin-left: 1em;
}

@media (max-width: 70em) {
    .sidebar-row {
        display: inherit;
    }

    .sidebar-content {
        flex: none;
        margin-right: 0em;
    }

    .sidebar-bar {
        flex: none;
        margin-left: 0em;
    }
}

h1:empty {
    display: none;
}

.header-bar {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.3);
}

/* buttons */

.LinkButton {
    width: 1.5em;
    height: 1.5em;
    position: relative;
    top: 0.1em;
}

input.LinkText[type="submit"] {
    border: none;
    cursor: pointer;
    text-decoration: underline;
    background-color: transparent;
}

.ControlStateBackground .LinkButton {
    padding: 0 0.25em;
}

[type="button"],
[type="submit"] {
    border-radius: 5px;
    border: 1px solid #888;
    padding: 0.5em 0.75em;
    background-color: #eee;
    cursor: pointer;
    color: #333;
}

.cta {
    border-radius: 2px;
    border: 1px solid #888;
    padding: 0.5em 0.75em;
    background-color: #eee;
    text-decoration: none !important;
}

    .cta a:active,
    .cta a:hover,
    .cta a:focus {
        text-decoration: none;
    }

.cta-sms {
    border-radius: 4px;
    border: 1px solid rgb(200, 200, 200);
    padding: 0.5em 0.75em;
    background-color: rgb(200, 200, 200);
    text-decoration: none !important;
}

    .cta-sms a:active,
    .cta-sms a:hover,
    .cta-sms a:focus {
        text-decoration: none;
    }

.btn-icon {
    padding-left: 2em;
    background-repeat: no-repeat;
    background-position: 0.5em center;
    background-size: 1em;
}

.btn-icon-solo {
    background-repeat: no-repeat;
    background-position: 0.5em center;
    background-size: 1em;
    padding: 0.25em 1em;
}

.btn-icon-right {
    padding-left: 0.75em;
    padding-right: 2em;
    background-position: right center;
}

.btn-quick-add,
.btn-add {
    background-image: url(../Images/plus.svg);
}

.btn-ok {
    background-image: url(../Images/checkmark-round.svg);
}

.btn-check,
.btn-search {
    background-image: url(../Images/ios-search-strong-flipped.svg);
}

.btn-back {
    background-image: url(../Images/arrow-left-a.svg);
}

.btn-delete {
    background-image: url(../Images/close-round.svg);
}

.btn-cancel {
    background-image: url(../Images/android-cancel.svg);
}

.btn-filter {
    background-image: url(../Images/funnel.svg);
}

.btn-save {
    background-image: url(../Images/save.svg);
}

.btn-excel {
    background-image: url(../Images/excel-file.svg);
}

.btn-save-new {
    background-image: url(../Images/save-and-new.svg);
}

.btn-clear {
    background-image: url(../Images/ios-undo.svg);
}

.btn-generate {
    background-image: url(../Images/gear-a.svg);
}

.btn-calc {
    background-image: url(../Images/ios-calculator.svg);
}

.btn-podium {
    background-image: url(../Images/podium.svg);
}

.btn-refresh {
    background-image: url(../Images/loop.svg);
}

.btn-send {
    background-image: url(../Images/email.svg);
}

.btn-funnel {
    background-image: url(../Images/funnel.svg);
}

.btn-forward {
    background-image: url(../Images/arrow-right-a.svg);
}

.btn-down {
    background-image: url(../Images/arrow-down-a.svg);
}

.btn-vehicle {
    background-image: url(../Images/truck.svg);
}

.btn-person {
    background-image: url(../Images/person.svg);
}

.btn-card {
    background-image: url(../Images/card.svg);
}

.btn-whatsapp {
    background-image: url(../Images/whatsapp.svg);
}

.btn-sms {
    background-image: url(../Images/sms.svg);
}

[src*=".svg"] {
    width: 1.5em;
    height: 1.5em;
}

[type="radio"],
[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
}

input + input,
button + button {
    margin-left: 0.1em;
}

label {
    cursor: pointer;
}

/* dashboard card layout using flexbox */

.dashboard {
    padding: 0 1em 1em 1em;
    max-width: 122em;
    margin: 0 auto;
}

    .dashboard nav ul {
        flex-direction: column;
        position: absolute;
        left: 0;
    }

@media (min-width: 30em) {
    .dashboard-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -2em 0 -2em; /* minuses for gutter */
    }

    .sidebar-content .dashboard-row {
        margin: 0 -2em 0 -2em; /* minuses for gutter */
    }
}

.dashboard-row .card {
    flex: 0 1 22em;
    margin-right: 1em; /* for gutter */
    margin-left: 1em;
}

.dashboard .alert {
    margin-bottom: 1em;
}

.dashboard-section {
    border-radius: 0.5em;
    /*box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);*/
    padding: 2em 2em 0em 2em;
    margin-bottom: 1em;
    background-color: #efefef;
}

aside .dashboard-section {
    padding: 2em 1em 1em 1em;
}

.dashboard-section > h2 {
    background-color: inherit;
    padding-left: 0;
    font-size: 1.5em;
}

.dashboard nav h3 {
    padding: 0;
    font-size: 1.6em;
}

    .dashboard nav h3 a {
        background-color: transparent;
        color: black;
        padding: 0.25em 1.2em 0.25em 0.25em;
        width: auto;
        text-decoration: none;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: 55%;
        background-size: 0.5em;
        background-image: url(../Images/menu-down.svg);
        border-radius: 0.167em;
        border-color: transparent;
        border-style: dotted;
    }

        .dashboard nav h3 a:hover {
            border-color: lightgray;
            border-style: solid;
            background-color: transparent;
            /*background-color: #024;*/
        }

.dashboard .nav-promo h3 a {
    /*background-color: #f47321;*/
}

    .dashboard .nav-promo h3 a:hover {
    }

/* card layout */
.card,
.card > span[id*="_up"] /* update panels inside cards */ {
    display: flex;
    flex-direction: column;
}

    .card span[id*="_up"] /* update panels inside cards */ {
        flex-grow: 1; /* make them stretch to the height of the card */
    }

    .card footer,
    .card > span[id*="_up"] footer /* update panels inside cards */ {
        margin-top: auto;
        margin-bottom: 1em;
    }

    .card footer,
    .card nav {
        text-align: right;
    }

    .card p {
        margin-top: 0;
    }

.card-body ul {
    padding-left: 1em;
    margin-top: 0;
}

.card-body li {
    margin-bottom: 0.5em;
}

.card footer ul {
    margin-bottom: 0;
}

.card-body {
    padding: 1em 2em 0 2em;
}

.card footer {
    padding: 1em 1em;
}

.card h2 {
    margin-bottom: 0;
    padding: 0 1.5em;
}

.card h3 {
    background-color: transparent;
    padding-left: 0;
    padding-top: 0;
}

.card-noheader {
    padding-top: 2em;
}

.card-body h3 {
    line-height: 1.3;
}

.card {
    border: 2px solid inherit;
    border-radius: 0.25em;
}

/* notification markers */
.promo-unread {
    float: right;
    font-weight: bold;
    font-size: 1.25em;
    line-height: 2;
    margin-right: 1.6em;
}

.unread-count {
    display: inline-block;
    border-radius: 50%;
    padding: 0.25em 0.5em;
    line-height: 1;
    font-size: 120%;
    margin-top: 0.5em;
    margin-right: 0.5em;
    float: right;
    background-color: red;
    color: white;
}

/* page footer */

[role="contentinfo"] {
    padding: 2em;
}

    [role="contentinfo"] .row {
        max-width: 70em;
        margin: 0 auto;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    [role="contentinfo"] .card {
        flex: 1 0 20em;
    }

    [role="contentinfo"] h3 {
        padding-bottom: 0;
    }

/*clearfix*/

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.flexUl {
    display: flex;
    z-index: 1;
    position: absolute;
}

.flexUIItem {
    position: relative !important;
    min-width: 150px;
    margin: 0 !important;
}

.searchInputLoading {
    background-image: url("../Images/loading_16.gif");
    background-size: 1.5em 1.5em;
    background-position: right center;
    background-repeat: no-repeat;
}

/*text styling*/
.text-orange {
    color: #f47321 !important;
}

.text-blue {
    color: #0695d0 !important;
}

.text-gray {
    color: #c0c0c0 !important;
}

.text-green {
    color: #b2c735 !important;
}

.text-purple {
    color: #903b7b !important;
}

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

/*padding styling*/

.pr-1 {
    padding-right: 1em !important;
}

.pl-1 {
    padding-left: 1em !important;
}

.pb-1 {
    padding-bottom: 1em !important;
}

.pt-1 {
    padding-top: 1em !important;
}

/* card enhancements */

.card {
    transition: 0.15s all;
    border: 1px solid transparent;
}

.dashboard-row .card-wide {
    flex-basis: 46em;
    /*.card's 23em flex-basis * 2 + 1em margin * 2*/
}

.dashboard-row .card-full {
    flex-basis: 100%;
}

.card .cta {
    text-decoration: none;
    border-color: transparent;
}

.alert .cta {
    text-decoration: none;
    font-weight: bold;
}

.card-green .cta {
    background-color: #b2c735;
    color: #fff;
}

.card-grey .cta {
    background-color: #343a40;
    color: #fff;
}

.card-purple .cta {
    background-color: #903b7b;
    color: #fff;
}

/* make whole card clickable */

@media (min-width: 46em) {
    .card-with-cta-full-height {
        height: 100%;
        max-height: 135px;
        margin-bottom: 0em;
        margin-top: 10px;
    }
}


.card-with-cta {
    position: relative;
}

    .card-with-cta:hover {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        transform: scale(1.025);
    }

    .card-with-cta .cta:after {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .card-with-cta footer {
        text-align: center;
    }

/* bright cards - shared styles */

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

.card.card-bright h2 {
    background-color: transparent;
    padding-left: 0;
}

.card-bright .numerical {
    color: #fff;
}

.card-bright footer {
    text-align: center;
}

.card-bright .cta {
    background-color: #fff;
}

.card-bright a {
    color: #fff;
}

.card-bright h2 {
    font-size: 1.75em;
}

/* bright cards - colours */

.card-orange-bright {
    background-color: #f47321;
    color: #fff;
}

    .card-orange-bright .cta {
        color: #f47321;
    }

    .card-orange-bright.card-with-cta:hover {
        background-color: #d50;
    }

    .card-orange-bright.cta:hover {
        color: #d50;
    }

.card-green-bright {
    background-color: #b2c735;
    color: #fff;
}

    .card-green-bright .cta {
        color: #b2c735;
    }

    .card-green-bright.card-with-cta:hover {
        background-color: #890;
    }

    .card-green-bright.cta:hover {
        color: #890;
    }

.card-green-pastel {
    background-color: #869c5c;
    color: #fff;
}

    .card-green-pastel .cta {
        color: #869c5c;
    }

    .card-green-pastel.card-with-cta:hover {
        background-color: #869c5c;
    }

    .card-green-pastel.cta:hover {
        color: #869c5c;
    }

.card-blue-bright {
    background-color: #0695d0;
    color: #fff;
}

    .card-blue-bright .cta {
        color: #0695d0;
    }

    .card-blue-bright.card-with-cta:hover {
        background-color: #06a;
    }

    .card-blue-bright.cta:hover {
        color: #06a;
    }

.card-purple-bright {
    background-color: #903b7b;
    color: #fff;
}

    .card-purple-bright .cta {
        color: #903b7b;
    }

    .card-purple-bright.card-with-cta:hover {
        background-color: #615;
    }

    .card-purple-bright.cta:hover {
        color: #615;
    }

/* alt cards - muted */

.card-orange-alt {
    background-color: #fff;
    border: 1px solid #ccc;
}

.card.card-orange-alt h2 {
    background-color: transparent;
    color: #f47321;
    padding-left: 1.5em;
}

.card-orange-alt .card-body {
    padding-top: 0;
}

.card-orange-alt .cta:hover {
    background-color: #d50;
}

.card-orange-alt .cta {
    background-color: #f47321;
    color: #fff;
}

.card-green-alt li {
    text-align: center;
}

.card-grey-alt li {
    text-align: center;
}

.card-green-alt a {
    display: block;
}

.card-green-alt {
    background-color: #fff;
    border: 1px solid #ccc;
}

.card.card-green-alt h2 {
    background-color: transparent;
    color: #b2c735;
    padding-left: 1.5em;
}

/*new*/
.card-grey-alt {
    background-color: transparent;
    border: transparent;
    color: white;
}

.card.card-grey-alt h2 {
    background-color: transparent;
    color: white;
    padding-left: 1.5em;
}

.card-grey-alt h2 a {
    color: white;
}

.card-grey-alt .card-body {
    padding-top: 0;
}

.card-grey-alt li {
    text-align: center;
}

.card-grey-alt a {
    display: block;
    color: black;
}

    .card-grey-alt a:hover {
        display: block;
        background-color: #343a40;
        border-color: #343a40;
        color: white;
    }

.card-grey-alt .cta {
    background-color: rgb(200, 200, 200);
    color: black !important;
}

    .card-grey-alt .cta:hover {
        background-color: rgb(200, 200, 200);
        color: black;
    }

.card-grey-alt .card-body {
    padding-top: 0;
}

.card-green-alt .card-body {
    padding-top: 0;
}

.card-green-alt .cta:hover {
    background-color: #890;
}

.card-green-alt .cta {
    background-color: #b2c735;
    color: #fff;
}

.card-blue-alt {
    background-color: #fff;
    border: 1px solid #ccc;
}

.card.card-blue-alt h2 {
    background-color: transparent;
    color: #0695d0;
    padding-left: 1.5em;
}

.card-blue-alt h2 a {
    color: #0695d0;
    display: inline;
}

.card-blue-alt .card-body {
    padding-top: 0;
}

.card-blue-alt .cta:hover {
    background-color: #06a;
}

.card-blue-alt .cta {
    background-color: #0695d0;
    color: #fff;
}

.card-blue-alt li {
    text-align: center;
}

.card-blue-alt a {
    display: block;
}

.card-purple-alt {
    background-color: #fff;
    border: 1px solid #ccc;
}

.card.card-purple-alt h2 {
    background-color: transparent;
    color: #903b7b;
    padding-left: 1.5em;
}

.card-purple-alt h2 a {
    color: #903b7b;
}

.card-purple-alt .card-body {
    padding-top: 0;
}

.card-purple-alt .cta:hover {
    background-color: #615;
}

.card-purple-alt .cta {
    background-color: #903b7b;
    color: #fff;
}

/* highlight cards for marketing */

.card-orange-alt.card-highlight {
    outline: 3px solid #f47321;
    border-color: transparent;
    border-radius: 0;
}

.card-green-alt.card-highlight {
    outline: 3px solid #b2c735;
    border-color: transparent;
    border-radius: 0;
}

.card-grey-alt.card-highlight {
    outline: 3px solid #b2c735;
    border-color: transparent;
    border-radius: 0;
}

.card-purple-alt.card-highlight {
    outline: 3px solid #903b7b;
    border-color: transparent;
    border-radius: 0;
}

.card-blue-alt.card-highlight {
    outline: 3px solid #0695d0;
    border-color: transparent;
    border-radius: 0;
}

/* product cards */

.card-product {
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: center;
}

.card.card-product h2 {
    background-color: transparent;
    padding-left: 0;
    font-size: 1.75em;
}

.card-product .numerical {
    color: #f47321;
}

.card-product footer {
    text-align: center;
    margin-bottom: 1em;
}

.card-product .cta {
    background-color: #f47321;
    color: #fff;
    text-decoration: none;
    border-color: transparent;
}

    .card-product .cta:hover {
        background-color: #d50;
    }

.card .product-name {
    color: #0059ad;
}

    .card .product-name span {
        color: #f47321;
    }

.card-product .product-name .logotype-device {
    color: #fff;
    background-color: #f47321;
}

/* 2up cards */

.card-body .list-2up {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.list-2up li {
    flex: 0 0 45%;
    margin: 1em 0;
}

/* Hein's dropdown nav menus*/
.dropdown-nav li {
    display: inline-block;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.dropdown-nav ul {
    list-style: none;
    padding: 0.5em;
}

a.dropbtn:hover {
    background: #f9f9f9;
}

a.dropbtn {
    text-decoration: none;
    display: flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 15em;
}

    .dropdown-content a {
        padding: 12px 16px;
        width: calc(100% - 32px); /*100% minus the left and right padding*/
        color: black;
        text-decoration: none;
        display: inline-block;
        text-align: left;
        white-space: nowrap;
    }

        .dropdown-content a:hover {
            background-color: #EEEEFF;
            color: #333;
        }

.dropdown-menu {
    position: absolute;
    z-index: 1;
}

.dropdown-menu-left {
    position: absolute;
    z-index: 1;
    margin-left: -21em; /*100% minus the left and right padding*/
    max-height: 20em;
    overflow-y: auto;
}

.dropdown-content-visible {
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 20em;
}

    .dropdown-content-visible a {
        padding: 12px 16px;
        width: calc(100% - 32px); /*100% minus the left and right padding*/
        color: black;
        text-decoration: none;
        display: inline-block;
        text-align: left;
        white-space: normal !important;
    }

        .dropdown-content-visible a:hover {
            background-color: #EEEEFF;
            color: #333;
        }

.dropdown-content-visible-table a {
    display: inline-table !important;
}

.dropdown-nav:hover .dropdown-content {
    display: inline-block;
}

.spacer-10 {
    clear: both;
    padding-top: 10px;
}

.legend {
    font-weight: bold;
    height: 1.5em;
    float: left;
    font-size: 0.8em;
}

.legend-deleted {
    width: 18em;
    background-color: LightSalmon;
}

.legend-funded {
    width: 18em;
    background-color: #bed2f1;
}

.legend-not-authorised {
    width: 18em;
    background-color: LightGray;
}

.legend-has-transaction {
    width: 18em;
    background-color: lightgreen;
}