@font-face {
    font-family: 'MONTSERRAT-MEDIUM';
    src: url(fonts/Montserrat-Medium.ttf);
}

@font-face {
  font-family: 'MONTSERRAT-EXTRABOLD';
  src: url(fonts/Montserrat-ExtraBold.ttf);
}

@font-face {
  font-family: 'MONTSERRAT-SEMIBOLD';
  src: url(fonts/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: 'MONTSERRAT-REGULAR';
  src: url(fonts/Montserrat-Regular.ttf);
}

@font-face {
  font-family: 'MONTSERRAT-BLACK';
  src: url(fonts/Montserrat-Black.ttf);
}


*, :focus, :hover {
	outline: none;
}

::-webkit-scrollbar {
    width: 0vh;
}
  
::-webkit-scrollbar-track {
    background: #f1f1f113;
}
  
::-webkit-scrollbar-thumb {
    background: rgba(80, 70, 70, 0.83);

}
  
::-webkit-scrollbar-thumb:hover {
    background: rgb(51, 46, 46);
}

body {
	font-family: 'Anek Devanagari', sans-serif;
	user-select: none;
	background: transparent;
	display: none;
	overflow: hidden;
    width: 100%;
    height: 100%;
}

.background {
    background-color: rgba(0, 0, 0, 0.838);
    position: fixed;
    inset: 0px;;
}

/* HEADER LEFT */
.header-left {
    position: absolute;
    display: inline-flex;
    margin-top: 5vh;
    margin-left: 28vh;
    height: 8vh;
    width: 50vh;
}

.server-info {
    display: flex;
    align-items: center;
}

.server-logo {
    position: absolute;

    left: 15.3vh;
    top: -3vh;
    width: auto;
    height: 19vh;
}

.server-name {
    position: absolute;
    font-size: 1vh;
    font-weight: 600;
    color: white;
    left: 0.8vh;
    margin-top: 0vh;

    font-size: 3.4vh;
    font-family: 'MONTSERRAT-EXTRABOLD';
}

.server-description {
    position: absolute;

    top: 2.7vh;
    left: 0.5vw;
    line-height: 1.5vh;
    width: 32vh;
    font-size: 1.3vh;
    color: rgb(212, 212, 212);
      font-family: 'MONTSERRAT-REGULAR';
}

/* HEADER RIGHT */
.header-right {
    position: absolute;

    left: 0vh;
    top: 4.3vh;

    width: 26.3vh;
    height: 8.15vh;

    overflow: hidden;

    border-radius: 0.6vh;
    border: solid #FFBB00 0.15vh;
    background: linear-gradient(#ffae0000 0%, #ffae00c7 100%);
}

.name {
    position: absolute;

    right: 1.5vh;
    top: 1.2vh;

    color: white;
    text-align: end;
    display: flex;
    flex-direction: unset;
}

#name {
    flex: auto;
}

#vip {
    color: rgb(255, 251, 16);
}

#vip > i {
    margin-left: 5px;
}

.coin-values {
    float: inline-end;
    margin-right: 15px;
}

.coins {
    display: flex;
    align-items: baseline;
    justify-content: right;
}

.coins > i {
    color: rgba(221, 221, 221, 0.747);
    margin-right: 6px;
}

#coins-owned {
    color: white;
    position: absolute;

    left: 2vh;
    top: 2vh;

    text-shadow: 0vh 0vh 1.5vh rgb(255, 255, 255);
    font-size: 2.4vh;
    font-family: 'MONTSERRAT-SEMIBOLD';
}

.coins-buy {
  position: absolute;

  right: 1.3vh;
  bottom: 1.7vh;

  width: 2.2vh;
  height: 2.2vh;

  font-size: 2vh;
  border-radius: 99vh;
  background-color: white;
}

.coins-buy-text1 {
    position: absolute;

    top: -1vh;
    right: 2.7vh;

    color: white;
    font-size: 1.3vh;
}

