.compare__popup{
    position: relative;
    max-width: 1200px;
    width: 100%;
    background: var(--white);
    padding: 1rem 0.625rem 1rem 2rem;
    border-radius: 20px;
}

.max-vertical-overflow{
    max-height: 658px;
    padding-right: 19px;
    overflow-x: hidden;
    overflow-y: auto;
}

.sticky__header{
    padding-right: 19px;
}

.col-horizontal{
    /*border-bottom: 1px solid #E6E9F2;*/
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 172px 193.8px 193.8px 193.8px 193.8px 193.8px;
}
.col-horizontal:not(:first-child){
    border-top: 1px solid #E6E9F2;
}

.col-head--grid{
    display: grid;
    justify-content: space-between;
    align-items: self-start;
    grid-template-columns: 172px 193.8px 193.8px 193.8px 193.8px 193.8px;
    border-bottom: 1px solid #E6E9F2;
}

.col-head--grid.col-4,
.col-horizontal.col-4{
    grid-template-columns: 172px repeat(4,242px);
}

.col-head--grid.col-3,
.col-horizontal.col-3{
    grid-template-columns: 172px repeat(3,322px);
}

.col-head--name-flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tariff_reg_btn-head{
    padding: 0.375rem 0.75rem !important;
    width: 100%;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
}


.col-head-name{
    padding: 1rem;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: var(--heading-color);
    text-align: left;
}

.col-head-tarriff{
    padding: 1rem 0.75rem 1rem 0.75rem;
}

.col-head--name{
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--heading-color);
}

.col-horizontal:hover{
    cursor: pointer;
    background: #F5F7FC;
}

.col-horizontal .col-name{
    padding: 1rem 0.3125rem 1rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: var(--heading-color);
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-word;


    .col-text-breakword.text-dotted{
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-color: #969AA5;
        text-decoration-thickness: 5.5%;
    }

    .property--sticker{
        /*display: inline-block;*/
        /*margin-left: 6px;*/
        position: relative;
        bottom: 2px;
    }
}

.col-horizontal .col-props{
    padding: 1rem 1.25rem;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--heading-color);
    min-height: 54px;

    display: flex;
    justify-content: center;

    svg{
        display: flex;
        align-self: center;
    }
}

.col-head-section-sticker-container{
    margin-top: 6px;
    font-weight: 600;
    font-size: 9px;
    line-height: 12px;
    text-transform: uppercase;
    max-width: 98px;
}

.col-head-section-sticker-container.fill-grey{
    background: #EDF0F7;
}

.col-head-section-sticker-container.border-r{
    border-radius: 4px;
}

.col-head-section-sticker-container.has-padding{
    padding: 2px 4px;
}

@media (max-width: 1240px) {
    .compare__popup{
        max-width: 100%;
        width: calc(100vw - 40px);
    }
    .col-head--grid,
    .col-horizontal{
        grid-template-columns: calc(172/1200 * 100%) repeat(5, calc(193/1200 * 100%));
    }

    .col-head--grid.col-4,
    .col-horizontal.col-4{
        grid-template-columns: calc(172/1200 * 100%) repeat(4, calc(242/1200 * 100%));
    }

    .col-head--grid.col-3,
    .col-horizontal.col-3{
        grid-template-columns: calc(172/1200 * 100%) repeat(3, calc(322/1200 * 100%));
    }

}

@media (max-width: 1024px) {
    .compare__popup{
        max-width: 100%;
        width: 900px;
    }

    .col-head--grid,
    .col-horizontal{
        grid-template-columns: calc(188/900 * 100%) repeat(5, calc(140/900 * 100%));
        justify-content: start;
    }

    .col-head--grid.col-4,
    .col-horizontal.col-4{
        grid-template-columns: calc(172/900 * 100%) repeat(4, calc(180/900 * 100%));
        justify-content: start;
    }

    .col-head--grid.col-3,
    .col-horizontal.col-3{
        grid-template-columns: calc(172/900 * 100%) repeat(3, calc(242/900 * 100%));
        justify-content: start;
    }

}

@media (max-width: 991px) {
    .compare__popup{
        max-width: 100%;
        width: calc(100vw - 32px);
    }

    .col-head--grid.col-4,
    .col-horizontal.col-4{
        grid-template-columns: calc(172/890 * 100%) repeat(4, calc(180/890 * 100%));
        justify-content: start;
    }

    .col-head--grid.col-3,
    .col-horizontal.col-3{
        grid-template-columns: calc(172/890 * 100%) repeat(3, calc(242/890 * 100%));
        justify-content: start;
    }
}

@media (max-height: 900px) {
    .max-vertical-overflow{
        max-height: calc(100vh - 300px)
    }
}

@media (max-height: 600px) {
    .max-vertical-overflow{
        max-height: calc(100vh - 500px)
    }
}


@media (max-width: 768px) {
    .compare__popup{
        max-width: 100vw;
        width: 100vw;
        height: 100%;
        border-radius: 20px 20px 0 0;
        padding: 1rem 0 0.75rem 0;
    }
    .col-head--grid,
    .col-horizontal{
        grid-template-columns: 172px repeat(5, 125px);
        overflow-x: auto;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
    }

    .col-head--grid.col-3,
    .col-horizontal.col-3{
        grid-template-columns: 172px repeat(3, 187px);
    }

    .col-head--grid.col-4,
    .col-horizontal.col-4{
        grid-template-columns: 172px repeat(4, 145px);
    }

    .max-vertical-overflow,
    .sticky__header{
        padding-right: 0;
    }

    .max-vertical-overflow{
        max-height: calc(100vh - 200px)
    }

    .col-head-name{
        padding: 1.25rem 1rem 1rem 1.25rem;
    }

    .col-horizontal .col-name{
        padding: 1rem 0.3125rem 1rem 1.25rem;
    }

    .absolute--tooltip{
        .tooltip-text{
            max-width: 230px;
        }
    }
}

@media (max-width: 575px) {
    .col-head--grid.col-3,
    .col-horizontal.col-3{
        grid-template-columns: 172px repeat(3, 125px);
    }

    .col-head--grid.col-4,
    .col-horizontal.col-4{
        grid-template-columns: 172px repeat(4, 125px);
    }
}

@media (max-width: 400px) {
    .col-head-name{
        font-weight: 600;
        font-size: 15px;
        line-height: 24px;
        color: #969AA5;
    }
}