/* Minification failed. Returning unminified contents.
(2330,8): run-time error CSS1030: Expected identifier, found '.'
(2330,12): run-time error CSS1031: Expected selector, found ')'
(2330,12): run-time error CSS1025: Expected comma or open brace, found ')'
 */
html {
    margin: 0;
    padding: 0;
    background-color: white;
}

body {
    background-color: #fff;
    /* color: #333; */
    font-size: .85em;
    font-family: /*Roboto,*/ "Segoe UI", Verdana, Helvetica, Sans-Serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    position: relative;/* jQuery UI pop-ups need this */
}

body.adminInterface {
    background-color: white;
}

@media print {
    body.adminInterface {
        font-size: 70%;
    }
}

iframe {
    border: none;
}

/* global margins */

p, table, ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p.rightAligned, td.rightAligned, th.rightAligned {
    text-align: right;
}

a {
    color: #333;
    outline: none;
    /* padding-left: 3px;
    padding-right: 3px; */
    text-decoration: underline;
}

a.spaced-link {
    padding: 0.7em 1em;
}

a:link, a:visited,
a:active, a:hover {
    color: #333;
}
 
a:hover {
    background-color: #c7d1d6;
}

ul {
    margin: 0 0 0.5em 0; /* was 1em bottom */
}

header, footer, hgroup,
nav, section {
    display: block;
}

.nav-header {
    position: relative;
}

.nav-header .nav {
    position: absolute;
    right: 1em; top: 0;
}

.nav-header a {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

div.float-right {
    display: inline-block;
}

.float-right ul, .float-right p, .float-right div {
    margin-right: 0.5em;
}

.float-right ul  {
    list-style: outside;
    padding-left: 1.4em;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
    position: relative;
}

img.x-height {
    position: relative;
    height: 1.3em;
    top: 0.3em;
}

h2 img.x-height {
    height: 1em;
    top: 0.2em;
}

h3 {
    font-size: 1.2em;
    padding: 0.5em 0;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

h5 a:link, h5 a:visited, h5 a:active {
    padding: 0;
    text-decoration: none;
}

.widgetTitle {
    color: white;
    margin: 0;
    padding: 0.2em 0.5em;
    background-color: #CCC;
    font-size: 85%;
}


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 106em;
    /* padding:  0 10px; */
}

.adminInterface #body {
    background-color: #EFEEEF;
    clear: both;
    padding-bottom: 3em;
}

.main-content {
    /* background: url("../Images/accent.png") no-repeat; */
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    visibility: hidden;
}

.featured + .main-content {
    background: url("../Images/heroAccent.png") no-repeat;
}

header .content-wrapper {
    padding: 10px;
    position: relative;
}

footer {
    clear: both;
    min-height: 100px;
}

footer .content-wrapper {
    padding-top: 1em;
    padding-bottom: 2em;
}

footer .content-wrapper p {
    font-size: .8em;
}

footer .content-wrapper {
    /* display: table-row; */
}

.row {
    display: flex;
    flex-direction: row;
}

.col {
    flex-grow: auto;
    padding-right: 1.8em;
}

.col + .col {
    padding-left: 1.5em;
    border-left: 2px dotted #DDD;
}

img.expl {
    vertical-align: middle;
}

footer .row {
    padding-top: 1em;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 220%;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

#logo {
    position: relative;
    height: 60px;
}

.site-title .text {
    position: relative;
    left: 0.4em;
}

#login {
    position: absolute;
    top: 0;
    right: 15px;
}

/*
#login a {
    background-color: #d3dce0;
    margin-left: 10px;
    margin-right: 3px;
    padding: 2px 3px;
    text-decoration: none;
}

#login a.username {
    background: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

#login ul {
    margin: 0;
}

#login li {
    display: inline;
    list-style: none;
}
    */


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}

/* navigation */
.navigation {
    border-bottom: 1px solid lightgrey;
}

.navigation a {
    color: grey;
    text-decoration: none;
}

.navigation a.indexPage:before {
    content: '\e968';
    font-family: AdminIconsFont;
}

.nav-section {
    display: table-cell;
    padding: 0.2em 1em 0.3em 0;
/*     min-width: 15em;
    text-align: center; */
    white-space: nowrap;
}

.nav-section + .nav-section {
    padding-left: 1em;
    border-left: 1px solid lightgrey;
}

.navigation .icon {
    padding-left: 0.3em;
    padding-right: 0.3em;
    fill: grey;
}

.navigation .icon.disabled {
    fill: lightgrey;
}

.navigation a.indexPage:hover {
    color: black;
    text-decoration: underline;
}

.navigation a:hover svg {
    fill: black
}

/* settings */
#settings {
    border-top: 1px solid lightgrey;
    padding-top: 0.5em;
    margin-top: 2em;
}

#settings .editor-section {
    font-size: 90%;
    color: hsl(0, 0%, 40%);
}

#settings .editor-section button {
    border-width: 2px;
    color: hsl(0, 0%, 40%);
    border-color: hsl(0, 0%, 60%);
}


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

.featured .content-wrapper {
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

.featured hgroup.title h1, .featured hgroup.title h2 {
    color: #fff;
}

.featured p {
    font-size: 1.1em;
}

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

ol.round li {
    margin: 25px 0;
    padding-left: 45px;
}

ol.round li.zero {
    background: url("../Images/orderedList0.png") no-repeat;
}

ol.round li.one {
    background: url("../Images/orderedList1.png") no-repeat;
}

ol.round li.two {
    background: url("../Images/orderedList2.png") no-repeat;
}

ol.round li.three {
    background: url("../Images/orderedList3.png") no-repeat;
}

ol.round li.four {
    background: url("../Images/orderedList4.png") no-repeat;
}

ol.round li.five {
    background: url("../Images/orderedList5.png") no-repeat;
}

ol.round li.six {
    background: url("../Images/orderedList6.png") no-repeat;
}

ol.round li.seven {
    background: url("../Images/orderedList7.png") no-repeat;
}

ol.round li.eight {
    background: url("../Images/orderedList8.png") no-repeat;
}

ol.round li.nine {
    background: url("../Images/orderedList9.png") no-repeat;
}

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside ul li {
    background: url("../Images/bullet.png") no-repeat 0 50%;
    padding: 2px 0 2px 20px;
}

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

#loginForm .validation-error {
    display: block;
    margin-left: 15px;
}

#loginForm .validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

#loginForm .validation-summary-errors li {
    display: inline;
    list-style: none;
    margin: 0;
}

#loginForm input {
    width: 250px;
}

#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button {
    width: auto;
}

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

#socialLoginForm h2 {
    margin-bottom: 5px;
}

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

fieldset legend {
    display: none;
}

fieldset ol {
    padding: 0;
    list-style: none;
}

fieldset ol li {
    padding-bottom: 5px;
}

label {
    /*    display: block;
    font-size: 1.2em;
    font-weight: 600;
    */
}

label.checkbox {
    display: inline;
}

input, textarea {
    /*
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
    */
}



input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: white;
    /*font-weight: bold;*/
    white-space: normal;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error, input.input-validation-error + input.ui-autocomplete-input, .radioWrapper.contains-validation-error {
    border: 1px solid #e80c4d !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}




/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

    #login ul {
        margin: 5px 0;
        padding: 0;
    }

    #login li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #login a {
        background: none;
        color: #999;
        font-weight: 600;
        margin: 2px;
        padding: 0;
    }

    #login a:hover {
        color: #333;
    }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    ul#menu li {
        margin: 0;
        padding: 0;
    }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
        position: relative;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

    ol.round li {
        padding-left: 10px;
        margin: 25px 0;
    }

    ol.round li.zero,
    ol.round li.one,
    ol.round li.two,
    ol.round li.three,
    ol.round li.four,
    ol.round li.five,
    ol.round li.six,
    ol.round li.seven,
    ol.round li.eight,
    ol.round li.nine {
        background: none;
    }

    /* features */
    section.feature {
        float: none;
        padding: 10px;
        width: auto;
    }

    section.feature img {
        color: #999;
        content: attr(alt);
        font-size: 1.5em;
        font-weight: 600;
    }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }



    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

    footer p {
        margin: 0;
    }
}

/* custom styling RDW */
.counter {
    color: grey;
    padding: 0 1em;
}

.status {
    color: grey;
}



h2 + fieldset {
    margin-top: 1em;
}

.noWrap {
    white-space: nowrap;
}

.minimap {
    border: 1px solid grey;
}

.floatRight {
    float: right;
}

.warning {
    font-weight: bold;
    color: #ac0e0e;
}

.warning:before {
    content: '\f02d';
    font-family: AdminIconsFont;
    /* font-size: 120%; */
    position: relative;
    top: 0.1em;
    padding-right: 0.4em;
}

li.warning {
    list-style: none;
}

.warning a {
    color: inherit;
}

.button {
    border: none !important;
    color: white !important;
    text-transform: uppercase;
    font-size: 8pt !important;
    font-weight: normal !important;
    border-radius: 4px;
    padding: 0.2em 0.6em !important;
    text-decoration: none;
    cursor: pointer;
}

.button.small {
}

.button.red {
    background-color: #AA0000;
}

.button.green {
    background-color: #00AA00;
}

#notFound.warning {
    visibility: hidden;
}

/* server role flash */
.server-role {
    display: none;
    position: fixed;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.9;
    width: 20em;
    text-align: center;
    line-height: 2em;
    transform: translate(-8em, 1em) rotate(-45deg);
    z-index: 3000;
}

.server-role.local, .server-role.test, .server-role.dev, .server-role.demo, .server-role.train {
    display: block;
}

