.removed {
    background: none !important;
    color: #2c2c2c !important;
    cursor: default;
    pointer-events: none;
}

.number-block.boosted {
    align-content: end;
}

.number-block {
    height: 48px;
    width: 40px;
    margin: 1px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: center;
}

.number-block.boosted-win {
    background-color: rgb(0, 178, 255) !important;
}

.unset {
    border: solid 2px var(--light-base);
    background: var(--base);
    box-sizing: border-box;
}

:root {
    --green-number: #42D486;
    --red-number: #FF523A;
    --black-number: #272B37;
    --special-colour: #00B2FF;
}

img.prevented-from-removal {
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translateX(30px);
}

.call-to-action {
    font-size: 22px;
    font-weight: bold;
    animation: fade-call-to-action 500ms;
}

@keyframes fade-call-to-action {
    from {
        background-color: var(--base);
    }
    to {
        
        background-color: white;
    }
}

.roulette-container {
    width: 100%;
    aspect-ratio: 1;
    background: var(--base);
    position: absolute;
    border-radius: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    top: -50px;
    z-index: 0;
    filter: brightness(0.4);
}

.roulette-in {
    animation: roulette-in-animation ease-in-out 750ms forwards;
}

@keyframes roulette-in-animation {
    0% {
        top: -50px;
        z-index: 0;
        filter: brightness(0.4);
    }
    50% {
        z-index: 0;
        top: -200px;
    }
    100% {
        top: 0;
        z-index: 5;
        filter: brightness(1);
    }
}

.roulette-out {
    animation: roulette-out-animation ease-in-out 750ms forwards;
}

@keyframes roulette-out-animation {
    0% {
        top: 0;
        z-index: 5;
        filter: brightness(1);
    }
    50% {
        z-index: 5;
        top: -200px;
    }
    60% {
        z-index: 0;
    }
    100% {
        top: -50px;
        z-index: 0;
        filter: brightness(0.4);
    }
}

.wheel-vector {
    width: 100%;
    height: 100%;
}

#svg-base {
    position:absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.92);
}

.roulette {
    width: 110%;
    aspect-ratio: 1;
    position: absolute;
    transform: translate(-5%, -4%);
}

#roulette .removed {
    opacity: 5%;
}

#roulette .selected {
    fill: white;
}

#roulette .selected.boosted-bg {
    fill: var(--special-colour);
}

#roulette .selected.boosted-text {
    fill: #272B37;
}

#roulette .boosted-bg {
    fill: black;
}

#roulette .boosted-text {
    fill: var(--special-colour);
}

#roulette .red {
    fill: #FF523A;
}

#roulette .zero {
    fill: #42D486;
}

#roulette .black {
    fill: #272B37;
}

.selected-number.red {
    color: #FF523A;
    background-color: white;
    animation: red-to-white 500ms;
}


.selected-number.black {
    color: #272B37;
    background-color: white;
    animation: black-to-white 500ms;
}

.selected-number.zero {
    color: #42D486;
    background-color: white;
    animation: green-to-white 500ms;
}


@keyframes black-to-white {
    from {
        color: white;
        background-color: #272B37;
    }
    to {
        color: #272B37;
        background-color: white;
    }
}

@keyframes red-to-white {
    from {
        color: white;
        background-color: #FF523A;
    }
    to {
        color: #FF523A;
        background-color: white;
    }
}

@keyframes green-to-white {
    from {
        color: white;
        background-color: #42D486;
    }
    to {
        color: #42D486;
        background-color: white;
    }
}

#roulette-boosted-flash {
    color: var(--special-colour);
}

#roulette-number-result {
    color: #272B37;
    line-height: 1;
}

#roulette-result-number {
    font-size: 105px !important;
}

#main-button.boosted-win {
    font-weight: bold;
    font-size: 25px;
    background-color: rgb(0, 178, 255) !important;
    color: black !important;
}

#roulette-result-points {
    font-size: 25px !important;
}

#roulette-number-result,#roulette-boosted-flash {
    font-weight: 900;
    font-size: 44px;
    
    z-index: 20;
    position: absolute;
    width: 52.5%;
    height: 52.5%;
    transform: translate(44%, 46%);
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    flex-direction: column;
}

