﻿:root {
    --bs-heading-color: var(--cg-color-midnight-400);
    --bs-link-color: var(--cg-color-text-link-default);
    --bs-link-color-rgb: 0, 116, 200;
    --bs-nav-link-font-size: 1.1rem;
}

.aag-heading-display {
    font-weight: 100;
    font-size: 2.75rem;
    line-height: 3.375rem;
    margin-top: 0px;
}

/*=== Text/Headings ===*/
.heading-level1 {
    font-weight: var(--auro-text-heading-display-weight);
    font-size: var(--auro-text-heading-display-size-breakpoint-md);
    line-height: var(--auro-text-heading-display-height-breakpoint-md);
}

.heading-level2 {
    font-weight: var(--auro-text-heading-700-weight);
    font-size: var(--auro-text-heading-700-size-breakpoint-md);
    line-height: var(--auro-text-heading-700-height-breakpoint-md);
}

.heading-level3 {
    font-weight: var(--auro-text-heading-500-weight);
    font-size: var(--auro-text-heading-500-size-breakpoint-md);
    line-height: var(--auro-text-heading-500-height-breakpoint-md);
}

.heading-level4 {
    font-weight: var(--auro-text-heading-300-weight);
    font-size: var(--auro-text-heading-300-size);
    line-height: var(--auro-text-heading-300-height);
}