.coins-buy-text2 {
    position: absolute;

    left: 0.65vh;
    top: -1.9vh;

    color: black;
    font-size: 1.8vh;
}

.coins-description {
    position: absolute;

    left: 2vh;
    top: 3.7vh;

    font-size: 1.15vh;
    font-family: 'MONTSERRAT-SEMIBOLD';
    color: white;
}

.coins-buy:hover {
    filter: brightness(0.8);
    cursor: pointer;
}

.close {
    position: absolute;

    right: 0vh;
    top: 7.1vh;

    width: 10vh;
    height: 3.4vh;

     border-radius: 0.5vh;
    border: solid rgba(255, 255, 255, 0.22) 0.1vh;

    background-color: rgba(255, 255, 255, 0.09);

    display: flex;
    align-items: center;
    justify-content: center;

     color: rgb(233, 233, 233);
}
.close p {
  font-family: 'MONTSERRAT-MEDIUM';
  font-size: 1.05vh;
}

.close:hover {
  cursor: pointer;
  color: black;
  background-color: white;
}



/* SIDE BAR */
.side-bar {
    width: 27vh;
    height: 70.7vh;
    margin-top: 13.7vh;
    display: block;
}

.side-category {
  position: relative;
  left: 0vh;
  top: 0vh;

  width: 24.4vh;
  height: 11.6vh;
  background-color: rgba(29, 29, 29, 0.651);
  border: solid rgba(98, 98, 98, 0.33) 0.2vh;
  float: left;
  display: flex;
  overflow: hidden;
  padding-left: 2vh;
  margin-bottom: -0.1vh;
  transition: 0.3s;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center; 
}

#light1:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #ff000057 0%, rgba(0, 0, 0, 0) 100%);
}

#light2:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #15ff0057 0%, rgba(0, 0, 0, 0) 100%);
}

#light3:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #ffae0057 0%, rgba(0, 0, 0, 0) 100%);
}

#light4:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #a200ff57 0%, rgba(0, 0, 0, 0) 100%);
}

#light5:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #008cff57 0%, rgba(0, 0, 0, 0) 100%);
}

#light6:hover .category-background-light {
    opacity: 1;
    transition: 0.2s;
    background: radial-gradient(at bottom, #ff510057 0%, rgba(0, 0, 0, 0) 100%);
}



.category-background-light {
  position: absolute;

  bottom: 0vh;
  left: 0vh;

  width: 100%;
  height: 100%;

  opacity: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #00ffae00 100%);
}

.category-img1 {
  position: absolute;
  
  bottom: -2.9vh;
  right: -9vh;
  width: auto;
  height: 18vh;

  transition: 0.3s;
}

.category-img2 {
  position: absolute;
  
  left: -2.9vh;
  top: -9.59vh;
  width: auto;
  height: 14vh;

  transform: scaleX(-1);
  filter: brightness(0.8);

  transition: 0.1s;
}

.side-category img {
  filter: saturate(0) brightness(0.7);
  opacity: 0.85;
}

.side-category:hover img {
  filter: saturate(1) brightness(1);
  opacity: 1;
  scale: 1.12;
  transition: 0.3s;
}

.side-category:hover > .icon-button {
    box-shadow: 0px 0px 22px #6158587c;
}

.icon-button {
    background: #5e5555de;
    text-align: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    rotate: 45deg;
    transition: 0.1s;
}

.icon-button > i {
    color: white;
    height: 100%;
    writing-mode: vertical-rl;
    font-size: 20px;
    rotate: -45deg;
}

.cat_name {
  margin-bottom: 0.5vh;
  line-height: 1.95vh;
  color: white;
  font-family: 'MONTSERRAT-EXTRABOLD';
  font-size: 1.9vh; 
  z-index: 2;
}


.cat_bg {
  color: rgb(226, 226, 226);
  width: 80%;
  font-size: 1.05vh;
  font-family: 'MONTSERRAT-MEDIUM';

  z-index: 2;
}

