#header-content #search-players-container { width: 79.4074vh; height: 9.2593vh; display: flex; justify-content: center; align-items: center; } #search-players-container input { width: 52.5vh; height: 1.1111vh; border-radius: .7292vw; outline: 0; border: 0; padding-left: 1.7593vh; padding-top: 1.7593vh; padding-bottom: 1.7593vh; background-image: url(img/SearchPlayersBg.png); background-size: cover; background-position: center; font-size: .8333vw; font-weight: 400; color: white; background-color: rgba(255, 255, 255, 0.05); } input:focus { outline: 0; } #search-players-container input::placeholder { font-size: .8333vw; font-weight: 400; color: rgba(255, 255, 255, 0.30); } #vinfo-container { width: calc(86.5741vh + 2.3148vh + 23.2407vh); height: 60.8333vh; margin-left: 3.4259vh; margin-top: 3.7037vh; display: flex; justify-content: space-between; } #vinfo-container #vinfo-left-box { width: 86.5741vh; height: 100%; z-index: 0; background-image: url(img/InfoLeftBoxBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; border-radius: 0.8333vh; display: flex; flex-direction: column; overflow: hidden; } #vinfo-left-box-container #car-image { width: 52.7778vh; height: 33.3333vh; position: absolute; z-index: -1; background-size: 100%; background-position: center; background-repeat: no-repeat; left: 0; top: 0; margin-left: 51.1111vh; margin-top: 34.0741vh; transition: 0.3s; } #vinfo-left-box #vinfo-left-header { width: 100%; height: 6.1111vh; display: flex; justify-content: space-between; align-items: center; } #vinfo-left-header #vinfo-left-text-info { font-size: 1.1111vh; font-weight: 600; display: flex; flex-direction: column; margin-left: 1.8519vh; } #vinfo-left-header #vinfo-left-goback-button { display: flex; width: 10.5556vh; height: 3.5185vh; align-items: center; background-image: url(img/GoBackButtonBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; margin-right: 1.8519vh; font-size: 1.1111vh; font-weight: 600; } #vinfo-left-box #vinfo-left-line { width: 82.7778vh; height: 0.0926vh; background: rgba(255, 255, 255, 0.07); margin-left: 1.8519vh; } #vinfo-left-box #vinfo-left-boxes { width: 100%; height: 51.0185vh; display: flex; justify-content: space-between; margin-top: 1.8519vh; } #vinfo-left-boxes #vinfo-left-boxes-left-box { width: 58.7963vh; height: 100%; border-radius: 0.9259vh; background-image: url(img/VehicleInformationBoxBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; margin-left: 1.8519vh; display: flex; flex-direction: column; } #vinfo-left-boxes-left-box #vinfo-left-left-header { width: 100%; height: auto; display: flex; justify-content: space-between; font-size: 1.8519vh; font-weight: 500; margin-top: 2.2222vh; } /* VInfo Inputs Start */ #vinfo-left-boxes-left-box #vinfo-left-left-input-container { width: 100%; height: auto; display: flex; flex-direction: column; margin-top: 1.8519vh; } #vinfo-left-left-input-container span { font-size: 0.9259vh; font-weight: 500; opacity: .6; margin-left: 2.3148vh; } #vinfo-left-left-input-container input { padding-left: 3.2407vh; width: calc(54.1667vh - 3.2407vh); height: 2.7778vh; border-radius: 0.6481vh; background-size: 100%; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 0; font-size: 1.1111vh; font-weight: 600; color: white; margin-left: 2.3148vh; margin-top: 0.9259vh; } /* Input Classes */ #vinfo-left-left-input-container input.manufacturer, #vinfo-left-left-input-container input.vehmodel { background-image: url(img/ManuModelInputBg.png); } #vinfo-left-left-input-container input.hash { background-image: url(img/HashInputBg.png); } #vinfo-left-left-input-container input.category { background-image: url(img/CategoryInputBg.png); } #vinfo-left-left-input-container input.shop { background-image: url(img/ShopInputBg.png); } #vinfo-left-left-input-container input.price { background-image: url(img/PriceInputBg.png); } /* VInfo Inputs End */ /* VInfo Boxes Right Box Start */ #vinfo-left-boxes #vinfo-left-boxes-right-box { width: 22.2222vh; height: 100%; border-radius: 0.9259vh; background: rgba(217, 217, 217, 0.05); margin-right: 1.8519vh; display: flex; flex-direction: column; align-items: center; } #vinfo-left-boxes-right-box span.headerText { font-size: 1.8519vh; font-weight: 500; margin-top: 2.7778vh; } #vinfo-left-boxes-right-box #vinfo-left-right-file { width: 17.5926vh; height: 11.1111vh; border-radius: 0.463vh; margin-top: 3.7037vh; background-image: url(img/NoImageFound.png); background-size: 100%; background-position: center; background-repeat: no-repeat; } #vinfo-left-boxes-right-box #vinfo-left-right-input { width: 17.5926vh; height: auto; display: flex; flex-direction: column; } #vinfo-left-right-input span { font-size: 0.9259vh; font-weight: 500; opacity: .6; } #vinfo-left-right-input input { padding-left: 3.0556vh; width: calc(17.5926vh - 3.0556vh); height: 2.7778vh; margin-top: 0.9259vh; border-radius: 0.6481vh; background-image: url(img/UploadByLinkInputBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 0; font-size: 0.8333vh; font-weight: 500; color: white; } #vinfo-left-right-input #vinfo-left-right-browse-images-button { width: 17.5926vh; height: 2.7778vh; border-radius: 0.6481vh; background-image: url(img/BrowseImagesButtonBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; font-size: 0.8333vh; font-weight: 500; margin-top: 0.9259vh; } #vinfo-left-boxes-right-box #vinfo-left-right-line-or { width: 100%; height: auto; display: flex; align-items: center; font-size: 0.9259vh; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-top: 1.2037vh; } #vinfo-left-boxes-right-box #vinfo-left-right-line { width: 7.6852vh; height: 0.0926vh; opacity: .2; background-color: white; } #vinfo-left-boxes-right-box #vinfo-left-right-upload-button { width: 17.5926vh; height: 3.7037vh; display: flex; justify-content: center; align-items: center; border-radius: 0.6481vh; background-image: url(img/UploadButtonBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; font-size: 1.4815vh; font-weight: 600; color: rgba(0, 0, 0, 0.75); margin-top: 1.8519vh; } #vinfo-left-boxes-right-box span.recommendation { margin-top: 0.9259vh; font-size: 0.7407vh; font-weight: 500; opacity: 0.6; width: 15.3704vh; text-align: center; } /* VInfo Boxes Right Box End */ /* VInfo Right Box Start */ #vinfo-container #vinfo-right-box { width: 23.2407vh; height: 100%; background-image: url(img/ActionsBoxBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; overflow: hidden; } #vinfo-right-box span.headerText { font-size: 1.8519vh; font-weight: 600; margin-top: 2.4074vh; } #vinfo-right-box #vinfo-right-line { width: 17.6852vh; height: 0.0926vh; background: white; opacity: .07; margin-top: 2.4074vh; } #vinfo-right-box #vinfo-right-button { width: 19.537vh; height: 3.7037vh; display: flex; align-items: center; border-radius: 0.7407vh; background-size: 100%; background-position: center; background-repeat: no-repeat; font-size: 1.1111vh; font-weight: 600; margin-top: 1.8519vh; transition: 0.2s; } #vinfo-right-box #vinfo-right-button.makeVip { background-image: url(img/MakeVehicleVIPButtonBg.png); box-shadow: 0 0 3.6111vh 0 rgba(255, 222, 48, 0.25); color: #625514; justify-content: center; } #vinfo-right-box #vinfo-right-button.makeVanilla { background-image: url(img/MakeVehicleVanillaButtonBg.png); box-shadow: 0 0 3.6111vh 0 rgba(116, 116, 116, 0.25); color: white; justify-content: center; } #vinfo-right-box #vinfo-right-button.giveVehicle { background-image: url(img/GiveVehicleToPlayerButtonBg.png); box-shadow: 0 0 3.6111vh 0 rgba(116, 116, 116, 0.25); color: white; } #vinfo-right-box span.classSelector { font-size: 0.9259vh; font-weight: 500; opacity: .6; width: 19.537vh; display: flex; margin-top: 1.8519vh; } #vinfo-right-box #vinfo-right-class-list { width: 19.537vh; height: 32.8704vh; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 1.3889vh; } #vinfo-right-class-list #vinfo-right-class-item { width: 100%; height: 3.7037vh; position: relative; display: flex; justify-content: center; align-items: center; font-size: 1.1111vh; font-weight: 600; background: rgba(217, 217, 217, 0.05); transition: 0.2s; } #vinfo-right-class-list #vinfo-right-class-item:hover { background: rgba(217, 217, 217, 0.28); } #vinfo-right-class-list #vinfo-right-class-item.active { background: rgba(217, 217, 217, 0.28); } #vinfo-right-class-item img { position: absolute; left: 1.2963vh; } #vinfo-right-box span.descriptionOfClasses { font-size: 0.7407vh; font-weight: 500; margin-top: 1.3889vh; opacity: .6; } /* VInfo Right Box End */ /* Give Vehicle Popup Strart */ #give-vehicle-popup { width: 100%; height: 100%; position: absolute; z-index: 2; background: rgba(7, 7, 11, 0.93); border-radius: 1.6667vh; display: flex; justify-content: center; align-items: center; } #give-vehicle-popup #gv-popup-box { width: 49.6296vh; height: 27.7778vh; border-radius: 1.1111vh; background-image: url(img/GiveVehiclePopupBoxBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; overflow: hidden; } #gv-popup-box span.headerCredential { font-size: 1.1111vh; font-weight: 600; } #gv-popup-box #gv-popup-input { width: 19.2593vh; height: auto; display: flex; flex-direction: column; font-size: 0.9259vh; font-weight: 500; color: rgba(255, 255, 255, 0.32); } #gv-popup-input input { width: 100%; height: 3.4259vh; border-radius: 0.463vh; background-image: url(img/GiveVehiclePopupInputBg.png); background-size: 100%; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 0; text-align: center; font-size: 0.9259vh; font-weight: 500; color: white; } #gv-popup-box #gv-popup-buttons { width: calc(40.7407vh + 5.1852vh); height: 4.2593vh; display: flex; justify-content: space-between; } #gv-popup-buttons #gv-popup-button { width: 20.3704vh; height: 100%; border-radius: 0.6481vh; background: rgba(0, 0, 0, 0.33); display: flex; justify-content: center; align-items: center; font-size: 1.3889vh; font-weight: 600; } #gv-popup-buttons #gv-popup-button.give { background: linear-gradient(90deg, #747474 0%, #535353 100%), #FF1E46; box-shadow: 0 0.0926vh 8.5185vh 0 #737373; } /* Give Vehicle Popup End */ /* Transition Start */ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease-out; } .fade-enter, .fade-leave-to { opacity: 0; } /* Transition End */