/*
* Portal layout
*/
.wp-block-group.sp-layout-header {
    width: 100%;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 992px) {
    .wp-block-group.sp-layout-header {
        grid-template-columns: 2fr 1fr;
        justify-items: left;
        text-align: left;
    }

    .wp-block-group.sp-layout-header h1 {
        width: 600px;
    }
}

.wp-block-group.sp-layout-main-section {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .wp-block-group.sp-layout-main-section {
        grid-template-columns: 3fr 1fr;
    }
}

.sp-layout-main-content {
    width: 100%;
}

.sp-layout-sidebar {
    z-index: 2;
    width: 100%;
    padding: 20px;
    background: #fff;
    border: 2px solid #00659e;
}

/*
* Profile
*/
.sp-profile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px;
}

.sp-profile-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sp-profile-item-label {
    font-size: 12px;
    color: #888;
}

.sp-profile-item-value {
    font-size: 14px;
    font-weight: 700;
}

.sp-profile-item-action {
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 700;
}

/*
* Portal notifications
*/
.sp-notifications {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 70px;
}

/*background: #f4f4f4;*/
/*page-content green-page*/
.sp-notifications-heading-container {
    margin-top: -115px;
    /*3.5vw (min-width: 992px) and (max-width: 1920px)*/
    /*115px*/
    /*50px 0 - max-width: 767.98px*/
}

@media (max-width: 768px) {
    .sp-notifications-heading-container {
        margin-top: -50px;
    }
}

@media (min-width: 992px) and (max-width: 1920px) {
    .sp-notifications-heading-container {
        margin-top: -3.5vw;
    }
}

.sp-notifications-heading {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background: #00659e;
    transform: translateY(-50%);
}

.sp-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 992px) {
    .sp-notifications-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.sp-notification {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    /*border-left: 3px solid transparent;*/
}

.sp-notification-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 36px 14px 18px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #1d1d1b;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    user-select: none;
}

.sp-notification-header::after {
    content: "\e931";
    font-family: "icomoon";
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #1d1d1b;
    transition: 0.3s;
    line-height: 0;
}

.sp-notification.active .sp-notification-header::after {
    transform: translateY(-50%) rotate(180deg);
}

.sp-notification-content {
    display: none;
    padding: 0 18px 20px;
}

.sp-notification-content-container {
    display: block;
}

/*
* Benefit logs
*/
.sp-benefit-logs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 80px;
    padding: 12px 0 12px 0;
}

.sp-benefit-log {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    border-left: 3px solid transparent;
}

.sp-benefit-log.ongoing {
    border-left-color: #00659e;
}

.sp-benefit-log.complete {
    border-left-color: #479f35;
}

.sp-benefit-log-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 36px 14px 18px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    user-select: none;
}

.sp-benefit-log-header:hover {
    background: #f4f4f4;
}

.sp-benefit-log.ongoing .sp-benefit-log-header:hover {
    background: #f5fbff;
}

.sp-benefit-log.complete .sp-benefit-log-header:hover {
    background: #f5fbf4;
}

.sp-benefit-log-header > * {
    pointer-events: none;
}

.sp-benefit-log-header::after {
    content: "\e931";
    font-family: "icomoon";
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #1d1d1b;
    transition: 0.3s;
    line-height: 0;
}

.sp-benefit-log.active .sp-benefit-log-header::after {
    transform: translateY(-50%) rotate(180deg);
}

.sp-benefit-log-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #1d1d1b;
}

.sp-benefit-log-step {
    font-size: 12px;
    color: #1d1d1b;
    line-height: 1;
    opacity: 0.7;
}

.sp-benefit-log-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 12px;
}

.sp-benefit-log.ongoing .sp-benefit-log-status {
    color: #00659e;
    background: #e6f6ff;
}

.sp-benefit-log.complete .sp-benefit-log-status {
    border-left-color: #479f35;
    color: #479f35;
    background: #ebf7e8;
}