#roulette-boosted-flash-multiplier {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    border-radius: 4px;
    margin: 4px;
    color: var(--base);
    background-color: var(--special-colour);
}

.roulette-number-with-result {
    color: var(--base);
    background-color: var(--accent);
}

.roulette-number-with-result.boosted {
    color: black !important;
    background-color: rgb(0, 178, 255);
}

.felt {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 4px;
    width: 100%;
    border-radius: 8px;
    gap: 1px;
    background: var(--base);
}

.element-on {
    filter: brightness(1);
    transition: 0.5s ease-in;
}

.element-off {
    filter: brightness(0.4) !important;
}

.felt-inactive {
    margin-top: 8px;
    max-height: 550px;
}

.selected-number {
    z-index: 1;
}

.fade-out {
    animation: fadeOut 500ms;
    opacity: 0;
}

@keyframes fadeOut {
    0% {
        opacity:100%;
    }
    100% {
        opacity:5%;
    }
}

.fade-in {
    animation: fadeIn 500ms;
    opacity: 1;
}

@keyframes fadeIn {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

.number {
    border: 1px solid black;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 24px;
    font-weight: bold;
    font-size: 25px;
    transition: color 330ms, background-color 330ms;
}

.row {
    display: flex;
    height: 100%;
    background: var(--base)
}

#felt-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.chosen-bets-section {
    width: 105px;
    height: 105px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.number-block.set span.in {
    animation-name: number-block-in;
    animation-duration: 330ms;
}

@keyframes number-block-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.retire {
    animation-name: retire;
    animation-duration: 330ms;
    opacity: 0.3;
}



@keyframes retire {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

.number-block.removing span {
    animation-name: removed-number-block-in;
    animation-duration: 330ms;
}

@keyframes removed-number-block-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


.footer-label {
    font-size: 12px;
    margin-top: 14px;
    margin-bottom: 4px;
}

.number-blocks {
    display: flex;
    gap: 1px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.chosen-multiplier {
    background-color: var(--base);
    font-size: 9px;
    padding: 2px;
    color: var(--special-colour);
    display: none;
}

.boosted .chosen-multiplier {
    display: block;
}

#result-data {
    width: 100%;
    background-color: var(--base);
    border-radius: 8px;
    flex-shrink: 0;
    height: 0;
    transition: 330ms ease-in;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    outline: 0px solid var(--base);
}

#point-prizes.boosted-win {
    color: rgb(0, 178, 255);
}

#point-progress.boosted-win {
    background: rgb(0, 178, 255);
}

#score-container.boosted-win {
    background: rgb(0, 178, 255);
    color: black;
}

#score-container.boosted-win .score-points {
    color: rgb(0, 178, 255);
}

#round-points.boosted-win {
    background: rgb(0, 178, 255);
    color: black;
}

#result-data.highlit {
    outline: 2px solid var(--accent);
}

#result-data.highlit.boosted-win {
    outline: 2px solid rgb(0, 178, 255);
}

.result-data-active {
    height: 100px !important;
    margin-top: 8px;
    outline: 2px solid var(--base);
}

.boosted-numbers {
    display: flex;
    gap: 4px;
}

.boosted-number-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

.boosted.number-block {
    animation-name: boosted-bounce;
    animation-duration: 500ms;
}

@keyframes boosted-bounce {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        
        transform: translateY(0px);
    }
}

.boosted-number {
    color: var(--special-colour);
    font-size: 16px;
    transition: opacity 330ms;
    opacity: 0;
}

.boosted-number-mult {
    font-size: 10px;
    font-weight: 800;
    width: 90%;
    border-radius: 4px;
    margin: 4px;
    color: var(--base);
    background-color: var(--special-colour);
    transition: opacity 330ms;
    opacity: 0;
}

.set {
    border: 2px solid var(--accent) !important;
    box-sizing: border-box;
}

