@charset "UTF-8";

#PageInformation {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-orange);
    display: none;
    margin: 5px 0 0;
    padding: 5px;
    position: absolute;
    z-index: 10;
}

ul#crumbs {
    background-color: var(--color-neutral-darkest);
    height: 47px;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 4px 0 0 22px;
    text-shadow: var(--shadow-text-light);
}

#crumbs li {
    background: url("/chrome/theme/Breadcrumb_arrow.png") no-repeat right center;
    color: var(--color-blue-lighter);
    float: left;
    line-height: 3.2em;
    list-style-type: none;
    padding: 0 25px 0 12px;
}

#crumbs li a {
    display: block;
}

#crumbs li a:link, #crumbs li a:visited {
    color: var(--color-blue-lighter);
}

#crumbs li.active {
    background: none;
    font-weight: 700;
    padding-right: 5px;
}

#crumbs img {
    padding-right: 10px;
}

#status {
    margin: 0 auto;
    max-width: 1595px;
    padding: 11px;
}

/* Quicksearch input */

#quicksearch {
    display: inline-block;
    margin-left: 150px;
}

/*#quicksearch img {
    padding-right: 0;
    cursor: pointer;
}*/

    #quicksearch:hover #quicksearchhelp {
        background-color: white;
        border-radius: var(--radius-large);
        display: block;
        font-size: 92%;
        margin: -12px 0 0 307px;
        padding: 10px;
        position: absolute;
        top: 25px;
        visibility: visible;
        width: 250px;
        box-shadow: var(--shadow-box-white-large);
    }

#quicksearchhelp {
    display: none;
    font-weight: 400;
    visibility: hidden;
    z-index: 1000;
}

#quicksearchtypeselector { height: 100%; }

#quicksearchtypeselector:hover {
    cursor: pointer;
    height: 100%;W
}

#selectedquicksearchtype { margin-right: -6px; }

#quicksearchinput {
    background-color: var(--color-neutral-lightest);
    background-image: url("/chrome/theme/icons/16x16/16_top_bar_magnifying_glass.png");
    background-position: right 10px center;
    border: none;
    border-radius: var(--radius-large);
    box-shadow: inset 1px 1px 5px rgb(0 0 0 / 40%), 0px 0px 0px 1px rgb(0 0 0 / 10%);
    margin-top: 5px;
    padding: 5px 20px 5px 10px;
}

#quicksearchmenu {
    background-color: var(--color-neutral-lightest);
    border-radius: var(--radius-large);
    border-top: var(--border-standard);
    display: none;
    margin-left: 250px;
    padding: 8px;
    position: absolute;
    text-align: left;
    width: 180px;
    box-shadow: var(--shadow-box-white-large);
}

.quicksearchitem {
    cursor: pointer;
    padding: 3px;
}

#quicksearchstart { cursor: pointer; }

.quicksearchitem:hover { background: var(--color-blue-lighter); }

/* DROPDOWN BUTTON STYLES*/

.dropdowns { float: right; }

div.dropdown {
    background-image: url("/chrome/theme/baptop_divider.png");
    background-position: left;
    background-repeat: no-repeat;
    display: inline-block;
    height: 40px;
    margin-right: 10px;
    padding-left: 10px;
}

a.dropdown {
    display: inline-block;
    margin-top: 5px;
    padding: 0.4em 0.3em 0.4em 1em;
    text-decoration: none !important;
}

a.dropdown .ui-icon {
    display: inline-block;
    left: 1px;
    margin-top: -8px;
    position: relative;
    top: 3px;
}

ul.dropdown {
    z-index: 2000;
    display: none;
    list-style-type: none;
    margin: 6px 0 0;
    overflow: hidden;
    padding: 1em;
    position: absolute;
    border: none;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-box-white-large);
}

ul.dropdown a img {
    width: 24px;
    height: 24px;
    margin: 1px 0;
}

ul.dropdown a img:hover {
    opacity: .8;
}

/* END DROPDOWN BUTTON STYLES*/

ol#taskLog {
    list-style-position: inside;
    padding-left: 0;
}

ol#taskLog li {
    border-top: var(--border-standard);
    margin: 0;
    padding: 1.1em 0 1.1em 0;
    width: 100%;
}

#taskStatus .IN_PROGRESS, #taskStatus .DONE {
    background-color: var(--color-green);
    color: white;
    padding: 3px;
}

#taskStatus .FAILED {
    background-color: var(--color-red);
    color: white;
    padding: 3px;
}

#taskStatus .NOT_STARTED { }

.AccessAddressDetails .Item { width: 18em; }

.AccessAddressDetails fieldset.Fieldset, .AccessAddressDetails fieldset.Fieldset div.Header { width: 35em; }

.CaseBody {
    background-color: Transparent;
    margin: 0;
    padding: 0;
}

.Column {
    background: white;
    border: var(--border-standard);
    float: left;
    margin: .5em;
    min-height: 30em;
    min-width: 20em;
    padding: 1em;
    width: 28%;
}

.Column > .SubContentContainer:first-child > h2 { margin-top: 0; }

.ContentContainer {
    overflow: auto;
    padding: 1em;
    width: 96%;
}

.ContentContainer + .ContentContainer { margin-top: 1em; }

.EmailBody {
    border: var(--border-dark);
    height: 25em;
    margin: 1em;
    overflow: auto;
    padding-left: 1em;
    width: 60em;
}

.EmailBodyEditor {
    font-size: 1em;
    font-weight: 400;
    height: 25em;
    text-align: left;
    width: 40em;
}

