/* 
    Optima Digital Solutions

        Base CSS iFrame theme for organisations using the govService platform. This CSS fixes several key issues with the default govService CSS. It is recommended to leave this base CSS file as is and only update colours as needed. Any additions should be made in the appropriate self css file.

    Colours:

        Blue - #007cbb
        Blue Dark - #006498

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

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

/* General */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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: "Inter", sans-serif !important;
}

body,
html {
    font-size: 1rem !important;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: #007cbb;
}

a:hover,
a:focus,
a:active {
    color: #006498;
}

/* Row Fixes */

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

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

/* Title & Form Controls */

#app-content .title,
#app-content #hello-title {
    font-weight: bold;
    border-bottom: 5px solid #007cbb;
    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: #007cbb;
    border: 0 !important;
}

#MyRequestTable .case-row {
    background: #f1f1f1 !important;
}

#MyRequestTable h2 {
    font-size: 16px !important;
}

/* Remove Shadows */

* {
    text-shadow: none !important;
    box-shadow: none !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-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: 14px !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 .edit-column,
    .repeatable-table-wrapper > .repeatable-table .edit-column {
        width: 1em !important;
        min-width: 1em !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 #007cbb;
        padding: 20px;
        margin-bottom: 15px;
    }

    .submission-message-content h2 {
        color: #007cbb !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: #007cbb !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: #007cbb;
    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: 14px;
    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: #007cbb !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 #007cbb;
    background: #007cbb;
    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;
}

.readOnlyAttachments .resumable-list {
    margin-top: 5px;
    background: #f9f9f9;
    padding: 10px 15px;
    max-height: 20em;
}

.readOnlyAttachments .resumable-file {
    display: inline-block;
    overflow: visible;
    margin-top: 5px;
}

.readOnlyAttachments .resumable-list::before {
    content: "\f019  Click each file link below to download files as required.";
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: 'FontAwesome', 'Poppins';
}

/* Buttons */

.achieveforms-container .fillinButtons .btn {
    background: #007cbb;
    color: #FFFFFF;
    padding: 10px 15px;
    font-size: 14px;
    border: 0;
    box-shadow: none;
    margin-bottom: 5px !important;
}

.achieveforms-container .fillinButtons .btn.cancelbutton {
    background: #D14949 !important;
}

.achieveforms-container .fillinButtons .btn span {
    padding-right: 0;
}

.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-af,
.btn-af:hover,
.btn-af:focus,
.btn-af:active {
    border: 1px solid transparent !important;
    background: #007cbb !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #FFFFFF;
    padding: 10px 20px !important;
    color: #FFFFFF !important;
}

.btn {
    color: #FFFFFF;
    text-shadow: none;
    padding: 10px 20px;
}

.btn:hover,
.btn:focus,
.btn:active {
    background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background: #006498 !important;
}
 
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #51af5c;
    border-color: #51af5c;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #006498;
    border-color: #006498;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #006498;
    border-color: #006498;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #d14949;
    border-color: #d14949;
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #468fbf;
    border-color: #468fbf;
}

._AF .btn.btn-default, .achieveforms-container .btn.btn-default {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

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

/* Field Inputs */

.product_self .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.vertical .radio-wrapper label {
    white-space: normal;
}

._AF label.errr,
.achieveforms-container label.error {
    margin-top: 20px;
}

.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: #007cbb;
}

#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: #007cbb;
}

input[type="text"],
input[type="number"],
input[type="password"] {
    border-radius: 5px !important;
    padding: 10px 13px !important;
    height: 40px !important;
    margin-top: 5px !important;
}

select {
    height: 40px !important;
    border-radius: 5px !important;
    padding: 7px 10px !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: 16px 6px 3px 0 !important;
}

.error-wrapper {
    margin-top: -20px;
}

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: #007cbb;
}

.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: #007cbb;
}

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: #007cbb !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: #007cbb !important;
}

.achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=checkbox]+label:before, 
.achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=radio]+label:before,
fieldset.valid input[type=checkbox]+label:before, 
fieldset.valid input[type=radio]+label:before {
    border-color: #007cbb !important;
}
 
input[type=radio].checked+label:before, 
input[type=radio]:checked+label:before {
    background-color: #007cbb !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;
    margin-bottom: 10px;
    line-height: 1.5em;
}

.alert a {
    color: #FFFFFF;
    text-decoration: underline;
}

.alert-info {
    background: #468fbf;
    color: #FFFFFF;
}

.alert-success {
    background: #51af5c;
    color: #FFFFFF;
}

.alert-danger {
    background: #d14949;
    color: #FFFFFF;
}

.alert-warning {
    background: #df9d36;
    color: #FFFFFF;
}

.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: #007cbb;
    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: #007cbb;
    border-color: #007cbb;
}

.search-row {
    margin-bottom: 35px;
    margin-top: 20px;
}

.search .fa-times {
    top: 12px;
    right: 12px;
    font-size: 18px;
}

.service-groups .fsservice-pretty-link {
    border: 2px solid #006498 !important;
    border-radius: 0 !important;
    background: #f5f5f7 !important;
    color: #333333 !important;
    width: 100% !important;
}

.service-groups a.fsservice-pretty-link.active {
    border: 2px solid #006498 !important;
    background: #006498 !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;
    }

    #helpText_dateSeparated {
        margin-bottom: 25px;
    }

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

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