/* #### Standard Styles June 2022 #### */

:root {
    --header_color: #163159;
    --header_border: #163159;
    --header_font: OpensansRegular, Verdana, Helvetica, Arial, sans-serif;
    --text_color: #163159;
    --label_font: OpensansRegular, Verdana, Helvetica, Arial, sans-serif;
    --input_font: OpensansRegular, Verdana, Helvetica, Arial, sans-serif;
    --field_background_color: rgba(46, 116, 181, 1);
    --field_border_color: rgba(11, 102, 158, .3);
    --background_color: rgba(28, 109, 178);
    --buttons_color: #428BCA !important;
    --form-width: 90%;
    --form-max-width: 2000px;
    --field-vertical-align: top;
}

/* -- Standard Page level styles -- */

/* Hide title, header/footer, info, summary/attachments/communications sections */
.page-top,
.page-head,
.page-footer,
.infoSection,
.workflowRightTab {
    display: none !important;
}

/* set page background-color */
.page-wrap,
body>div.page-wrap>div.page-content>div.inner {
    background-color: var(--background_color) !important;
}
#workflow-wrapper {
    background-color: transparent !important;
}

/* field vertical alignment */
.workflowContent .formFieldWrapper.align-block-30, .workflowContent .formFieldWrapper.align-block{
    vertical-align: var(--field-vertical-align);
}

/* set form in center of screen and apply shadow */
#workflow-background-wrapper {
    border-right: none;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2) !important;
    float: none;
    margin-top: 50px;
    margin: auto;
}

/* Form width */
div#workflow-background-wrapper {
    border: 0;
    max-width: var(--form-max-width);
    min-width: var(--form-width);
}

/* Hide overflow */
.form-section {
    display: block;
    overflow: hidden;
    padding-left: 10px;
}

/* Reduce padding between submit button and bottom of form */
.form-section,
#StageSubmitForm:not(.recordForm) {
    padding-bottom: 0 !important;
}

/* Anonymous access remove max-width constraint and set width */
body>div.page-wrap>div {
    margin: auto !important;
    max-width: var(--form-max-width);
    width: var(--form-width) !important;
}

body>div.page-wrap>div>div.inner {
    margin: auto !important;
    max-width: 2000px !important;
}

/* Mobile Styles applied to anything less than 768 */
@media only screen and (max-width: 768px) {
    .page-wrap {
        width: 100vw;
    }

    /* Hiding hovertips */
    .qtip {
        display: none !important;
    }

    /* Remove padding from "container" form */
    #StageSubmitForm {
        padding: 0px !important;
    }

    /* All input font size */
    input,
    select:focus,
    textarea {
        font-size: 12px !important;
    }

    /* Help Popups */
    .k-widget.k-window {
        left: 10px !important;
        width: 90vw !important;
    }

    #contentWorkbench {
        width: 100%;
    }

    body>div.page-wrap {
        width: 100%;
        min-width: 100%;
    }

    /* Hide print button */
    #print-preview {
        display: none !important;
    }

    /* Reduce right padding to 0. Change label font size to 11. */
    .workflowContent .formFieldWrapper,
    #ts-form-editor-wrapper .form-element-wrapper {
        font-size: 12px;
        padding: 15px 10px 7px 0px !important;
    }

    /* Change font-size for radio-buttons */
    .formFieldWrapper .radio-checkbox-label,
    .form-element-wrapper .radio-checkbox-label {
        font-size: 12px;
    }

    /* Change font-size for drop-downs */
    .form-element-wrapper .select2-container .select2-selection--single,
    .formFieldWrapper .select2-container .select2-selection--single {
        font-size: 12px;
    }

    /* Change size of Submit & Save buttons */
    .page-content .formFieldWrapper.submit-button-wrapper>div>input,
    .page-content .formFieldWrapper.action-button-wrapper>div>input,
    .page-content .form-section-buttons button,
    .page-content .form-section-buttons input,
    .form-collaboration-stage-submit-button,
    #divWorkflowContent .buttonPopup.blue {
        font-size: 11px !important;
    }
}


/* -- Standard Field level styles -- */

