:root{
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

.main_container_combo_builder{
    grid-template-columns: auto 400px;
    gap: 10px;
}

.combo_builder_container {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.combo_builder_container.no_data_available {
    padding: 30px 20px;
    text-align: center;
}

.combo_builder_container.no_data_available h1 {
    font-family: var(--exo);
    color: var(--primario);
    font-size: 28px;
    margin-bottom: 10px;
}

.combo_builder_container.no_data_available h2 {
    font-family: var(--exo);
    color: var(--rosso);
    font-size: 18px;
    margin-bottom: 10px;
}

.combo_builder_header {
    background: var(--primario);
    color: #fff;
    padding: 24px 20px 20px;
    text-align: center;
}

.combo_builder_header h1 {
    margin: 0 auto 12px;
    display: flex;
    justify-content: center;
}

.combo_builder_header h1 img {
    width: auto;
    max-width: 240px;
    height: auto;
}

.combo_builder_gameDescription {
    font-family: var(--lato);
    font-size: 15px;
    line-height: 1.4;
    color: #fff;
    opacity: 0.95;
    max-width: 520px;
    margin: 0 auto 18px;
}

.combo_builder_question_header{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.combo_builder_question_header img{
    width: 28px;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

.combo_builder_teams_header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    padding: 10px 0;
}

.combo_builder_team_name {
    font-family: var(--exo);
    font-weight: 700;
    font-size: 32px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    padding: 0 10px;
}

.combo_builder_team_name_home {
    text-align: right;
    padding: 0 5px 0 0;
}

.combo_builder_team_name_away {
    text-align: left;
    padding: 0 0 0 5px;
}

.combo_builder_match_date {
    font-family: var(--exo);
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    border: 1px solid #FFF;
    border-radius: 8px;
    padding: 5px 10px;
}

.combo_builder_sidebar{
    position: sticky;
    top: 20px;
    background-color: var(--primario);
    padding: 20px 15px;
    border-radius: 8px;
    z-index: 99;
    color: #FFF;
}

.combo_builder_sidebar_answer{
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #FFF;
}
.combo_builder_sidebar_answer:last-child{
    border-bottom: none;
}

.combo_builder_sidebar_answer .domanda{
    font-size: 12px;
    padding: 0;
    text-transform: uppercase;
    font-family: var(--exo);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

}

.combo_builder_sidebar_answer .domanda img{
    width: 16px;
    height: auto;
    object-fit: cover;
}

.combo_builder_sidebar_answer .risposta{
    font-size: 11px;
    background-color: var(--blu);
    color: #FFF;
    font-family: var(--exo);
    font-weight: bold;
    padding: 6px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
}


.combo_builder_content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background-color: var(--primario);
}

.combo_builder_sidebar_header{
    text-align: center;
}
.combo_builder_sidebar_header h3{
    font-size: 24px;
    font-weight: 700;
    color: #FFF;
    margin: 0;
    padding: 0;
}

.combo_builder_status{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--lato);
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    border-radius: 5px;
    padding: 5px 14px;
}
.combo_builder_status_number{
    font-size: 52px;
    font-weight: 700;
    color: #FFF;
    padding: 0;
    display: block;
    text-align: center;
    line-height: 1;
}
.combo_builder_status_text {
    font-size: 14px;
    font-weight: 400;
}
.combo_builder_status_min_max {
    font-size: 11px;
    font-weight: 400;
    color: #BDBDBD;
}

.combo_builder_sidebar_footer{
    text-align: center;
    margin-top: 5px;
}

.combo_builder_confirm_button{
    font-size: 13px;
    font-weight: 700;
    color: #FFF;
    background-color: #39AD1F;
    border: none;
    padding: 10px 14px;
    display: block;
    border-radius: 6px;
    text-transform: uppercase;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.combo_builder_confirm_button:disabled{
    background-color: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.7;
}
.combo_builder_submit_error{
    color: #c62828;
    font-size: 12px;
    margin-bottom: 8px;
    text-align: center;
}


h2.combo_builder_title{
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: #FFF;
    text-align: center;
    font-family: var(--exo);
    background: #1F355C;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0px;
}


.main_container_combo_builder.combo_builder_invio_page{
    grid-template-columns: 1fr;
}
.combo_builder_invio_content{
    padding: 0 20px 20px 20px;
    background-color: var(--primario);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.combo_builder_invio_list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 520px;
    width: 100%;
}
.combo_builder_recap_answer{


    border: 1px solid #e2e6ef;
    color: #FFF;
    border-radius: 8px;
    padding: 16px;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    text-align: center;
    background-color: #202D4D;
    background: linear-gradient(119deg, #263352 -4.38%, #263352 17.74%, #32477A 46.16%, #263352 74.59%, #263352 105.13%);

    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.combo_builder_recap_answer_img_container{
    object-fit: cover;
    padding: 0 10px 0 0;
    border-right: 1px solid #FFF;
}

.combo_builder_recap_answer_img_container img{
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.combo_builder_recap_answer_text_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
}

.combo_builder_recap_answer_text_container .domanda_testo{
    font-size: 12px;
    font-weight: 400;
    color: #FFF;
    font-family: var(--exo);
    text-transform: uppercase;
}
.combo_builder_recap_answer_text_container .risposta_testo{
    font-size: 18px;
    text-transform: capitalize;
    font-family: var(--exo);
    font-weight: 700;
    color: #FFF;
}

.combo_builder_invio_footer{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-width: 520px;
    width: 100%;

}

.combo_builder_invio_status{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0;
    color: #FFF;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #FFF;
    background-color: #202D4D;
    background: linear-gradient(119deg, #263352 -4.38%, #263352 17.74%, #32477A 46.16%, #263352 74.59%, #263352 105.13%);

    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.combo_builder_invio_footer_share_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--blu);
    border-radius: 8px;
    padding: 16px;
    flex: 1;
}
.combo_builder_invio_footer_share_title{
    color: #FFF;
    font-family: var(--exo);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
}
.combo_builder_invio_footer_share_buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.combo_builder_invio_footer_share_buttons a{
    display: inline-flex;
    line-height: 0;
}
.combo_builder_invio_footer_share_buttons a img{
    width: 32px;
    height: 32px;
    object-fit: cover;
}



.combo_builder_back_link{
    display: inline-block;
    margin-top: 16px;
    color: var(--primario);
    font-weight: 700;
}
.combo_builder_question {
    border: 1px solid #e2e6ef;
    color: #FFF;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    background-color: #202D4D;
    background: linear-gradient(119deg, #263352 -4.38%, #263352 17.74%, #32477A 46.16%, #263352 74.59%, #263352 105.13%);

    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}



.combo_builder_question:after, .combo_builder_recap_answer:after {
	content:'';
	top:0;
	opacity: .2;
	transform:translateX(100%) skewY(-30deg);
	width:100%;
	height:220px;
	position: absolute;
	z-index:1;
	filter: blur(20px);
	animation: slide 8s infinite;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.6)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
		background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);

}
@keyframes slide {
	0% {transform:translateX(-200%) skewY(-30deg);}
	60% {transform:translateX(-200%) skewY(-30deg);}
	100% {transform:translateX(100%) skewY(-30deg);}
}

.combo_builder_question:nth-child(1):after { animation-delay: 2.8s; }
.combo_builder_question:nth-child(2):after { animation-delay: -9.5s; }
.combo_builder_question:nth-child(3):after { animation-delay: -4.5s; }
.combo_builder_question:nth-child(4):after { animation-delay: -5.5s; }
.combo_builder_question:nth-child(5):after { animation-delay: 4.7s; }
.combo_builder_question:nth-child(6):after { animation-delay: 3.5s; }
.combo_builder_question:nth-child(7):after { animation-delay: 7.8s; }
.combo_builder_question:nth-child(8):after { animation-delay: -8.3s; }
.combo_builder_question:nth-child(9):after { animation-delay: -1.6s; }
.combo_builder_question:nth-child(10):after { animation-delay: -9.4s; }
.combo_builder_question:nth-child(11):after { animation-delay: -5.6s; }
.combo_builder_question:nth-child(12):after { animation-delay: 0.1s; }
.combo_builder_question:nth-child(13):after { animation-delay: -9.5s; }
.combo_builder_question:nth-child(14):after { animation-delay: -6.0s; }
.combo_builder_question:nth-child(15):after { animation-delay: 3.0s; }
.combo_builder_question:nth-child(16):after { animation-delay: 0.9s; }
.combo_builder_question:nth-child(17):after { animation-delay: -5.6s; }
.combo_builder_question:nth-child(18):after { animation-delay: 1.8s; }
.combo_builder_question:nth-child(19):after { animation-delay: 6.2s; }
.combo_builder_question:nth-child(20):after { animation-delay: -9.9s; }
.combo_builder_question:nth-child(21):after { animation-delay: 6.1s; }
.combo_builder_question:nth-child(22):after { animation-delay: 4.0s; }
.combo_builder_question:nth-child(23):after { animation-delay: -3.2s; }
.combo_builder_question:nth-child(24):after { animation-delay: -6.9s; }
.combo_builder_question:nth-child(25):after { animation-delay: 9.1s; }
.combo_builder_question:nth-child(26):after { animation-delay: -3.3s; }
.combo_builder_question:nth-child(27):after { animation-delay: -8.1s; }
.combo_builder_question:nth-child(28):after { animation-delay: -8.1s; }
.combo_builder_question:nth-child(29):after { animation-delay: 6.9s; }
.combo_builder_question:nth-child(30):after { animation-delay: 2.1s; }

.combo_builder_recap_answer:nth-child(1):after { animation-delay: 2.8s; }
.combo_builder_recap_answer:nth-child(2):after { animation-delay: -9.5s; }
.combo_builder_recap_answer:nth-child(3):after { animation-delay: -4.5s; }
.combo_builder_recap_answer:nth-child(4):after { animation-delay: -5.5s; }
.combo_builder_recap_answer:nth-child(5):after { animation-delay: 4.7s; }
.combo_builder_recap_answer:nth-child(6):after { animation-delay: 3.5s; }
.combo_builder_recap_answer:nth-child(7):after { animation-delay: 7.8s; }
.combo_builder_recap_answer:nth-child(8):after { animation-delay: -8.3s; }
.combo_builder_recap_answer:nth-child(9):after { animation-delay: -1.6s; }
.combo_builder_recap_answer:nth-child(10):after { animation-delay: -9.4s; }
.combo_builder_recap_answer:nth-child(11):after { animation-delay: -5.6s; }
.combo_builder_recap_answer:nth-child(12):after { animation-delay: 0.1s; }
.combo_builder_recap_answer:nth-child(13):after { animation-delay: -9.5s; }
.combo_builder_recap_answer:nth-child(14):after { animation-delay: -6.0s; }
.combo_builder_recap_answer:nth-child(15):after { animation-delay: 3.0s; }
.combo_builder_recap_answer:nth-child(16):after { animation-delay: 0.9s; }
.combo_builder_recap_answer:nth-child(17):after { animation-delay: -5.6s; }
.combo_builder_recap_answer:nth-child(18):after { animation-delay: 1.8s; }
.combo_builder_recap_answer:nth-child(19):after { animation-delay: 6.2s; }
.combo_builder_recap_answer:nth-child(20):after { animation-delay: -9.9s; }
.combo_builder_recap_answer:nth-child(21):after { animation-delay: 6.1s; }
.combo_builder_recap_answer:nth-child(22):after { animation-delay: 4.0s; }
.combo_builder_recap_answer:nth-child(23):after { animation-delay: -3.2s; }
.combo_builder_recap_answer:nth-child(24):after { animation-delay: -6.9s; }
.combo_builder_recap_answer:nth-child(25):after { animation-delay: 9.1s; }
.combo_builder_recap_answer:nth-child(26):after { animation-delay: -3.3s; }
.combo_builder_recap_answer:nth-child(27):after { animation-delay: -8.1s; }
.combo_builder_recap_answer:nth-child(28):after { animation-delay: -8.1s; }
.combo_builder_recap_answer:nth-child(29):after { animation-delay: 6.9s; }
.combo_builder_recap_answer:nth-child(30):after { animation-delay: 2.1s; }


.combo_builder_question.locked {
    opacity: 0.55;
}

.combo_builder_question h2 {
    font-family: var(--exo);
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 10px 0;
    line-height: 1.3;
}

.combo_builder_question_options {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    flex-wrap: wrap;
}

.combo_builder_question_option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 12px 15px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid #FFF;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    text-transform: uppercase;
    color: #FFF;
    font-family: var(--lato);
    font-size: 13px;
    font-weight: 600;
}

.combo_builder_question_option label {
    font-family: var(--exo);
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    cursor: pointer;
    pointer-events: none;
    margin: 0;
    padding: 0;
}


.combo_builder_question_option.selected {
    background: var(--blu);
    border-color: var(--blu);
}

.combo_builder_question_option.selected label {
    color: #fff;
}

.combo_builder_question.locked .combo_builder_question_option {
    cursor: not-allowed;
}

.combo_builder_question.locked .combo_builder_question_option:hover {
    border-color: transparent;
    background: var(--grigio);
}

.combo_builder_disclaimer{background-color: var(--primario); padding: 20px; color: #999; font-size: 12px;}

@media only screen and (max-width: 924px) {
    .main_container_combo_builder{
        grid-template-columns: auto 360px;
    }

    .combo_builder_teams_header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

}

@media only screen and (max-width: 720px) {
    .combo_builder_header {
        padding: 10px 5px;
    }

    .combo_builder_header h1 img {
        max-width: 180px;
    }

    .combo_builder_container{border-radius: 0;}

    .main_container_combo_builder{margin: 0; width: 100%; display: block;}

    .combo_builder_sidebar {
        position: fixed;
        height: calc(155px + var(--sab));
        bottom: calc(55px + var(--sab));
        left: 0;
        right: 0;
        top: auto;
        border-top: 1px solid #FFF;
        padding: 5px 10px;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .combo_builder_teams_header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .combo_builder_gameDescription{margin: 0 auto;}

    .combo_builder_team_name_home,
    .combo_builder_team_name_away {
        text-align: center;
    }


    .combo_builder_content {
        padding: 14px;
        gap: 30px;
    }

    .combo_builder_question_options{flex-direction: column;}

    .combo_builder_question_option label{font-size: 12px;}

    .combo_builder_question_options {
        grid-template-columns: 1fr;
    }

    .combo_builder_question h2 {
        font-size: 18px;
    }

    .combo_builder_sidebar_footer{
        margin: 10px 0;
    }

    .combo_builder_sidebar_header h3, .combo_builder_sidebar_answer{display: none;}

}