.server-role.local {
    background-color: hsl(0, 0%, 75%);
}

.server-role.local:before {
    content: 'local';
}

.server-role.dev {
    background-color: hsl(90, 60%, 40%);
}

.server-role.dev:before {
    content: 'dev';
}

.server-role.test {
    background-color: hsl(180, 60%, 40%);
}

.server-role.test:before {
    content: 'test';
}

.server-role.demo, .server-role.train {
    background-color: hsl(55, 60%, 40%);
}

.server-role.demo:before {
    content: 'demo';
}

.server-role.train {
    top: 0.5em; left: 0.5em;
}

.server-role.train:before {
    content: 'training';
}


/* Dynamically-populated detail */

.active-detail input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.detail-part {
    position: relative;
    display: table;
    width: 100%;
}

.crfEntry .detail-part {
    background-color: hsl(0, 0%, 96%);
    border-top: 1px solid hsl(0, 0%, 80%);
}

.detail-part > table {
    margin: 0 0.5em;
}

.detail-part > table tr:first-child td {
    border-top: none;
}

.detail-part > table tr:last-child td {
    border-bottom: none;
}

.active-detail .detail-part-container {
    border: 1px solid #CCC; border-top: none;
 }

form .detail-part-container .popup-only {
    display: none;
}

/* Edit links */
.edit-link {
    background: url("../Graphics/EditLink?h=0&s=0&l=50&a=1") no-repeat right top;
    background-size: 4em 4em;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    /* font-weight: bold; */
    text-align: right;
    vertical-align: top;
    min-height: 4em;
    min-width: 4em;
    color: white !important;
    padding: 0.2em 0.4em 0 0;
}

.edit-link:hover {
    text-decoration: underline;
    background-color: inherit;
}

.detail-part .edit-link:hover {
    background-color: inherit;
}

/* tabs */

.ui-tabs {
}

.ui-tabs-nav {
    padding: 0 8px;
    margin: 0;
    list-style: none;
    /* white-space: nowrap; */
    display: flex;
    border-spacing: 6px 0;
    justify-content: flex-start;
    align-items: stretch;
    align-content: space-between;
}

.ui-tabs-active a {
    background-color: white !important;
    border-color: white !important;
}

/* Overlapping tabs effect thanks to https://stackoverflow.com/a/50109649/989556 */

.ui-tabs-nav li {
    overflow: hidden;
}

.ui-tabs-nav li:last-child, .ui-tabs-nav li:hover, .ui-tabs-nav .ui-tabs-active {
    overflow: visible;
}

.ui-tabs-nav li a, .ui-tabs-nav div.fake-tab a {
    display: block;
    overflow: hidden;
    background-color: #DDD;
    padding: 4px 0.7em 8px 0.7em;
    margin: 0 0.4em 0 0;
    border-radius: 0.4em 0.4em 0 0;
    border-top: 3px solid #DDD;
    line-height:  1.2;
    box-sizing: border-box;
    height: 100%; /* a stretches vertically to fit encosing li */
}

.ui-tabs-nav div.tab-spacer {
    min-width: 0.5em
}

.ui-tabs-nav li.new-tab-section, .ui-tabs-nav div.new-tab-section {
    margin-left: 1.5em;
}

.ui-tabs-nav .hidden-tab {
    display: none;
}

.ui-tabs-anchor, div.fake-tab a {
    text-decoration: none;
    font-weight: bold;
    color: grey !important;
}

.ui-tabs-anchor:hover, div.fake-tab a:hover {
/*     background-color: inherit; */
    text-decoration: underline;
}



.ui-tabs-active .ui-tabs-anchor {
    color: black !important;
}

.ui-tabs-panel {
    padding: 0.3em 1em;
    margin: 0;
    background-color: white;
    border-radius: 0.4em 0.4em 0 0;
}

.basic .ui-tabs-nav li {
    /*background-color: #CCC;*/
}

.ui-tabs-panel[iframe] {
    padding: 0;
}

.ui-tabs-panel iframe {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    border: none;
}

/* different colours for nested tabs */

/* second-level */
.basic .ui-tabs-active a, .basic .ui-tabs-panel,
.ui-tabs .ui-tabs .ui-tabs-active a, .ui-tabs .ui-tabs .ui-tabs-panel,
.ui-tabs .navBar-container.tab-style .nav .selected, .ui-tabs .navBar-container.tab-style .content {
    background-color: #EEE !important;
}

.basic .ui-tabs-active a, .ui-tabs .ui-tabs .ui-tabs-active a {
    background-color: #EEE !important;
    border-color: #EEE !important;
}

/* third-level */
.ui-tabs .ui-tabs .ui-tabs .ui-tabs-active a, .ui-tabs .ui-tabs .ui-tabs .ui-tabs-panel,
.ui-tabs .ui-tabs .navBar-container.tab-style .nav .selected, .ui-tabs .ui-tabs .navBar-container.tab-style .content {
    background-color: white !important;
}

.ui-tabs .ui-tabs .ui-tabs .ui-tabs-active a {
    background-color: white !important;
    border-color: white !important;
}

/* highlight tab that contains changes */
.ui-tabs .ui-tabs-nav li.changed a {
    border-color: #DA6000 !important;
}

/* highlight tab that contains validation errors */
.ui-tabs .ui-tabs-nav li.section-validation-error a {
    border-color: #e80c4d !important;
}

.ui-tabs .ui-tabs-nav li.section-validation-error a {
    color: #B10C3D !important;
}

.ui-helper-clearfix {
    /*display: none;*/
}

p.navigation {
    position: absolute;
    top: 4.4em;
    right: 0.5em;
}

.navButton {
    cursor: pointer;
    padding: 10px 5px;
}

/* symbols, icons, graphics */

.navigation a:hover {
    fill: darkred;
    background-color: inherit;
}



tr.mismatch {
    background-color: rgba(255, 0, 0, 0.1);
}

/* Contact markup */

.contact .numberGroup, .contact .number, .contact .postalAddress {
    display: block;
}

.contact .postalAddress {
    white-space: pre-line;
}

.contact .mobile .number:before {
    content: "Mob: ";
}

.contact .tel .number:before {
    content: "Tel: ";
}

.contact .fax .number:before {
    content: "Fax: ";
}


/* Small-screen version */

@media only screen and (max-height: 950px) {
    body {
        font-size: 0.75em;
    }

    header .site-title img#logo {
        /* zoom: 0.7; */
    }

    .editor-section, .display-section {
        margin: 1em 0 0.5em 0;
    }
}