/*=== Extended Bootstrap Horizontal Spacing ===*/
.mt-6 { margin-top: 6rem; }
.mt-7 { margin-top: 9rem; }
.mt-8 { margin-top: 12rem; }
.mb-6 { margin-bottom: 6rem; }
.mb-7 { margin-bottom: 9rem; }
.mb-8 { margin-bottom: 12rem; }
.my-6 { margin-top: 6rem; margin-bottom: 6rem; }
.my-7 { margin-top: 9rem; margin-bottom: 9rem; }
.my-8 { margin-top: 12rem; margin-bottom: 12rem; }
.pt-6 { padding-top: 6rem; }
.pt-7 { padding-top: 9rem; }
.pt-8 { padding-top: 12rem; }
.pb-6 { padding-bottom: 6rem; }
.pb-7 { padding-bottom: 9rem; }
.pb-8 { padding-bottom: 12rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.py-7 { padding-top: 9rem; padding-bottom: 9rem; }
.py-8 { padding-top: 12rem; padding-bottom: 12rem; }

/*=== Cards ===*/
.feature-card-rounded {
    min-height: 332px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

a.cta-card {
    border: none;
    border-left: solid 3px var(--auro-color-border-divider-on-light);
    text-decoration: none;
    background: var(--auro-color-background-lighter);
}

    a.cta-card:hover {
        border-color: var(--auro-color-border-active-on-light);
    }

.aag-card {
    border-bottom: 6px solid var(--auro-color-border-divider-on-light);
    overflow: hidden;
}

.cg-card {
    border-width: 0px 0px 6px;
}

.cg-card .card-subheading {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.15rem;
    color: var(--cg-color-midnight-400);
}

.aag-button-link:hover {
    background-color: var(--auro-color-background-lighter);
}

.aag-card .card-img-bg {
    background: no-repeat center center;
    background-size: cover;
    min-height: 180px
}

.card-body {
    color: var(--auro-color-text-primary-on-light);
}

.bg-secondary .card-body {
    color: var(--auro-color-brand-midnight-100)
}

.bg-auro-gray {
    background-color: var(--auro-color-background-lighter);
}

.bg-auro-blue {
    background-color: var(--auro-color-background-darker);
}

.bg-auro-green {
    background-color: var(--auro-color-brand-tropical-200);
}


/* ==== Accordion ==== */
.accordion-button:not(.collapsed) {
    background-color: var(--auro-color-brand-neutral-200);
    color: var(--auro-color-brand-midnight-400);
    font-weight: bold;
}

.accordion-button .fa-regular {
    font-size: 20px;
    opacity: 0.6;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item {
    border-width: 1px 0;
}

/*==== Nav ====*/

header .dropdown-menu {
    --bs-dropdown-color: var(--cg-color-gray-400);
    --bs-dropdown-link-color: var(--cg-color-midnight-400);
    --bs-dropdown-link-hover-color: var(--cg-color-midnight-400);
    --bs-dropdown-link-hover-bg: #FFF;
    background-color: var(--cg-color-gray-100);
    border-bottom: solid 6px var(--cg-color-midnight-400);
}

header .navbar {
    --bs-navbar-nav-link-padding-x: 1rem;
}

header .nav-link {
    color: var(--cg-color-midnight-300);
    --bs-nav-link-font-size: 1.0rem;
    --bs-nav-link-font-weight: 300;
}

header .nav-link .topnav-caret {
    font-size: 0.9rem;
    color: var(--cg-color-gray-300);
}
    header .nav-link:hover .topnav-caret{
        color: var(--cg-color-midnight-400);
    }

    footer {
        color: var(--cg-color-neutral-300);
        min-height: 150px;
        background-color: var(--cg-color-midnight-500);
    }

    footer a {
        color: var(--cg-color-neutral-100);
        font-size: 0.8rem;
    }

        footer a:hover {
            text-decoration: none;
        }

    footer .footer-copy {
        border-top: solid 1px var(--cg-color-midnight-500);
        color: var(--cg-color-neutral-400);
        font-size: 0.8rem;
    }

    footer .footer-social {
        font-size: 1.3rem;
        color: var(--cg-color-neutral-400);
    }

    footer.ascom {
        --background-image-lazy: url(/getmedia/9937a9d8-6eb4-4c3d-a03e-66ba487cad08/plane-tail-footer.png);
        background-image: var(--background-image-lazy);
        background-position: right 0% bottom -30px;
        background-repeat: no-repeat;
        background-size: 450px;
    }

    footer .footer-waves #waves {
        width: 100%;
        height: 30px;
        margin-top: -42px
    }

    footer.ascom .row.above-tail {
        margin-bottom: 5rem;
    }

    footer.ascom .nav-group-title {
        color: #fff;
        font-size: 1.2em;
    }

    footer.ascom .list-group a {
        color: #fff;
        text-decoration: none;
    }

        footer.ascom .list-group a:hover {
            text-decoration: underline;
        }

/*=== Auro section ===*/

.auro-section {
    border-bottom: solid 6px var(--auro-color-brand-neutral-400);
    border-radius: var(--bs-border-radius);
}

    .auro-section.border-bottom-green {
        border-bottom-color: var(--auro-color-brand-tropical-300);
    }

    .auro-section.border-bottom-purple {
        border-bottom-color: var(--auro-color-brand-alpine-200);
    }

    .auro-section.border-bottom-brightblue {
        border-bottom-color: var(--auro-color-brand-atlas-200);
    }

    .auro-section.border-bottom-grayblue {
        border-bottom-color: var(--auro-color-brand-midnight-300);
    }

    .auro-section.border-bottom-gold {
        border-bottom-color: var(--auro-color-brand-goldcoast-400);
    }

    .auro-section.border-bottom-pink {
        border-bottom-color: var(--auro-color-brand-flamingo-300);
    }

    .auro-section.border-bottom-teal {
        border-bottom-color: var(--auro-color-brand-breeze-200);
    }

    .auro-section.top-border-green {
        border-top: solid 2px var(--auro-color-brand-tropical-300);
    }

/* Forms */

.auro-form-section {
    border-bottom: solid 6px var(--auro-color-brand-tropical-400);
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--bs-light-rgb),1.0);
    padding: 1rem;
}

    .auro-form-section.auro-top-border {
        border-top: solid 2px var(--auro-color-brand-tropical-300);
    }

.auro-tabs .nav-link {
    color: var(--auro-color-text-link-on-light);
    cursor: pointer;
}

    .auro-tabs .nav-link.active {
        background-color: rgba(var(--bs-light-rgb),1.0);
        border-top: solid 6px var(--auro-color-brand-tropical-300);
        color: var(--auro-color-text-primary-on-light);
        border-top-left-radius: var(--bs-border-radius) !important;
        border-top-right-radius: var(--bs-border-radius) !important;
    }

