@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* COLORS */
body:has(.carrier-page) {
    background-color: rgb(var(--background-color));
    color: rgb(var(--text-color));
}
.content:has(.carrier-page) {
    padding: 0px;
}

.carrier-page .section-title {
    background-color: rgb(var(--section-background));
    color: rgb(var(--section-text));
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
.carrier-page button {
    color: rgb(var(--button-color));
    background-color: rgb(var(--button-background-color));
    border-color: rgb(var(--button-background-color));
}

    .carrier-page button:hover {
        color: rgb(var(--button-color));
        background-color: rgb(var(--button-background-hover-color));
        border-color: rgb(var(--button-background-hover-color));
    }

.carrier-page.expired button {
    background-color: rgba(var(--button-background-color), 0.5);
    border-color: rgba(var(--button-background-color), 0.5);
}

    .carrier-page.expired button:hover {
        background-color: rgba(var(--button-background-color), 0.5);
        border-color: rgba(var(--button-background-color), 0.5);
        cursor:not-allowed;
    }

.carrier-page .label {
    color: rgb(var(--button-background-color));
}

.carrier-page .message {
    grid-column: 1/-1;
    font-size: 120%;
    padding-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    line-height: 1.5rem;
}

.carrier-page .equipment-code {
    color: rgb(var(--equipment-code));
}

/* INPUT */
.carrier-page .form-items input, .form-items select, .carrier-page textarea {
    border: 1px solid #ced3da;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
    border-radius: 4px;
    background: #FFF;
    padding: 0.375rem 0.75rem;
    color: rgb(var(--text-color));
    font-size: 1rem;
    font-weight: 400;
    font-family: Roboto;
}
.carrier-page .form-items input {
    line-height: 1.8em;
}
    .carrier-page .form-items input[type=number] {
        padding-right: 0.25rem;
    }
.carrier-page .form-items select, .carrier-page textarea {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.carrier-page .form-group input[type=checkbox] {
    width: 1.5rem;
    height: 1.5rem;
}

/* FORMAT */
.carrier-page {
    padding: 0px;
    margin: 0px;
    font-family: "Roboto Condensed", Arial, sans-serif;
}
.carrier-page .label {
    white-space: nowrap;
}

    .carrier-page .app-logo {
        background: none;
        background-color: rgb(var(--logo-background));
        display: flex;
        justify-content: center;
        padding-top: 1.0rem;
        padding-bottom: 1.0rem;
    }
        .carrier-page .app-logo img {
            max-width: 90vw; /* Limit the logo to 90% of the view width */
        }

    .carrier-page .load-clock {
        background: linear-gradient(0deg, rgb(var(--background-color)) 0%, rgb(var(--logo-background)) 1rem);
        display: flex;
        justify-content: center;
        padding-top: 0.5rem;
        padding-bottom: 0.8rem;
        position: sticky;
        top: 0px;
    }
    .carrier-page .clock-holder {
        column-gap: 0.5em;
        row-gap: 0.3em;
    }

    .carrier-page .clock-holder .time-row {
        font-size: 2em;
    }

    .carrier-page .load-clock .clock-holder .time-row {
        font-size: 2em;
    }

    .carrier-page .load-clock .clock-holder .time {
        background-color: #F0F0F0;
        border-radius: 7px;
        width: 4ex;
        height: 4ex;
    }

.carrier-page .section-holder, .carrier-page .section-holder-desktop {
    display: flex;
    flex-direction: column;
    row-gap: 0.3rem;
}

.carrier-page .section-holder-desktop {
    display: grid;
    grid-template-columns: minmax(25rem, 15fr) 20fr;
    column-gap: 1.5rem;
    max-width: 85rem;
    margin-left: auto;
    margin-right: auto;
}

.carrier-page .section-title {
    padding: 0.2em 0.3em;
    display: grid;
    grid-template-columns: auto auto;
}

.carrier-page .section-content {
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.4rem;
}

.carrier-page .split-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 1rem;
}

    .carrier-page .section-title .line1 {
        text-transform: uppercase;
        font-size: 150%;
    }

    .carrier-page .section-title .line2 {
        grid-column: 1/-1;
    }

.carrier-page .stop-date {
    text-align: end;
}

.carrier-page .stop-location > div {
    text-align: right;
}

.carrier-page .weights {
    display: grid;
    grid-template-columns: max-content max-content auto;
    column-gap: 2rem;
    row-gap: 0.1rem;
}

.carrier-page .accessorials > div {
    text-align: right;
}

.carrier-page .carrier-response-header {
    grid-column: 1/-1;
}

.carrier-page .form-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1em;
}

.carrier-page .form-group {
    margin-bottom: 1rem;
}

    .carrier-page .form-group label {
        display: flex;
        flex-direction: column;
        row-gap: 0.5rem;
    }

    .carrier-page .form-group.equipment select {
        min-width:14rem;
    }

    .carrier-page input.currency {
        width:6rem;
    }

.carrier-page .checkbox-holder {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.25rem;
}

.carrier-page .form-items.final-group {
    flex-wrap: nowrap;
}
.carrier-page .form-items.button-group {
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding-bottom: 1rem;
}
    .carrier-page .form-items .conditions {
        width: 100%;
    }

.carrier-page .form-items .conditions textarea {
    width:100%;
    height:5rem;
}

    .carrier-page .form-items .conditions textarea[disabled], .carrier-page .form-items input[disabled] {
        background-color: rgb(var(--background-color));
    }
    .carrier-page .form-items input[disabled] {
        text-align: right;
        padding-right: 0.0em;
        padding-left: 0.0em;
    }

    .carrier-page button {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        font-size: 1rem;
        line-height: 2.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        padding-left: 2rem;
        padding-right: 2rem;
        cursor: pointer;
    }

.carrier-page button {
    text-decoration:none;
}

.carrier-page .owner-note {
    padding-top: 0.4rem;
    padding-bottom: 0.5rem;
}

.carrierbid-email-prompt {
    padding: 1.5rem;
    text-align: center;
    font-size: 110%;
}

    .carrierbid-email-prompt input {
        margin: 0.5rem;
        font-size: 90%;
    }

        .carrierbid-email-prompt input[type="email"] {
            min-width: 80%;
            padding: 0.5rem;
        }

        .carrierbid-email-prompt input[type="button"] {
            padding: 0.3rem 3.0rem;
        }

@media (max-width: 55rem) {
    .carrier-page .app-logo {
        background: none;
        background-color: rgb(var(--logo-background));
    }

    .carrier-page .section-holder-desktop {
        display: flex;
        flex-direction: column;
        row-gap: 0.3rem;
    }
    .carrier-page .load-clock {
        padding-bottom:0.3em;
    }
}