.FieldSetContainer, .TransparentContainer {
    background-color: Transparent;
    border: none;
    padding: 0px;
    margin: 0px; 
    padding-top: 0.5em; 
}

.FieldSetContainer a {
    font-weight: 600;
    text-decoration: none;
}

.FieldSetContainer a:hover {
}


.Item {
    float: left;
    line-height: 1.6em;
    margin: 0;
    overflow: hidden;
    padding-right: .8em;
    text-align: left;
    white-space: nowrap;
    width: 12em;
}

.Pane, .pane, fieldset.Pane, .paddingpane {
    background-color: var(--color-neutral-lighter);
    border: 1px solid transparent;
    box-shadow: var(--shadow-box-neutral);
    margin: 0;
}

.paddingpane { padding: 10px; }

.SubContentContainer h4 { font-size: 100%; }

.TextInputInheritValueCheckbox div.ValueHorizontal {
    line-height: normal;
    padding: 0;
}

.TextInputInheritValueCheckbox label.ItemHorizontal, form { margin: 0; }

.TimeSpanInput input, .TimeSpanInput select {
    display: inline;
    width: 100px;
}

.TimeSpanInput .TimeSpanErrorMessage {
    color: var(--color-red);
    float: none;
    font-weight: 600;
    margin-left: 12.5em;
}

.NavItem, .ErrorMessage span.help { display: none; }

.Toolbar label {
    display: inline;
    margin-right: .5em;
}

.Toolbar .bool {
    display: inline;
    margin-right: .5em;
}

.TopPanel {
    background-color: Transparent;
    margin-top: 1.5em;
    padding: 0;
}

.TransparentPanel {
    background-color: Transparent;
    border: none;
    margin: .5em 0;
    padding: 0;
}

.view-email:hover {
    cursor: pointer;
    text-decoration: underline;
}

.WhitePanelWithBorder {
    background-color: var(--color-neutral-lighter);
    border: none;
    margin: 0;
    padding: 0;
}

.ui-datepicker-buttonpane button { min-width: 6em; }

.buttonbar {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--color-bluish-grey-dark);
    padding: 8px 0px 0px 32px;
}

.buttonbar span.caption {
    border-top: var(--border-dark);
    font-size: 1.2em;
    font-weight: 700;
    height: 2em;
    padding-left: 1em;
    padding-top: 0.4em;
    text-align: left;
}

.col3 {
    float: left;
    width: 30%;
}

.error { color: var(--color-red); }

.errorpane, .warningpane, .alertpane, .notificationpane, .informationpane, div.infopane {
    font-weight: 600;
    margin: 5px 0;
    padding: 15px;
    border-radius: var(--radius-large);
    border: var(--border-standard);
    text-shadow: var(--shadow-text-dark);
}

.warningpane {
    color: var(--color-neutral-darkest);
    background-color: var(--color-yellow-light);
}

.errorpane, .alertpane {
    color: var(--color-red-dark);
    background-color: var(--color-red-light);
}

.errorpane ul {
    text-align: left;
}
.informationpane, div.infopane {
    background-color: var(--color-blue-light);
}

.notificationpane {
    background-color: var(--color-green-light);
}

fieldset.search {
    background-color: transparent;
    border: none;
    display: inline-block;
    vertical-align: top;
}

fieldset.search label { display: block; }

fieldset.search div.bool { margin-top: 1.7em; }

fieldset.float { float: left; }

.filterbar label, .gridbar label {
    display: inline-block;
    margin-right: 5px;
}

.headerbar, .filterbar, .buttonbar, .gridbar {
    background-color: var(--color-neutral-lighter);
    box-shadow: var(--shadow-box-neutral);
    padding: 8px 8px 8px 20px;
}

.filterbar { margin-bottom: 0; }

.gridbar {
    border-bottom: none;
    margin-bottom: 0;
}

.gridbar .separator {
    color: var(--color-neutral-lighter);
    margin: 0 5px;
}

.buttonbar { margin-bottom: 0; }

.hiddentext { color: var(--color-neutral); }

.info { color: blue; }

.information {
    background: #FFF url(images/information.png) no-repeat;
    border-color: var(--color-primary-lighter);
}

.lheader { margin-left: 8px; }

.systemNote {
    background: var(--color-yellow-light);
    border: solid 1px var(--color-red);
    margin-bottom: 3px;
    padding: 3px;
}

a abbr, a acronym {
    border: 0;
    cursor: inherit;
}

a img {
    border: 0;
    vertical-align: middle;
}

a, a:visited {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    opacity: 0.8;
}

a.disabled, a.disabled:hover {
    color: var(--color-neutral-dark);
    text-decoration: none;
}

a.high {
    background: var(--color-button-light);
    color: var(--color-link-dark);
    text-shadow: var(--shadow-text-dark);
    font-weight: 600;
    text-decoration: none;
    margin: 0px 5px 5px 0px;
    padding: 6px 12px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-button);
}

a.high:hover {
    background-color: rgb(0 50 100 / 1%);
}

a.eventcaptionlink {
    font-weight: 600;
    text-decoration: underline;
}

span.help {
    display: inline-block;
    position: relative;
}

span.check span.help { display: inherit; }

div.bool label span.help { display: inline; }

span.help span.label {
    color: #000;
    font-weight: 600;
}

label.formfieldlabel a { margin-bottom: 0; }

label.error span.help span { color: var(--color-red); }