/* PANEL */
.main-panel {
    position: absolute;
    display: block;
    width: 100vh;
    top: 14.2vh; /*ändert das wer??*/
    left: 28.2vh;
    height: 70.5vh;
}

.panel {
    width: 110.1vh;
    transition: 0.5s;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    height: 70.2vh;
    margin-inline: 0px;
}

.tags-list {
    position: absolute;

    top: 11vh;
    right: -2.2vh;
    transform: scale(0.8);
    display: inline-flex;
    height: fit-content;
    position: fixed;
    margin-left: 18px;
}

.tag {
    background: #46464675;
    color: white;
    padding: 6px 18px 1px 18px;
    margin-inline-end: 20px;
    border-radius: 30px;
}

.tag-selected {
    background: #3b383875;
}

.item {
  position: relative;

  top: 0.85vh;
  left: 0.35vh;

  width: 25.8vh;
  height: 19.8vh;

  border-radius: 0.7vh;
  border: solid rgba(255, 255, 255, 0.192) 0.2vh;
  background-color: rgba(0, 0, 0, 0.281);

  margin-right: 0.97vh;
  margin-bottom: 0.97vh;

  overflow: hidden;
  float: left;
    transition: 0.1s;
}

.item:hover{
    background: linear-gradient(0deg, rgba(56, 51, 51, 0.83), transparent);
    background-color: rgba(75, 67, 67, 0.644);
    transition: 0.1s;
}


.item > hr {
    color: #ffffff29;
    
}

.item:hover .item-img {
    height: 11vh;
    transition: 0.25s;
}
.item-img-bar {
    position: absolute;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
}

.item-img {
    position: relative;
    height: 9.5vh;
    margin-bottom: 0vh;;
    filter: drop-shadow(0px 5px 2px rgba(12, 12, 12, 0.25));
        transition: 0.1s;
}

.import-car-light-background {
  position: absolute;

  left: 0vh;
  top: 0vh;

  width: 100%;
  height: 100%;

  transition: 0.1s;
  opacity: 0.7;
  background: radial-gradient(at top left, #00ffa685 -25%, rgba(0, 0, 0, 0.322) 100%);
}

.import-car-shadow {
  position: absolute;

  left: 0vh;
  bottom: 0vh;

  width: 100%;
  height: 12vh;

  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.086) 100%);
}

.BLUUUUR {
    filter: blur(0.2vh) grayscale(1) drop-shadow(0 0 0.75rem rgb(255, 255, 255));
}

.item-img-soldout {    
    position: absolute;    
    width: 18vh;
}    


.item-name {
  position: absolute;

  left: 1.9vh;
  bottom: 2vh;

  width: 18.5vh;

  font-family: 'MONTSERRAT-SEMIBOLD';
  font-size: 1.3vh;
  color: rgb(255, 255, 255);
}

