/* 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;
}

.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.5em;
    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;
}

.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;
}

.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 {
    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;
}

.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 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 {
    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;
}

.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: 1px 5px 3px 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;
}