.leader-br {
    background-image: url("/Content/LeaderBr.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.5em auto;
}
.leader-v {
    background-image: url("/Content/LeaderV.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.5em auto;
}

/* menu trees */

.menu-tree {
    margin-top: 1em;
}

.menu-tree .section {
    display: inline-block;
    vertical-align: top;
}

.menu-tree .section .title {
    font-weight: bold;
    border-bottom: 1px solid hsl(0, 0%, 70%);
    padding-bottom: 0.4em;
    margin-bottom: 1em;
    padding-right: 1em;
}

.menu-tree .section + .section {
    margin-left: 1.5em;
}

.menu-tree .content .icon {
    display: block;
    padding-left:  0.2em;
}


.display-section.nav a img {
    height: 1.5em;
    vertical-align: middle;
    padding-right:  0.3em;
}

.brace {
    vertical-align: middle;
    width: 0.7em;
    padding: 0.2em 0.6em;
}

.generic-fail, .generic-success, .generic-cta {
    font-weight: bold;
}

.generic-information {
    font-size: 120%;
}

.generic-fail {
    color: #ac0e0e;
}

.generic-success {
    color: #0a8511;
}

.generic-cta {
    color: #0a6085;
}

.generic-information {
    color: #a98d10
}

.generic-fail:before, .generic-success:before, .generic-cta:before, .generic-information:before {
    font-family: AdminIconsFont;
    position: relative;
    top: 0.1em;
}

.generic-fail:before {
    content: '\f02d  ';
}

.generic-success:before {
    content: '\f03b  ';
}

.generic-cta:before {
    content: '\f052  ';
}

.generic-information:before {
    content: '\e609  ';
}

footer .logo {
    width: 15em;
    height: 4.56em;
}
/* Styling for forms - layout, controls, buttons, jQueryUI widgets, etc. */

/* Documentation references:
 * https://ctudev.npeu.ox.ac.uk/Doc/WebUserInterface#interaction
 * https://ctudev.npeu.ox.ac.uk/Doc/WebUserInterface#textbox-prompts
 * https://ctudev.npeu.ox.ac.uk/Doc/WebUserInterface#date-pickers
 */

/* LAYOUT */

.editor-section, .display-section {
    margin: 1.5em 0 1em 0;
    clear: left;
}

.editor-section.idagnostic, .display-section.diagnostic {
    opacity: 0.5;
    border-top: 1px solid grey;
    margin-top: 3em;
}

.editor-section + h4 {
    margin-top: 5em;
}

.editor-vertSection, .display-vertSection {
    display: table-cell;
    vertical-align: top;
    padding-right: 0.5em;
}

.editor-vertSection + .editor-vertSection, .display-vertSection + .display-vertSection {
    padding-left: 1.2em !important;
    border-left: 2.5px dotted hsl(0, 0%, 83%);
}

.editor-vertSection > .editor-section:first-child, .editor-vertSection > .display-section:first-child {
    /* margin: 0; */
}

.right-aligned {
    text-align: right;
}

.centered {
    text-align: center;
    vertical-align: middle !important;
}

.editor-block, .display-block, .display-section iframe {
    vertical-align: top;
    margin-right: 0.6em;
    margin-bottom: 1em;
    position: relative;
    /* white-space: nowrap; */
}

.display-block.cancel-headline {
    white-space: normal;
}

.editor-section.one-line-form .editor-block {
    vertical-align: bottom;
}

.editor-section.one-line-form input[type='submit'] {
    display: block;
    margin-bottom: 0.1em;
}

.editor-block .inlineSubmit {
    display: inline-block;
    margin-top: 1.8em;
    vertical-align: bottom;
}

.headline .editor-block .inlineSubmit {
    margin-top: 2.4em;
}

.headline .editor-block, .headline .display-block {
    min-height: 4.7em
}

.inlineSubmit input {
    display: inline;}

div.editor-block, div.display-block {
    display: inline-block;
}

.big-icons .display-block a {
    padding: 5px;
}

li div.editor-block, .li div.editor-block {
    padding-left: 0.5em;
    vertical-align: baseline;
}

.editor-block + .editor-block.vertDiv, .display-block + .display-block.vertDiv {
    border-left: 2.5px dotted lightgrey;
    padding-left: 1em;
}

.editor-block.nextVertDiv, .display-block.nextVertDiv {
    border-right: 2.5px dotted lightgrey;
    padding-right: 1em;
}

.editor-block.centre-line {
    vertical-align: middle;
}

.editor-label, .display-label, .reading-label {
    font-size: 90%;
    /*opacity: 0.75;*/
    padding: 2px 6px;/* 6px aligns with left-padding of display-field and editor-field controls */
    text-align: left;
    position: relative;
    min-height: 17px;
}

.diagnostic .display-label {
    padding-left: 0;
    padding-right: 8px;
    border-bottom: 1px dotted grey;
}

.editor-label, .reading-label {
    background-color: rgba(74, 136, 160, 0.75); /* #fcfcb2; */
    color: white;
    white-space: normal;
}

.reading-label {
    text-align: center;
    white-space: nowrap;
}

.editor-field + .editor-label, .editor-field + .editor-section {
    margin-top: 1em; /* vertically stacked fields and labels need space between them */
}

/* nested sections don't have bottom margins*/
.editor-section .editor-section {
    margin-bottom: 0;
}

.ui-tabs-panel > .editor-section {
    margin-bottom: 2em;
}

h4 {
    font-size: 80%;
    font-weight: normal;
    /*text-transform: uppercase;*/
    /* letter-spacing: 0.1em; */
    padding-left: 2em;
    overflow: hidden;
    text-align: left;
    position: relative;
    top: -1em;
}

h4:before, h4:after {
    background-color: #999;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
h4:before {
    right: 0.5em;
    margin-left: -100%;
}
h4:after {
    left: 0.5em;
    margin-right: -100%;
}
/* nested blocks don't have bottom margins*/
.editor-block .editor-block {
    margin-bottom: 0;
}

.editor-field, .display-field {
    position: relative;
}

.display-field {
    border: none;
    padding: 4px 6px; /* one more px than textboxes because of textbox 1px borders */
}

.diagnostic .display-field {
    padding-left: 0;
    padding-right: 10px;
}

.reading-field {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    padding: 0 6px 4px 6px;
    border-top: none;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    min-width: 2em;
}


/* TABS */

/* This would fix gap bug under tabs in Chrome... */
/* #top-level-tabs > form {
    margin-bottom: -4px;
}
 */

/* SUBMIT BUTTONS */

input[type="submit"],
input[type="button"],
input[type="reset"],
a.linkButton,
button {
    background-color: #d3dce0;
    border: 1px solid hsl(0, 0%, 47%);
    cursor: pointer;
    font-family: inherit;
    font-size: 110%;
    padding: 0.2em 0.5em;
    /*margin-right: 8px;*/
    width: auto;
    border-radius: 0.3em;
    text-decoration: none;
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
a.linkButton:disabled,
button:disabled {
    color: hsl(0, 0%, 47%);
    cursor: inherit;
}

.display-field input[type='subimt'], 
.display-field button {
    font-size: 0.8em;
}

div.submit-block {
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 1.1em !important;
}

.submit-block input[type="submit"] {
    margin: 0;
    font-size: 95%;
    position: relative;
    top: 0.3em;
}

input[type="submit"],
input[type="button"],
a.linkButton,
button {
    font-weight: 700;
    border-width: 2px;
    /* display: inline-block; */
}

input[type="reset"] {
    display: none;
}

td input[type="submit"],
td input[type="button"],
td input[type="reset"],
td a.linkButton,
td button,
a.linkButton.small {
    font-size: 1em;
    /* padding: 1px 3px; */
    margin-right: 4px;
    border-width: 2px;
    display: inline-block;
    margin-bottom: 0.5em;
}

#mainSubmit {
    /*position: absolute;
    right: 0;*/
    text-align: right;
    margin-bottom: 0;
}

.subSubmit {
    text-align: right;
}

#mainSubmit, .subSubmit {
    line-height: 2.8;
    margin-top: 1em;
    margin-bottom: 1em;
}

.editor-block.subSubmit {
    vertical-align: bottom;
}

.editor-block input[type="submit"] {
    /* vertical-align: bottom; */
}

/* CHANGE TRACKING */

.editor-label.changed {
    background-color: #DA6000 !important;
}

.editor-field.changed input, .editor-field.changed textarea, .detail-part-container.changed, .editor-field.changed .radioWrapper, .editor-field.changed .checkboxWrapper {
    border-color: #DA6000 !important;
}

.detail-part-container.changed .edit-link {
    display: none;
}

fieldset.changed input[type='submit'], form.changed input[type='submit'], form.changed button {
    border-color: #DA6000 !important;
}

fieldset input[type='submit'].cancel, fieldset.changed input[type='submit'].cancel {
    border-color: #e80c4d !important;
    font-weight: normal;
    display: none;
}

fieldset input[type='submit'].cancel.allow, fieldset.changed input[type='submit'].cancel.allow {
    display: inline-block !important;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

fieldset legend {
    display: none;
}

/* CONTROLS */

/* all text boxes and pull-down-menus */
.editor-field input.text-box, .editor-field textarea, .editor-field select, 
.editor-field .checkboxWrapper, .editor-field .radioWrapper, .editor-field input[type='password'],
.tag-widget
 {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: 1px solid #DDD;
    background-color: whitesmoke;/*hsla(100, 0%, 0%, 0.1);*//* whitesmoke;*/
    margin: 0;
    /* min-width: 6em; */
}

.editor-field input.text-box, .editor-field textarea, .editor-field select, .editor-field input[type='password'],
.tag-widget {
    padding: 5px 6px 6px 6px;
}

.tag-widget.help-wrapper {
    padding-right: 22px !important; /* make space for both pull-down arrow and help mark */
}

.editor-field .radioWrapper {
    padding: 4px 6px 4px 2px;
    white-space: nowrap;
}

.editor-field .checkboxWrapper {
    padding: 3px 6px 3px 5px;
}

/* general control dimensions */

input[type='checkbox'] {
    cursor: pointer;
}

.editor-field input.date-only {
    width: 6.5em;
}

.editor-field .help-wrapper input.date-only, .editor-field.help-wrapper input.date-only {
    width: 9.5em;
}

.editor-field input.date-time {
    width: 9.5em;
}

.editor-field .help-wrapper input.date-time {
    width: 11em;
}

.editor-field textarea {
    width: 30em;
    height: 6em;
}

.editor-field.wide textarea {
    width: 50em;
    height: 8em;
}


.editor-field.medium-sized input {
    width: 15em;
}

.editor-field.narrow input {
    width: 9.5em;
}

.editor-field.narrow textarea {
    width: 23em;
}

.editor-field.very-narrow input {
    width: 4em;
}

.editor-field.tiny input {
    width: 2em;
    text-align: center;
}

.editor-field.wide input {
    width: 18em;
}

.editor-field.medium input {
    width: 10em;
}

.contact-section textarea, .postalAddress textarea {
    height: 9em;
}

.contact-section textarea, .postalAddress textarea, .postalAddress input.text-box {
    width: 23em;
}

.editor-field.veryWide input {
    width: 25em;
}

.editor-field.ultraWide input {
    width: 35em;
}

.editor-field.expression input {
    font-family: monospace;
    font-size: 130%;
}

.editor-field.identifier input {
    font-family: monospace;
}

.editor-field input, .editor-field textarea {
     box-sizing: border-box;/* ensures that fixed-width boxes all line up even if they have different padding */
}

.var-width .editor-field input, .var-width.editor-field input, .var-width.editor-field textarea {
    box-sizing: content-box; /* cancels out above rule for variable-width textboxes becase the variable-width code needs to set content-box-width */
}

.fixed-width .editor-block {
    max-width: 10em;
}

.fixed-width .text-box.single-line {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/*.editor-field .checkboxWrapper, .editor-field .radioWrapper {
    border: none !important;
}*/

.editor-field .modified {
    border-color: orange !important;
}

/* radio buttons */

.radioWrapper label, .radioWrapper input, .checkboxWrapper label, .checkboxWrapper input {
    vertical-align: middle;
}

.radioWrapper input {
    margin: auto 0 auto 0.5em;
    padding: 0;
    width: 1em !important;
    cursor: pointer;
}

.radioWrapper label, .checkboxWrapper label {
    padding: 0 0.5em 0 0;
    cursor: pointer;
}

.editor-field .checkboxWrapper, td.checkboxWrapper, .checkboxWrapper label {
    cursor: pointer;
}

.checkboxWrapper label, .radioWrapper label {
    position: relative;
    top: -0.13em;
}

.checkboxWrapper:hover label {
    text-decoration: underline;
}

.radioWrapper:hover label {
    text-decoration: underline;
}


br + input.text-box, div.editor-field + div.editor-field input.text-box, br + .prompt-wrapper input.text-box {
    border-top: none !important; /* vertically stacked textboxes have a single-pixel border line between them (e.g in addresses)*/
}

.editor-field input:focus, .editor-field textarea:focus, .editor-field select:focus, .editor-field input:hover, .editor-field textarea:hover, .editor-field select:hover, a.linkButton:hover {
    background-color: white;
}

/* Headline sections */

.headline .editor-field, .headline .display-field {
    font-size: 180%;
    font-weight: bold;
}

.headline2 .editor-field, .headline2 .display-field, .ui-tabs-panel .headline .editor-field, .ui-tabs-panel .headline .display-field {
    font-size: 150%;
    font-weight: bold;
}

.headline .cancel-headline .display-field, .headline .cancel-headline .editor-field, .headline .cancel-headline.display-field, .headline .cancel-headline.editor-field, 
.headline2 .cancel-headline .display-field, .headline2 .cancel-headline .editor-field, .headline2 .cancel-headline.display-field, .headline2 .cancel-headline.editor-field
{
    font-size: 100%;
    font-weight: normal;
    white-space: normal;
}

.editor-section .display-field {
    opacity: 0.8;
}

/* jQuery UI styling */

/* generic styling for pop-up elements */
#ui-datepicker-div, .ui-autocomplete {
    background: white;
    padding: 10px;
    z-index: 200 !important;
    border: 1px solid #DDD;
}

.ui-autocomplete {
    max-width: 40em;
}

/* the fieldset element is the elemet to which pop-up elements are appended to. I've found that a relative positioning helps in accurate pop-up positioning */
fieldset {
    position: relative;
}

/* datepicker */

#ui-datepicker-div {
    display: none; /* to start off with */
}

.ui-datepicker-header {
    text-align: center;
    position: relative;
}

.ui-datepicker-prev, .ui-datepicker-next {
    position: absolute;
    display: inline;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.8;
}

.ui-datepicker-prev {
    left: 0;
}

.ui-datepicker-next {
    right: 0;
}

.ui-datepicker-calendar td {
    text-align: right;
}

.ui-datepicker-calendar td, .ui-datepicker-calendar th {
    padding: 0.5em;
}

.ui-datepicker-calendar a {
    text-decoration: none;
    color: inherit;
}

.ui-datepicker-calendar a:hover {
    background-color: inherit;
}

.ui-datepicker-current-day {
    color: #CC0000;
    font-weight: bold;
}

.ui-datepicker-today {
    border: 1px solid #00aa00;
}

.ui-datepicker td[data-handler='selectDay'] {
    cursor: pointer;
}

.ui-datepicker td[data-handler='selectDay']:hover {
    background-color: lightyellow;
}

#liveSearch {
    background: white;
    margin: 0.8em 0;
}


/* autocomplete */

.ui-helper-hidden-accessible {
    display: none;
}


.ui-autocomplete {
    padding: 0.4em 0 !important;
    position: absolute;
    width: auto !important;
}



.ui-menu-item {
    list-style: none;
    padding: 0;
    /*white-space: nowrap;*/
}

.ui-menu-item + .ui-menu-item {
    border-top: 1px solid #DDD;
}

li.ui-menu-item {
    position: relative;
}

li.ui-menu-item a {
    padding: 0.2em 0.8em;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

li.ui-menu-item .pop-out-positioner {
    position: absolute; right: 0; top: 0;
}

li.ui-menu-item .pop-out-detail {
    position: absolute;
    top: -4px;
    background: lightyellow;
    padding: 0 0.5em ;
    border: 1px solid #DDD;
    width: auto !important;
    white-space: nowrap;
    cursor: pointer;
}

li.ui-menu-item .pop-out-detail .edit-link {
    display: none;
}

li.ui-menu-item a:hover {
    background-color: lightyellow;
    color: #CC0000;
}

.ui-state-focus {
    background-color: lightyellow;
    color: #CC0000;
}

.text-box.lookup-related-id {
    /* textbox isn't actually hidden but just behind its associated type-in-value box */
    width: 2.5em;
    border-right: none !important;
    text-align: right;
    position: absolute;
    z-index: -1;
    background-color: lightyellow !important;
    opacity: 0;
}

/* propagate validation error styling from related-id-field to its associated type-in-value field */
.text-box.lookup-related-id.input-validation-error + span + .text-box {
    border: 1px solid #e80c4d !important;
    /*border-left-width: 2px !important;*/
}

.text-box.lookup-value-autocomplete, ul.ui-autocomplete {
    width: 19em;
}

.text-box.lookup-value-autocomplete.pullingDown, .text-box.lookup-value-miniAutocomplete.pullingDown {
    cursor: pointer !important;
}

.text-box.lookup-value-miniAutocomplete {
    background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 800 600' width='800' height='600'><g transform='rotate(90,300,300)' fill='grey'><path d='M 4,560 L 4,30 L 560,300 L 4,560 z'></path></g></svg>") no-repeat right center;
    background-size: 1.33em 1em;
    padding-right: 1.5em !important;
    cursor: pointer;
}

.help-wrapper .text-box.lookup-value-miniAutocomplete  {
    background-position: right 18px center;
}

.text-box.lookup-value-miniAutocomplete:focus {
    cursor: inherit;
}

.text-box.lookup-value-miniAutocomplete.drop-selected, .text-box.lookup-value-autocomplete.drop-selected {
    cursor: pointer;
}

.prompt-wrapper {
    position: relative;
    display: inline-block;
    /*overflow: hidden;*/
}

.text-box-prompt, .autocomplete-feedback, .help-wrapper .help.tooltip {
    position: absolute;
    line-height: 1em;
    top: 50%;
    margin-top: -0.5em; /* vertical centering relative to containing .editor-field div */
    padding: 0 6px; /* matches text-box padding including 1px border */
}

.text-box-prompt {
    left: 0;
    color: #888;
}

.suppressPrompts .text-box-prompt {
    display: none;
}

.suppressPrompts ::-webkit-input-placeholder {
    color: transparent;
}

.suppressPrompts ::-moz-placeholder {
    color: transparent;
}

.suppressPrompts :-moz-placeholder {
    color: transparent;
}

.suppressPrompts :-ms-input-placeholder {
    color: transparent;
}


.autocomplete-feedback {
    right: 1em;
    color: white;
    background-color: rgb(153, 153, 153);
    padding: 0.3em 0.6em;
    margin-top: -0.8em;
    text-transform: uppercase;
    font-size: 87%;
    border-radius: 1.3em;
    display: none; /* to start with */
}

.autocomplete-feedback.mini {
    right: 2em; /* make space for the down-arrow */
}

td .autocomplete-feedback, td .autocomplete-feedback.mini {
    margin-top: -1.2em; /* because of td's top padding */
    right: 3em; /* because td's have 1em right padding */
}

.text-box.showing-feedback {
    padding-right: 7em !important;
    /* box-sizing: content-box; NOT SURE WHY THIS WAS ADDED? */
}

.text-box.lookup-value-miniAutocomplete.showing-feedback {
    padding-right: 8em !important;
}


/* VALIDATION */

.field-validation-error {
    position: absolute;
    z-index: 100;
    background: #e80c4d;
    padding: 5px 6px;
    min-width: 8em;
    margin-top: 1px;
    color: white;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.hide-val-errors .field-validation-error {
    visibility: hidden;
}

/* field validation errors in td's display slightly differently */


td .field-validation-error {
    /* Removed RDW 28/12/17 - can't find an example where this is used */
/*     position: relative;
    display: table-cell; */
}


.validation-summary-errors {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #efeeef;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-color: #e80c4d;
    padding-top: 0.7em;
    padding-right: 0.7em;
}

.ui-tabs-panel .validation-summary-errors {
    background-color: white;
}


/* HELP TOOLTIPS */
.help-wrapper {
    position: relative;
}

.help-wrapper input.text-box {
    padding-right: 1.9em;
}

.help-wrapper .help.tooltip {
    right: 0.4em;
    color: #999;
    border: 1px solid #999;
    padding: 0;
    width: 1em;
    text-align: center;
    height: 1em;
    border-radius: 0.7em;
    cursor: pointer;
    /*font-weight: bold;*/
}

.editor-label .url-link, .editor-label .popup-link {
    font-weight: bold;
    background-color: hsla(0, 0%, 20%, 0.5);
    position: absolute;
    right: 0; top: 0;
    padding: 2px 7px;
    cursor: pointer;
}

.editor-label .url-link:after, .editor-label .popup-link:after {
    font-family: AdminIconsFont;
    font-weight: normal;
    content: ' \f07f';
}

.editor-label .url-link:hover {
    text-decoration: underline;
}


/* Signatory controls */

/* Move pull-down-arrow out from behind edit-link */
.signatory .text-box.lookup-value-miniAutocomplete {
    background-position-x: 90%; /* for Chrome, which doesn't support two-value syntax */
    background-position-x: right 1.5em; 
}


/* tag widgets */

.tag-widget {
    padding-right: 3em;
    /*     max-width: 20em; */
    white-space:normal;
    line-height: 1.8;
    padding-top: 2px;
    padding-bottom: 3px;
}

/* other elements which contain tags need extra line spacing too */
td:has(.tag), p:has(.tag) {
    line-height: 2;
}

.edit-link.tags {
    z-index: 100;  
}

.tag-widget input.lookup-value-miniAutocomplete {
    border: none !important;
     padding-top: 3px;
    padding-bottom: 3px; 
    min-width: 4em;
}

.tag-widget:hover, .tag-widget.focussed {
    background-color: white;
}

.tag-widget:hover input.lookup-value-miniAutocomplete {
    background-color: white;
}

.tag {
    background-color: hsl(60, 0%, 60%);
    padding: 2px 5px 2px 5px;
    color: white;
    border-radius: 4px;
    cursor: default;
    /* display: inline-block; */
    white-space: nowrap;
}

a.tag {
    color: white;
    cursor: pointer;
    text-decoration: none;
}

.tag + .tag {
    /* margin-left: 0.3em; */
}

.tag .remove {
    color: hsl(60, 0%, 30%);
    cursor: pointer;
    /* padding:  0; */
    position: relative;
    top: 0.1em;
}

.tag .remove:before {
    font-family: AdminIconsFont;
    content: ' \f081'
}

.tag:hover .remove {
    color: hsl(0, 80%, 50%);
}

/* .tag .remove:hover {
    opacity: 0.3;
} */


.move-add-dep {
    margin-top: 0.8em;
    font-weight: normal;
}


/* Signatory controls */

.signatory-section {
    position: relative;
}

.signatory-section .incident {
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
    top: -0.2em;
    background-color: hsla(0, 0%, 0%, 0.1);
    border-radius: 5px;
    margin-bottom: 0.8em;
    margin-top: 0.5em;
    display: none; /* defaults to invisible */
}

.signatory-section div.incident[class*='dl-err-'] {
    display: block;
} 

.signatory-section.new div.incident {
    display: none !important;
}

.signatory-section .incident-leader {
    content: "";
    position: absolute;
    top: -15px;
    left: 20px;
    border-width: 0 10px 15px 10px;
    border-style: solid;
    display: block;
    width: 0;
    border-color: hsla(0, 0%, 0%, 0.1) transparent;
}

.signatory-section .incident .editor-block {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.signatory-section .incident .dl-errors {
    display: inline-block;
    padding-right: 1em;
}


/* aproximate hard-coded positions of text-boxes. these should really be calculated dynamically in JS */
.incident.dl-err-3 .incident-leader, .incident.dl-err-4 .incident-leader, .incident.dl-err-8 .incident-leader {
    left: 400px;
}

.incident.dl-err-6 .incident-leader {
    left: 100px;
}


/* scrollable divs */
div.scrollable {
    max-height: 25em;
    overflow: auto;
}

div.scrollable > * {
    margin-right: 1em;
}
tr.received, div.received, form.received, span.received {
    background-color: hsl(106, 119%, 95%);
}

tr.never-received, div.never-received, form.never-received, span.never-received {
    background-color: hsl(30, 0%, 92%);
}

span.swatch {
    display: inline-block;
    min-width: 1.5em;
    margin-right: 0.5em;
    margin-left: 1em;
}

p span.swatch:first-child {
    margin-left: 0;
}

tr.due {
    background-color: hsl(106, 0%, 92%);
}

tr.overdue {
    color: hsl(0, 65%, 50%);
}

div.statusFlags {
    overflow: visible;
/*     float: right; */
    position: absolute;
    right: 0;
    text-align: right;
    line-height: 1;
}

.statusFlag {
    display: inline-block;
    margin-bottom: 0.5em;
    background-color: darkgray;
    padding: 0.3em 0.6em;
    color: white;
    text-transform: uppercase;
    border-radius: 0.4em;
    font-weight: bold;
    font-size: 95%;
    line-height: 1.5em;
}

.statusFlag.InCare {
    display: none;
}

fieldset {
    width: 100%;
}

.adminInterface.Died #body {
    background-color: hsl(200, 10%, 80%);
}

.adminInterface.Died .editor-field input.text-box, .adminInterface.Died .editor-field textarea, .adminInterface.Died .editor-field select, .adminInterface.Died .editor-field .checkboxWrapper, .adminInterface.Died .editor-field .radioWrapper {
    /*background-color: hsla(200, 0%, 0%, 0.1);*/
}


/* Directory (Index) pages */

.secondary {
    opacity: 0.5;
    white-space: nowrap;
}

.subIndex {
    margin-bottom: 1.2em;
}

.subIndex h1 {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
    font-size: 120%;
    text-transform: uppercase;
    color: white;
    background-color: darkgrey;
    padding: 0.2em 0.4em;
    margin-bottom: 0.6em;
    /*border-radius: 0.3em 0.3em 0 0;*/
}

.subIndex .subSection {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */

    margin-bottom: 1.7em;
}

.subIndex p, .subIndex h2 {
    margin: 0 0 0.6em 0;
    padding: 0 0.4em;
    
/*     -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid; */
}

.subIndex h2 {
    font-size: 100%;
    -webkit-column-break-after: avoid;
}

.subIndex p + h2 {
    margin-top: 1em;
}

.subIndex p {
    display: inline-block;
    text-indent: -1.25em;
    padding-left: 1.6em;
    /* white-space: nowrap; */
    /* overflow: hidden; */
}

.subIndex p span {
    text-indent: 0;
}

.subIndex a {
    text-decoration: none;
}

.subIndex .col7 {
    column-count: 7;
    -webkit-column-count: 7;
    -moz-column-count: 7;
}

.subIndex .col6 {
    column-count: 6;
    -webkit-column-count: 6;
    -moz-column-count: 6;
}

.subIndex .col5 {
    column-count: 5;
    -webkit-column-count: 5;
    -moz-column-count: 5;
}

.subIndex .col4 {
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
}

.subIndex .col3 {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

.subIndex .col2 {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
}

/* phone number semantic markup */
.numberGroup {
    display: block;
}

.numberGroup {
    position: relative;
    /* top: -0.45em; */
}

.numberGroup:before {
    font-family: AdminIconsFont;
    font-size: 140%;
    padding-right: 0.2em;
}

.numberGroup {
    white-space: nowrap;
}

.number + .number:before {
    content: " / "
}

.number .comment {
    font-style: italic;
}

.number .comment:before {
    content: ' (';
}

.number .comment:after {
    content: ')'
}

.badge-counter {
    color: white;
    font-weight: bold;
    background-color: #d80000;
    display: inline-block;
    padding: 0.18em 0.4em 0 0.4em;
    height: 1.3em;
    text-align: center;
    border-radius: 1.5em;
    position: relative;
    line-height: 1;
    min-width: 1.3em;
    box-sizing: border-box;
}

.subIndex .summary {
    border-bottom: 1px solid hsl(0, 0%, 80%);
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}

span.rand-phase {
    display: inline-block;
    border: 1px solid #646464;
    line-height: 1.6em;
    position: relative;
    /* top: -0.2em; */
    padding: 0 0.7em;
    border-radius: 1em;
    min-width: 1em;
    text-align: center;
}
/* NEW COLOURS */

/* Received */

.data-entry-status.Received, .swatch.Received {
    background-color: hsl(163, 36%, 79%); 
}

.bar.Received, .Received rect {
    fill: hsl(163, 36%, 79%); 
}

.crf-markers .marker.received {
    fill: hsl(235, 57%, 49%); /* node different colour to above, because markers have to stand out against a very similar bg colour */
}

.Received text {
    fill: black !important;
}


/* EntryStarted */

.data-entry-status.EntryStarted, .swatch.EntryStarted {
    background-color: rgb(236, 147, 14); 
}

.bar.EntryStarted, .EntryStarted rect, .crf-markers .marker.started {
    fill: rgb(236, 147, 14); 
}


/* EntryComplete */

.data-entry-status.EntryComplete, .swatch.EntryComplete {
    background-color: rgb(45, 159, 49); 
}

.bar.EntryComplete, .EntryComplete rect, .crf-markers .marker.complete {
    fill: rgb(45, 159, 49); 
}


/* NotYetReceived */

.data-entry-status.NotYetReceived, .swatch.NotYetReceived {
    background-color: rgb(167, 125, 85);
}

.bar.NotYetReceived, .NotYetReceived rect, .crf-markers .marker {
    fill: rgb(167, 125, 85);
}


/* NotYetReceivedOverdue */

.data-entry-status.NotYetReceivedOverdue, .swatch.NotYetReceivedOverdue {
    background-color: rgb(173, 0, 83); 
}

.bar.NotYetReceivedOverdue, .NotYetReceivedOverdue rect {
    fill: rgb(173, 0, 83); 
}


/* WillNeverBeReceived */

.data-entry-status.WillNeverBeReceived, .swatch.WillNeverBeReceived {
    background-color: hsl(51, 100%, 50%);
}

.bar.WillNeverBeReceived, .WillNeverBeReceived rect, .crf-markers .marker.never-to-be-recd {
    fill: hsl(51, 100%, 50%);
}

.WillNeverBeReceived text {
    fill: black !important;
}


/* Stopped */

.data-entry-status.Stopped, .swatch.Stopped {
    background-color: rgb(230, 0, 0);
}

.bar.Stopped, .Stopped rect {
    fill: rgb(230, 0, 0);
}


/* EnteredButNotYetReceived (only used on Form Status chart) */

.data-entry-status.EnteredButNotYetReceived {
    background-color: hsl(35, 100%, 50%);
}

.bar.EnteredButNotYetReceived, .EnteredButNotYetReceived rect {
    fill: hsl(35, 100%, 50%);
}

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    /* margin-top: 0.75em; */
    border: 0 none;
}

td, th {
    padding: 0.5em 1em 0.5em 0em;
    /* margin: 0.3em 0.3em 0.3em 0; */
    vertical-align: baseline;
}

.noPadding td {
    padding: 0;
}

tr.baseline td {
    vertical-align: baseline !important;
}

td.groupHeader, th.groupHeader {
    font-weight: bold;
    font-size: 120%;
    page-break-before: always;
    padding-top: 2em;
    border-top: none;
}
 
td, tbody th {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

th.super {
    border-bottom: 1px solid #CCCCCC;
    white-space: nowrap
}

.noRules-above td, td.noRules-above, .noRules td, td.noRules {
    border-top: hidden;
}

.noRules-below td, td.noRules-below, .noRules td, td.noRules {
    border-bottom: hidden;
}



.footer td, td.footer {
    border-bottom: none;
}

tr.totals td {
    border-top-width: 2px;
    font-weight: bold;
}

.secondary {
    opacity: 0.7;
}

th {
    text-align: left;
    padding-left: 0;
    /*border-bottom: 2px solid grey;*/
}

th.groupHeading {
    vertical-align: bottom;
    font-weight: normal;
    border-bottom: 1px solid #DDD;
}

th.angled {
    position: relative;
    min-width: 1.5em;
    height: 5em;
}

th.angled span {
    position: absolute;
    top: 0;
    white-space: nowrap;
    -webkit-transform: translate(0, 4em) rotate(-55deg) ;
    -webkit-transform-origin: top left;
}

tr.headers, thead {
    border-bottom: 2px solid grey;
}

td.nobreak, th.nobreak {
    white-space: nowrap;
}

td.vertDivision, th.vertDivision {
    padding: 0;
    min-width: 0.5em;
    border-right: 1px dotted #AAAAAA;
}

td.vertDivision.gap, th.vertDivision.gap {
    border: none;
}

.vertDivision + td, .vertDivision + th {
    padding-left: 1em;
}

td.padding, th.padding {
    border: none;
}


td.pad-left, th.pad-left {
    padding-left: 1em;
}

th a {
    display: block;
    position: relative;
}

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

th.asc a, th.desc a {
    margin-right: .75em;
}

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: 'â–²';
    }

    th.desc a:after {
        content: 'â–¼';
    }


td > table {
    position: relative;
    top: -0.55em;
}

td.actionLinks {
    white-space: nowrap;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

td.rightAligned, th.rightAligned {
    text-align: right;
    /* min-width: 3em; */
    /* max-width: 4em; */
}

.hyper-row:hover {
    background-color: hsl(60, 100%, 90%);
    cursor: pointer;
}

.hyper-row:hover .label-cell {
    background-color: white;
}

td:first-child, th:first-child, td.label-cell + td {
    padding-left: 0;
}
/* Trial colours */

/* SIFT */
body.adminInterface.SIFT header {
    border-top: solid 10px rgb(98, 54, 138);
}

body.adminInterface.SIFT .site-title .text {
    top: -11px;
}

.SIFT .reading-label, body.adminReport.widget.SIFT h1, .SIFT .widgetTitle {
    background-color: rgb(98, 54, 138);
}

.SIFT .reading-field {
    border-color: rgba(98, 54, 138, 0.3);
}

body.adminReport.SIFT #header {
    border-bottom: solid 2pt rgb(98, 54, 138);
}

/* PHOENIX */
body.adminInterface.PHOENIX header {
    border-top: solid 10px hsl(16, 83%, 47%);
}

body.adminInterface.PHOENIX .site-title .text {
    top: -14px;
}

.PHOENIX .reading-label, body.adminReport.widget.PHOENIX h1, .PHOENIX .widgetTitle {
    background-color: hsl(16, 80%, 41%);
}

.PHOENIX .reading-field {
    border-color: hsla(16, 83%, 47%, 0.3);
}

body.adminReport.PHOENIX #header {
    border-bottom: solid 2pt hsl(16, 83%, 47%);
}

/* ELFIN */

body.adminInterface.ELFIN header {
    border-top: solid 10px rgb(0, 142, 123);
}

.ELFIN .reading-label, body.adminReport.widget.ELFIN h1, .ELFIN .widgetTitle {
    background-color: rgb(0, 142, 123);
}

.ELFIN .reading-field {
    border-color: rgba(0, 142, 123, 0.3);
}

body.adminReport.ELFIN #header {
    border-bottom: solid 2pt rgb(0, 142, 123);
}

/* BabyOSCAR */

body.adminInterface.BABYOSCAR header {
    border-top: solid 10px rgb(45, 100, 158);
}

body.adminInterface.BABYOSCAR .site-title .text {
    top: -9px;
    left: 0.3em;
}

.BABYOSCAR .reading-label, body.adminReport.widget.BABYOSCAR h1, .BABYOSCAR .widgetTitle {
    background-color: rgb(45, 100, 158);
}

.BABYOSCAR .reading-field {
    border-color: rgba(45, 100, 158, 0.3);
}

body.adminReport.BABYOSCAR #header {
    border-bottom: solid 2pt rgb(45, 100, 158);
}