.item-selecting {
 position: absolute;

  left: 2vh;
  top: 2vh;
  width: auto;
  height: 2.6vh;

  border: solid #FFAE00 0.2vh;
  

  border-radius: 999vh;
  background: linear-gradient(90deg, #FFAE00 0%, #ffd90000 100%);

  display: flex;
  align-items: center;
}

.item-price {
    margin-left: 2.9vh;
    margin-right: 1vh;
    color: white;
    font-size: 1.14vh;
    font-family: 'MONTSERRAT-MEDIUM';
}

.item-price img {
    position: absolute;
    margin-top: -0.35vh;
    margin-left: -2.6vh;
    width: auto;
    height: 2.15vh;
}

.normalprice {
    margin-left: 8px;
    margin-right: 1vh;
    text-decoration: line-through;
    opacity: 30%;
}


.item-buy {
    position: absolute;

    bottom: 1.5vh;
    right: 2vh;
    width: 3vh;
    height: 3vh;

    border-radius: 99vh;
    background-color: white;

    display: flex;
    align-items: center;
    justify-content: center;
}

.item-buy img {
    position: relative;

    width: auto;
    height: 1.26vh;
    filter: brightness(0);
}
.item-buy:hover {
    filter: brightness(0.65);
    cursor: pointer;
}

.item-buy:active {
    background: #8b8b8bf5;
    transition: 0.1s;
}

.item-buyy {
    position: absolute;

    bottom: 1.5vh;
    right: 2vh;
    width: 3vh;
    height: 3vh;

    border-radius: 99vh;
    background-color: white;

    display: flex;
    align-items: center;
    justify-content: center;
      transition: 0.15s;
}


.item-buyy p {
    position: absolute;
    font-size: 1.15vh;
    margin-top: 1.4vh;
    opacity: 0;
    transition: 0.1s;
}
.item-buyy:hover p {
    opacity: 1;
    transition: 1s;
}

.item-buyy:hover img {
    display: none;
    transition: 0s;
}

.item-buyy img {
    position: relative;

    width: auto;
    height: 1.26vh;
    filter: brightness(0);
}
.item-buyy:hover {
    filter: brightness(0.9);
    cursor: pointer;
    width: 7vh;
    transition: 0.2s;
}

.item-buyy:active {
    background: #8b8b8bf5;
    transition: 0.1s;
}


.item-buy:hover > span, .item-buy:hover > i {
    color: white;
}

.item-buy > span {
    font-weight: 600;
    vertical-align: sub;
    padding-left: 15px;
}

.item-buy > i {
    vertical-align: sub;
    padding-inline: 10px;
    transition: 0.25s;
}

.daily-rewards {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-auto-rows: max-content;
    width: max-content;
    transition: 0.5s;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    height: 75vh;
    margin-inline: 0px;
}

.reward {
    width: 12vw;
    height: 22vh;
    margin: 2vh;
    border-radius: 8px;
    background: linear-gradient(0deg, rgb(27 28 40 / 83%), transparent);
    background-color: rgb(38 39 54 / 95%);
}

.reward-img {
    height: 8vh;
    margin-top: 2vh;
    margin-bottom: 1.5vh;
    filter: drop-shadow(0px 5px 2px rgba(12, 12, 12, 0.25));
}

.reward-name {
    color: white;
    font-size: 1.6vh;
    padding-inline: 2.5vh;
}

.reward-collect {
    background: rgb(175 175 175 / 16%);
    border-radius: 50px;
    padding-block: 0.7vh 0.2vh;
    transition: 0.25s;
    width: -webkit-fill-available;
    text-align: center;
}

.claimed {
    opacity: 25%;
}

.locked {
    opacity: 75%;
}

/* buy-coins */
.buy-coins {
    display: none;
    position: absolute;

    top: 17.5vh;
    left: 29vh;
    width: auto;
    max-height: 80vh;
}

.buy-coins > div {
    color: white;
}

.redeem-title {
    position: absolute;

    font-size: 1.6vh;
    font-family: 'MONTSERRAT-MEDIUM';
    font-weight: 600;
}

.redeem-subtitle {
    position: absolute;

    top: 5vh;
    width: 90vh;
    font-size: 1.3vh;
    font-family: 'MONTSERRAT-REGULAR';
    font-weight: 500;
}

.redeem-inline {
  position: relative;

  top: 8vh;
  width: 104vh;
  height: 4.4vh;

  border-radius: 0.5vh;

  display: flex;
  align-items: center;
  justify-content: center;
  border: solid rgba(255, 255, 255, 0.39) 0.1vh;
  background-color: rgba(59, 59, 59, 0.767);
}

.redeem-inline > .div-icon {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5em;
    transition: .2s;
    padding-inline: 5px;
}

.redeem-input {
  position: relative;

  height: 100%;
  width: 100%;

  border: none 0.2vh;
  border-radius: 0.5vh;


  text-align: center;
  background: transparent;

  color: white;
  font-size: 1.05vh;
  font-family: 'MONTSERRAT-SEMIBOLD';
}

.redeem-input::placeholder {
    color: rgb(156, 156, 156);
}

.redeem-button {
    position: relative;
    
    right: 1vh;

    height: 3vh;
    width: 9vh;
    color: black;
    background: white;
    display: flex;
    align-items: center;
    font-size: 1.2vh;
    justify-content: center;
    align-items: inherit;
    border-radius: 0.3vh;
    transition: .2s;
}

.redeem-button:hover {
    scale: 1.05;
}

.redeem-button:active {
    scale: 1.095;
}

.reedem-container {
    position: absolute;

    height: 16vh;
    width: 107vh;

    padding-left: 2.3vh;
    padding-top: 2.3vh;

    border-radius: 0.7vh;
    border: solid rgba(255, 255, 255, 0.521) 0.15vh;
}

.reedem-container2 {
    position: absolute;

    top: 20vh;
    height: 13vh;
    width: 107vh;

    padding-left: 2.3vh;
    padding-top: 2.3vh;

    border-radius: 0.7vh;
    border: solid rgba(255, 255, 255, 0.521) 0.15vh;
}
.buy-coins-title {
    position: absolute;

    font-size: 1.6vh;
    font-family: 'MONTSERRAT-MEDIUM';
    font-weight: 600;
}

.buy-coins-subtitle {
    position: absolute;

    top: 5vh;
    width: 90vh;
    font-size: 1.3vh;
    font-family: 'MONTSERRAT-REGULAR';
    font-weight: 500;
}

.buy-coins-button {
    position: absolute;

    top: 7.4vh;

    height: 4.2vh;
    width: 11.5vh;
    margin-top: 10px;
    font-weight: 600;
    color: black;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45vh;
    font-size: 1.2vh;
    font-family: 'MONTSERRAT-SEMIBOLD';
    font-weight: 500;
    transition: .2s;
}
.buy-coins-button:hover {
    scale: 1.05;
}

.buy-coins-button:active {
    scale: 1.095;
}

.buy-coins-button > i {

}

.buy-coins span {
    margin-left: 0.8vh;
    
}
/* case opening */

.case-name {
    color: white;
    font-size: 1.5rem;
    font-weight: 200;
    /* margin-inline: 12%; */
}

.case-name span {
    font-weight: 600;
}

.caseopening {
    display: none;
    position: absolute;
    width: auto;
    left: 33vh;
    top: 20.8vh;
    max-height: 80vh;
    transform: scale(1.02);
}

#triangle {
    position: absolute;
    width: 0;
    margin-left: -2px;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    z-index: 100;
    margin-top: -20px;
    border-left: 100px solid #32b4f2;
}