span.help span.description {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-orange);
    display: none;
    font-size: 93%;
    font-weight: normal;
    margin: -12px 0 0 -15px;
    padding: 5px;
    position: absolute;
    top: 30px;
    width: 250px;
    z-index: 2000;
}

span.help span.description.widehelp { width: 500px; }

span.help span.informationicon {
    background: url(images/information.png) no-repeat right center;
    padding-right: 15px;
}

span.informationicon:hover {
    filter: brightness(1.2);
    cursor: pointer;
}

/*jquery.powertip*/
    #powerTip {
        max-width: 1000px;
        white-space: normal;
    }

#powerTip a {
    color: var(--color-bluish-grey-light);
}
    /* REMOVE FORMATTING FOR VALIDATION SUMMARY */

    div > ul > li span.help {
        display: inline;
    }

    div > ul > li span.help > span {
        color: var(--color-red);
    }

    div > ul > li span.help:after {
        content: normal;
    }
    /* END REMOVE FORMATTING FOR VALIDATION SUMMARY */

    a.high, div.EventList li a.bold, ul.wizard li.current, label {
        font-weight: 600;
    }

    dt {
        font-weight: 600;
    }


    abbr, acronym, dfn {
        border-bottom: 1px dotted;
        cursor: help;
    }

    div.Bottom { /*border-top: solid 1px #80a0b3;*/
    }

.emaileditor textarea, .emaileditor .EmailSubject {
    width: 45em;
}

div.CaseDisplay {
    padding: 0px 12px 0px 8px;
    border-radius: var(--radius-standard);
    background: var(--color-neutral-lightest);
    margin: 5px 10px 10px 0;
    border: var(--border-standard);
}

    div.CaseDisplay label.Item {
        width: auto;
        min-width: 6em;
        padding-left: 1em;
    }

    div.container casedisplay {
        margin: 0px;
    }

    div.Container {
        clear: none;
        margin: .5em 0 .2em;
    }

    div.Container span.help {
        display: block;
    }

    div.ContainerButton {
        text-align: right;
    }

    div.ContainerHorizontal div.TextInputAdjustment {
        clear: none;
        display: inline;
    }

    div.ContainerHorizontal input.TextInput {
        display: inline;
        float: none;
    }

    div.ContainerHorizontal, .ContainerHorizontal label, div.bool label, span.radio label {
        display: inline;
    }

    div.ControlContainer {
        background: transparent;
        padding: .75em;
    }

div.CrmErrorPane {
    background: var(--color-red-light);
    border: solid 1px var(--color-red);
    border-left: 0;
    border-right: 0;
    padding: .7em;
    text-align: center;
}

    div.DescriptiveList ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0 1em;
    }

    div.EmailDisplayMargin { 
        margin-left: 33px; 
    }

.mail-body-panel {
    background: #fff;
    border: var(--border-standard);
    border-radius: var(--radius-large);
    max-height: 600px;
    overflow-y: auto;
    word-break: break-word;
    padding: 12px 0px 8px 14px;
}

div.EmailDisplayToolbar {
    padding: 6px 6px 6px 12px;
    font-weight: 600;
}

div.EmailDisplay label.Item {
    width: 9em;
}

div.ErrorMessage {
    clear: both;
    color: var(--color-red);
    float: left;
    font-weight: 700;
    width: 30em;
}

    div.ErrorPane {
        background: var(--color-red-light);
        border: 2px solid var(--color-red);
        clear: both;
        margin: 1em;
        padding: .5em;
        text-align: left;
    }

    div.ErrorPane li, div.InfoPane li {
        text-align: left;
    }

    div.EventList {
        clear: both;
    }

    div.EventList li ul.collapsed {
        display: none;
        margin-left: 8px;
    }

    div.EventList li {
        border: none;
        margin: 0;
        padding: .3em;
        text-align: left;
    }

    div.EventList li a {
        text-decoration: none;
        width: auto;
    }

    div.EventList li a em {
        font-style: normal;
        font-weight: 400;
    }

    div.EventList li a.current, div.EventList li a.current:hover {
        background-color: Transparent;
        font-weight: 700;
    }

    div.EventList li a:hover {
        color: var(--color-link-hover);
    }

    div.EventList li ul.expanded {
        clear: both;
        display: block;
    }

    div.EventList ul {
        list-style: none;
        margin: 0;
        padding: .3em 0em .5em .5em;
    }

