.player-info-container{
    position: absolute;
    width: 28%;
    height: 90%;
    right: -26%;
    top: 5%;
    border-radius: 20px;
    display: none;
    z-index: 150000;
    transform: scale(0.9);
    transform-origin: top;
    background-color: black;
}
.dropped{
    border: none;
    border-radius: 0px;
    opacity: 1;
}

.notification-bell{
    position: absolute;
    left: -80%;
    top: 15%;

    font-size: 4.5vh;
    color: aqua;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.678);
}
.notification-bell:hover{
    cursor: url(imgs/cursorButton.png) 20 20, auto;
    animation: uiPop 0.1s linear forwards;
    color: white;
}
.notification-bell::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 100px;
    top: 10%;
    right: 0%;
    display: var(--display, none);
}

.notification-container{
    position: absolute;
    top: 20%;
    left: -130%;

    width: 60%;
    height: 30%;
    border-top: solid 1px aqua;
    border-bottom: solid 1px aqua;
    background-color: rgba(255, 255, 255, 0.082);
    overflow: hidden;
    overflow-y: auto;
    border-radius: 10px;
    z-index: 10000;
    display: none;
}
.notification{
    width:100%;
    color: white;
    font-size: 1.8vh;
    font-family: 'Saira Stencil One', cursive;
    background-color: black;
}
.active-notification:hover{
    color: rgb(98, 255, 195);
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}
.notification-title{
    font-family: 'Passero One', cursive;
    font-size: 2.8vh;
    width: 100%;
    text-align: center;
}
.notification-descrip{
    font-family: 'Roboto', cursive;
}
.notification-reward{
    width: 100%;
    text-align: right;
}
.expand-tab{
    position: absolute;
    left: calc(-80% - 20px);
    color: rgb(112, 200, 255);
    filter: saturate(2);
    font-size: 6vh;
    font-weight: 900;
    font-family: 'Saira Stencil One', cursive;
    top: 0%;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: inset 0px 0px 10px aqua, 0px 0px 10px aqua;
}
.expand-tab:hover{
    animation: uiPop 0.05s linear forwards;
    box-shadow: inset 0px 0px 20px rgb(62, 181, 255);
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}

.stat-container{
    position: absolute;
    width: 90%;
    left: 5%;
    height: 40%;
    border-radius: 15px;
    background-color: rgba(0, 225, 255, 0.15);
}
.stat-container-title{
    position: absolute;
    width: 100%;
    bottom: 100%;
    left: 0;
    text-align: center;
    font-family: 'Passero One', cursive;
    font-size: 4vh;
    color: aqua;
}
.stat-inner-container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.stat-bar-container{
    margin-left: 5%;
    width: 90%;
    height: 20%;
    font-size: 2vh;
    color: white;
    overflow: hidden;
    font-family: 'Saira Stencil One', cursive;
    margin-top: 3%;
}
.stat-bar{
    width: 90%;
    border: solid 1px rgba(0, 214, 214, 0.829);
    border-top: solid 1px white;
    border-right: none;
    border-left: none;
    border-radius: 10px;
    height: 25%;
}
.stat-percent{
    position: relative;
    left: 90%;
    bottom: 150%;
}



.buying-power-container{
    position: absolute;
    z-index: 1000;
    right: 105%;
    top: 0;

    height: 20%;
    width: 30%;
    padding-left: 5px;

    transform-origin: center;
    color: rgb(165, 255, 112);

    filter: drop-shadow(0px 0px 20px rgb(87, 255, 151))

}
.buying-power-lottie{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: -1;
}
.buying-power-lottie:hover{
    animation: uiPop 0.1s linear forwards;
    background-color: white;
    color: black;
    border-radius: 1000px;
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}
.buying-power{
    font-family: 'Saira Stencil One', cursive;
    font-size: 3.5vh;
    width:100%;
    margin-right: 200%;
    border-radius: 10px;
    padding-left: 5px;
}
.buying-power-anim{
    position: absolute;
    font-family: 'Saira Stencil One', cursive;
    font-size: 3.5vh;
    width:100%;
    margin-right: 200%;
    border-radius: 10px;
    padding-left: 5px;
}
.buying-power::after{
    content: "My Bank";
    position: absolute;
    margin-bottom: 70%;
    width: 100%;
    font-size: 2vh;
    color: white;
}
@keyframes bAnimUp{
    0%{transform: translateY(0%); opacity: 1; color: rgb(0, 255, 0);}
    100%{transform: translateY(-100%); opacity: 0; color: rgb(0, 255, 0);}
}
@keyframes bAnimDown{
    0%{transform: translateY(0%); opacity: 1; color: red;}
    100%{transform: translateY(100%); opacity: 0; color: red;}
}

.player-options-container{
    position: absolute;
    top: 50%;
    right: 100%;
    width: 65%;
    height: 35%;
    border-radius: 10px;
    overflow: hidden;
    font-size: 3vh;
    font-family: 'Passero One', cursive;
    color: white;
}
.player-option{
    margin-top: 3%;
    width: 100%;
    height: 14.5%;
    background-image: linear-gradient(to right, transparent 14%, rgb(0, 0, 0) 15%);
    border-radius: 10px;
    text-align: center;
    display: flex;
}
.player-option-text{
    margin-left: 10%;
    border: solid 1px aqua;
    padding-left: 20px;
    padding-right: 40px;
}
.player-option-text:hover{
    animation: buttonPop 0.05s linear forwards;
    background-color: white;
    color: black;
}
.player-emoji{
    border-radius: 100px;
    background-color: black;
    width: 10%;
    height: 100%;
    filter: grayscale(100%) brightness(3);
    font-size: 4vh;
    border: solid 1px rgba(255, 255, 255, 0.1);
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 2%;
}
.player-option:hover{
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}
.radio-lottie{
    width: 10%;
    height: 100%;
    left: 0;
    filter: hue-rotate(150deg) 
            saturate(2) 
            drop-shadow(0px 0px 10px lightskyblue) 
            brightness(1.5);
    transform: scale(1.5);
    border-radius: 20px;
    margin-left: 2%;
}
.radio-lottie:hover{
    background-color: white;
}