@font-face {
    font-family: "PoppinsRegular";
    src: url(https://pp-cdn.phenompeople.com/CareerConnectResources/q/common/video-platform/js/Poppins-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "PoppinsMedium";
    src: url(https://pp-cdn.phenompeople.com/CareerConnectResources/q/common/video-platform/js/Poppins-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "PoppinsSemiBold";
    src: url(https://pp-cdn.phenompeople.com/CareerConnectResources/q/common/video-platform/js/Poppins-SemiBold.ttf) format("truetype");
}
@font-face {
    font-family: "PoppinsBold";
    src: url(https://pp-cdn.phenompeople.com/CareerConnectResources/q/common/video-platform/js/Poppins-Bold.ttf) format("truetype");
}
:root {
    --vx-btn-height: 48px;
    --vx-btn-padding: 0px 24px;
    --vx-small-btn-height: 40px;
    --vx-small-btn-padding: 0px 24px;

    --vx-small-border-radius: 10px;
    --vx-large-border-radius: 20px;

    --vx-link-color: #2927b2;
    --vx-link-hover-color: #1c1876;

    --vx-primary-color: var(--brand-color-primary);
    --vx-primary-btn-disabled-bg-color: #aeb5c2;
    --vx-primary-btn-disabled-color: #ffffff;

    --vx-secondary-btn-bg-color: #ffffff;
    --vx-secondary-btn-color: #353b46;
    --vx-secondary-btn-hover-bg-color: #e8eaee;
    --vx-secondary-btn-hover-color: #353b46;
    --vx-secondary-btn-disabled-bg-color: #ffffff;
    --vx-secondary-btn-disabled-color: #8c95a8;
    --vx-secondary-btn-border-color: #d1d5dc;

    --neutral-color-40: #F4F6FA;
    --neutral-color-50: #E8EAEE;
    --neutral-color-75: #D1D5DC;
    --neutral-color-100: #AEB5C2;
    --neutral-color-200: #8C95A8;
    --neutral-color-300: #637085;
    --neutral-color-400: #464F5E;
    --neutral-color-500: #353B46;

    --blue-color-200: #4d3ee0;
    --blue-color-300: #2927b2;
    --blue-color-400: #1c1876;

    --red-color-400: #ef233c;
    --red-color-500: #c40f24;

    --gray-color-25: #F8F9FB;
    --gray-color-50: #F1F3F4;

    --brown-color-50: #FBEDD5;
    --yellow-color-500: #BA4800;

    --vx-font-size-level-one: 48px;
    --vx-font-size-level-two: 34px;
    --vx-font-size-level-three: 24px;
    --vx-font-size-level-four: 20px;
    --vx-font-size-level-five: 18px;
    --vx-font-size-level-six: 16px;
    --vx-font-size-level-seven: 14px;
    --vx-font-size-level-eight: 12px;

    --vx-line-height-level-one: 72px;
    --vx-line-height-level-two: 52px;
    --vx-line-height-level-three: 36px;
    --vx-line-height-level-four: 30px;
    --vx-line-height-level-five: 28px;
    --vx-line-height-level-six: 24px;
    --vx-line-height-level-seven: 24px;
    --vx-line-height-level-eight: 16px;

    --vx-font-family-regular: "PoppinsRegular"; 
    --vx-font-family-medium: "PoppinsMedium";
    --vx-font-family-semibold: "PoppinsSemiBold";
    --vx-font-family-bold: "PoppinsBold";

}

.phw-g-vx-btn-primary {
    font-weight: 600;
    font-size:  var(--vx-font-size-level-six);
    line-height: var(--vx-line-height-level-six);
    border-radius: var(--vx-small-border-radius);

    padding: var(--vx-btn-padding);
    width: auto;
    height: var(--vx-btn-height);
    min-height: var(--vx-btn-height);
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    /* background-color: var(--vx-primary-btn-bg-color, var(--brand-color-primary));
    color: var(--vx-primary-btn-color, #ffffff);
    border: 1px solid var(--vx-primary-btn-border-color, var(--brand-color-primary)); */
}

.phw-g-vx-btn-primary:hover {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--vx-small-border-radius);
    /* background-color: var(--vx-primary-btn-hover-bg-color, var(--brand-color-primary));
    color: var(--vx-primary-btn-hover-color, #ffffff);
    border: 1px solid var(--vx-primary-btn-border-hover-color, var(--brand-color-primary)); */
}

.phw-g-vx-btn-primary:disabled {
    background-color: var(--vx-primary-btn-disabled-bg-color);
    border: 1px solid var(--vx-primary-btn-disabled-bg-color);
    color: var(--vx-primary-btn-disabled-color);
    cursor: not-allowed;
}

.phw-g-vx-btn-plain {
    font-weight: 600;
    border: 1px solid var(--vx-secondary-btn-border-color);
    border-radius: var(--vx-small-border-radius);
    background-color: var(--vx-secondary-btn-bg-color);
    color: var(--vx-secondary-btn-color);
    font-size: var(--vx-font-size-level-six);
    line-height: var(--vx-line-height-level-six);
    padding: var(--vx-btn-padding);
    height: var(--vx-btn-height);
    width: auto;
    cursor: pointer;
}

.phw-g-vx-btn-plain:hover {
    background-color: var(--vx-secondary-btn-hover-bg-color);
    color: var(--vx-secondary-btn-hover-color);
}

.phw-g-vx-btn-plain:disabled {
    background-color: var(--vx-secondary-btn-disabled-bg-color);
    color: var(--vx-secondary-btn-disabled-color);
    cursor: not-allowed;
}

.phw-g-vx-small-btn {
    padding: var(--vx-small-btn-padding);
    font-size:  var(--vx-font-size-level-seven);
    line-height: var(--vx-line-height-level-seven);
    height: var(--vx-small-btn-height);
    min-height: var(--vx-small-btn-height);
}

a {
    color: var(--vx-link-color);
}

a:hover {
    color: var(--vx-link-hover-color);
}

.phw-g-vx-link-color {
    color: var(--vx-link-color);
    text-decoration: none;
}

.phw-g-vx-link-color:hover {
    color: var(--vx-link-hover-color);
    text-decoration: none;
}

.phw-g-vx-h3 {
    font-weight: 600;
    font-size: var(--vx-font-size-level-one);
    line-height: var(--vx-line-height-level-one);
}

.phw-g-vx-regular-font-family {
    font-family: var(--vx-font-family-regular);
}

.phw-g-vx-medium-font-family{
    font-family: var(--vx-font-family-medium);
}

.phw-g-vx-semibold-font-family{
    font-family: var(--vx-font-family-semibold);
}

.phw-g-vx-bold-font-family{
    font-family: var(--vx-font-family-bold);
}

.phw-g-vx-h4 {
    font-weight: 600;
    font-size: var(--vx-font-size-level-two);
    line-height: var(--vx-line-height-level-two);
}

.phw-g-vx-h5 {
    font-weight: 600;
    font-size: var(--vx-font-size-level-three);
    line-height: var(--vx-line-height-level-three)
}

.phw-g-vx-h6 {
    font-weight: 600;
    font-size: var(--vx-font-size-level-four);
    line-height: var(--vx-line-height-level-four)
}

.phw-g-vx-subtitle-1 {
    font-weight: 600;
    font-size: var(--vx-font-size-level-five);
    line-height: var(--vx-line-height-level-six);
}

.phw-g-vx-body-1-regular {
    font-weight: 400;
    font-size: var(--vx-font-size-level-six);
    line-height: var(--vx-line-height-level-six);
}

.phw-g-vx-body-2-regular {
    font-weight: 400;
    font-size: var(--vx-font-size-level-seven);
    line-height: var(--vx-line-height-level-seven);
}

.phw-g-vx-body-3-regular {
    font-weight: 400;
    font-size: var(--vx-font-size-level-eight);
    line-height: var(--vx-line-height-level-eight);
}

.phw-g-vx-body-1-medium {
    font-weight: 500;
    font-size: var(--vx-font-size-level-six);
    line-height: var(--vx-line-height-level-six);
}

.phw-g-vx-body-2-medium {
    font-weight: 500;
    font-size: var(--vx-font-size-level-seven);
    line-height: var(--vx-line-height-level-seven);
}

.phw-g-vx-body-1-accented {
    font-weight: 600;
    font-size: var(--vx-font-size-level-six);
    line-height: var(--vx-line-height-level-six);
}

.phw-g-vx-body-2-accented {
    font-weight: 600;
    font-size: var(--vx-font-size-level-seven);
    line-height: var(--vx-line-height-level-seven);
}

.phw-g-vx-body-3-accented {
    font-weight: 600;
    font-size: var(--vx-font-size-level-eight);
    line-height: var(--vx-line-height-level-eight);
}

.phw-g-vx-color-G25 {
    color: var(--gray-color-25);
}

.phw-g-vx-color-G50 {
    color: var(--gray-color-50);
}

.phw-g-vx-color-N500 {
    color: var(--neutral-color-500);
}

.phw-g-vx-color-N400 {
    color: var(--neutral-color-400);
}

.phw-g-vx-color-N300 {
    color: var(--neutral-color-300);
}

.phw-g-vx-color-N200 {
   color: var(--neutral-color-200);
}

.phw-g-vx-color-N100 {
    color: var(--neutral-color-100);
}

.phw-g-vx-color-N75 {
    color: var(--neutral-color-75);
}

.phw-g-vx-color-N50 {
    color: var(--neutral-color-50);
}

.phw-g-vx-color-N40 {
    color: var(--neutral-color-40);
}

.phw-g-vx-color-B200 {
    color: var(--blue-color-200);
}

.phw-g-vx-color-B300 {
    color: var(--blue-color-300);
}

.phw-g-vx-color-B400 {
    color: var(--blue-color-400);
}

.phw-g-vx-color-R400 {
    color: var(--red-color-400);
}

.phw-g-vx-color-R500 {
    color: var(--red-color-500);
}

.phw-g-vx-color-BR50 {
    color: var(--brown-color-50);
}

.phw-g-vx-color-Y500 {
    color: var(--yellow-color-500);
}

.phw-g-vx-small-border-radius {
    border-radius: var(--vx-small-border-radius);
}

.phw-g-vx-large-border-radius {
    border-radius: var(--vx-large-border-radius);
}

.phw-g-vx-default-border {
    border: 1px solid var(--neutral-color-75);
}

.phw-g-vx-default-card {
    border: 1px solid var(--neutral-color-50);
    border-radius: var(--vx-small-border-radius);
    background-color: #ffffff;
    text-decoration: none;
}

.phw-g-vx-card-border {
    border: 1px solid var(--neutral-color-50);
}

.phw-g-vx-media-card-1 {
    width: 736px;
    height: 414px;
    border-radius: var(--vx-large-border-radius);
}

.phw-g-vx-media-card-2 {
    width: 544px;
    height: 306px;
    border-radius: var(--vx-large-border-radius);
}

.phw-g-vx-media-card-3 {
    width: 252px;
    height: 142px;
    border-radius: var(--vx-large-border-radius);
}

.phw-g-vx-widget-container {
    padding-top: calc(var(--pu-space-vx) * 8);
}

.phw-g-vx-widget-inner-container {
    max-width: 736px;
}

.phw-g-vx-default-box-shadow {
    box-shadow: 0px 2px 14px 0px #353B4626;
}

.phw-g-vx-fixed-header {
    position: fixed;
    width: 100%;
    z-index: 999999;
    background-color: white;
    border-bottom: 1px solid var(--neutral-color-50);
}

.phw-dialog-backdrop {
    background: rgba(64, 64, 64, 0.7);
}


@media only screen and (max-width: 767.98px) {
    
    .phw-g-vx-widget-container {
        padding-top: calc(var(--pu-space-vx) * 6);
    }

    .phw-g-vx-widget-inner-container {
        max-width: 100%;
    }

    .phw-g-vx-media-card-1,
    .phw-g-vx-media-card-2 {
        width: 100%;
        height: 194px;
    }

    .phw-g-vx-media-card-3 {
        width: 100%;
    }

    .phw-g-vx-btn-primary,
    .phw-g-vx-btn-plain {
        width: 100%;
    }

    .phw-g-vx-sm-h3 {
        font-weight: 600;
        font-size: var(--vx-font-size-level-two);
        line-height: var(--vx-line-height-level-two);
    }

    .phw-g-vx-sm-h4 {
        font-weight: 600;
        font-size: var(--vx-font-size-level-three);
        line-height: var(--vx-line-height-level-three);
    }

    .phw-g-vx-sm-h5 {
        font-weight: 600;
        font-size: var(--vx-font-size-level-four);
        line-height: var(--vx-line-height-level-four);
    }

    .phw-g-vx-body-1-sm-regular {
        font-weight: 400;
        font-size: var(--vx-font-size-level-seven);
        line-height: var(--vx-line-height-level-seven);
    }
}