/*
============================================================
GENERAL
============================================================
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        #f4f7fb;

    color:
        #243447;

}


.container {

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        40px 25px;

}


/*
============================================================
HEADER
============================================================
*/

.page-header {

    background:
        #ffffff;

    padding:
        35px;

    margin-bottom:
        30px;

    border-radius:
        12px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.08);

}


.page-header h1 {

    color:
        #0b5cad;

    font-size:
        36px;

    margin-bottom:
        10px;

}


.page-header p {

    color:
        #667085;

    line-height:
        1.6;

}


/*
============================================================
CARDS
============================================================
*/

.card {

    background:
        #ffffff;

    padding:
        25px;

    margin-bottom:
        20px;

    border-radius:
        12px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.06);

}


.card h2 {

    color:
        #0b5cad;

    margin-bottom:
        15px;

}


.card h3 {

    color:
        #344054;

    margin-bottom:
        15px;

    font-size:
        18px;

}


.card p {

    line-height:
        1.6;

    color:
        #475467;

}


/*
============================================================
BUTTONS
============================================================
*/

.button-row {

    margin-top:
        15px;

}


button {

    border:
        none;

    border-radius:
        6px;

    padding:
        12px 20px;

    margin-right:
        10px;

    font-size:
        15px;

    cursor:
        pointer;

    background:
        #0b5cad;

    color:
        #ffffff;

}


button:hover {

    background:
        #084885;

}


button:disabled {

    background:
        #98a2b3;

    cursor:
        not-allowed;

}


.logout-button {

    background:
        #b42318;

}


.logout-button:hover {

    background:
        #912018;

}


/*
============================================================
STATUS BOXES
============================================================
*/

.status {

    margin-top:
        15px;

    padding:
        13px 15px;

    border-radius:
        6px;

}


.pending {

    color:
        #93370d;

    background:
        #fffaeb;

    border:
        1px solid #fedf89;

}


.success {

    color:
        #067647;

    background:
        #ecfdf3;

    border:
        1px solid #abefc6;

}


.error {

    color:
        #b42318;

    background:
        #fef3f2;

    border:
        1px solid #fecdca;

}


/*
============================================================
USER / APPLICATION INFORMATION
============================================================
*/

.user-info,
.application-info {

    margin-top:
        20px;

    padding:
        20px;

    background:
        #f8fafc;

    border:
        1px solid #e4e7ec;

    border-radius:
        8px;

}


.info-row {

    display:
        grid;

    grid-template-columns:
        200px 1fr;

    gap:
        15px;

    padding:
        9px 0;

    border-bottom:
        1px solid #eaecf0;

}


.info-row:last-child {

    border-bottom:
        none;

}


.info-label {

    font-weight:
        600;

    color:
        #344054;

}


/*
============================================================
UPLOAD
============================================================
*/

input[type="file"] {

    display:
        block;

    margin-top:
        15px;

    margin-bottom:
        15px;

}


/*
============================================================
PROJECT TABLE
============================================================
*/

table {

    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        15px;

}


th {

    background:
        #0b5cad;

    color:
        #ffffff;

    text-align:
        left;

    padding:
        12px;

}


td {

    border:
        1px solid #e4e7ec;

    padding:
        12px;

}


.completed {

    color:
        #067647;

    font-weight:
        600;

}


.not-completed {

    color:
        #667085;

}


/*
============================================================
FOOTER
============================================================
*/

footer {

    text-align:
        center;

    padding:
        30px;

    color:
        #667085;

    font-size:
        14px;

}


/*
============================================================
MOBILE
============================================================
*/

@media (max-width: 700px) {

    .info-row {

        grid-template-columns:
            1fr;

    }


    .info-label {

        margin-bottom:
            3px;

    }

}