input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
    box-shadow: none;
    border-color: var(--auro-color-border-active-on-light);
}

input.form-control:valid,
select.form-select:valid,
textarea.form-control:valid {
    border-bottom-color: var(--auro-color-brand-tropical-400);
}

/*=== Kentico forms: Auro Text Input ===*/
.auro-input,
.form-field {
    position: relative;
}

.form-field {
    margin-bottom: 15px;
}

    .form-field .form-control:focus {
        box-shadow: none;
    }

    .auro-input input,
    .form-field input.form-control[type="text"],
    .form-field input.form-control[type="email"],
    .form-field textarea.form-control,
    .form-field select.form-control {
        display: flex;
        align-items: center;
        flex-direction: row;
        padding: 32px 12px 8px;
        height: 58px;
        border: 1px solid var(--auro-color-border-primary-on-light);
        border-radius: 4px;
        align-self: stretch;
        color: var(--auro-color-text-primary-on-light);
    }

    .form-field input.form-control[type="checkbox"] {
        appearance: auto;
        height: 1.2rem;
        width: 1.2rem;
        display: inline;
        vertical-align: text-bottom;
    }

    .form-field .ktc-checkbox label {
        color: var(--auro-color-text-secondary-on-light);
    }

.auro-input input[type="search"] {
    padding: 8px 12px;
    height: auto;
}

.form-field textarea.form-control {
    padding: 32px 12px 8px;
    height: auto;
}

    .auro-input input[type="text"]:focus,
    .auro-input input[type="search"]:focus,
    .form-field input.form-control[type="text"]:focus,
    .form-field input.form-control[type="email"]:focus,
    .form-field textarea.form-control:focus,
    .form-field select.form-control:focus {
        border: 2px solid var(--auro-color-border-active-on-light);
        padding: 31px 11px 7px;
    }

.auro-input input[type="search"]:focus {
    padding: 7px 11px;
}

.auro-input label,
.form-field label.control-label {
    color: var(--auro-color-text-secondary-on-light);
    font-size: 12px;
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
}

.auro-input .help-text,
.form-field .explanation-text {
    font-size: var(--auro-text-body-size-xs);
    margin: 0.25rem 0;
    color: var(--auro-color-text-secondary-on-light)
}

    .auro-input .help-text.validation {
        color: var(--auro-color-alert-error-on-light);
    }

.auro-input.invalid input[type="text"] {
    border: 2px solid var(--auro-color-alert-error-on-light);
    padding: 31px 11px 8px;
}

.form-field .field-validation-error {
    font-size: 12px;
    color: var(--auro-color-alert-error-on-light);
}

.form-field input.form-control.input-validation-error {
    border-color: var(--auro-color-border-error-on-light);
}

/* Button/hyperlink */
.auro-button,
input[type="submit"] {
    display: inline-block;
    padding: 0 var(--auro-size-md);
    text-decoration: none;
    border: 1px solid var(--auro-color-ui-default-on-light);
    border-radius: var(--auro-border-radius);
    background-color: var(--auro-color-ui-default-on-light);
    color: var(--auro-color-text-primary-on-dark);
    font-family: var(--auro-font-family-default);
    font-size: var(--auro-text-body-size-default);
    font-weight: var(--auro-text-body-default-weight);
    line-height: calc((var(--auro-size-xxl)) + (var(--auro-size-xs)) - (var(--auro-size-xxxs)));
    text-align: center;
    transition: all 0.15s ease 0s;
    min-width: calc((var(--auro-size-xxxl))*3);
}

    .auro-button:hover,
    input[type="submit"]:hover {
        border: 1px solid var(--auro-color-ui-hover-on-light);
        background-color: var(--auro-color-ui-hover-on-light);
    }

    .auro-button.secondary {
        border: 1px solid var(--auro-color-ui-default-on-light);
        background-color: var(--auro-color-background-lightest);
        color: var(--auro-color-text-link-on-light);
    }

        .auro-button.secondary.active {
            font-weight: bold;
        }

        .auro-button.secondary:hover {
            border: 1px solid var(--auro-color-ui-default-on-light);
            background-color: var(--auro-color-background-lighter);
        }