.sp-benefit-log-content {
    display: none;
    padding: 20px 18px;
}

.sp-benefit-log-content-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #e8e8e8;
}

.sp-benefit-log-entries {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.sp-benefit-log-entry {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sp-benefit-log-entry:not(:last-child) {
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e7e7;
}

.sp-benefit-log-entry-primary {
    display: flex;
    gap: 10px;
}

.sp-benefit-log-entry-date {
    flex: 0 1 auto;
    display: block;
    width: 100px;
    text-align: right;
    font-weight: bold;
}

.sp-benefit-log-entry-details {
    flex: 1 1 auto;
    display: block;
}

.sp-benefit-log-entry-details p:last-child {
    margin: 0;
}

.sp-benefit-log-entry-secondary {
    font-size: 12px;
    text-align: right;
    opacity: 0.7;
}


/*
* Timeline
*/
.sp-timeline {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sp-timeline-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
    min-height: 80px;
}

.sp-timeline-date {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: 80px;
    padding-right: 24px;
    color: #1d1d1b;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.sp-timeline-item.today .sp-timeline-date {
    color: #fff;
    background-color: #1d1d1b;
}

.sp-timeline-day {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    /*color: #1d1d1b;*/
}


.sp-timeline-month {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    /*color: #1d1d1b;*/
    opacity: 0.7;
}


.sp-timeline-today {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.04em;
    /*color: #1d1d1b;*/
}

.sp-timeline-date-dot {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -9px;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #1d1d1b;
}


.sp-timeline-workflows {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 80px;
    padding: 12px 0 12px 24px;
    border-left: 2px solid #e8e8e8;
}

.sp-timeline-no-workflows {
    height: 28px;
    border-bottom: 1px dashed #e8e8e8;
}

.sp-timeline-workflow {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    border-left: 3px solid transparent;
}

.sp-timeline-workflow.pending {
    border-left-color: #00659e;
}

.sp-timeline-workflow.overdue {
    border-left-color: #e42235;
}

.sp-timeline-workflow.complete {
    border-left-color: #479f35;
}

.sp-timeline-workflow-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 36px 14px 18px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    user-select: none;
}

.sp-timeline-workflow-header:hover {
    background: #f4f4f4;
}

.sp-timeline-workflow.pending .sp-timeline-workflow-header:hover {
    background: #f5fbff;
}

.sp-timeline-workflow.overdue .sp-timeline-workflow-header:hover {
    background: #fef6f7;
}

.sp-timeline-workflow.complete .sp-timeline-workflow-header:hover {
    background: #f5fbf4;
}

.sp-timeline-workflow-header > * {
    pointer-events: none;
}

.sp-timeline-workflow-header::after {
    content: "\e931";
    font-family: "icomoon";
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #1d1d1b;
    transition: 0.3s;
    line-height: 0;
}

.sp-timeline-workflow.active .sp-timeline-workflow-header::after {
    transform: translateY(-50%) rotate(180deg);
}

.sp-timeline-workflow-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #1d1d1b;
}

.sp-timeline-workflow-step {
    font-size: 12px;
    color: #1d1d1b;
    line-height: 1;
    opacity: 0.7;
}

.sp-timeline-workflow-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 12px;
}

.sp-timeline-workflow.pending .sp-timeline-workflow-status {
    color: #00659e;
    background: #e6f6ff;
}

.sp-timeline-workflow.overdue .sp-timeline-workflow-status {
    color: #e42235;
    background: #fce8e8;
}

.sp-timeline-workflow.issue .sp-timeline-workflow-status {
    color: #ffd230;
    background: #332800;
}

.sp-timeline-workflow.complete .sp-timeline-workflow-status {
    border-left-color: #479f35;
    color: #479f35;
    background: #ebf7e8;
}

.sp-timeline-workflow-content {
    display: none;
    padding: 20px 18px;
}

.sp-timeline-workflow-content-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #e8e8e8;
}

.sp-timeline-workflow-description {
}