/* Headings */
h3 {
    /* .form-element-wrapper[data-type="heading"] .heading-label-wrapper .editable-text, .form-element-wrapper[data-type="heading"] .heading-label-wrapper input, .page-content .workflowContent .formFieldWrapper.heading-wrapper h3 { */
    color: var(--header_color) !important;
    border-color: var(--header_border) !important;
    font-family: var(--header_font) !important;
}

/* drop-down width */
.select2-container {
    width: 284px !important;
}

/* Field Labels */
label,
input[type="file"] {
    color: var(--text_color) !important;
    font-family: var(--label_font) !important;
}

/* Field Input */
input,
textarea,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"]:not(.select2-search__field),
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
    color: var(--text_color);
    background-color: white;
    border: 1px solid var(--field_border_color);
    font-family: var(--input_font) !important;
    font-size: 14px;
}

body,
.workflowContent,
.radio-checkbox-label {
    color: var(--text_color);
    font-family: var(--input_font) !important;
    font-size: 14px;
}

.main_heading,
.dateField,
.page-content .formFieldWrapper.text-box-wrapper input.input-text,
.formFieldWrapper input.validate-email,
.formFieldWrapper input.validate-phone,
.formFieldWrapper input.validate-ssn,
.formFieldWrapper input.validate-currency,
.form-label,
.form-label.form-label-required,
.new_html_field,
body,
.workflowContent .form-static-text,
.form-element-wrapper .form-static-text,
.form-element-wrapper .form-static-text-area,
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.formFieldWrapper .radio-checkbox-label,
.form-element-wrapper .radio-checkbox-label,
.formFieldWrapper.text-area-wrapper textarea.textarea-input,
.form-element-wrapper.text-area textarea.field,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.page-content .workflowContent .formFieldWrapper:not(.boolean-check-box-wrapper):not(.heading-wrapper) .form-label {
    color: var(--text_color);
}

.formFieldWrapper.text-area-wrapper textarea.textarea-input,
.form-element-wrapper.text-area textarea.field {
    background-color: white;
    border-color: var(--field_border_color);
}

.sigWrapper,
.formFieldWrapper.text-box-wrapper input.input-text,
.form-element-wrapper.text-box input.field {
    color: var(--text_color);
    background-color: white;
    border-color: var(--field_border_color);
    font-family: var(--input_font);
    font-size: 14px;
}

/* SSNS fields */
.withQTip.toCheck.input-text.textfield.validate-ssn {
    background-color: transparent !important;
    color: transparent !important;
    border: 0px !important;
}

.validate-ssn,
.validate-ssn:focus {
    color: transparent !important;
    font-family: OpensansRegular, Verdana, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

.validate-ssn:mask {
    font-family: OpensansRegular, Verdana, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

.truncateWithEllipsis {
    margin-top: 2px !important;
}

/* Signature fields */
.sigPad:not(.standalone) input.name {
    border: 1px solid var(--field_border_color) !important;
    color: var(--text_color);
    margin-right: 2px;
    margin-top: 5px;
    width: 100%;
}

.select2-container--bootstrap .select2-selection {
    color: var(--text_color);
    border: 1px solid var(--field_border_color);
}

/* submit button */
.form-submit-button {
    background-color: var(--buttons_color) !important;
    border-color: var(--buttons_color) !important;
    font-family: var(--label_font) !important;
}

/* all other buttons */
.section-breadcrumb-item.active,
.form-action-button,
.form-save-button,
.form-reset-button,
.form-print-button,
.form-change-section,
.form-collaboration-stage-submit-button,
#divWorkflowContent .buttonPopup.blue {
    background-color: var(--buttons_color) !important;
    border-color: var(--buttons_color) !important;
    font-family: var(--label_font) !important;
}

.section-breadcrumb-item.active {
    background-color: transparent !important;
}

.form-section-buttons {
    padding: 50px 0px 30px 0px;
}

.rc-anchor-light.rc-anchor-normal {
    border: 1px solid var(--field_border_color) !important;
}


/* -- Optional styles -- */

/* Hide print button */
#print-preview {
    display: none !important;
}

/* Remove margin between bottom of form and bottom of page */
div.page-wrap {
    padding-bottom: 0 !important;
}

/* Add extra padding to form */
#workflow-wrapper,
#divWorkflowContent {
    padding: 20px 0 !important;
}