@import "~styles/my-career-styles/variables";

.content-wrapper {
    padding: 20px 118px;
    position: relative;
    color: $darkColor;

    .premium-header {
        text-align: center;
        margin-bottom: 24px;

        h4 {
            font-size: 24px;
            font-family: $headingFont;
            font-weight: bold;
            margin-top: 0;
        }

        .closeable {
            position: absolute;
            right: 10px;
            font-size: 24px;
            top: 10px;
            cursor: pointer;
        }

        p {
            font-size: 15px;
            font-family: $bodyFont;

            strong {
                font-weight: 500;
            }
        }
    }

    .premium-body {
        margin-bottom: 24px;

        .header-row {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 16px;
        }


        .premium-factor {
            display: flex;
            margin-bottom: 10px;

            .label-col {
                min-width: 190px;
            }

            .free-col {
                min-width: 30px;
            }

            .premium-col {
                min-width: 60px;
            }

            .free-col, .premium-col {
                margin-left: 90px;
                text-align: center;

                .fa-check {
                    color: #1DBA3C;
                    font-size: 16px;
                }

                .fa-times {
                    color: #de1516;
                    font-size: 16px;
                }
            }
        }
    }

    .premium-footer {
        font-size: 14px;
        text-align: center;
        margin-bottom: 32px;
    }

    .premium-action {
        display: flex;
        justify-content: center;

        .ui-button-info {
            height: 50px;
            width: 260px;
            border-radius: 73px;
            background-color: #12A8DE;
        }
    }

}


@media only screen and (max-width: 768px) {
    .content-wrapper {
        padding: 40px 10px;
        margin-top: -70px;
        background: #fff;

        h4 {
            margin-top: 20px !important;
        }

        .label-col {
            min-width: 165px !important;
        }

        .free-col, .premium-col {
            margin-left: 20px !important;
        }

        .premium-factor {
            font-size: 12px;
        }
    }
}