/* Known Shipper Form styling */
input.form-control:invalid,
select.form-select:invalid {
    border-bottom-color: var(--auro-color-border-error-on-light)
}

span.valmsg {
    display: none;
    font-size: 0.7em;
    color: var(--auro-color-alert-error-on-light);
    position: absolute;
    margin-top: -20px;
    right: 5px;
}

input.form-control:invalid ~ span.valmsg.changed,
select.form-select:invalid ~ span.valmsg.changed {
    display: block;
}

input.form-control:focus,
select.form-select:focus {
    border: 2px solid var(--auro-color-border-active-on-light)
}


/* BEGIN: Blackwing */
/* Homepage Hero Image Customizations */

.hero-homepage {
    height: 150px;
}
/* Homepage hero section height */

@media (max-width: 991px) {

    .hero-homepage {
        height: 200px;
    }
    /* Homepage hero section height */

}

@media (min-width: 992px) {

    .hero-homepage {
        height: 450px;
    }
    /* Homepage hero section height */

    div.home-tools-widget {
        margin-top: -100px;
        background-color: #ffffff;
        padding: 1rem 1rem 0;
        border-radius:1rem;
    }
    /* Float tabs section over hero image on homepage */

}

/* Subpage Hero Image Customizations */
.hero-subpage {
    max-width: 1296px;
    height: 150px;
}
/* Subpage hero section height */

@media (min-width: 768px) {

    .hero-subpage {
        height: 200px;
    }
    /* Subpage hero section height */

}

@media (min-width: 992px) {

    .hero-subpage {
        height: 250px;
    }
    /* Subpage hero section height */

}

/*Navbar Customizations*/

@media (max-width: 767px) {
    header.aac-aura {
        background-position:-30px top;
    }
    /* Adjust logo on mobile */
}

@media (max-width: 991px) {

    header {
        min-height: 100px;
    }
    /* Adjust navbar height on mobile */

    .navbar > .container {
        display: flex;
        align-items: center;
    }
    /* Center hamburger menu with logo */

}

/* Notices */
.notice-card {
    border: solid 1px #333;
    border-left-width: 8px;
    padding: 10px;
}

    .notice-card.notice-warning {
        border-color: var(--auro-color-alert-warning-on-light);
    }
    .notice-card.notice-error {
        border-color: var(--auro-color-alert-error-on-light);
    }
    .notice-card.notice-success {
        border-color: var(--auro-color-alert-success-on-light);
    }
    .notice-card.notice-notification {
        border-color: var(--auro-color-alert-notification-on-light);
    }

.notice-icon {
    display: flex;
    color: #999;
}
.notice-warning .notice-icon {
    color: var(--auro-color-alert-warning-on-light);
}
.notice-error .notice-icon {
    color: var(--auro-color-alert-error-on-light);
}
.notice-success .notice-icon {
    color: var(--auro-color-alert-success-on-light);
}
.notice-notification .notice-icon {
    color: var(--auro-color-alert-notification-on-light);
}

/* Notice lists */
.collapse-icon {
    cursor: pointer;
}

.collapse-icon::after {
    flex-shrink: 0;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 1rem;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.2rem;
    background-position: center;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}

.collapse-icon:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* Services */
.service-card li strong {
    font-size: var(--auro-text-body-size-lg);
}
.service-card li {
    min-height:90px;
}
.service-card li.auto-height {
    min-height:0;
}
@media (max-width: 991px) {
    .service-card li {
        min-height:0;
    }
}

/*AlpineJS cloak*/
[x-cloak] {
    display: none !important;
}

/* Locations */
.location-code {
    color: var(--auro-color-brand-neutral-400);
}

.location-columns {
    column-width: 250px;
    column-fill: balance;
    list-style-type: none;
}

.locstate {
    break-inside: avoid;
}

    .locstate a {
        display: block;
    }

        .locstate a:hover {
            text-decoration: none;
        }

.loccity {
    width: 160px;
    border: solid 1px #ccc;
    padding: 5px;
    display: block;
}