.spinner, .spinner__won {
    position: relative;
    overflow-x: hidden;
    background-color: white;
    border-radius: 5px;
}

.spinner {
    height: 15.3vh;
    background-color: rgb(201 201 201 / 4%);
    width: 53vw;
    margin-inline: auto;
}

.spinner__won {
    max-width: 590px;
    min-width: 590px;
    padding: 3px 10px;
    font-size: 24px;
    letter-spacing: 12px;
}

.spinner-items {
    position: relative;
    display: inline-flex;
    margin: 0;
    height: 15.3vh;
    padding: 0;
    margin-left: -15.9vw;
}

.spinner_arrow_top {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(247, 247, 247, 0.847);
    transform: translateX(-50%);
    left: 50%;
    top: 0;
}
.spinner_arrow_bottom {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #f7f7f7d8;
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;
}
.spinner-items__item {
    display: block;
    list-style-type: none;
    padding: 3.2vh 0;
    margin: 0.2vh;
    margin-right: 1vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    width: 8.8vw;
    overflow: hidden;
    text-align: center;
    border-radius: 20px;
    background-color: #95959517;
}

.spinner-items__item > img {
    height: 100%;
}

.spinner_1 {
    background: linear-gradient(0deg, rgb(14 167 255 / 52%) -20%, transparent 70%);
    background-color: #95959517;
}
.spinner_2 {
    background: linear-gradient(0deg, rgba(255, 46, 46, 0.52) -20%, transparent 70%);
    background-color: #95959517;
}
.spinner_3 {
    background: linear-gradient(0deg, rgb(252 3 194 / 52%) -20%, transparent 70%);
    background-color: #95959517;
}
.spinner_4 {
    background: linear-gradient(0deg, rgb(255 28 47 / 52%) -20%, transparent 70%);
    background-color: #95959517;
}
.spinner_5 {
    background: linear-gradient(0deg, rgb(255 213 28 / 52%) -20%, transparent 70%);
    background-color: #95959517;
}