.number-block {
    transition: background-color 330ms, border 330ms;
    width: 40px;
    height: 48px;
    background-color: var(--light-base);
    border-radius: 4px;
    margin-top: 8px;
    border: 2px solid rgba(0, 0, 0, 0);
}

.result-number {
    background-color: var(--accent);
    color: var(--base);
    font-size: 16px;
    font-weight: bold;
}

@media (min-height: 700px) and (max-height: 900px) {
    .felt {
        max-height: 500px;
    }
}

@media (min-height: 900px) {
    .felt {
        max-height: 700px;
    }

    #felt-container {
        max-height: 700px;
    }

}


/* ROULETTE ANIMATION */
.roulette-spin {
    animation-name: roulette-spin-animation;
    animation-delay: 0s;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes roulette-spin-animation {
    0% {
        transform: translate(-5%, -4%) rotate(0deg);
    }
    100% {
        transform: translate(-5%, -4%) rotate(720deg);
    }
}

#ball-holder {
    width: 92%;
    height: 92%;
    margin-left: 4%;
    margin-top:4%;
}

/* BALL STOPS Animations */
.ball-animation-0-in {
    animation: 10s ball-spin-0 ease-in-out forwards;
}

.ball-animation-1-in {
    animation: 10s ball-spin-1 ease-in-out forwards;
}

.ball-animation-2-in {
    animation: 10s ball-spin-2 ease-in-out forwards;
}

.ball-animation-3-in {
    animation: 10s ball-spin-3 ease-in-out forwards;
}

.ball-animation-4-in {
    animation: 10s ball-spin-4 ease-in-out forwards;
}

.ball-animation-5-in {
    animation: 10s ball-spin-5 ease-in-out forwards;
}

.ball-animation-6-in {
    animation: 10s ball-spin-6 ease-in-out forwards;
}

.ball-animation-7-in {
    animation: 10s ball-spin-7 ease-in-out forwards;
}

.ball-animation-8-in {
    animation: 10s ball-spin-8 ease-in-out forwards;
}

.ball-animation-9-in {
    animation: 10s ball-spin-9 ease-in-out forwards;
}

.ball-animation-10-in {
    animation: 10s ball-spin-10 ease-in-out forwards;
}

.ball-animation-11-in {
    animation: 10s ball-spin-11 ease-in-out forwards;
}

.ball-animation-12-in {
    animation: 10s ball-spin-12 ease-in-out forwards;
}

.ball-animation-13-in {
    animation: 10s ball-spin-13 ease-in-out forwards;
}

.ball-animation-14-in {
    animation: 10s ball-spin-14 ease-in-out forwards;
}

.ball-animation-15-in {
    animation: 10s ball-spin-15 ease-in-out forwards;
}

.ball-animation-16-in {
    animation: 10s ball-spin-16 ease-in-out forwards;
}

.ball-animation-17-in {
    animation: 10s ball-spin-17 ease-in-out forwards;
}

.ball-animation-18-in {
    animation: 10s ball-spin-18 ease-in-out forwards;
}

.ball-animation-19-in {
    animation: 10s ball-spin-19 ease-in-out forwards;
}

.ball-animation-20-in {
    animation: 10s ball-spin-20 ease-in-out forwards;
}

.ball-animation-21-in {
    animation: 10s ball-spin-21 ease-in-out forwards;
}

.ball-animation-22-in {
    animation: 10s ball-spin-22 ease-in-out forwards;
}

.ball-animation-23-in {
    animation: 10s ball-spin-23 ease-in-out forwards;
}

.ball-animation-24-in {
    animation: 10s ball-spin-24 ease-in-out forwards;
}

.ball-animation-25-in {
    animation: 10s ball-spin-25 ease-in-out forwards;
}

.ball-animation-26-in {
    animation: 10s ball-spin-26 ease-in-out forwards;
}

.ball-animation-27-in {
    animation: 10s ball-spin-27 ease-in-out forwards;
}

.ball-animation-28-in {
    animation: 10s ball-spin-28 ease-in-out forwards;
}

.ball-animation-29-in {
    animation: 10s ball-spin-29 ease-in-out forwards;
}

