body {
    background-color: white;
}

.spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #d9d9d9;
    border-top-color: #3a458d;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#pageHeader {
    background-color: white;
    padding-top: 10px;
}

#pageMainContent {
    padding-bottom: var(--mud-appbar-height);
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mud-appbar-height) - var(--mud-appbar-height));
}

#pageMainContent h2 {
    font-weight: bold;
    color: #3a458d;
}

.selling-point {
    font-size: 12px;
}

.full-height {
    height: 100% !important;
}

.text-center {
    text-align: center;
}

.medium-button-option {
    height: 66px;
    font-size: 14px;
}

.small-button-option {
    height: 44px;
    font-size: 14px;
    border-radius: 10px;
}

.text-as-icon {
    width: 100%;
    height: 32px;
    text-align: center;
    align-content: center;
    font-weight: 500;
    font-size: 25px;
}

.big-button-option {
    height: 100px;
    font-size: 20px;
}

.no-text-wrap .mud-button-label {
    text-wrap: nowrap;
}

.icon-extra-small {
    font-size: 0.6rem;
}

.icon-white {
    color: white;
}

.vehicle-image {
    width: 100%;
}

.d-flex:has(> div.bullet-small) {
    flex-wrap: wrap;
}

.mud-breadcrumb-item.mud-disabled {
    a {
        color: var(--mud-palette-text-primary);
    }

    font-weight: 600;
}

.font-bold {
    font-weight: 600;
}

@media (max-width: 600px) {
    .image-carousel {
        height: 38vh;
    }
}

@media (max-width: 600px) {
    .image-carousel {
        height: 38vh;
    }
}

@media (min-width: 600px) {
    .image-carousel {
        height: 48vh;
    }
}

.mud-nav-link-text {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    height: auto;
    justify-items: center;
}

.mud-nav-link {
    background-color: var(--mud-palette-dark-hover) !important;
}

.mud-nav-link:hover:not(.active) {
    background-color: var(--mud-palette-tertiary-hover) !important;
}

.mud-nav-link.active {
    background-color: var(--mud-palette-tertiary) !important;
}

.mud-nav-link.active .mud-typography {
    color: var(--mud-palette-primary-text) !important;
}

.mud-nav-link.active .mud-svg-icon {
    color: var(--mud-palette-primary-text) !important;
}

.mud-nav-link:focus:not(.active) {
    background-color: var(--mud-palette-tertiary-hover) !important;
}

.vehicle-search-button-container {
    display: none; 
    position: fixed; 
    height: 75px; 
    width: 100%;
    flex-direction: row;
    padding: 8px !important;
    gap: 8px;
    background: white;
}

.mud-drawer--open:not(.mud-drawer--initial) .vehicle-search-button-container {
    display: flex !important;
    flex-direction: row;
    animation: mud-drawer-slide-in-bottom 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
    bottom: 0;
}

.mud-drawer--closed:not(.mud-drawer--initial) .vehicle-search-button-container {
    display: flex !important;
    animation: mud-drawer-slide-out-bottom 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
    bottom: calc(-1* var(--mud-drawer-content-height));
}

.received:after, .sent:after {
    content: '';
    border: 14px solid transparent;
    position: absolute;
    margin-top: -30px;
}

.message {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
    font-size: 1.1em;
    border-radius: 10px;
    padding: 12px;
    max-width: 80%;
    box-shadow: var(--mud-elevation-25);
    max-width: 700px;
}

.message .timestamp {
    text-align: right;
}

.message p a {
    color: var(--mud-palette-primary) !important;
}

.received {
    background-color: var(--mud-palette-background-grey);
    margin-right: auto;
    max-width: 90%;
}

.sent {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-primary-text);
    margin-left: auto;
    max-width: 90%;
}

.sent:after {
    border-left-color: var(--mud-palette-secondary);
    border-right: 0;
    right: -10px;
    bottom: 5px;
}