.case_buttons {
    display: flex;
}

#open_case {
    font-weight: 500;
    color: black;
    background: white;
    width: fit-content;
    border-radius: 10px;
    margin-top: 60px;
    margin-inline: auto;
    padding: 15px 35px 10px;
    margin-right: 5px;
}

#open_case > span {
    margin-left: 8px;
}

#open_case:hover {
    scale: 1.05;
}

#open_case:active {
    scale: 1.095;
}

.info_case {
    font-weight: 500;
    color: black;
    width: fit-content;
    margin-top: 60px;
    background: white;
    border-radius: 10px;
    margin-inline: auto;
    padding: 15px 25px 10px;
    margin-left: 5px;
}

.info_case .tooltiptext {
    font-family: 'Kanit', sans-serif;
    font-weight: 200;
    font-size: 1.2vh;
    visibility: hidden;
    width: fit-content;
    background-color: rgba(14, 14, 14, 0.253);
    color: #fff;
    text-align: center;
    padding: 0.5vh 0;
    padding-right: 0.8vh;
    border-radius: 0.6vh;
    position: absolute;
    z-index: 1;
    margin-left: 5vh;
    opacity: 0;
    transition: opacity 1s;
}

.info_case .tooltiptext::after {
    content: " ";
    position: absolute;
    margin-left: -5px;
}

.info_case:hover .tooltiptext {
    opacity: 1;
}

.info_case:hover .tooltiptext {
    visibility: visible;
}