body.adminInterface.Vanilla header {
    border-top: solid 10px #efef66;
}


/* ANODE */
body.adminInterface.ANODE header {
    border-top: solid 10px rgb(147, 57, 97);
}

body.adminInterface.ANODE .site-title .text {
    top: -11px;
}

.ANODE .reading-label, body.adminReport.widget.ANODE h1, .ANODE .widgetTitle {
    background-color: rgb(147, 57, 97);
}

.ANODE .reading-field {
    border-color: rgba(147, 57, 97, 0.5);
}

body.adminReport.ANODE #header {
    border-bottom: solid 2pt rgb(147, 57, 97);
}


/* RECOVERY */
body.adminInterface.RECOVERY header {
    border-top: solid 10px hsl(338, 53%, 41%);
}

body.adminInterface.RECOVERY .site-title .text {
    top: -15px;
}

.RECOVERY .reading-label, body.adminReport.widget.RECOVERY h1 {
    background-color: hsl(338, 52%, 32%);
}

.RECOVERY .widgetTitle {
   background-color: hsl(338, 52%, 32%);
}

.RECOVERY .reading-field {
    border-color: hsl(345, 40%, 71%);
}

body.adminReport.RECOVERY #header {
    /* border-bottom: solid 2pt hsl(338, 53%, 41%); */
    font-size: 130%;
}