.ball-animation-30-in {
    animation: 10s ball-spin-30 ease-in-out forwards;
}

.ball-animation-31-in {
    animation: 10s ball-spin-31 ease-in-out forwards;
}

.ball-animation-32-in {
    animation: 10s ball-spin-32 ease-in-out forwards;
}

.ball-animation-33-in {
    animation: 10s ball-spin-33 ease-in-out forwards;
}

.ball-animation-34-in {
    animation: 10s ball-spin-34 ease-in-out forwards;
}

.ball-animation-35-in {
    animation: 10s ball-spin-35 ease-in-out forwards;
}

.ball-animation-36-in {
    animation: 10s ball-spin-36 ease-in-out forwards;
}


@keyframes ball-spin-0 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3252deg);
    }
}

@keyframes ball-spin-1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3029deg);
    }
}

@keyframes ball-spin-2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3195deg);
    }
}

@keyframes ball-spin-3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3272deg);
    }
}

@keyframes ball-spin-4 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3215deg);
    }
}

@keyframes ball-spin-5 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3068deg);
    }
}

@keyframes ball-spin-6 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3156deg);
    }
}

@keyframes ball-spin-7 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3311deg);
    }
}

@keyframes ball-spin-8 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3098deg);
    }
}

@keyframes ball-spin-9 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3349deg);
    }
}

@keyframes ball-spin-10 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3078deg);
    }
}

@keyframes ball-spin-11 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3117deg);
    }
}

@keyframes ball-spin-12 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3291deg);
    }
}

@keyframes ball-spin-13 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3137deg);
    }
}

@keyframes ball-spin-14 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3009deg);
    }
}

@keyframes ball-spin-15 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3234deg);
    }
}

@keyframes ball-spin-16 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3048deg);
    }
}

@keyframes ball-spin-17 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3175deg);
    }
}

@keyframes ball-spin-18 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3330deg);
    }
}

@keyframes ball-spin-19 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3224deg);
    }
}

@keyframes ball-spin-20 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3019deg);
    }
}

@keyframes ball-spin-21 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3205deg);
    }
}

@keyframes ball-spin-22 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3340deg);
    }
}

@keyframes ball-spin-23 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3088deg);
    }
}

@keyframes ball-spin-24 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3058deg);
    }
}

@keyframes ball-spin-25 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3185deg);
    }
}

@keyframes ball-spin-26 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3262deg);
    }
}

@keyframes ball-spin-27 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3147deg);
    }
}

@keyframes ball-spin-28 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3301deg);
    }
}

@keyframes ball-spin-29 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3321deg);
    }
}

@keyframes ball-spin-30 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3107deg);
    }
}

@keyframes ball-spin-31 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3000deg);
    }
}

@keyframes ball-spin-32 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3244deg);
    }
}

@keyframes ball-spin-33 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3038deg);
    }
}

@keyframes ball-spin-34 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3166deg);
    }
}

@keyframes ball-spin-35 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3281deg);
    }
}

@keyframes ball-spin-36 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-3127deg);
    }
}

/*-----------------------*/

#ball {
    width: 10px;
    height: 10px;
    background-image: url("Ball.png");
    background-size: contain;
    position: relative;
    left: 56%;
    top: 2%;
}

.ball-bounce-out {
    animation: 1 ball-spin-end 5s ease-in forwards;
}

@keyframes ball-spin-end {
    70% {
        top: 2%;
    }
    95% {
        top: 17%;
    }
    100% {
        top: 17%;
    }
}

/* FELT NUMBER COLORS */
.number-0 {
    background: var(--green-number);
}

.number-1, .number-3, .number-5, .number-7, .number-9,
.number-12, .number-14, .number-16, .number-18, .number-19,
.number-21, .number-23, .number-25, .number-27, .number-30,
.number-32, .number-34, .number-36 {
    background: var(--red-number)
}


.number-2, .number-4, .number-6, .number-8,
.number-10, .number-11, .number-13, .number-15, .number-17,
.number-20, .number-22, .number-24, .number-26, .number-28,
.number-29, .number-31, .number-33, .number-35 {
    background: var(--black-number)
}