.application-detail-container {
    margin-top: 3em;
}

.application-section-title {
    font-family: 'Heldane Display';
    line-height: 1.2;
    font-weight: 500;
    font-size: 2em;
    margin-bottom: .25em;
}

.application-detail-container .application-section-text {
    font-size: 2em;
    font-weight: 300;
    letter-spacing: -.025em;
}

.application-detail-container .application-detail-main-data-wrapper:after {
    border-bottom: 2px solid var(--color-red);
    display: block;
    content: '';
    width: 100%;
    grid-column: span 12;
    margin: 2em 0 4em;
}

.application-detail-container .application-section-documents {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-gap: var(--grid-gap);
    margin-top: 1em;
}

.application-detail-container .file-upload-item {
    grid-column: span 6;
    padding: 1em 1.5em 1em 4em;
    background-size: 1em;
}

.application-detail-container .file-upload-item.document-need-signature {
    background-color: #e7e189;
}

.application-detail-container .file-upload-item:last-child,
.application-detail-container .file-upload-item:only-child {
    margin: 0;
}

.application-detail-container a.file-view {
    background-size: 1.5em;
    right: 1em;
}

.form-group.btn-group.application-action-buttons {
    grid-column: span 12;
}

@media (max-width: 767px) {
    .application-detail-container .file-upload-item {
        grid-column: span 12;
    }
}


/*----------------------------------------------------------
    RATEPAY
----------------------------------------------------------*/

.application-section-payment-rates-description {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-gap: var(--grid-gap);
    margin: 1em 0 3rem;
}

.payment-rate-item {
    grid-column: span 2;
}

.payment-rates-change-wrapper {
    grid-column: span 8;
    display: flex;
    flex-direction: column;
}

.payment-rate-item {
    border-radius: var(--border-radius-btn);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background-color: var(--color-blue-medium);
    color: #fff;
}

.suggested .payment-rate-item {
    background-color: var(--color-grey);
}

.payment-rate-item.accepted {
    background-color: var(--color-green-medium);
}

.payment-rate-item.rejected {
    background-color: var(--color-red-medium);
}

.payment-rate-item div:nth-child(1) {
    font-weight: 700;
}

.payment-rate-item div:nth-child(2) {
    font-size: 2em;
    font-weight: 300;
    letter-spacing: -.025em;
}


.payment-rates-change-wrapper {
    border-radius: var(--border-radius-btn);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    background-color: var(--color-grey-light);
}

.payment-rates-change-intro {
    font-weight: 700;
}

.payment-rates-own-suggestion-item-wrapper {
    display: flex;
    gap: var(--grid-gap);
    margin-top: 1rem;
}

.payment-rates-change-item {
    font-weight: 700;
}

/* Accept / Reject suggestion */

.payment-rates-own-suggestion-item, .payment-rates-own-suggestion-item > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.payment-rates-own-suggestion-item > div:first-child {
    font-weight: 700;
}


@media (max-width: 1400px) {
    .payment-rate-item div:nth-child(2) {
        font-size: 1.75em;
    }
}

@media (max-width: 1280px) {
    .payment-rate-item {
        padding: 1rem;
    }
    .payment-rate-item div:nth-child(2) {
        font-size: 1.5em;
    }
}

@media (max-width: 1100px) {

    .payment-rate-item {
        grid-column: span 6;
    }

    .payment-rates-change-wrapper {
        grid-column: span 12;
    }
}

@media (max-width: 767px) {

    .payment-rates-own-suggestion-item-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .payment-rates-own-suggestion-item {
        flex-direction: column;
    }
}

/*----------------------------------------------------------
    PAYMENT ACCELERATION
----------------------------------------------------------*/

.logged-in .grid-container.application-detail-acceleration-of-payment {
    margin-top: 3rem;
}


/*----------------------------------------------------------
    APPLICATION DETAIL UPLOAD
----------------------------------------------------------*/

.logged-in .grid-container.application-detail-upload-documents {
    margin-top: 3rem;
}

.need-signature-file-upload-wrapper {
    grid-column: span 6;
}


/*----------------------------------------------------------
    FILE TABS
----------------------------------------------------------*/

.application-status-items {
    display: flex;
    gap: .5rem;
}

.application-type-items {
    display: flex;
    justify-content: center;
}

.application-type-item {
    flex: 1 0 0;
    text-align: center;
    padding: .25em 1em;
    border-radius: .25em;
    cursor: pointer;
    transition: all ease-in-out .25s;
}

.application-type-item.application-type-active {
    background-color: var(--color-grey-light);
    cursor: default;
}

.application-type-item.application-type-not-available {
    opacity: .2;
    cursor: default;
    pointer-events: none;
}

.application-type-wrapper {
    grid-column: span 12;
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
    border-radius: var(--border-radius-inputs);
    padding: .5em 1em;
    display: flex;
    align-items: center;
}

.application-type-wrapper .form-item.form-column.col-25 {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.application-document-list-wrapper {
    grid-column: span 12;
}

.file-upload-item {
    display: flex;
    justify-content: space-between;
    padding-right: 5em !important;
}

.file-upload-item.hidden {
    display: none;
}

.application-document-list-decision {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.application-document-list-decision.hidden {
    display: none;
}

/* File accordion */

.file-upload-item.accordion-subtitle-wrapper.sub-accordion-label:after {
    right: .5em;
}

.file-upload-item.accordion-subtitle-wrapper + .sub-accordion-content:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: .5em;
    padding-left: 2em;
}

.section-reference-number .application-section-title {
    margin-top: 3rem;
}

.section-reference-number .application-section-reference-number {
    margin-bottom: 1rem;
}

.section-reference-number .application-section-reference-number input {
    width: 20rem;
}

.section-reference-number .application-section-reference-number input.error {
    border-color: var(--color-red);
}