.notice {
    background-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-primary-text);
    align-items: center;
    align-self: center;
    margin: 5px;
    padding: 8px;
    border-radius: 10px;
    text-align: center;
}

.chat-toolbar {
    background-color: var(--mud-palette-background-grey);
    border-radius: 4px 4px 0 0;
    box-shadow: var(--mud-elevation-25);
    min-height: 50px;
}

#chatContainer {
    padding-top: 5px;
    overflow: scroll;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

#chatContainer > :first-child {
    margin-top: auto !important;
}

.multiple-choice.selected {
    color: var(--mud-palette-primary) !important;
    border: solid var(--mud-palette-primary) !important;
}

.typing {
    height: 22px;
    position: relative;

    span {
        content: '';
        animation: blink 1.5s infinite;
        animation-fill-mode: both;
        height: 10px;
        width: 10px;
        background: var(--mud-palette-secondary);
        position: absolute;
        left:0;
        top: 25%;
        border-radius: 50%;

        &:nth-child(2) {
            animation-delay: .2s;
            margin-left: 15px;
        }

        &:nth-child(3) {
            animation-delay: .4s;
            margin-left: 30px;
        }
    }
}


@keyframes blink {
    0% {
        opacity: .1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: .1;
    }
}

.chip-extra-small {
    border-radius: 10px !important;
    font-size: 12px !important;
    height: 18px !important;
}

.bounce {
    animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

@-webkit-keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX(1000px);
        transform: translateX(210px);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-230px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX(1000px);
        transform: translateX(210px);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-230px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-out-right {
    -webkit-animation: slide-out-right 4s cubic-bezier(0.8, 0.3, 0.4, 0.1) 0s both infinite;
    animation: slide-out-right 4s cubic-bezier(0.8, 0.3, 0.4, 0.1) 0s both infinite;
}

.icon-xl {
    font-size: 3rem !important;
}

.colour-icon {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
    border-radius: 50%;
}

.gradient-black {
    background: linear-gradient(135deg, #000000, #434343);
}

.gradient-blue {
    background: linear-gradient(135deg, #1d11f2, #00c3fe);
}

.gradient-grey {
    background: linear-gradient(135deg, #bdc3c7, #2c3e50);
}

.gradient-white {
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
}

.gradient-silver {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
}

.gradient-red {
    background: linear-gradient(135deg, #ff0003, #ee7b20);
}

.gradient-green {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
}

.gradient-beige {
    background: linear-gradient(135deg, #f5f5dc, #ede2d1);
}

.gradient-bronze {
    background: linear-gradient(135deg, #cd7f32, #d8a77b);
}

.gradient-brown {
    background: linear-gradient(135deg, #8b4513, #a0522d);
}

.gradient-gold {
    background: linear-gradient(135deg, #ffd700, #ffb700);
}

.gradient-multicolour {
    background: conic-gradient(
            #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff
    );
}

.gradient-orange {
    background: linear-gradient(135deg, #ff8008, #ffc837);
}

.gradient-pink {
    background: linear-gradient(135deg, #ffafbd, #ffc3a0);
}

.gradient-purple {
    background: linear-gradient(135deg, #7b4397, #dc24cd)
}

.gradient-yellow {
    background: linear-gradient(135deg, #f7e84b, #ffd700);
}

.expansion-panel-gutters-4 .mud-expand-panel-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@keyframes glowing-border {
    0% {
        border-color: gold;
        box-shadow: 0 0 5px gold;
    }
    50% {
        border-color: #ffcc00;
        box-shadow: 0 0 15px #ffcc00;
    }
    100% {
        border-color: gold;
        box-shadow: 0 0 5px gold;
    }
}

.saved-vehicles-tab {
    .mud-tab {
        font-size: .675rem;
        min-height: 40px;
        text-transform: none;
        .mud-badge {
            height: 20px !important;
            width: 20px !important;
            font-size: 10px !important;
        }
    }
}

.mud-alert.align-center .mud-alert-position {
    align-items: center !important;
}