* {
    margin: 0vh;
    user-select: none;
    padding: 0vh;
    -webkit-user-drag: none;
}

.garage {
    display: none;
    overflow: hidden;
    position: absolute;
    border-radius: 2.41vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.95;
    /* background: var(--garge-background); */
    flex-direction: column;
    align-items: center;
}

.shadow {
    position: absolute;
    top: 9.63vh;
    left: 0.93vh;
    width: 12.13vh;
    height: 12.13vh;
    background: var(--garage-backgroundShadows);
    filter: blur(10.19vh);
}

.shadow-twice {
    position: absolute;
    top: 37.87vh;
    left: 16.48vh;
    width: 17.04vh;
    height: 17.04vh;
    background: var(--garage-backgroundShadows);
    filter: blur(11.06vh);
}

.header {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    left: 50%;
    margin-top: 4.91vh;
    transform: translateX(-50%);
    align-items: flex-end;
    height: 6.11vh;
}

.server-name {
    position: relative;
    white-space: nowrap;
    font-family: "Gilroy-ExtraBold";
    font-size: 4.89vh;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-left: 5.83vh;
    background: var(--serverName-title);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.garage-name {
    position: relative;
    height: 4.63vh;
    margin-top: 0.11vh;
    margin-left: 1.2vh;
    font-family: "BrothershipRegular";
    font-size: 4.03vh;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    background: var(--garageName-title);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-btns {
    display: flex;
    position: relative;
    margin-left: 1.76vh;
    margin-bottom: 1.48vh;
    margin-right: 5.83vh;
    height: 3.89vh;
    width: 46.3vh;
}

.header-btn {
    position: relative;
    width: 10.09vh;
    height: 3.89vh;
    background: rgba(0, 0, 0, 0.58);
}

.search-txt {
    margin-left: 1.11vh;
    color: #FFF;
    font-family: "Gilroy-Medium";
    font-size: 1.39vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.btnBorder-park {
    position: absolute;
    width: 100%;
    height: 100%;
}

.search-sec-txt {
    margin-left: 1.11vh;
    color: rgba(255, 255, 255, 0.55);
    font-family: "Gilroy-Medium";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.traced-bg {
    position: absolute;
    width: 17.96vh;
    height: 22.22vh;
}

.input-search {
    position: relative;
    width: 6.11vh;
    color: rgb(255, 255, 255);
    background: transparent;
    border: none;
    text-align: center;
    font-family: "Gilroy-Medium";
    font-size: 1.11vh;
    outline: none;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.input-search::placeholder{
    color: (255, 255, 255, 0.55);
}

#serach-cont {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    background: rgba(0, 0, 0, 0.29); 
}

.parked-con, .non-parked {
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 2.04vh;
    width: 7vh;
    height: 3.89vh;
    border-radius: 0.19vh;
    color: #FFF;
    text-align: center;
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: radial-gradient(88.26% 88.26% at 50% 50%, rgba(208, 208, 208, 0.25) 0%, rgba(185, 185, 185, 0.15) 100%);
    transition: .5s;
}

.parked-outline {
    position: absolute;
    width: 12vh;
    height: 4.1vh;
}

.non-parked {
    margin-left: 0.46vh;
    width: 8.61vh;
    height: 3.89vh;
    border-radius: 0.19vh;
    border: none;
}

.non-parked-outline {
    position: absolute;
    transition: .5s;
    width: 8.61vh;
    height: 3.89vh;
}

.non-parked:hover .non-parked-outline { 
    opacity: 0;
}

.parked-con:hover .parked-outline { 
    opacity: 0;
}

.parked-con:hover {
    transition: .5s;
    opacity: 1.0;
}

.non-parked:hover {
    transition: .5s;
    opacity: 1.0;
}

.parked-con:hover, .non-parked:hover {
    transition: .5s;
    border-radius: 0.19vh;
    box-sizing: border-box;
    border: 0.09vh solid var(--parked-border);
    background: var(--header-parkedBackground);
}

.svgBtn {
    position: relative;
    margin-left: 0.46vh;
    width: 3.89vh;
    height: 3.89vh;
    transition: 0.5s;
}

.closeBtn, .favBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 0.46vh;
    width: 3.89vh;
    height: 3.89vh;
    transition: 0.5s;
    border-radius: 0.19vh;
    background: var(--close-background);
}

.favBtn {
    background: var(--fav-background);
}

.favBtn-border {
    position: absolute;
    width: 3.89vh;
    height: 3.89vh;
}

.favBtnSvg {
    width: 1.67vh;
    height: 1.67vh;
}

.carlist {
    overflow-y: scroll;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 19.6vh 19.6vh 19.6vh 19.6vh;
    grid-auto-rows: 27vh;
    flex-wrap: wrap;
    position: relative;
    margin: 0vh;
    width: 77vh;
    height: 52.59vh;
    margin-top: 2.22vh;
    margin-left: 5.83vh;
    margin-right: 5.83vh;
    margin-bottom: 6.2vh;
}

.car-box {
    position: relative;
    margin-right: 1.85vh;
    margin-bottom: 1.85vh;
    width: 17.96vh;
    height: 25.37vh;
}

.car-box:hover {
    .carFav {
        background: var(--carFav-background);
    }

    .car-btn {
        background: var(--car-btnBackground);
    }

    .carContainer-shadow {
        background: var(--carContainer-shadow);
    }

    .carBox-title {
        color: var(--hover-car-name);
        text-shadow: 0vh 0vh 0.93vh var(--hover-car-name);
    }
}


.car-container {
    overflow: hidden;
    position: relative;
    width: 17.96vh;
    height: 22.22vh;
}

.carSelect-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.carBox-title {
    position: relative;
    margin-top: 0.93vh;
    margin-left: 1.02vh;
    color: #D1D1D1;
    text-shadow: 0vh 0vh 0.93vh #DBDBDB;
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.carFav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.65vh;
    top: 0.65vh;
    width: 2.04vh;
    height: 2.04vh;
    border-radius: 0.09vh;
    background: rgba(207, 207, 207, 0.30);
}

.favIcon {
    width: 1.11vh;
    height: 1.11vh;
}

.carIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.02vh;
    height: 3.98vh;
}

.carImgBg {
    position: absolute;
    top: 1.2vh;
    width: 12.78vh;
    height: 12.78vh;
    left: 50%;
    background: url(../img/carTypeBg.svg) no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
}


.carPlate {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 14.54vh;
    width: 9.63vh;
    height: 3.91vh;
    background: url(../img/plate.svg) no-repeat;
    background-size: 100% 100%;
}

.car-plate {
    margin-top: 1.3vh;
    color: var(--color-plate-txt);
    text-align: center;
    text-shadow: 0vh 0.05vh 0.25vh #FFF;
    font-family: "Gilroy-Bold";
    font-size: 1.77vh;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.carName {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0vh;
    width: 17.96vh;
    height: 2.87vh;
    background: rgba(0, 0, 0, 0.43);
    color: #FFF;
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.carNameInput {
    background-color: #00000000;
    color: #fff;
    outline: none;
    border: none;
    text-align: center;
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.carContainer-shadow {
    position: absolute;
    top: 18.89vh;
    width: 25.09vh;
    height: 25.09vh;
    border-radius: 25.09vh;
    background: #D1D1D1;
    filter: blur(8.15vh);
}

.car-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 0.28vh;
    width: 17.96vh;
    height: 2.87vh;
    color: #FFF;
    text-align: center;
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: radial-gradient(88.26% 88.26% at 50% 50%, rgba(208, 208, 208, 0.25) 0%, rgba(185, 185, 185, 0.15) 100%);
}

.carBg-Carlist, .favIcon, .carSelect-bg, .carIcon, .btnBorder-park, .carSelectfavIcon {
    filter: grayscale(1);
}

.carBg-Carlist {
    position: absolute;
    width: 100%;
    height: 100%;
}

.carIconSelect, .selectBg, .btnBorderSelect {
    position: absolute;    
    filter: grayscale(0);
}

.garage-line {
    position: absolute;
    bottom: 0vh;
    width: 100%;
    height: 0.37vh;
    background: var(--garage-bg-line);
    box-shadow: 0vh 0vh 7.96vh 0vh var(--garage-lineShadow);
}

.bg-striche {
    position: absolute;
    top: 18.33vh;
    right: -2.5vh;
    transform: rotate(90deg);
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.83vh;
    background: radial-gradient(3698% 50% at 50% 46.67%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-stricheBtm {
    position: absolute;
    top: 58.15vh;
    right: var(--left-lines);
    transform: rotate(90deg);
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.83vh;
    background: radial-gradient(3698% 50% at 50% 46.67%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

*{
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
}

*::-webkit-scrollbar{
    width: 0.37vh;
}

*::-webkit-scrollbar-track{
    background: transparent;
}

*::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-radius: 0vh;
    border: 0.28vh solid transparent;
}



.car-box:hover .carFav {
    background: var(--carFav-background);
}

.car-box:hover .car-btn {
    background: var(--car-btnBackground);
}

.car-box:hover .carContainer-shadow {
    background: var(--carContainer-shadow);
}

.car-box:hover .carBox-title {
    color: var(--hover-car-name);
    text-shadow: 0vh 0vh 0.93vh var(--hover-car-name);
}

.parked-con:hover {
    transition: .5s;
    opacity: 1.0;
}

.non-parked:hover {
    transition: .5s;
    opacity: 1.0;
}

.parked-con:hover, .non-parked:hover {
    transition: .5s;
    border-radius: 0.19vh;
    box-sizing: border-box;
    border: 0.09vh solid var(--parked-border);
    background: var(--header-parkedBackground);
}

.carSelectfavIcon:hover {
    filter: grayscale(0);
}

.isFavorite {
    filter: grayscale(0);
}












.editable {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    cursor: text;
    resize: none;
    padding: 0;
    margin: 0;
}