@import url("//cadcss.sharepoint.com///fonts.googleapis.com/css?family=Lexend");

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

/* page background image */
body > div.page-wrap {
  background-color: rgba(10, 38, 68,1) !important;
  background-position: center;
}
@media only screen and (max-width: 1050px) {
  body > div.page-wrap {
    background-size: cover;
    margin: 0px !important;
    width: 100% !important;
  }
}
@media only screen and (max-height: 700px) and (min-width: 1050px) and (max-width: 1750px) {
  body > div.page-wrap {
    background-size: auto 100%;
  }
} 
@media only screen and (min-width: 1750px) {
  body > div.page-wrap {
    background-size: 100% 100%;
  }
}

/* center page */
body > div.page-wrap > div.page-content {
  margin: auto !important;
}

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

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

/* Hide breadcrums */
.section-breadcrumb-item {
  /* display: none; */
  padding: 0 10px 0 8px;
  border-top: none;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: 0px solid #fff;
  cursor: pointer;
  font-size: 0%;
}
.section-breadcrumb-item.active {
  border-bottom: 0px solid #ffffff;
  cursor: default;
}

/* Basic Styles */
body {
    	font-family: 'Lexend', sans-serif !important;
	color: #000;
}

#divWorkflowContent {
	width: 90%;
	height: 100%!important;
	min-height: 100%!important;
	font-family: 'Lexend', sans-serif !important;
}

html, body {
    font-family: 'Lexend', sans-serif !important;
    background: #0A2644 !important;
}

/*   vertical-align top for all fields */
.page-content .workflowContent .formFieldWrapper {
  vertical-align: top;
}

/* add background color and padding so that it's visible above/below form */
#workflow-wrapper {
	background-color: #0A2644 !important;
	padding: 20px 0px!important;
}

/*10up PAGE STYLES*/
:root {
    --c-black: #000;
    --c-dmv-black: #394655;
    --c-white: #fff;
    --c-white-15: hsla(0,0%,100%,0.15);
    --c-dark-blue: #163159;
    --c-dark-blue-50: rgba(22,49,89,0.5);
    --c-dmv-blue: #0077c8;
    --c-dmv-blue-05: #176bad;
    --c-blue-denim: #106fb6;
    --c-blue-venice: #0a5ea3;
    --c-gray: #5d6c7a;
    --c-gray-50: rgba(93,108,122,0.5);
    --c-gray-25: rgba(93,108,122,0.25);
    --c-gray-25-hex: #d3d8dd;
    --c-gray-10: rgba(93,108,122,0.1);
    --c-gray-3: rgba(93,108,122,0.03);
    --c-gray-3-hex: #fafcfe;
    --c-field-gray: #fbfbfb;
    --c-iron-gray: #d6dade;
    --c-mercury-gray: #e5e5e5;
    --c-teal-blue: #0b669e;
    --c-teal-blue-10: #f3f7fb;
    --c-teal-blue-03-hex: #fafcfe;
    --c-teal-blue-30: rgba(11,102,158,0.3);
    --c-teal-blue-50: rgba(11,102,158,0.5);
    --c-teal-blue-7: rgba(11,102,158,0.07);
    --c-dark-green-blue: #0a4a68;
    --c-highlight-blue: #64c7fa;
    --c-highlight-blue-20: #dff4fe;
    --c-highlight-dark-blue: #287bba;
    --c-cloud-blue: #f0f9ff;
    --c-green: #00866a;
    --c-green-medium: #d3eee7;
    --c-green-light: #eef8f6;
    --c-green-xlight: #f5fbfb;
    --c-red: #b91818;
    --c-orange: #ef6c42;
    --c-orange-20: rgba(232,135,20,0.2);
    --c-orange-50: rgba(232,135,20,0.5);
    --c-orange-03: rgba(232,135,20,0.03);
    --c-orange-10: rgba(239,108,66,0.1);
    --c-orange-10-hex: #fdf0ec;
    --c-orange-50: rgba(239,108,66,0.5);
    --c-orange-bold: #d34312;
    --c-orange--xlight: #ffd6a3;
    --c-orange--highlight: #ffa53a;
    --c-orange--highlight-3: rgba(232,135,20,0.03);
    --c-yellow: #ffd457;
    --c-yellow-10: #fdf8f1;
    --c-yellow-20: rgba(255,212,87,0.2);
    --c-yellow-20-hex: #fff6dd;
    --c-brown: #6b490c;
    --link-color: #111;
    --skip-focus-text: #0b669e;
    --skip-focus-text: var(--c-teal-blue);
    --box-shadow: 0 4px 10px rgba(22,27,89,0.05);
    --box-shadow-light: 0 0 20px rgba(0,0,0,0.05);
    --font-primary: 'Lexend', sans-serif !important;
    --font-heading: 'Lexend', sans-serif !important;
    --font-sub-heading: 'Lexend', sans-serif !important;
    --font-size-xxxxlarge: 5rem;
    --font-size-xxxlarge: 4.6875rem;
    --font-size-xxlarge: 3.75rem;
    --font-size-xlarge: 2.5rem;
    --font-size-large: 2rem;
    --font-size-xxmedium: 1.875rem;
    --font-size-xmedium2: 1.75rem;
    --font-size-xmedium: 1.5rem;
    --font-size-medium-21: 1.3125rem;
    --font-size-medium: 1.25rem;
    --font-size-small: 1.125rem;
    --font-size-xsmall: 1rem;
    --font-size-xxsmall: 0.875rem;
    --font-size-xxxsmall: 0.75rem;
    --font-weight-black: 800;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --font-weight-light: 300;
    --spacing-unit-base: 1rem;
    --font-size-paragraph: 1.125rem;
    --font-size-base: 1rem;
    --font-heading1: 5rem;
    --font-heading1: var(--font-size-xxxxlarge);
    --font-heading2: 3rem;
    --font-heading3: 1.75rem;
    --font-heading4: 1.5rem;
    --font-heading4: var(--font-size-xmedium);
    --font-heading5: 1.75rem;
    --font-heading6: 1.25rem;
    --font-heading6: var(--font-size-medium);
    --transition-fast: 200ms;
    --transition-slow: 400ms;
    --max-width-tiny: 540px;
    --max-width-narrow: 740px;
    --max-width-base: 1190px;
    --max-width-medium: 1326px;
    --max-width-large: 1246px;
    --max-width-wide: 1400px;
    --max-width-full: 1440px;
    --slant: 5vw;
    --slant-rem: 6rem;
}

