html, body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

*{box-sizing: border-box;}
*:disabled, .disabled, button.disabled, a.button.disabled{opacity: .4; cursor: not-allowed;}

:root{
    --red: #D65A56;
    --yellow: #EAB700;
    --black: #000000;
    --white: #FFFFFF;
    --green: #198662;
    --blue: #243561;
    --header-height: 90px;
    background: #000;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{font-family: "Barlow Semi Condensed", serif; font-weight: 700; font-style: normal;}
h1, h1 a, .h1, .h1 a{font-size: 28px;}
h2, h2 a, .h2, .h2 a{font-size: 24px;}
h3, h3 a, .h3, .h3 a{font-size: 21px;}
h4, h4 a, .h4, .h4 a{font-size: 18px;}


p{font-family: "Lato", serif; font-weight: 400; font-size: 14px; font-weight: 400; padding: 3px 0;}



a{color: var(--white); cursor: pointer; text-decoration: none; transition: color .4s ease;}
a:hover{color: var(--yellow);}
strong{font-weight: bold;}
ul{list-style-position: inside;}
.txt ul{list-style-position: inside;}

img{width: 100%; height: auto; display: block;}
.btn{box-shadow: none; border: none; cursor: pointer;}

.btn-primary{font-size: 18px; font-family: "Barlow Semi Condensed", serif; font-weight: 500; padding: 15px 20px; color: var(--white); border-radius: 5px; margin: 20px auto; display: block; background-color: var(--green);}
.btn-danger{font-size: 18px; font-family: "Barlow Semi Condensed", serif; font-weight: 500; padding: 15px 20px; color: var(--white); border-radius: 5px; margin: 20px auto; display: block; background-color: var(--red);}
.btn-danger:hover{color: var(--white);}

.myIn{width: 95%; max-width: 1000px; margin: 0 auto;}


body{min-height: 100vh; min-height: 100dvh; font-family: "Lato", serif; font-weight: 400; font-size: 14px; color: var(--blue); background-image: url(img/bg2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; overflow-x: hidden; overflow-y: auto;}

    .container{padding-bottom: 20px;}

.logo-big{max-width: 340px; margin: 0 auto; width: 90%;}
.logo-eurobet{width: 150px; margin: 0 auto;}

.testi-regolamento-cnt{max-width: 800px; margin: 20px auto; padding: 20px 40px; border-radius: 10px;
    background: transparent;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    --webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.65);
}

.testi-regolamento-cnt td{padding: 3px 10px;}
.testi-regolamento-cnt table, .testi-regolamento-cnt th, .testi-regolamento-cnt td {
    border: 1px solid var(--blue);
    border-collapse: collapse;
  }

.testi-regolamento-cnt h4{font-size: 24px; text-align: center; margin-bottom: 20px;}

.header-app{position: relative; z-index: 99;}

.header-app-in{
    background: transparent;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    --webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 100px;
}

.header-left, .header-center, .header-right{flex: 1;}
.header-center{flex: 2;}

.header-app-game-home .header-cente{flex: 1;}

.header-center{color: var(--white); text-align: center;}
.header-center h3{font-size: 28px;}
.header-center h5{font-size: 16px; font-weight: 300; font-family: "Lato", serif;}
.artisti-rimanenti{font-weight: 700; font-size: 21px;}

.user-crediti-cnt{display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-family: "Barlow Semi Condensed", serif; font-size: 16px; font-weight: 400; color: var(--white);}
    .user-crediti-val{font-weight: 700; font-size: 25px;}

    .crediti-icon.crediti-icon-header{width: 35px; margin-left: 5px;}

#header-app-actions{justify-content: center;}

#header-app-actions button{border-radius: 5px; cursor: pointer; box-shadow: none; border: none; background-color: var(--yellow); padding: 15px 25px; color: var(--blue); margin: 0 auto; font-size: 18px; font-weight: 500; font-family: "Barlow Semi Condensed", serif;}

.header-left form{display: flex; align-items: center; gap: 20px;}
.header-left form .btn{display: block; margin: 0;}

.logo-header{width: 140px; margin: 0 auto;}


.lista-artisti-cnt{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 1%;
}
.artista-item-btn{
    width: 32%;
    background-color: #f8f9fa;
    color: #495057;
    border-radius: 60px;
    text-decoration: none;
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.artista-nome{font-weight: 700; font-size: 14px;}
.artista-valore{color: var(--yellow); font-family: "Barlow Semi Condensed", serif; font-weight: 700; font-size: 25px; margin-right: 5px;}

.artista-valore-cnt{
    display: flex;
    justify-content: center;
    align-items: center;
}

.artista-valore-cnt:after{content: ''; width: 25px; height: 25px; background-image: url(img/crediti.png); background-position: center; background-size: contain; background-repeat: no-repeat;}
.artista-item-btn.selected .artista-valore-cnt:after{background-image: url(img/check.svg); animation: rotation3d .5s ease forwards;}


.icona-coin img{
    width: 30px;
    height: auto;
    
}
.artista-item-btn.selected{
    background-color: var(--yellow);
    color: #fff;
}
.artista-item-btn.selected .artista-valore{color: var(--white);}

.artista-item-btn.disabled{
    opacity: .5;
}
.artista-item-btn.is_current_to_change{
    opacity: .75;
    cursor: not-allowed;
    background-color: var(--yellow);
    color: var(--blue);
}

.crediti-icon{
    width: 25px;
    height: auto;
}

.user-punti-cnt{display: flex; align-items: center; gap: 5px; color: var(--white); font-family: "Barlow Semi Condensed", serif; font-size: 19px;}
.user-icon{width: 21px;}
.user-punti-val{ font-weight: 700; font-size: 25px;}

.team-ruolo-item-img{width: 115px; height: 85px;}
.team-ruolo-item-img img{height: 100%; object-fit: contain;}

.team-ruolo-item-img, .team-ruolo-item-label, .team-ruolo-item-select-cnt{position: relative; z-index: 5;}

.team-ruoli-row{display: flex; justify-content: center; align-items: center; gap: 15%; margin: 40px 0; text-align: center;}

    .team-ruolo-item{display: flex; flex-direction: column; align-items: center; position: relative; width: 170px; aspect-ratio: 4 / 4;}
        .team-ruolo-item:after{content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--white); opacity: .5; border-radius: 50%;  background: transparent;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.35);
            z-index: 1;
            transform: translateY(-5px);
        }


        .team-ruoli-row:last-child{padding-bottom: 180px;}

        .team-ruolo-item {
            width: 48%;
            max-width: 190px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #id_capitano_component{position: relative; z-index: 80;}
        #id_titolare_1_component{position: relative; z-index: 70;}
        #id_titolare_2_component{position: relative; z-index: 60;}
        #id_riserva_1_component{position: relative; z-index: 50;}
        #id_riserva_2_component{position: relative; z-index: 40;}

        .team-ruolo-item input{display: none;}

        .team-ruolo-item-img {
            margin-bottom: 5px;
        }

        

        .team-ruolo-item-label {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            text-transform: uppercase;
            color: var(--white);
        }

        .team-ruolo-item-select-cnt {
            width: 150%;
            display: block;
            position: relative;
        }
        .team-ruolo-item-select-cnt:after{content: ''; width: 15px; height: 10px; background-image: url(img/down_arrow.svg); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; position: absolute; right: 13px; top: 18px; z-index: 10;}

        .team-ruolo-item-selected-value-cnt {
            width: 150%;
            height: 35px;
            display: none;
            position: relative;
            background-color: #FFF;
            color: #000;
            display: none;
            z-index: 20;
            border-radius: 5px;
            align-items: center;
            justify-content: center;
            padding: 0 38px;
            margin: 5px 0;
        }

        .team-ruolo-item-selected-value {
            font-weight: bold;
            font-size: 14px;
        }

        .team-ruolo-item-selected-reset-button {
            background-color: var(--yellow);
            color: var(--blue);
            padding: 5px 8px;
            margin: 5px;
            margin-left: auto;
            border-radius: 50%;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: -1px;
            text-align: center;
        }

        .team-ruolo-item-dropdown-open-btn {
            background-color: #FFF;
            color: #000;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            position: relative;
            height: 35px;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .team-ruolo-item-dropdown {
            width: 100%;
            display: block;
            display: none;
            background-color: #FFF;
            border-radius: 5px;
            margin: 5px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.251);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 20;
        }

        .select-artist-item {
            display: block;
            font-size: 14px;
            background-color: #FFF;
            color: var(--blue);
            padding: 15px 10px;
            border-bottom: 1px solid #e6e6e6;
            cursor: pointer;
            font-weight: 600;
        }
        .select-artist-item:last-child{border-bottom: none;}

        .select-artist-item:hover {
            background-color: #e8e8e8;
        }

        .select-artist-item.selected {
            background-color: #c4c4c4;
        }

        .testi-bianchi{text-align: center; color: var(--white); margin: 20px auto; border-top: 1px solid var(--white); padding-top: 20px;}
        .testi-bianchi h4{font-size: 28px;}
        .testi-bianchi h5{font-size: 16px; font-weight: 400; margin-top: 10px;}


        .row-full-flex{display: grid; grid-template-columns: 5fr 3fr; gap: 15px; margin: 20px;}



        .riepilogo-squadra-header{
            padding: 10px;
            margin-bottom: 2px;
            text-align: center;
            color: var(--white);
            font-family: "Barlow Semi Condensed", serif;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            border-radius: 5px 5px 0 0;
            background: transparent;
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.25);
            position: relative;
        }

        .btn-link-regolamento-absolute{right: 10px; top: 12px; position: absolute;}

        .riepilogo-squadra-list{
            padding: 10px;
            text-align: center;
            color: var(--white);
            font-family: "Barlow Semi Condensed", serif;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            border-radius: 0 0 5px 5px;
            background: transparent;
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.25);
        }

        .riepilogo-classifica-header{
            padding: 10px;
            margin-bottom: 2px;
            text-align: center;
            color: var(--white);
            font-family: "Barlow Semi Condensed", serif;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            border-radius: 5px 5px 0 0;
            background: transparent;
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.25);
        }


        .classifica-item{display: flex; gap: 2px; margin-bottom: 2px;}
            .classifica-item-user-info, .classifica-item-pos{
                color: var(--white);
                padding: 10px;
                font-family: "Barlow Semi Condensed", serif;
                font-weight: 700;
                font-size: 16px;
                text-transform: uppercase;
                background: transparent;
                backdrop-filter: blur(10px);
                --webkit-backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.25);
            }

            .classifica-item-pos{width: 5%; min-width: 50px; display: flex; align-items: center; justify-content: center;}
            .classifica-item-user-info{width: 95%; display: flex; align-items: center; justify-content: space-between;}

                .classifica-item-nome{font-weight: 600;}
                .classifica-item-punti{font-size: 24px; font-weight: 700;}

            .classifica-item-me .classifica-item-user-info, .classifica-item-me .classifica-item-pos{background-color:  rgba(255, 167, 0, 0.40);}



            .pagination{
                padding: 30px 0;
                width: 100%;
            }
            .pagination-wrapper{
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2px;
            }
            .page-link{
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                
                padding: 10px;
                font-family: "Barlow Semi Condensed", serif;
                font-weight: 700;
                font-size: 16px;
                text-transform: uppercase;
                background: transparent;
                backdrop-filter: blur(10px);
                --webkit-backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.25);
            }
            .page-link.active{
                background-color:  rgba(255, 167, 0, 0.40);
            }
            .page-link img{
                height: 16px;
                width: auto;
            }
            img.image-mirror{
                transform: scaleX(-1);
            }

            .riepilogo-punteggi-header{
                padding: 10px;
                margin-bottom: 2px;
                text-align: center;
                color: var(--white);
                font-family: "Barlow Semi Condensed", serif;
                font-weight: 700;
                font-size: 18px;
                text-transform: uppercase;
                border-radius: 5px 5px 0 0;
                background: transparent;
                backdrop-filter: blur(10px);
                --webkit-backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.55);
            }

            .punteggi-item{display: flex; gap: 2px; margin-bottom: 2px;}
            .punteggi-item-data, .punteggi-item-user-ico, .punteggi-item-user-info{
                color: var(--white);
                padding: 5px 7px;
                font-family: "Barlow Semi Condensed", serif;
                font-weight: 700;
                font-size: 16px;
                text-transform: uppercase;
                background: transparent;
                backdrop-filter: blur(10px);
                --webkit-backdrop-filter: blur(10px);
                background-color: rgba(255, 255, 255, 0.55);
                display: flex;
                align-items: center;
            }

            .punteggi-item-data{min-width: 60px;font-family: "Lato", serif; font-weight: 400; font-size: 12px; width: 10%; display: flex; justify-content: center; align-items: center;}
            .punteggi-item-user-info{flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 5px;}

                    .punteggi-item-user-ico-img img{height: 25px; width: 25px; object-fit: contain;}
                
                    .punteggi-item-punti{font-size: 24px; font-weight: 700;}
            

        .riepilogo-classifica-header-in{display: flex; justify-content: space-between; align-items: center;}
        .btn-link{font-family: "Lato", serif; font-weight: 400; font-size: 14px; text-transform: none; text-decoration: underline;}

        .btn-link-dettaglio-punteggio{color: var(--yellow);}

        .riepilogo-classifica-header-in h4{display: flex; align-items: center; gap: 5px;}
        .riepilogo-classifica-header-in h4 > a{width: 21px; display: block;}

        .riepilogo-classifica-empty{
            padding: 30px 10px;
            text-align: center;
            color: var(--white);
            font-family: "Barlow Semi Condensed", serif;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            border-radius: 0 0 5px 5px;
            background: transparent;
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.25);
        }
        .riepilogo-classifica-empty .txt{font-family: "Lato", serif; font-weight: 400; font-size: 14px; text-transform: none; }


        .team-artista-item-img{width: 100px; height: 70px; margin-top: 5px; margin-bottom: 3px;}
