header.logo img {
    width: 150px;
    margin: 0 auto;
}

header.logo {
    text-align: right;
    display: ruby-text;
    margin-top: 20px;
}
form input, form select {
    color: #18181b !important;
}table.listing thead {
    text-align: left;
    background: #c54c00;
}

table.listing {
    margin-top: 30px;
    width: 100%;
}

table.listing thead th {
    height: 40px;
}

table.listing tbody td {
    border-bottom: 1px solid #ccc;
    text-transform: capitalize;
}button {
    background: #c54c00 !important;
}

button:hover {
    background: #a94100 !important;
}


/** GAME STYLING **/

body.screens {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
body.screens.game-cucina {
    background-image: url(../img/scenarios/cucina.png);
}body.screens.game-bagno{
    background-image: url(../img/scenarios/bagno.png);
}body.screens.game-cucina .modal, body.screens.game-bagno .modal {background-color: #00000000;backdrop-filter: blur(10px);}
body.screens.game-cucina .main-question ul.kitchen-items, body.screens.game-bagno .main-question ul.kitchen-items {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100vw;
    transform: translate(-50%, -50%);
    padding: 0 150px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures items wrap if they exceed the width */
    list-style: none; /* Remove default bullets */
}
.blur-bg {
    backdrop-filter: blur(10px);
}

header.game {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 5;
}span.level, span.time {
    color: #fff;
    font-size: 32px;
    text-transform: uppercase;
    margin: 0 30px;
}header.game span.time {
    float: right;
    width: 100px;
    border: 3px solid #1cb78b;
    text-align: center;
    font-size: 28px;
    border-radius: 30px;
}

.slide h2 {
    width: 60%;
    border: 5px solid #1cb78b;
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    background: #1cb78b29;
}

footer {
    width: 100%;
    display: block;
    overflow: auto;
    font-weight: 400 !important;!i;!;
}button.screen-btn, div.screen-btn.next {
    float: right;
    background: #1cb78b !important;
    color: #fff;
    font-size: 32px;
    padding: 5px 50px;
    border-radius: 30px;
    margin: 0 20px;
    cursor: pointer;
    right: 0;
    position: absolute;
    bottom: 20px;
}button.screen-btn.submit {
    background: #c54c00 !important;
}span.screen-btn:hover, button.screen-btn:hover, div.screen-btn:hover {
    transform: scale(1.05);
}.tags input {
    width: 100%;
    border-radius: 5px;
}ul.kitchen-items li {
    display: inline-block;
    width: 12%;
    position: relative;
    margin: 0;
}.game-cucina .blur-bg ul.kitchen-items, .game-bagno .blur-bg ul.kitchen-items {
    text-align: center;
    margin-top: 100px;
}.game-cucina .blur-bg ul.kitchen-items li, .game-bagno .blur-bg ul.kitchen-items li {width: 16%;text-align: center;}
.game-cucina .blur-bg ul.kitchen-items li img, .game-bagno .blur-bg ul.kitchen-items li img {
    margin: 0 auto;
}
.game-bagno .blur-bg ul.kitchen-items {
    margin-top: 30px;
}
ul.levels li {
    display: inline-block;
    padding: 0 100px;
    margin-top: 50px;
}

ul.levels li button.btn, ul.levels li div.btn {
    transition: 0.5s;
    min-width: 350px;
    padding: 20px;
    height: 180px;
    text-align: center;
    font-size: 24px;
    position: relative;
    background: #1cb78b38 !important;
    border: 4px solid #1cb78b;
    border-radius: 15px;
    color: #fff;
    text-transform: capitalize;
    display: inline-block;
}ul.levels li div.btn span {
    font-size: 18px;
}
ul.levels li div.btn button {
    transition: 0.5s;
    background: #1cb589 !important;!i;!;
    font-size: 18px;
    padding: 6px 16px;
    display: inline-block;
    margin-top: 12px;
    border-radius: 10px;
}ul.levels li div.btn button:hover {
    background: #fff !important;
    color: #000;
}
ul.levels li a span {
    font-size: 18px;
}
ul.levels li button img {
    width: 220px;
    position: absolute;
    top: -90px;
    left: -100px;
}ul.levels li button:hover, ul.levels li div.btn:hover {
    transform: scale(1.05);
    background: #1cb78b !important;
}body.screens .modal .bg-white.p-4.rounded {
    background: #1cb78b38 !important;
    border: 4px solid #1cb78b;
    border-radius: 20px;
    color: #fff;
    width: 600px;
    padding: 20px 50px;
}body.screens .modal .bg-white.p-4.rounded input {
    background: #1cb78b;
    color: #fff !important;
    border: 0;
    border-radius: 50px;
    padding: 12px 20px;
    margin=b: 0;
}

body.screens .modal .bg-white.p-4.rounded label {
    color: #fff;
    font-size: 16px;
    margin-left: 25px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 20px;
}body.screens .modal .bg-white.p-4.rounded button {
    transition: 0.5s;
    background: #178f6d !important;
    border-radius: 30px;
    width: 45%;
    margin: 20px 20px;
}

body.screens .modal .bg-white.p-4.rounded button:hover {
    transform: scale(1.05);
    background: #fff !important;
    color: #178f6d;
}


.kitchen-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Optional: to allow wrapping of items */
    justify-content: center;
}

.kitchen-items li {
    margin: 10px; /* Adjust spacing between items as needed */
}

.img-wrapper {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensure images take up the full width of their container */
    transition: 0.5s;
    cursor: pointer;
}
ul.kitchen-items li label.img-wrapper:hover {
    transform: scale(1.05);
}
.img-wrapper img {
    width: 100%; /* Ensure images are responsive */
    display: block;
}

.img-wrapper .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

.img-wrapper input[type="checkbox"]:checked ~ .hover-img {
    opacity: 1;
}

.img-wrapper input[type="checkbox"]:checked ~ .default-img {
    opacity: 0;
}

/*Extra Pages*/
.extra-page.items-center {
    text-align: center;
    color: #000000;
    min-height: 500px;
    font-weight: 800;
}.extra-page.items-center h1 {
    font-size: 75px;
}.extra-page.items-center p {
    font-size: 28px;
    padding: 0 200px;
}.additions {
    width: 20%;
    margin: 0 auto;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
}.additions div#question {
    font-size: 59px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}.additions input[type="number"] {
    width: 100%;
    padding: 20px 0;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    border-radius: 100px;
}.additions button {
    width: 100%;
    margin-top: 10px;
    padding: 20px 0;
    font-size: 23px;
    font-weight: 600;
    color: #ffffff !important;
    background: #1cb78b !important;
    border-radius: 100px;
}h2.compito-addizioni {
    position: relative;
    top: -220px;
    font-size: 28px;
}.pagination {
    padding: 20px 0 0;
}option.memoria.semantica {
    background: #ccc;
}footer.seprate.disable {
    background: #1cb78b75;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(35px);
}footer.seprate.disable button.screen-btn.next, footer.seprate.disable div.screen-btn.next {
    background: #000 !important;
}footer.seprate.disable h2.compito-addizioni {
    width: 60%;
    border: 5px solid #1cb78b;
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    background: #1cb78b29;
    top: 330px;
    margin: auto;
}span.iconx i {
    font-size: 70px;
    margin-top: 60px;
}

div#popup{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    z-index: 1000;
    background: #158d6b;
}div#popup h2.compito-addizioni {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
}

/* Loading Screen CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Loader Container */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1cb78b;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Keeps loader on top */
}

/* Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}