div.InfoPane {
    background: var(--color-blue-light);
    border: 2px solid var(--color-blue);
    clear: both;
    margin: 1em;
    padding: .5em;
    text-align: center;
}

    div.MenuBar {
        background-color: white;
        border: solid 1px black;
        margin: 0;
        padding: 0;
    }

    div.MenuBar li a img, ul.Tabs li a img, ul.SubTabs li a img {
        margin-right: .5em;
    }

    div.MenuBar li a, ul.ListMenu li a {
        color: black;
        display: block;
        padding: 10px;
        text-decoration: none;
        width: auto;
    }

    div.MenuBar li a.current, div.MenuBar li a.current:hover, div.Wizard li a.current, div.Wizard li a.current:hover, ul.ListMenu li a.current, ul.ListMenu li a.current:hover {
        background-color: white;
        color: black;
        font-weight: 600;
        box-shadow: var(--shadow-box-white);
    }

    div.MenuBar li a:hover, ul.ListMenu li a:hover {
        background-color: White;
        box-shadow: var(--shadow-box-white-inset);
    }

    div.MenuBar li ul {
        font-size: 84%;
        line-height: .7;
        padding-left: 2.5em;
    }

    div.MenuBar li, div.Wizard li {
        border: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    div.MenuBar ul, div.Wizard ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

div.PaneBar {
    background: url(/chrome/images/menu_bg.png) top left repeat-x;
    clear: both;
    color: var(--color-bluish-grey-dark);
}

    div.PaneBar label {
        display: inline;
        margin-right: 8px;
    }

    div.Template {
        padding: .5em;
    }

    div.Template div.Content {
        margin-bottom: .5em;
        margin-left: 14.5em;
        padding: .5em;
    }

    div.Template div.Navigation {
        float: left;
        text-align: center;
        width: 14em;
    }

div.TemplateInstance {
    background: var(--color-neutral-lightest);
    border: var(--border-standard);
    padding: 10px;
}

div.Toolbar {
    color: var(--color-bluish-grey-dark);
    padding: 1em 1em;
}

    div.TransparentToolbar {
        background: transparent;
        border: medium none inherit;
        margin: .5em;
        padding: .25em;
    }

    div.Bottom {
        clear: both;
    }

    div.UnitFilterDisplay label.Item {
        width: 8em;
    }

    div.Value {
        display: inline-block;
        float: none;
        line-height: 1.6em;
        overflow: hidden;
    }

    div.ValueHorizontal {
        display: inline;
        line-height: 2em;
    }

    div.ValueHorizontal div {
        display: inline;
    }

    div.Wizard {
        background-color: white;
        border: solid 1px #000;
        height: auto;
        margin: 0;
        padding: 0;
    }

    div.Wizard li a {
        color: #000;
        display: block;
        padding: 5px;
        text-decoration: none;
        white-space: nowrap;
        width: auto;
    }

    div.bool {
        margin: 0.5em 0 0.2em 1em;
    }

    span.check label, span.check input {
        vertical-align: middle;
    }

    div.bool input {
        margin-left: 0;
        margin-right: 4px;
    }

div.eventbody {
    color: #000;
    padding: 10px;
    font-weight: 400;
    margin-left: 14px;
    max-width: 700px;
    border-radius: var(--radius-large);
    background-color: rgb(0 50 100 / 3%);
    box-shadow: var(--shadow-box-neutral-inset);
}

    div.padding {
        padding: 1em;
    }

    div.serviceColumn {
        background: #FFF none repeat scroll 0 0;
        border: var(--border-standard);
        float: left;
        margin: 1% 0 .5% 1%;
        min-height: 20em;
        min-width: 20em;
        padding: 0 1em 1em;
        width: 29%;
    }

    option.campaign, span.campaign {
        background-image: url("/img/icons/tiny-star.png");
        background-position: right;
        background-repeat: no-repeat;
        padding-right: 14px;
    }

    span.campaignLegend {
        background-position: left;
        padding-left: 14px;
        padding-right: 0px;
    }

    div.serviceServiceModels {
        background: #FFF none repeat scroll 0 0;
        border: var(--border-standard);
        float: left;
        margin: .5% 0 1% 1%;
        min-height: 20em;
        min-width: 20em;
        padding: 0 1em 1em;
        width: 94%;
    }

div.subtitle {
    border-radius: var(--radius-standard) var(--radius-standard) 0px 0px;
    height: 25px;
    font-weight: 600;
    margin: -14px -8px 8px -8px;
    font-size: 1em;
    padding: 10px 50px 2px 15px;
    background: var(--gradient-header);
    box-shadow: var(--shadow-header-dark);
}

    div.wizard {
        padding: 1em 1em 1em 0;
    }

    dl.KeyValueList dt {
        float: left;
        line-height: normal;
        width: 50%;
    }

    em.RadioDescription {
        display: block;
        margin-bottom: 0;
        margin-left: 2em;
        padding: 0;
    }

fieldset.AdmPageHeader {
    background: url(/chrome/images/menu_bg.png) top left repeat-x;
    border: 1px solid var(--color-bluish-grey);
    margin: 0 0 1em;
    padding: 0;
}

    fieldset.Fieldset {
        background-color: transparent;
        border: none;
        float: left;
        margin: 0;
        padding: .5em;
    }

fieldset.Fieldset div.Header {
    display: block;
    float: none;
    font-weight: 700;
    padding: .25em;
    background: var(--gradient-header);
}

form em.Description {
    color: var(--color-bluish-grey);
    font-style: italic;
    font-weight: 400;
    padding: 0;
}

    .SubContentContainer h3 {
        font-size: 110%;
    }

    img, div.EventList li img {
        padding-right: 6px;
        vertical-align: middle;
    }

    img.toggle:hover {
        cursor: pointer;
        opacity: 0.7;
    }

    .toggleLink:hover {
        opacity: 0.7;
    }

    input.Radio {
        margin-right: .5em;
        padding: 0;
        text-align: center;
        width: 1em;
    }

    input.TextInput {
        float: left;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        font-weight: 400;
        text-align: left;
        width: 15em;
    }

    input[type=radio], input[type=checkbox], .buttonbar input, .filterbar input, .gridbar input {
        width: auto;
        cursor: pointer;
    }

input[type="file"] {
    border: none;
}

input[type=submit], input[type=button], button {
    margin: 0px 8px 8px 0px;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-large);
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    min-width: 9em;
    padding: .5em .9em;
    text-align: center;
    text-decoration: none;
    width: auto;
    font-weight: 700;
    box-shadow: var(--shadow-button-dark);
    text-shadow: var(--shadow-text-light);
}

