/*************************************/
/* GLOBAL PORTAL CSS VARIABLES */
/*************************************/
/* For the theme colors and fonts */

:root {
    /*Teal*/
    --HPSP-button-main-color: #49417c;
    --HPSP-button-font-color: #fff;
    --HPSP-button-main-color-hover: #3d3d3d;
    --HPSP-button-font-color-hover: #3d3d3d;

    /* Teal */
    --HPSP-accordion-border-color: #E0E0E0;
    --HPSP-accordion-background-color: #FCFCFC;
    --HPSP-accordion-background-color-hover: #FFF;

    /* validation red */
    --HPSP-invalid-error-color: #D50032;
}

/* Primary button */
.hpsp-btn {
    background: var(--HPSP-button-main-color);
    color: var(--HPSP-button-font-color);
    border: 3px solid var(--HPSP-button-main-color);
    margin-right: 1em;
    font-weight: 500;
    line-height: 1.5;
    padding: .5rem 1.5rem;
    display: inline-block;
    border-radius: 4px;
    vertical-align: middle;
    transition: border 0.1s ease, color 0.1s ease;
}

.c_button-bar {
    .hpsp-btn {
        margin-right: 0px;
    }
}

.hpsp-btn:hover {
    background-color: var(--HPSP-button-main-color-hover) !important;
    color: #fff !important;
    border-color: var(--HPSP-button-main-color-hover);
    text-decoration: underline;
}

.hpsp-btn.primary:hover {
    background-color: #49417c !important;
    color: #fff !important;
    border-color: #49417c;
    text-decoration: underline;
}

/* Transparent button */
.hpsp-btn-transparent {
    background-color: transparent !important;
    color: var(--HPSP-button-main-color) !important;
}

.hpsp-btn-transparent:hover {
    background-color: transparent !important;
    color: var(--HPSP-button-main-color) !important;
    border-color: var(--HPSP-button-main-color-hover) !important;
    text-decoration: underline;
}

.hpsp .entity-form-conainer {
    width: 100%;
}

.hpsp .entity-form-conainer .entity-form-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Link button */
.hpsp-link-button {
    background: none;
    border: none;
    padding: 0;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: var(--HPSP-button-main-color);
}

/* Link button hover */
.hpsp-link-button:hover {
    text-decoration: underline;
}

/* Back button */
.back-button {
    font-weight: 700;
}

.au-text-input {
    width: 100%;
}

.numbersOnly::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/**********************************************/
/* styles for the MultiForm Step Progress Bar */
/**********************************************/
.multi-progress-bar {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    border: #F3F3F3 1px solid;
}

ol.progress.left {
    margin: 0;
    padding: 0;
}

.multi-progress-bar li {
    padding: 0;
    margin: 0;
    height: 4.5em;
    display: block;
}


.multi-progress-bar li.current {
    background-color: rgba(0, 118, 128, 0.1);
    color: inherit;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.multi-progress-bar span {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.multi-progress-bar div.pg-tab {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em;
    height: 100%;
}

.multi-progress-bar div.current {
    border-left: #007680 5px solid;
}

div.pg-header {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin: 0.25em 0.5em;
}

div.pg-tab>img {
    height: 1.2em;
    width: 1.2em;
}

.pg-tab:hover {
    background-color: rgba(0, 118, 128, 0.05);
}

.multi-progress-bar div.pg-tab-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25em;
}

span.pg-header-title {
    font-size: 1.3em;
    font-weight: 700;
    color: #222;
}

span.pg-tab-heading {
    font-weight: 500;
}

span.pg-tab-status {
    font-size: 0.95em;
}

/**********************************************/
/* styles for accordion */
/**********************************************/

.hpsp-accordion-container {
    border: var(--HPSP-accordion-border-color) 1px solid;
    border-radius: 0.25em;
    overflow: hidden;
    background: var(--HPSP-accordion-background-color);
    display: inline-block;
    width: 100%;
    margin-bottom: 0.25em;

}

.hpsp-accordion-container:hover {
    background: var(--HPSP-accordion-background-color-hover);
}

.hpsp-accordion-panel {
    display: flex !important;
    justify-content: space-between;
    padding: 0.5em;
    align-items: baseline;
}

.hpsp-accordion-panel>a {
    text-decoration: none;
}

.hpsp-accordion-panel span {
    color: var(--HPSP-button-main-color);
    font-size: 2em;
}

.hpsp-accordion-panel>a:focus {
    outline-offset: 4px !important;
    outline: 2px solid #ea9c50 !important;
}

.hpsp-accordion-body {
    padding: 0.25em 1em;
}

.hpsp-accordion-container:has(.in) .hpsp-accordion-panel {
    background: var(--HPSP-button-main-color);
}

.hpsp-accordion-container:has(.in) .hpsp-accordion-panel>h3 {
    color: var(--HPSP-button-font-color);
}

.hpsp-accordion-container:has(.in) .hpsp-accordion-panel span {
    color: var(--HPSP-button-font-color);
}


/**********************************************/
/* styles for the hpsp readonly card  */
/**********************************************/
.hpsp-readonly-card {
    background: #F0F3F5;
    padding: 1em;
    margin-top: 1em;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;

}

.hpsp-readonly-card-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    gap: 5em;
}

