.toast{background-color: white; position: fixed; height: fit-content; width: fit-content; left: -770px; transition: .5s all ease-in-out; top: 0; bottom: 0; margin: auto 0; z-index: 2000; border-radius: 3px; box-shadow: 3px 3px 5px #c9c9c9; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; border: none; box-shadow: 0 0 15px #c9c9c9;}
.toast a.button {font-size: 14px; display:flex; align-items: center; justify-content: center; width: fit-content; margin-top: 40px; text-decoration: none;}
.wheel-info{display: flex; flex-direction: column; gap: 10px; align-items: center; margin: auto 0; margin-right: -30px;}
.wheel-header{font-weight: bold; font-size: 22px;}
.wheel-wrapper{display: flex; gap: 20px; padding: 30px;}
.toast:not(.spining) .ui-wheel-of-fortune #button-spin{display: none;}
.toast .mfp-close {color: #333;}
.active-toast {left: 0;}

@media screen and (max-width: 767px){
    .toast{bottom: -100%; left: 0; top: unset; right: 0; margin: 0 auto; border-bottom: unset; box-shadow: 0 0 15px #c9c9c9; border-top-left-radius: 3px; border-bottom-right-radius: 0; border: none;}
    .wheel-wrapper{flex-direction: column-reverse; gap: 40px;}
    .wheel-info{margin-right: unset; margin-top: -40px;}
    .toast a.button{margin-top: 10px;}
    .active-toast{bottom:0;}
}