.button-green {
    background-color: var(--color-green) !important;
}

.button-red {
    background-color: var(--color-red) !important;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
    background-color: var(--color-primary-hover);
}

input[type=submit]:active, input[type=button]:active, button:active {
    background-color: var(--color-primary-lighter);
}



    input[type=submit].btn-on {
        background: linear-gradient(90deg, #5cb85c 50%, #e6e6e6 50%);
        border: 1px solid;
        border-color: #adadad;
        padding-left: 1.5em;
        text-align: left;
    }

    input[type=submit].btn-off {
        background: linear-gradient(90deg, #e6e6e6 50%, #d9534f 50%);
        border: var(--border-dark);
        padding-right: 1.5em;
        text-align: right;
    }

input[type=submit]:disabled, input[type=button]:disabled, button:disabled {
    cursor: not-allowed;
    opacity: .65;
    background-color: var(--color-primary);
}

    select, input {
        font-size: 1em;
        font-weight: normal;
        padding-left: 2px;
        border: var(--border-standard);
        /* outline: none; */
    }

        input[type=text], input[type=password], input[role=textbox], select, textarea {
            background: #FFF no-repeat scroll 0 0;
            box-shadow: var(--shadow-box-input);
            border: var(--border-standard);
            padding: 2px 3px;
            margin: 0px 8px 8px 0px;
        }

    input[disabled][type=text], input[readonly], select[disabled], select[readonly], input[disabled][type=checkbox], textarea[disabled], textarea[readonly] {
        background: var(--color-neutral);
        cursor: default;
    }

    kbd.Shift {
        padding-right: 1.2em;
    }

    .provisioningTemplateSelector label {
        display: block;
        padding-bottom: 0;
        padding-top: 15px;
    }

    label.ErrorText {
        color: var(--color-red);
    }

    label.ItemHorizontal {
        font-weight: 600;
        margin-left: 1em;
    }

    label.Radio {
        display: block;
        font-weight: 700;
        margin-left: .5em;
    }

    label.error span.help {
        color: var(--color-red);
    }

    select.Select {
        background-color: #FFF;
        font-size: 1em;
        font-weight: 400;
        width: 15em;
    }

    span.eventcaption, span.eventtext {
        color: #000;
        font-weight: 400;
    }

    span.eventdate {
        color: Gray;
        font-size: .8em;
    }

    .summary {
        font-weight: bold;
    }

    ul.Bar {
        background-color: #fff;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    ul.Bar li {
        background-color: var(--color-neutral-light);
        border: none;
        font-weight: 400;
        margin: 0 0 1px;
        padding: 0;
        text-align: left;
        white-space: nowrap;
    }

ul.Bar li a {
    border: 1px solid #FFF;
    border-bottom-color: var(--color-neutral);
    border-right-color: var(--color-neutral);
    display: block;
    font-weight: 400;
    padding: 2px 5px 2px 30px;
    text-decoration: none;
    width: auto;
}

ul.Bar li a.current, ul.Bar li a.current:hover {
    border: var(--border-dark);
    border-bottom-color: var(--color-primary);
    border-right-color: var(--color-primary);
    font-weight: 700;
}

    ul.Bar li a:hover {
        background-color: var(--color-neutral-light);
    }

    ul.Bar li img {
        margin: 2px 5px;
        vertical-align: middle;
    }

    ul.Bar li.Inactive {
        background: var(--color-neutral);
        border-bottom: 0;
        border-top: solid 1px #fff;
        margin: 0 0 1px;
        padding: 0 6px 0 0;
    }

ul.Bar li.Inactive a {
    background: var(--color-neutral);
    border: 0;
    display: block;
    font-weight: 700;
    margin: 0;
    padding: 4px 4px 4px 10px;
    text-decoration: none;
}

ul.Bar ul li a.current, ul.Bar ul li a.current:hover {
    border: var(--border-dark);
    border-bottom-color: var(--color-primary);
    border-right-color: var(--color-primary);
    font-weight: 400;
}

    ul.ListMenu {
        list-style: none;
        margin: 0;
        padding: 8px;
    }

    ul.ListMenu li {
        border: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    ul.ListMenu ul ul, ul.ListMenu li ul {
        margin-left: 1em;
    }

    ul.SubTabs {
        list-style: none;
        margin: 0;
        padding: 2px 0;
    }

    ul.SubTabs li {
        border: none;
        display: inline;
        float: none;
        margin: .4em .2em .2em 0;
        text-align: center;
    }

ul.SubTabs li a {
    color: var(--color-bluish-grey-dark);
    display: inline;
    font-weight: 700;
    padding: .4em 1em;
    text-decoration: none;
    white-space: normal;
    width: auto;
}

    ul.SubTabs li a.current, div.SubTabs li a.current:hover {
        color: #000;
        font-weight: 700;
        background-color: #fff;
        box-shadow: var(--shadow-button);
    }

    ul.SubTabs li a.current:visited {
        color: #000;
    }

    ul.Tabs {
        list-style: none;
        margin: 10px 0 0px 8px;
        padding: 0;
    }

ul.Tabs li {
    border: none;
    display: inline-block;
    float: none;
    margin: 12px 0px;
    text-align: center;
}

    ul.Tabs li.current {
    }

    ul.Tabs li.current a {
        padding-top: 15px;
    }

ul.Tabs li a {
    border-radius: var(--radius-standard) var(--radius-standard) 0 0;
    background: var(--gradient-bluish-grey);
    color: #000;
    display: inline;
    font-weight: 600;
    padding: 12px 20px;
    text-decoration: none;
    text-shadow: var(--shadow-text-dark);
    white-space: normal;
    width: auto;
    box-shadow: var(--shadow-box-neutral-inset);
}

ul.Tabs li a.current, div.Tabs li a.current:hover {
    background: var(--color-neutral-lighter);
    box-shadow: var(--shadow-box-white-inset);
}

    ul.Tabs li a.current:visited {
    }

ul.Tabs li a:hover, ul.SubTabs li a:hover {
    background: var(--color-neutral-light);
    box-shadow: var(--shadow-box-white-inset);
}

    ul.Tabs li a:visited {
    }

    ul.wizard {
        background: #FFF;
        border: var(--border-standard);
        float: left;
        margin: 1em;
        padding-bottom: .5em;
        padding-left: 2em;
        padding-top: .5em;
        width: 12em;
    }

    ul.wizard li {
        margin-bottom: .5em;
        white-space: nowrap;
    }

    ul.Menu {
        background-color: Transparent;
        margin: 0.2em 0;
        padding: 0.2em 0.7em;
    }

    ul.Menu.Compact {
        margin: 0 0;
        padding: 3px 0px 4px 6px;
        box-shadow: var(--shadow-horisontal-divider);
    }

    ul.Menu ul {
        list-style: none;
        margin-bottom: -0.1em;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    ul.Menu li {
        border: none;
        color: var(--color-neutral-dark);
        text-shadow: var(--shadow-text-dark);
        display: inline;
        font-weight: 600;
        line-height: 2;
        margin: 0.4em;
        text-align: center;
        text-decoration: none;
        cursor: default;
    }

    ul.Menu.Compact li {
        line-height: 1;
        margin: 0.1em;
        padding: 0.15em;
    }

    ul.Menu.Compact li a:hover {
        background-color: var(--color-primary-hover);
        color: #fff;
    }


    ul.Menu li a img {
        margin-right: 0.5em;
    }

    ul.Menu li a {
        display: inline-block;
        line-height: initial;
        background-color: var(--color-primary);
        border: none;
        padding: 7px 10px;
        margin-bottom: 4px;
        color: #fff;
        text-shadow: var(--shadow-text-light);
        box-shadow: var(--shadow-button-dark);
        text-decoration: none;
        border-radius: var(--radius-standard);
    }
    
    ul.Menu.Compact li a {
        padding: 5px 6px;
    }

    ul.Menu li a:hover {
        background-color: var(--color-primary-hover);
    }

    ul.Menu li a.current,
    ul.Menu li a.current:hover {
        border: none;
        background-color: var(--color-neutral-light);
        text-shadow: var(--shadow-text-dark);
        color: var(--color-neutral-darker);
        font-weight: 700;
        box-shadow: var(--shadow-button);
    }

    ul.Menu li a.current:visited {
        /*border: none;*/
    }

    ul.inline {
        display: inline;
        margin: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    ul.inline li {
        display: inline;
        list-style: none;
        padding-right: 10px;
    }

    ul.inline li img {
        padding-right: 2px;
    }

    ul.inline li a {
        text-decoration: none;
    }


    div.areaContentContainer {
        overflow: auto;
    }

    div.header {
        background-color: var(--color-neutral);
        font-weight: bold;
        margin: 1em 0 0.5em 0;
        padding: 0.2em;
        width: 25em;
    }

    .ContainerHorizontalMargin {
        display: inline;
        margin-right: 5em;
    }

    ul.Tabs li .disabled {
        background: url(images/d_bg.png) top left repeat-x;
        border: var(--border-dark);
        border-bottom: none;
        color: var(--color-neutral-dark);
        display: inline;
        font-weight: bold;
        padding: 0.2em 1em;
        text-decoration: none;
        white-space: normal;
        width: auto;
    }

    div.engineContentContainer {
        overflow: auto;
    }

    div.engineContentContainer h4 {
        margin-left: 10px;
    }

    div.servertaskContentContainer {
        overflow: auto;
    }

    div.serverTaskColumn {
        background: #FFFFFF none repeat scroll 0 0;
        border: var(--border-standard);
        float: left;
        margin: 1em 0 0.5em 1em;
        min-width: 30em;
        padding: 0 1em 1em 1em;
    }

    span.status_1 {
        color: var(--color-green);
    }

    span.status_3 {
        color: var(--color-red);
    }

    div.ContentContainer a[disabled] {
        color: Black;
        text-decoration: none;
    }

    .addressfield {
        display: inline-block;
        margin-bottom: 0;
        margin-top: 0;
        min-width: 19em;
        vertical-align: top;
    }

    .addresses {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    span.enableInputs input {
        margin: 0;
        padding: 0;
        vertical-align: bottom;
        width: 1em;
    }

    .recentSearches {
        color: var(--color-neutral);
    }

    .recentSearches a {
        color: #fff;
    }

    #machine {
        background-color:  var(--color-neutral-darker);
        color: #FFFFFF;
        left: 0px;
        position: absolute;
        top: 0px;
    }

#rd, #querystats {
    background-color: var(--color-neutral-darker);
    color: #FFFFFF;
    left: 0px;
    position: absolute;
    top: 18px;
}

    #rd.alert {
        background-color: #FFFFFF;
        color: var(--color-red);
    }

    #querystats {
        top: 35px;
    }

    #querystats a {
        color: #fff;
    }

    #querystats span {
        display: inline-block;
        padding: 2px;
    }

    #querystats span.info {
        background-color: #BDE5F8;
        color: #00529B;
    }

    #querystats span.warn {
        background-color: var(--color-yellow-light);
        color: #9F6000;
    }

    #querystats span.error {
        background-color: #FFBABA;
        color: #D8000C;
    }

    #querystats span.fatal {
        background-color: #000000;
        color: var(--color-yellow);
    }