.RECOVERY #logo {
    /* font-family: Rockwell;
    color: hsl(50, 90%, 48%);
    background-color: hsl(50, 90%, 94%);
    padding: 0.2em 0.5em 0.4em 0.5em;
    border-radius: 0.3em;
    border-bottom: 3px solid hsl(50, 90%, 60%);
    margin-bottom: 0.3em;
    margin-top: 0.4em;
    display: inline-block; */
    width: 218px;
    height: 62px;
    position: relative;
    top: 4px;
    /* left: -5px; */
}

/* **** Main Object Classes **** */




/* CENTRE */
fieldset.centre .editor-label {
    background-color: hsla(197, 37%, 46%, 0.75);
}

input[type='submit'], button[type='submit'] {
    border-width: 2.5px;
}

fieldset.centre input[type='submit'] {
    border-color: hsl(197, 37%, 46%);
}

.editor-section.centre h3 {
    border-top: 3px solid hsl(197, 37%, 46%);
    color: hsl(197, 37%, 46%);
}

.omnisearch > .searchResult.centre > .flag {
    background-color: hsl(197, 37%, 46%);
}

/* CENTRE GROUP */
fieldset.centreGroup .editor-label {
    background-color: hsla(161, 37%, 46%, 0.75);
}

input[type='submit'], button[type='submit'] {
    border-width: 2.5px;
}

