.tracker-compare {
    margin-top: 60px;
    & img.white-wide-logo
    {
        width: 210px;
        height: 32px;
        margin-top: 4px;
        margin-right: 16px;
        content:url("/static/tracker-compare/logo-white-wide.svg");
    }
    & .panel-screen {
        display: flex;
        z-index: 1;
        margin: 40px;
        min-width: 380px;
        & img {
            width: 100%;
            max-width: 420px;
        }
    }
    & .compare-benefit-block {
        margin-top: 48px;
        margin-bottom: 48px;
        width: 100%;
        //max-width: 1080px;
        height: 360px;
        flex-wrap: wrap;
    }
    & .compare-title-content {
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        width: 100%;
        height: 100%;
        min-width: 500px;
        max-width: 640px;
        margin-left: 80px;
        margin-top: 40px;
        line-height: 1.55;
        & p {
            margin-top: 16px;
            text-align: left;
            font-size: 16px;
            letter-spacing: 0.03em;
            width: 100%;
        }
        & .compare-benefit-title {
            font-size: 24px;
            font-weight: 500;
            width: calc(100% + 40px);
            margin-left: 40px;
        }
    }
    & .right-gray-background {
        position: absolute;
        height: 360px;
        background-color: #fafafa;
        width: 100%;
        margin-right: -10000px;
        padding-right: 10000px;
        margin-left: auto;
        border-radius: 32px;
    }
    & .title-block {
        width: 100%;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75;
        letter-spacing: 0.03em;
    }
    & .h1-title-block {
        font-size: 34px;
        text-align: center;
        font-weight: 600 !important;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    & .h3-title-block {
        font-size: 20px;
        text-align: center;
        font-weight: 400 !important;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    & .title-block-text {
        font-size: 16px;
        text-align: center;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }


    & .flex-trackers-container {
        display: flex;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1080px;
        width: 100%;
        height: max-content;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        & .flex-block {
            width: 328px;
            height: 90px;
            margin: 16px auto 16px auto;
            border-radius: 16px;
            font-weight: 500;
            font-size: 20px;
            letter-spacing: 0.3px;
            text-align: center;
            display: flex;
            color: #0a0a0a !important;
            flex-direction: column;
            background-color: #ffffff;
            animation: all ease-in-out 0.4s;
            cursor: pointer;
            &:hover p {
                color: #ffffff !important;
            }
            &.orange {
                &:hover, .abs-bottom-line {
                    background-color: #ff7900;
                }
            }
            &.red {
                &:hover, .abs-bottom-line {
                    background-color: #d43b35;
                }
            }
            &.blue {
                &:hover, .abs-bottom-line {
                    background-color: #327cc4;
                }
            }
            &.light-blue {
                &:hover, .abs-bottom-line {
                    background-color: #15b9ec;
                }
            }
            &.purple {
                &:hover, .abs-bottom-line {
                    background-color: #662c91;
                }
            }
            &.black {
                &:hover, .abs-bottom-line {
                    background-color: #0a0a0a;
                }
            }
            & p {
                margin: auto;
            }
            & .abs-bottom-line {
                position: relative;
                top: 0px;
                left: 38px;
                width: 260px;
                height: 4px;
                background-color: #0a0a0a;
                border-radius: 2px;
            }
        }
    }
    .flex-container-cases
    {
        display: flex;
        flex-direction: row;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        color: #101010 !important;
        height: max-content;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 40px;
        & .flex-case {
            width: 328px;
            height: 500px;
            margin: 16px auto 16px auto;
            border-radius: 16px;
            flex-direction: column;
            font-weight: 500;
            font-size: 20px;
            letter-spacing: 0.03em;
            text-align: left;
            color: #101010 !important;
            &:hover {
                transform: scale(1.06);
            }
            & .upper-pic {
                width: 100%;
                height: 200px;
                background-color: #ff7575;
                border-radius: 16px 16px 0 0;
                display: flex;

                &.red {
                    background-color: #ff847f;
                }
                &.light-blue {
                    background-color: #53d6ff;
                }
                &.purple {
                    background-color: #b870ed;
                }

                & img {
                    position: relative;
                    width: 75px;
                    height: 75px;
                    margin: auto;
                }
            }
            & .case-title {
                margin: 24px;
                font-weight: 600;
                color: #101010 !important;
            }
            & .case-text {
                margin: 24px 24px auto 24px;
                font-size: 16px;
                font-weight: 400;
                color: #101010 !important;
            }
            & .bottom-case-more {
                align-self: flex-end;
                justify-self: flex-end;
                margin: 24px;
                font-size: 16px;
                font-weight: 600;
                text-align: end !important;
                cursor: pointer;
                color: #141414 !important;
            }
        }
    }
    .flex-table-vs {
        display: flex;
        max-width: 900px;
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-items: flex-start;
        border-radius: 20px;
        & .header-vs {
            height: 80px;
            width: 50%;
            display: flex;
            color: #ffffff !important;
            & p {
                margin: auto;
                text-align: center;
            }
            &:first-child {
                background-color: #0a0a0a;
                border-radius: 24px 0px 0px 0px;
            }
            &:last-child {
                background-color: #0273d4;
                border-radius: 0px 24px 0px 0px;
            }
            & .compared-tracker {
                font-size: 32px;
            }
        }
        & .flex-table-row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-items: flex-start;
            border-bottom: 1px solid #e6e6e6 !important;
            width: 100%;
            height: 135px !important;
            &.compact {
                height: 135px;
            }
            &.bigger {
                min-height: 160px !important;
            }
            & .block-v-container {
                display: flex;
                width: 100%;
                flex-direction: row;
                align-items: flex-start;
                justify-items: flex-start;
                height: fit-content;
                margin-top: 6px;
                margin-bottom: auto;
            }
            &:first-child
            {
                height: 80px !important;
            }
            &:last-child
            {
                border-radius: 20px;
            }
            & .block-vs {
                display: flex;
                width: 50%;
                flex-direction: row;
                align-items: flex-start;
                justify-items: flex-start;
                height: 95px;
                padding: 20px;
                &.compact {
                    height: 95px;
                }
                &.bigger {
                    height: 120px;
                }
                &:first-child
                {
                    background-color: #f7f7f7
                }
                & img.have-feature-icon
                {
                    width: 32px;
                    height: 32px;
                    margin-top: 4px;
                    margin-right: 24px;
                    content:url("/static/tracker-compare/have-feature.svg");
                }
                & img.no-feature-icon
                {
                    width: 32px;
                    height: 32px;
                    margin-top: 4px;
                    margin-right: 24px;
                    content:url("/static/tracker-compare/no-feature.svg");
                }
                & p {
                    font-size: 16px;
                    letter-spacing: 0.03em;
                    width: 75%;
                    height: 100%;
                }
            }
        }
    }
}