.hpsp-readonly-card-col {
    flex-grow: 1;
}

.col-section {
    margin-left: 1em;
}

.hpsp-readonly-card-col>h2 {
    font-weight: 500;
    font-size: 1.2em;
}

.hpsp-readonly-card-field {
    margin-top: 1em;
}

.hpsp-readonly-card-field>h3 {
    font-size: 0.9em;
    margin: 0;
    font-weight: 600;
}

.hpsp-readonly-card-field>label {
    color: var(--HPSP-text-font-color);
    font-weight: normal;
    font-size: 0.8em;
}

.hpsp-readonly-card-footer {
    margin-top: 1.5em;
    padding-top: 0.5em;
    color: var(--HPSP-text-font-color);
    font-size: 0.9em;
    border-top: #A0A0A0 solid 1px;
}


/**********************************************/
/* styles for the hpsp inline validation      */
/**********************************************/
.datetimepicker.hpsp-invalid-field {
    border-color: var(--HPSP-invalid-error-color);
}

.hpsp-invalid-field.datetimepicker>input[type=text] {
    border-color: var(--HPSP-invalid-error-color);
}

.hpsp-invalid-field.input-group-addon {
    border-color: var(--HPSP-invalid-error-color);
}

.form-control.hpsp-invalid-field {
    border-color: var(--HPSP-invalid-error-color) !important;
    border-width: 2px !important;
}

.hbsp-invalid-field,
.invalid-doh,
.invalid-value {
    border-width: 2px !important;
}

.hprg-core .form-control {
    margin-bottom: 8px;
}

.hpsp-invalid-feedback {
    color: #d60000 !important;
    margin: 4px 0 0 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    word-wrap: break-word;
    border-width: 2px !important;
}

#doh_hprgalternatecontact-mandatory-inline {
    position: absolute;
    top: 50px;
}

/**********************************************/
/* styles for the hpsp mandatory fields  */
/**********************************************/
.crmEntityFormView .cell div.info.required label:after {
    content: ' (mandatory)';
    color: var(--HPSP-invalid-error-color) !important;
    font-weight: 400;
}

.html-required::after {
    content: "(mandatory)";
    color: var(--HPSP-invalid-error-color) !important;
    font-weight: bold;
}

.html-required-lower::after {
    content: "(mandatory)";
    color: var(--HPSP-invalid-error-color) !important;
    font-weight: 400;
    display: inline;
}

.html-required-lower>h3 {
    display: inline;
}

/**********************************************/
/* styles for HomePage  Contents */
/**********************************************/
.au-header.au-header {
    padding: 0px 2px 0px 2px !important;
}

.quicklinks {
    display: flex;
    flex-direction: row;
}

