/* Client: West Suffolk Council This is the base CSS iFrame theme for organisations using the govService platform developed by Optima Digital Solutions. This CSS fixes several key issues with the default govService CSS. DO NOT MAKE ANY CSS CHANGES APART FROM CHANGING VARIABLES IN THIS DOCUMENT AS IF YOU RECEIVE AN UPDATED BASE THEME IT MAY OVERWRITE ANY CUSTOM CHANGES. PLEASE MAKE THE CHANGES IN YOUR RELEVANT INDIVIDUAL CSS FILE. Notes: Anywhere in this document where we are modifying row / container margins is thanks to Granicus' mis-use of Bootstrap rows without containers. Always ensure that a row falls within a container to ensure correct padding / margins. */ :root { /* Variables for portal & iframe */ --primary-color: #7d1873; --primary-color-hover: #64145c; --secondary-color: #64145c; --secondary-color-hover: #4f0a48; --btn-radius: 0; --btn-box-shadow: none; --btn-hover-text-color: #FFFFFF; --link-primary-color: #1d70b8; --link-secondary-color: #003078; --link-tertiary-color: #003078; --success-color: #00703C; --success-color-hover: #01532D; --error-color: #D4351C; --error-color-hover: #B22A15; --info-color: #1d70b8; --info-color-hover: #134d7f; --warning-color: #b85523; --warning-color-hover: #9a471d; --grey-light-color: #E6E8EA; --grey-dark-color: #D8DADB; /* Set to 'none' if you want to hide the cancel button that appears at the bottom of each form, set to 'inline-block' if you want it to appear. */ --cancel-button-display-style: inline-block; /* Set to 'underline' if you want anchor links to be underlined, set to 'none' if you do not. */ --a-text-decoration-style: none; /* If underline is set above, define the thickness in default & visited states. */ --a-text-decoration-thickness-normal: 1px; /* If underline is set above, define the thickness in hover, focus & active states. */ --a-text-decoration-thickness-hover: 2px; /* If underline is set above, this changes the offset of the line from the text. */ --a-text-underline-offset: 3px; /* Set to your imported font family name (or default, e.g. Arial, Helvetic, etc) */ --font-family-name: "IBM Plex Sans"; /* Set to your desired font size. */ --font-size: 15px; /* Set to none or block as appropriate to show the green checkmark when a field is valid. It is a good idea to disable this if you ever have stacked elements, because the green checkmark when a valid option is chosen is confusing when buttons / radio / checkboxes are stacked. */ --field-check-display: none; /* Variables for iframe */ --services-list-bg-inactive-color: #EEEEEE; --services-list-bg-active-color: #7d1873; --services-list-border-color: #7d1873; --services-list-border-thickness: 0; --services-list-border-radius: 4px; } /* Font Family */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300..800;1,300..800&display=swap'); body, html, .nav>li>button, body._AF a, body._AF div, body._AF h1, body._AF h2, body._AF h3, body._AF h4, body._AF h5, body._AF p, body._AF span:not(.fa), div._AF a, v._AF div, div._AF h1, div._AF h2, div._AF h3, div._AF h4, div._AF h5, div._AF p, div._AF span:not(.fa), html._AF a, html._AF div, html._AF h1, html._AF h2, html._AF h3, html._AF h4, html._AF h5, html._AF p, html._AF span:not(.fa), body._AF article, body._AF footer, body._AF form, body._AF header, body._AF input, body._AF label, body._AF nav, body._AF section, body._AF select, body._AF textarea, div._AF article, div._AF footer, div._AF form, div._AF header, div._AF input, div._AF label, div._AF nav, div._AF section, div._AF select, div._AF textarea, html._AF article, html._AF footer, html._AF form, html._AF header, html._AF input, html._AF label, html._AF nav, html._AF section, html._AF select, html._AF textarea { font-family: var(--font-family-name), sans-serif !important; } body { /* Padding is removed as it is included in the Case View iframe CSS for some bizarre reason. */ padding: 0 !important; } /* Font Sizing */ p, ul, li, .achieveforms-container .all-sections .field .fieldContent .fieldName, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper label { font-size: var(--font-size) !important; } body._AF h2, div._AF h2, html._AF h2 { font-size: 28px !important; } /* Check mark next to field when valid */ .achieveforms-container .all-sections .field .icon-valid { display: var(--field-check-display) !important; } /* General Changes */ a { color: var(--link-primary-color); text-decoration: var(--a-text-decoration-style); text-decoration-color: var(--link-primary-color); text-decoration-thickness: var(--a-text-decoration-thickness-normal); text-underline-offset: var(--a-text-underline-offset); } a:hover, a:focus, a:active { color: var(--link-secondary-color); text-decoration: var(--a-text-decoration-style); text-decoration-color: var(--link-secondary-color); text-decoration-thickness: var(--a-text-decoration-thickness-hover); text-underline-offset: var(--a-text-underline-offset); } .btn, .btn-af, button { /* We always disable any button text decoration as this is usually not needed, you can change this if required. */ text-decoration: none !important; } * { /* We remove all shadows as their implementation is not great. */ text-shadow: none !important; box-shadow: none !important; } [data-type="html"] > *:last-child { /* For any HTML in forms, we remove bottom margin from the last element. */ margin-bottom: 0; } /* Row Fixes */ #app-content > .row { margin-left: -30px; margin-right: -30px; } #page-container, #page-container #page { padding: 0 !important; } #page.render .achieveforms-container { /* We add 16px of padding to the right to make sure that the tabs don't overflow on desktop. */ padding-right: 16px !important; } #self-content { max-width: 100% !important; } /* Spinner - Updated icon */ .spinner { width: 16px !important; height: 16px !important; border: 4px solid rgba(1, 120, 215, 0.4) !important; border-top: 4px solid #0178d7 !important; border-radius: 50% !important; animation: smooth-spin 1s linear infinite !important; position: fixed !important; left: 95% !important; top: unset !important; } .spinner > div { display: none !important; } @keyframes smooth-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Spinner - Full overlay */ /*.loading.spinner-outer { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: block; z-index: 99999; } .spinner { width: 64px !important; height: 64px !important; border: 10px solid #b9cde6 !important; border-top: 10px solid #235da4 !important; border-radius: 50% !important; animation: smooth-spin 1s linear infinite !important; position: fixed !important; left: 50% !important; top: 50% !important; } .spinner > div { display: none !important; } @keyframes smooth-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }*/ /* Service Group Height Fix (requires JS to implement correctly) */ .service-groups a.fsservice-pretty-link div { /* You need to remove this element to make the description visible. */ display: none !important; } .service-groups a.fsservice-pretty-link div, .service-groups a.fsservice-pretty-link h2 { /* We make text and content overflow visible and normalise whitespace to allow for JS to generate the correct heights and to prevent the scrollbar from appearing. */ white-space: normal; overflow-x: visible; text-overflow: unset; } .service-groups ul.menu li { /* We equalise the width so that all service groups (if used) span the full container width and update padding so it is equal. */ width: 33.33%; padding: 0.5em 0.5em 0 0; } .service-groups ul.menu li:nth-child(3n) { /* We remove any right side padding on every 3rd service group. */ padding-right: 0; } @media (max-width: 767px) { .service-groups ul.menu li { /* We set the width to span the full screen and remove any right side padding. */ width: 100% !important; padding-right: 0 !important; } .desktop_forms { /* We make the width of the columns for each service 100% width. */ max-width: 100% !important; } } /* Title & Form Controls for MyRequests / Services Pages */ #app-content .title, #app-content #hello-title { font-weight: bold; border-bottom: 5px solid var(--primary-color); padding-bottom: 5px !important; display: table !important; margin-bottom: 20px !important; color: #333333 !important; width: auto !important; } #app-content .input-group .form-control { height: 50px !important; border-radius: 0 !important; border-right: 0 !important; } #app-content .input-group-btn .btn-search { height: 50px !important; border-radius: 0 !important; } /* MyRequests Page */ #app-content .table_controls { margin-top: 40px !important; } #app-content #table_filters { background: #f1f1f1; padding: 20px 30px; } #app-content #table_filters .form-control { height: 50px !important; border-radius: 0 !important; } #app-content #table_filters label { margin-right: 10px; } #app-content #table_filters #search-submit { height: 50px; border-radius: 0; font-size: 18px; margin-left: 0 !important; } @media only print, only screen and (max-width: 768px) { #app-content #table_filters #search-submit i { font-size: 14px !important; margin-top: -2px !important; margin-left: -2px !important; } } #app-content #table_filters .table_display { margin-right: 10px; } #app-content .table_actions .table_buttons .action_btn { margin-left: 5px; margin-right: 5px; border-radius: 0; margin-top: -2px; } #app-content .table_actions .table_buttons .page { background: #f1f1f1; display: inline-block; margin: 0 5px; padding: 10px 20px; } #app-content .table_actions .table_buttons .page p { margin: 0 !important; } #MyRequestTable { margin-top: 40px !important; } #MyRequestTable tbody > tr > td, #MyRequestTable tbody > tr > th, #MyRequestTable tfoot > tr > td, #MyRequestTable tfoot > tr > th, #MyRequestTable thead > tr > td, #MyRequestTable thead > tr > th { padding: 15px 20px !important; font-size: var(--font-size) !important; } #MyRequestTable tbody > tr:first-of-type > td, #MyRequestTable tbody > tr:first-of-type > th { border-top: 0 !important; } #MyRequestTable thead > tr > td, #MyRequestTable thead > tr > th { color: #FFFFFF; background: var(--primary-color); border: 0 !important; } #MyRequestTable .case-row { background: #F1F1F1 !important; } #MyRequestTable h2 { font-size: var(--font-size) !important; } #MyRequestTable .btn-info { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } #MyRequestTable .btn-info:hover, #MyRequestTable .btn-info:focus, #MyRequestTable .btn-info:active { background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; color: var(--btn-hover-text-color) !important; } .no-requests { margin-top: 30px !important; background: #c74848; color: #FFFFFF; border-radius: 5px; padding: 20px; } /* Case View Panels */ #accordian { padding-top: 0 !important; } #accordian .panel { border-radius: 0 !important; border-color: #cccccc !important; } #accordian .panel-title > a { background-color: #00703c !important; box-shadow: 0 2px 0 #002d18 !important; display: inline-block !important; padding: 10px !important; color: #FFFFFF !important; } #accordian .panel-title > a:hover { background-color: #005a30 !important; text-decoration: none !important; } #accordian .subtitle { font-size: var(--font-size) !important; color: #333333 !important; } #accordian .summary-in-title { font-size: 14px !important; color: #333333 !important; } #current-tasks .panel-primary { border-color: var(--primary-color); border-radius: 0 !important; } #current-tasks .panel-primary > .panel-heading { background-color: var(--primary-color); border-color: var(--primary-color); border-radius: 0 !important; } #current-tasks .panel-title { font-size: 18px !important; } /* Custom Modules */ /* Info Cards */ .infoCard { padding: 20px; text-align: center; background: #EEEEEE; margin-top: 10px; } .infoCard h2 { margin-top: 0; font-size: 42px !important; margin-bottom: -5px; } .infoCard p { margin: 0 !important; font-size: 12px; } /* Inline Subforms */ .isRepeatable.inlineSubform.fieldInput { border: 1px solid #bfc1c3 !important; border-radius: 5px !important; padding: 20px !important; width: 91.66666667% !important; margin-bottom: 20px !important; } .isRepeatable.inlineSubform.fieldInput .fillinButtons-wrapper { width: 100% !important; } .isRepeatable.inlineSubform.fieldInput .subform-summary-text { padding: 10px 15px !important; background: #EEEEEE !important; border-radius: 4px !important; display: inline-block !important; margin-bottom: 15px !important; } .isRepeatable.inlineSubform.fieldInput .fillinButtons .btn { margin-right: 10px !important; padding: 8px 12px !important; font-size: 14px !important; } /* Repeatable Subforms */ [data-field-type="subform"] .repeatable-table-wrapper { margin-bottom: 15px !important; } .repeatable-table-wrapper > .repeatable-table { border-spacing: 0 !important; } .repeatable-value-header > tr > th { background-color: #F9F9F9 !important; } .repeatable-value-header { pointer-events: none !important; } .edit-column .fa-caret-down:before { content: " " !important; font-family: var(--font-family-name), sans-serif !important; font-size: var(--font-size) !important; font-weight: 700 !important; line-height: 1.42857143 !important; margin-left: 5px !important; color: #444444 !important; } .repeatable-table-wrapper .repeat-edit-btn .fa:before { content: "\f040" !important; } .repeatable-table-wrapper > .repeatable-table > tbody > tr > td, .repeatable-table-wrapper > .repeatable-table > tbody > tr > th, .repeatable-table-wrapper > .repeatable-table > thead > tr > td, .repeatable-table-wrapper > .repeatable-table > thead > tr > th { padding: 9px; border-top: 1px solid #DDDDDD !important; text-align: left !important; font-size: var(--font-size) !important; } .repeatable-table-wrapper > .repeatable-table > tbody > tr:last-of-type > td, .repeatable-table-wrapper > .repeatable-table > tbody > tr:last-of-type > th { border-bottom: 1px solid #DDDDDD !important; } .repeatable-table-wrapper > .repeatable-table > tbody > tr > td:first-of-type, .repeatable-table-wrapper > .repeatable-table > tbody > tr > th:first-of-type, .repeatable-table-wrapper > .repeatable-table > thead > tr > td:first-of-type, .repeatable-table-wrapper > .repeatable-table > thead > tr > th:first-of-type { border-left: 1px solid #DDDDDD !important; } .repeatable-table-wrapper > .repeatable-table > tbody > tr > td:last-of-type, .repeatable-table-wrapper > .repeatable-table > tbody > tr > th:last-of-type, .repeatable-table-wrapper > .repeatable-table > thead > tr > td:last-of-type, .repeatable-table-wrapper > .repeatable-table > thead > tr > th:last-of-type { border-right: 1px solid #DDDDDD !important; } .repeatable-table-wrapper > .repeatable-table .editing, .repeatable-table-wrapper > .repeatable-table .editing td, .repeatable-table-wrapper > .repeatable-table .editing th { background: #F9F9F9 !important; } .repeatable-table-wrapper > .repeatable-table > thead, .repeatable-table-wrapper > .repeatable-table { border: none !important; } .repeatable-table-wrapper > .repeatable-table th, .repeatable-table-wrapper > .repeatable-table td { border-bottom: none !important; } /* Submission Message */ .submission-message { padding-bottom: 0 !important; } .submission-message-content { text-align: center; width: 50%; margin-left: auto; margin-right: auto; background: #FFFFFF; border: 1px solid #DDD; border-left: 5px solid var(--primary-color); padding: 20px; margin-bottom: 15px; } .submission-message-content h2 { color: var(--primary-color) !important; } .submission-message-content > *:last-child { /* For submission message, we remove bottom margin from the last element. */ margin-bottom: 0; } /* Panels */ .panel-default { background: #EEEEEE; padding: 15px 20px; margin-bottom: 20px; } /* Loading Bar */ .progress { height: 30px !important; border-radius: 0 !important; margin-bottom: 20px !important; box-shadow: none !important; margin-left: 5px !important; margin-right: 5px !important; background-image: none !important; background-color: #DDDDDD !important; } .progress-bar { background-color: var(--primary-color) !important; line-height: 30px !important; font-weight: 700 !important; font-size: 15px !important; } /* Field input sizing */ .achieveforms-container .all-sections .field .fieldContent select.fieldInput, .achieveforms-container .all-sections .field .fieldContent textarea.fieldInput, .achieveforms-container .all-sections .field .fieldContent input.fieldInput, .achieveforms-container .all-sections .field .fieldContent .select2-container { width: 90% !important; max-width: 30em; } .achieveforms-container .all-sections .field .fieldContent .prefix-suffix-mode { max-width: 30em !important; } .achieveforms-container .all-sections .field .fieldContent .prefix-suffix-mode .fieldInput { width: 100% !important; max-width: 30em !important; } input[type=radio]+label, input[type=radio]+label.btn, input[type=checkbox]+label, input[type=checkbox]+label.btn { width: 100% !important; max-width: 30em !important; } .fieldInput.upload { max-width: 30em !important; } /* Form Header & Navigation Tabs */ .formName { margin-bottom: 15px !important; } .achieveforms-container .sectionsHead { margin-left: 15px; background: none; } .achieveforms-container .sectionsHead .nav-tabs>li.active>button, .achieveforms-container .sectionsHead .nav-tabs>li.active>button:focus, .achieveforms-container .sectionsHead .nav-tabs>li.active>button:hover, .achieveforms-container .sectionsHead .nav-tabs>li.active>a, .achieveforms-container .sectionsHead .nav-tabs>li.active>a:focus, .achieveforms-container .sectionsHead .nav-tabs>li.active>a:hover { background-color: var(--primary-color); color: #FFFFFF !important; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.active :focus { background: var(--primary-color-hover) !important; text-decoration: none !important; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper :focus { text-decoration: none !important; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.active:first-child .sectionNameTab { border-radius: 4px; border: 1px solid transparent; } .achieveforms-container .sectionsHead .sectionsHeadInner { border: none; } .nav-tabs > li > button, .nav-tabs > li > a { margin-right: 5px; background-color: #EEEEEE; color: #333333; padding: 13px 20px; text-decoration: none; font-size: 16px; border-radius: 4px; border: 1px solid transparent !important; margin-bottom: 6px !important; } .no-touch .achieveforms-container .sectionsHead .sectionNameWrapper:hover { color: #333333; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper:focus { text-decoration: none; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.active .sectionNameTab { border: none; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.active:focus { background-color: var(--secondary-color) !important; color: #FFFFFF !important; text-decoration: none; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.valid { color: inherit; } /* Field Name */ ._fieldName, .fieldName { margin-top: 4px; font-weight: 700 !important; font-size: 18px !important; padding-bottom: 2px !important; } /* Dropdown Nav */ .achieveforms-container .sectionsHead .sections-toggle-wrapper .active-section-name, .achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle i { color: #FFFFFF !important; font-size: var(--font-size) !important; display: inline-block !important; font-weight: 600 !important; top: 0 !important; } .achieveforms-container .sectionsHead .sections-toggle-wrapper { border-bottom: 1px solid var(--primary-color); background: var(--primary-color); padding: 20px 15px; margin-bottom: 15px; min-height: auto !important; } .achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle { position: unset !important; float: none !important; padding: 0 15px !important; margin: 0 !important; } .achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle:focus, .achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle:active, .achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle:hover { box-shadow: none !important; cursor: pointer; } /* Field Uploads */ .readOnlyAttachments .resumable-drop, .readOnlyAttachments .fileCount { display: none !important; } .readOnlyAttachments .resumable-list { margin-top: 5px !important; background: #F9F9F9 !important; padding: 10px 15px !important; max-height: 20em !important; } .readOnlyAttachments .resumable-file { display: inline-block !important; overflow: visible !important; margin-top: 5px !important; } .readOnlyAttachments .resumable-list::before { content: "\f019\00a0\00a0 Click each file link below to download files as required."; display: block; margin-top: 5px; margin-bottom: 10px; font-weight: 700; font-family: "FontAwesome", var(--font-family-name), sans-serif; } .upload-button { font-size: var(--font-size) !important; } .fieldInput .resumable-drop { background: var(--grey-dark-color) !important; margin-bottom: 15px; padding: 15px !important; border-radius: 8px !important; border: 0 !important; } .fieldInput .resumable-drop .upload-button { border-radius: 4px !important; } .fieldInput .resumable-file { overflow: visible !important; min-height: auto !important; float: left !important; margin-right: 10px !important; margin-bottom: 5px !important; } .achieveforms-container .resumable-list i.remove-upload { margin-top: 0 !important; margin-left: 10px !important; } .fieldInput .resumable-list { overflow: visible !important; margin-top: 15px !important; } .fieldInput .resumable-list .imagePreview { display: none !important; } .fieldInput .resumable-file .resumable-file-name { padding: 0 !important; } .fieldInput .resumable-file .resumable-file-name, .fieldInput .resumable-file .resumable-file-progress { color: #333333 !important; } .fieldInput.upload { text-align: left; background: var(--grey-light-color) !important; padding: 15px !important; border-radius: 8px !important; } .fieldInput .fileCount { text-align: left; width: 100%; margin-top: 10px; display: block !important; float: none !important; } .fieldInput.upload:has(input[readonly][disabled]) .resumable-list { margin: 0 !important; } .fieldInput.upload:has(input[readonly][disabled]) .resumable-list::before { content: "\f019\00a0\00a0 Click each file link below to download files as required."; display: block; margin-top: 5px; margin-bottom: 10px; font-weight: 700; font-family: "FontAwesome", var(--font-family-name), sans-serif; text-align: left; } .fieldInput.upload:has(input[readonly][disabled]) .resumable-file-name { padding-left: 0 !important; } /* Error Messages */ ._AF label.error, .achieveforms-container label.error { font-size: var(--font-size); font-weight: 700; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; color: var(--error-color); } .error-wrapper { border-left: 4px solid var(--error-color); padding-left: 15px; padding-top: 5px; padding-bottom: 5px; width: 100%; } /* Buttons */ .achieveforms-container .fillinButtons .btn { background: var(--primary-color); color: #FFFFFF; padding: 10px 15px; font-size: var(--font-size); border: 0; box-shadow: none; margin-bottom: 5px !important; } .achieveforms-container .fillinButtons .btn.cancelbutton { display: var(--cancel-button-display-style); background: var(--error-color) !important; } .render-subform .achieveforms-container .fillinButtons-wrapper { margin-bottom: 0 !important; } .render-subform .achieveforms-container .fillinButtons .btn.cancelbutton, .render-subform-modal .achieveforms-container .fillinButtons .btn.cancelbutton { display: block; float: left !important; margin-left: 0 !important; } .render-subform-modal .fillinButtons { margin-top: 20px; } .achieveforms-container .fillinButtons .btn span { padding-right: 0; } .btn-default, .btn-af { border: 1px solid transparent; background: var(--primary-color) !important; box-shadow: none !important; text-shadow: none !important; padding: 10px 20px !important; color: #FFFFFF !important; -webkit-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out, ease-in-out; -webkit-transition-property: background-color, color, border-color; transition-property: background-color, color, border-color; } .btn { border: 1px solid transparent; box-shadow: none !important; text-shadow: none !important; padding: 10px 20px !important; color: #FFFFFF; -webkit-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out, ease-in-out; -webkit-transition-property: background-color, color, border-color; transition-property: background-color, color, border-color; } .btn-af:hover, .btn-af:focus, .btn-af:active, .btn-default:hover, .btn-default:focus, .btn-default:active { background: var(--secondary-color) !important; color: var(--btn-hover-text-color) !important; } .btn-success { background-color: var(--success-color); border-color: var(--success-color); } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--success-color-hover); border-color: var(--success-color-hover); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-color-hover); border-color: var(--primary-color-hover); } .btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: var(--warning-color-hover); border-color: var(--warning-color-hover); } .btn-danger { background-color: var(--error-color); border-color: var(--error-color); } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--error-color-hover); border-color: var(--error-color-hover); } .btn-info { background-color: var(--info-color); border-color: var(--info-color); } .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--info-color-hover); border-color: var(--info-color-hover); } ._AF .btn.btn-default, .achieveforms-container .btn.btn-default { font-family: var(--font-family-name), sans-serif; font-size: var(--font-size); } button.btn.btn-default.field-btn.launchSubform::before { font-family: 'FontAwesome'; content: "\f067 "; } /* Field Inputs - READ ONLY */ .fieldContent:not(:has(.required, .mandatory)) > label::after { /* Adds (optional) to the end of each label where the field is not required. */ content: "(optional)" !important; font-size: 90% !important; } .fieldContent .mandatory { font-size: 16px !important; } .radio-wrapper:has(label.btn) { display: inline-block !important; margin-right: 7px !important; } ._AF .currency-prefix-wrapper.readonly .currency-prefix, ._AF .postfix-wrapper.readonly .postfix, ._AF .prefix-wrapper.readonly .prefix, ._AF .readonly, ._AF fieldset[disabled] input, ._AF input[readonly]:not(.iemobile-pseudo-readonly), ._AF select[readonly], ._AF textarea[readonly], .achieveforms-container .currency-prefix-wrapper.readonly .currency-prefix, .achieveforms-container .postfix-wrapper.readonly .postfix, .achieveforms-container .prefix-wrapper.readonly .prefix, .achieveforms-container .readonly, .achieveforms-container fieldset[disabled] input, .achieveforms-container input[readonly]:not(.iemobile-pseudo-readonly), .achieveforms-container select[readonly], .achieveforms-container textarea[readonly] { background: #eeeeee !important; } .achieveforms-container .all-sections .field .fieldContent .fieldInput.view-data, .achieveforms-container .all-sections .field .fieldContent .prefix-suffix-mode.view-data { line-height: 20px !important; background: #eeeeee !important; width: 30em !important; border-radius: 4px !important; padding: 10px 13px !important; } .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .check2[disabled].checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .check2[disabled]:checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .radio2[disabled].checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .radio2[disabled]:checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .check2[disabled].checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .check2[disabled]:checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .radio2[disabled].checked+label, .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .radio2[disabled]:checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .check2[disabled].checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .check2[disabled]:checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .radio2[disabled].checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .checkbox-wrapper .radio2[disabled]:checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .check2[disabled].checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .check2[disabled]:checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .radio2[disabled].checked+label, .product_service .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput .radio-wrapper .radio2[disabled]:checked+label { line-height: 20px !important; background: #eeeeee !important; width: 30em !important; border-radius: 4px !important; padding: 10px 13px !important; margin-top: 5px !important; display: block !important; width: auto !important; } input[type=checkbox]+label:before { display: inline-block !important; } /* Field Inputs */ .product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.vertical .radio-wrapper label { white-space: normal; } .achieveforms-container .all-sections .field .fieldContent .postfix-wrapper:not(.textarea-length-count):not(.input-length-count) .postfix, .achieveforms-container .all-sections .field .fieldContent .prefix-wrapper .postfix, .achieveforms-container .all-sections .field .fieldContent .postfix-wrapper:not(.textarea-length-count):not(.input-length-count) .prefix, .achieveforms-container .all-sections .field .fieldContent .prefix-wrapper .prefix { height: 40px; margin-top: 5px; border-color: #949494; } #range { height: 40px; margin-top: 5px; } .noUi-horizontal .noUi-handle { top: 0px !important; } .achieveforms-container .all-sections .field .fieldContent .fieldInput.noUi-target.valid .noUi-connect, .achieveforms-container .all-sections .field .fieldContent .prefix-suffix-mode.noUi-target.valid .noUi-connect { background-color: var(--primary-color); } input[type="text"], input[type="number"], input[type="password"] { border-radius: 5px !important; padding: 10px 13px !important; height: 40px !important; margin-top: 5px !important; } textarea { padding: 10px 13px !important; } .select2-search-field input[type="text"] { height: 37px !important; margin-top: 0 !important; padding: 0 !important; padding-left: 5px !important; } select { height: 40px !important; border-radius: 5px !important; padding: 7px 10px !important; } ._AF .select2-container.select2-container-multi .select2-choices, .achieveforms-container .select2-container.select2-container-multi .select2-choices, ._AF .select2-container .select2-choice, .achieveforms-container .select2-container .select2-choice { height: 40px !important; padding-top: 6px !important; } .select2-arrow { padding-top: 6px !important; padding-right: 5px !important; } .select2-drop { border-color: #949494 !important; box-shadow: none !important; margin-top: -4px !important; } ._AF .select2-container.select2-container-multi .select2-choices .select2-search-choice, .achieveforms-container .select2-container.select2-container-multi .select2-choices .select2-search-choice, ._AF .select2-container .select2-choice, .achieveforms-container .select2-container .select2-choice { margin-top: 6px !important; background: #FFFFFF !important; color: #333333 !important; border: 1px solid #949494 !important; box-shadow: none !important; border-radius: 5px !important; } ._AF .select2-container.select2-dropdown-open .select2-choice, ._AF .select2-container.select2-dropdown-open .select2-choices, .achieveforms-container .select2-container.select2-dropdown-open .select2-choice, .achieveforms-container .select2-container.select2-dropdown-open .select2-choices { border: 1px solid #949494 !important; } .achieveforms-container .all-sections .field .fieldContent .fieldInput.select2-container.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { top: 5.5px !important; color: #333333 !important; } input[type=checkbox]:checked+label.btn, input[type=radio]:checked+label.btn, .no-touch .achieveforms-container .field fieldset.fieldInput.valid input[type=checkbox]+label.btn:hover, .no-touch .achieveforms-container .field fieldset.fieldInput.valid input[type=radio]+label.btn:hover { background-color: var(--primary-color); } .open .dropdown-toggleinput[type=checkbox]:checked+label.btn, .open .dropdown-toggleinput[type=radio]:checked+label.btn, input[type=checkbox]:checked+label.btn.active, input[type=checkbox]:checked+label.btn:active, input[type=checkbox]:checked+label.btn:focus, input[type=checkbox]:checked+label.btn:hover, input[type=radio]:checked+label.btn.active, input[type=radio]:checked+label.btn:active, input[type=radio]:checked+label.btn:focus, input[type=radio]:checked+label.btn:hover { background-color: var(--primary-color); } input[type=checkbox]+label.btn, input[type=radio]+label.btn { padding: 8px 20px; } .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[data-type=date-subfield], .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=checkbox]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=radio]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid+input.other-input, input[type=radio]:active, input[type=radio]:focus, input[type=radio]:hover, input[type=checkbox]:active, input[type=checkbox]:focus, input[type=checkbox]:hover { border-color: var(--primary-color) !important; } .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[data-type=date-subfield], .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[type=checkbox]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[type=radio]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error+input.other-input { border-color: var(--primary-color) !important; } .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[data-type=date-subfield], .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[type=checkbox]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error input[type=radio]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.error+input.other-input { border-color: var(--primary-color) !important; } ._AF input[type=text].displayAsSeparated.year, .achieveforms-container input[type=text].displayAsSeparated.year { width: 5em !important; text-align: center; } ._AF input[type=text].displayAsSeparated, .achieveforms-container input[type=text].displayAsSeparated { width: 4em !important; text-align: center; } /* Alerts */ .alert { border: 1px solid transparent; box-shadow: none; text-shadow: none; padding: 20px; color: #FFFFFF; margin-bottom: 10px; line-height: 1.5em; } .alert a { color: #FFFFFF; text-decoration: underline; } .alert-info { background: var(--info-color); } .alert-success { background: var(--success-color); } .alert-danger { background: var(--error-color); } .alert-warning { background: var(--warning-color); } .alert .btn-default, .alert .btn-default:hover, .alert .btn-default:focus, .alert .btn-default:active { background: #FDFDFD !important; color: #333333 !important; } /* Services List */ .search-form .input-lg { height: 42px; border-right: 0; } .serviceColumnLetter { font-weight: bold; color: var(--primary-color); font-size: 26px; } .list-unstyled { border-bottom: 1px solid #bfc1c3; margin-bottom: 25px; } .list-unstyled li { margin-bottom: 20px; margin-top: 0; } .list-unstyled li > a { font-size: 18px; color: #000000 !important; } .list-unstyled .form-link-color { color: var(--link-primary-color) !important; } .list-unstyled .form-link-color:hover, .list-unstyled .form-link-color:focus, .list-unstyled .form-link-color:active { color: var(--link-secondary-color) !important; } .search-row .btn-search { height: 42px !important; line-height: 0; background-color: var(--primary-color); border-color: var(--primary-color); } .search-row .btn-search:hover, .search-row .btn-search:focus, .search-row .btn-search:active { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--btn-hover-text-color); } .search-row { margin-bottom: 35px; margin-top: 20px; } .search .fa-times { top: 12px; right: 12px; font-size: 18px; } .service-groups .fsservice-pretty-link { border: var(--services-list-border-thickness) solid var(--services-list-border-color) !important; border-radius: var(--services-list-border-radius) !important; background: var(--services-list-bg-inactive-color) !important; color: #333333 !important; width: 100% !important; padding: 15px !important; } .service-groups a.fsservice-pretty-link.active { border: var(--services-list-border-thickness) solid var(--services-list-border-color) !important; background: var(--services-list-bg-active-color) !important; color: #FFFFFF !important; } /* Modal (used for subforms) */ .modal.af-modal { margin-top: 20px; top: 0 !important; } .modal-footer { display: none !important; } .modal-title { font-size: 24px !important; } /* Media Queries */ @media only print, only screen and (max-width: 768px) { .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper .sectionNameTab { padding-left: 20px !important; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper:last-of-type .sectionNameTab { margin-bottom: 0 !important; } .achieveforms-container .sectionsHead .sectionsHeadInner .sectionNameWrapper.active:first-child .sectionNameTab { border-radius: 0 !important; } .achieveforms-container .sectionsHead { margin-left: 0 !important; } fieldset[data-type="date"] { margin-top: 25px !important; } .submission-message-content { width: 100%; } ._AF .row .row, .achieveforms-container .row .row { margin-left: 0; margin-right: -15px; } .achieveforms-container .all-sections .field .fieldContent .fieldName { min-height: 0; padding-left: 0; } .achieveforms-container .fillinButtons-wrapper .fillinButtons .btn { padding: 10px 15px; font-size: var(--font-size); } #app-content > .row { margin-left: -30px; margin-right: -30px; } }