.wp-admin.post-type-sp_process #postbox-container-2 > .meta-box-sortables > .postbox > .acf-fields,
.sp-timeline-workflow-content-container > .acf-form > .acf-fields {
    display: flex;
    flex-direction: column-reverse;
}

.sp-timeline-workflow-content-container #message.updated {
    font-weight: bold;
    color: #479f35;
}

.sp-timeline-workflow-content-container #message > p {
    margin: 0;
}

/*
* Workflow form
*/
.sp-workflow-hide-field-label {

}

.sp-workflow-step {
    padding: 0;
}

.sp-workflow-step .acf-field-message > .acf-label {
    display: none;
}

.sp-workflow-step .acf-field-message img {
    max-width: 100%;
}

.sp-workflow-step .acf-field.acf-field-group[data-name="preview"],
.sp-workflow-step .acf-field.acf-field-group[data-name="form_fields"] {
    padding: 0;
}

.sp-workflow-step .acf-field.acf-field-group[data-name="preview"] > .acf-label,
.sp-workflow-step .acf-field.acf-field-group[data-name="form_fields"] > .acf-label {
    display: none;
}

.sp-workflow-step .acf-field.acf-field-group[data-name="preview"] > .acf-input > .acf-fields,
.sp-workflow-step .acf-field.acf-field-group[data-name="form_fields"] > .acf-input > .acf-fields {
    border: none;
}

.sp-workflow-step .sp-workflow-step-status {
    text-align: center;
    font-weight: bold;
}

.sp-workflow-step > .acf-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px 10px 20px;
    border: 1px solid #f4f4f4;
    border-radius: 6px;
    cursor: pointer;
}

.sp-workflow-step > .acf-input > .acf-fields {
    border: none;
}

.acf-field.sp-workflow-step.sp-workflow-step--past {
    border-top: none;
}

.sp-workflow-step--past > .acf-label {
    /*background: #fff;*/
    background: #f4f4f4;
}

.sp-workflow-step--current > .acf-label {
    background: #f4f4f4;
}

.sp-workflow-step--past > .acf-label > label {
    pointer-events: none;
}

.sp-workflow-step--past > .acf-label::before {
    content: '✔';
}

.sp-workflow-step--past > .acf-label::after {
    position: absolute;
    right: 15px;
    content: '▾';
    transition: transform 0.2s ease-in-out;
}

.sp-workflow-step--past.is-expanded > .acf-label::after {
    transform: rotate(180deg);
}

.sp-workflow-step-details-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
}

.sp-workflow-step-details {
    display: block;
    font-size: 90%;
    color: #777;
}

.sp-workflow-step--current .sp-workflow-step-details {
    margin-top: 5px;
    padding: 2px 10px;
    color: #fff;
    background: #000;
    border-radius: 8px;
}

.sp-workflow-step-submission-overdue {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #fce8e8;
    background: #e42235;
    border-radius: 12px;
}

.sp-workflow-step--past > .acf-input {
    display: none;
}

.sp-workflow-step--current > .acf-label::before {
    content: '▶';
    /*content: '▸';*/
}

.sp-workflow-step--past .acf-repeater .acf-row-handle .acf-icon,
.sp-workflow-step--past .acf-actions {
    display: none !important;
}

.sp-workflow-complete .acf-field[data-name="form_fields"],
.sp-workflow-step--past .acf-field[data-name="form_fields"] {
    opacity: 0.8;
}

.sp-workflow-step--past .acf-field-radio,
.sp-workflow-step--past .acf-repeater .acf-row-handle,
.sp-workflow-step--past .acf-field-true-false {
    pointer-events: none !important;
}

#message.updated {
    display: none;
}

.sp-workflow-complete .sp-hide-complete,
.sp-workflow-step--current .sp-hide-current,
.sp-workflow-step--past .sp-hide-past {
    display: none !important;
}

.sp-workflow-step:not(.sp-workflow-complete) .sp-show-complete {
    display: none !important;
}