.card {
    vertical-align: top;
    display: inline-block;
    padding: 1em;
    margin: 1.5%;
    border-radius: 10px;
    max-width: 16rem;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

.card-body {
    min-height: 200px;
    position: relative;
}

.separator {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: #cbcbcb;
    height: 0.5px;
}

/**********************************************/
/* styles related to Service Page  Contents */
/**********************************************/
.service-card {
    display: inline-block;
    padding: 1em;
    margin-top: 1.5%;
    margin-right: 4%;
    border-radius: 10px;
    max-height: 13rem;
    max-width: 26rem;
    vertical-align: top;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

.service-card-title {
    height: 3rem;
}

.service-card-text {
    height: 3rem;
}

/**********************************************/
/* styles related to Navigation bar           */
/**********************************************/
.nav-pills>li {
    float: inherit;
}

.nav>li>a:focus {
    background-color: #e9f4f3;
}

.nav .open>a {
    background-color: #e9f4f3 !important;
    border-left-color: #007b89 !important;
}

.nav>li>a {
    border-left: 0.5rem solid transparent;
}

.nav>li.current>a,
.nav>li>a:hover {
    background-color: #e9f4f3;
    border-left-color: #007b89;
    border-radius: 10px;
}

.homenavleft {
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-right: 1rem;
    /*
    background-color:#FCFCFC;
    box-shadow: 2px 0px 4px 0px rgba(7, 42, 100, 0.10);
    border-right: 0.5rem solid transparent;
    border-right-color: #eee;
    */
}

.clientaccount {
    padding: 10px 15px 10px 15px;
}

/*************************************************************/
/* styles related to Top navigation - User profile           */
/*************************************************************/
.hpspuserprofilenav {
    border-radius: 50%;
    background: #007680;
    color: #fff;
    text-align: center;
    padding: 0.25rem;
    font-weight: normal;
    font-size: small;
    text-decoration: none;
}

.hpsp-dropdown {
    text-decoration: none !important;
}

.hpspuserprofilepopup {
    min-width: 350px;
    padding: 25px 0;
    font-size: 13px;
    font-weight: 400;
}

/* ODC sharepoint subgrid styles*/
#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .btn {
    display: none;
}

#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .dropdown-menu {
    display: block;
    position: static !important;
    position: initial !important;
    border: 0 !important;
    background: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 95px;
    min-width: 95px;
    width: 95px;
    left: auto !important;
    top: auto !important;
}

#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .dropdown-menu li {
    display: inline-block;
    text-align: center;
}

#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .dropdown-menu li a {
    padding: 2px !important;
    margin: 0;
    border-left: none;
}

#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .dropdown-menu li a>span {
    font-size: inherit !important;
    margin-right: 4px;
}

#odc_sharepoint_subgrid.subgrid .sharepoint-grid .view-grid .dropdown-menu li a:hover {
    color: inherit;
    background: transparent;
    border: none;
}

#odc_sharepoint_subgrid.subgrid input::file-selector-button {
    background: var(--HPSP-button-main-color) !important;
    color: var(--HPSP-button-font-color) !important;
    border: 3px solid var(--HPSP-button-main-color);
    margin-right: 1em;
    font-weight: 500;
    line-height: 1.5;
    padding: .5rem 1.5rem;
    display: inline-block;
    border-radius: 4px;
    vertical-align: middle;
    transition: border 0.1s ease, color 0.1s ease;
}

#odc_sharepoint_subgrid.subgrid input::file-selector-button:hover {
    background-color: var(--HPSP-button-main-color-hover) !important;
    color: #fff !important;
    border-color: var(--HPSP-button-main-color-hover);
    text-decoration: underline;
}

.hpsp.centered {
    text-align: center !important;
}

.hpsp .clear-both {
    clear: both;
}

.hpsp .hidden {
    display: none;
}

.hpsp .full-width {
    width: 100% !important;
}

.hpsp .ml-15p {
    margin-left: 16px;
}

.hpsp .top-gap-lg {
    margin-top: 40px;
}

.hpsp .top-gap-md {
    margin-top: 20px;
}

.hpsp.icon.external-link-icon {
    width: 11px;
    height: 11px;
    margin-left: 5px;
}

.hpsp .page-back-button:before {
    content: '< Back';
    margin-right: 6px;
}