.dropdowns a span, ul.inline li span {
    cursor: pointer;
    color: var(--color-neutral);
    font-size: 1em;
    font-weight: bold;
    text-shadow: var(--shadow-text-light);
}

.dropdowns a span:hover {
    color: var(--color-neutral-light);
}

    .machinename {
        color: #000000;
        display: block;
    }

    .brikksVersion {
        color: #FFFFFF;
        font-size: 0.9em;
        font-weight: bold;
        margin-left: 201px;
        text-shadow: var(--shadow-text-light);
    }

    fieldset.overviewitem {
        display: inline-block;
        min-height: 16em;
        min-width: 13em;
        vertical-align: top;
    }

    fieldset.overviewitem img {
        max-height: 20em;
        max-width: 15em;
    }

    div.contenteditor {
        margin-bottom: 1em;
    }

    .contentedit {
        display: inline;
        vertical-align: top;
    }

    div.contenteditor .bool {
        float: left;
        margin-right: 5px;
    }

    .excelbutton {
        cursor: pointer;
        vertical-align: middle;
        width: auto;
    }

    .pane-button-bar {
        margin: 0 8px 4px 8px;
        padding: 0 8px 4px 8px;
    }

    .contentcover {
        background-color: White;
        filter: alpha(opacity=50); /* IE */
        opacity: 0.5; /* Safari, Opera */
        position: relative;
        z-index: 20;
    }


    /* ======== BRIKKS Help Wiki =========== */

    .brikkshelpactivator {
        background: url(/chrome/images/wiki-icon.png) no-repeat right center;
        cursor: pointer;
        padding: 0px 18px;
    }