fieldset.centreGroup input[type='submit'] {
    border-color: hsl(161, 37%, 46%);
}

.editor-section.centreGroup h3 {
    border-top: 3px solid hsl(161, 37%, 46%);
    color: hsl(161, 37%, 46%);
}

.omnisearch > .searchResult.centreGroup > .flag {
    background-color: hsl(161, 37%, 46%);
}

/* CENTRE PERSON */

.centrePerson .editor-label {
    background-color: hsla(255, 37%, 46%, 0.75);
}

.centrePerson input[type='submit'] {
    border-color: hsl(255, 37%, 46%);
}

.edit-link.centrePerson {
    background-image: url("../Graphics/EditLink?h=255&s=37&l=46&a=0.75")
}

.editor-section.centrePerson h3 {
    border-top: 3px solid hsl(255, 37%, 46%);
    color: hsl(255, 37%, 46%);
}

.omnisearch > .searchResult.centrePerson > .flag {
    background-color: hsl(255, 37%, 46%);
}

.centrePerson .tag-widget {
    padding-right: 4px;
}

/* CENTRE PERSON ROLE aka Delegation Log */

.tag.role {
    background-color: hsla(255, 37%, 46%, 0.2);
    color: black
}

.tag.role .for-imp {
    background-color: hsla(255, 37%, 46%, 0.5);
    padding: 0 3px 0 3px;
    margin-left: 0.3em;
    border-radius: 2px;
    color: white;
}

.delegation-log-matrix .editor-label {
    background-color: hsla(255, 37%, 30%, 0.75);
}

/* CENTRE PERSON CATEGORY tags */

.tag.client {
    background-color: hsl(134.72deg 37% 46% / 20%);
    color: black
}

.tag.accessRole {
    background-color: hsl(26.47deg 37% 46% / 20%);
    color: black
}

/* CLRN, CRN */

fieldset.clrn .editor-label, fieldset.crn .editor-label {
    background-color: hsla(91, 40%, 38%, 0.75);
}

fieldset.clrn input[type='submit'], fieldset.crn input[type='submit'] {
    border-color: hsl(91, 40%, 38%);
}

