body {
    font-size: 2vh;
    color: var(--clr-white);
    font-weight: 600;
    font-family: var(--ff-special);
    overflow: hidden;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.main__garage-header {
    margin-left: 1vh;
    margin-top: 1.5vh;
}

.main__garage-header-left-stripe {
    width: 0.1vh;
    height: 3.5vh;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 0.5vh;
}

.main__garage-header-left {
    font-family: var(--ff-arame);
    font-size: 1.5vh;
}

.main__garage-header-left p:first-child {
    font-weight: 100;
    color: #ffffff80;
    letter-spacing: 0.5vh;
    line-height: 1.5vh;
}

.main__garage-header-left P:last-child {
    font-weight: 700;
    font-size: 2.6vh;
    color: #fff;
    line-height: 2.6vh;
}

.main__garage-header-bg img {
    width: 6vh;
}

.main__garage-info-container {
    position:absolute;
    top:3.25vh;
    right:8vh;
    display:flex;
    gap:1vh
}

.main__garage-info-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.main__garage-info-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main__garage-info-button#parkIn {
    display: flex;
    justify-content: center;
    padding: 1vh;
    align-items: center;
    border-radius: 0.4vh;
    height: 3.5vh;
    border: 0.1vh solid #c11717;
    background: linear-gradient(0deg, #9c1414 0%, rgba(255, 125, 69, 0) 100%);
    box-shadow: 0 0 3.7vh #a30909 inset, 0 0.4vh 5.6vh #ff454540;
    font-size: 1.2vh;
    color: var(--color-white);
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s ease-in;
}

.main__garage-info-button#parkIn:hover,
.main__garage-info-button#parkIn.active {
    box-shadow: 0 0 1.7vh #9c1414 inset;
}

.main__garage-info-button#parkOut {
    height: 3.5vh;
    padding: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4vh;
    border: 0.1vh solid #d939d9;
    background: radial-gradient(539.11% 270.5% at 50.17% 50%, rgba(190, 57, 217, 0.25) 0%, rgba(206, 57, 217, 0) 100%);
    box-shadow: 0 0 3.7vh #d939d9 inset, 0 0.4vh 5.6vh #b439d940;
    font-size: 1.2vh;
    color: var(--color-white);
    text-transform: uppercase;
    transition: 0.2s ease-in;
    cursor: pointer;
}

.main__garage-info-button#parkOut:hover,
.main__garage-info-button#parkOut.active {
    box-shadow: 0 0 1.7vh #d939d9 inset;
}

.main__garage-info-button#parkFavOut {
    position: relative;
    height: 3.5vh;
    padding-left: 1vh;
    padding-right: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4vh;
    border: 0.1vh solid #ff4848;
    background: radial-gradient(539.11% 270.5% at 50.17% 50%, rgba(217, 57, 57, 0.25) 0%, rrgba(217, 57, 57, 0)100%);
    box-shadow: 0 0 3.7vh #ff4545 inset, 0 0.4vh 5.6vh #d9393940;
    font-size: 1.2vh;
    color: var(--color-white);
    text-transform: uppercase;
    transition: 0.2s ease-in;
    cursor: pointer;
    gap: 0.5vh;
    overflow: hidden;
}

.main__garage-info-button#parkFavOut p {
    z-index: 100;
}

.main__garage-info-button#parkFavOut:hover .main__garage-info-button-bg,
.main__garage-info-button#parkFavOut.active .main__garage-info-button-bg {
    transform: translate(-50%, -50%) scale(2);
    color: #8f1e1e;
}

.main__garage-info-button-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3vh;
    color: #741919;
    transition: 0.2s ease-in;
    z-index: 0;
    opacity: 0.25;
}

.main__garage-exit-button-container {
    position: absolute;
    top: 3.2vh;
    right: 3.5vh;
}

.main__garage-exit-button-grid {
    display: flex;
    gap: 1vh;
    align-items: center;
}

