@font-face {
    font-family: 'Benfica-letters-2324';
    src: url('../../fonts/Benfica2023_24.woff2');
}

/* SEASON 25/26 */
@font-face {
    font-family: 'Benfica-NumbersHome-2526';
    src: url('../../fonts/NUMHOMESLB25-26.otf') format('opentype');
}

@font-face {
    font-family: 'Benfica-NumbersAway-2526';
    src: url('../../fonts/NUMAWAYSLB25-26.otf') format('opentype');
}

@font-face {
    font-family: 'Benfica-NumbersThird-2526';
    src: url('../../fonts/NUMTHIRDSLB25-26.otf') format('opentype');
}
.no-visible {
    opacity: 0;
    pointer-events: none;
}

.disabled {
    display: none !important;
}


.line {
    position: absolute;
    width: 100%;
    border: 1px solid #242424;
    background-color: #242424;
}

    .line:first-of-type {
        transform: rotateZ(135deg);
    }

    .line:last-of-type {
        transform: rotateZ(-135deg);
    }

p a:hover {
    text-decoration: none;
}

p.link a:hover svg.arrow.reverse {
    transform: ScaleX(-1) translateX(-5px) !important;
}

.tshirt-customizer.disabled {
    display: none;
}

.tshirt-customizer {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    background-color: #f4f4f4;
    z-index: 10000;
    left: 0;
    overflow: auto;
}

    .tshirt-customizer .top {
        position: relative;
        padding: 24px 15px 17px 15px;
        display: flex;
        flex-flow: column;
        /*gap: 12px;*/
        height: calc(100vh - 190px);
        /*justify-content: space-between;*/
    }

        .tshirt-customizer .top a.link.panoramic {
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            position: relative;
            z-index: 1;
            width: 50px;
            height: 50px;
            margin-top: -45px;
        }

        .tshirt-customizer .top svg.panoramic-svg {
            width: 50px;
            height: 50px;
        }


    .tshirt-customizer .header {
        display: flex;
        justify-content: space-between;
        min-height: auto;
        padding-bottom: 12px;
    }

        .tshirt-customizer .header .info-wrapper p.pre-venda {
            font-size: 14px;
            font-weight: bold;
            line-height: 20px;
            color: #c30000;
            margin-bottom: 5px;
        }

        .tshirt-customizer .header .info-wrapper p.title {
            font-size: 16px;
            line-height: 20px;
            padding-top: 0;
            margin: 0;
            font-weight: 500;
        }

        .tshirt-customizer .header .info-wrapper .toggle-wrapper p.toggle {
            font-size: 14px;
            line-height: 22px;
            padding-top: 0;
            width: fit-content;
            cursor: pointer;
            align-items: center;
        }

        .tshirt-customizer .header .info-wrapper .toggle-wrapper.active p.toggle svg.arrow {
            transform: rotate(-90deg);
        }

        .tshirt-customizer .header .close-button {
            position: relative;
            width: 24px;
            height: 24px;
            cursor: pointer;
            transition: all 200ms ease-in-out;
        }

            .tshirt-customizer .header .close-button .line {
                top: 50%;
            }

            .tshirt-customizer .header .close-button:hover {
                transform: rotateZ(90deg);
            }

                .tshirt-customizer .header .close-button:hover .line {
                    border: 1px solid #c30000;
                    background-color: #c30000;
                }

        .tshirt-customizer .header .icons {
            display: flex;
            align-items: center;
            gap: 20px;
            height: fit-content;
        }


        .tshirt-customizer .header .info-wrapper .toggle-wrapper {
            position: relative;
        }

            .tshirt-customizer .header .info-wrapper .toggle-wrapper .price-table {
                position: absolute;
                background-color: #ffffff;
                display: flex;
                flex-flow: column;
                gap: 10px;
                padding: 20px;
                width: 100%;
                max-width: 345px;
                min-width: 345px;
                top: 30px;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: all 300ms ease-in-out;
                z-index: 9;
            }

            .tshirt-customizer .header .info-wrapper .toggle-wrapper.active .price-table {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }

            .tshirt-customizer .header .info-wrapper .toggle-wrapper .price-table .price-table-line {
                /*display: flex;*/
                justify-content: space-between;
                font-size: 14px;
                display: grid;
                grid-template-columns: 82% 18%;
            }

                .tshirt-customizer .header .info-wrapper .toggle-wrapper .price-table .price-table-line > *:nth-child(even) {
                    text-align: right;
            }

                .tshirt-customizer .header .info-wrapper .toggle-wrapper .price-table .price-table-line .wallet {
                    font-size: 12px;
                    line-height: 16px;
                }

                .tshirt-customizer .header .info-wrapper .toggle-wrapper .price-table .price-table-line.customized {
                    display: none;
                    justify-content: space-between;
                    font-size: 14px;
                }

        .tshirt-customizer .header .info-wrapper .price-table .price-table-line.items {
            display: none;
            font-size: 12px;
            padding-left: 10px;
            margin-top: -2px;
        }

    .tshirt-customizer .top-step {
        position: relative;
        width: fit-content;
        margin: 0 auto;
    }

        .tshirt-customizer .top-step .nome, .tshirt-customizer .top-step .num {
            position: absolute;
            right: 50%;
            transform: translateX(50%);
            text-transform: uppercase;
            color: #ffffff;
            font-weight: 500;
            z-index: 99;
        }

        .tshirt-customizer .top-step:not(.away) .nome {
            right: 49%;
        }

        .tshirt-customizer .top-step .nome {
            font-family: 'Benfica-letters-2324';
            white-space: nowrap;
        }

        .tshirt-customizer .top-step .num {
            font-family: 'Benfica-NumbersHome-2526';
            /*-webkit-text-stroke: 2px #C73534;*/
        }

        .tshirt-customizer .top-step .nome {
            top: 21%;
            font-size: 10vw;
            text-align: center;
        }

        .tshirt-customizer .top-step .num {
            top: 23%;
            right: 50.0%;
            font-size: 34vw;
            letter-spacing: -3px;
        }


        /** FONT AWAY **/
        .tshirt-customizer .top-step.away .nome, .tshirt-customizer .top-step.away .num {
            font-weight: 400;
            color: #000000;
        }

        .tshirt-customizer .top-step.away.red .nome, .tshirt-customizer .top-step.away.red .num {
            font-weight: 400;
            color: #C02434;
        }

        .tshirt-customizer .top-step.away .nome {
            font-family: 'Benfica-letters-2324';
            white-space: nowrap;
        }

