/* Shared CSS between Portal and Admin Bootstrap */

:root {
    /* CSS variables are not supported in IE. Manually hardcoding as a workaround.
    Example:
        color: var(--primary-3);
    is duplicated to:
        color: hsl(218.23, 62%, 39.22%);
    Once IE support is removed, all duplicated lines can be removed safely.
    */
    --gray-1: hsl(217, 11%, 15%);
    --gray-2: hsl(212, 9%, 23%);
    --gray-3: hsl(212, 9%, 32%);
    --gray-4: hsl(206, 7%, 56%);
    --gray-5: hsl(206, 11%, 71%);
    --gray-6: hsl(212, 13%, 83%);
    --gray-7: hsl(217, 14%, 89%);
    --gray-8: hsl(205, 18%, 92%);
    --gray-9: hsl(220, 13%, 95%);
    --gray-10: hsl(220, 27%, 98%);

    --primary-1: hsl(206, 50%, 15%);
    --primary-2: hsl(207, 59%, 28%);
    /* primary-3 is the standard OT blue #2653a2 */
    --primary-3: hsl(218.23, 62%, 39.22%);
    --primary-4: hsl(207, 57%, 45%);
    --primary-5: hsl(207, 59%, 62%);
    --primary-6: hsl(206, 77%, 81%);
    --primary-7: hsl(206, 100%, 97%);

    --warning-1: hsl(39, 100%, 30%);
    --warning-2: hsl(39, 100%, 50%);
    --warning-3: hsl(39, 100%, 65%);
    --warning-4: hsl(41, 86%, 69%);
    --warning-5: hsl(42, 100%, 80%);
    --warning-6: hsl(43, 90%, 92%);
    --warning-7: hsl(42, 100%, 98%);

    --success-1: hsl(155, 59%, 20%);
    --success-2: hsl(146, 66%, 28%);
    --success-3: hsl(145, 63%, 38%);
    --success-4: hsl(145, 55%, 49%);
    --success-5: hsl(146, 57%, 64%);
    --success-6: hsl(141, 67%, 75%);
    --success-7: hsl(142, 81%, 91%);

    --danger-1: hsl(358, 58%, 24%);
    --danger-2: hsl(358, 65%, 32%);
    --danger-3: hsl(358, 69%, 43%);
    --danger-4: hsl(358, 70%, 53%);
    --danger-5: hsl(359, 68%, 64%);
    --danger-6: hsl(359, 73%, 81%);
    --danger-7: hsl(357, 77%, 95%);

    /* --vs-red is accessible on white/yellow-tinted backgrounds */
    --vs-red: hsl(0, 100%, 46%);

    /* --vs-gray is a light gray that is accessible on white backgrounds */
    --vs-gray: hsl(201, 6%, 45%);

    --box-shadow-1: 0 1px 3px hsla(0, 0%, 0%, .2);
    --box-shadow-2: 0 4px 6px hsla(0, 0%, 0%, .2);
    --box-shadow-3: 0 5px 15px hsla(0, 0%, 0%, .2);
    --box-shadow-4: 0 10px 24px hsla(0, 0%, 0%, .2);
    --box-shadow-5: 0 15px 35px hsla(0, 0%, 0%, .2);
}

.text-red {
    /* accessible on white and tan/yellow background */
    color: var(--vs-red);
    color: hsl(0, 100%, 46%);
}

.background-red {
    /* accessible against white text */
    background-color: var(--vs-red);
    background-color: hsl(0, 100%, 46%);
}

.text-bright-blue {
    color: hsl(240, 100%, 50%);
}

/* Modal custom sizes */
.modal-xl {
    /* Bootstrap doesn't have an xl size. lg is 800px. */
    max-width: 1050px;
}

.modal-md {
    /* Bootstrap doesn't have an md size. lg is 800px and sm is 300px. */
    max-width: 500px;
}