.edit-link.clrn, .edit-link.crn {
    background-image: url("../Graphics/EditLink?h=91&s=40&l=38&a=0.75")
}

.omnisearch > .searchResult.clrn > .flag, .omnisearch > .searchResult.crn > .flag {
    background-color: hsl(91, 40%, 38%);
}

/* CLRN, CRN */

.service .editor-label {
    background-color: hsla(316, 40%, 38%, 0.75);
}

.service input[type='submit'] {
    border-color: hsl(316, 40%, 38%);
}

.edit-link.service {
    background-image: url("../Graphics/EditLink?h=316&s=40&l=38&a=0.75")
}

.omnisearch > .searchResult.service > .flag {
    background-color: hsl(316, 40%, 38%);
}


.service.pharmacy .editor-label {
    background-color: hsl(161deg 40% 38% / 75%);
}

.service.pharmacy input[type='submit'] {
    border-color: hsl(161, 40%, 38%);
}

.edit-link.service.pharmacy {
    background-image: url("../Graphics/EditLink?h=316&s=40&l=38&a=0.75")
}

.omnisearch > .searchResult.service.pharmacy > .flag {
    background-color: hsl(161, 40%, 38%);
}


/* R&D */

fieldset.randd .editor-label {
    background-color: hsla(45, 38%, 40%, 0.75);
}

fieldset.randd input[type='submit'] {
    border-color: hsl(45, 38%, 40%)
}

.edit-link.randd {
    background-image: url("../Graphics/EditLink?h=45&s=38&l=40&a=0.75")
}

.omnisearch > .searchResult.rAndD > .flag {
    background-color: hsla(45, 38%, 40%, 0.75);
}

/* LREC */

fieldset.lrec .editor-label {
    background-color: hsla(71, 38%, 40%, 0.75);
}

fieldset.lrec input[type='submit'] {
    border-color: hsl(71, 38%, 40%)
}

.edit-link.lrec {
    background-image: url("../Graphics/EditLink?h=71&s=38&l=40&a=0.75")
}

/* SUBJECT */

.subject .editor-label, .editor-section.subject .editor-label {
    background-color: hsla(355, 43%, 45%, 0.75);
}

fieldset.subject input[type='submit'] {
    border-color: hsl(355, 43%, 45%);
}

.editor-section.subject h3 {
    border-top: 3px solid hsl(355, 43%, 45%);
    color: hsl(355, 43%, 45%);
}

.omnisearch > .searchResult.subject > .flag {
    background-color: hsl(355, 43%, 45%);
}

/* SUBJECT CONTACT */

.subjectContact .editor-label, .editor-section.subjectContact .editor-label {
    background-color: hsla(233, 37%, 46%, 0.75);
}

.subjectContact input[type='submit'] {
    border-color: hsl(233, 37%, 46%);
}

.editor-section.subjectContact h3 {
    border-top: 3px solid hsl(233, 37%, 46%);
    color: hsl(233, 37%, 46%);
}

.omnisearch > .searchResult.subjectContact > .flag {
    background-color: hsl(233, 37%, 46%);
}

/* GP */

fieldset.gp .editor-label {
    background-color: hsla(125, 54%, 23%, 0.75);
}

fieldset.gp input[type='submit'] {
    border-color: hsl(125, 54%, 23%);
}

.editor-section.gp h3 {
    border-top: 3px solid hsl(125, 54%, 23%);
    color: hsl(125, 54%, 23%);
}

.omnisearch > .searchResult.gp > .flag {
    background-color: hsl(125, 54%, 23%);
}


    .edit-link.gp {
        background-image: url("../Graphics/EditLink?h=125&s=54&l=23&a=0.75")
    }


/* OCITEM */

.omnisearch > .searchResult.ocitem > .flag {
    background-color: hsl(155, 43%, 45%);
}

/* CRF ENTRY and TRANSFER */

.crfEntry .editor-label {
    background-color: hsla(140, 40%, 38%, 0.75);
}

.crfEntry input[type='submit'], div.crfEntry input[type='submit'] {
    border-color: hsl(140, 40%, 38%);
}

.edit-link.crfEntry {
    background-image: url("../Graphics/EditLink?h=140&s=40&l=38&a=0.75");
    background-size: 4.5em 4.5em;
    min-height: 4.5em;
    min-width: 4.5em;
}

.transfer .editor-label, .editor-section.transfer .editor-label {
    background-color: hsla(180, 40%, 38%, 0.75);
}

/* CRF */
.omnisearch > .searchResult.crf > .flag {
    background-color: hsl(0, 66%, 27%);
}

/* **** Subject status **** */

.statusFlag.Discharged, .subIndex.Discharged h1 {
    background-color: rgb(100, 39, 4);
}

span.statusFlag.Discharged::before {
    content: 'Discharged'
}

.statusFlag.Died, .subIndex.Died h1 {
    background-color: black; 
}

span.statusFlag.Died::before {
    content: 'Died'
}

span.statusFlag.InCare::before {
    content: 'In care'
}

.statusFlag.Duplicate, .statusFlag.Excluded {
    background-color: hsla(33, 100%, 43%, 1)
}

.statusFlag.InCare, .subIndex.InCare h1 {
    background-color: hsl(129, 41%, 46%);
}

.statusFlag {
    color: white;
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
}

/* **** Centre status **** */

.subIndex.Recruiting h1 {
    background-color: hsl(125, 49%, 37%);
}

.marker.Recruiting {
    fill:  hsl(125, 49%, 37%);
}

.subIndex.ContinuingCare h1, .subIndex.Pending h1  {
    background-color: hsl(51, 70%, 49%);
}

.marker.Pending {
    fill: hsl(51, 70%, 49%);
}

.subIndex.AwaitingStartDate h1 {
    background-color: hsl(24, 42%, 30%);
}

.marker.AwaitingStartDate {
    fill: hsl(24, 42%, 30%);
}

.marker.other {
    fill: lightgray;
}

.marker.DiscontIntervention {
    fill: hsl(1, 92%, 50%);
}

.marker.NoParticipantFU {
    fill: hsl(193, 3%, 56%);
}

.marker.NoCollectDataFromNotes {
    fill: hsl(128, 94%, 38%);
}

.marker.NoCollectDataFromNNRD {
    fill: hsl(48, 87%, 68%);
}

.marker.NoReceiveUpdatesResults {
    fill: hsl(293, 64%, 61%);
}

.marker.NoRoutinelyCollectedDataFU {
    fill: hsl(34, 94%, 38%);
}

.marker.NoInviteFurtherResearch {
    fill: hsl(253, 94%, 38%);
}

.marker.NoShareWithEDEN {
    fill: hsl(179, 94%, 38%);
}

.marker.NoKeepContactDetails {
    fill: hsl(63, 2%, 18%);
}

.marker.NoCollectData {
    fill: hsl(6, 92%, 76%);
}

svg.marker {
    vertical-align: baseline;
    position: relative; top: 0.08em; /* moves the marker slightly below baseline for optical reasons */
}

.ui-tooltip {
    margin: 0; /* 1em 1em 0 1em; */
    padding: 0.5em 1em;
    position: absolute;
    z-index: 1000;
    white-space: nowrap;
}

.ui-tooltip table {
    white-space: normal;
}

.adminReport .ui-tooltip, .adminInterface .ui-tooltip {
    background-color: hsl(35, 20%, 85%);
    font-family: Roboto, "Segoe UI", Verdana, Helvetica, Sans-Serif;
    border: 2px solid white;
}

.adminReport .ui-tooltop {
    font-size: 80%;
}

.adminInterface .ui-toolip {
    font-size: 90%;
}

.widget .ui-tooltip {
    background-color: white;
    font-size: inherit;
}

.ui-tooltip-content span {
    vertical-align: baseline;
}

.ui-tooltip-content .big {
    font-size: 150%;
}

.ui-tooltip-content .right {
    float: right;
    margin-left: 2em;
}

/* Thanks to http://nicolasgallagher.com/pure-css-speech-bubbles/ for idea on how to render triangle using just CSS */
.ui-tooltip-leader {
    content: "";
    position: absolute;
    bottom: -14px;
    border-width: 15px 7px 0 7px;
    border-style: solid;
    display: block;
    width: 0;
}

.adminReport.widget .ui-tooltip-leader {
    border-color: white transparent;
}

.adminReport .ui-tooltip-leader, .adminInterface .ui-tooltip-leader {
    border-color: hsl(35, 20%, 85%) transparent;
}

.help .ui-tooltip-leader {
    border-color: hsl(180, 20%, 85%) transparent;
}

.adminReport .tooltip:hover {
    background-color: hsl(35, 20%, 95%);
}

.adminReport rect.tooltip:hover, .adminReport .tooltip:hover rect,
.adminReport circle.tooltip:hover, .adminReport .tooltip:hover circle
{
    stroke: hsl(35, 40%, 46%);
    stroke-width: 1px;
}

.widget .tooltip:hover {
    background-color: white;
}

.widget rect.tooltip:hover, .widget .tooltip:hover rect, .adminInterface rect.tooltip:hover, .adminInterface .tooltip:hover rect,
.widget circle.tooltip:hover, .widget .tooltip:hover circle, .adminInterface circle.tooltip:hover, .adminInterface .tooltip:hover circle
{
    stroke: white;
    stroke-width: 2px;
}


.ui-tooltip .display-block.nextVertDiv {
    border-right: 2.5px dotted grey;
}

.ui-tooltip .display-label {
    background-color: hsl(35, 20%, 95%) !important;
}



