@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;
    --gray-color-100: #EBEBEB;
    --gray-color-200: #CCCCCC;
    --gray-color-300: #A2A2A2;
    --gray-color-400: #525252;
    --gray-color-500: #404040;

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

    --green-color-500: #00875A;


    --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-gap-050 {
    gap: 4px;
}

.phw-g-vx-gap-1 {
    gap: 8px;
}

.phw-g-vx-gap-2 {
    gap: 16px;
}

.phw-g-vx-gap-150 {
    gap: 12px;
}

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

    padding: var(--vx-btn-padding) !important;
    width: auto;
    height: var(--vx-btn-height) !important;
    min-height: var(--vx-btn-height);
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
}

.phw-g-vx-btn-primary:hover, 
.phw-g-vx-btn-primary:focus {
    font-weight: 600 !important;
    font-size:  var(--vx-font-size-level-six) !important;
    padding: var(--vx-btn-padding) !important;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--vx-small-border-radius) !important;
}

.phw-g-vx-btn-primary:disabled {
    font-weight: 600 !important;
    font-size:  var(--vx-font-size-level-six) !important;
    padding: var(--vx-btn-padding) !important;
    background-color: var(--vx-primary-btn-disabled-bg-color) !important;
    border: 1px solid var(--vx-primary-btn-disabled-bg-color) !important;
    color: var(--vx-primary-btn-disabled-color) !important;
    cursor: not-allowed !important;
}

.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-icon:hover {
    background-color: var(--neutral-color-50);
}

.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);
}

.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-weight: 400;
    font-family: var(--vx-font-family-regular) !important;
}

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

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

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

.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-white {
    color: #ffffff;
}

.phw-g-vx-bg-color-white {
    background-color: #ffffff;
}

.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-color-G500 {
    color: var(--green-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-border-b-N75 {
    border-bottom: 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);
    object-fit: contain;
}

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

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

.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);
}

.vx-tooltip-container {
    position: relative;
    display: flex;
    cursor: pointer;
}

.vx-tooltip-white {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    width: 100%;
    text-align: center;
    word-break: break-word;
    z-index: 9999;
  
    padding: 4px 8px !important;
    background-color: var(--gray-color-100) !important;
    border:1px solid var(--gray-color-200);
    border-radius: 2px !important;
    color: var(--gray-color-500);
    box-shadow: 0px 2px 3px 0px #353B4626;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    margin: 4px 0px;
}

.vx-tooltip-text-bottom {
    visibility: hidden;
    position: absolute;
    left: 0%;
    top: 100%;
    margin-top: 4px;
    width: max-content;
    text-align: center;
    word-break: break-word;
    z-index: 9999;

    padding: 4px 8px !important;
    background-color: var(--neutral-color-300) !important;
    border-radius: 8px !important;
    color: white;

    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.vx-tooltip-text-top {
    visibility: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    width: max-content;
    text-align: center;
    word-break: break-word;
    z-index: 9999;
  
    padding: 4px 8px !important;
    background-color: var(--neutral-color-300) !important;
    border-radius: 8px !important;
    color: white;
  
    font-family: var(--font-family-regular);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.vx-tooltip-text-bottom-left {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    text-align: center;
    word-break: break-word;
    z-index: 9999;
  
    padding: 4px 8px !important;
    background-color: var(--neutral-color-300) !important;
    border-radius: 8px !important;
    color: white;
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.vx-tooltip-container:hover .vx-tooltip-white,
.vx-tooltip-container:hover .vx-tooltip-text-bottom,
.vx-tooltip-container:hover .vx-tooltip-text-top, 
.vx-tooltip-container:hover .vx-tooltip-text-bottom-left {
    visibility: visible;
}

.vx-text-elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@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%;
        height: 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-2-sm-medium {
        font-weight: 500;
        font-size: var(--vx-font-size-level-six);
        line-height: var(--vx-line-height-level-six);
    }

    .phw-g-vx-body-1-sm-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-sm-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-sm-regular {
        font-weight: 400;
        font-size: var(--vx-font-size-level-eight);
        line-height: var(--vx-line-height-level-eight);
    }
}