.hpsp .page-title {
    margin-top: 24px;
    margin-bottom: 30px;
}

.hpsp .page-content {
    margin-bottom: 20px;
}

.hpsp .page-content .page-section {
    margin-top: 16px;
}

.hpsp .field-edit {
    margin-left: -28px;
}

.hpsp .field-edit fieldset {
    margin-bottom: 0px;
}

.hpsp .field-edit .form-custom-actions {
    display: none !important;
}

.hpsp .field-edit .validation-summary {
    margin-left: 25px;
}

.validation-summary.alert ul li a {
    font-size: 16px;
}

.hpsp .job-title-edit .action-container {
    margin-top: -24px;
}

.hpsp .field-validation-message {
    margin-top: 40px;
    padding-top: 15px;
}

.hpsp .page-header {
    padding: 0.8rem;
    background-color: #e9f4f3;
    margin-top: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.hpsp .page-header>h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    font-weight: 400;
}

#PreviousButton {
    margin-bottom: 20px;
}

#WebFormPanel {
    margin-left: 40px;
}

.label-with-explanation,
.label-with-explanation p,
#helpTextSubgridInformedBodyCorp {
    margin-bottom: 20px;
    font-size: .875rem;
    line-height: 1.375rem;
    font-weight: 400;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    color: #68717a;
    word-wrap: break-word;
}

.label-with-explanation header label {
    font-size: 1rem;
    line-height: 1.625rem;
    font-weight: 600 !important;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    word-wrap: break-word;
    color: #313131;
}

.label-with-explanation header span {
    color: #d60000 !important;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1.625rem;
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
}

.label-with-explanation ul {
    margin-bottom: 0 !important;
}

label {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* these styles will eventually come from main, which will be any timestamp in 2026 (probably)  */

.c_textarea,
textarea {
    border: 1px solid #313131 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    height: 88px;
    resize: vertical !important;
    font-family: inherit !important;
    width: 100% !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

input[type=radio]:checked {
    background-color: #313131 !important;
    border: 2px solid #fff !important;
    outline: 2px solid #313131 !important;
}

input[type=radio]:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    outline: 3px solid transparent;
    outline-offset: 4px;
}

input[type="radio"] {
    vertical-align: middle;
}

input[type="radio"]+label {
    vertical-align: middle;
}

input[type=radio]:focus:after {
    outline: 3px solid #d87513;
    outline-offset: 4px;
}

input[type=radio] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid #313131;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    outline: 2px solid transparent;
    outline-offset: 1px;
}