/* for help tooltips */
    .ui-tooltip.help {
        background-color: hsl(180, 20%, 85%);
    }

    .example {
        font-family: monospace;
        padding: 0.2em 0.5em;
        margin: 0 0.2em;
        font-size: 120%;
        color: hsl(134, 89%, 23%);
        background-color: hsla(0, 0%, 100%, 0.5);
    }

    .example.wrong {
        color: hsl(0, 89%, 23%);
    }

    .inline-li {
        display: list-item;
        list-style-type: disc;
        margin-left: 2em;
    }

    kbd {
        border: 1px solid #909090;
        border-bottom-width: 3px;
        border-right-width: 3px;
        border-radius: 4px;
        padding: 2px 5px;
        background-color: hsl(0, 0%, 95%);
    }
/* login
----------------------------------------------------------*/
#login {
    display: table-row;
    font-size: .85em;
    margin: 0;
}

#login a {
    text-decoration: none;
    padding: 0;
}

#login .avatar, #login .name,  #login .logout{
    display: table-cell;
}

#login .avatar img {
    height: 3.8em;
    display: block;
}

#login .name,  #login .logout {
    padding: 0.5em 0.8em;
    vertical-align: top;
    line-height: 1.3em;
}

#login .name {
    background-color: #efeeef;
}

#login .logout {
    background-color: hsl(0, 0%, 75%);
    color: rgb(116, 0, 0);
    font-weight: bold;
}
.omnisearch>.searchResult {
    font-size: 110%;
    padding: 0.3em 0.3em 0.3em 3.9em;
    position: relative
}

.omnisearch>.searchResult + .searchResult {
    border-top: 1px dotted hsl(0, 0%, 70%)
}

.omnisearch > .searchResult > .flag {
    background-color: hsl(0, 30%, 50%);
    color: white;
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    font-size: smaller;
    padding: 0 0.3em;
    border-radius: 3px;
    opacity: 0.8
}

.omnisearch > .searchResult.subject > .flag:before {
    content: 'Partcpt';
}

.omnisearch > .searchResult.subjectContact > .flag:before {
    content: 'Parent';
}

.omnisearch > .searchResult.centre > .flag:before {
    content: 'Site';
}

.omnisearch > .searchResult.centrePerson > .flag:before {
    content: 'Persnl';
}

.omnisearch > .searchResult.gp > .flag:before {
    content: 'GP';
}

.omnisearch > .searchResult.rAndD > .flag:before {
    content: 'R&D';
}

.omnisearch > .searchResult.crn > .flag:before {
    content: 'CRN';
}

.omnisearch > .searchResult.crf > .flag:before {
    content: 'CRF';
}

.omnisearch > .searchResult.ocitem > .flag:before {
    content: 'OC';
}

.searchResult .searchResult {
    font-size: 95%;
    padding: 0.1em 0 0.1em 2em;

    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.5em auto;
    background-image: url("/Content/Child.svg");
}

.searchResult .searchResult:last-child {
    background-image: url("/Content/LastChild.svg");
}

.searchResult .term {
    border-bottom: 1px dotted grey;
}

.searchResult .identifier {
    font-family: monospace;
    font-size: 110%;
    color: hsl(120, 40%, 60%);
}

.parenth {
    color: hsl(200, 0%, 50%);
    /*font-style: italic;*/
}

.parenth:before {
    content: '(';
}

.parenth:after {
    content: ')';
}

.searchResult a {
    text-decoration: none;
    font-size: 85%;
    padding: 0.05em 0.3em;
    margin-left: 0.5em;
    border: 2px solid hsl(0, 0%, 65%);
    border-radius: 4px;
    color: hsl(0, 0%, 40%);
}

#omnisearch {
    padding: 7px 7px;
    border-bottom: 1px solid #DDD;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
    top: -4px;
    left: 20px;
    width: 30em;
    font-family:  Roboto, "Segoe UI", Verdana, Helvetica, Sans-Serif;
    z-index: 120;/* in front of overlay */
    background: url("/Icons/Images/SVG/omnisearch.svg") no-repeat 3px center;
    background-size: 1.8em 1.8em;
    padding-left: 2.5em;
    background-color: white;
}

#omnisearch-container {
    position: relative;
}

#omnisearch-spinner {
    position: absolute;
    bottom: 8px;
    right: -10px; /* 10px in from right (20px-10px) */
    z-index: 120;
    display:  none;
}

.searchResult.highlighted {
    background-color: hsl(60, 100%, 90%)
}

.searchResult.highlighted > a {
    background-color: white;
}
.overlay {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 10%, 10%, 0.5);
    display: none;
}

#overlay {
    z-index: 150;
}

#omnisearch-overlay {
    z-index: 110;
}

.overlay.fixed {
    display: block;
}

.overlay .pop-up {
    background-color: #efeeef;
    padding: 1.5em;
    border: 1px solid #c8c8c8;
    position: relative;
}

#overlay .pop-up {
    top: 6em;
    margin-left: auto;
    margin-right: auto;
    width: 85vw;
    height: auto;
    max-height: 85vh;
    overflow: auto;
    max-width: 1200px;
}

#omnisearch-overlay .pop-up {
    width: 48em;
}

.overlay .pop-up.ui-draggable {
    cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;
}

    .overlay .pop-up.narrow {
        width: 620px !important;
    }

.overlay .pop-up.ui-draggable-dragging {
    cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing;
}

.overlay .pop-up .close-button {
    position: absolute;
    top: 0;
    right: 0.5em;
    font-size: 200%;
    font-weight: bold;
    cursor: pointer;
}


.overlay .pop-up.warning {
    background-color: hsl(0, 70%, 30%);
    border: 1px solid hsl(0, 70%, 30%);
    color: white;
    font-weight: normal;
}


del {
    color: hsl(0, 100%, 37%); background-color: hsl(0, 100%, 90%);
}

ins {
    color: hsl(100, 80%, 37%); background-color: hsl(100, 80%, 90%);
    text-decoration: none;
}

.identifier {
    font-family: monospace;
    opacity: 0.7;
    /* font-size: 1.3em; */
}

.editor-label.tooltip {
    cursor: pointer
}

.arrow {
    font-family: monospace;
    font-size: 150%;
}

.op-changed td.delta {
    position: relative;
    top: -0.2em;
}

.op-added .delta .arrow, .op-deleted .delta .arrow {
    display: none;
}

.for-trial {
    font-style: italic;
}

#al-notes {
    display: none;
}

table#liveFormData th {
    background-color: white;
    padding-left: 0.5em;
}

table#liveFormData {
    height: 50em;
}

table#liveFormData .value, table#liveFormData .control-name {

}

table#liveFormData .value {
    font-family: monospace;
    font-size: 120%;
    max-width: 19em;
    overflow:hidden
}

table#liveFormData .value.type-string {
    color: hsl(240, 100%, 39%);
}

table#liveFormData .value.type-string:before {
    content: '"';
}
table#liveFormData .value.type-string:after {
    content: '"';
}

table#liveFormData .value.type-number {
    color: hsl(125, 100%, 36%);
}

table#liveFormData .value.type-boolean {
    color: hsl(43, 100%, 36%);
}

table#liveFormData .value.type-date {
    color: hsl(184, 100%, 36%);
}

table#liveFormData .value.null {
    color: grey; font-style: italic;
}

table#liveFormData td.control-name, table#liveFormData .rules span {
    color: grey;
    font-family: monospace;
    font-size: 110%
}

table#liveFormData tr.val-error {
    background-color: hsl(342, 43%, 93%)
}

table#liveFormData tr.val-error td.control-name, table#liveFormData tr.val-error td.error {
    color: hsl(342, 90%, 48%);
}

table#liveFormData tr.method-constrainrule span.constrainrule, 
table#liveFormData tr.method-requiredifrule span.requiredifrule, 
table#liveFormData tr.method-onlyifrule span.onlyifrule {
    color: hsl(342, 90%, 48%);
}
.message .ident {
    font-family: Consolas, monospace;
}

.message td {
    vertical-align: baseline;
}

.message.html iframe, .message.html .subjectLine, .message.html .recipients, .message.html .sender, .message.text .sms {
    padding: 3px 15px 3px 10px;
}

.message.html .subjectLine, .message.html .recipients, .message.html .sender {
    background-color: hsl(191, 28%, 82%);
    font-size: 90%;
    border-bottom: 1px solid hsl(191, 28%, 60%)
}

.message.html .sender::before {
    content: 'From: ';
}

.message.html .recipients.to::before {
    content: 'To: ';
}

.message.html .recipients.cc::before {
    content: 'CC: ';
}

.message.html .recipients.bcc::before {
    content: 'BCC: ';
}

.message.html .subjectLine::before {
    content: 'Subject: ';
}

.message.html iframe {
    background-color: hsl(191, 50%, 90%);
    max-height: 100px;
    min-width: 40em;
    padding-right: 3px;
    margin: 0;
    box-sizing: border-box;
}

.message.html.letter-body iframe {
    background-color: white;
    border: 1px solid hsl(0, 0%, 80%);
    max-height: 9em;
}

.message.text .sms {
/*     background-color: hsl(158, 50%, 90%); */
    background-color: hsl(158, 50%, 80%);
    display: inline-block;
    border-radius: 12px 12px 12px 0;
    padding-bottom: 6px;
    margin-right: 2em;
}

/* reverse the orientation of the 'bubble' for incoming SMSs */
.message.text .sms.incoming {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0;
    padding-left: 15px;
    padding-right: 10px;
    float: right;
    margin-right: 0.5em;
    marging-left: 1.5em;
}

.message .warning {
    margin-bottom: 0.5em;
}