.info-rare-1, .info-rare-2, .info-rare-3, .info-rare-4, .info-rare-5 {
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

.info_case .tooltiptext div {
    display: flex;
    margin-inline: auto;
    margin-left: 5px;
    align-items: center;
}

.info_case .tooltiptext div span {
    margin-inline: 5px;
}

.info-rare-1 {background: rgb(14 167 255 / 52%)}
.info-rare-2 {background: rgb(119 46 255 / 52%)}
.info-rare-3 {background: rgb(252 3 194 / 52%)}
.info-rare-4 {background: rgb(255 28 47 / 52%)}
.info-rare-5 {background: rgb(255 213 28 / 52%)}


.win-menu {
    width: fit-content;
    margin-inline: auto;
    padding: 25px 70px;
    background: #9d9d9d1c;
    border-radius: 12px;
    border: 1px solid #ffffff3b;
    margin-top: 70px;
}

.win-text {
    color: white;
    text-align: center;
}

.win-button {
    width: fit-content;
    color: black;
    background: white;
    padding: 5px 30px 0px 30px;
    border-radius: 7px;
    margin-inline: auto;
}

.popout {
    position: absolute;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.popout header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.292vw 0vw;
    gap: 2.396vw;
    
    width: 42vh;
    height: 10vh;
    
    background-color: rgba(0, 0, 0, 0.8);
    border: 0.052vw solid rgba(255, 255, 255, 0.158);
    border-radius: 1.1vh;
}

.popout p {
    margin-top: -1vh;
    margin-bottom: -7vh;
    width: 89%;
    height: 1.979vw;
    font-family: 'MONTSERRAT-SEMIBOLD';
    font-style: normal;
    font-weight: 500;
    font-size: 1.15vh;
    line-height: 1.3vh;

    text-align: center;
    text-transform: uppercase;
    
    color: #ffffff;
    
    text-shadow: 0vw 0vw 3.797vw rgba(255, 255, 255, 0.55);
    
    flex: none;
    order: 0;
    flex-grow: 0;

}

.popout header span {
    margin-top: 1.2vh;
    width: 89%;
    height: 1.979vw;
    font-family: 'MONTSERRAT-SEMIBOLD';
    font-style: normal;
    font-weight: 500;
    font-size: 1.15vh;
    line-height: 1.3vh;

    text-align: center;;
    
    color: #d6d6d6;
    
    text-shadow: 0vw 0vw 3.797vw rgba(255, 255, 255, 0.55);
    
    flex: none;
    order: 0;
    flex-grow: 0;
}

.popout header .btns {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6vh;
    width: 19.378vw;
    height: 2.561vw;
    
    flex: none;
    order: 1;
    flex-grow: 0;
}

.popout header .btns .btn {

    left: 5.9vh;
    bottom: 2vh;
    position: relative;
    width: 11vh;
    height:4.3vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: -0vh;

    font-family: 'MONTSERRAT-SEMIBOLD';
	font-style: normal;
	font-weight: 400;
	font-size: 1.15vh;
	line-height: 0.938vw;
	text-align: center;
	color: #FFFFFF;
	/* box-shadow: 0vw 1.186vw 2.784vw 0.309vw rgba(25, 123, 0, 0.55); */
	border-radius: 0.55vh;
	transition: 0.2s;
}
.popout header .btns .btn.red {
    background-color: rgb(255, 53, 53);
    border: solid rgba(255, 255, 255, 0.315) 0.1vh;
	/* box-shadow: 0vw 1.186vw 2.784vw 0.309vw rgba(123, 0, 0, 0.55); */
	transition: 0.2s;
}
.popout header .btns .btn.green {
    background-color: rgb(75, 255, 120);
    color: rgb(12, 51, 22);
	/* box-shadow: 0vw 1.186vw 2.784vw 0.309vw rgba(25, 123, 0, 0.55); */
	transition: 0.2s;
}
.popout header .btns .btn:hover {
	transform: translateY(0.1041666666vw);
	letter-spacing: 0.05vw;
	transition: 0.2s;
    filter: brightness(0.7);
}

.coin-val {
    position: absolute;

    left: 10vh;
    bottom: -5.5vh;

    width: auto;
    height: 18vh;
    opacity: 0.3;
    filter: brightness(0.7);
}

.showroom-import-btn {
  position: absolute;

  right: 2vh;
  top: 1.65vh;

  width: 2.9vh;
  height: 2.9vh;

  border-radius: 999vh;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.6s;
}

.item:hover .showroom-import-btn {
    opacity: 1;
}


.import-car-normal-box:hover .showroom-import-btn {
  opacity: 1;
  transition: 0.9s;
}


.showroom-import-btn:hover {
  background-color: rgb(221, 221, 221);
  cursor: pointer;
  
}

.showroom-img {
  position: relative;

  width: auto;
  height: 1vh;

  opacity: 1;
  filter: brightness(1);
}


.showroom-import-btn:hover .showroom-img {
  filter: brightness(0);
  opacity: 1;
}



.showroom-import-btn-text {
  position: absolute;

  right: 3.7vh;
  font-family: 'MONTSERRAT-MEDIUM';
  font-size: 0.8vh;
  color: rgb(235, 235, 235);
  opacity: 0;
}
.showroom-import-btn:hover  .showroom-import-btn-text {
  opacity: 1;
  transition: 0.15s;
}

.item:hover .showroom-import-btn {
    opacity: 1;
    background-color: white;
}

.item:hover .showroom-img {
  filter: brightness(0);
  opacity: 1;
}

.showroom-import-btn:active {
    filter: brightness(0.6);
    transition: 0.1s;
}

.cat_name,
.cat_bg {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.7),    /* dunkler Schatten */
        0 0 10px rgba(255, 255, 255, 0.4), /* kräftiger weißer Glow */
        0 0 20px rgba(255, 255, 255, 0.3); /* zusätzlicher weicher Lichtschein */
}