.modal-responsive.modal-dialog {
    position: relative;
    display: table;
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

/* Bootstrap datepicker */
.datepicker.form-control {
    /* Use default Bootstrap padding */
    padding: .375rem .75rem;
}

.datepicker table tr td,
.datepicker table tr th {
    width: 30px;
    height: 30px;
    background-color: white;
    vertical-align: middle;
    padding: 1px;
}

.datepicker.datepicker-dropdown table tr td.day:hover {
    background-color: var(--primary-6);
    background-color: hsl(206, 77%, 81%);
    background-image: none;
}

.datepicker.datepicker-dropdown table tr td.day.today {
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    background-image: none;
}

.datepicker.datepicker-dropdown table tr td.day.today:hover {
    background-color: var(--primary-6);
    background-color: hsl(206, 77%, 81%);
    background-image: none;
}

.datepicker.datepicker-dropdown table tr td.new,
.datepicker.datepicker-dropdown table tr td.old {
    color: hsl(0, 0%, 46%) !important;
}

.datepicker.datepicker-dropdown table tr td.day.active,
.datepicker.datepicker-dropdown table tr td span.active.active {
    background-color: var(--primary-4);
    background-color: hsl(207, 57%, 45%);
    background-image: none;
    font-weight: bold;
}

.datepicker.datepicker-dropdown table tr td.day.active:hover,
.datepicker.datepicker-dropdown table tr td span.active.active:hover {
    background-color: var(--primary-5);
    background-color: hsl(207, 59%, 62%);
    background-image: none;
    font-weight: bold;
}

.datepicker.dropdown-menu {
    background-color: white;
}

/* Datepicker clear button */

input.form-control.bootstrapDatepicker {
    margin-right: 0 !important;
    border-right: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Form styles */

.fieldDescriptor,
.fieldDescriptor p {
    color: hsl(201, 6%, 45%);
    font-weight: normal;
    margin-right: 10px;
    font-size: .85rem;
}
.fieldDescriptor:not(.text-right) {
    text-align: left;
}

.fieldError {
    text-align: left;
    color: hsl(0, 100%, 46%);
    font-weight: bolder;
    font-size: .85rem;
}

.highlighted-field {
	background-color: #FF6;
}

/* Form field clear and hide password buttons */

.vs-clear-field-btn, .clearDateField, .hide-password-btn {
    font-size: 1rem;
    border-left: none;
    color: var(--gray-5);
    color: hsl(206, 11%, 71%);
    background-color: white;
    outline: none !important;
    opacity: 100% !important;
}

.vs-clear-field-btn:focus, .clearDateField:focus, .hide-password-btn:focus {
    box-shadow: none;
}

.vs-clear-field-btn:disabled, .clearDateField:disabled, .hide-password-btn:disabled {
    color: var(--gray-8);
    color: hsl(205, 18%, 92%);
}

button.btn.vs-clear-field-btn, button.btn.clearDateField, button.btn.hide-password-btn {
    font-size: 1rem;
    margin: 0;
}

.vs-clear-field-btn:not(:disabled):hover, .clearDateField:not(:disabled):hover, .hide-password-btn:not(:disabled):hover {
    color: var(--gray-4);
    color: hsl(206, 7%, 56%);
    cursor: pointer;
}

/* Input Groups */
/* Allow prepending/appending a select element */
.input-group > .input-group-prepend > select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .input-group-prepend:not(:first-child) > select,
.input-group > .input-group-prepend:first-child > select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.input-group > .input-group-append > select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .input-group-append:not(:last-child) > select,
.input-group > .input-group-append:last-child > select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.input-group > .input-group-append > select,
.input-group > .input-group-prepend > select {
    background: var(--gray-7);
    border-color: var(--gray-5);
}

.input-group > .input-group-append > select:hover,
.input-group > .input-group-prepend > select:hover {
    cursor: pointer;
}

.input-group > .input-group-append > select:focus,
.input-group > .input-group-prepend > select:focus {
    /* Set z-index so that the highlighted border is shown on all edges */
    z-index: 3;
    background: var(--gray-7);
    border-color: var(--gray-5);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
}

/* Datepicker fixes */

input.form-control[type="text"]:not(.form-control-sm),
input.form-control[type="date"]:not(.form-control-sm) {
    /* Fix empty input fields with no height on iOS */
	height: 2.375rem;
}

/* Fix Bootstrap datepicker conflicts with jQuery UI datepicker */
.datepicker {
    padding: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    margin-right: 4px;
}

.datepicker.form-control {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/* MultiPane Select Widget */
form .input-group .ui-multiselect {
    /* Fix the widget rendering incorrectly with the bootstrap_field filter */
    flex-grow: 1;
}

.ui-multiselect .blockUI.blockOverlay {
    /* Disabled multipane */
    background-color: #dae1e8;
    opacity: .4;
}

/* Tooltips */
.tooltip-inner {
    text-align: left;
}

/* Inline help */

.inline-help {
    display: none;
    background-color: var(--primary-6);
    background-color: hsl(206, 77%, 81%);
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
    font-weight: normal;
    margin-top: 0.5rem;
    padding: 10px 15px;
    border-radius: 5px;
}
.fieldError .inline-help p {
    /* Prevent red text from a field error */
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
}
.fieldDescriptor div.inline-help p {
    /* Remove margin added from .fieldDescriptor */
    margin-top: 0;
}

/* Inline notifications */
.vs-modal-info-container,
.vs-modal-warning-container,
.vs-modal-error-container {
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.vs-modal-info-container {
    background-color: var(--primary-6);
    background-color: hsl(206, 77%, 81%);
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
}
.vs-modal-warning-container {
    background-color: #ffe19b;
    color: #404040;
}
.vs-modal-error-container {
    background-color: #fcacaf;
    color: #404040;
}

.vs-modal-info-container::before,
.vs-modal-warning-container::before,
.vs-modal-error-container::before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 15px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 14px;
}
.vs-modal-info-container::before {
    content: "\f129";
}
.vs-modal-warning-container::before {
    content: "\f071";
    color: orange;
}
.vs-modal-error-container::before {
    content: "\f06a";
    color: #a72947;
}

.vs-modal-info p {
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
}

.vs-modal-info-container > .vs-modal-info,
.vs-modal-warning-container > .vs-modal-warning,
.vs-modal-error-container > .vs-modal-error {
    /* Override flexbox default automatic minimum size */
    min-width: 0;
}

.vs-modal-info-container > .vs-only-label,
.vs-modal-warning-container > .vs-only-label,
.vs-modal-error-container > .vs-only-label {
    top: -0.7em;
    left: 1rem;
    border-radius: 4px;
    color: green;
}
.vs-modal-info-container > .vs-only-label {
    border: 1px solid var(--primary-6);
}
.vs-modal-warning-container > .vs-only-label {
    border: 1px solid #ffe19b;
}
.vs-modal-error-container > .vs-only-label {
    border: 1px solid #fcacaf;
}

/* VistaShare Only form fields */

fieldset.vistashareOnly {
    width: 100%;
    padding: 7px;
}

.vistashareOnly legend {
    color: green;
    font-size: .8rem;
    padding-left: 5px;
    margin-bottom: 0;
    padding-right: 5px;
    width: auto;
}