@import url('calendario-global.css');

.tabla-calendario {
    border-collapse: collapse;
    padding: 0;
    margin: 0;

    &>thead {
        background-color: var(--componet-primary-color);
        color: var(--componet-primary-color-text);

        &>tr {

            &>th {
                border: none !important;
                padding: 18px 10px;
            }

            &>th:first-child {
                text-align: left;
                padding-left: 36px;
            }
        }

    }

    &>tbody {

        &>tr:nth-child(odd) {
            background-color: var(--main-bg-color);

        }

        &>tr:nth-child(even) {
            background-color: var(--main-content-color);
        }

        &>tr {

            &>td:first-child {

                padding-left: 36px;
            }

            &>td {
                border: none !important;

                &>.equipos-col {
                    display: flex;

                    &>.escudos-partido {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        margin-right: 10px;

                        &>a {
                            min-width: 43px;
                            min-height: 43px;
                            display: flex;
                            border-radius: 36px;
                            background-color: white;
                            justify-content: center;
                            align-content: center;
                            align-items: center;

                            &>img {
                                width: 34px;
                                min-width: 34px;
                                min-height: 34px;
                                display: block;
                                border-radius: 36px;
                            }
                        }
                    }
                }

                &>.marcador-cont {
                    display: flex;
                    justify-content: center;
                    &>.custom-col {
                        display: flex;
                        padding: 8px 16px;
                        justify-content: center;
                        align-items: center;
                        gap: 8px;
                        align-self: stretch;
                        border-radius: 50px;
                        background: #FFF;
                        max-width: 90px;
                        min-width: 90px;

                        &>.resultado {
                            color: #050505;
                            font-variant-numeric: lining-nums proportional-nums;
                            font-family: Syne;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 20px;
                            /* 142.857% */
                            letter-spacing: -0.028px;
                            text-transform: uppercase;
                        }
                    }
                }




                &>.custom-col-circle {
                    max-width: 36px;
                    max-height: 36px;
                    display: flex;
                    padding: 9px;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    border-radius: 50px;
                    background: #FFF;
                }

            }

            &>.fecha {
                &>div:nth-child(1) {
                    color: #666;
                    font-variant-numeric: lining-nums proportional-nums;
                    font-family: Syne;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 20px;
                    /* 142.857% */
                    letter-spacing: -0.028px;
                    text-transform: uppercase;
                }

                &>div:nth-child(2) {
                    color: #050505;
                    font-variant-numeric: lining-nums proportional-nums;
                    font-family: Syne;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 20px;
                    /* 142.857% */
                    letter-spacing: -0.028px;
                    text-transform: uppercase;
                }
            }

            &>.marcador,
            .fecha
             {
                text-align: center;
            }
            &>.lugar {
                text-align: left;
            }

            &>.col-lugar {

                max-width: 166px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}