.sp-workflow-step input[type="radio"]:not(:checked),
.sp-workflow-step input[type="radio"]:checked {
    position: relative;
    left: auto;
}

.sp-workflow-step select {
    display: block;
}

/* Hide Workflow Template and Workflow settings in admin for Workflows */
#acf-group_69959bf9ab2ac.postbox,
#sp_workflow_templatediv.postbox {
    display: none !important;
}

.sp-timeline .acf-form-submit .acf-button {
    padding: 1.3vw 2.8vw;
}

/* Hide submit button if user is not responsible for the current Workflow step */
.sp-timeline .acf-form[disabled="yes"] .acf-form-submit {
    display: none !important;
}

/* Hide current step in admin */
/*#post-body .acf-field[data-name="current_step"] {*/
/*    display: none;*/
/*}*/


/* Hide log entry fields in admin */
.sp-log-entries [data-name="entry_date"],
.sp-log-entries [data-name="logged_by"] {
    opacity: 0.7;
}

.sp-log-entries [data-name="entry_date"],
.sp-log-entries [data-name="entry_date"] *,
.sp-log-entries [data-name="logged_by"] *,
.sp-log-entries [data-name="logged_by"] {
    user-select: none;
    pointer-events: none !important;
    cursor: not-allowed;
}

/* Hide taxonomy terms for Notifications post type in admin */
.post-type-sp_notification #sp_sponsor_benefitdiv,
.post-type-sp_notification #sp_sponsor_leveldiv {
    display: none;
}


/* Hide taxonomy terms for Notifications post type in admin */
.sp-admin-edition-process-status {
}

/* Disallow editing Process taxonomies and post meta from admin */
.wp-admin.post-type-sp_process_template .acf-field-6a061cc548feb::after, /* Submission notification */
.wp-admin.post-type-sp_process #sp_editiondiv::after,
.wp-admin.post-type-sp_process #sp_sponsor_leveldiv::after,
.wp-admin.post-type-sp_process #sp_sponsor_benefitdiv::after,
.wp-admin.post-type-sp_process #sp_process_typediv::after,
.wp-admin.post-type-sp_process #acf-group_69f86f0e57608::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1002;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.3;
}

.sp-admin-edition-process-status-item {
}

.sp-admin-edition-process-list {
    display: none;
}

.sp-admin-edition-process-status-item.active .sp-admin-edition-process-list {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.sp-admin-edition-process-details-link {

}

.sp-admin-edition-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.sp-admin-edition-action-check {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    width: 100%;
}

.sp-admin-edition-action-apply {
    display: flex;
    gap: 10px;
    align-items: start;
}


/******************************************************************/
/* START AJAX LOADING
/******************************************************************/
.bb-sp-ajax-loading-lock {
    position: relative;
}

.bb-sp-ajax-loading-lock::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
}

.bb-sp-ajax-loading-lock::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
    border-radius: 50%;
    border: 6px solid #00659e;
    border-color: #00659e transparent #00659e transparent;
    animation: content-loading-icon 1.2s linear infinite;
    z-index: 999999;
}

@keyframes content-loading-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* END AJAX LOADING
/*================================================================*/

/******************************************************************/
/* START: FORM
/******************************************************************/
#bb_auth {
    width: 100%;
    margin: 40px auto;
    max-width: 600px;
}

.bb-sp-login-component {
}

.bb-sp-login-form-heading {
    text-align: center;
}

.bb-sp-login-form {
    width: 100%;
}

.bb-sp-login-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.bb-sp-login-form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.bb-sp-login-form-errors {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.bb-sp-login-form-button {
    display: flex;
    font-size: 16px;
    padding: 10px 40px;
    color: #fff;
    background: #00659e;
    border: none;
}

.bb-sp-login-form-button:hover {
    background: #00558d;
}

.bb-sp-login-form input[type="password"],
.bb-sp-login-form input[type="email"],
.bb-sp-login-form input[type="text"] {
    width: 100%;
}

/* END: FORM
/*================================================================*/