.brikkshelpactivator:hover {
    filter: brightness(1.1);
}

    .no-entry {
        background: url(/chrome/images/wiki-icon-no-entry.png) no-repeat right center;
    }

    .entry-open {
        background: url(/chrome/images/wiki-icon-open.png) no-repeat right center;
    }

#brikkshelpheader .brikkshelpactivator {
    background: url(/chrome/images/wiki-icon-20.png) no-repeat right center;
    padding: 4px 16px;
}

.brikkshelpwiki {
    background-color: #ffffff;
    box-shadow: var(--shadow-box-neutral);
    /* border: var(--border-standard); */
    display: none;
    margin-bottom: 5px;
}

#brikkshelpheader {
    background: var(--gradient-header);
    box-shadow: var(--shadow-header);
    color: var(--color-neutral-darkest);
    font-weight: bold;
    padding: 14px;
    text-shadow: var(--shadow-text-dark);
}

    #brikkshelpbody {
        background-color: #fff;
        padding: 15px 25px;
    }

    #hidebrikkshelpwiki {
        display: inline;
        font-weight: normal;
        margin-left: 10px;
        text-shadow: none;
    }

    #brikkshelpeditarea {
        display: none;
    }

    #brikkshelplabel {
        font-size: 16pt;
        padding-left: 10px;
        text-shadow: none;
    }

    #articleinfo label {
        display: inline;
        font-weight: normal;
        padding-left: 2em;
        padding-right: 0.5em;
    }

    #articleinfo {
        display: none;
        text-shadow: none;
    }

    input.brikkshelpaction {
        width: auto;
    }

    #brikkshelparticle {
        max-height: 600px;
        overflow: auto;
    }

    #brikkshelperror {
        color: var(--color-red-dark);
        display: none;
        margin-top: 5px;
    }

.brikkshelpwiki .buttonbar {
    background-color: var(--color-neutral-lightest);
}

    img.inline_text {
        padding: 0;
    }

    #close_wiki {
        margin-left: -3px;
        margin-top: -3px;
        vertical-align: top;
    }

    fieldset.with_wikiactivator span.brikkshelpactivator {
        float: right;
        left: 8px;
        position: relative;
        top: -15px;
    }

    label.formfieldlabel span.brikkshelpactivator {
        float: none;
        left: auto;
        position: inherit;
        top: auto;
    }

div.ValidationSummary {
    background: var(--color-red-light);
    color: var(--color-red);
    text-shadow: var(--shadow-text-dark);
    border-radius: var(--radius-large);
    border: var(--border-standard);
    margin-bottom: 8px;
    overflow: hidden;
    font-weight: 600;
}

    .aspWizard {
        width: 100%;
    }

    .NoBullets {
        list-style: none;
    }
    /************************************************
/ Sevicemodeldetails page, campaign settings
************************************************/

    div.campain_enddate label {
        display: inline;
    }

    div.campain_duration {
        padding-bottom: 2px;
    }

    div.campain_duration input {
        float: left;
    }

    div.campain_duration div.TimeSpanInput label {
        padding-top: 4px;
    }
    /* END Sevicemodeldetails page, campaign settings */

    .date.hasDatepicker {
        margin-right: 2px;
    }
    /************************************************
/ COMBO SEARCH
************************************************/

    .ui-button {
        margin-left: -1px;
    }

    .ui-autocomplete-button {
        min-width: 5px;
        width: 25px;
    }

    .autocomplete-button {
        background-image: url(/chrome/theme/icons/16x16/application_view_list.png);
        cursor: pointer;
        display: inline-block;
        height: 16px;
        width: 16px;
        margin: 0 6px 0 2px;
    }

