.bingo-container {
    width: 100%;
    height: 100%;
}

.bingo-game-pause {
    background-color: #ffedd6;
}

.bingo-button-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: calc(var(--percentage-width) * 76);
    margin-top: calc(var(--percentage-width) * 22);
}

.bingo-button-container .button {
    width: calc(var(--percentage-width) * 14);
    font-size: calc(var(--percentage-width) * 1.7);
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--percentage-height) * 5);
    flex-shrink: 0;
    top: calc(var(--percentage-width) * 3);
    position: relative;
    margin: calc(var(--percentage-width) * 0.7);
}

.bingo-button-container .repeat {
    background-color: rgb(112, 119, 113);
    font-size: calc(var(--percentage-width) * 1.5);
}

.next-ball {
    background-color: #0069b4;
}

.repeat,
.next-ball {
    left: 1vw;
}

.button.end-locked {
    background-color: #000;
    font-size: calc(var(--percentage-width) * 1.7);
}

.bingo-button-container .bingo-pause {
    background-color: #d50e0e;
    font-style: italic;
    font-weight: bold;
    font-size: calc(var(--percentage-width) * 4);
    padding: calc(var(--percentage-width) * 1.5);
    right: calc(var(--percentage-width) * 1);
    top: calc(var(--percentage-width) * 5);
    width: calc(var(--percentage-width) * 17);
}

.win {
    /* height: 5vw; */
    height: calc(var(--percentage-width) * 5);
}

.bingo-letters {
    /* width: 40vw; */
    width: calc(var(--percentage-width) * 40);
    /* top: 2vw; */
    top: calc(var(--percentage-width) * 2);
    position: relative;
}

.bingo-cijfer {
    position: absolute;
    /* left: 2vw; */
    left: calc(var(--percentage-width) * 2);
    /* top: 2vw; */
    top: calc(var(--percentage-width) * 2);
}

.bingo-cijfer .number {
    display: inline-flex;
    /* line-height: 20vw; */
    line-height: calc(var(--percentage-width) * 20);
    /* font-size: 13vw; */
    font-size: calc(var(--percentage-width) * 13);
}

.bingo-img {
    border: solid calc(var(--percentage-width) * 0.8) black;
    /* height: 20vw; */
    height: calc(var(--percentage-width) * 20);
    /* width: 20vw; */
    width: calc(var(--percentage-width) * 20);
    border-radius: 50%;
    overflow: hidden;
    position: relative
}

#bingo-rotate {
    position: absolute;
}

.bingo-snail,
.bingo-hare {
    /* width: 2.5vw; */
    width: calc(var(--percentage-width) * 2.5);
}

.bingo-human {
    /* width: 3.5vw */
    width: calc(var(--percentage-width) * 3.5);
}

.number {
    justify-content: center;
}

.ball-countdown {
    position: relative;
    /* left: 4.5vw; */
    left: calc(var(--percentage-width) * 4.5);
    /* font-size: 2vw; */
    font-size: calc(var(--percentage-width) * 2);
    /* width: 12vw; */
    width: calc(var(--percentage-width) * 12);
    justify-content: center;
    display: flex;
    /* top: 3vw; */
    top: calc(var(--percentage-width) * 3);
}

.list-container {
    position: absolute;
    /* top: 0.5vw; */
    top: calc(var(--percentage-width) * 0.5);
    /* left: 25vw; */
    left: calc(var(--percentage-width) * 25);
    width: 100%;
}

.bingo-tray {
    position: absolute;
    border: solid calc(var(--percentage-width) * 0.2) black;
    background-color: var(--illi-light-game-red);
    /* border-radius: 2vw; */
    border-radius: calc(var(--percentage-width) * 2);
    width: 100%;
    /* padding-bottom: 0.5vw; */
    padding-bottom: calc(var(--percentage-width) * 0.5);
}

.placement-ball {
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    /* font-size: 4.5vw; */
    font-size: calc(var(--percentage-width) * 4.5);
    /* width: 7.5%; */
    width: calc(var(--percentage-width) * 5.48);
    /* padding: 0.3vw; */
    padding: calc(var(--percentage-width) * 0.3);
    /* margin-left: 0.8vw; */
    margin-left: calc(var(--percentage-width) * 0.8);
    /* margin-bottom: 0.3vw; */
    margin-bottom: calc(var(--percentage-width) * 0.3);
    justify-content: center;
    /* top: 0.25vw; */
    top: calc(var(--percentage-width) * 0.25);
    /* right: 0.1vw; */
    right: calc(var(--percentage-width) * 0.1);
    /* scale: 99% 99%; */
    transform: scale(0.99);
    background-color: white;
    border: solid calc(var(--percentage-width) * 0.2) black;
    opacity: 0.2;
}

.number-container-small {
    width: 100%;
    /*60vw*/
    display: none;
    position: relative;
}

.number-container-small .number-small {
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    font-size: calc(var(--percentage-width) * 4.5);
    /* width: 7.5%; */
    width: calc(var(--percentage-width) * 5.48);
    padding: calc(var(--percentage-width) * 0.3);
    margin-left: calc(var(--percentage-width) * 0.8);
    margin-bottom: calc(var(--percentage-width) * 0.3);
    justify-content: center;
    top: calc(var(--percentage-width) * 0.3);
    scale: 100% 100%;
}

