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

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    user-select: none;
}

#app {
    width: 100%;
    height: 100%;
}



.notifications {
    position: absolute;
    left: 50%;
    top: 2.5rem;
    transform: translateX(-50%);
    z-index: 65;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.notification {
    display: flex;
    align-items: center;
    column-gap: .65rem;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 1rem;
    transition: all .2s ease;
}

.notification p {
    leading-trim: both;
    text-edge: cap;
    font-family: Gilroy-Medium;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 99.5%;
    /* 1.24375rem */
    letter-spacing: 0.025rem;
}

.notification.success p {
    color: #000;

}


.notification.success {
    background: #9DFF82;
}

.notification.error {
    background: #FF2E53;

}

.notification.error p {
    color: #FFF;
}

.job-offer-request {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 35rem;
    height: 11rem;
}

.job-offer-request img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    object-fit: cover;
}

.job-offer-request h1 {
    font-family: Gilroy-SemiBold;
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.995rem;
    color: rgba(0, 0, 0, 0.62);

}

.job-offer-request-button {
    min-width: 6.5625rem;
    height: 3rem;
    display: flex;
    padding: 0 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.8125rem;
    background: rgba(0, 0, 0, 0.17);
    column-gap: .5rem;

}

.job-offer-request-button div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.26);
    border-radius: 0.5rem;
    font-family: Gilroy-SemiBold;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 0.8706rem;
    color: rgba(255, 255, 255, 1);

}

.job-offer-request-button p {
    font-family: Gilroy-SemiBold;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 0.8706rem;
    color: rgba(255, 255, 255, 1);
}

.job-offer-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}


.job-offer-modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.job-offer-text {
    font-family: Gilroy-SemiBold;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.99rem;

    color: rgba(255, 255, 255, 1);

}

.job-offer-modal-container {
    box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);
    background: rgba(255, 255, 255, 0.4);
    width: 20rem;
    height: 27rem;
    border-radius: 1.125rem;

}

.offer-modal-header {
    font-family: Gilroy-SemiBold;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4925rem;
    color: rgba(0, 0, 0, 0.51);

}

.offer-modal-info {
    width: 100%;
    height: 3rem;
    border-radius: 1.125rem;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Gilroy-SemiBold;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2437rem;
    color: rgba(0, 0, 0, 0.51);

}

.offer-line {
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 0.4375rem;
    border-radius: 1.125rem;
    box-shadow: 0rem 0rem 1.3438rem 0rem rgba(0, 0, 0, 0.17);

}

.accept-offer-button {
    width: 100%;
    height: 3rem;
    background: rgba(146, 140, 255, 1);
    box-shadow: 0px 0px 21.5px 0px rgba(0, 0, 0, 0.17);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Gilroy-SemiBold;
    font-size: 20px;
    font-weight: 400;
    line-height: 19.9px;
    color: rgba(255, 255, 255, 1);
    transition: all .2s ease;
}

.accept-offer-button:hover {
    transform: scale(1.07);
}

.decline-offer-button {
    width: 100%;
    height: 3rem;
    background: rgba(235, 91, 91, 1);
    box-shadow: 0px 0px 21.5px 0px rgba(0, 0, 0, 0.17);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Gilroy-SemiBold;
    font-size: 20px;
    font-weight: 400;
    line-height: 19.9px;
    color: rgba(255, 255, 255, 1);
    transition: all .2s ease;

}


.decline-offer-button:hover {
    transform: scale(1.07);
}

.vehicleshop-wrapper-without-overlay {
    width: 100%;
    height: 100%;
    padding: 1.75rem 4rem;
    position: relative;
}

.vehicleshop-wrapper {
    width: 100%;
    height: 100%;
    padding: 1.75rem 4rem;
    position: relative;
    background-image: url(./assets/images/vehicleshop-overlay.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

::-webkit-scrollbar {
    display: none;
}


.bottom-button {
    position: relative;
    cursor: pointer;
    transition: all .2s ease;
}

.bottom-button:hover {
    transform: scale(1.1);
}


.bottom-button p {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Gilroy-BlackItalic;
    font-size: 2.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 99.5%;
    /* 2.73625rem */
    color: #FFF;
    position: relative;
    width: max-content;
}

.bottom-button-big-text p {
    font-size: 3.25rem;
}

.bottom-button p:nth-child(1) {
    z-index: 1;
}


.bottom-button p:nth-child(2) {
    left: -.15rem;
    top: 0;
    color: #FE4040;
    position: absolute;
}

.bottom-button p:nth-child(3) {
    left: .15rem;
    color: #463DFF;
    top: 0;
    position: absolute;
}

.bottom-left-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
}

.bottom-right-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
}

.top-left-overlay {
    position: absolute;
    left: 0;
    top: 0;
}

.top-right-overlay {
    position: absolute;
    right: 0;
    top: 0;
}

.view-mode {
    position: absolute;
    left: 50%;
    bottom: 7.5rem;
    transform: translateX(-50%);
    width: 73.625rem;
    height: 7.75rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(./assets/images/view-mode.png);
    z-index: 44;
}