.autocomplete-button:hover {
    filter: brightness(1.2);
}

    .ui-button-icon-only.ui-autocomplete-button .ui-button-text {
        padding: 0px;
    }

.ui-autocomplete-input, .subpane .ui-autocomplete-input {
    width: 203px;
    margin: 0 0 8px 0px;
    background-color: #FFFFFF;
    border: var(--border-standard);
    box-shadow: var(--shadow-box-input);
    padding: 2px 3px;
}

.ui-autocomplete-input.standardWidth, .subpane .ui-autocomplete-input.standardWidth {
    width: 220px;
}

    .ui-autocomplete {
        max-height: 250px;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .ui-menu .ui-menu-item a {
        min-height: 1em;
    }
    /* END COMBO SEARCH */

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Open Sans', 'Open Sans Local Fallback', sans-serif;
    text-shadow: none;
    box-shadow: none;
}

.ui-widget-content {
    height: auto;
}

table.BrikksGridView tbody > tr.odd {
    background-color: #FFFFFF;
}

    table.BrikksGridView tbody > tr.even {
        background-color: var(--color-neutral-lightest);
    }

    div.bottomBorder {
        border-bottom: var(--border-dark);
        margin-right: 7px;
    }
    /* Gridview customer move  */

    .gridMove {
        width: 100%;
    }

.gridMove td {
    border: var(--border-dark);
    padding: 2px;
}

.gridMove th {
    background: var(--color-bluish-grey);
    border-left: var(--border-dark);
    color: #fff;
    padding: 6px 2px;
}


    .map-dialog-icon {
        background-image: url('/chrome/theme/icons/map_black.png');
        cursor: pointer;
        display: inline-block;
        height: 20px;
        width: 20px;
    }

    .status-btn-icon {
        background-image: url('/chrome/theme/icons/pageview_black.png');
        cursor: pointer;
        display: inline-block;
        vertical-align: text-bottom;
        margin-right: 0.3em;
        height: 17px;
        width: 20px;
    }


.ui-datepicker-trigger { cursor:pointer; }

.map-dialog-icon:hover {
    opacity: 0.8;
}
    /* Reset the margin and width for tiny mce buttons*/

    .subpane .mce-btn button, .mce-reset button, .mce-btn button {
        margin: 0;
        min-width: 0;
    }

    table.BrikksGridView td.warning {
        color: var(--color-red);
    }
    /* Adjustments to the toaster */

    .toast button {
        min-width: auto;
    }

    .subpane .excel-button {
        background-image: url('/chrome/theme/icons/excel.png');
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 40px;
    }
    /* Checkered background for content images*/
    .subpane img.picturecontrolimage {
        background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb 100%), linear-gradient(45deg, #bbb 25%, white 25%, white 75%, #bbb 75%, #bbb 100%);
        background-position: 0 0, 5px 5px;
        background-size: 10px 10px;
        margin: 16px 8px 16px 0;
        max-width: 800px;
        padding: 0;
    }

/*================= 505 Error page =================*/
#enduserinfo {
    background: var(--color-blue-light);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-box-white-large);
}

#developerInfo {
    width: max-content;
    margin: auto;
    font-size: smaller;
    opacity: 0.7;
    background: var(--color-neutral-lighter);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-box-white-large);
}
/*================= end 505 Error page =================*/


#extended, a.brikks-link {
    cursor: pointer;
    background: var(--color-button-light);
    color: var(--color-link-dark);
    text-shadow: var(--shadow-text-dark);
    text-decoration: none;
    margin: 0px 8px 4px 0px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-button);
}

#extended, a.brikks-link:hover {
    background: var(--color-neutral-lightest);
}

.nobr {
    white-space: nowrap;
}

#dashboard-icon-container {
    padding: 5px 14px 18px 15px;
    display: flex;
    align-items: center;
}

/*================= SVG icons =================*/
/* The usual CSS colors doesn't work on SVGs. An overlay filter is used instead. */
/* SVG overlay color generator: https://codepen.io/cassie-codes/pen/ebEexL/561304e31eb955362b8d850d7eb7500e */
/* It's not possible to stack filters so any drop-shadow filter must be included in the color overlay */

.svg-icons {
    height: 24px;
    filter: invert(0.4) sepia(1) saturate(0) hue-rotate(0deg); /*Overlay color gray*/
}

.svg-icons.light-green {
    filter: invert(0.5) sepia(1) saturate(3) hue-rotate(110deg) brightness(1.0) drop-shadow(1px 1px 1px #fff);
}

.svg-icons.dark-green {
    filter: invert(0.5) sepia(1) saturate(3) hue-rotate(110deg) brightness(0.5) drop-shadow(1px 1px 1px #fff);
}

.svg-icons.blue-white-shadow {
    filter: invert(0.4) sepia(1) saturate(2) hue-rotate(180deg) brightness(1.1) drop-shadow(1px 1px 1px #fff);
}

.svg-icons.blue-black-shadow {
    filter: invert(0.4) sepia(1) saturate(2) hue-rotate(180deg) brightness(1.1) drop-shadow(1px 1px 2px #222);
}

.svg-icons.big {
    height: 45px;
    filter: invert(0.5) sepia(1) saturate(1) hue-rotate(185deg) brightness(0.8) drop-shadow(1px 1px 1px #fff);
    padding: unset;
}

/*================= end SVG icons =================*/

.avatar {
    border-radius: 50%;
}