.team-artista-item-img img{height: 100%; object-fit: contain;}

.team-artista-item-img, .team-artista-item-tipo, .team-artista-item-info{position: relative; z-index: 5;}

.squadra-ruoli-row{display: flex; justify-content: center; align-items: center; gap: 15%; margin: 40px 0; text-align: center;}

    .team-artista-item{display: flex; flex-direction: column; align-items: center; position: relative; width: 170px; aspect-ratio: 4 / 4;}
        .team-artista-item:after{content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--white); opacity: .5; border-radius: 50%;  background: transparent;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            --webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.35);
            z-index: 1;
            transform: translateY(-5px) scale(1.1);
            aspect-ratio: 1 / 1;
        }

        .squadra-ruolo-item {
            width: 48%;
            max-width: 190px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

      
        .squadra-ruolo-item input{display: none;}

        .squadra-ruolo-item-img {
            margin-bottom: 5px;
        }

        

        .team-artista-item-tipo {
            font-size: 19px;
            font-weight: bold;
            margin-bottom: 5px;
            text-transform: uppercase;
            color: var(--white);
        }

        
        .team-artista-item-info{width: 140%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 3px; background-color: var(--white); color: var(--blue); height: 55px; border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);}
            .team-artista-item-nome{font-family: "Barlow Semi Condensed", serif; padding: 0 15px; font-weight: 700; font-size: 19px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        .team-artista-item-valore{font-weight: 700; font-size: 16px; font-family: "Barlow Semi Condensed", serif;}

            .team-artista-item-punti{color: var(--green); font-family: "Barlow Semi Condensed", serif;  margin-bottom: 4px;}
            .team-artista-item-punti-negativo{color: var(--red);}

            .positivo{color: var(--green); text-shadow: 1px 1px 6px #ffffff2e;}
            .negativo{color: var(--red); text-shadow: 1px 1px 6px #ffffff2e;;}

        .team-artista-item-change-button{background-color: var(--red); display: flex; align-items: center; border-radius: 5px; overflow: hidden; position: relative; z-index: 30; margin-top: -8px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.251); transition: transform .4s ease;}
        .team-artista-item-change-button:hover{transform: translate3d(0, -3px, 0); color: var(--white);}

        .team-artista-item-label{font-size: 14px; text-transform: none; font-family: "Lato", serif; padding: 8px; }

        .team-artista-item-valore{display: flex; align-items: center; font-size: 18px; color: var(--yellow); gap: 5px; background-color: var(--blue); padding: 8px; margin: 0;}


        .back-row{width: 95%; max-width: 1000px;margin: 20px auto;}
        .btn-back{ display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: bold;}
        .btn-back img{width: 12px; display: block; transition: transform .4s ease;}
        .btn-back:hover img{transform: translateX(-5px);}

            .container-regolamento-completo .btn-primary{width: 100px; text-align: center;}




            



@keyframes rotation3d {
    from {transform: rotateY(90deg);}
    to {transform: rotateY(0deg);}
  }



  @media screen and (max-width: 900px) {

    .row-full-flex{gap: 10px;}
    .team-artista-item-img{width: 60px; height: 40px;}
    .team-artista-item{width: 125px;}
    .team-artista-item-info{width: 135%;}

  }
  @media screen and (max-width: 640px) {

    .testi-regolamento-cnt{padding: 20px;}
    
    .header-app-in{height: 125px; flex-wrap: wrap; flex-direction: column;}

    .header-app-game-home .header-app-in{height: 100px; flex-wrap: nowrap; flex-direction: row; padding: 0 10px;}

    .header-left, .header-center, .header-right {
        flex: auto;
    }

    .header-app-game-home .header-left, .header-app-game-home .header-center, .header-app-game-home .header-right{flex: 1;}

    .header-center h5{font-size: 14px;}
    .user-crediti-cnt{justify-content: center;}

    .user-icon{width: 18px;}
    .user-punti-cnt{font-size: 15px; flex-wrap: wrap; gap: 3px;}
    .user-punti-val{font-size: 21px;}

    .header-app-game-home .user-crediti-cnt{justify-content: flex-end;}

    .artista-item-btn{width: 100%;}

    .team-ruoli-row{flex-direction: column;}
    .team-ruolo-item{margin: 20px 0;}
    .team-ruolo-item-img {
        width: 100px;
        height: 70px;
    }


    .header-app-game-home .crediti-icon.crediti-icon-header{width: 25px; margin-left: 2px;}
    .header-app-game-home .user-crediti-val{font-size: 21px;}


    .row-full-flex{grid-template-columns: auto; gap: 20px;}

    .squadra-ruoli-row{flex-direction: column; margin: 0;}

    .team-artista-item-img{width: 100px; height: 70px;}

    .team-artista-item{margin: 40px 0; width: 170px;}

    .team-artista-item-info{width: 150%;}

    
    .header-app-change-items .header-app-in{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 5px 0;
        height: auto;
    }

    .header-app-change-items .header-left form{justify-content: center;}    

    .btn-link-regolamento-absolute{font-size: 12px; top: 14px;}

    .punteggi-item-user-ico{display: none;}
    


  }