/*        .tshirt-customizer .top-step.away .num {
            font-family: 'Benfica-NumbersAway-2526';
            -webkit-text-fill-color: black;
            -webkit-text-stroke: 2px #71B857;
        }*/

        .tshirt-customizer .top-step.away .nome {
            /*top: 14%;*/
            /*font-size: 7vw;*/
            top: 16%;
        }

        .tshirt-customizer .top-step.away .num {
            /*top: 17%;*/
            top: 19%;
            right: 50%;
            font-size: 34vw;
            letter-spacing: -2px;
        }

        /*.tshirt-customizer .top-step.away.white .nome {
            top: 18%;
        }*/

        .tshirt-customizer .top-step.away.white .num {
            font-family: 'Benfica-NumbersAway-2526';
            /*top: 17%;*/
            top: 19%;
            right: 50.5%;
            -webkit-text-fill-color: #000;
            -webkit-text-stroke: 0px white;
        }

        .tshirt-customizer .top-step.away.red .num {
            font-family: 'Benfica-NumbersAway-2526';
            top: 17%;
           /* top: 19%;*/
            right: 50.5%;
            -webkit-text-fill-color: #C22C33;
            -webkit-text-stroke: 0px white;
        }

        .tshirt-customizer .top-step.away.white .nome, .tshirt-customizer .top-step.away.white .num {
            color: #000;
        }



        .tshirt-customizer .top-step .shirt-badge {
            position: absolute;
            height: auto;
        }

        .tshirt-customizer .top-step.badges .shirt-badge.champion {
            position: absolute;
            right: 55%;
            transform: translateX(50%);
            top: 45%;
        }

        .tshirt-customizer .top-step.badges .shirt-badge.uefa {
            position: absolute;
            right: 55%;
            transform: translateX(50%) rotate(-1deg);
            top: 63%;
        }

        .tshirt-customizer .top-step.badges .shirt-badge.bwin {
            position: absolute;
            right: 55%;
            transform: translateX(50%);
            top: 55%;
        }


    .tshirt-customizer .bottom {
        border-top: solid 1px #bebebe;
        padding-top: 20px;
        display: flex;
        flex-flow: column;
        /*gap: 30px;*/
        justify-content: space-between;
        height: 190px;
        /*position: relative;*/
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f4f4f4;
    }

        .tshirt-customizer .bottom .bot-step {
            display: flex;
            justify-content: center;
            padding: 0px 15px;
            align-items: end;
        }

            .tshirt-customizer .bottom .bot-step .link.no-visible {
                width: 0px;
                height: 24px;
            }

            .tshirt-customizer .bottom .bot-step .link.next {
                position: absolute;
                right: 14px;
            }

            .tshirt-customizer .bottom .bot-step .link.last {
                position: absolute;
                left: 14px;
            }


        .tshirt-customizer .bottom p.resume {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

            .tshirt-customizer .bottom p.resume svg {
                width: 20px;
                height: 16px;
                margin-right: 10px;
            }



        .tshirt-customizer .bottom p.link a {
            color: #242424;
        }

        .tshirt-customizer .bottom p.link svg.arrow {
            stroke: #242424;
            stroke-width: 7px;
            margin-bottom: 1.5px;
        }

            .tshirt-customizer .bottom p.link svg.arrow.reverse {
                transform: ScaleX(-1) translateX(0) !important;
                margin-right: 10px;
                margin-left: 0px;
            }

        .tshirt-customizer .bottom p.link a:hover svg.arrow.reverse {
            transform: ScaleX(-1) translateX(5px) !important;
        }

        .tshirt-customizer .bottom .customizations {
            display: inline-flex;
            justify-content: center;
            gap: 12px;
            padding: 0 15px;
        }

        .tshirt-customizer .bottom .scrollable-area {
            overflow: auto;
            height: 65px;
        }

        .tshirt-customizer .bottom .customizations.list {
            justify-content: flex-start;
            gap: 10px;
            user-select: none;
        }

            .tshirt-customizer .bottom .customizations.list .player {
                position: relative;
            }

                .tshirt-customizer .bottom .customizations.list .player label {
                    position: absolute;
                    width: 40px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: normal;
                }

        .tshirt-customizer .bottom .customizations .frame, .tshirt-customizer .bottom.tamanho .customizations p {
            width: 40px;
        }


        .tshirt-customizer .bottom .customizations p {
            width: 77px;
        }

            .tshirt-customizer .bottom .customizations .frame.unavailable, .tshirt-customizer .bottom .customizations p.unavailable {
                opacity: 0.4;
                pointer-events: none;
            }

        .tshirt-customizer .bottom .customizations .frame, .tshirt-customizer .bottom .customizations p, .tshirt-customizer .bottom .customizations input {
            border: solid 1px #bebebe;
            margin: 0;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            font-size: 13px;
            font-weight: bold;
            min-width: 40px;
            cursor: pointer;
        }

            .tshirt-customizer .bottom .customizations .frame.active, .tshirt-customizer .bottom .customizations p.active {
                border: solid 1px #242424;
            }

            .tshirt-customizer .bottom .customizations p.no-type {
                position: relative;
                width: 40px;
            }

                .tshirt-customizer .bottom .customizations p.no-type .line {
                    width: 29px;
                    border-width: 0;
                    height: 1.5px;
                }

        .tshirt-customizer .bottom .customizations .inputs {
            height: 40px;
            position: relative;
        }

            .tshirt-customizer .bottom .customizations .inputs label {
                font-size: 12px;
                font-weight: normal;
                text-transform: uppercase;
                line-height: 17px;
                margin: 0;
                position: absolute;
                top: -17px;
                font-family: 'Roboto Condensed', sans-serif;
            }

            .tshirt-customizer .bottom .customizations .inputs.name input {
                width: 256px;
            }

            .tshirt-customizer .bottom .customizations .inputs.num input {
                width: 76px;
            }

            .tshirt-customizer .bottom .customizations .inputs input {
                font-size: 18px;
                font-weight: normal;
                padding-left: 20px;
            }

    .tshirt-customizer .buttons {
        display: flex;
    }

        .tshirt-customizer .buttons > * {
            width: 100%;
            border: none;
        }

        .tshirt-customizer .buttons .button.dark {
            width: 100%;
            height: 55px;
        }

            .tshirt-customizer .buttons .button.dark.grey {
                background-color: #bebebe !important;
                pointer-events: none;
            }

        .tshirt-customizer .buttons p.link {
            display: flex;
            justify-content: center;
            height: 100%;
            align-items: center;
        }


    .tshirt-customizer .panoramic-view .img-wrapper {
        display: flex;
        flex-flow: column;
        height: 100vh;
        justify-content: flex-end;
    }

        .tshirt-customizer .panoramic-view .img-wrapper img {
            margin: 0;
        }

            .tshirt-customizer .panoramic-view .img-wrapper img.shadow {
                min-height: 200px;
                object-fit: cover;
            }

    .tshirt-customizer .panoramic-view .header {
        justify-content: flex-end;
        padding: 24px 16px;
        position: absolute;
    }

    .tshirt-customizer .panoramic-view .panoramic-svg {
        position: absolute;
        width: 50px;
        height: 50px;
        right: 50%;
        transform: translateX(50%);
        bottom: 140px;
        z-index: 10;
        fill: #ffffff;
    }

        .tshirt-customizer .panoramic-view .panoramic-svg.grey {
            fill: #bebebe;
        }

    .tshirt-customizer .panoramic-view .layer {
        height: 100vh;
        position: absolute;
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
        display: none;
    }

        .tshirt-customizer .panoramic-view .layer.active {
            display: block;
        }

        .tshirt-customizer .panoramic-view .layer p {
            color: #ffffff;
            position: absolute;
            bottom: 0;
            text-align: center;
            right: 50%;
            transform: translateX(50%);
            bottom: 80px;
        }


.personalization-resume {
    position: absolute;
    background-color: white;
    z-index: -1;
    padding: 53px 14px 74px 14px;
    width: 100%;
    bottom: 55px;
    transition: all 500ms ease-in-out;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}

    .personalization-resume.active {
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        z-index: 9910000;
    }

    .personalization-resume .line-wrapper {
        width: 100%;
        position: absolute;
        height: 40px;
        top: 0;
        left: 0;
    }

        .personalization-resume .line-wrapper .line {
            transform: rotateZ(0deg);
            width: 83px;
            border-width: 0;
            height: 2px;
            right: 50%;
            transform: translateX(50%);
            top: 15px;
        }

    .personalization-resume .resume-wrapper {
        display: flex;
        flex-flow: column;
        gap: 40px;
    }

        .personalization-resume .resume-wrapper .resume-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

            .personalization-resume .resume-wrapper .resume-line > *:first-of-type {
                font-size: 18px;
                font-weight: bold;
            }

            .personalization-resume .resume-wrapper .resume-line > p {
                height: fit-content;
            }

                .personalization-resume .resume-wrapper .resume-line > p:last-of-type:hover {
                    color: #c30000;
                }

                .personalization-resume .resume-wrapper .resume-line > p.grey {
                    color: #888888;
                }

            .personalization-resume .resume-wrapper .resume-line img {
                height: 36px;
                margin: 0;
            }

                .personalization-resume .resume-wrapper .resume-line img.disabled {
                    display: none;
                }

            .personalization-resume .resume-wrapper .resume-line .img-badges.disabled {
                display: none;
            }

            .personalization-resume .resume-wrapper .resume-line p.disabled {
                display: none;
            }

            .personalization-resume .resume-wrapper .resume-line > div {
                display: flex;
                gap: 8px;
            }


/*POSICIONAMENTO INPUT NO CASACO DA LINHA DE TREINO*/
/*.tshirt-customizer.training .top-step .nome {
    left: 34%;
    top: 28%;
    font-size: 14px;
    transform: rotate3d(1, 1, 1, -15deg);
    text-align: center;
}*/


.tshirt-customizer.training .bottom .customizations .inputs.name input {
    width: 110px;
}

.tshirt-customizer.training .buttons > * {
    width: 100%;
}
/*POSICIONAMENTO INPUT NO CASACO DA LINHA DE TREINO*/

.tshirt-customizer.custom-tshirt .resume-wrapper .resume-line:nth-child(1),
.tshirt-customizer.custom-tshirt .resume-wrapper .resume-line:nth-child(2),
.tshirt-customizer.custom-tshirt .resume-wrapper .resume-line:nth-child(3) {
    pointer-events: none;
}

.tshirt-customizer .video-tutorial {
    overflow: hidden;
    background-color: #242424;
}

    .tshirt-customizer .video-tutorial .video-wrapper {
        height: 100vh;
    }

        .tshirt-customizer .video-tutorial .video-wrapper video {
            height: 100%;
            width: 100%;
        }

    .tshirt-customizer .video-tutorial .header {
        justify-content: flex-end;
        padding: 24px 16px;
        position: absolute;
    }

        .tshirt-customizer .video-tutorial .header .close-button .line {
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }

@media (min-width: 992px) {
    .tshirt-customizer .video-tutorial .header {
        padding: 30px 43px 0 43px;
    }

    .tshirt-customizer .top {
        padding: 30px 43px 0px 43px;
        height: calc(100vh - 135px);
        gap: 0;
    }

        .tshirt-customizer .top a.link.panoramic {
            margin-top: -80px;
        }


    .tshirt-customizer .top-step img {
        height: calc(500 / 768 * 100vh);
    }

        .tshirt-customizer .top-step img:not(.shirt-badge) {
            min-height: 430px;
        }

    .tshirt-customizer .header .info-wrapper p.title {
        padding-top: 0px;
    }

    .tshirt-customizer .bottom {
        padding-top: 30px;
        /*padding-top: calc(30 / 768 * 100vh);*/
        height: 135px;
        gap: 0;
        justify-content: space-between;
        padding-bottom: 20px;
        /*padding-bottom: calc(20 / 768 * 100vh);*/
    }

        .tshirt-customizer .bottom p.resume:hover {
            color: #c30000;
        }

            .tshirt-customizer .bottom p.resume:hover svg {
                cursor: pointer;
                fill: #c30000;
            }

        .tshirt-customizer .bottom .bot-step {
            padding: 0px 43px;
        }

            .tshirt-customizer .bottom .bot-step .link.next {
                position: absolute;
                right: 43px;
            }

            .tshirt-customizer .bottom .bot-step .link.last {
                position: absolute;
                left: 43px;
            }


    .tshirt-customizer .buttons {
        position: absolute;
        right: 43px;
        gap: 30px;
        bottom: 12px;
    }

        .tshirt-customizer .buttons > * {
            width: auto;
        }

        .tshirt-customizer .buttons .button.dark {
            width: 207px;
        }

    .tshirt-customizer .bottom .customizations {
        /*padding: 0 43px;*/
        /*margin: 0 43px;*/
    }

        .tshirt-customizer .bottom .customizations .inputs.name input {
            width: 166px;
        }

    .tshirt-customizer .bottom .scrollable-area {
        margin-bottom: -15px;
        width: calc(100% - 443px);
        margin-left: 43px;
    }

    .tshirt-customizer .bottom .customizations.list {
        /*width: calc(100% - 443px);*/
        /*height: 60px;*/
    }

    .tshirt-customizer .top-step.badges .shirt-badge.champion {
        /*width: 107px;
        right: 49.5%;*/
        /*height: 103px;*/
    }

    .tshirt-customizer .top-step.badges .shirt-badge.uefa {
        /*width: 146px;
        right: 49%;*/
        /*height: 123px;*/
    }


    .tshirt-customizer .top-step.badges .shirt-badge.bwin {
        /*width: 96px;
        right: 50%;
        height: auto;*/
    }

    .tshirt-customizer .panoramic-view .panoramic-svg {
        bottom: calc(140/768 * 100vh);
    }

    .tshirt-customizer .panoramic-view .img-wrapper img {
        margin: auto;
        width: calc(482/768 * 100vh);
        /*margin-top: 0;
        padding-top: 90px;*/
    }

        .tshirt-customizer .panoramic-view .img-wrapper img.shadow {
            min-height: auto;
            margin: auto;
            object-fit: cover;
        }

    .personalization-resume {
        width: 335px;
        height: 100vh;
        bottom: auto;
        top: 0;
        padding: 54px 43px;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }

        .personalization-resume.active {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .personalization-resume .line-wrapper {
            display: none;
        }




    .tshirt-customizer .top-step .nome {
        top: 20%;
        /*font-size: 64px;*/
        font-size: 56px;
    }

    .tshirt-customizer .top-step .num {
        top: 24%;
        right: 50%;
        font-size: 185px;
        letter-spacing: -3px;
    }


    /** FONT AWAY **/
    /*.tshirt-customizer .top-step.away .nome {
        top: 21%;
        font-size: 38px;
    }*/

    .tshirt-customizer .top-step.away .num {
        top: 17%;
        right: 51%;
        font-size: 200px;
        letter-spacing: -3px;
    }

    /*.tshirt-customizer .top-step.away.white .nome {
        top: 18%;
        font-size: 38px;
    }*/

    .tshirt-customizer .top-step.away.white .num {
        top: 17%;
        font-size: 200px;
        letter-spacing: -3px;
    }


    .tshirt-customizer .bottom .customizations .frame:hover, .tshirt-customizer .bottom .customizations p:hover {
        border: solid 1px #242424;
    }




    /*POSICIONAMENTO INPUT NO CASACO DA LINHA DE TREINO*/
    /*.tshirt-customizer.training .top-step .nome {
        left: 41%;
        top: 28%;
        font-size: 25px;
    }*/

    /*.tshirt-customizer.training .top-step .nome {
        text-align: center;
        left: 42.5%;
        top: 27%;
        font-size: 25px;
        transform: rotate3d(1, 1, 1, -15deg);
    }*/
    /*POSICIONAMENTO INPUT NO CASACO DA LINHA DE TREINO*/

    .tshirt-customizer .bottom .scrollable-area::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .tshirt-customizer .bottom .scrollable-area::-webkit-scrollbar-track {
        background: #d9d9d9;
    }

    .tshirt-customizer .bottom .scrollable-area::-webkit-scrollbar-thumb {
        background: #bebebe;
        min-width: 150px;
        cursor: grab;
    }
}

.tshirt-customizer .bottom.tamanho.calculating {
    display: initial !important;
    opacity: 0;
    visibility: hidden;
}

.tshirt-customizer .bottom.tamanho .childSize p {
    width: initial;
    min-width: initial;
    padding: 0 10px;
    white-space: nowrap;
}

.tshirt-customizer .bottom.tamanho .childSize {
    display: flex;
    flex-flow: nowrap;
    justify-content: center;
    gap: 15px;
    padding: 20px 15px;
    overflow: scroll;
}

    .tshirt-customizer .bottom.tamanho .childSize.justify-left {
        justify-content: flex-start;
    }