/* 
    Client: Sandwell 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 {
    --primary-color: #42218e;
    --primary-color-hover: #381c79;

    --secondary-color: #42218e;
    --secondary-color-hover: #381c79;

    --btn-hover-text-color: #FFFFFF;

    --widget-border-color: #42218e;
    --cookie-bg-color: #381c79;

    --link-primary-color: #42218e;
    --link-secondary-color: #381c79;
    --link-tertiary-color: #42218e;

    --success-color: #00703C;
    --success-color-hover: #01532D;
    --error-color: #D4351C;
    --error-color-hover: #B22A15;
    --info-color: #0E56E0;
    --info-color-hover: #002D84;
    --warning-color: #DF9D36;
    --warning-color-hover: #936115;

    --grey-light-color: #E6E8EA;
    --grey-dark-color: #D8DADB;

    --services-list-bg-inactive-color: #EEEEEE;
    --services-list-bg-active-color: #42218e;
    --services-list-border-color: #42218e;
    --services-list-border-thickness: 0;
    --services-list-border-radius: 5px;

    /* 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: 6px;

    /* Set to your imported font family name (or default, e.g. Arial, Helvetic, etc) */
    --font-family-name: "Poppins";
}

/* Font Family */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&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;
}

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

a:visited {
    color: var(--link-tertiary-color);
    text-decoration: var(--a-text-decoration-style); 
    text-decoration-color: var(--link-tertiary-color);
    text-decoration-thickness: var(--a-text-decoration-thickness-normal);
    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;
}

/* Row Fixes */

#app-content > .row {
    margin-left: -30px;
    margin-right: -30px;
}

#page-container,
#page-container #page {
    padding: 0 !important;
}

/* Service Group Height Fix (requires JS to implement) */

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

#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: 16px !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: 16px !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;
}

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

    /* Repeatable Subforms */

    .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: "Edit" !important;
        font-family: var(--font-family-name), sans-serif !important;
        font-size: 16px !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: 16px !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;
    }

    /* 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: 500 !important;
    font-size: 15px !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 {
    background-color: var(--primary-color);
    color: #FFFFFF !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 {
    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;
}

/* Dropdown Nav */

.achieveforms-container .sectionsHead .sections-toggle-wrapper .active-section-name,
.achieveforms-container .sectionsHead .sections-toggle-wrapper .navbar-toggle i {
    color: #FFFFFF !important;
}

.achieveforms-container .sectionsHead .sections-toggle-wrapper {
    border-bottom: 1px solid var(--primary-color);
    background: var(--primary-color);
    padding: 0 20px;
    margin-bottom: 10px;
}

.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: 500;
    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: 500;
    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: 16px;
    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: 16px;
    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 .btn.cancelbutton,
.render-subform-modal .achieveforms-container .fillinButtons .btn.cancelbutton {
    display: block;
    float: left !important;
    margin-left: 0 !important;
}

.render-subform .fillinButtons {
    margin-top: 20px !important;
}

.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-colo-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: 16px;
}

button.btn.btn-default.field-btn.launchSubform::before {
    font-family: 'FontAwesome';
    content: "\f067  ";
}

/* 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: var(--primary-color);
}

#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 {
    height: 40px !important;
}

._AF .select2-container.select2-container-multi .select2-choices .select2-search-choice, .achieveforms-container .select2-container.select2-container-multi .select2-choices .select2-search-choice {
    margin-top: 6px !important;
    background: #EEEEEE !important;
    color: #333333 !important;
    border: 1px solid #CCCCCC !important;
    box-shadow: none !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 #808080;
    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: #000000 !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;
}

.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 */

.modal.af-modal {
    top: 0 !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.active:first-child .sectionNameTab {
        border-radius: 0 !important;
    }

    .achieveforms-container .sectionsHead {
        margin-left: 0 !important;
    }

    fieldset[name="dateSeparated"] {
        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: 16px;
    }

    #app-content > .row {
        margin-left: -30px;
        margin-right: -30px;
    }
}