.main__garage-exit-circle {
    width: 3.5vh;
    height: 3.5vh;
    text-transform: uppercase;
    font-weight: 400;

    border-radius: 0.5vh;
    border: .1vh solid #FF3055;
    background: linear-gradient(0deg,#FF0935 0%,rgba(184,28,37,0) 100%);
    box-shadow: 0 0 3.7vh #ee4b69 inset,0 .4vh 3vh #b81c258c;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 1.5vh;
    cursor: pointer;
    transition: .2s ease-in;
    position: relative;
    z-index: 9999
}

.main__garage-exit-circle i {
    transition: .2s ease-in
}

.main__garage-exit-circle:hover {
    opacity: .75;
    box-shadow: 0 0 3.7vh #ee4b69 inset,0 .4vh 5vh #ff1723
}

.main__garage-exit-circle:hover i {
    transform: rotate(90deg)
}

.main__garage-scroll-container {
    width: 100vh;
    height: 52vh;
    position: absolute;
    left: 52vh;
    transform: translateX(-50%);
    top: 85px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    gap: 1vh;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

.main__garage-scroll-item {
    position: relative;
    width: 225px;
    height: 260px;
    padding: 1vh;
    transition: .2s ease-in;

    border: .1vh solid rgba(255, 255, 255, .15);
    box-shadow: 0 0 2.5vh #ffffff26 inset;
    border-radius: .4vh;
}

.garage-item {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.garage-item.animate-in {
    transform: translateY(20px);
    opacity: 0;
}
    
.main__garage-scroll-item-top-header {
    position: absolute;
    top: 1.5vh;
    right: 1.5vh;
    font-size: 1.8vh;
    display: flex;
    align-items: center;
    gap: .5vh;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    transition: .2s ease-in;
}

.main__garage-scroll-item-top-header i {
    color: #ffffff40;
    cursor: pointer;
    transition: 0.2s ease-in;
    font-size: 1.5vh;
}

.main__garage-scroll-item-top-header:hover i,
.main__garage-scroll-item-top-header.active i {
    color: #ff4848;
    text-shadow: 0vh 0vh 1.7vh #ff4848;
}
    
.main__garage-scroll-item-bottom-container {
    position: absolute;
    top: 1vh;
    left: 1vh;
    width: 100%;
}
    
.main__garage-scroll-item-bottom-container-header {
    position: absolute;
    font-size:2vh;
    font-family:var(--ff-druk);
    text-transform:uppercase;
    background:radial-gradient(539.11% 270.5% at 50.17% 50%,#c11717 0%,rgba(217,174,57,0) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
    
.main__garage-scroll-item-bottom-container-description {
    position: absolute;
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-size:1.2vh;
    line-height: 19px;
    color:var(--color-white);
    margin-top: 2.5vh;
}
    
.main__garage-scroll-item-car-img {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    src: url('./img/garage/panto.png');
}
    
.main__garage-scroll-item-car-img img {
    src: url('./img/garage/panto.png');
    width:15vh
}
    
.garage__span-1 {
    color:#ffcc48 !important;
    text-shadow: 0vh 0vh 1.7vh #ffcc48 !important;
}
    
.garage__span-2 {
    color:#4c48ff !important;
    text-shadow: 0vh 0vh 1.7vh #4c48ff !important;
}
    
.garage__span-3 {
    color: #cf48ff !important;
    text-shadow: 0vh 0vh 1.7vh #cf48ff !important;
}

.main__garage-rename-icon {
    position: absolute;
    top: 0.9vh;
    right: 4vh;
    cursor: pointer;
    transition: .2s ease-in;
    z-index: 1;
}

.main__garage-rename-icon i {
    color: #ffffff40;
    cursor: pointer;
    transition: 0.2s ease-in;
    font-size: 1.5vh;
}
.main__garage-rename-icon:hover i,
.main__garage-rename-icon.active i {
    color: #ff4848;
    text-shadow: 0vh 0vh 1.7vh #ff4848;
}

.main__garage-scroll-item-rename-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2vh;
}

.main__garage-scroll-item-rename-header-icon {
    font-size: 3.25vh;
    text-transform: uppercase;
    color: var(--clr-new-orange);
    text-shadow: 0vh 0vh 1.7vh var(--clr-new-orange);
}

.main__garage-scroll-item-rename-header-small {
    font-size: 1.2vh;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-family: var(--ff-inter);
    font-weight: 300;
    margin-top: 1vh;
}

.main__garage-scroll-item-rename-input-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 16vh;
    background: rgba(255, 255, 255, .05);
    border-radius: .8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vh;
    margin-top: 2.75vh;
}

.main__garage-scroll-item-rename-input-container input {
    background: none;
    outline: none;
    border: none;
    width: 10vh;
    font-family: var(--ff-inter);
    font-size: 1.3vh;
    text-align: center;
    color: rgba(255, 255, 255, .25);
}

.main__garage-scroll-item-rename-input-container input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.main__garage-item-window-2,
.main__garage-item-window-1 {
    position: relative;
    height: 100%;
}

.main__garage-scroll-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -6vh;
    left: 0.5vh;
    width: 17.8vh;
    height: 3.8vh;
    text-transform: uppercase;
    font-family: var(--ff-rad);
    font-size: 1.2vh;
    color: var(--color-white);
    border-radius: .25vh;
    border: .1vh solid rgba(255, 255, 255, .15);
    box-shadow: 0vh 0vh 3.7vh 0vh rgba(255, 255, 255, .15) inset, 0vh .4vh 5.6vh 0vh rgba(255, 255, 255, .15);
    padding: 1vh;
    cursor: pointer;
    transition: .2s ease-in;
}

.main__garage-scroll-item-btn:hover {
    box-shadow: 0vh 0vh 3vh #ffffff inset, 0vh 0vh 1.7vh #c11717;
    background: #9c1414;
    border: .1vh solid transparent;
}

.main__garage-scroll-item-return-icon {
    position: absolute;
    top: -1.5vh;
    right: 0.5vh;
    color: rgba(255, 255, 255, .25);
    cursor: pointer;
    font-size: 1.6vh;
    transition: .2s ease-in;
}

.main__garage-scroll-item-return-icon:hover {
    color: var(--clr-new-orange);
    text-shadow: 0vh 0vh 1.7vh var(--clr-new-orange);
}