/*          */
/* Tracking */
/*          */

#tracking {
    margin-top: 80px;
    margin-bottom: 80px;
}

#tracking .content {
    margin-top: 80px;
}


/*       */
/* Title */
/*       */

#tracking .title h1 {
    text-align: center;
    font-size: 36px;
}

#tracking .title strong {
    font-weight: 400;
    color: var(--c-theme-1);
}

#tracking .title p {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--c-foreground-2);
}


/*      */
/* Form */
/*      */

#tracking .form-control {
    padding: 10px;
    border: 1px solid var(--c-border-1);
    border-radius: 5px;
    font-family: var(--f-family-1);
    font-size: 13px;
    background: var(--c-background-2);
}

#tracking .form-control[type="submit"] {
    transition: filter .3s;
    letter-spacing: .5px;
    font-family: var(--f-family-3);
    font-size: 13px;
    color: white;
    background: var(--c-theme-1);
}

#tracking .form-control[type="submit"]:hover {
    filter: brightness(1.1);
}

#tracking .form-control::placeholder {
    letter-spacing: .5px;
    color: var(--c-foreground-2);
}

#tracking .field-validation-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}


/*        */
/* Result */
/*        */

#tracking .result {
    margin-top: 80px;
    padding: 30px;
    text-align: justify;
    font-size: 14px;
    background: var(--c-background-2);
}

#tracking .result span.code {
    font-family: var(--f-family-3);
}

#tracking .result span.status {
    padding: 2px 8px 3px 8px;
    border-radius: 3px;
    margin: 0 4px;
}

#tracking .result span.status.pending {
    background: #ffe69c;
}

#tracking .result span.status.shipped {
    background: #a3cfbb;
}

#tracking .result span.status.declined {
    background: #f1aeb5;
}