.full-bingo-list {
    position: absolute;
    top: calc(var(--percentage-width) * 11);
    left: calc(var(--percentage-width) * 0.4);
    color: white;
    font-weight: bold;
    width: 100%;
}

.bingo-cijfer-lijst {
    color: white;
    font-weight: bold;
    position: absolute;
    /* width: 73%; */
    width: calc(var(--percentage-width) * 73);
    height: 100%;
}

.row-low-opacity {
    opacity: 0.06;
}

.row-highlighted,
.row-low-opacity {
    position: relative;
    display: inline-flex;
    /* font-size: 4.5vw; */
    font-size: calc(var(--percentage-width) * 4.5);
    width: 5.35%;
    /* margin-bottom: 0.3vw; */
    margin-bottom: calc(var(--percentage-width) * 0.3);
    /* margin-left: 0.2vw; */
    margin-left: calc(var(--percentage-width) * 0.2);
    justify-content: center;
    overflow: hidden;
    /* scale: 95% 95%; */
    transform: scale(0.95);
    /* padding: 0.3vw; */
    padding: calc(var(--percentage-width) * 0.3);
}

/* Rows */
.b-row {
    background-color: #e30613;
    border: solid calc(var(--percentage-width) * 0.2) darkred;
    /* border-radius: 3vw; */
    border-radius: calc(var(--percentage-width) * 3);
}

.bingo-cijfer .b-row {
    border: solid calc(var(--percentage-width) * 0.8) #e30613;
}

.i-row {
    background-color: #0069b4;
    border: solid calc(var(--percentage-width) * 0.2) darkblue;
    /* border-radius: 3vw; */
    border-radius: calc(var(--percentage-width) * 3);
}

.bingo-cijfer .i-row {
    border: solid calc(var(--percentage-width) * 0.8) #0069b4;
}

.n-row {
    background-color: #3aaa35;
    border: solid calc(var(--percentage-width) * 0.2) darkgreen;
    /* border-radius: 3vw; */
    border-radius: calc(var(--percentage-width) * 3);
}

.bingo-cijfer .n-row {
    border: solid calc(var(--percentage-width) * 0.8) #3aaa35;
}

.g-row {
    background-color: #ffbf00;
    border: solid calc(var(--percentage-width) * 0.2) #a17902;
    /* border-radius: 3vw; */
    border-radius: calc(var(--percentage-width) * 3);
}

.bingo-cijfer .g-row {
    border: solid calc(var(--percentage-width) * 0.8) #ffbf00;
}

.o-row {
    background-color: #951b81;
    border: solid calc(var(--percentage-width) * 0.2) rgb(100, 0, 100);
    /* border-radius: 3vw; */
    border-radius: calc(var(--percentage-width) * 3);
}

.bingo-cijfer .o-row {
    border: solid calc(var(--percentage-width) * 0.8) #951b81;
}

.ring {
    /* width: 20vw; */
    width: calc(var(--percentage-width) * 20);
    /* height: 20vw; */
    height: calc(var(--percentage-width) * 20);
    background-color: white;
    border-radius: 50%;
}

/* .bingo-spawn {
    /* left: 225; */
/* top: 225; */
/* left: 50%;
    top: 50%; */
/* position: absolute; */
/* } */

/*
.bingo-cijfer-lijst .number {
    	/*! display: none; */
/*! width: 100%;
    animation-duration: 5s;
	animation-name: locate;
    animation-iteration-count: infinite;
	/*object-fit: cover;  0.4s linear infinite
	
    /*animation: locate 0.4s linear infinite;
}

@keyframes locate {
	0% {
		/*transition: 100vw 0;
        left: 1550;
        top: 325;
        scale: 200% 200%;
	}
    
    /*50% {
        transition: 50vw 0;
        scale: 100% 100%;
    }

	100% {
		/*transition: 0vw 0;
        left: 0;
        top: 0;
        scale: 100% 100%;
        
	}
}*/

/*.bingo-cijfer img {
    animation-duration: 5s;
	animation-name: spin;
    animation-iteration-count: infinite;
}*/

.bingo-rotate-1 {
    width: 100%;
    animation: spin-small 5s linear infinite;
    object-fit: cover;
}

.bingo-rotate-2 {
    width: 100%;
    animation: spin-middle 5s linear infinite;
    object-fit: cover;
}

.bingo-rotate-3 {
    width: 100%;
    animation: spin-big 5s linear infinite;
    object-fit: cover;
}

@keyframes spin-small {
    0% {
        transform: rotateZ(0deg);
        scale: 2;
        translate: 0px;
    }

    100% {
        transform: rotateZ(720deg);
        scale: 2;
        translate: 5px;
    }
}

@keyframes spin-middle {
    0% {
        transform: rotateZ(0deg);
        scale: 2;
        translate: 5px;
    }

    100% {
        transform: rotateZ(540deg);
        scale: 2;
        translate: 20px;
    }
}

@keyframes spin-big {
    0% {
        transform: rotateZ(0deg);
        scale: 2;
        translate: 20px;
    }

    100% {
        transform: rotateZ(360deg);
        scale: 2;
        translate: 30px;
    }
}

.pulsing-light {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.bingo-modal-pause-container {
    position: relative;
    /* left: 25vw; */
    left: calc(var(--percentage-width) * 25);
}

.p-text {
    margin: calc(var(--percentage-width) * 1.2);
}