/* These going to interfere with any hprg UI ? */

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    background-color: #003d4c !important;
    border: 2px solid #003d4c !important;
    border-left: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background-color: #49417c !important;
    border: 2px solid #49417c !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup[style*="border-radius: 0px"] {
    border-radius: 0 4px 4px 0 !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup .fa-search {
    display: none !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup:before {
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M8.33885 7.46493C8.83307 6.79206 9.125 5.96137 9.125 5.0625C9.125 2.81884 7.30616 1 5.0625 1C2.81884 1 1 2.81884 1 5.0625C1 7.30616 2.81884 9.125 5.0625 9.125C5.96161 9.125 6.79251 8.83291 7.46547 8.33845L7.46493 8.33885C7.48336 8.36384 7.50389 8.38777 7.52652 8.4104L9.93306 10.8169C10.1771 11.061 10.5729 11.061 10.8169 10.8169C11.061 10.5729 11.061 10.1771 10.8169 9.93306L8.4104 7.52652C8.38777 7.50389 8.36384 7.48336 8.33885 7.46493ZM8.5 5.0625C8.5 6.96098 6.96098 8.5 5.0625 8.5C3.16402 8.5 1.625 6.96098 1.625 5.0625C1.625 3.16402 3.16402 1.625 5.0625 1.625C6.96098 1.625 8.5 3.16402 8.5 5.0625Z' /%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center center;
    background-color: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup:hover {
    background-color: #002a35 !important;
    border-color: #003d4c !important;
    outline: none !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup:focus-visible {
    outline: 3px solid #d87513 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

.hprg-core td .control .input-group .btn.btn-default.launchentitylookup:active {
    outline: 3px solid #d87513 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
    background: #6d6796 !important;
    border-color: #6d6796 !important;
}

.hprg-core .crmEntityFormView .actions {
    padding: 0 !important;
    margin: 0 !important;
}

.hprg-core .view-toolbar.grid-actions {
    margin-bottom: 20px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-bottom: none !important;
}

.hprg-core .control {
    display: block !important;
}

#doh_authorisedpersonofthelicence_label {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;

    &::after {
        color: #d60000 !important;
        font-weight: 400;
    }
}

.info:has(#doh_authorisedpersonofthelicence_label) {

    .validators,
    &+.control {
        display: none !important;
    }
}

.hprg-core .accordion-container {
    display: block !important;
}

.entity-form>:last-child .accordion-container {
    border-radius: 0 !important;
}

#mcs-review-section-0 .accordion-container {
    border-radius: 8px 8px 0 0 !important;
}

#mcs-review-section-3 .accordion-container {
    border-radius: 0 0 8px 8px !important;
}

.hprg-core .accordion-container .accordion-panel>h3 {
    padding: 10px !important;
}


.hprg-core .dropdown-menu {

    >li>a,
    >li>a.dropdown-item {

        &,
        &:hover,
        &:focus,
        &:focus-visible {
            padding: 9px 24px !important;
            margin-left: 0 !important;
            text-decoration: none !important;
        }
    }
}

.hprg-core .dropdown.action .btn.btn-default {
    min-width: unset !important;
    height: 16px !important;
    margin-top: 5px !important;

    .fa::before {
        display: flex;
    }
}

.hprg-core .crmEntityFormView .cell.checkbox-cell {
    padding-bottom: 0 !important;
    margin-bottom: 4px;
}

.crmEntityFormView .cell .picklist input[type=radio] {
    margin: 6px 12px 6px 0 !important;
}

.entity-form {
    display: flex;
    flex-direction: column;
}

.entity-form>h2.tab-title {
    order: 1;
}

.entity-form>#ValidationSummaryEntityFormView {
    order: 2;
}

.entity-form>* {
    order: 3;
}

.document-add-btn {
    margin-bottom: 20px;
}

.document-upload th[aria-label='Action'] {
    white-space: nowrap;
}

.document-upload td[data-th='Files Attached'] .c_callout {
    width: calc(100% + 125px);
}

table.section td .control {
    margin-bottom: 20px !important;

    &:empty {
        margin-bottom: 0px !important;
    }

    .view-grid.table-responsive tbody td {
        border-bottom: none !important;
    }
}

.accordion-container:has(:focus) {
    z-index: 99999;
    position: relative;
}

.c_roc__body-wrapper {

    h2:not(.c_heading--md-semibold),
    h3:not(.c_heading--sm-semibold) {
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 600;
        font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
        word-wrap: break-word;
    }

    .c_roc__fields {

        li {
            text-decoration: none;

            &::marker {
                font-size: 0.6em;
                color: #006bb3;
            }
        }
    }
}

.hprg-core .accordion-container .accordion-body {
    padding: 0 !important
}

#ICFPersonsTable td {
    word-break: keep-all;
}

#doh_hprgalternatecontact_label.field-label {
    text-transform: lowercase;
}

#doh_hprgalternatecontact_label.field-label::first-letter {
    text-transform: uppercase;
}

.modal-delete .modal-content {

    .form-close {
        top: 24px !important;
        right: 24px !important;
    }

    .modal-footer {
        display: flex;
        gap: 12px;

        .cancel {
            order: 2;
        }

        .primary {
            order: 1;

            &::after {
                /* content: "Delete" !important; */
                font-size: 16px;
            }
        }
    }
}

.modal .modal-md .modal-content {
  max-width: 600px;
  margin: 0 auto;
}


/* Unsure of why this was added but validation summary list items need an underline. May need to re-address this. */
/* .validation-summary.alert ul li a {
    text-decoration: none !important;
} */