.webinar-progress-mask {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: -8px;
    border-radius: 16px;
    opacity: 0.5;
    background: var(--white);
    z-index: -1;
}

.create-webinar-course-types {

    &__icon-box {
        background-color: var(--gray-100);

        svg, svg * {
            color: var(--gray-500) !important;

        }
    }

    &:hover &__icon-box {
        background-color: var(--primary);

        svg, svg * {
            color: var(--white) !important;
        }
    }

    &:hover input, & input:checked {
        & + label {
            &, & * {
                color: var(--primary) !important;
            }

            .create-webinar-course-types__icon-box {
                background-color: var(--primary);

                svg, svg * {
                    color: var(--white) !important;
                }
            }
        }
    }
}

.create-course-filter-card {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 16px;
        left: 0;
        width: 4px;
        height: 12px;
        background-color: var(--primary);
    }
}

.create-course-bottom-progress {
    width: 100%;
    height: 4px;
    background-color: transparent;

    &__process {
        height: 100%;
        background-color: var(--primary);
    }
}