.sigWrapper, .formFieldWrapper.text-box-wrapper input.input-text, .form-element-wrapper.text-box input.field {
    background-color: white;
    border-color: rgba(11,102,158,.3);
    color: #163159;
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}

/* Change border color of small box for signature fields */
.sigPad:not(.standalone) input.name {
    width: 100%;
    border: 1px solid rgba(11,102,158,.3) !important;
    margin-right: 2px;
    margin-top: 5px;
    color: #163159;
    font-family: 'Lexend', sans-serif !important; 
    font-size: 16px !important;
}

/* Font color DMV text blue and font family*/
.main_heading, .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, .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, .form-label, .sub-heading {
    color: #163159 !important;
    font-family: 'Lexend', sans-serif !important;
}

#tsForm-editor, .workflowContent {
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
    color: #163159;
}

.k-dropzone {
    background-color: white;
}
.formFieldWrapper.text-area-wrapper textarea.textarea-input, .form-element-wrapper.text-area textarea.field {
    background-color: white;
    border-color: rgba(11,102,158,.3);
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}
.radio-checkbox-label, .workflowContent .form-static-text, .form-static-text, .form-element-wrapper .form-static-text, .form-element-wrapper .form-static-text-area, .page-content .text-area-wrapper, textarea.textarea-input  {
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}

.select2-container--bootstrap .select2-selection {
    border: 1px solid rgba(11,102,158,.3);
    color: #163159;
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}


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 {
    border: 1px solid rgba(11,102,158,.3);
    background-color: white;
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}

/* Headings */
.new_html_field, .recordForm .formFieldWrapper.heading-wrapper h3, .workflowContent .formFieldWrapper.heading-wrapper 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, .page-content .formFieldWrapper .sub-heading, .form-label .sub-heading {
    color: rgba(10, 38, 68,1) !important;
    border-color: rgba(10, 38, 68,1) !important;
    font-family: 'Lexend', sans-serif !important;
}

/* color and font of submit/save/section buttons */
.form-save-button, .form-reset-button, .form-print-button, .form-change-section, .form-collaboration-stage-submit-button, .form-submit-button, #divWorkflowContent .buttonPopup.blue, .buttonPopup.big, .k-upload .k-upload-button, .form-section-next .form-change-section {
    border-color: #163159 !important;
    background-color: #163159 !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
}
/* add padding under Buttons */
.form-section-buttons {
    padding: 50px 0px 30px 0px;
}

/*signature button font change*/
.sigNav button, .sigNav .type, .sigNav .draw, .sigNav .upload, .sigNav .clear {
    padding: 5px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    font-family: 'Lexend', sans-serif !important;
    margin-right: 10px !important;
}

.rc-anchor-light.rc-anchor-normal{
    border: 1px solid rgba(11,102,158,.3) !important;
}

/*Hide save button*/
.form-section:has(#form-element-wrapper_112 #element112:not(:checked)) .form-submit-button {
    display: none !important;
}

/*   vertical-align bottom fields */
#form-element-wrapper_55,
#form-element-wrapper_40 {
  vertical-align: bottom !important;
}

/*Hide validation field text area and field label*/
#form-element-wrapper_118.formFieldWrapper.text-box-wrapper input.input-text {
    display: none !important;
}

/*Increase font size for REGEX validation text*/
.validation-text,
.required-text {
    font-size: 16px !important;
    margin-top: 2px !important;
}
body div.page-content, body div.inner {
    max-width: 90% !important; 
}