/* section-question-row */
/* webpage */
/* body {
  background-color: #eef3f3;
} */
/*
* {
  font-family: "Prompt", sans-serif;
  font-style: normal;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-size: 14px;
}
*/

.bg_container {
    background-color: white;
    margin-top: 30px;
    width: 1050px !important;
    max-width: 1050px !important;
    margin-bottom: 80px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.margin-container {
    margin-left: auto;
    margin-right: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: 650px 400px;
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
}

.top_menu {
    height: 60px;
}

#myTab {
    padding-top: 25px !important;
    padding-bottom: 0px !important;
}

.nav .nav-link {
    font-family: Prompt;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 15px;
    /* identical to box height, or 107% */

    text-align: center;

    color: #c4c9c8;
}

#myTab .active .tab_top {
    position: relative;
}

.active .tab_top:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    background-color: #16997e;
}

.active .tab_top {
    color: #16997e;
}

#defaultRegisterFormUsername {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-top: 30px;
    margin-left: 60px;
    margin-bottom: 0px !important;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    border-radius: 0;
    border: 1px solid #CFDFDF !important;
}



#defaultRegisterFormEmail {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-top: 15px;
    margin-left: 60px;
    margin-bottom: 0px !important;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    border-radius: 0;
    border: 1px solid #CFDFDF !important;
}

#defaultRegisterPhonePassword {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-top: 15px;
    margin-left: 60px;
    margin-bottom: 0px !important;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    border-radius: 0;
    border: 1px solid #CFDFDF !important;
}

#defaultRegisterFormFirstName {
    width: 130px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-top: 15px;
    margin-left: 60px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    border-radius: 0;
    margin-bottom: 0px !important;
    border: 1px solid #CFDFDF !important;
}

#defaultRegisterFormLastName {
    width: 130px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-top: 15px;
    margin-left: 5px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    border-radius: 0;
    margin-bottom: 0px !important;
    border: 1px solid #CFDFDF !important;
}

#defaultRegisterFormPassword {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    margin-top: 15px;
    margin-left: 60px;
    border-radius: 0;
    border: 1px solid #CFDFDF !important;
}

#RegisterFormPasswordAgain {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    margin-top: 7px;
    margin-left: 60px;
    border-radius: 0;
    border: 1px solid #CFDFDF !important;
}

#defaultRegisterFormPasswordHelpBlock {
    text-align: left;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 10px;
    margin-left: 60px;
    color: #C4C9C8 !important;
    margin-top: 8px;
}

#signup line {
    display: block;
    height: 2px;
    width: 280px;
    border-top: 2px solid #16997e;
    margin-top: 30px;
    margin-left: 60px;
    margin-bottom: 0px !important;
}

#signup #line_button,
#signup #google_button,
#signup #facebook_button {
    margin-top: 20px !important;
    margin-bottom: 0px !important;
}

#signup #line_button {
    background-color: #1db54a;
    border: 0px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#signup #google_button {
    background-color: #db4c3f;
    border: 0px;
    width: 90px;
    height: 30px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#signup #facebook_button {
    background-color: #3076cf;
    border: 0px;
    width: 90px;
    height: 30px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#signup #HelpBlock {
    margin-top: 21px;
    margin-bottom: 20px;
    font-family: Prompt;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    margin-bottom: 0px !important;
    color: #c4c9c8 !important;
}

.green_text {
    color: #16997e;
}

#signup .submit {
    background-color: #16997e;
    border: 0px;
    width: 250px;
    height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 73px;
    padding-left: 72px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 500;
    font-size: 20.0095px;
    line-height: 26px;
    margin-left: 15px;
    margin-top: 20px !important;

    text-align: center;

    color: #ffffff;
}

#signup-tab .tab_top {
    margin-left: 70px;
}

#login-tab .tab_top {
    margin-left: 48px;
}

#username {
    width: 280px;
    height: 30px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    margin-left: 60px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 10px;
    margin-top: 45px;
    border-radius: 0;
    margin-bottom: 0px !important;
    border: 1px solid #CFDFDF !important;
}

::placeholder {
    color: #c4c9c8 !important;
}

/* #password {
  width: 280px;
  height: 30px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 10px;
  margin-left: 60px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 10px;
  margin-top: 30px;
  border-radius: 0;
  margin-bottom: 0px !important;
  border: 1px solid #CFDFDF !important;
} */

#login .submit {
    width: 250px;
    height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 73px;
    padding-left: 72px;
    background: #16997e;
    border-radius: 5px;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    margin-left: 75px;
}

#login line {
    display: block;
    height: 2px;
    width: 280px;
    border-top: 2px solid #16997e;
    margin-top: 34px;
    margin-left: 60px;
    margin-bottom: 0px !important;
}

#login #line_button,
#login #google_button,
#login #facebook_button {
    margin-top: 34px !important;
    margin-bottom: 0px !important;
}

#login #line_button {
    background-color: #1db54a;
    border: 0px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#login #google_button {
    background-color: #db4c3f;
    border: 0px;
    width: 90px;
    height: 30px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#login #facebook_button {
    background-color: #3076cf;
    border: 0px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    width: 90px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 21px;
    padding-right: 21px;
}

#login .forget_pass {
    font-family: Prompt;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 10px;
    margin-top: 109px;
    text-align: center;

    color: #c4c9c8;
}

#login #set_pass {
    color: #16997e;
    font-family: Prompt;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 10px;
    margin-top: 109px;
    text-align: center;
}

#login #HelpBlock {
    font-family: Prompt;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    margin-top: 40px;
    color: #c4c9c8 !important;
}

.col .google_col {
    padding-left: 40px;
}

.col .facebook_col {
    padding-right: 40px;
}

.hidden {
    display: none !important;
}

/* .position-home-tab-bar{
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
} */
.position-home-tab-bar span {
    font-family: Prompt;
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    align-items: center;
    text-align: center;
    color: #16997E;
}

.position-home-tab-bar {
    height: 80px;
}

.position-home-tab-bar a {
    padding: 0px;
    margin-top: 25px;
}

#home-test-Tab .active .test_list_text {
    position: relative;
}

.active .test_list_text:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18.2px;
    height: 2px;
    background-color: #16997e;
}

.active .test_list_text {
    color: #16997e;
}

#test_list_home-content {
    max-width: 1200px;
    width: 1040px;
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.all-course-group-content {
    padding-top: 97px;
    padding-bottom: 95px;
    display: flex;
    padding-left: 100px;
    padding-right: 100px;
}

.home-course-group {
    position: relative;
    padding: 0px;
}

.home-button-course-group {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.all-course-group-content .col-4 {
    padding: 0px;
}

/* ==footer for web== */
@media only screen and (min-device-width: 767px) {
    #notification #noti-mobile {
        display: none;
    }

    #notification {
        width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

    #notification .title-right {
        font-style: normal;
        font-weight: 600;
        font-size: 22px;
        line-height: 30px;
        display: flex;
        align-items: center;
        text-indent: 8px;
        text-decoration-line: underline;
        color: #4B8DF1;
        text-align: right;
        float: right;
        margin-top: 12px;
        cursor: pointer;
    }

    #notification .list-item .notification_item img {
        width: 56px;
        height: 56px;
        margin-right: 40px;
    }

    #notification .list-item .notification_item {
        display: flex;
        height: 88px;
        padding: 16px;
    }

    #notification .list-item .bg-unseen {
        width: 800px;
        height: 88px;
        position: absolute;
        top: 0px;
        background-color: #FFFDEA;
        z-index: 1;
    }

    #notification .list-item {
        padding-left: 32px;
        padding-right: 24px;
        width: 900px;
    }

    #notification #noti-mobile .list-item .created {
        color: #59C4AE;
        font-style: normal;
        font-weight: normal;
        font-size: 3.733vw;
        line-height: 6.400vw;
        margin-left: 17.067vw;
        margin-bottom: 2.133vw;
    }

    #notification .empty_state {
        padding-top: 65px;
        padding-bottom: 112px;
    }

    #notification .empty_state .text-1 {
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
        margin-bottom: 24px;
    }

    #notification .empty_state .text-2 {
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        color: #7A89A6;
    }

    #notification .empty_state img {
        width: 160px;
        height: 160px;
        margin-top: 48px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 48px;
    }

    #notification .empty_state button {
        outline: none;
        width: 270px;
        height: 48px;
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        background: transparent;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #notification .empty_state button a {
        text-decoration: none;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 28px;
        text-transform: uppercase;
        color: #59C4AE;
    }

    #notification .noti-filter .col-9 {
        min-height: 1320px;
        position: relative;
    }

    #notification .noti-filter .col-9 .pagination .page {
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #C3CBD9;
        border-top: inherit;
        border-bottom: inherit;
        margin-right: 6px;
        margin-top: 27px;
    }

    #notification .noti-filter .col-9 .pagination .row-number {
        display: flex;
        width: 670px;
    }

    #notification .noti-filter .col-9 .pagination .page.active {
        background-color: #00DBB6;
        width: 48px;
        border-radius: 100px;
    }

    #notification .noti-filter .col-9 .pagination .previous {
        background-image: url(/static/images/new_Jobpasscard/chevron-left.png);
        height: 100px;
        width: 100px;
        outline: none;
        background-size: 64px, 64px;
        background-repeat: no-repeat;
    }

    #notification .noti-filter .col-9 .pagination .next {
        background-image: url(/static/images/new_Jobpasscard/chevron-right.png);
        height: 100px;
        width: 100px;
        outline: none;
        background-size: 64px, 64px;
        background-repeat: no-repeat;
    }

    #notification .noti-filter .col-9 .pagination-container {
        position: absolute;
        bottom: 0px;
    }

    #notification .line-break-item {
        border: 1px solid #E8EAF0;
        transform: rotate(180deg);
        width: 800px;
        margin-bottom: 16px;
    }

    #footer-mobile,
    .test_list_mobile {
        display: none;
    }

    .footer-container {
        height: 120px;
        background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
        transform: rotate(-180deg);
    }

    .footer-content {
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .footer-content .row {
        padding-bottom: 30px;
    }

    .footer-content .col-6 {
        padding-left: 5.56%;
        padding-top: 66.67px;
    }

    .footer-content .col-6 a {
        text-decoration: none;
    }

    .footer-content .col-4 {
        padding-right: 12px;
        text-align: right;
        padding-top: 66.67px;
    }

    .footer-content .col-4 .text-intro {
        margin: 0px;
    }

    .footer-content .col-4 .line_add_logo {
        margin-top: 28px;
    }

    .footer-content .col {
        text-align: right;
        padding-top: 66.67px;
        padding-left: 0px;
        padding-right: 2.78%
    }

    .footer-content .col .add_line_jobpasscard-img {
        width: 166.67px;
        height: 166.67px;

    }

    .footer-content .facebook-container .text-footer-link {
        font-family: Prompt;
        font-style: normal;
        font-weight: normal;
        font-size: 17.9775px;
        line-height: 22px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-left: 46.37px;
    }

    .footer-content .email-container {
        margin-top: 20.37px;
    }

    .footer-content .line-container {
        margin-top: 20.97px;
        padding-bottom: 60px;
    }

    .footer-content .email-container .text-footer-link {
        font-family: Prompt;
        font-style: normal;
        font-weight: normal;
        font-size: 17.9775px;
        line-height: 22px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-left: 37.38px;
    }

    .footer-content .line-container .text-footer-link {
        font-family: Prompt;
        font-style: normal;
        font-weight: normal;
        font-size: 17.9775px;
        line-height: 22px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-left: 37.38px;
    }

    .footer-content .text-intro {
        font-family: Prompt;
        font-style: normal;
        font-weight: 500;
        font-size: 25px;
        line-height: 33px;
        text-align: right;
        color: #FFFFFF;
    }

    .footer-line-container {
        position: relative;
    }

    .footer-content .line-footer {
        width: 100%;
        height: 13.33px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .name-line-footer {
        position: absolute;
        bottom: 20%;
        left: 50%;
        padding-top: 10px;
        transform: translate(-50%, 0%);
        width: 360px;
        height: 40px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
        border-radius: 20px 20px 0px 0px;
    }

    .footer-content {
        overflow-x: hidden;
    }

    .text-footer-web {
        padding-left: 40px;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
    }

    .fb_logo {
        padding-left: 8.99px;
    }
}

.edit_icon {
    cursor: pointer;
}

.btn-upload-certificate {
    cursor: pointer;
}

.cer_img_button {
    cursor: pointer;
}

.add_trophy {
    cursor: pointer;
}

/* 
@media only screen and (min-device-width: 540px) and (max-device-width: 767px) {

  #footer-web,#footer-desktop,#filter-desktop{
    display: none;
  }

  .footer-container-mobile{
    height: 36px;
    background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
    transform: rotate(-180deg);
  }
  .footer-content-mobile{
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .image-content-mobile{
    display: flex;
    width: fit-content;
    padding-top: 6%;
    padding-bottom: 7%;
    margin-left: auto;
    margin-right: auto;
  }
  .image-content-mobile img{
    width: 75%;
    height: auto;
  }
  
  .footer-content-mobile .facebook{
    text-align: center;
  }
  
  .footer-content-mobile .email{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line-footer{
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .name-line-footer-mobile{
    position: absolute;
    bottom: 20%;
    left: 50%;
    padding-top: 10px;
    transform: translate(-50%, 0%);
    width: 50%;
    height: 18px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 20px 20px 0px 0px;
  }
  .text-footer-mobile{
    position: absolute;
    padding-left: 18%;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 6px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-top: -4px;
  }
  .footer-line-container{
    position: relative;
  }
}

/*
@media only screen and (min-device-width: 768px) and (max-device-width: 1000px) {

  #footer-web,#footer-desktop,#filter-desktop{
    display: none;
  }
  .footer-container-mobile{
    height: 36px;
    background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
    transform: rotate(-180deg);
  }
  .footer-content-mobile{
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .image-content-mobile{
    display: flex;
    width: fit-content;
    padding-top: 6%;
    padding-bottom: 7%;
    margin-left: auto;
    margin-right: auto;
  }
  .image-content-mobile img{
    width: 75%;
    height: auto;
  }
  
  .footer-content-mobile .facebook{
    text-align: center;
  }
  
  .footer-content-mobile .email{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line-footer{
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .name-line-footer-mobile{
    position: absolute;
    bottom: 20%;
    left: 50%;
    padding-top: 10px;
    transform: translate(-50%, 0%);
    width: 35%;
    height: 18px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 20px 20px 0px 0px;
  }
  .text-footer-mobile{
    position: absolute;
    padding-left: 18%;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 6px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-top: -4px;
  }
  .footer-line-container{
    position: relative;
  }
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 769px){

  #footer-web,#footer-desktop,#filter-desktop{
    display: none;
  }
  .footer-container-mobile{
    height: 36px;
    background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
    transform: rotate(-180deg);
  }
  .footer-content-mobile{
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .image-content-mobile{
    display: flex;
    width: fit-content;
    padding-top: 6%;
    padding-bottom: 7%;
    margin-left: auto;
    margin-right: auto;
  }
  .image-content-mobile img{
    width: 75%;
    height: auto;
  }
  
  .footer-content-mobile .facebook{
    text-align: center;
  }
  
  .footer-content-mobile .email{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line{
    text-align: center;
    margin-left: 14%;
  }
  .footer-content-mobile .line-footer{
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  }
  .name-line-footer-mobile{
    position: absolute;
    bottom: 20%;
    left: 50%;
    padding-top: 10px;
    transform: translate(-50%, 0%);
    width: 35%;
    height: 18px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 20px 20px 0px 0px;
  }
  .text-footer-mobile{
    position: absolute;
    padding-left: 26%;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 6px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-top: -4px;
  }
  .footer-line-container{
    position: relative;
  }
}



/* ==footer for mobile== */
@media only screen and (min-device-width:285px) and (max-device-width: 350px) {

    #footer-web,
    #footer-desktop,
    #filter-desktop {
        display: none;
    }

    .footer-container-mobile {
        height: 36px;
        background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
        transform: rotate(-180deg);
    }

    .footer-content-mobile {
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .image-content-mobile {
        display: flex;
        width: fit-content;
        padding-top: 6%;
        padding-bottom: 7%;
        margin-left: auto;
        margin-right: auto;
    }

    .image-content-mobile img {
        width: 65%;
        height: auto;
    }

    .footer-content-mobile .facebook {
        text-align: center;
    }

    .footer-content-mobile .email {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line-footer {
        width: 100%;
        height: 10px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .name-line-footer-mobile {
        position: absolute;
        bottom: 20%;
        left: 50%;
        padding-top: 10px;
        transform: translate(-50%, 0%);
        width: 40%;
        height: 12px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
        border-radius: 20px 20px 0px 0px;
    }

    .text-footer-mobile {
        position: absolute;
        padding-left: 17%;
        font-style: normal;
        font-weight: normal;
        font-size: 4.8px;
        line-height: 6px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-top: -5px;
    }

    .footer-line-container {
        position: relative;
    }

}

@media only screen and (max-device-width: 280px) {

    #footer-web,
    #footer-desktop,
    #filter-desktop {
        display: none;
    }

    .footer-container-mobile {
        height: 36px;
        background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
        transform: rotate(-180deg);
    }

    .footer-line-container {
        position: relative;
    }

    .footer-content-mobile {
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .image-content-mobile {
        display: flex;
        width: fit-content;
        padding-top: 6%;
        padding-bottom: 7%;
        margin-left: auto;
        margin-right: auto;
    }

    .image-content-mobile img {
        width: 55%;
        height: auto;
    }

    .footer-content-mobile .facebook {
        text-align: center;
    }

    .footer-content-mobile .email {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line-footer {
        width: 100%;
        height: 10px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .name-line-footer-mobile {
        position: absolute;
        bottom: 20%;
        left: 50%;
        padding-top: 10px;
        transform: translate(-50%, 0%);
        width: 40%;
        height: 12px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
        border-radius: 20px 20px 0px 0px;
    }

    .text-footer-mobile {
        position: absolute;
        padding-left: 12%;
        font-style: normal;
        font-weight: normal;
        font-size: 4.8px;
        line-height: 6px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-top: -6px;
    }

}

@media only screen and (min-device-width:351px) and (max-device-width: 380px) {

    #footer-web,
    #footer-desktop,
    #filter-desktop {
        display: none;
    }

    .footer-container-mobile {
        height: 36px;
        background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
        transform: rotate(-180deg);
    }

    .footer-line-container {
        position: relative;
    }

    .footer-content-mobile {
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .image-content-mobile {
        display: flex;
        width: fit-content;
        padding-top: 6%;
        padding-bottom: 7%;
        margin-left: auto;
        margin-right: auto;
    }

    .image-content-mobile img {
        width: 65%;
        height: auto;
    }

    .footer-content-mobile .facebook {
        text-align: center;
    }

    .footer-content-mobile .email {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line-footer {
        width: 100%;
        height: 10px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .name-line-footer-mobile {
        position: absolute;
        bottom: 20%;
        left: 50%;
        padding-top: 10px;
        transform: translate(-50%, 0%);
        width: 40%;
        height: 12px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
        border-radius: 20px 20px 0px 0px;
    }

    .text-footer-mobile {
        position: absolute;
        padding-left: 14%;
        font-style: normal;
        font-weight: normal;
        font-size: 6px;
        line-height: 6px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-top: -6px;
    }

}

@media only screen and (min-device-width:381px) and (max-device-width: 767px) {

    #footer-web,
    #footer-desktop,
    #filter-desktop {
        display: none;
    }

    .footer-container-mobile {
        height: 36px;
        background: linear-gradient(180deg, rgba(116, 255, 194, 0.6) 0%, rgba(116, 255, 194, 0) 100%);
        transform: rotate(-180deg);
    }

    .footer-line-container {
        position: relative;
    }

    .footer-content-mobile {
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .image-content-mobile {
        display: flex;
        width: fit-content;
        padding-top: 6%;
        padding-bottom: 7%;
        margin-left: auto;
        margin-right: auto;
    }

    .image-content-mobile img {
        width: 65%;
        height: auto;
    }

    .footer-content-mobile .facebook {
        text-align: center;
    }

    .footer-content-mobile .email {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line {
        text-align: center;
        margin-left: 4%;
    }

    .footer-content-mobile .line-footer {
        width: 100%;
        height: 10px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    }

    .name-line-footer-mobile {
        position: absolute;
        bottom: 20%;
        left: 50%;
        padding-top: 10px;
        transform: translate(-50%, 0%);
        width: 40%;
        height: 12px;
        background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
        border-radius: 20px 20px 0px 0px;
    }

    .text-footer-mobile {
        position: absolute;
        padding-left: 15%;
        font-style: normal;
        font-weight: normal;
        font-size: 6.5px;
        line-height: 6px;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        margin-top: -6px;
    }

}

#footer-web,
#footer-desktop {
    clear: right;
    list-style-type: none;
}

.footer-container {
    margin-top: 127px;
}

.footer-container-mobile {
    margin-top: 110px;
}

.footer-img {
    width: 100%;
}

.image-content-mobile a {
    text-decoration: none;
}

#profile_photo {
    border-radius: 100%;
}

.profile-div .center-profile-div {
    margin-top: 10px;
}

.image-30-copy {
    border-radius: 100%;
    width: 35px;
    height: 35px;
}

#main-container {
    padding-right: 0 !important;
    padding-left: 0px !important;
}

/*****************************/
/***** card_certificate ******/
/*****************************/

#card_certificate .first_section {
    margin-top: 20px;
}

#card_certificate .logo_card {
    position: absolute;
    left: 367px;
    top: 350px;
}

#card_certificate .imgcard1 {
    position: absolute;
    margin-left: 30px;
    margin-top: 5px;
}

#card_certificate .QRcode img {
    position: absolute;
    top: 400px;
    left: 22px;
    width: 80px;
    height: 80px;
}

#card_certificate .certificate_logo_img {
    position: absolute;
    margin-left: 622px;
    margin-top: -30px;
}

#cer_card {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    min-width: 1100px;
    height: 660px;

    background: #014A52;
    border-radius: 10px;
}

#cer_card .my_button {
    top: -510px;
    position: relative;
}

#cer_card .btn1 button {
    position: relative;
    width: 130px;
    height: 30px;
    color: #FFFFFF;
    border-radius: 5px;
    left: 950px;
    top: 0px;
    background: linear-gradient(24.01deg, #035457 -17.3%, #01F5BA 107.38%) !important;
    border: none;
    outline: none !important;
}

#cer_card .Print button {
    position: relative;
    width: 130px;
    height: 30px;
    color: #02DAA9;
    left: 950px;
    top: 0px;
    border: 1px solid #01DDAB;
    background: transparent;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none !important;
}

#cer_card .btn1 button:hover,
#cer_card .btn1 button:visited,
#cer_card .Print button:hover,
#cer_card .Print button:visited {
    color: #FFFFFF;
    background: #27DEBF !important;
    border: #27DEBF !important;
    outline: none !important;
}

#cer_card .bg_cer_card {
    position: relative;
    width: 900px;
    height: 560px;
    left: 30px;
    top: 50px;
    background: #FFFFFF;
    border-radius: 10px;
}

#cer_card .detail_of_card {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 872px;
    height: 532px;
    border: 2px solid #16997E;
    border-radius: 10px;
    background: transparent;
}

#cer_card .Head {
    position: absolute;
    left: 274px;
    top: 35px
}

#cer_card .Cer_name {
    position: relative;
    top: 139px;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
    color: #0B6067;
}


#cer_card .etc1 {
    position: relative;
    text-align: center;
    top: 160px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #0B6067;
}

#cer_card .Student_name {
    position: relative;
    text-align: center;
    top: 177px;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 39px;
    color: #0B6067;

}

#cer_card .Cer_name2 {
    position: relative;
}

#cer_card .Cer_name3 {
    position: relative;
    text-align: center;
    top: 195px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #0B6067;
}

#cer_card .Cer_name4 {
    position: relative;
    text-align: center;
    top: 195px;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    color: #0B6067;
}

#cer_card .Description {
    position: absolute !important;
    top: 405px;
    left: 124px;
    width: 630px;
    height: 56px;
    line-height: 15px;
}

#cer_card #descipt2,
#cer_card #descipt4 {
    font-weight: normal !important;
}

#cer_card .logo_correct img {
    position: absolute;
    top: 504px;
    left: 124px;
}

#cer_card .description {
    display: inline;
    color: #0B6067;
    font-weight: 600;
    font-size: 10px;
}

#cer_card .numberOfCard1 {
    position: absolute;
    left: 162px;
    top: 504px;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 15px;
    color: #004951;
}

#cer_card .numberOfCard2 {
    position: absolute;
    left: 262px;
    top: 504px;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.05em;
    color: #004951;
}

#cer_card .numberOfCard3 {
    display: none;
}

#card_certificate .btn1 button {
    top: 0px;
}

#card_certificate .Print button {
    top: 20px;
}

#cer_card .time {
    position: absolute;
    right: 16px;
    top: 504px;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    color: #004951;
}

#cer_card .checkCer {
    position: absolute;
    left: 31px;
    top: 483px;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 15px;
    text-align: center;
    color: #004951;
}

@media print {

    .header-cert-modal.desktop button,
    .header-cert-modal.mobile button,
    .header-cert-modal.mobile .title-cert,
    .header-cert-modal.desktop .title-cert,
    #menu_mobile,
    #footer-mobile,
    #footer-desktop,
    #menu-desktop,
    .login-background,
    .signup-background,
    .forget-password,
    .navbar-phone,
    .use-coupon,
    .nav-login,
    #cer_card .my_button,
    .contact-section,
    .div-block-12,
    #card_certificate .img_from_webcam {
        display: none;
    }

    /* .level-content{
    visibility: visible;
  }

  #main-container{
    visibility: hidden;
  }

  #cer_card .bg_cer_card {
      margin-left: 65px;
      margin-top:-50px;
      
  } */

    @page {
        size: landscape;
    }
}

#card_certificate .img_from_webcam .grid-container {
    margin-top: 20px;
    background: linear-gradient(180deg, #16997E 0%, #004951 100%);
    border-radius: 10px;
    width: 1100px;
    height: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
}

#card_certificate .img_from_webcam img {}

#card_certificate .item1 {
    grid-area: 1 / 1 / 1 / 2;
}

#card_certificate .item2 {
    grid-area: 1 / 2 / 1 / 6;
}

#card_certificate .grid-container .line {
    width: 2px;
    min-height: 700px;
    height: auto;
    background: #FFFFFF;
    border-radius: 1px;
    float: right;
}


#card_certificate .grid-container .course_name {
    margin-right: 80px;
    margin-top: 44px;
    margin-bottom: 30px;
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
    text-align: right;
    color: #FFFFFF;
}


#card_certificate .grid-container .course_level {
    margin-right: 80px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #FFFFFF;
}

#card_certificate .grid-container .level_course_description {
    float: left;
    margin-left: 58px;
    margin-top: 90px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    text-align: left;
    color: #FFFFFF;
}

#card_certificate pre {
    color: #FFFFFF !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 30px !important;
}


/*****************************/
/********* about us **********/
/*****************************/


/* mobile */
@media screen and (max-width: 500px) {
    #notification #noti-desktop {
        display: none;
    }

    #notification {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #notification .list-item .notification_item img {
        width: 10.667vw;
        height: 10.667vw;
        margin-right: 4.267vw;
    }

    #notification .title-right {
        font-style: normal;
        font-weight: bold;
        font-size: 4.267vw;
        line-height: 6.400vw;
        display: flex;
        align-items: center;
        text-indent: 2.133vw;
        text-decoration-line: underline;
        color: #4B8DF1;
        text-align: right;
        float: right;
        margin-top: 2.667vw;
    }

    #notification .list-item {
        padding-left: 5.333vw;
        padding-right: 5.333vw;
    }

    #notification .list-item .notification_item {
        display: flex;
        padding-top: 4.267vw;
        padding-left: 4.267vw;
        padding-right: 4.267vw;
        padding-bottom: 1.067vw;
    }

    #notification #noti-mobile .list-item .created {
        color: #59C4AE;
        font-style: normal;
        font-weight: normal;
        font-size: 3.733vw;
        line-height: 6.400vw;
        margin-top: 1.067vw;
        margin-bottom: 2.133vw;
    }

    #notification .empty_state {
        padding-top: 17.333vw;
        padding-bottom: 21.333vw;
    }

    #notification .empty_state .text-1 {
        font-style: normal;
        font-weight: normal;
        font-size: 6.400vw;
        line-height: 8.533vw;
        text-align: center;
        margin-bottom: 6.400vw;
    }

    #notification .empty_state .text-2 {
        font-style: normal;
        font-weight: normal;
        font-size: 5.333vw;
        line-height: 8.533vw;
        text-align: center;
        color: #7A89A6;
        width: 89.600vw;
        margin-left: auto;
        margin-right: auto
    }

    #notification .empty_state img {
        width: 42.667vw;
        height: 42.667vw;
        margin-top: 5.333vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 8.533vw;
    }

    #notification .empty_state button {
        outline: none;
        width: 89.600vw;
        height: 12.800vw;
        border: 0.400vw solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        background: transparent;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #notification .empty_state button a {
        text-decoration: none;
        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        text-transform: uppercase;
        color: #59C4AE;
    }

    #notification .line-break-item {
        border: 0.267vw solid #E8EAF0;
        transform: rotate(180deg);
        width: 100%;
        margin-bottom: 4.267vw;
    }

    #for_mobile #header_mobile #header_text {
        font-size: 2.778vw;
        font-style: normal;
        font-weight: normal;
        width: 78.889vw;
        line-height: 5vw;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        color: #FFFFFF;
    }

    #for_mobile .navbar {
        padding-top: 0px;
        padding-bottom: 0px;
        background: #FFFFFF;
        box-shadow: 0px 0.926vw 0.926vw rgba(0, 0, 0, 0.05);
        border-radius: 0px 0px 2.778vw 2.778vw;
        z-index: 3;

    }

    #for_mobile .navbar-brand {
        margin-right: 0px;
        padding-top: 1.778vw;
    }

    #for_mobile #bg_head img {
        z-index: 1;
        margin-top: -2.222vw;
        width: 100%;
    }

}

#for_mobile #mobile_body #mobile_body_part1 {
    background: linear-gradient(180deg, #EEF3F3 0%, rgba(238, 243, 243, 0) 100%);
    border-radius: 1.389vw;
    font-size: 3.5vw;
    text-align: center;
    padding: 5vw 0.833vw;
    font-style: normal;
    font-weight: 500;
    line-height: 4.444vw;
    color: #16997E;
    width: 96.7%;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #mobile_body_part1 img {
    width: 100%;
    height: auto;
    margin-top: 3.889vw;

}

#for_mobile #mobile_body_part2 {
    margin-top: 2.764vw;
    padding-left: 3.611vw;
    padding-right: 3.611vw;
    padding-bottom: 12.222vw;
}

#for_mobile #mobile_body_part2_text p {
    font-style: normal;
    font-weight: 500;
    font-size: 5vw;
    line-height: 6.667vw;
    text-align: center;

    color: #16997E;
}

#for_mobile #mobile_body_part2_text .text_part2_datail {
    font-style: normal;
    font-weight: 300;
    font-size: 3.4vw;
    line-height: 5.556vw;
    text-align: center;
    color: #0B6067;
    width: 72.222vw;
    word-break: break-word;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile .extra span {
    font-weight: 500;
    word-break: normal;
}

#for_mobile #mobile_body_part3 {
    padding-bottom: 2.778vw;
}

#for_mobile #mobile_body_part3 .number_of_section {
    font-style: normal;
    font-weight: 500;
    font-size: 25.556vw;
    margin-left: 30%;

    background-clip: text;
    background: linear-gradient(180deg, #47D4F2 0%, #242E6C 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
}

#for_mobile #mobile_body_part3_section1 .container {
    padding: 0;
}

#for_mobile #mobile_body_part3_section1 .title_detail {
    position: absolute;
    margin-top: 18%;
    margin-left: 14%;
}

#for_mobile #mobile_body_part3_section1 .title_detail p {
    font-style: normal;
    font-weight: 500;
    font-size: 6.111vw;
    margin-bottom: -2%;
    background-clip: text;
    background: linear-gradient(180deg, #27DEBF 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);

}

#for_mobile #mobile_body_part3 .container .col-2 {
    padding-right: 0px;
}

#for_mobile #mobile_body_part3 .container .col-10 {
    padding-left: 0px;
    padding-top: 12%;
}

#for_mobile #mobile_body_part3_section1 .content_detail {
    font-weight: 300;
    font-size: 3.333vw;
    line-height: 10%;
    background-color: transparent;
    color: #0B6067;
    margin-top: 39%;
    margin-left: 14%;
    position: absolute;
}

#for_mobile #mobile_body_part3 .bg_3_section1 {
    width: 100%;
    margin-top: 14%;
}

#for_mobile #mobile_body_part3_section2 .number_of_section {
    margin-left: 76.18%;
    margin-top: -24%;
}

#for_mobile #mobile_body_part3_section2 .title_detail p {
    font-style: normal;
    font-weight: 500;
    font-size: 6.667vw;
    align-items: center;
    text-align: right;
    background-clip: text;
    background: linear-gradient(180deg, #24D3B4 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-bottom: -8%;
}

#for_mobile #mobile_body_part3_section2 .title_detail p span {
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    align-items: center;
    text-align: right;

    background-clip: text;
    background: linear-gradient(180deg, #004951 0%, #16997E 100%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
}

#for_mobile #mobile_body_part3_section2 .title_detail {
    margin-top: 16%;
    position: absolute;
    right: 10%;
    z-index: 1;
}

#for_mobile #mobile_body_part3_section2 .bg_3_section2 {
    width: 96.67%;
    z-index: -1;
    margin-top: -10.8%;
    margin-left: 3%;
}

#for_mobile #mobile_body_part3_section2 .content_detail {
    background: linear-gradient(180deg, #D0E4F4 0%, rgba(240, 245, 249, 0) 100%);
    border-radius: 2.778vw;
    padding: 6.389vw 5.556vw;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: -14%;
}

#for_mobile #mobile_body_part3_section2 .content_detail p {
    font-style: normal;
    font-weight: 300;
    font-size: 3.333vw;
    line-height: 6.667vw;
    word-break: break-word;
    color: #0B6067;
}

#for_mobile #mobile_body_part4 #mobile_body_part4_section1 .title_detail {
    margin-top: 4%;
}

#for_mobile #mobile_body_part4 .title_detail p {
    font-style: normal;
    font-weight: 500;
    font-size: 3.333vw;
    line-height: 36%;
    text-align: right;
    margin-right: 25.83%;
    color: #0B6067;
}

#for_mobile #mobile_body_part4 .bg_4_section1 {
    width: 86%;
    margin-left: 14%;
    margin-top: -14%;
}

#for_mobile #mobile_body_part4_section2 {
    margin-top: 5%;
}

#for_mobile #mobile_body_part4_section2 .bg_4_section2 {
    width: 100%;
}

#for_mobile #mobile_body_part4_section2 .container {
    padding-left: 0px;
    padding-right: 0px;
}

#for_mobile #mobile_body_part4_section2 .title_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 4.444vw;
    background-clip: text;
    background: linear-gradient(109.76deg, #53CD9F 5.7%, #16997E 78.09%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    width: 80%;
    margin-top: 30%;
    margin-left: 6%;
}

#for_mobile #mobile_body_part4_section2 .content_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 3.333vw;
    line-height: 140%;
    ;
    color: #0B6067;
    margin-top: 6%;
    width: 78%;
    margin-left: 6%;
    word-break: break-word;
}


#for_mobile #mobile_body_part4_section2 .col-7 {
    padding-right: 0px;
}

#for_mobile #mobile_body_part4_section2 .col-5 {
    padding-left: 0px;
}

#for_mobile #mobile_body_part5 {
    margin-top: 10%;
    background-image: url(/static/images/bg_5_section1.png);
    background-size: 100% auto;
    padding-top: 55%;
}

#for_mobile #mobile_body_part5 .title_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 5.556vw;
    text-align: center;
    background-clip: text;
    background: linear-gradient(134.74deg, #536DFE -4.3%, #3246A2 83.94%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-left: 8.1%;
    margin-right: 8.1%;
}

#for_mobile #mobile_body_part5 .content_detail {
    margin-left: 12%;
    font-style: normal;
    font-weight: 300;
    font-size: 3.333vw;
    color: #0B6067;

    line-height: 5vw;
    margin-top: 16%;
    width: 76vw;
    word-break: break-word;
}

#for_mobile #mobile_body_part5 .footer_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 6.667vw;
    margin-left: 8%;
    background-clip: text;
    background: linear-gradient(125.15deg, #53CD9F -6.41%, #0B6067 80.42%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    padding-top: 2%;
    padding-bottom: 55%;
}

#for_mobile #mobile_body_part5 .footer_detail p {
    margin-bottom: 0px;
}

#for_mobile #mobile_body_part6 {
    margin-top: 4%
}

#for_mobile #mobile_body_part6 .content_detail {
    margin-left: 9%;
    margin-right: 9%;
    font-style: normal;
    font-weight: normal;
    font-size: 3.333vw;
    text-align: center;
    color: #16997E;
}

#for_mobile #mobile_body_part6_section1 .bg_6_section1 {
    width: 89.733%;
    margin-left: 5.07%;
    margin-top: 14%;
}

#for_mobile #mobile_body_part6_section2 {
    margin-top: 18%;
}

#for_mobile #mobile_body_part6_section2 .bg_6_section2 {
    width: 100%;
    margin-top: -24%;
}

#for_mobile #mobile_body_part6_section2 .title_1 {
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    line-height: 2.2vw;
    text-align: right;
    margin-right: 58.33%;
    color: #0B6067;
}

#for_mobile #mobile_body_part6_section2 .title_2 {
    font-style: normal;
    font-weight: 500;
    font-size: 2.778vw;
    line-height: 7.222vw;
    text-align: right;
    margin-right: 58.33%;
    color: #16997E;
    margin-top: -1%;
}

#for_mobile #mobile_body_part6_section2 .content_detail_1 {
    font-style: normal;
    font-weight: normal;
    font-size: 5.556vw;
    line-height: 5.556vw;
    text-align: center;
    margin-top: -39%;
    color: #27DEBF;
}

#for_mobile #mobile_body_part6_section2 .content_detail_2 {
    font-style: normal;
    font-weight: 500;
    font-size: 3.333vw;
    line-height: 22%;
    text-align: right;
    margin-top: 18%;
    color: #FFFFFF;
    margin-right: 52.78%;
}

#for_mobile #mobile_body_part6_section3 {
    background: linear-gradient(180deg, #E0E8E7 0%, rgba(231, 238, 237, 0) 52.08%, #EEF3F3 100%);
    border-radius: 1.389vw;
    width: 94.44%;
    margin-top: 8%;
    margin-left: 2.78%;
}

#for_mobile #mobile_body_part6_section3 .bg_6_section3 {
    width: 95.3%;
    margin-left: 2.4%;
    margin-top: 4%;
    margin-bottom: 10%;
}

#for_mobile #mobile_body_part6_section4 .bg_6_section4 {
    width: 100%;
    margin-top: 5%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_1 {
    position: absolute;
    width: 65.83%;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    color: #0B6067;
    margin-top: 16.4%;
    margin-left: 28%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_2 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 2.778vw;
    line-height: 0.4vw;
    ;
    text-align: right;
    color: #0B6067;
    margin-top: 64%;
    margin-left: 15.6%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_3 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 1.721vw;
    margin-top: 78.6%;
    margin-left: 20.3%;
    color: #FFFFFF;
}

#for_mobile #mobile_body_part6_section4 .content_detail_4 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    line-height: 0.4vw;
    color: #0B6067;
    margin-top: 93%;
    margin-left: 11%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_5 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    line-height: 0.4vw;
    color: #0B6067;
    margin-top: 176%;
    margin-left: 14.2%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_6 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    line-height: 0.4vw;
    text-align: center;
    color: #0B6067;
    margin-top: 207%;
    margin-left: 23%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_6 span {
    font-style: normal;
    font-weight: normal;
    font-size: 3.333vw;
    line-height: 0.4vw;
    text-align: center;
    color: #DF8800;
}

#for_mobile #mobile_body_part6_section4 .content_detail_7 {
    position: absolute;
    margin-top: 266%;
    margin-left: 14%;
}

#for_mobile #mobile_body_part6_section4 .content_detail_7 .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 6.667vw;
    line-height: 0.4vw;
    color: #F53D2D;
}

#for_mobile #mobile_body_part6_section4 .content_detail_7 .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 5vw;
    line-height: 1vw;
    color: #004951;
    margin-top: 26%;
}


#for_mobile #mobile_body_part6_section4 .content_detail_8 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    color: #FFFFFF;
    margin-top: 282%;
    margin-left: 19%;
}

#for_mobile #mobile_body_part7 .title_detail1 {
    font-style: normal;
    font-weight: 500;
    font-size: 8.333vw;
    text-align: center;
    background-clip: text;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    margin-bottom: 2%;
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
}

#for_mobile #mobile_body_part7 .title_detail2 {
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 5vw;
    color: #FFFFFF;
    padding: 2% 10%;
    background: linear-gradient(180deg, #27DEBF 0%, #0B6067 100%);
    border-radius: 0px;
}

#for_mobile #mobile_body_part7 .bg_7_section1 {
    width: 100%;
}

#for_mobile #mobile_body_part7 .content_detail {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 5.556vw;
    line-height: 4vw;
    color: #16997E;
    margin-top: 115%;
    margin-left: 27%;
}

#for_mobile #mobile_body_part8 {
    margin-top: 1%;
}

#for_mobile #mobile_body_part8 .title_detail {
    background-clip: text;
    background: linear-gradient(180deg, #88D1CB 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    font-style: normal;
    font-weight: 500;
    font-size: 3.333vw;
    text-align: center;
}

#for_mobile #mobile_body_part8 .bg_8_section1 {
    width: 76.87%;
    margin-left: 11.67%;
    margin-top: 7%;
    margin-bottom: 10%;
}

#for_mobile #mobile_body_part7 {
    margin-top: 10%;
}

#for_mobile #mobile_body {
    margin-top: 1.667vw;
}

#for_mobile {
    background: white;
}

#for_mobile #top .bg_head {
    width: 100%;
}

/* desktop */

#for_desktop .for-web-about-us .menu-about-us-web {
    overflow: hidden;
    background: linear-gradient(180deg, #8BD0AF 0%, #16997E 100%);
    border-radius: 0px 0px 30px 30px;
    z-index: 5;
    margin-top: -8px;
    height: 68px;
    padding-top: 32px;
}

.menu-about-us-web button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.menu-about-us-web button.active,
.menu-about-us-web button:hover {
    color: #00FFD4;
}

.menu-about-us-web .tablinks {
    padding: 0px;

    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 12px;

    text-align: center;

    color: #FFFFFF;
}

.for-web-about-us .tablinks-items {
    left: 21%;
    right: auto;
    position: absolute;
    width: 100%;
}

.for-web-about-us .tablinks-items .item {
    padding-left: 5%;
}

#for_desktop .bar_distance {
    height: 10px;
}

#for_desktop .padding_left_90 {
    padding-left: 90px;
}

#for_desktop #about_us .sec1 {
    background: linear-gradient(180deg, #43E8E1 0%, #85FFFA 100%);
    padding-top: 80px;
    padding-bottom: 26px;
    margin-top: -3%;
    z-index: -1;
    position: relative;
}

#for_desktop #about_us #tab1_sec1_1 {
    width: 1200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #about_us #tab1_sec1_2 {
    margin-top: -80px;
    border-radius: 20px;
    outline: none;
    border: none;
    overflow: hidden;
}

#for_desktop #about_us .sec2 {
    background: linear-gradient(180deg, #EEF3F3 0%, rgba(238, 243, 243, 0) 100%);
    border-radius: 10.5502px;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    padding-top: 6%;
    padding-bottom: 6%;
}

#for_desktop #about_us #tab1_sec2_1 {
    width: 64.75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #about_us .sec3 {
    background: linear-gradient(180deg, #E3F2FD 0%, #E3FFFA 36.46%, #FFFFFF 100%);
    border-radius: 20px 20px 200px 200px;
    padding-top: 3%;
    padding-bottom: 3%;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
}

#for_desktop #about_us .sec3 #tab1_sec3_1 {
    display: block;
    margin-left: 26.18%;
    width: 73.82%;
}

#for_desktop #about_us .sec3 .text_sec3 {
    position: absolute;
    margin-top: 76px;
    margin-left: 74px;
}

#about_us .sec3 .text_sec3 .text_detail1 {
    font-style: normal;
    font-weight: 500;
    font-size: 42px;
    text-align: right;
    color: #16997E;
}

#about_us .sec3 .text_sec3 .text_detail2 {
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 16px;
    text-align: right;
    color: #0B6067;
    margin-top: 30px;
}

#about_us .sec3 .text_sec3 .text_detail2 span {
    font-style: normal;
    font-weight: 500;
}

#about_us .sec4 {
    margin-top: 70px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#about_us .sec4 #tab1_sec4_1 {
    width: 1072px;
}

#about_us .sec4 .sec4_1 .text_sec4 {
    position: absolute;
}

#about_us .sec4 .sec4_2 .text_sec4 {
    position: absolute;
}

#about_us .sec4 .sec4_1 .title_detail {

    font-style: normal;
    font-weight: 500;
    font-size: 60.3209px;
    line-height: 45px;
    background-clip: text;
    background: linear-gradient(180deg, #24D3B4 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-left: 160px;
    margin-top: 42px;
}

#about_us .sec4 .sec4_1 .content_detail {
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 30px;
    color: #0B6067;
    margin-left: 170px;
    margin-top: 50px;
}

#about_us .sec4 #tab1_sec4_2 {
    width: 1047.65px;
    margin-left: 175px;
    float: right;
    position: relative;
    z-index: -1;
    margin-bottom: -180px;
}

#about_us .sec4 .sec4_2 .text_sec4 {
    position: absolute;
    font-style: normal;
    width: 96%;
    font-weight: 500;
    font-size: 69.9264px;
    background-clip: text;
    background: linear-gradient(180deg, #24D3B4 0%, #16997E 100%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
}

#about_us .sec4 .sec4_2 .text_sec4 span {
    background-clip: text;
    background: linear-gradient(180deg, #004951 0%, #16997E 100%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    font-style: normal;
    font-weight: 500;
    font-size: 40.7904px;
    text-align: right;
}

#about_us .sec4 .sec4_2 .text_sec4 .title_detail {
    margin-top: 240px;
    margin-left: 660px;
}

#about_us .sec4 .sec4_2 .text_sec4 .title_detail {
    margin-bottom: 0px;
    /* width: fit-content; */
}

#about_us .sec4 .sec4_2 .text_sec4 .title_detail p {
    margin-bottom: 0px;
}

#about_us .sec4 .sec4_2 .text_sec4 .title_detail .position {
    margin-top: -24px;
    text-align: right;
}

#about_us .sec4 .sec4_2 .content_detail {
    width: 900px;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;
    align-items: center;
    color: #0B6067;
    background: linear-gradient(180deg, #D0E4F4 0%, rgba(240, 245, 249, 0) 100%);
    border-radius: 25.1337px;
    padding: 55px 160px;
    margin-left: auto;
    margin-right: 200px;
    margin-top: -114px;
    clear: right;
}

#about_us .sec4 .sec4_3 {
    float: right;
    margin-top: 119px;
    margin-right: 20px;
}

#about_us .sec4 .sec4_3 #tab1_sec4_3 {
    width: 890px;
}

#about_us .sec4 .sec4_3 .text_sec4 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 33.364px;
    line-height: 36px;
    color: #0B6067;
    margin-left: 180px;
    margin-top: 20px;
}

#about_us .sec5 {
    margin-top: 860px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#about_us .sec5 .container {
    padding-left: 0px;
    padding-right: 0px;
}

#about_us .sec5 .tab1_sec5_1 {
    width: 569.05px;
    margin-left: 20px;
}

#about_us .sec5 .title_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 44px;
    line-height: 64px;
    width: 290px;
    background-clip: text;
    background: linear-gradient(109.76deg, #53CD9F 5.7%, #16997E 78.09%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-top: 76px;
}

#about_us .sec5 .content_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 31.1724px;
    line-height: 30px;
    color: #0B6067;
    margin-top: 40px;
}

#about_us .sec6 {
    margin-top: 178.31px;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}

#about_us .sec6 .tab1_sec6_1 {
    width: 1200px;
}

#about_us .sec6 .title_detail {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 54px;
    line-height: 82px;
    width: 860px;
    background-clip: text;
    background: linear-gradient(134.74deg, #536DFE -4.3%, #02187C 83.94%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    text-align: center;
    margin-top: 650px;
    margin-left: 170px;
}

#about_us .sec6 .content_detail {
    position: absolute;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;
    color: #0B6067;
    margin-left: 320px;
    margin-top: 970px;
}

#about_us .sec6 .footer_detail {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    line-height: 76px;
    background-clip: text;
    background: linear-gradient(125.15deg, #53CD9F -6.41%, #0B6067 80.42%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-top: 1644px;
    margin-left: 120px;
}

#about_us .sec7 {
    margin-top: 118px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#about_us .sec7 .content_detail {
    font-style: normal;
    font-weight: normal;
    font-size: 32.6508px;
    line-height: 44px;
    text-align: center;
    color: #16997E;
}

#about_us .sec7 .content_detail span {
    font-weight: 500;
}

#about_us .sec7 .tab1_sec7_1 {
    width: 1030px;
    margin-left: 85px;
    margin-top: 100px;
}

#about_us .sec7 .title_detail {
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 60px;
    text-align: center;
    background-clip: text;
    background: linear-gradient(180deg, #88D1CB 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-top: 120px;
}

#about_us .sec7 .tab1_sec7_2 {
    width: 884px;
    margin-top: 90px;
    margin-left: 178px;
}

#system {
    margin-top: 70px;
}

#system .sec1,
#system .sec1 .tab2_sec1_1 {
    width: 100%;
}

#system .sec1 .title_1 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 40.7399px;
    line-height: 40px;
    text-align: right;
    color: #0B6067;
    margin-left: 160px;
    margin-top: 74px;
}

#system .sec1 .title_2 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 29.0999px;
    line-height: 76px;
    color: #16997E;
    margin-top: 190px;
    margin-left: 160px;
}

#system .sec1 .container {
    width: 1200px;
}

#system .sec1 .tab2_sec1_2 {
    width: 560px;
    margin-left: -90px;
}

#system .sec1 .content_detail_1 {
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
    background-clip: text;
    background: linear-gradient(180deg, #27DEBF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
}

#system .sec1 .title_3 {
    background: linear-gradient(180deg, #27DEBF 0%, #233862 67.19%);
    border-radius: 206.61px 206.61px 0px 0px;
    text-align: center;
    padding-top: 183px;
    margin-top: -146px;
}

#system .sec1 .title_3 .tab2_sec1_bg1 {
    width: 100%;
    margin-top: 49px;
}


#system .sec1 .content_detail_2 {
    font-style: normal;
    font-weight: 500;
    font-size: 34.9199px;
    line-height: 36px;
    text-align: right;
    color: #FFFFFF;
    background: linear-gradient(90deg, #02D1A6 0%, #085061 100%);
    height: 221px;
}

#system .sec1 .content_detail_2 .tab2_sec1_bg2 {
    width: 431px;
    float: left;
    margin-left: 60px;
}

#system .sec1 .content_detail_2 .col-5 {
    margin-top: 40px;
}

#system .sec2 {
    width: 1200px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#system .sec2 .tab2_sec2_2 {
    width: 1154px;
    float: right;
}

#system .sec2 .title_1 {
    position: absolute;
    background-clip: text;
    background: linear-gradient(180deg, #24D3B4 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 70px;
    line-height: 70px;
    margin-top: 151px;
    margin-left: 760px;
    text-align: left;
}

#system .sec2 .title_2 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 44px;
    background-clip: text;
    background: linear-gradient(180deg, #004951 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    margin-top: 366px;
    margin-left: 760px;
}

#system .sec3 {
    width: 1200px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

#system .sec3 .tab2_sec3_1 {
    width: 100%;
    margin-top: 60px;
}

#system .sec3 .text_detail1 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 23.28px;
    line-height: 47px;
    color: #0B6067;
    width: 552.9px;
    margin-top: 180px;
    margin-left: 395.06px;
}

#system .sec3 .text_detail1 span,
#system .sec3 .text_detail2 span {
    font-weight: 500;
}

#system .sec3 .text_detail2 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 23.28px;
    line-height: 30px;
    text-align: right;
    color: #0B6067;
    margin-top: 664px;
    margin-left: 320px;
}

#system .sec3 .text_detail3 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 23.28px;
    line-height: 30px;
    color: #0B6067;
    margin-top: 965px;
    margin-left: 400.88px;
}

#system .sec3 .text_detail4 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 23.28px;
    line-height: 30px;
    color: #0B6067;
    margin-top: 1836px;
    margin-left: 229.19px;
}

#system .sec3 .text_detail5 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 23.28px;
    line-height: 30px;
    text-align: center;
    color: #0B6067;
    margin-top: 2164px;
    margin-left: 360px;
}

#system .sec3 .text_detail5 span {
    color: #DF8800;
    font-weight: 500;
    font-size: 29.0999px;
}

#system .sec3 .text_detail6 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 52.3799px;
    line-height: 58px;
    text-align: right;
    color: #004951;
    margin-top: 2760.08px;
    margin-left: 220px;
}

#system .sec3 .text_detail6 span {
    font-size: 69.8399px;
    color: #F53D2D;
}

#system .sec3 .text_detail6 .text {
    margin-top: 36px;
    line-height: 44px;
}

#system .sec4 {
    margin-top: 20px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-style: normal;
    font-weight: normal;
    font-size: 29.0999px;
    line-height: 58px;
    text-align: center;
    color: #16997E;
}


#q_and_a .sec1 .tab5_sec1_1 {
    width: 692px;
    margin-top: 53px;
    transform: inherit;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#q_and_a .sec1 {
    background: linear-gradient(180deg, #B1F1E6 0%, rgba(239, 231, 255, 0) 100%);
    transform: rotate(180deg);
    padding-top: 1px;
    padding-bottom: 90px;
}

#q_and_a .sec1 .title_1 {
    font-style: normal;
    font-weight: 500;
    font-size: 54.6429px;
    background-clip: text;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    margin-top: 40px;
    transform: inherit;
    text-align: center;
}

#q_and_a .sec2 {
    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 46px;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #27DEBF 0%, #0B6067 100%);
    border-radius: 0px;
    height: 100px;
    padding-top: 16px;
    margin-top: -2px;
}

#q_and_a .sec3 {
    background: linear-gradient(180deg, rgba(221, 226, 255, 0.4) 0%, #FFFFFF 100%);
}

#q_and_a .sec3 .tab5_sec3_1 {
    width: 1200px;
    display: block;
}

#q_and_a .sec3 .position_sec3 {
    margin-left: auto;
    width: fit-content;
}


@media screen and (min-width: 1401px) {
    #q_and_a .for_1200px {
        display: none;
    }

    #q_and_a .for_1900px {
        display: block;
    }
}

#q_and_a .sec3 .title_1 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 66.6669px;
    line-height: 80px;
    color: #16997E;
    margin-top: -908px;
    margin-left: 300px;
}

#q_and_a .for_1900px .container {
    padding: 0;
}

#q_and_a .for_1900px .tab5_sec3_1 {
    width: 1200px;
    display: block;
    float: right;
}

#q_and_a .for_1900px .col-4 {
    display: flex;
    align-items: center;
}

#q_and_a .for_1900px .title_1 {
    margin-left: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 70px;
    line-height: 80px;
    color: #16997E;
    padding-top: 30px;
}

@media screen and (min-width: 0px) and (max-width: 1400px) {
    #q_and_a .for_1200px {
        display: block;
    }

    #q_and_a .for_1900px {
        display: none;
    }

}


#find .sec1 {
    margin-top: -36px;
    background: linear-gradient(180deg, #B1F1E6 0%, rgba(239, 231, 255, 0) 100%);
    border-radius: 0px;
    position: relative;
    z-index: -1;
    padding-top: 120px;
}

#find .sec1 .tab4_sec1_1 {
    position: relative;
    z-index: -1;
    width: 595px;
    margin-left: -200px;
}

#find .sec1 .title_1 {
    position: absolute;
    background-clip: text;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;

    font-style: normal;
    font-weight: 500;
    font-size: 70px;
    margin-top: 56px;
    margin-left: 140px;
}

#find .sec1 .container {
    width: 1200px;
}

#find .sec1 .title_1 span {
    font-style: normal;
    font-weight: 500;
    font-size: 54px;
}

#find .sec2 {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#find .sec2 .tab4_sec2_1 {
    margin-top: 80px;
    width: 1137px;
    float: right;
}

#find .sec2 .title_1 {
    margin-top: 164px;
    position: absolute;
    background-clip: text;
    background: linear-gradient(96.03deg, #24D3B4 3.86%, #16997E 90.31%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 53.3585px;
    line-height: 67px;
    margin-left: 210px;
}

#find .sec2 .title_1 p {
    margin-bottom: 0px;
}

#find .sec2 .title_1 span {
    margin-top: -18px;
}

#find .sec2 .title_2 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    color: #0B6067;
    margin-top: 400px;
    margin-left: 624px;
}

#find .sec3 {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

#find .sec3 .tab4_sec3_1 {
    margin-top: 55.45px;
    width: 1200px;
}

#find .sec3 .title_1 {
    position: absolute;
    background-clip: text;
    background: linear-gradient(96.03deg, #24D3B4 3.86%, #16997E 90.31%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 66.5112px;
    line-height: 83px;
    margin-left: 250px;
    margin-top: 126px;
}

#find .sec3 .title_2 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 33.2556px;
    line-height: 36px;
    color: #0B6067;
    margin-top: 244px;
    margin-left: 254px;
}

#find .sec3 .title_3 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 33.2556px;
    line-height: 36px;
    text-align: right;
    color: #0B6067;
    margin-top: 1010px;
    margin-left: 421px;
}

#find .sec3 .title_4 {
    position: absolute;
    background-clip: text;
    background: linear-gradient(109.76deg, #53CD9F 5.7%, #16997E 78.09%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 44.3408px;
    line-height: 67px;
    margin-top: 1720px;
    margin-left: 730px;
    width: 299px;
}

#find .sec3 .title_5 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 30.0405px;
    line-height: 30px;
    color: #0B6067;
    margin-top: 1886px;
    margin-left: 730px;
}

#find .sec3 .title_6 {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    font-size: 33.2556px;
    line-height: 34px;
    color: #0B6067;
    margin-top: 2312px;
    margin-left: 218px;
}

#find .sec3 .title_6 span {
    font-style: normal;
    font-weight: 500;
    font-size: 33.2556px;
    background-clip: text;
    background: linear-gradient(180deg, #27DEBF 0%, #16997E 100%);

    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
}

#find .sec3 .title_6 .detail {
    margin-bottom: 44px;
}

#rule .sec1 {
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 10px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 170px;
}

#rule .sec2,
#rule .sec3 {
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 20px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 170px;
}

#rule .sec1 .title_1 {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 45px;
    text-align: center;
    color: #16997E;
}

#rule .sec1 .title_2 {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #004951;
    text-align: center;
    margin-top: 20px;
}

#rule .sec1 .title_2 span,
#rule .sec2 .title_2 span {
    color: #16997E;
}

#rule .sec1 .title_3 .space,
#rule .sec1 .title_4 .space,
#rule .sec2 .title_2 .space,
#rule .sec2 .title_3 .space,
#rule .sec2 .title_4 .space,
#rule .sec2 .title_5 .space,
#rule .sec3 .title_2 .space {
    margin-right: 20px;
}

#rule .sec1 .title_3 {
    margin-left: 204px;
    margin-top: 30px;
    margin-bottom: 20px;
}

#rule .sec1 .title_3 .detail_1,
#rule .sec1 .title_3 .detail,
#rule .sec1 .title_4 .detail_1,
#rule .sec2 .title_2 .detail_1,
#rule .sec2 .title_3 .detail_1,
#rule .sec2 .title_4 .detail_1,
#rule .sec2 .title_5 .detail_1,
#rule .sec3 .title_2 .detail_1,
#rule .sec3 .title_2 .detail_2,
#rule .sec3 .title_2 .detail_3 {
    display: flex;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;

    color: #004951
}

#rule .sec1 .title_3 .detail_1 span,
#rule .sec1 .title_3 .detail span,
#rule .sec1 .title_4 .detail_1 span,
#rule .sec1 .title_5 .detail_1 span,
#rule .sec2 .title_3 .detail_1 span,
#rule .sec2 .title_4 .detail_1 span {
    color: #16997E;
}

#rule .sec1 .title_3 .detail {
    margin-left: 30px;
}

#rule .sec1 .title_4 .detail_1 {
    display: flex;
}

#rule .sec1 .title_4 {
    margin-left: 204px;
    margin-top: 20px;
}

#rule .sec1 .title_4 .detail {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #004951;
    margin-left: 30px;
}

#rule .sec1 .title_4 .detail p,
#rule .sec2 .title_2 .detail p,
#rule .sec2 .title_5 .detail p {
    margin-bottom: 0px;
}

#rule .sec1 .title_5 {
    background: #FFFFFF;
    border: 2px solid #16997E;
    box-sizing: border-box;
    border-radius: 40px;
    padding: 18px 114px;
    margin-top: 40px;
    text-align: center;
    margin-bottom: 18px;
}

#rule .sec1 .title_5 .detail_1 {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #004951;
}

#rule .sec2 .title_1 {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 45px;
    text-align: center;
    color: #16997E;
    margin-bottom: 40px;
}

#rule .sec2 .title_2 {
    margin-left: 124px;
}

#rule .sec2 .title_2 .detail,
#rule .sec2 .title_3 .detail,
#rule .sec2 .title_5 .detail {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #004951;
    margin-left: 30px;
}

#rule .sec2 .title_3,
#rule .sec2 .title_4,
#rule .sec2 .title_5 {
    margin-top: 30px;
    width: fit-content;
    margin-left: 124px;
}

#rule .sec2 .title_5 {
    margin-bottom: 40px;
}

#rule .sec3 .title_1 {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 45px;
    text-align: center;
    margin-bottom: 96px;

    color: #16997E;
}

#rule .sec3 .title_2 .detail_1,
#rule .sec3 .title_2 .detail_2 {
    width: 748px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}

#rule .sec3 .title_2 .detail_3 {
    width: 748px;
    margin-left: auto;
    margin-right: auto;
}

#rule .sec3 .title_2 .detail_4 {
    width: 748px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 140px;
}

#rule .sec3 .title_2 .detail_4 {
    margin-left: 88px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;

    color: #004951;
}

@media screen and (min-width: 0px) and (max-width: 500px) {
    #for_mobile {
        display: block;
    }

    /* show it on small screens */
    #for_desktop {
        display: none;
    }

    /* hide it on small screens */
    #myProfile_fordesktop {
        display: none;
    }

    #myProfile_formobile {
        display: block;
    }

    #login_desktop {
        display: none;
    }

    #login_mobile {
        display: block;
    }

    body {
        background: white;
    }

    #profile_fordesktop {
        display: none;
    }

    #profile_formobile {
        display: block;
    }
}

@media screen and (min-width: 501px) {
    #for_mobile {
        display: none;
    }

    /* hide it on small screens */
    #for_desktop {
        min-height: calc(100vh - 76px);
        background-color: #FAFAFA;
        display: block;
    }

    /* show it on small screens */
    #myProfile_fordesktop {
        display: block;
    }

    #myProfile_formobile {
        display: none;
    }

    #login_desktop {
        display: block;
    }

    #login_mobile {
        display: none;
    }

    #profile_fordesktop {
        display: block;
    }

    #profile_formobile {
        display: none;
    }
}


/*****************************/
/******** access code ********/
/*****************************/

.text-field-access {
    width: 296px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 16px;
}

#access_code ::placeholder {
    color: #C4C9C8;
}

.submit-button-access-jpc {
    width: 160px;
    height: 40px;
    left: 346px;
    top: 56px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

.submit-button-access:hover {
    border: 1.5px solid #71E8C4;
    color: #71E8C4;
}

.submit-button-access:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

.w-input-acess {
    padding: 16px !important;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 27px;
    color: #9E9E9E;
    outline: none;
}

#list-access-code {
    margin-top: 20px;
}

.list-test {
    background: #FFFFFF;
    border-radius: 10px;
    text-align: center;
    padding-top: 17px;
    padding-bottom: 17px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 25px;
    color: #0B6067;
}

.test_code {
    padding-top: 250px;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: #16997E;

}

.list-test-code {
    padding-top: 17px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 25px;
    color: #16997E;
}



/*****************************/
/******** home page ********/
/*****************************/

#jobpasscard_home_page .carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    border-radius: 100%;
}

#jobpasscard_home_page #home_titile {
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#jobpasscard_home_page #home_titile #p1 {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 20px;
    color: #004951;
    margin-bottom: 30px;
}

#jobpasscard_home_page #home_titile #p2 {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    color: #16997E;
}

#jobpasscard_home_page #home_titile p {
    margin-bottom: 0px !important;
}

#jobpasscard_home_page #test_list_home {
    max-width: 1200px;
    width: 1040px;
    background: #EEF3F3;
    border-radius: 10px 10px 0px 0px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#jobpasscard_home_page #myTabContent-coursegroup {
    background: inherit;
    width: inherit;
    min-height: 440px;
}

#jobpasscard_home_page #findjob {
    max-width: 1200px;
    width: 1040px;
    background: #EEF3F3;
    border-radius: 10px;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 3.5%;
    padding-right: 3%;

    margin-top: 1.5%;
    margin-left: auto;
    margin-right: auto;
}

#jobpasscard_home_page #findjob .myfindjob_item1 {
    left: 125px;
}

#jobpasscard_home_page #findjob .myfindjob_item2 {
    left: 393px;
}

#jobpasscard_home_page #findjob .myfindjob_item3 {
    left: 661px;
}

#jobpasscard_home_page #findjob .first_section {
    display: flex;
    width: 86.27%;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (min-width: 1300px) {

    #jobpasscard_home_page .carousel-control-prev img,
    .carousel-control-next img {
        width: 150%;
    }

    #jobpasscard_home_page #home_titile #p1 {
        font-size: 250%;
    }

    #jobpasscard_home_page #home_titile #p2 {
        font-size: 150%;
    }
}

#jobpasscard_home_page .myfindjob {
    width: 34%;
}

#jobpasscard_home_page .myfindjob img {
    width: 95%;
}

#jobpasscard_home_page .Profilejob {
    padding-left: 40px;
}

#jobpasscard_home_page .Profilejob img {
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    margin-top: 6%;
}

#jobpasscard_home_page .Profilejob .btn {
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 25px;
    text-align: center;
    color: #EEF3F3;
    background: #16997E;
    border-radius: 10px;
    padding: 1.5% 3%;
    margin-top: -10%;
    margin-left: 31.21%;
}

#jobpasscard_home_page .Profilejob .btn:hover,
#jobpasscard_home_page .Profilejob .btn:active,
#jobpasscard_home_page #salary .btn:hover,
#jobpasscard_home_page #salary .btn:active,
#jobpasscard_home_page #character .btn:hover,
#jobpasscard_home_page #character .btn:active,
#jobpasscard_home_page .Province .btn:hover,
#jobpasscard_home_page .Province .btn:active {
    background: #3CCA92;
    color: #FFFFFF;
}

#jobpasscard_home_page #jobtype {
    width: 1040px;
    max-width: 1200px;
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 1.5%;
    margin-left: auto;
    margin-right: auto;

    padding-top: 4%;
    padding-bottom: 2%;
    padding-left: 201px;
    padding-right: 185px;
}

#jobpasscard_home_page #jobtype .padding_left_col {
    padding-left: 0px !important;
}

.margin_left {
    margin-left: 0px !important;
}

.joptype_img1 {
    padding-bottom: 22%;
    margin-left: 16%;
}

.margin_left_12p {
    margin-left: 12% !important;
}

.joptype_img2 {
    padding-bottom: 18%;
}

.width_90p {
    width: 90%;
}

.last_JT2 {
    padding-left: 0px;
    border-right: none;
}

.width_65p {
    width: 65%;
}

#jobpasscard_home_page #jobtype #JT1 {
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    color: #0B6067;
}

#jobpasscard_home_page #jobtype .container {
    padding-top: 4%;
}

#jobpasscard_home_page #jobtype .JT2 {
    padding-top: 24%;
    border-right: 2px solid #ACD9CE;
    padding-bottom: 30%;
}


.padding_top_26p {
    padding-top: 26%;
}

#jobpasscard_home_page #jobtype .JT2 img {
    width: 40%;
    padding-bottom: 22%;
}

#jobpasscard_home_page #jobtype .JT2 .text1 {
    width: 65%;
    margin-left: 22%;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
    color: #16997E;
    text-decoration: none;
}

#jobpasscard_home_page #jobtype .JT2 .text2 {
    width: 50%;
    margin-left: 22%;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
    color: #0B6067;
    text-decoration: none;
}

#jobpasscard_home_page #jobtype .JT2 a:hover {
    text-decoration: none;
}

#jobpasscard_home_page #jobtype .col-4 {
    padding-right: 0px !important;
}

#jobpasscard_home_page #salary {
    max-width: 1200px;
    width: 1040px;
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 1.5%;
    margin-left: auto;
    margin-right: auto;

    padding-top: 6%;
    padding-bottom: 3%;
}

#jobpasscard_home_page #salary img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%
}

#jobpasscard_home_page #salary .btn {
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 25px;
    text-align: center;
    color: #EEF3F3;
    background: #16997E;
    border-radius: 5px;
    padding: 0.8% 4%;
    margin-left: 10%;
    margin-top: -18%;
}

#jobpasscard_home_page #character {
    max-width: 1200px;
    width: 1040px;
    background: transparent;
    margin-top: 1.5%;
    margin-left: auto;
    margin-right: auto;
}

#jobpasscard_home_page #character img {
    display: block;
    width: 88%;
    margin-top: 6%;
}

#jobpasscard_home_page #character .btn {
    font-style: normal;
    font-weight: 500;
    font-size: 23px;
    line-height: 25px;
    text-align: center;

    color: #EEF3F3;
    background: #16997E;
    border-radius: 5px;

    padding: 9px 25px;

    margin-left: 620px;
    margin-top: -260px;
}

#jobpasscard_home_page #transportation {
    max-width: 1200px;
    width: 1040px;
    background: transparent;
    margin-top: 1.5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    background: #EEF3F3;
    border-radius: 10px;

    padding-left: 100px;
    padding-right: 100px;
    padding-top: 56px;
    /* padding-bottom: 150px; */
}

#jobpasscard_home_page #transportation .container {
    margin-top: 86px;
    padding-bottom: 75px;
}

#jobpasscard_home_page #transportation a {
    text-decoration: none;
}


#jobpasscard_home_page .transportation_bts_link {
    margin-left: 98px;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 20px;

    color: #F9F9F9;
}

#jobpasscard_home_page .position_bts {
    margin-top: -395px
}

.padding_bottom_54px {
    padding-bottom: 54px;
}

.padding_bottom_52px {
    padding-bottom: 52px;
}

#jobpasscard_home_page .position_bts a:hover {
    color: #004951;
}

.scoutOut_logo {
    text-align: right;
    padding-bottom: 30px;
}

#jobpasscard_home_page .transportation_mrt_link {
    margin-left: 98px;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 20px;

    color: #F9F9F9;
}

#jobpasscard_home_page .position_mrt {
    margin-top: -395px
}

#jobpasscard_home_page .position_mrt a:hover {
    color: #0EFFA0;
}

#jobpasscard_home_page .Province .pin {
    margin-top: -370px;
    margin-left: 12px;
}

#jobpasscard_home_page .Province .btn {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    text-align: center;

    color: #198470;
    border: 2px solid #198470;
    box-sizing: border-box;
    border-radius: 10px;
}

#jobpasscard_home_page #carouselExampleIndicators ol {
    margin-bottom: 4px !important;
}

/*****************************/
/****** reset password *******/
/*****************************/
#reset_password {
    margin-top: 20px;
}

#reset_password img {
    padding-left: 15px;
    position: absolute;
    top: 110px;
    z-index: -1;
}


#reset_password .reset_pass {
    /* width: 259px; */
    height: 24px;
    /* margin-left: 445px;
  margin-top: -390px;
  margin-bottom: 26px; */
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 22px;
}

#reset_password .reset_pass_group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
}

#reset_password .reset_pass_descripe {
    text-align: center;
    width: 357px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
    margin-bottom: 35px;
}

#reset_password .text-field-13 {
    width: 352px;
    height: 48px;
    /* margin-left: 400px; */
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
    margin-bottom: 5px;
}

#reset_password ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: #5E7094 !important;
}

#reset_password .submit-button-5:disabled {
    color: #BDBDBD;
    background-color: #E0E0E0;
}

#reset_password .submit-button-5 {
    width: 352px;
    height: 48px;

    border-radius: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #212E4B;
    background-color: #00DBB6;
    outline: none;
    border: none;
}

.invalid_email_phone .message {
    font-style: normal;
    font-size: 12px;
    line-height: 20px;
    color: #EB3C2B;
    margin-bottom: 5px;
}

#reset_password .btn_submit {
    /* margin-top: 55px;
  margin-left: 475px; */
}

#reset_password .input_email input {
    padding-left: 16px !important;
}

img.cer {
    width: 100%;
}

#reset_password_confirm .title-reset-password {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    text-align: center;
    margin-top: 138px;
}

#reset_password_confirm .describe-reset-password {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
    text-align: center;
    margin-top: 21px;
}

#reset_password_confirm .new-password-input {
    width: 352px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
    padding: 16px;
    margin-top: 20px;
}

#reset_password_confirm .new-password-input:focus-visible {
    outline: 1px solid #00DBB6;
    border: 1px solid #00DBB6;
}

#reset_password_confirm .new-password-input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
}

#reset_password_confirm .submit-new-password {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    width: 352px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    text-transform: uppercase;
    color: #212E4B;
    border: none;
    margin-top: 21px;
}

#reset_password_confirm .submit-new-password:hover {
    background: #71E8C4;
}

#reset_password_confirm .submit-new-password:active {
    background: #59C4AE;
}

#reset_password_confirm .submit-new-password:disabled,
#reset_password_confirm .submit-new-password[disabled],
#reset_password_confirm .submit-new-password[disabled]:hover {
    background: #E0E0E0;
    color: #BDBDBD;
    box-shadow: none;
}

#reset_password_confirm img {
    padding-left: 15px;
    position: absolute;
    top: 154px;
    z-index: -1;
}

/* 
#bg-forget-password {
  width: 100%;
  background-image: url(/static/images/bg_forget_password.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 100%;
} */

/*****************************/
/********** preview **********/
/*****************************/


.sheet-banner {
    position: relative;
    width: 1090px;
    max-width: 1090px;
}

.sheet-banner .img-container {
    padding-top: 100px;
    text-align: center;
    width: 100%;
    height: auto;
}

.sheet-banner .btn-start {
    position: absolute;
    top: 361px;
    left: 470px;
    width: 170px;
    height: 34px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #ffc93f;
    color: #12054e;
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    border: none;
    cursor: pointer;
    border-radius: 16.67px;
    text-align: center;
    padding-top: 10px;
    text-decoration: none;
}

.sheet-content {
    width: 1090px;
    max-width: 1090px;
    margin-top: 20px;
}

.sheet-content .data-container {
    padding-left: 140px;
    padding-right: 194px;
    padding-top: 70px;
    background-color: #eef3f3;
    border-radius: 10px;
}

.sheet-content .data-container .heading {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 25px;
    font-style: normal;
    color: #004951;
}

.sheet-content .data-container #content-1 {
    padding-top: 26px;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    line-height: 25px;
    font-style: normal;
    color: #004951;
    text-align: left;
}

.sheet-content .data-container .level {
    padding-top: 40px;
    font-size: 16px;
    text-align: left;
}

.sheet-content .data-container #content-2 {
    padding-top: 26px;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    line-height: 25px;
    font-style: normal;
    color: #004951;
    text-align: left;
}

.sheet-tab {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 70px;
    width: 1090px;
    max-width: 1090px;
}

.sheet-tab .nav-tabs {
    width: 1090px;
    max-width: 1090px;
    background-color: #eef3f3;
    border-radius: 10px 10px 0px 0px;
}

.sheet-tab .nav-item {
    width: 363px;
    height: 190px;
    margin-right: 0px;
}

.sheet-tab .nav-item a {
    width: 363.333333333px;
    height: 190px;
    text-align: center;
    border: 0px;
    padding: 0px;
}

.sheet-tab .nav-item a {
    width: 363px;
    height: 190px;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
}

.sheet-tab .nav-link img {
    padding-top: 22px;
}

.tab-content {
    width: 1090px;
    max-width: 1090px;
    background-image: linear-gradient(to top, #00204e, #079785);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


#myTabContent {
    background-image: inherit;
}

.level-content,
.level2-content {
    padding-left: 100px;
    padding-top: 60px;
    padding-bottom: 75px;
}

.level-content #heading-tab {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 25px;
    text-align: center;
    color: #ffffff;
}

.level-content .level-subcontent {
    padding-top: 40px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
}

.level-content .subcontent-sub {
    padding-left: 42px;
}

.sheet-tab .nav-tabs .nav-link.active {
    background-color: #079785;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sheet-tab .nav-link {
    cursor: pointer;
}

/*****************************/
/****** my profile *******/
/*****************************/
#upload_img {
    display: none;
}

.background_trans {
    background: transparent !important;
}

#myProfile .bg1_name {
    margin-top: -55px;
    width: 860px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background: #EEF3F3;
    border-radius: 10px;
    padding-bottom: 40px;
}

#myProfile .bg1_name .text-name {
    padding-top: 74px;
}

#myProfile .text-block-name {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    padding-left: 60px;

    color: #0B6067;
}

#myProfile .text-block-name2 {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 30px;
    padding-left: 60px;

    color: #0B6067;
}

#myProfile .edit_icon,
#transportation .T2 {
    float: right;
}

.bg_introduce,
.bg_introduce_edit {
    width: 740px;
    min-height: 206px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 30px;
    margin-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
}

#myProfile .bg_contact {
    width: 740px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
}

#myProfile .bg_contact .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
}


#myProfile .bg_contact .grid-container .item1 {
    grid-area: 1 / 1 / 1 / 2;
}

#myProfile .bg_contact .grid-container .item2 {
    grid-area: 1 / 2 / 1 / 6;
}

#myProfile .bg_contact .grid-container .item1 .line {
    background: #EBEBEB;
    border-radius: 0.5px;
    width: 360px;
    height: 1px;
    margin-top: 20px;
    margin-left: -10px;
}

#myProfile .text_detail_edit .line {
    background: #EBEBEB;
    border-radius: 0.5px;
    width: 360px;
    height: 1px;
    margin-top: 17px;
    margin-left: -10px;
}


#myProfile .line_column {
    background: #EBEBEB;
    border-radius: 0.5px;
    width: 1px;
    height: 180px;
    float: right;
    margin-top: -170px;
    margin-right: 5px;
}

#myProfile .bg_education {
    width: 740px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
    padding-bottom: 34px;
}

#myProfile .topic1 {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    color: #0B6067;
}

.myProfile_lastname {
    margin-top: 56px;
    padding-left: 15px;
}

#myProfile .topic2 {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 15px;
    color: #0B6067;
}

#myProfile .grade {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 7px;
    padding-top: 8px;
    margin-top: -9px;
    margin-left: 115px;
    display: flex;
    background: #EEF3F3;
    border-radius: 20px;
    text-align: center;
}

#myProfile .bg_work_history {
    width: 740px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
}

#myProfile .edit_name #name_s_title {
    background: #FFFFFF;
    border: 1px solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 15px;
    height: 30px;
    font-size: 14px !important;
}

#myProfile .text-field-14 {
    outline: none;
    width: 180px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #CFDFDF;
    box-sizing: border-box;
    color: #0B6067;
    font-size: 12px;
}

#myProfile .text-field-15 {
    outline: none;
    max-width: 240px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #CFDFDF;
    box-sizing: border-box;
    color: #0B6067;
    font-size: 12px;
}

#myProfile .edit_name .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

#myProfile .edit_name .item1 {
    grid-area: 1 / 1 / 1 / 2;
}


#myProfile .edit_name .item2 {
    grid-area: 1 / 2 / 1 / 4;
}

#myProfile .form-control {
    padding-top: 2px !important;
    color: #74807D;
}

#myProfile input {
    padding-left: 15px !important;
}

#myProfile textarea {
    width: 95%;
    height: 55px;
    outline: none;
    border: none;
    resize: none;
    font-size: 12px;
}

#myProfile ::placeholder {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    color: #74807D;
}

#myProfile .trophy ::placeholder {
    color: #74807D;
}

#myProfile input[type='radio']:after {
    width: 14px;
    height: 14px;
    border-radius: 15px;
    position: relative;
    background: #FFFFFF;
    border: 1px solid #16997E;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    visibility: visible;
}

#myProfile input[type='radio']:checked:after {
    width: 14px;
    height: 14px;
    border-radius: 15px;
    position: relative;
    background: #16997E;
    content: '';
    display: inline-block;
    visibility: visible;
}

#myProfile #gender {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 15px;
    color: #0B6067;
    padding-bottom: 19px;
}

#myProfile .gender {
    margin-right: 40px;
}

#myProfile .edit_name .bg_introduce .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    margin-left: 30px;
    margin-right: 50px;
    margin-top: 53px;
}

#myProfile .edit_name .bg_introduce .item1 {
    grid-area: 1 / 1 / 1 / 3;
}

#myProfile .edit_name .bg_introduce .item2 {
    grid-area: 1 / 3 / 1 / 4;
}

#myProfile #birthdate {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 15px;
    color: #0B6067;
}

#myProfile #birth_date {
    margin-top: 12px;
    width: 180px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 15px;

    outline: none;
}

#myProfile .add_education {
    cursor: pointer;
    background: #16997E;
    border-radius: 13px;
    width: 210px;
    height: 30px;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    padding-top: 6px;

    display: flex;
}

#myProfile .bg_work_history .grid-container1,
#myProfile .bg_work_history .grid-container2 {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-gap: 10px;
    padding-right: 20px;
}

#myProfile .bg_work_history .grid-container1 .item1,
#myProfile .bg_work_history .grid-container2 .item1 {
    grid-area: 1 / 1 / 1 / 4;
}

#myProfile .bg_work_history .grid-container1 .item2,
#myProfile .bg_work_history .grid-container2 .item2 {
    grid-area: 1 / 4 / 1 / 6;
}


#myProfile .work_detail table,
#myProfile .work_detail_edit table {
    width: 100%;
    border-collapse: collapse;
}

#myProfile .work_detail table,
.work_detail td,
.work_detail th {
    border: none;
}

#myProfile .work_detail .work_position {

    padding: 8px 30px;
    background: #EEF3F3;
    font-weight: 300;
    border-radius: 20px;
}

#myProfile .bg_addon {
    width: 740px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
}

#myProfile .website .website_link {
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 8px;
    background: #EEF3F3;
    font-weight: 300;
    border-radius: 15px;
    font-size: 14px;
    color: #0B6067;
    min-width: 300px;
    min-height: 34px;
}

#myProfile .port .port_link {
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 8px;
    background: #16997E;
    border-radius: 15px;
    font-weight: 300;
    font-size: 14px;
    color: #FFFFFF;
    min-width: 300px;
    min-height: 34px;
}

#myProfile .add_trophy {
    padding-right: 30px;
    padding-left: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: #16997E;
    border-radius: 15px;
    color: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
}

#myProfile .form-block .bg2 {
    width: 860px;
    height: auto;
    background: #EEF3F3;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-left: 60px;

    font-style: normal;
    line-height: 20px;
    color: #0B6067;
}

#myProfile .form-block .bg2 .head_text {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;

    color: #16997E;
}

#myProfile .form-block .bg2 #count_of_cards,
#myProfile .form-block .bg2 #count_of_courses {
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    line-height: 47px;
    color: #16997E;

    padding-top: 40px;
    padding-bottom: 4px;
}

#myProfile .form-block .bg2 #my_cards,
#myProfile .form-block .bg2 #my_courses {
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 15px;
    color: #74807D;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;

    padding: 3px 11px;
}



#myProfile .form-block .bg2 #count_of_courses {
    padding-left: 154px;
    padding-bottom: 4px;
}

#myProfile .form-block .bg2 #my_courses {
    margin-left: 154px;
}

#myProfile .form-block .bg2 ul {
    display: flex;
    padding-left: 0px;
    padding-top: 74px;
    margin-bottom: 0px;
}

#myProfile .form-block .bg2 ul li {
    margin-right: 50px;
}

#myProfile .form-block .bg2 ul li a {
    display: block;

    text-decoration: none;
    text-transform: uppercase;
    color: #74807D;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
}

#myProfile .form-block .bg2 ul li.active a {
    color: #16997E;
    border-bottom: #16997E 2px solid;
}

#myProfile .tab_content1 {
    width: 860px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    color: #0B6067;
    background: #EEF3F3;
    margin-top: 2px;
    border-radius: 10px 10px 0px 0px;
    padding-top: 30px;
    padding-left: 85px;
    padding-right: 85px;
}


#myProfile .listview_tableview li.active i {
    color: #16997E;
}

#myProfile .item1_content {
    margin-right: 14px;
    padding-bottom: 50px;
    display: flex;
}

#myProfile .grid-view {
    width: 100%;
}

#myProfile .grid-view .view_item {
    display: inline-block;
}

#myProfile .item1_content .item_detail {
    width: 530px;
    height: 77.78%;
    background: #FFFFFF;
    border-radius: 10px;
    color: #0B6067;
    margin-top: 20px;
    margin-left: 10px;
    padding-left: 40px;
    padding-top: 15px;
    padding-right: 30px;
}

#myProfile .item_detail .print {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #16997E;
    border-radius: 5px;
    color: #16997E;
    padding: 2px 26px;
}

#myProfile .item_detail .copy {
    margin-left: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    background: #16997E;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 2px 10px;
}

#myProfile .list-view .copyall {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    background: #16997E;
    border-radius: 5px;
    padding: 4px 15px;
    margin-left: 80%;
    margin-bottom: 36px;
    text-align: center;
}

#myProfile .tab_content1 .grid-container {
    display: grid;
    grid-template-columns: auto auto;
}

#myProfile .tab_content1 .grid-container .item1 {
    grid-area: 1 / 1 / 3 / 1;
    width: 50%;
}

#myProfile .tab_content1 .grid-container .item2 {
    text-align: right;
}

#myProfile .tab_content1 .grid-container .item3 {
    grid-area: 2 / 2 / 3 / 2;
    text-align: right;
}

#myProfile .grid-view #print_one {
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #16997E;
    background: #EEF3F3;
    border: 1px solid #16997E;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 2px 26px;
}

#myProfile .grid-view #print_all {
    text-align: center;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    background: #16997E;
    border-radius: 5px;
    padding: 4px 10px;
    margin-left: 10px;
}

#myProfile label {
    font-weight: 500;
}

#myProfile .my_course .view_item {
    display: inline-block;
}

#myProfile .my_course .item1_content {
    margin-right: 13px;
    padding-bottom: 40px;
    display: flex;
}

#myProfile .for-copy-education-only {
    display: none;
}

@media screen and (min-width: 501px) {
    .test_list_mobile {
        display: none;
    }

    .test_list_desktop {
        display: block;
    }

    /* .swal2-icon.swal2-warning {
    background: white !important;
    border: 5px solid #16997E !important;
    color: #16997E !important;
    margin-top: -60px !important;
  } */

    .swal2-actions:not(.swal2-loading) .swal2-confirm.swal2-styled {

        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 28px;
        text-align: center;

        color: #212E4B !important;
        background: #00DBB6 !important;
        border-radius: 16px;
        box-shadow: none;
    }

    .swal2-styled.swal2-confirm.spinner {
        display: none;
        align-items: center;
        justify-content: center;
        width: 2.2em;
        height: 2.2em;
        margin: 0 1.875em;
        -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
        animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
        border-width: 0.25em;
        border-style: solid;
        border-radius: 100%;
        border-color: #00DBB6 #00DBB6 #00DBB6 transparent !important;
    }

    #swal2-content {

        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 32px !important;
        text-align: center !important;

        color: #5E7094 !important;
    }

    .swal2-popup {
        border: none;
        border-radius: 10px !important;
        outline: none !important;
        width: 32em !important;
    }

    .swal2-close,
    .swal2-close:focus {
        outline: none !important;
        box-shadow: none !important;
        top: 24px !important;
        right: -24px !important;
        color: white !important;
    }

    .swal2-image {
        border-radius: 20px;
        filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
        width: 970px;
        height: 564px;
    }
}



[v-cloak] {
    display: none;
}


#myProfile #carouselExampleIndicators ol {
    margin-bottom: 20px !important;
}

#myProfile .carousel-indicators li {
    width: 14px !important;
    height: 14px !important;
    border-radius: 100%;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    background-color: transparent;
}

#myProfile .carousel-indicators .active {
    background-color: #FFFFFF;
}

#myProfile .img_profile {
    margin-left: auto;
    margin-right: auto;
    width: 860px;
    height: auto;
}

#myProfile .image-51 {
    margin-top: 60px;
    z-index: 2;
    margin-left: 60px;
    border: 4px solid #EEF3F3;
    border-radius: 50%;
    width: 15%;
}

#myProfile #img_avatar .icon_edit_profile {
    margin-top: 146px;
    z-index: 3;
    margin-left: -42px;
}

#myProfile #profile-normal .text-block-name3 #edit_name {
    margin-right: 62px;
    margin-top: -60px;
    cursor: pointer;
}

#myProfile .edit_name {
    display: none;
    width: 740px;
    margin-right: auto;
    margin-left: auto;
}

#myProfile .edit_name #save_name {
    float: right;
    cursor: pointer;
    margin-right: 2px;
}

#myProfile .edit_name .topic-name-en {
    font-size: 20px !important;
    padding-bottom: 11px;
}

#myProfile .edit_name .label_first_name_en {
    padding-right: 14px;
    font-weight: normal;
    font-size: 16px;
}

#myProfile .edit_name .topic-name-th {
    font-size: 20px !important;
    padding-bottom: 11px;
    padding-top: 30px;
}

#myProfile .edit_name .label_first_name_th {
    padding-right: 14px;
    font-weight: normal;
    font-size: 16px;
}

#myProfile .edit_name .item2 .last-name {
    margin-top: 25px;
    padding-left: 15px;
}

#myProfile .edit_name .item2 .label_last_name_en {
    padding-right: 14px;
    font-weight: normal;
    font-size: 16px;
}

#myProfile .edit_name .item2 .label_last_name_th {
    padding-right: 14px;
    font-weight: normal;
    font-size: 16px;
}

#myProfile .bg_introduce .gender-birthdate {
    display: flex;
}

#myProfile .bg_introduce .grid-container {
    padding-top: 53px;
}

#myProfile .bg_introduce .font-weight-normal {
    font-weight: normal;
}

#myProfile .bg_introduce .gender-other {
    padding-bottom: 40px;
    margin-top: -5px;
}

#myProfile .bg_introduce .gender-other-box {
    width: 150px;
    height: 30px;
    margin-left: 10px;
}

#myProfile .bg_introduce #birth_date {
    color: #0B6067;
}

#myProfile .bg_introduce-gender {
    margin-left: 0px;
}

#myProfile .bg_introduce .text_detail {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 72px;
}

#myProfile .bg_introduce .text_detail .introduce-box {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 30px;
}

#myProfile .bg_introduce .text_detail .introduce-box .edit_icon_ed {
    margin-top: -20px;
    cursor: pointer;
}

#myProfile .bg_introduce .text_detail .introduce-box .edit_icon_save {
    margin-top: -20px;
    cursor: pointer;
    display: none;
}

#myProfile .bg_introduce .text_detail #introduce_view {
    width: 660px;
    font-weight: 300;
    font-size: 12px;
    margin-top: -18px;
    margin-left: 2px;
    white-space: pre-line;
}

#myProfile .bg_introduce .text_detail textarea {
    display: none;
    color: #0B6067;
}


#myProfile .bg_contact .text_detail {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 42px;
}

#myProfile .bg_contact .text_detail .contact {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 30px;
}

#myProfile .bg_contact .text_detail .contact .edit_icon {
    margin-top: -20px;
    cursor: pointer;
}

#myProfile .bg_contact .text_detail .grid-container {
    font-weight: 300;
    font-size: 12px;
    margin-top: 10px;
}

/* ***8*** */

.bg_contact .text_detail .grid-container .item1 .person-container {
    display: flex;
}

.bg_contact .text_detail .grid-container .item1 .person-container img {
    padding-right: 40px;
}

.bg_contact .text_detail .grid-container .item1 .mail-container {
    margin-top: 19px;
    display: flex;
}

.bg_contact .text_detail .grid-container .item1 .mail-container img {
    padding-right: 40px;
}

.bg_contact .text_detail .grid-container .item1 .phone-container {
    margin-top: 19px;
    display: flex;
}

.bg_contact .text_detail .grid-container .item1 .phone-container img {
    padding-right: 40px;
}

.bg_contact .text_detail .grid-container .item2 {
    margin-left: 30px;
}

.bg_contact .text_detail .grid-container .item2 img {
    padding-right: 40px;
}

.bg_contact .text_detail .grid-container .item2 #my_address {
    width: 134px;
    margin-top: -28px;
    margin-left: 62px;
}

.bg_contact .text_detail_edit {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 42px;
    display: none;
}

.bg_contact .text_detail_edit .save_icon {
    float: right;
    cursor: pointer;
    margin-top: -20px;
}

.bg_contact .text_detail_edit .text_detail_edit_form {
    margin-top: 40px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .id_card_img {
    padding-right: 10px;
    padding-bottom: 3px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .email-container {
    margin-top: 14px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .email-container img {
    padding-right: 10px;
    padding-top: 3px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .phone-container {
    margin-top: 14px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .phone-container img {
    padding-right: 15px;
    padding-top: 4px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container {
    margin-top: 20px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .icon_location {
    padding-right: 40px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address {
    margin-top: 20px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 {
    display: flex;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 .address_number {
    padding-right: 12px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 .address_number input {
    width: 100px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 .address_village {
    padding-right: 10px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 .address_village input {
    width: 180px;
    height: 30px;
    margin-left: 4px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display1 .address_building input {
    width: 150px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 {
    display: flex;
    padding-top: 30px;
    padding-left: 28px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 .address_alley {
    padding-right: 20px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 .address_alley input {
    width: 100px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 .address_road {
    padding-right: 122px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 .address_road input {
    width: 220px;
    height: 30px;
    margin-left: 10px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display2 .address_floor input {
    width: 50px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display3 {
    display: flex;
    padding-top: 30px;
    margin-left: -14px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display3 .address_district {
    padding-right: 56px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display3 .address_district input {
    width: 220px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display3 .address_sub_district input {
    width: 220px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display4 {
    display: flex;
    padding-top: 30px;
    margin-left: 11px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display4 .address_province {
    padding-right: 54px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display4 .address_province input {
    width: 220px;
    height: 30px;
    margin-left: 6px;
}

.bg_contact .text_detail_edit .text_detail_edit_form .personal_contact .address-container .personal_address .address-display4 .address_postcode input {
    width: 220px;
    height: 30px;
    margin-left: 6px;
}

#education-profile-items .bg_education .text_detail {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 2px;
}

#education-profile-items .bg_education .text_detail .education {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 48px;
}

#education-profile-items .bg_education .text_detail .education img {
    margin-top: -20px;
}

#education-profile-items .bg_education .text_detail .education_detail ul {
    margin-top: -20px;
    margin-left: 12px;
}

.display-flex {
    display: flex;
}

#education-profile-items .bg_education .text_detail .education_detail .education-level-show {
    margin-left: 24px;
}

#education-profile-items .bg_education .text_detail .education_detail .year-admiss-show-topic1 {
    margin-left: 102px;
}

#education-profile-items .bg_education .text_detail .education_detail .year-admiss-show {
    margin-left: 18px;
}

#education-profile-items .bg_education .text_detail .education_detail .year-grad-show-topic1 {
    margin-left: 73px;
}

#education-profile-items .bg_education .text_detail .education_detail .year-grad-show {
    margin-left: 20px;
}

#education-profile-items .bg_education .text_detail .education_detail .university-li {
    margin-top: 30px;
}

#education-profile-items .bg_education .text_detail .education_detail .academy-name-show {
    margin-left: 20px;
}

#education-profile-items .bg_education .text_detail .education_detail .faculty-li {
    margin-top: 30px;
}

#education-profile-items .bg_education .text_detail .education_detail .academy-faculty-show {
    margin-left: 34px;
}

#education-profile-items .bg_education .text_detail .education_detail .branch-li {
    margin-top: 30px;
}

#education-profile-items .bg_education .text_detail .education_detail .academy-branch-show {
    margin-left: 34px;
}

#education-profile-items .bg_education .text_detail .education_detail .grade .academy-grade-show {
    margin-left: 19px;
}

#education-profile-items .bg_education .text_detail .education_detail .country-province-li {
    margin-top: 30px;
}

#education-profile-items .bg_education .text_detail .education_detail .province-topic1 {
    margin-left: 107px;
}

#education-profile-items .bg_education .text_detail .education_detail .academy-province-show {
    margin-left: 30px;
}

.job_detail_css {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #0B6067;
    width: 450px;
}

.line-academy {
    height: 1px;
    margin-bottom: 30px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-top: 29px;
    margin-left: 30px;
    margin-right: 30px;
}

#education-profile-items .bg_education .text_detail_edit {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 55px;
    display: none;
}

#education-profile-items .bg_education .text_detail_edit .save_icon {
    float: right;
    cursor: pointer;
    margin-right: 2px;
    margin-top: -20px;
}

#education-profile-items .bg_education .text_detail_edit .test {
    padding-top: 48px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit .delete_icon {
    float: right;
    cursor: pointer;
    padding-right: 20px;
    margin-top: -20px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul {
    margin-top: -20px;
    margin-left: 12px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .level-education {
    font-size: 12px;
    font-weight: normal;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-level {
    width: 170px;
    margin-left: 10px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-level select {
    height: 30px;
    margin-top: -7px;
    border-radius: 25px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-admiss-div {
    margin-left: 20px;
    font-size: 12px;
    font-weight: normal;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-admiss {
    width: 100px;
    margin-left: 10px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-admiss select {
    height: 30px;
    margin-top: -7px;
    border-radius: 25px;
    padding-left: 22px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-grad-div {
    margin-left: 20px;
    font-size: 12px;
    font-weight: normal;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-grad {
    width: 100px;
    margin-left: 10px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-year-grad select {
    height: 30px;
    margin-top: -7px;
    border-radius: 25px;
    padding-left: 22px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-academy-name {
    display: flex;
    margin-top: 20px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-academy-name input {
    width: 500px;
    height: 30px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .ed-faculty {
    display: flex;
    margin-top: 20px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .ed-faculty input {
    width: 270px;
    height: 30px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-field {
    display: flex;
    margin-top: 20px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education-field input {
    width: 220px;
    height: 30px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .educate_grade-label {
    margin-left: 54px;
    padding-top: 6px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .educate_grade input {
    width: 140px;
    height: 30px;
    margin-left: 25px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .address_educate {
    display: flex;
    margin-top: 20px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .address_educate-label {
    margin-right: 20px;
    padding-top: 6px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education_country input {
    width: 100px;
    height: 30px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education_province-label {
    margin-left: 27px;
    margin-right: 20px;
    padding-top: 6px;
    font-size: 14px;
}

#education-profile-items .bg_education .text_detail_edit .test .ed_item1_edit ul .education_province input {
    width: 200px;
    height: 30px;
}

#education-profile-items .bg_education .line-education {
    width: 700px;
    height: 1px;
    margin-bottom: 30px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-top: 29px;
    margin-left: -62px;
}

#education-profile-items .bg_education .line-education1 {
    height: 1px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-top: 29px;
    margin-left: 30px;
    margin-right: 30px;
}

#education-profile-items .bg_education .text_detail_edit .btn_add1 {
    display: flex;
    padding-right: 20px;
}

#education-profile-items .bg_education .text_detail_edit .btn_add1 .btn_add1-container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

#education-profile-items .bg_education .text_detail_edit .btn_add1 .btn_add1-container .btn_add1-background {
    width: 195px;
    height: 2px;
    background: #16997E;
    border-radius: 1px;
    margin-top: 12px;
}

#education-profile-items .bg_education .text_detail_edit .btn_add1 .btn_add1-container .add_education img {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    margin-right: 12px;
}

#education-profile-items .bg_education .text_detail_edit .btn_add1 .btn_add1-container .btn_add1-line {
    width: 195px;
    height: 2px;
    background: #16997E;
    border-radius: 1px;
    margin-top: 12px;
}

#job-profile-items .bg_work_history .text_detail {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 34px;
}

#job-profile-items .bg_work_history .text_detail .job-profile-main-label {
    font-weight: normal;
    font-size: 16px;
}

#job-profile-items .bg_work_history .text_detail .job-profile-main-label .edit_icon {
    margin-top: -20px;
}

#job-profile-items .bg_work_history .text_detail .job-profile-main-label .save_icon {
    float: right;
    cursor: pointer;
    margin-right: 2px;
    margin-top: -20px;
    display: none;
}

#job-profile-items .bg_work_history .text_detail .work_detail {
    padding-right: 20px;
    padding-top: 38px;
}

#job-profile-items .bg_work_history .text_detail .work_detail .job-name-show img {
    padding-right: 66px;
}

#job-profile-items .bg_work_history .text_detail .work_detail .start-date-work-show {
    width: 14.9%;
}

#job-profile-items .bg_work_history .text_detail .work_detail .end-date-work-show {
    width: 13.5%;
}

#job-profile-items .bg_work_history .text_detail .position-name-container {
    display: flex;
    margin-top: 20px;
}

#job-profile-items .bg_work_history .text_detail .position-name-label-show {
    margin-top: 7px;
    padding-right: 24px;
}

#job-profile-items .bg_work_history .text_detail .job-start-show {
    padding-top: 25px;
    font-weight: 300;
    padding-left: 14px;
}

#job-profile-items .bg_work_history .text_detail .job-end-show {
    padding-top: 25px;
    font-weight: 300;
    padding-left: 4px;
}

#job-profile-items .bg_work_history .text_detail .country-provine-container-show {
    display: flex;
    padding-top: 23px;
}

#job-profile-items .bg_work_history .text_detail .country-provine-container-show .job-country-show-1 {
    font-weight: 300;
    padding-left: 30px;
}

#job-profile-items .bg_work_history .text_detail .country-provine-container-show .provine-container-show {
    padding-left: 95px;
}

#job-profile-items .bg_work_history .text_detail .country-provine-container-show .provine-container-show-1 {
    font-weight: 300;
    padding-left: 30px;
}

#job-profile-items .bg_work_history .text_detail .job-detail-container-show {
    padding-top: 30px;
}

#job-profile-items .bg_work_history .text_detail .job-detail-show {
    font-weight: 300;
    padding-left: 30px;
}

#job-profile-items .bg_work_history .line-job-show {
    height: 1px;
    margin-bottom: 30px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-top: 29px;
    margin-left: 30px;
    margin-right: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit {
    padding-right: 20px;
    display: none;
    padding-top: 8px;
}

#job-profile-items .bg_work_history .work_detail_edit .table_head_work .th-1 {
    width: 41.9%;
}

#job-profile-items .bg_work_history .work_detail_edit .table_head_work .th-2 {
    width: 14.9%;
}

#job-profile-items .bg_work_history .work_detail_edit .table_head_work .th-3 {
    width: 13.5%;
}

#job-profile-items .bg_work_history .work_detail_edit .add_company .delete_icon {
    float: right;
    cursor: pointer;
    margin-top: -20px;
}

#job-profile-items .bg_work_history .work_detail_edit .table_head_work-1 {
    margin-top: 12px;
}

#job-profile-items .bg_work_history .work_detail_edit .table_head_work-1 .icon_work {
    padding-right: 27px;
}

#job-profile-items .bg_work_history .work_detail_edit .job_name {
    width: 200px;
    height: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit .th-job_title {
    width: 27%;
}

#job-profile-items .bg_work_history .work_detail_edit .th-job_title .job_title {
    width: 180px;
    height: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_start {
    width: 15.7%;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_start .input-group {
    width: 100px;
    margin-left: 10px;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_start .input-group .year_start {
    height: 30px;
    margin-top: -7px;
    border-radius: 25px;
    padding-left: 22px;
    font-size: 14px;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_end {
    width: 13.5%;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_end .input-group {
    width: 100px;
    margin-left: 10px;
}

#job-profile-items .bg_work_history .work_detail_edit .th-year_end .input-group .year_end {
    height: 30px;
    margin-top: -7px;
    border-radius: 25px;
    padding-left: 22px;
    font-size: 14px;
}

#job-profile-items .bg_work_history .work_detail_edit .country-province-container {
    margin-top: 30px;
    padding-left: 68px;
}

#job-profile-items .bg_work_history .work_detail_edit .country-province-container .company_country-label-edit {
    margin-right: 16px;
    padding-top: 6px;
    font-size: 14px;
}

#job-profile-items .bg_work_history .work_detail_edit .country-province-container .job_country {
    width: 100px;
    height: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit .country-province-container .company_province-label-edit {
    margin-left: 18px;
    margin-right: 16px;
    padding-top: 6px;
    font-size: 14px;
}

#job-profile-items .bg_work_history .work_detail_edit .country-province-container .job_province {
    width: 200px;
    height: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit .job_detail-container {
    margin-top: 30px;
    padding-left: 68px;
}

#job-profile-items .bg_work_history .work_detail_edit .job_detail-container .company_detail-label-edit {
    margin-right: 16px;
    padding-top: 6px;
    font-size: 14px;
}

#job-profile-items .bg_work_history .work_detail_edit .job_detail-container .job_detail {
    width: 450px;
    height: 30px;
}

#job-profile-items .bg_work_history .work_detail_edit .line-job-edit {
    width: 700px;
    height: 1px;
    margin-bottom: 30px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-top: 29px;
    margin-left: -80px;
}

#job-profile-items .bg_work_history .work_detail_edit .btn_add1 {
    display: flex;
    padding-right: 20px;
}

#job-profile-items .bg_work_history .work_detail_edit .btn_add1 .btn_add1-container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

#job-profile-items .bg_work_history .work_detail_edit .btn_add1 .btn_add1-container .btn_add1-background {
    width: 195px;
    height: 2px;
    background: #16997E;
    border-radius: 1px;
    margin-top: 12px;
}

#job-profile-items .bg_work_history .work_detail_edit .btn_add1 .btn_add1-container .add_education .add_education-1 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

#job-profile-items .bg_work_history .work_detail_edit .btn_add1 .btn_add1-container .add_education .add_education-1 img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

#add-on-item .bg_addon .text_detail {
    padding-top: 24px;
    padding-left: 30px;
    padding-bottom: 29px;
}

#add-on-item .bg_addon .text_detail .text_detail-container {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 30px;
}

#add-on-item .bg_addon .text_detail .text_detail-container .edit_icon {
    margin-top: -20px;
    cursor: pointer;
}

#add-on-item .bg_addon .text_detail .text_detail-container .save_icon {
    margin-top: -20px;
    cursor: pointer;
    display: none;
    float: right;
}

#add-on-item .bg_addon .text_detail .etc .website {
    display: flex;
    padding-bottom: 20px;
}

#add-on-item .bg_addon .text_detail .etc .website img {
    padding-right: 44px;
    min-width: 26px;
    padding-top: 4px;
}

#add-on-item .bg_addon .text_detail .line-etc {
    width: 700px;
    height: 1px;
    background: #EBEBEB;
    border-radius: 0.5px;
    margin-left: -8px;
}

#add-on-item .bg_addon .text_detail .port {
    display: flex;
    padding-bottom: 20px;
    padding-top: 20px;
}

#add-on-item .bg_addon .text_detail .port img {
    padding-right: 44px;
    min-width: 26px;
    padding-top: 4px;
}

#add-on-item .bg_addon .text_detail .certificate-container {
    font-weight: normal;
    font-size: 16px;
    padding-top: 27px;
}

#add-on-item .bg_addon .text_detail .certificate-container .trophy .trophy-container {
    display: flex;
    padding-top: 30px;
    padding-bottom: 20px;
}

#add-on-item .bg_addon .text_detail .certificate-container .trophy .trophy-container .trophy-img {
    padding-right: 44px;
    min-width: 26px;
}

#add-on-item .bg_addon .text_detail .certificate-container .trophy .trophy-container .cer_img_button {
    margin-right: 100px;
    max-width: 100px;
    height: 60px;
}

#add-on-item .bg_addon .text_detail .certificate-container .trophy .trophy-container .certificate_detail-show {
    margin-top: 10px;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    max-width: 54%;
}

#add-on-item .bg_addon .text_detail .etc_edit {
    display: none;
}

#add-on-item .bg_addon .text_detail .etc_edit .website {
    display: flex;
    padding-bottom: 20px;
}

#add-on-item .bg_addon .text_detail .etc_edit .website .icon_web {
    padding-right: 44px;
    min-width: 26px;
    padding-top: 4px;
}

#add-on-item .bg_addon .text_detail .etc_edit .website .website_url {
    width: 440px;
    height: 30px;
}

#add-on-item .bg_addon .text_detail .etc_edit .port {
    display: flex;
    padding-bottom: 20px;
    padding-top: 20px;
}

#add-on-item .bg_addon .text_detail .etc_edit .port .icon_portlink {
    padding-right: 44px;
    min-width: 26px;
    padding-top: 4px;
}

#add-on-item .bg_addon .text_detail .etc_edit .port .portfolio_url {
    width: 440px;
    height: 30px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container {
    font-weight: normal;
    font-size: 16px;
    padding-top: 27px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .delete_icon {
    float: right;
    cursor: pointer;
    margin-right: 20px;
    margin-top: 5px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .uploadImage-container {
    display: flex;
    padding-top: 30px;
    padding-bottom: 20px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .uploadImage-container .trophy-img {
    padding-right: 44px;
    min-width: 26px;
    margin-top: -25px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .uploadImage-container .file {
    display: none;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .uploadImage-container .btn-upload-certificate {
    margin-right: 81px;
    width: 100px;
    height: 60px;
}

#add-on-item .bg_addon .text_detail .etc_edit .certificate-container .trophy_add .certificate_detail-edit {
    color: #0B6067;
    width: 59.5%;
    border: 1px solid #CFDFDF;
    margin-top: 30px;
}

#add-on-item .bg_addon .text_detail .btn_add1 {
    display: flex;
    padding-right: 20px;
    padding-top: 20px;
}

#add-on-item .bg_addon .text_detail .btn_add1 .btn_add1-container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

#add-on-item .bg_addon .text_detail .btn_add1 .btn_add1-container .btn_add1-background {
    width: 90px;
    height: 2px;
    background: #16997E;
    border-radius: 1px;
    margin-top: 12px;
}

#add-on-item .bg_addon .text_detail .btn_add1 .btn_add1-container .add_trophy .add_trophy-text {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

#add-on-item .bg_addon .text_detail .btn_add1 .btn_add1-container .add_trophy img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}


#profile-dashboard {
    width: 1160px;
    height: auto;
    background: #EEF3F3;
    border-radius: 10px 10px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding-top: 40px;
    padding-left: 180px;
    padding-right: 180px;
}

#profile-dashboard .title_dasboard {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 45px;
    text-align: center;
    color: #16997E;
    padding-bottom: 14px;
}

#profile-dashboard .detail_dashboard1 {
    width: 800px;
    height: 180px;
    border: 2px solid #16997E;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 58px;
    padding-top: 36px;
}


#profile-dashboard .detail_dashboard2 {
    width: 680px;
    height: 180px;
    border: 2px solid #16997E;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 58px;
    padding-top: 23px;
    margin-left: auto;
    margin-right: auto;
}

#profile-dashboard .detail_dashboard1 .test_dashboard {
    width: 180px;
}

#profile-dashboard .detail_dashboard1 .container {
    padding: 0;
}

#profile-dashboard .detail_dashboard1 img {
    width: 109.58px;
}

#profile-dashboard .count {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    text-align: right;

    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
}

#profile-dashboard .count span {
    font-weight: 500;
    font-size: 36px;
}

#profile-dashboard p {
    margin-bottom: 0;
}

#profile-dashboard .detail_dashboard1 .add {
    background: #FFFFFF;
    border-radius: 17px;
    width: 180px;
    height: 34px;
    color: #74807D;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 15px;
    display: flex;
    text-align: center;
    margin-top: 24px;
}

#profile-dashboard .text2 {
    padding-top: 11px;
    margin-left: 42px;
}

#profile-dashboard .add img {
    width: 16px;
    height: 16px;
    margin-top: 9px;
}

#profile-dashboard .add .position {
    margin-left: 10px;
    display: flex;
}

.width558 {
    width: 558px;
}

#profile-dashboard .course_dashboard {
    width: 228px;
    float: right;
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#profile-dashboard .course_dashboard p {
    margin-bottom: 0;
    text-align: center;
}

#profile-dashboard .course_dashboard .text2 {
    padding-top: 11px;
    margin-left: 24px;
}

#profile-dashboard .detail_dashboard2 img {
    width: 109.58px;
}

#profile-dashboard .detail_dashboard2 .test_detail {
    width: 430px;
    margin-left: auto;
    margin-right: auto;
}

.margintop22 {
    margin-top: 35px;
}

#profile-dashboard .detail_dashboard2 .test_level123 {
    background: #FFFFFF;
    border-radius: 19.5px;
    width: 150px;
    height: 39px;
    margin-bottom: 8px;
    float: right;
    display: flex;
    padding-top: 6px;
    padding-right: 15px;
}

#profile-dashboard .test_level123 img {
    width: 41px;
    height: 27px;
    margin-left: 6px;
}

#profile-dashboard .test_level123 .stylecount1 {
    font-style: normal;
    font-weight: 500;
    font-size: 27px;
    line-height: 26px;

    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    text-align: right;
}

#profile-dashboard .test_level123 .stylecount2 {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 26px;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    text-align: right;
}

.linespace {
    height: 2px;
    width: 1160px;
    background: white;
    margin-left: -180px;
}

#profile-dashboard-detail {
    width: 1160px;
    height: auto;
    background: #EEF3F3;
    border-radius: 0px 0px 10px 10px;
    margin-left: auto;
    margin-right: auto;
}

.dash_tab button {
    background: transparent;
    outline: none;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 39px;
    align-items: center;
    color: #74807D;
    margin-right: 120px;
    position: relative;
    bottom: -2px;
    padding: 0px 30px;
}

.dash_tab_public .dash_button_tab_publick {
    background: transparent;
    outline: none;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 39px;
    align-items: center;
    color: #74807D;
    position: relative;
    bottom: -2px;
    padding: 0px 30px;
}

.dash_tab .active,
.dash_tab button:hover {
    color: #16997E;
    border-bottom: 2px solid;
    position: relative;
    bottom: -2px;
    padding: 0px 30px;
}

.dash_tab_public .active {
    color: #16997E;
    border-bottom: 2px solid;
    position: relative;
    bottom: -2px;
    padding: 0px 60px;
}

.tab-dashboard .dash_tab {
    width: fit-content;
    margin-left: 90px;
}

.dash_tab_public {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


.margin_right_inherit {
    margin-right: inherit !important;
}

#card,
#course {
    min-height: 540px;
}


#profile-dashboard-detail .select_to_print {
    background: #EEF3F3;
    border: 1px solid #16997E;
    box-sizing: border-box;
    border-radius: 5px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #16997E;
    width: 140px;
    height: 40px;
    padding-top: 5px;
}

#profile-dashboard-detail .print_all {
    background: #16997E;
    border-radius: 5px;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    width: 140px;
    height: 40px;
    padding-top: 6px;
    margin-left: 10px;
}

#profile-dashboard-detail .print_button {
    display: flex;
    float: right;
    margin-right: 10px;
    margin-top: 30px;
}

#card .not_have_passcard_img,
#course .not_have_course_img {
    /* width: fit-content; */
    margin-left: auto;
    margin-right: auto;
    width: 180px;
}


#card .not_have_passcard_img img {
    width: 150px;
    margin-top: 140px;
}

#course .not_have_course_img img {
    width: 180px;
    margin-top: 140px;
}

#card .not_have_passcard_text {
    display: flex;
    /* width: fit-content; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #74807D;
    width: 516px;
}

#course .not_have_course_text {
    display: flex;
    /* width: fit-content; */
    width: 570px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #74807D;
    padding-left: 42px;
}

#card .not_have_passcard_text button,
#course .not_have_course_text button {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    outline: none;
    text-align: center;
    background: #16997E;
    border-radius: 15px;
    border: none;
    width: 110px;
    height: 30px;
    margin-top: -5px;
    margin-left: 10px;
    margin-right: 10px;
}

#profile-dashboard-detail #card .title_detail {

    font-style: normal;
    font-weight: 500;
    width: 1000px;
    font-size: 30px;
    line-height: 45px;
    color: #16997E;
    clear: both;
    padding-top: 58px;
    margin-left: auto;
    margin-right: auto;
}

#profile-dashboard-detail #card .category_name {
    margin-right: 20px;
}

#profile-dashboard-detail #card .count_course_group {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 17px;
    width: 70px;
    height: 34px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #FFFFFF;
}

.display_flex {
    display: flex;
}

#profile-dashboard-detail #card .line {
    width: 1000px;
    height: 2px;
    background: #16997E;
    display: inherit;
    margin-bottom: 20px;
}

.each_item {
    margin-bottom: 48px;
}

.detail_item2 {
    margin-left: -70px;
    width: 1140px;
    height: 88px;
    background-image: url(/static/images/bg_display_level.png);
    background-size: 1140px 88px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 10px;
    color: #16997E;
}

#profile-dashboard-detail #card .course_index {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    letter-spacing: 0.5em;
    margin-left: 5px;
    margin-top: 28px;

    color: #CFDFDF;
    margin-right: 30px;

}

.detail_of_course {
    margin-top: 28px;
    margin-left: 20px;
}

.item_of_level1,
.item_of_level2,
.item_of_level3 {
    width: 150px;
    height: 40px;
    text-align: center;
    color: #CFDFDF;
    width: 480px;
    margin-top: 12px;
    padding-top: 17px;
}

.item_of_level {
    width: 150px;
    height: 40px;
    margin-top: 24px;
    padding-top: 10px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 22px;
    color: #FFFFFF;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 32px;
    margin-right: 20px;
}

#profile-dashboard-detail .detail_item2 img {
    width: 60px;
    height: 72px;
    margin-top: 8px;
}


/*****************************/
/********** bar **********/
/*****************************/
#myTabContent .form-row {
    width: fit-content;
}

.menutabbar2 .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 40px !important;
    background: #ffffff !important;
    box-shadow: 0px 3.33492px 3.33492px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 10px 10px;
    width: 100%;
    min-width: 1200px;
}

.menutabbar2 .navbar-brand {
    padding-top: 0px !important;
}

.navbar-brand #banner {
    cursor: pointer;
}

.menutabbar2 .nav {
    margin: 0 auto;
}

.menutabbar2 .nav-link {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #74807d;
}


.menutabbar2 .has-search .form-control {
    padding: 0px !important;
    height: 27px !important;
    width: 152px !important;
}

.menutabbar2 .has-search .form-control {
    box-shadow: none !important;
    border: 1px solid #ced4da;
    font-size: 14px;
    text-align: center;
}

.menutabbar2 .search_radius {
    border-radius: 12.5px !important;
}

.menutabbar2.has-search {
    margin-bottom: 0px;
    padding-left: 62px;
    padding-top: 8px;
}

.menutabbar2 .has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    margin-left: 130.83px;
    margin-top: 6.67px;
    line-height: 0px !important;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.menutabbar2 .form-group {
    margin-bottom: 0px !important;
    padding: 0 !important;
    margin-top: 4px;
}

.menutabbar2 #noti {
    padding-left: 10px;
    margin-top: 2px;
}

.menutabbar2 #profile_photo {
    margin-left: 10px;
    width: 35px;
    height: 35px;
}

.div-block-115 {
    position: absolute;
    left: auto;
    top: 0%;
    right: 0%;
    bottom: auto;
    display: none;
    width: 120px;
    height: 260px;
    margin-top: 49px;
    padding: 20px;
    text-decoration: none;
}

.div-block-115 a {
    text-decoration: none;
}

.profile-div {
    position: absolute;
    left: auto;
    top: -11%;
    right: 7%;
    bottom: auto;
    z-index: 9999;
    display: block;
    width: 120px;
    height: 260px;
    margin-top: 19px;
    padding: 20px 10px 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF3F3 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.paragraph-8 {
    margin-top: 12px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;

    text-align: center;

    color: #004951;
}

.text-block-50 {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 24px;

    text-align: center;

    color: #004951;
}

.button-8 {
    position: relative;
    width: 100px;
    height: 26px;

    background: #16997E;
    border-radius: 13px;

    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    padding-left: 16px;

    color: #FFFFFF;

}

.button-8:hover {
    background: #3CCA92;
    text-decoration: none;
    color: #FFFFFF;
}

.menutabbar2 .mynav {
    margin: 0 !important;
    padding-right: 40px !important;
}


.menutabbar2 .nav-link:hover,
.menutabbar2 .nav-link:focus {
    cursor: pointer;
    color: #16997E;
}

.menutabbar2 .nav-link:focus {
    border-bottom: 2px solid #16997E !important;
    padding-bottom: 12px;
}

.menutabbar2 .nav-link.active {
    cursor: pointer;
    color: #16997E;
    border-bottom: 2px solid #16997E !important;
    padding-bottom: 12px;
}

.menutabbar2 .nav-item {
    margin-right: 20px;
}

/* ==test list== */

.content-course {
    background-color: #FFFFFF;
    max-width: 1120px;
    padding-top: 0;
}

.text-test-list {
    color: #212E4B;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 60px;

    margin-bottom: 24px;
}

.test-list-line {
    width: 100%;
    height: 2px;
    background: #16997E;
    border-radius: 1px;
    margin-top: 20px;
}

.test-items-images {
    padding-top: 74px;
}

.test-items-images .col-3 {
    margin-bottom: 48px;
    position: relative;
}

.test-items-images .col-3 .bg {
    width: 256px;
    float: right;
}

.test-items-images .col-3 .button {
    width: 206px;
}

.test-items-images .col-3 a img:hover {
    filter: brightness(110%);
}


.menutabbar_main .nav {
    margin-right: 60px !important;
    margin-left: 0px !important;
    padding-top: 2px !important;
}

.menutabbar_main .navbar {
    position: absolute;
    width: 100%;
    padding-top: 5px;
    height: 80px;
    left: 0px;
    top: 0px;
    align-items: inherit !important;

    background: #FFFFFF;
    box-shadow: 0px 3.33333px 3.33333px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 10px 10px;
    min-width: 1200px;
}

.menutabbar_main .navbar-brand {
    padding-top: 0px !important;
    margin-left: 46% !important;
}

.menutabbar_main .navbar-brand img {
    width: 134px;
    height: 25px;
}


.menutabbar_main .mynav .position1 {
    padding-right: 10px;
}



.menutabbar_main .nav {
    margin: 0 auto;
}

.menutabbar_main #find {
    padding-left: 10px;
}

.searchbar {
    position: relative;

}

.searchbar input[type="text"] {
    border: 0;
    padding: 0;
    width: 0px;
    height: 25px;
    transition: all 0.3s ease;
    background-color: #F1F3F3;
    border-radius: 19.1667px;
    color: #495057;
    text-align: center;
    font-size: 14px;
}

.searchbar .icon {
    position: absolute;

    top: 0.8px;
    right: -6px;
    width: 35px;
    height: 100%;
    background: none;
    border-radius: 3px;
    color: #fff;
    transition: all 0.5s 0.3s ease;
}

.searchbar .icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.searchbar .icon.active {
    transition: all 0.3s ease;
}

.searchbar input[type="text"].active {
    width: 160px;
    padding: 0 10px;
    transition: all 0.5s 0.2s ease;
    outline: none;
}

.menutabbar_main #Inactive {
    padding-left: 10px;
    padding-right: 20px;
}

.menutabbar .mynav {
    margin: 0 !important;
    padding-left: 0px !important;
    padding-right: 60px !important;
}

.mynav .position1 a {
    background: transparent;
    border: 1px solid #16997E;
    border-radius: 5px;
    padding: 3px 11px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #16997E;
}

.mynav .position1 a:hover {
    text-decoration: none;
    background: #3CCA92;
    color: #FFFFFF;
}

.mynav .position2 a {
    background: #16997E;
    border-radius: 5px;
    padding: 4px 11px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;

    color: #FFFFFF;
}

.mynav .position2 a:hover {
    text-decoration: none;
    background: #3CCA92;
    color: #FFFFFF;
}

.menutabbar_main .line {
    position: relative;
    min-width: 1080px;
    height: 0px;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 40px;
    background: #EEF3F3;
    border: 1px solid #EEF3F3;

}

.menutabbar .navbar {
    position: relative;
    padding: 0 !important;
    height: 40px !important;
}

.menutabbar .nav {
    margin-left: auto !important;
    margin-right: auto !important;
}

.menutabbar .nav-link {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #74807d;
}

.menutabbar .nav-link:hover,
.menutabbar .nav-link:focus {
    cursor: pointer;
    color: #16997E;
}

.menutabbar .nav-link:focus {
    border-bottom: 2px solid #16997E !important;
    padding-bottom: 10px;
}

.menutabbar .nav-link.active {
    cursor: pointer;
    color: #16997E;
    border-bottom: 2px solid #16997E !important;
    padding-bottom: 10px;
}

.nav-item {
    margin-right: 20px;
}

.not_display {
    display: none;
}

.text_align_center {
    text-align: center;
}

/* *****hamburger menu on mobile***** */

@media screen and (min-width: 501px) {
    #menu_mobile {
        display: none;
    }

    #menu_desktop,
    #menu-desktop {
        display: block;
    }
}

@media screen and (min-width: 0px) and (max-width: 500px) {
    #menu_mobile {
        display: block;
    }

    #menu_desktop,
    #menu-desktop {
        display: none;
    }

}

#menu_mobile #bg_head {
    background: #FFFFFF;
    box-shadow: 0px 3.33333px 3.33333px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 2.778vw 2.778vw;
    position: fixed;
    width: 100%;
    margin-top: -0.556vw;
    z-index: 10;
    min-height: 13.889vw;
}

.full_width {
    width: 100%;
}

.no_padding {
    padding: 0;
}

.mobile_logo_home {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 60%;
    left: 58%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.text_align_right {
    text-align: right;
}

.float_right {
    float: right;
}

.mobile_hamburger_menu {
    margin-top: 3.2vw;
    font-size: 5.556vw;
    cursor: pointer;
    color: #004951;
    margin-right: 1.389vw;
}

#bg_head button {
    outline: none;
    border: none;
    background: transparent;
}

#for_mobile #top .bg_head {
    width: 100%;
    margin-top: 13.527vw;
    height: 56.2vW;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

#menu_mobile #mobile_profile_img {
    width: 32px;
    height: 32px;
    margin-right: 17.667vw;
}

.mobile_profile_menu {
    width: 85.333vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100vh;
    background: white;
    padding-top: 4.444vw;
    padding-bottom: 2.778vw;
    padding-left: 1.389vw;
    padding-right: 1.389vw;
    z-index: 1999;
    overflow-y: scroll;
    transition: all 0.5s linear;
}

.moved_mobile_profile_menu {
    left: 0px !important;
}

#mySidenav {
    position: fixed;
    width: 74%;
    top: 0;
    right: -74%;
    margin-top: 11vw;
    z-index: 10;
    transition: all 0.3s linear;
    margin-top: 15vw;
}

.moved_mySidenav {
    right: 0px !important;
}


.menu_is_not_authenticated {
    background: white;
    /* margin-bottom: -3vw; */
    border-radius: 2.778vw;
    margin-top: -8vw;
    /* min-height: 29.444vw; */
    margin-bottom: 1.250vw;
    min-height: 17vw;
}

#mySidenav p {
    text-align: center;
    margin-top: 8.333vw;
}

#mySidenav a {
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 10vw;
    text-align: center;

    color: #74807D;

}

.hamburger_detail_isauthenticated {
    background: white;
    border-radius: 2.778vw;
    padding-top: 6.111vw;
    padding-bottom: 0.5vw;
    padding-left: 1.389vw;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 66vh;
}

.dropdown_home-content,
.dropdown_passcard-content,
.dropdown_profile-content {
    display: none;
}

.dropdown_home:hover,
.dropdown_passcard:hover,
.dropdown_profile:hover {
    text-decoration: none;
}

.underline_menu {
    background: #D7E3E3;
    border-radius: 0.278vw;
    width: 56vw;
    height: 0.556vw;
    margin-left: auto;
    margin-right: auto;
}

.dropdown i {
    width: 5.556vw;
    margin-right: 5.556vw;
    float: right;
    margin-top: 1.667vw;
}

.headMenu {
    margin-left: 12.222vw;
    font-weight: normal;
}


.active_mobile_menu {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 1.389vw;
    color: #FFFFFF;
    width: 71.4vw;
    height: 15.556vw;
    padding-top: 2.778vw;
}

#mySidenav .dropdown a {
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 10vw;
    color: #74807D;
}

/* .dropdown {
  margin-bottom: 6.111vw;
} */

#mySidenav .margin_top_0px {
    margin-top: 0px;
}

.menu_mini_highlight {
    color: #16997E !important;
}

.menu_mini_highlight:focus {
    text-decoration: none;
}

#mySidenav .hamburger_detail_isauthenticated a:focus {
    text-decoration: none;
    color: #16997E !important;
}


.item1_mobile_profile_menu {
    width: 22.222vw;
    height: 22.222vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.name_mobile_profile_menu {
    font-style: normal;
    font-weight: normal;
    font-size: 5vw;
    line-height: 8.333vw;
    color: #16997E;
    text-align: center;
    margin-top: 5.556vw;
    margin-bottom: 5.556vw;
}

.have_passcard img,
.have_cart img {
    width: 13.333vw;
    height: 13.333vw;
}

.have_passcard,
.have_cart {
    font-style: normal;
    font-weight: normal;
    font-size: 7vw;
    line-height: 6.667vw;
    color: #16997E;
    background: #FFFFFF;
    border-radius: 6.667vw;
    width: 55.556vw;
    height: 13.333vw;
    filter: drop-shadow(0px 2.222vw 2.222vw rgba(0, 0, 0, 0.1));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.889vw;
}

.count_passcard {
    margin-left: 14vw;
    margin-top: 3.611vw;
}

.profile1_mobile_profile_menu {
    margin-top: 11.111vw;
    font-style: normal;
    font-weight: normal;
    font-size: 4.4vw;
    line-height: 3.333vw;
    text-align: center;
    color: #004951;
}

.margin_bottom_20px {
    margin-bottom: 5.556vw;
}

.profile2_mobile_profile_menu {
    margin-top: 5.556vw;
    font-style: normal;
    font-weight: normal;
    font-size: 4.4vw;
    line-height: 3.333vw;
    text-align: center;
    color: #004951;
}

.logout_mobile_profile_menu {
    font-style: normal;
    font-weight: normal;
    font-size: 5vw;
    line-height: 7.500vw;
    color: #16997E;
}

.is_logout {
    width: 44.444vw;
    height: 9.444vw;
    background: #FFFFFF;
    border: 0.556vw solid #16997E;
    box-sizing: border-box;
    border-radius: 4.722vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 11.667vw;
    padding-top: 0.6vw;
}

#login_mobile_btn {
    background: #FFFFFF;
    border: 0.278vw solid #16997E;
    box-sizing: border-box;
    border-radius: 1.389vw;

    font-style: normal !important;
    font-weight: normal !important;
    font-size: 4.444vw !important;
    line-height: 6.667vw !important;
    text-align: center !important;
    color: #16997E !important;
    float: left;
    padding: 1.667vw 6.111vw;
}

#regis_mobile_btn {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 1.389vw;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 4.444vw !important;
    line-height: 6.667vw !important;
    text-align: center !important;
    color: #FFFFFF !important;
    padding: 1.944vw 6.111vw;
    float: right;
    margin-bottom: 3.889vw
}

#company_regis_mobile_btn {
    display: flex;
    clear: both;
    background: linear-gradient(180deg, #16997E 0%, #0B6067 100%);
    border-radius: 1.389vw;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 4.444vw !important;
    line-height: 6.667vw !important;
    text-align: center !important;
    color: #FFFFFF !important;
    padding: 2.222vw 6.667vw;
}

.mobile_btn_not_auth {
    padding: 3.333vw 2.222vw;
}

/* login mobile */

#login_mobile .bg_detail {
    background: #EEF3F3;
    border-radius: 2.778vw;
    width: 94.444vw;
    height: 163.889vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: -24.5vw;
    padding-top: 2.778vw;
}

#login_mobile .img_head {
    z-index: -1;
    position: relative;
}

#login_mobile .bg2 {
    width: 88.889vw;
    height: 16.667vw;
    background: white;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.778vw 2.778vw 0px 0px;
}

#login_mobile .bg2 button {
    border: none;
    outline: none;
    background: transparent;
    color: #C4C9C8;
    font-style: normal;
    font-weight: normal;
    font-size: 3.889vw;
    line-height: 4.167vw;
    margin-top: 8.333vw;
}

#login_mobile .bg2 .active {
    color: #16997E;
    border-bottom: 0.556vw solid #16997E !important;
    padding-bottom: 4vw;
    /* padding-left: 5.556vw;
  padding-right: 5.556vw; */
}

.margin_left50px {
    margin-left: 13.889vw;
}

#login_mobile .bg2 .menu_tab {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#login_mobile .datail_tab {
    background: #FFFFFF;
    border-radius: 0px 0px 2.778vw 2.778vw;
    width: 88.889vw;
    height: 141.111vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.556vw;
    padding-top: 12.500vw;
}

#login_mobile #login_tab_mobile #username_mobile {
    margin-top: 0px;
    width: 77.778vw;
    height: 8.333vw;
    margin-left: auto;
    margin-right: auto;
}

#login_mobile #login_tab_mobile #password_mobile {
    width: 77.778vw;
    height: 8.333vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8.333vw;
}

/* #login_mobile #login_tab_mobile button{
  width: 69.444vw;
  height: 9.444vw;
  margin-top: 8.333vw !important;
  margin-bottom: 9.444vw !important;
  background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
  border-radius: 1.389vw;
  margin-left: auto;
  margin-right: auto;
} */

#login_mobile #login_tab_mobile .line {
    width: 77.778vw;
    height: 0.556vw;
    margin-left: auto;
    margin-right: auto;
    background: #16997E;
    border-radius: 0.695vw;
    margin-bottom: 9.444vw !important;
}

#login_mobile #login_tab_mobile .facebook_col a {
    background-color: #3076cf;
    border: 0px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 5.556vw;
    width: 25vw;
    height: 8.333vw;
    line-height: 7.778vw;
    text-align: center;
    color: #ffffff;
    padding-top: 0.556vw;
    padding-bottom: 0.556vw;
    padding-left: 5.833vw;
    padding-right: 5.833vw;
    margin-top: 0px !important;
    margin-left: 1.667vw;
    margin-bottom: 0px !important;
}

#login_mobile #login_tab_mobile .google_col a {
    background-color: #db4c3f;
    border: 0px;
    width: 25vw;
    height: 8.333vw;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 5.556vw;
    line-height: 7.778vw;
    text-align: center;
    color: #ffffff;
    padding-top: 0.556vw;
    padding-bottom: 0.556vw;
    padding-left: 5.833vw;
    padding-right: 5.833vw;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#login_mobile #login_tab_mobile .row {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#login_mobile #login_tab_mobile .forget_pass {
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    line-height: 2.778vw;
    text-align: center;
    color: #C4C9C8;
    margin-top: 30.278vw;
}

#login_mobile #login_tab_mobile .forget_pass a {
    color: #16997E;
}

#login_mobile #login_tab_mobile .rule_text,
#regis_tab_mobile .rule_text {
    width: 66.667vw;
    font-style: normal;
    font-weight: normal;
    font-size: 2.778vw;
    line-height: 2.778vw;
    text-align: center;
    color: #C4C9C8;
    margin-left: auto;
    margin-right: auto;
    margin-top: 11.111vw;
}

#login_mobile #login_tab_mobile .rule_text span,
#regis_tab_mobile .rule_text span {
    color: #16997E;
}

#login_mobile #regis_tab_mobile button {
    width: 21.389vw;
    height: 4.167vw;
    font-style: normal;
    font-weight: normal;
    font-size: 3.889vw;
    line-height: 4.167vw;
    text-align: center;
    color: #C4C9C8;
    border: none;
    outline: none;
    background: transparent;
}

.regis_menu_tab {
    margin-top: -10vw;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#login_mobile #regis_tab_mobile .active {
    color: #16997E;
    border-bottom: 0.556vw solid #16997E !important;
    padding-bottom: 6vw;
    /* padding-left: 5.556vw;
  padding-right: 5.556vw; */
}

#RegisterFormUsername_mobile {
    width: 77.778vw;
    height: 8.333vw;
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.889vw;
    padding: 0px 2.778vw;
}

#personal_regis ::placeholder,
#company_regis ::placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 3.333vw;
    color: #C4C9C8;
    padding: 0px 2.778vw;
}

#RegisterFormEmail_mobile,
#RegisterPhonePassword_mobile,
#RegisterFormPassword_mobile,
#RegisterFormPasswordAgain_mobile,
#companyRegisterFormUsername_mobile,
#companyRegisterFormEmail_mobile,
#companyRegisterPhonePassword_mobile {
    width: 77.778vw;
    height: 8.333vw;
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.167vw;
    padding: 0px 2.778vw;
}

.margin_right50px {
    margin-right: 13.889vw;
}

.margin_left60px {
    margin-left: 16.667vw;
}

#RegisterFormFirstName_mobile,
#RegisterFormLastName_mobile {
    width: 36.111vw;
    height: 8.333vw;

    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
}

#RegisterFormFirstName_mobile {
    margin-left: 6vw;
}

#RegisterFormLastName_mobile {
    margin-left: -2.222vw;
}

#personal_regis .row {
    margin-top: 4.167vw;
    width: fit-content;
}

#personal_regis .helppassword {
    font-style: normal;
    font-weight: normal;
    font-size: 2.222vw;
    line-height: 2.778vw;
    color: #A1ACA9;
    margin-top: 2.222vw;
    text-align: left;
    margin-left: 6.667vw;
    margin-bottom: 0px;
}

#RegisterFormPasswordAgain_mobile {
    margin-bottom: 24px;
}

#login_mobile #personal_regis .facebook_col a {
    background-color: #3076cf;
    border: 0px;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 5.556vw;
    width: 25vw;
    height: 8.333vw;
    line-height: 7.778vw;
    text-align: center;
    color: #ffffff;
    padding-top: 0.556vw;
    padding-bottom: 0.556vw;
    padding-left: 5.833vw;
    padding-right: 5.833vw;
    margin-top: 0px !important;
    margin-left: 1.667vw;
    margin-bottom: 0px !important;
}

#login_mobile #personal_regis .google_col a {
    background-color: #db4c3f;
    border: 0px;
    width: 25vw;
    height: 8.333vw;
    font-family: Prompt;
    font-style: normal;
    font-weight: 600;
    font-size: 5.556vw;
    line-height: 7.778vw;
    text-align: center;
    color: #ffffff;
    padding-top: 0.556vw;
    padding-bottom: 0.556vw;
    padding-left: 5.833vw;
    padding-right: 5.833vw;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.margin_top10px {
    margin-top: -2.778vw;
}

#regis_tab_mobile .line {
    width: 77.778vw;
    height: 0.556vw;
    margin-left: auto;
    margin-right: auto;
    background: #16997E;
    border-radius: 0.695vw;
    margin-bottom: 7vw !important;
}

.margin_top14px {
    margin-top: 3.889vw !important;
}

#personal_regis button,
#login_mobile #login_tab_mobile button {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%) !important;
    border-radius: 1.389vw !important;
    width: 69.444vw !important;
    height: 9.444vw !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 5.558vw !important;
    text-align: center !important;
    color: #FFFFFF !important;
    margin-left: auto;
    margin-right: auto;
    line-height: 0px !important;
}

.margin_top20px {
    margin-top: 20px !important;
}

/* bug firefox */

#myTabContent {
    width: 400px;
}

#about_us .sec4 .sec4_2 .text_sec4 .title_detail {
    width: 478px;
}

.profile1_mobile_profile_menu a {
    margin-top: 5.556vw;
    font-style: normal;
    font-weight: normal;
    font-size: 4.4vw;
    line-height: 3.333vw;
    text-align: center;
    color: #004951;
}

#profile_formobile .bg_beforecarousel {
    width: 100%;
    height: 13.889vw;
    ;

    background: #43E8E1;
}

#profile_formobile .carousel-indicators li {
    background: transparent;
    border: 0.278vw solid #FFFFFF;
    box-sizing: border-box;
    width: 3.889vw;
    height: 3.889vw;
    border-radius: 50%;
    margin: 0px 1.389vw;
}

#profile_formobile .carousel-indicators .active {
    background: white;
}

#profile_formobile .carousel-indicators {
    bottom: -2.222vw;
}

#profile_formobile .bg_profile_mobile {
    width: 94.444vw;
    padding-bottom: 2.778vw;
    margin-left: auto;
    margin-right: auto;
    background: #EEF3F3;
    border-radius: 2.778vw;
    margin-top: 25vw;
}

#profile_formobile .avatar_profile_mobile {
    position: absolute;
    width: 30.556vw;
    height: 30.556vw;
    border: 1.111vw solid #EEF3F3;
    border-radius: 50%;
    margin-top: -16.667vw;
    margin-left: 31.111vw;
}

#profile_formobile .profile_name_en_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 5.556vw;
    line-height: 8.333vw;
    color: #0B6067;
    margin-top: 23.611vw;
    display: inline-block;
}

#profile_formobile .profile_name_th_mobile {
    font-style: normal;
    font-weight: normal;
    font-size: 3.889vw;
    line-height: 5.833vw;
    color: #0B6067;
    margin-top: 2.778vw;
    margin-bottom: 6.944vw;
}

#profile_formobile .bg_profile_detail_mobile {
    width: 88.889vw;
    min-height: 55.556vw;
    background: #FFFFFF;
    border-radius: 2.778vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.778vw;
    padding: 5.556vw 5.556vw;
    position: relative;
}

#profile_formobile .head_detail_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 4.444vw;
    line-height: 4.167vw;
    color: #0B6067;
}

#profile_formobile .detail {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 6.667vw;
    color: #0B6067;
    width: 77.778vw;
    margin-top: 8.333vw;
}

#profile_formobile .detail_mobile {
    display: flex;
    font-style: normal;
    font-weight: 300;
    font-size: 3.333vw;
    line-height: 5vw;
    margin-left: 2.778vw;
    color: #0B6067;
}

#profile_formobile .detail_mobile .icon_mail {
    width: 8.333vw;
    margin-right: 10.556vw;
}

#profile_formobile .detail_mobile .icon_id_card {
    width: 7.778vw;
    height: 7.778vw;
    margin-right: 10.556vw;
}


#profile_formobile .detail_mobile .icon_tel {
    width: 7.222vw;
    margin-right: 12.778vw;
}

#profile_formobile .detail_mobile .icon_addr {
    width: 6.111vw;
    height: 7.778vw;
    margin-right: 15vw;
}

#profile_formobile .detail .line,
#profile_formobile .work_detail_mobile .line,
#profile_formobile .addon_mobile .line {
    width: 77.778vw;
    height: 0.278vw;
    margin-top: 7.222vw;
    background: #EBEBEB;
    border-radius: 0.139vw;
    margin-bottom: 5vw;
}

.addr {
    margin-top: 1.111vw;
    width: 37.222vw;
}

#profile_formobile .icon_educate {
    width: 10.556vw;
    margin-top: 8.333vw;
    margin-bottom: 5.556vw;
}

#profile_formobile .row {
    margin: 0;
    display: flex;
    margin-bottom: 8.333vw;
}

.edu_item1 {
    margin-left: 8.611vw;
    font-weight: 300;
}

.edu_item2 {
    margin-left: 5.556vw;
    font-weight: 300;
}

.edu_item3 {
    margin-left: 9.444vw;
    font-weight: 300;
}

.edu_item4 {
    margin-left: 8.889vw;
    font-weight: 300;
}

.edu_item5 {
    margin-left: 5vw;
    font-weight: 300;
}

.edu_item6 {
    margin-left: 5.556vw;
    font-weight: 300;
}

.edu_item7 {
    margin-left: 10vw;
    font-weight: 300;
}

.edu_item8 {
    margin-left: 5.556vw;
    font-weight: 300;
}

.edu_item9 {
    font-weight: 300;
    margin-left: 5.278vw;
}

#profile_formobile .education_detail_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
}

.font_size_12px {
    font-size: 3.333vw;
}

#profile_formobile .grade_mobile {
    width: 52.778vw;
    height: 8.333vw;
    background: #EEF3F3;
    border-radius: 5.556vw;
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2.222vw;
    display: flex;
    padding-left: 11.111vw;
}

#profile_formobile .education_detail_mobile .line {
    width: 77.778vw;
    height: 0.278vw;
    background: #EBEBEB;
    border-radius: 0.139vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8.056vw;
}

#profile_formobile .icon_work {
    width: 8.889vw;
    margin-top: 8.333vw;
    margin-right: 10.556vw;
}

.work_item1 {
    margin-top: 10vw;
    font-style: normal;
    font-weight: normal;
}

.work_item2 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    width: 40.833vw;
    min-height: 8.333vw;
    background: #EEF3F3;
    border-radius: 5.556vw;
    text-align: center;
    margin-top: -2.222vw;
    padding-top: 1.944vw;
    padding-bottom: 1.944vw;
    margin-left: 4.444vw;
    padding-left: 8.333vw;
    padding-right: 8.333vw;
}

.work_item3 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-left: 8.333vw;
}

.work_item4 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-left: 8.333vw;
}

.work_item5 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-left: 43px;
}

.work_item6 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-left: 52px;
}


.work_item7 {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
    color: #0B6067;
    margin-top: -10px;
}

#profile_formobile .work_detail_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
}

#profile_formobile .icon_web_mobile {
    margin-top: 8.333vw;
    display: flex;
}

#profile_formobile .icon_portlink_mobile {
    margin-top: 8.333vw;
    display: flex;
}

#profile_formobile .icon_web_mobile img {
    width: 7.222vw;
    height: 7.222vw;
    margin-top: 4px;
}

#profile_formobile .porlinkicon_mobile {
    margin-top: 4px;
}

#profile_formobile .bg_link1 {
    word-break: break-all;
    width: 59.444vw;
    min-height: 9.722vw;
    background: #EEF3F3;
    border-radius: 4.167vw;
    padding: 1.667vw 2.778vw;
    text-align: center;
}


#profile_formobile .bg_link2 {
    word-break: break-all;
    width: 59.444vw;
    min-height: 9.722vw;
    background: #16997E;
    border-radius: 4.167vw;
    padding: 1.667vw 2.778vw;
    text-align: center;
}

#profile_formobile .bg_link1 .link {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    color: #0B6067;
}

#profile_formobile .bg_link2 .link {
    font-style: normal;
    font-weight: 500;
    font-size: 3.889vw;
    line-height: 4.167vw;
    text-align: center;
    color: #FFFFFF;
}

#profile_formobile .card_certificate_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 4.444vw;
    line-height: 6.667vw;
    color: #0B6067;
    margin-bottom: 8.333vw;
}

#profile_formobile .addon_mobile .icon {
    width: 7.778vw;
    height: 8.889vw;
}

#profile_formobile .addon_mobile .card_button {
    width: 41.667vw;
    height: 25vw;
}

#profile_formobile .addon_mobile .certificate_detail_mobile {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 8.333vw;
    display: flex;
    color: #0B6067;
    margin-top: -2.778vw;
    width: 58.333vw
}

#profile_formobile .dashboard_mobile .bg_profile_mobile {
    margin-top: 2.778vw;
    min-height: 125vw;
    padding-top: 11.111vw;
    border-radius: 10px 10px 0px 0px;
}

#profile_formobile .head_dash_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 8.333vw;
    line-height: 12.500vw;
    text-align: center;
    color: #16997E;
}

#profile_formobile .detail_dash_mobile {
    width: 79.722vw;
    min-height: 85vw;

    border: 0.556vw solid #16997E;
    box-sizing: border-box;
    border-radius: 2.778vw;
    background: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.444vw;
    padding-top: 7.778vw;
    padding-bottom: 7.778vw;
    padding-left: 9.722vw;
    padding-right: 6.667vw;
}

#profile_formobile .detail_dash_mobile .row {
    margin-bottom: 0px;
}

#profile_formobile .detail_dash_mobile img {
    width: 30.439vw;
    height: 17.778vw;

}

#profile_formobile .detail_dash_mobile .count {
    font-style: normal;
    font-weight: normal;
    font-size: 5.556vw;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 8vw;
}

#profile_formobile .detail_dash_mobile .count span {
    font-weight: 500;
    font-size: 10vw;
    margin-bottom: 3.333vw;
}

#profile_formobile .detail_dash_mobile .count p {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2.778vw;
}

#profile_formobile .detail_dash_mobile .add {
    width: 50vw;
    height: 9.444vw;
    background: #FFFFFF;
    border-radius: 4.722vw;
    padding: 2.500vw 2.778vw;
    margin-left: auto;
    margin-right: auto;
}

#profile_formobile .detail_dash_mobile .add img {
    width: 4.444vw;
    height: 4.444vw;
}

#profile_formobile .detail_dash_mobile .position {
    display: flex;
}

#profile_formobile .detail_dash_mobile .add .text2 {
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 0.833vw;
    display: flex;
    color: #74807D;
    margin-top: 2.222vw;
    margin-left: 11.667vw;
}

#profile_formobile .detail_dash_mobile .add .text3 {
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 0.833vw;
    display: flex;
    color: #74807D;
    margin-top: 2.222vw;
    margin-left: 5.556vw;
}

#profile_formobile .space {
    width: 100%;
    height: 11.111vw;
}

.margin_top28px {
    margin-top: 7.778vw !important;
}

.margin_left20px {
    margin-left: 5.556vw !important;
}

#profile_formobile #edit_icon_mobile {
    margin-top: 23.611vw;
}

#profile_formobile .edit_profile_mobile {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 0px 0px 5.556vw 5.556vw;
    width: 88.889vw;
    height: 15vw;
    z-index: -1;
    margin-top: -2.778vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.889vw;
}

#profile_formobile .edit_profile_mobile .button {
    width: 86.667vw;
    height: 10vw;
    background: linear-gradient(180deg, #16997E 0%, #53CD9F 100%);
    border-radius: 4.722vw;
    margin-left: auto;
    margin-right: auto;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 3.333vw;
    text-align: center;
    color: #FFFFFF;
    padding-top: 3.333vw;
}

#profile_formobile .edit_profile_mobile img {
    width: 7.778vw;
    margin-top: -2.222vw;
}

.margin_left_10px {
    margin-left: -2.778vw;
}

#editname_mobile {
    display: none;
    margin-top: 23.611vw !important;
}

#editname_mobile .bg_edit_mobile,
#showintro_mobile .bg_edit_mobile,
#showcontact_mobile .bg_edit_mobile,
#showedu_mobile .bg_edit_mobile,
#showjob_mobile .bg_edit_mobile,
#showaddon_mobile .bg_edit_mobile {
    width: 88.889vw;
    min-height: 50vw;
    background: #FFFFFF;
    border-radius: 2.778vw;
    padding: 8.333vw 2.778vw;
    margin-left: 2.778vw;
    position: relative;
    margin-top: 2.778vw;
}

#editname_mobile .title_name_mobile {
    font-style: normal;
    font-weight: 500;
    font-size: 5.556vw;
    line-height: 8.333vw;
    color: #0B6067;
    margin-bottom: 4.444vw;
}

#editname_mobile .name_space_mobile {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 12.778vw;
    padding: 3.611vw 2.778vw;
    color: #0B6067;
}

.margin_top30_px_to_vw {
    margin-top: 8.333vw;
}

.margin_top20_px_to_vw {
    margin-top: 5.556vw;
}

#editname_mobile #gender_mobile {
    margin-top: 11.111vw;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 4.167vw;
    color: #0B6067;
    margin-bottom: 5.556vw;
}

#editname_mobile .gender_birthdate_mobile {
    display: flex;
}

#editname_mobile .gender {
    display: flex;
    margin-right: 11.111vw;
}

#editname_mobile .gender_position {
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 4.167vw;
    display: flex;
    align-items: center;
    color: #0B6067;
    margin-left: 2.778vw;
}

.gender_birthdate_mobile input[type='radio']:after {
    width: 4.167vw;
    height: 4.167vw;
    border-radius: 4.167vw;
    top: -0.556vw;
    left: -0.278vw;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 0.278vw solid #16997E;
}

.gender_birthdate_mobile input[type='radio']:checked:after {
    width: 4.167vw;
    height: 4.167vw;
    border-radius: 4.167vw;
    top: -0.556vw;
    left: -0.278vw;
    position: relative;
    background: #16997E;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 0.278vw solid #16997E;
}

#birthdate_mobile1 {
    color: #0B6067;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 4.167vw;
    margin-top: 10.833vw;
    margin-bottom: 5.556vw;
}

#editname_mobile input[type='date'] {
    background: #FFFFFF;
    /* border: 0.556vw solid #CFDFDF; */
    /* box-sizing: border-box;
  border-radius: 6.944vw; */
    width: 50vw;
    /* height: 13.889vw; */
    /* padding-left: 16.667vw; */
    /* font-style: normal;
  font-weight: 300;
  font-size: 5.556vw;
  line-height: 6.944vw; */
    color: #0B6067;
    /* padding-right: 5.556vw; */
}

.save_profile_mobile1,
.save_profile_mobile2,
.save_profile_mobile3,
.save_profile_mobile4,
.save_profile_mobile5,
.save_profile_mobile6 {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 0px 0px 5.556vw 5.556vw;
    width: 88.889vw;
    height: 15vw;
    z-index: -1;
    margin-top: -2.778vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.889vw;
    display: none;
}

#profile_formobile .save_profile_mobile1 img,
#profile_formobile .save_profile_mobile2 img,
#profile_formobile .save_profile_mobile3 img,
#profile_formobile .save_profile_mobile4 img,
#profile_formobile .save_profile_mobile5 img,
#profile_formobile .save_profile_mobile6 img {
    width: 7.778vw;
    margin-top: -2.222vw;
}

#profile_formobile .save_profile_mobile1 .button,
#profile_formobile .save_profile_mobile2 .button,
#profile_formobile .save_profile_mobile3 .button,
#profile_formobile .save_profile_mobile4 .button,
#profile_formobile .save_profile_mobile5 .button,
#profile_formobile .save_profile_mobile6 .button {
    width: 86.667vw;
    height: 10vw;
    background: linear-gradient(180deg, #16997E 0%, #53CD9F 100%);
    border-radius: 4.722vw;
    margin-left: auto;
    margin-right: auto;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 3.333vw;
    text-align: center;
    color: #FFFFFF;
    padding-top: 3.333vw;
}

#profile_formobile #showintro_mobile {
    display: none;
}

#profile_formobile .edit_title_mobile {
    color: #0B6067;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 4.167vw;
    margin-bottom: 12vw;
}

#profile_formobile #introduce_edit_mobile {
    width: 100%;
    border: none;
    outline: none;
    color: #0B6067;
    font-style: normal;
    font-weight: 300;
    font-size: 5vw;
    line-height: 7.500vw;
}

#profile_formobile #showcontact_mobile {
    display: none;
}

#profile_formobile .idcard_mobile,
#profile_formobile .email_mobile,
#profile_formobile .phone_mobile {
    display: flex;
    margin-bottom: 5.556vw;
}

.contact_mobile_css {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 71.667vw;
    height: 12.778vw;
    color: #0B6067;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
    padding: 4.167vw 2.778vw;
}

.idcard_mobile img {
    width: 7.778vw;
    height: 7.778vw;
    margin-top: 2.222vw;
    margin-right: 3.889vw;
}

.email_mobile img {
    width: 8.333vw;
    height: 5.556vw;
    margin-top: 3.889vw;
    margin-right: 3.333vw;
}

.phone_mobile img {
    width: 7.222vw;
    height: 7.778vw;
    margin-top: 1.667vw;
    margin-right: 4.444vw;
}

.address_number_mobile_css input {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 12.778vw;
    color: #0B6067;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
    padding: 4.167vw 2.778vw;
    margin-bottom: 5.556vw;
}

#profile_formobile .icon_location {
    width: 6.111vw;
    height: 7.778vw;
    margin-bottom: 5.556vw;
}

#profile_formobile #showedu_mobile {
    display: none;
}

#profile_formobile .ed_item1_edit select,
#profile_formobile #showjob_mobile select {
    background: #FFFFFF;
    border: 0.556vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 6.389vw;
    padding: 2.222vw 8.333vw;
    width: 69.444vw;
    height: 12.778vw;
    margin-top: -2.222vw;
    background: url(/static/images/select_icon.png) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 58.333vw;
    background-size: 4.444vw 4.444vw;
    outline: none;
    color: #0B6067;
}

#profile_formobile .img_icon_edu {
    margin-top: 3.889vw;
}

#profile_formobile .text_edu_level_mobile {
    font-style: normal;
    font-weight: 300;
    font-size: 3.333vw;
    line-height: 4.167vw;
    color: #74807D;
    margin-top: -2.778vw;
    margin-bottom: 2.778vw;
}

#profile_formobile #delete_mobile {
    float: right;
    margin-top: -5.556vw;
}

.no_margin {
    margin: 0 !important;
}

.education_edit_box {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 12.778vw;
    padding: 4.167vw 2.778vw;
    margin-top: 5.556vw;
    color: #0B6067;
}

.education_edit_box::placeholder {
    font-style: normal;
    font-weight: 300;
    font-size: 3.333vw;
    line-height: 5.833vw;
    color: #74807D;
}

.select_year {
    background: #FFFFFF;
    width: 38.889vw !important;
    height: 12.778vw !important;
    border: 0.556vw solid #CFDFDF !important;
    box-sizing: border-box;
    border-radius: 6.389vw !important;
    margin-top: 0.556vw !important;
    background-position-x: 27.778vw !important;
    color: #0B6067 !important;
}

.text_year_mobile {
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
    color: #74807D;
    margin-top: 5.556vw;
}

#profile_formobile .add_education,
#profile_formobile .add_job,
#profile_formobile .add_addon {
    width: 83.333vw;
    height: 12.778vw;
    background: #16997E;
    border-radius: 6.389vw;
    color: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    font-size: 5.556vw;
    line-height: 5.833vw;
    padding: 3.333vw 4.444vw;
    margin-bottom: 11.111vw;
}

#profile_formobile .icon_plus {
    width: 6.111vw;
    height: 6.111vw;
    margin-right: 4.722vw;
}

#profile_formobile #showjob_mobile {
    display: none;
}

#profile_formobile .text_job_edit_box {
    background: #FFFFFF;
    border: 0.833vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 71.667vw;
    height: 12.778vw;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
    color: #0B6067;
    padding: 4.167vw 2.778vw;
    margin-bottom: 5.556vw;
}

#showjob_mobile .icon_work {
    margin-top: 1.667vw;
}

.text_job_edit_box2 {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 12.778vw;
    color: #0B6067;
    padding: 4.167vw 2.778vw;
    margin-bottom: 5.556vw;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 5.833vw;
}

#showjob_mobile .text_year_mobile {
    margin-top: inherit;
}

.detail_job_mobile {
    margin-top: 8.333vw !important;
    margin-bottom: 5.556vw !important;
}

.textarea_detail_job_mobile {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 44.444vw;
    color: #0B6067;
    padding: 4.167vw 2.778vw;
    outline: none;
}

#profile_formobile #showaddon_mobile {
    display: none;
}

#profile_formobile input {
    color: inherit;
}

.addon_text_box {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    padding: 4.167vw 2.778vw;
    color: #0B6067;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
    outline: none;
    width: 71.667vw;
    height: 12.778vw;
    float: right;
}

.webicon_mobile {
    margin-top: 2.778vw !important;
}

.icon_portlink_mobile2 {
    width: 8.333vw !important;
    height: 6.667vw !important;
    margin-top: 2.778vw !important;
}

.space_addon_mobile {
    margin-top: 5.556vw !important;
}

.line_edit {
    width: 77.778vw;
    height: 0.278vw;
    margin-top: 7.222vw;
    background: #EBEBEB;
    border-radius: 0.139vw;
    margin-bottom: 5vw;
    margin-left: auto;
    margin-right: auto;
}

.line_edit2 {
    width: 77.778vw;
    height: 0.278vw;
    margin-top: 5.556vw;
    background: #EBEBEB;
    border-radius: 0.139vw;
    margin-bottom: 11.111vw;
    margin-left: auto;
    margin-right: auto;
}

.margin_title_cer_mobile {
    margin-top: 8.333vw;
}

.cer_img_mobile {
    width: 41.667vw;
    height: 25vw;
    border-radius: 2.778vw;
}

@media screen and (max-width: 500px) {
    .test_list_mobile {
        width: auto;
        padding: 0;
    }

    .test-items-images .container {
        padding: 0;
    }

    .test-items-images {
        padding-top: 17.8vw;
    }

    .content-course .description {
        color: #7A89A6;
        font-style: normal;
        font-weight: 300;
        font-size: 5.333vw;
        line-height: 8.533vw;

        margin-bottom: 5.333vw;
    }

    .test-items-images {
        padding-left: 0vw;
        padding-right: 0vw;
    }

    .test_list_mobile .bg {
        width: 42.643vw;
    }

    .test_list_mobile .button {
        margin-left: -5.625vw;
        margin-top: -65vw;
        width: 64.375vw;
    }

    .test_list_mobile {
        display: block;
    }

    .test_list_desktop {
        display: none !important;
    }

    .banner-course-list img {
        margin-top: 12.077vw;
    }

    .content-course {
        width: 93.750vw;
        border-radius: 3.125vw;
        height: auto;
    }

    .text-test-list {
        font-size: 6.250vw;
    }

    .test-list-line {
        margin-top: 1.875vw;
    }

    /* .swal2-icon.swal2-warning {
    background: white !important;
    border: 1.389vw solid #16997E !important;
    color: #16997E !important;
    margin-top: -16.667vw !important;
  } */

    .swal2-popup {
        border: none;
        border-radius: 2.778vw !important;
        outline: none !important;

    }

    #swal2-content {
        font-style: normal !important;
        font-weight: normal !important;
        font-size: 6.111vw !important;
        line-height: 8.333vw !important;
        text-align: center !important;

        color: #16997E !important;
    }

    .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
        background: linear-gradient(90deg, #00FFD4 0%, #16997E 100%) !important;
        color: #FFFFFF !important;
    }

    .swal2-close,
    .swal2-close:focus {
        outline: none !important;
        box-shadow: none !important;
        top: 6.667vw !important;
        right: -4vw !important;
        color: white !important;
    }

    .swal2-image {
        border-radius: 1.667vw;
        filter: drop-shadow(0px 0.333vw 0.833vw rgba(0, 0, 0, 0.25));
        width: 80.833vw !important;
        height: 47vw !important;
    }
}

.addon_textarea_box {
    background: #FFFFFF;
    border: 0.278vw solid #CFDFDF;
    box-sizing: border-box;
    border-radius: 2.778vw;
    width: 83.333vw;
    height: 44.444vw;
    outline: none;
    padding: 4.167vw 2.778vw;
    margin-top: -2.778vw;
    color: #0B6067;
    font-style: normal;
    font-weight: 300;
    font-size: 3.889vw;
    line-height: 4.167vw;
}

.addon_space {
    padding-top: 6.389vw !important;
    padding-left: 4.444vw !important;
    padding-right: 1.111vw !important;
}

.bd_dash_mobile {
    width: 94.444vw;
    padding-bottom: 2.778vw;
    margin-left: auto;
    margin-right: auto;
    background: #EEF3F3;
    border-radius: 0px 0px 2.778vw 2.778vw;
    margin-top: 0.556vw;
}

#profile_formobile .dash_tab_mobile {
    color: #16997E;
    font-style: normal;
    font-weight: 500;
    font-size: 7.222vw;
    line-height: 10.833vw;
    border-bottom: 0.556vw solid;
}

#profile_formobile .dashboard_mobile .active {
    color: #16997E;
    border-bottom: 0.556vw solid;
    position: relative;
    bottom: -0.556vw;
}

.tablink_mobile {
    color: #74807D;
    font-style: normal;
    font-weight: normal;
    font-size: 7.222vw;
    line-height: 10.833vw;
    border: none;
    outline: none;
    position: relative;
    bottom: -0.3vw;
    background: transparent;
}

.tablink_mobile:focus {
    outline: none;
}

.nav_mobile {
    padding-bottom: 0px !important;
}

.navtab_dashboard_mobile {
    margin-top: 8.889vw;
    margin-left: auto;
    margin-right: auto;
}

.width_card_mobile {
    width: 31.667vw;
}

.width_course_mobile {
    width: 63vw;
}

#profile_formobile .not_have_passcard_img img {
    width: 41.667vw;
    height: 50vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#profile_formobile .not_have_passcard,
#profile_formobile .not_have_course_img {
    padding-top: 22.222vw;
    padding-left: 17.778vw;
    padding-right: 17.778vw;
}

#profile_formobile .not_have_passcard_text,
#profile_formobile .not_have_course_text {
    text-align: center;
    color: #74807D;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 6.667vw;
    margin-top: 8.333vw;
    margin-bottom: 13.889vw;
}

#profile_formobile .not_have_passcard_text button,
#profile_formobile .not_have_course_text button {
    background: #16997E;
    border-radius: 4.167vw;
    width: 30.556vw;
    height: 8.333vw;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 5.556vw;
    color: #FFFFFF;
    margin-top: 5vw;
    margin-bottom: 5vw;
}

#profile_formobile .not_have_course_img img {
    width: 50vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#profile_formobile .category_name {
    color: #16997E;
    font-style: normal;
    font-weight: 500;
    font-size: 4.444vw;
    line-height: 6.667vw;
}

#profile_formobile .count_course_group {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 2.500vw;
    width: 8.333vw;
    height: 5vw;
    letter-spacing: 2.222vw;
    color: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    font-size: 3.529vw;
    line-height: 2.778vw;
    padding: 1.111vw 3.056vw;
    margin-left: 0.556vw;
}

#profile_formobile .display_level {
    color: #16997E;
    font-style: normal;
    font-weight: 500;
    font-size: 4.444vw;
    line-height: 6.667vw;
}

#profile_formobile #card_mobile .line {
    background: #16997E;
    width: 88.889vw;
    height: 0.556vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.889vw;
    margin-bottom: 5.556vw;
}

#profile_formobile .detail_item2 {
    background-image: url(/static/images/level_dash_mobile.png);
    background-size: 92.222vw 36.111vw;
    border-radius: 1.389vw;
    width: 92.222vw;
    height: 36.111vw;
    padding-top: 2.778vw;
    padding-bottom: 2.778vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.778vw;
}

#profile_formobile .detail_item2 img {
    width: 16.667vw;
    height: 20vw;
    margin-left: 1.667vw;
}

#profile_formobile .detail_item2 .row {
    width: 100%;
}

#profile_formobile .course_index {
    color: #16997E;
    font-style: normal;
    font-weight: normal;
    font-size: 4.444vw;
    line-height: 6.667vw;
    margin-left: 1.667vw;
    margin-top: 5.556vw;
}

#profile_formobile .item_of_level {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    border-radius: 50%;
    width: 15.556vw;
    height: 15.556vw;
    color: #FFFFFF;
    font-style: normal;
    font-weight: bold;
    font-size: 8.333vw;
    line-height: 9.444vw;
    margin-top: 3.889vw;
    margin-right: 1.667vw;
}

#profile_formobile .level_mobile {
    padding-left: 1.667vw;
}

#profile_formobile .each_item {
    padding-top: 7.778vw;
}

#profile_formobile .test_level123 {
    background: #FFFFFF;
    border-radius: 5.417vw;
    width: 41.667vw;
    height: 10.833vw;
    margin-left: 5.833vw;
    padding-right: 4.167vw;
    margin-bottom: 2.222vw;
}

#profile_formobile .test_level123 img {
    width: 11.389vw;
    height: 7.500vw;
    margin-top: 1.667vw;
    margin-left: 1.667vw;
}

#profile_formobile .stylecount1 {
    font-style: normal;
    font-weight: 500;
    font-size: 7.500vw;
    line-height: 10vw;
    display: flex;
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    text-align: right;
    display: block;
}

#profile_formobile .stylecount2 {
    background: linear-gradient(180deg, #53CD9F 0%, #16997E 100%);
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    -webkit-text-fill-color: transparent;
    text-align: right;
    font-style: normal;
    font-weight: normal;
    font-size: 4.167vw;
    line-height: 10vw;
}

.level_total_mobile {
    margin-top: 13.611vw;
}

.bg_color_blur {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 1666.667vw;
    margin-top: -15vw;
    position: absolute;
    z-index: 2;
}

.opacity_fade {
    opacity: 0.5;
    pointer-events: none;
}

#mySidenav .dropdown a:focus,
#mySidenav .dropdown a:active,
#mySidenav .dropdown a:visited {
    text-decoration: none;
}

#mySidenav .slide_animate {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    transform: translateX(0px);
    transition: transform 600ms ease 0s;
}

/*** NEW home jpc ***/
/* desktop */
#for_desktop #home-section-1 {
    width: 1120px;
    height: 734px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#for_desktop #home-section-1 .text-header {
    padding-top: 80px;
}

#for_desktop #home-section-1 .text-1-section-1 div {

    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    color: #212E4B;
}

#for_desktop #home-section-1 img.logo {
    width: 32px;
    height: 32px;
    margin-top: 12px;
    margin-bottom: 48px;
}

#for_desktop #home-section-1 button {
    outline: none;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 24px;
    border: none;
    width: 215px;
    height: 64px;
    margin-bottom: 32px;
}

#for_desktop #home-section-1 button a {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    color: #212E4B;

    text-decoration: none;
}

#for_desktop #home-section-1 button .logo-arrow-1 {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    margin-top: -3px;
}

#for_desktop #home-section-1 .logo-arrow-2 {
    margin-left: 24px;
    height: 40px;
    margin-bottom: 48px;
}

#for_desktop #home-section-1 .text-1-section-2 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;

    margin-bottom: 22px;
}

#for_desktop #home-section-1 .logo-company {
    width: 488px;
    height: 48px;
}

#for_desktop #home-section-1 .bg-home-section-1 {
    width: 594.11px;
    height: 561px;
    position: absolute;
    top: 24px;
    right: 0px;
}

#for_desktop #home-section-2 {
    background-image: url(/static/images/new_Jobpasscard/bg_v_home.png);
    background-size: 1120px 600px;
    width: 1120px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 88px;
    margin-bottom: 80px;
}

#for_desktop #home-section-2 iframe {
    border-radius: 32px;
}

#for_desktop #home-section-3 .flag {
    width: 19.2px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 24px;
}

#for_desktop #home-section-3 .text-1-section-3 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;

    text-align: center;
    margin-bottom: 13px;
}

#for_desktop #home-section-3 .text-2-section-3 div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    width: 544px;
    height: 64px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    margin-bottom: 48px;
}

#for_desktop #home-section-3 .home-card {
    width: 352px;
    height: 409px;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
}

#for_desktop #home-section-3 .benefit-card {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #home-section-4 .shield,
#for_desktop #home-section-5 .shield {
    width: 24px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 24px;
}

#for_desktop #home-section-4 .shield {
    margin-top: 160px;
}

#for_desktop #home-section-4 .text-1-section-4 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    text-align: center;

    margin-bottom: 16px;
}

#for_desktop #home-section-4 .text-2-section-4 {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    width: 400px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
}

#for_desktop #home-section-4 .home-card,
#for_desktop #home-section-4 .course_group_card {
    width: 256px;
    height: 341px;
}

#for_desktop #home-section-4 .course_group_card {
    position: relative;
}

#for_desktop #home-section-4 .course_group_card .tab-course-group-level {
    display: flex;
    position: absolute;
    bottom: 32px;
    left: 24px;
    width: 226px;
}

#for_desktop #home-section-4 .course_group_card .tab-course-group-level .col-8 {
    display: flex;
}

#for_desktop #home-section-4 .course_group_card .tab-course-group-level .col-4 div {
    text-align: right;
    display: flex;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;

    color: #FFFFFF;
}

#for_desktop #home-section-4 .course_group_card .tab-course-group-level .dot-level {
    background: #FFFDEA;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 6px;
}

#for_desktop #home-section-4 .passcard-card {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 112px;
    display: flex;
    overflow: hidden;
}

#for_desktop #home-section-4 .view-more {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    outline: none;
    width: 173px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: transparent;
    margin-bottom: 160px;
    margin-top: -64px;
}

#for_desktop #home-section-4 .view-more a {
    color: #59C4AE;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;

    text-decoration: none;
}

#for_desktop #home-section-5 .text-1-section-5 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;

    text-align: center;
    margin-bottom: 16px;
}

#for_desktop #home-section-5 .shield {
    width: 19.2px;
    height: 24px;
}

#for_desktop #home-section-5 .text-2-section-5 div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
}

#for_desktop #home-section-5 .logo-company {
    width: 680px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 48px;
}

#for_desktop #home-section-5 .view-more {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    width: 276px;
    height: 48px;
    outline: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: transparent;
    margin-bottom: 80px;
    margin-top: 48px;
}

#for_desktop #home-section-5 .view-more a {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;
    text-decoration: none;

}

#for_desktop #home-section-6 {
    min-width: 1200px;
    max-width: 100%;
    height: 884px;
    background-size: 100% auto;
    margin-left: auto;
    margin-right: auto;
    background-image: url(/static/images/new_Jobpasscard/bg_certificate_home.png);
    padding-top: 128px;
}

#for_desktop #home-section-6 .text-1-section-6 {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 16px;
    color: #212E4B;
    margin-left: auto;
    margin-right: auto;
    width: 1130px;

}

#for_desktop #home-section-6 .text-2-section-6,
#for_desktop #home-section-6 .icon-home-section-6 {
    margin-left: auto;
    margin-right: auto;
    width: 1130px;
}

#for_desktop #home-section-6 .text-2-section-6 div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    margin-bottom: 48px;
}

#for_desktop .authen-title1 {

    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    color: #212E4B;
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 16px;
}

#for_desktop .authen-title2 {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    width: 1120px;
    margin-left: auto;
    color: #7A89A6;
    margin-right: auto;
    margin-bottom: 80px;
}

#for_desktop .authen-detail .authen-welcome-name {

    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    color: #212E4B;
    width: 1120px;
    margin-right: auto;
    margin-bottom: 33px;
}

#for_desktop .authen-detail .your-test {
    font-size: 14px;
    color: #5E7094;
    margin-bottom: 20px;
}

#for_desktop .authen-detail .info {
    display: flex;
    color: #7A89A6;
}

#for_desktop .authen-detail .info>*:not(:first-child) {
    margin-left: 20px;
}

#for_desktop .authen-detail .info>a {
    color: #4B8DF1;
}

#for_desktop .authen-detail .item .item-img {
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
}

#for_desktop .authen-detail .text-bottom {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #415984;
    margin-top: 24px;
}

#for_desktop .view-my-passcard {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop .view-my-passcard button {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    width: 160px;
    height: 48px;
    margin-top: 8px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#for_desktop .view-my-passcard button img {
    width: 24px;
    margin-left: 8px;
}

#for_desktop .view-my-passcard button a {
    color: #59C4AE;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-decoration: none;
}

#for_desktop .authen-detail .item .item-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

#for_desktop .authen-detail .passcard-name {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    width: 100%;
    word-break: break-word;
    margin-bottom: 11px;
}

#for_desktop .authen-detail .expire-interval {
    font-size: 20px;
    color: #59C4AE;
}

#for_desktop .authen-detail .expire-interval img {
    margin-right: 5px
}

#for_desktop .authen-detail .expire-in {
    font-size: 14px;
    color: #5E7094;
    margin-bottom: 0;
    margin-top: auto;
}

#for_desktop .authen-detail .expire-in .red {
    color: #EB3C2B;
}

#for_desktop .authen-detail .show-now {
    width: 123px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    border: none;
    outline: none;
}

#for_desktop .authen-detail button.show-now {

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #212E4B;
    text-align: center;
    text-decoration: none;
}

#for_desktop .authen-detail .level-tab {

    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #9E9E9E;
    margin-top: -6px;
}

#for_desktop .authen-detail .passed-dot {
    background: #00DBB6;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
}

#for_desktop .authen-detail .not-passed-dot {
    background: #E7F3FE;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
}

#for_desktop .course-expired {
    width: 1160px;
    padding-top: 20vh;
    padding-left: 18px;
    margin-left: auto;
    margin-right: auto;
    background: url(/static/images/new_Jobpasscard/home-authen-bg.png) no-repeat;
    background-size: 44% auto;
    background-position: 100% 100%;
}

#for_desktop .course-expired .item {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 4px 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    width: 640px;
    height: 224px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
}

#for_desktop .course-expired .item p {
    font-size: 18px;
    margin-bottom: 0;
    margin-left: 20px;
}

#for_desktop .course-expired .item p:first-child {
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 20px;
}

#for_desktop .course-expired h1 {
    font-size: 48px;
    color: #212E4B;
    margin-bottom: 33px;
}

#for_desktop .course-expired .info {
    display: flex;
    color: #7A89A6;
}

#for_desktop .course-expired .info>*:not(:first-child) {
    margin-left: 20px;
}

#for_desktop .course-expired .info>a {
    color: #4B8DF1;
}

#for_desktop .passcard-candidate-row {
    margin-bottom: 48px;
    margin-top: 109px;
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop .passcard-candidate-row .to-passcard-text {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
}

#for_desktop .passcard-candidate-row .to-passcard-view {
    float: right;
    border: none;
    background: transparent;
    outline: none;
    width: 105px;
    height: 28px;
    margin-top: 2px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#for_desktop .passcard-candidate-row .to-passcard-view a {

    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;
    text-decoration: none;
    float: right;
    border: none;
    background: transparent;
    outline: none;
    width: 105px;
    height: 28px;
    margin-top: 2px;
}

#for_desktop .passcard-candidate-row .to-passcard-view a img {
    width: 24px;
    margin-left: 8px;
}

#for_desktop #home-section-3 .benefit-card .col-4 {
    position: relative;
}

#for_desktop #home-section-3 .head-text {
    position: absolute;
    top: 126px;
    left: 52px;
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;

    width: 220px;
}

#for_desktop #home-section-3 .detail-text {
    position: absolute;
    top: 207px;
    left: 52px;
    color: #7A89A6;
}

#for_desktop #home-section-3 .detail-text div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

}

#for_desktop #home-section-6 .home-card {
    width: 352px;
    height: 396px;
    margin-right: 24px;
}

#for_desktop #home-section-6 #carouselExampleControls {
    width: 1130px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #home-section-6 .carousel-control-prev-icon,
#for_desktop #home-section-6 .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: none;
    background-size: 64px, 64px;
}

#for_desktop #home-section-6 .carousel-control-next,
#for_desktop #home-section-6 .carousel-control-prev {
    position: inherit;
    width: 94px;
}

#for_desktop #home-section-6 #control_carousel {
    display: flex;
    width: 188px;
    float: right;
    position: absolute;
    right: 0px;
    clear: both;
    top: 70px;
}

#for_desktop #home-section-6 .carousel-indicators {
    position: inherit;
    margin: 0;
    padding-top: 60px;
}

#for_desktop #home-section-6 .carousel-control-prev-icon {
    background-image: url(/static/images/new_Jobpasscard/chevron-left.png);
}

#for_desktop #home-section-6 .carousel-control-next-icon {
    background-image: url(/static/images/new_Jobpasscard/chevron-right.png);
}

#for_desktop #home-section-6 .first-card-title {
    position: absolute;
    top: 78px;
    left: 24px;
}

#for_desktop #home-section-6 .second-card-title {
    position: absolute;
    top: 78px;
    left: 414px;
}

#for_desktop #home-section-6 .third-card-title {
    position: absolute;
    top: 78px;
    left: 802px;
}

#for_desktop #home-section-6 .first-card-title,
#for_desktop #home-section-6 .second-card-title,
#for_desktop #home-section-6 .third-card-title {
    color: #00DBB6;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;

    margin-bottom: 44px;
}

#for_desktop #home-section-6 .first-card-content {
    position: absolute;
    top: 148px;
    left: 24px;
}

#for_desktop #home-section-6 .second-card-content {
    position: absolute;
    top: 148px;
    left: 414px;
}

#for_desktop #home-section-6 .third-card-content {
    position: absolute;
    top: 148px;
    left: 802px;
}

#for_desktop #home-section-6 .first-card-content,
#for_desktop #home-section-6 .second-card-content,
#for_desktop #home-section-6 .third-card-content {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    width: 304px;
}

#for_desktop #home-section-6 #control1 {
    display: flex;
    position: relative;
}

#for_desktop #home-section-6 .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #C3CBD9;
    border-top: inherit;
    border-bottom: inherit;
}

#for_desktop #home-section-6 .carousel-indicators .active {
    background-color: #00DBB6;
    width: 48px;
    border-radius: 100px;
}

#for_desktop #home-section-5 .logo-right,
#for_desktop #home-section-1 .logo-right {
    float: right;
}

#for_desktop #home-section-5 .logo-center,
#for_desktop #home-section-1 .logo-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#for_desktop #home-section-5 .row {
    margin-bottom: 24px;
}

#for_desktop #about-us-section-1 {
    background-image: url(/static/images/new_Jobpasscard/frame_1708.png);
    background-size: 1120px 640px;
    width: 1120px;
    height: 450px;
    margin: auto;
    position: relative;
}

#for_desktop #about-us-section-1 .header-text {
    padding-top: 80px;
    width: 928px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #about-us-section-1 .header-text div {

    font-style: normal;
    font-weight: 600;
    font-size: 64px;
    line-height: 80px;
    text-align: center;
    color: #212E4B;
}

#for_desktop #about-us-section-1 #trust-logo-wrap {
    bottom: 80px;
    display: block;
    left: 316px;
    text-align: center;
    margin-top: 24px;
}

#for_desktop #trust-by {
    width: 440px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    margin-top: 250px;
}

#for_desktop #about-us-section-1 .trust-logo {
    width: 48px;
    height: 48px;
    position: relative;
    margin-right: 40px;
    display: flex;
}

#for_desktop #we-are div.green {

    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 80px;
    text-align: center;
    color: #00DBB6;
    margin-right: 16px;
}

#for_desktop #we-are div.bold {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 64px;
    line-height: 80px;
    text-align: center;
    margin-right: 16px;
}

#for_desktop #we-are div.normal {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
    line-height: 80px;
    text-align: center;
}

#for_desktop #we-are {
    width: max-content;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

#for_desktop #describe {
    margin-top: 24px;
    width: 1120px;
    /* height: 96px; */

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    margin-left: auto;
    margin-right: auto;
    color: #7A89A6;
}

#for_desktop #detail {
    width: 1120px;
    height: 208px;
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

#for_desktop #detail #for-jobber {
    width: 544px;
    height: 208px;
    margin-right: 32px;
}

#for_desktop #detail .green-text {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #59C4AE;
    margin-bottom: 24px;
}

#for_desktop #detail .gray-text {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
}

#for_desktop #detail #for-enterprise {
    width: 544px;
    height: 208px;
}

#for_desktop #frame_3984 {
    width: 1120px;
    height: 531px;
    margin-top: 36px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #spec {
    width: 1120px;
    height: 600px;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #spec .flag {
    width: 20px;
    height: 21px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 31.2px;
}

#for_desktop #spec .spec-text {
    width: 448px;
    height: 48px;

    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: #212E4B;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #spec .for {
    width: 179px;
    height: 46px;

    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    margin: auto;
    cursor: pointer;
}

#for_desktop #spec #line {
    width: 1121px;
    height: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #EEEEEE;
    margin-bottom: 48px;
}

#for_desktop #spec #green-line {
    /* left: 334px; */
    left: 444px;
    position: relative;
    width: 227px;
    height: 4px;
    background: #00DBB6;
    border-radius: 4px 4px 0px 0px;
}

#for_desktop #spec .block {
    margin-right: 32px;
    width: 352px;
    height: 144px;
}

#for_desktop #spec .block img {
    top: 28px;
    left: 22px;
    width: 24px;
    height: 24px;
}

#for_desktop #spec .block .title {
    margin-left: 38px;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    display: inline-flex;
}

#for_desktop #spec .block .title.known-ur-self {
    margin-left: 34px;
}

#for_desktop .more-our-customer {
    margin-bottom: 80px;
    text-align: center;
}

.more-our-customer-button {
    width: 276px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    border-radius: 16px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    background-color: #FFFFFF;
}

.more-our-customer-button:hover {
    color: #71E8C4;
    border: 1.5px solid #71E8C4;
}

.more-our-customer-button:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

#for_desktop #spec .block .text-in {
    width: 272px;
    height: 48px;
    margin-left: 66px;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #7A89A6;
    margin-top: 16px;
}

#for_desktop #spec .block .text-in.descripe-course {
    margin-left: 60px;
}

#for_desktop #preview-group-sec-1 {
    width: 1120px;
    height: 500px;
    margin-top: 66px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #preview-group-sec-1 #doc-course-bg {
    width: 580px;
    height: 435px;
    background-image: url(/static/images/new_Jobpasscard/cg_bg.png);
    background-size: 580px 435px;
    position: relative;
    float: right;
}

#for_desktop #preview-group-sec-1 #wrap-passcard {
    width: 256px;
    height: 341px;
    margin-left: 178px;
    margin-top: 56px;
}

#for_desktop #preview-group-sec-1 #passcard-img {
    position: absolute;
    width: 256px;
    height: 341px;
}

#for_desktop #preview-group-sec-1 #doc-course-bg .level-tab {
    margin-top: 293px;
    margin-left: 24px;
    position: absolute;
    display: flex;
    height: 16px;
    width: 72px;
}

#for_desktop #preview-group-sec-1 #doc-course-bg .level-tab div {
    width: 16px;
    height: 16px;
    background: #E7F3FE;
    border-radius: 50%;
    margin-right: 8px;
}

#for_desktop #preview-group-sec-1 #doc-course-bg #level-passcard {
    margin-top: 286px;
    margin-left: 174px;
    position: absolute;
    display: flex;
    width: 56px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    text-transform: uppercase;
    color: #FFFFFF;
}

#for_desktop #preview-group-sec-1 #header-name {

    font-style: normal;
    font-weight: 600;
    font-size: 64px;
    line-height: 80px;
    color: #212E4B;
    display: inline-block;
}

#for_desktop #preview-group-sec-1 #wishlist-cir {
    width: 48px;
    height: 48px;
    margin-top: -5px;
    margin-left: 16px;
    border: 1.5px solid #59C4AE;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 50%;
}

#for_desktop #preview-group-sec-1 #sub-header div {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    width: 420px;
}

#for_desktop #preview-group-sec-1 #select-level-text {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #2B3E64;
    margin-top: 18px;
}

#for_desktop #preview-group-sec-1 #select-level {
    margin-top: 18px;
    width: 420px;
    display: flex;
}

#for_desktop #preview-group-sec-1 #select-level .level-select {
    display: inline-block;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
    width: 76px;
    height: 40px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    cursor: pointer;
    margin-right: 16px;
    text-align: center;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    flex: none;
    order: 0;
    flex-grow: 0;
}

#for_desktop #preview-group-sec-1 #select-level .level-select:hover {
    background: #DEFAF2;
}

#for_desktop #preview-group-sec-1 #price {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    color: #59C4AE;
    margin-top: 24px;
}

#for_desktop #preview-group-sec-1 .test-on {

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #E6853D;
    display: inline-block;
}

#for_desktop #preview-group-sec-1 #vertical-line {
    display: inline-block;
    width: 32px;
    height: 0px;
    border: 1px solid #EEEEEE;
    transform: rotate(90deg);
    flex: none;
    order: 1;
    flex-grow: 0;
}

#for_desktop #preview-group-sec-1 #add-to-cart {
    display: inline-block;
    width: 188px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
    text-align: center;
    padding-top: 10px;
    margin-right: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
}

#for_desktop #preview-group-sec-1 #add-to-cart.disable-add-to-cart {
    background: #E0E0E0;
    color: #BDBDBD;
    box-shadow: unset;
    cursor: default
}

#for_desktop #preview-group-sec-1 #add-to-cart.disable-add-to-cart>.disable-image {
    opacity: 0.2;
}

#for_desktop #preview-group-sec-1 #add-to-cart.disable-add-to-cart:hover {
    background: #E0E0E0;
    color: #BDBDBD;
}

#for_desktop #preview-group-sec-1 #add-to-cart:hover {
    background: #71e8c4;
}

#for_desktop #preview-group-sec-1 #go-to-test {
    display: inline-block;
    width: 188px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
    text-align: center;
    padding-top: 10px;
    margin-right: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
    text-decoration: none;
}

#for_desktop #preview-group-sec-1 #go-to-test:hover {
    background: #71e8c4;
}

.course-passed {
    display: inline-block;
    width: 188px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: default;
    text-align: center;
    padding-top: 10px;
    margin-right: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
    text-decoration: none;
}

#for_desktop #preview-group-sec-1 #buy-now {
    display: inline-block;
    width: 155px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    background: transparent;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

#for_desktop #preview-group-sec-1 #buy-now:hover {
    background: #DEFAF2;
}

#for_desktop #preview-group-sec-1 #share-course {
    width: 48px;
    height: 48px;
    display: inline-block;
    /* margin-left: 16px; */
    margin-top: -5px;
    cursor: pointer;
}

#for_desktop #preview-group-sec-2 {
    position: relative;
    width: 1120px;
    height: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

#for_desktop #preview-group-sec-2 #describe {

    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 35px;
    color: #212E4B;
}

#for_desktop #preview-group-sec-2 #sub-describe {
    text-align: left;
    margin-top: 29px;

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
}

#for_desktop #preview-group-sec-3 {
    width: 1120px;
    height: auto;
    margin-top: 66px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop #preview-group-sec-3 #img-head {
    width: 67.95px;
    height: 98px;
    margin: auto;
    display: block;
}

#for_desktop #preview-group-sec-3 .level-select-sec-3 {
    width: 153px;
    height: 56px;
    display: inline-block;
    color: #212E4B;

    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

#for_desktop #preview-group-sec-3 #active-bar {
    margin-top: 10px;
    height: 4px;
    background: #00DBB6;
    border-radius: 4px 4px 0px 0px;
}

#for_desktop #preview-group-sec-3 #line {
    width: 100%;
    height: 0px;
    left: 0px;
    border: 1px solid #EEEEEE;
}

#for_desktop #preview-group-sec-3 #header-3 {
    width: 319px;
    height: 32px;
    margin-left: auto;
    margin-top: 48px;
    margin-right: auto;
    display: block;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
}

#for_desktop #preview-group-sec-3 .columns-sec-3 {
    width: 49%;
    display: inline-table;
}

#for_desktop #preview-group-sec-3 .columns-sec-3 .detail-wraper {
    height: auto;
    margin-bottom: 66px;
}

#for_desktop #preview-group-sec-3 .columns-sec-3 .sub-header-sec-3 {
    display: inline-block;

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    width: 87%;
}

#for_desktop #preview-group-sec-3 .columns-sec-3 .sub-detail-sec-3 {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    margin-left: 15%;
    word-break: break-word;
}

#for_desktop .preview-group-sec-4 {
    width: 1120px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

#for_desktop .preview-group-sec-4 .header-sec-4 {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
}

#for_desktop .preview-group-sec-4 .content-block {
    width: 100%;
    height: 280px;
    background: #FFFFFF;
    box-shadow: 0px 4px 160px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    margin-top: 24px;
}

#for_desktop .preview-group-sec-4 .content-block #creator-img {
    width: 160px;
    height: 160px;
    margin-left: 48px;
    margin-top: 32px;
    position: absolute;
}

#for_desktop .preview-group-sec-4 .content-block #creator-name {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 16px;
}

#for_desktop .preview-group-sec-4 .content-block .creator-educate {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #3B517B;
}

#for_desktop .preview-group-sec-4 .content-block .expert-in {
    display: inline;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    height: 40px;
    border: 2px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    margin-right: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

#for_desktop .preview-group-sec-4 .content-block .passcard {
    width: 160px;
    height: 312px;
    display: inline-table;
    margin-top: 32px;
}

#for_desktop .preview-group-sec-4 .content-block .passcard .small-passcard {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    object-fit: cover;
    object-position: top;
}

#for_desktop .preview-group-sec-4 .content-block .symbol-img {
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 156px;
}

#for_desktop .preview-group-sec-4 .content-block .bundle-course-name {

    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    text-align: left;
    margin-top: 16px;
}

#for_desktop .preview-group-sec-4 .content-block .level-wrap {
    text-align: left;
    margin-top: 4px;
}

#for_desktop .preview-group-sec-4 .content-block .level-wrap .level-text {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    text-transform: uppercase;
    color: #9E9E9E;
    display: inline;
    margin-left: 8px;
}

#for_desktop .preview-group-sec-4 .content-block .level-wrap .circle-wrap {
    width: 64px;
    height: 16px;
    display: inline-block;
}

#for_desktop .preview-group-sec-4 .content-block .level-wrap .circle-wrap div {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
}

#for_desktop .preview-group-sec-4 .content-block .price-course {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #415984;
    text-align: left;
    margin-top: 24px;
}

#for_desktop .preview-group-sec-4 .content-block .full-price {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    text-decoration-line: line-through;
    color: #415984;
}

#for_desktop .preview-group-sec-4 .content-block .final-price {
    margin-top: 4px;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #59C4AE;
}

#for_desktop .preview-group-sec-4 .content-block .discount-price {
    margin-top: 22px;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    color: #E6853D;
}

#for_desktop .preview-group-sec-4 .content-block .add-to-cart {
    margin-top: 24px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;



    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

#for_desktop .preview-group-sec-4 .content-block .add-to-cart:hover {
    background: #DEFAF2;
}

#for_desktop .preview-group-sec-4 .popular-passcard-wrap {
    width: 100%;
    height: 341px;
    background: transparent;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
    margin-top: 24px;
    text-align: center;
}

#for_desktop .preview-group-sec-4 .popular-passcard-wrap .popular-passcard {
    width: 256px;
    height: 341px;
    display: inline-table;
    background: transparent;
    margin-right: 21px;
}

#for_desktop .section1-logo .logo_customer {
    margin-right: 20px;
}


/* mobile */
#for_mobile .authen-title1 {
    margin-top: 25.867vw;
    margin-bottom: 6.400vw;
    width: 89.333vw;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile .authen-title1 div {
    color: #212E4B;

    font-style: normal;
    font-weight: 500;
    font-size: 10.667vw;
    line-height: 14.933vw;
    text-align: center;
}

#for_mobile .authen-title2 {
    margin-bottom: 21.333vw;
    width: 89.600vw;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile .authen-title2 div {
    color: #7A89A6;

    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;
    text-align: center;
}

#for_mobile .authen-detail .authen-welcome-name {
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 43px;
    padding-top: 100px;
}

#for_mobile .authen-detail {
    height: 100vh;
}

#for_mobile .jpc_name_highlight {
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #00DBB6;
}

#for_mobile .jpc_job_title {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #212E4B;
    margin-top: 32px;
}

#for_mobile .jpc_job_step {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    color: #5E7094;
    margin: 16px 0;
    margin-bottom: 32px;
}

#for_mobile a.btn-job-qr {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 41px;
    align-items: center;
    background: #00DBB6;
    border-radius: 16px;
}

#for_mobile a.btn-job-qr {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #212E4B;
    text-decoration: none;
}

#for_mobile a.btn-job-qr:hover {
    background-color: #71e8c4;
}

#for_mobile a.btn-job-qr:active {
    background-color: #59c4ae;
}

#for_mobile .footer_qr {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 4%), 0px -4px 8px rgb(0 0 0 / 6%);
    width: 100%;
    height: 104px;
    position: sticky;
    top: 100%;
    left: 0;
    bottom: 0;
    padding: 16px 24px;
    padding-top: 40px;
}

#for_mobile .authen-detail .item {
    background: #FFFFFF;
    box-shadow: 0px 1.067vw 42.667vw rgb(0 0 0 / 5%);
    border-radius: 4.267vw;
    width: 89.600vw;
    height: 57.600vw;
    margin-left: auto;
    padding: 4.267vw;
    margin-right: auto;
    margin-bottom: 6.400vw;
}

#for_mobile .authen-detail .item .item-img {
    overflow: hidden;
    width: 29.867vw;
    height: 29.867vw;
    border-radius: 4.267vw;
}

#for_mobile .authen-detail .item .item-img img {
    width: 29.867vw;
}

#for_mobile .authen-detail .passcard-name {

    font-style: normal;
    font-weight: normal;
    font-size: 6.400vw;
    line-height: 8.533vw;
    color: #212E4B;
    margin-bottom: 2.933vw;
}

#for_mobile .authen-detail .passed-dot {
    background: #00DBB6;
    width: 4.267vw;
    height: 4.267vw;
    border-radius: 500%;
    margin-right: 1.600vw;
}

#for_mobile .authen-detail .not-passed-dot {
    background: #E7F3FE;
    width: 4.267vw;
    height: 4.267vw;
    border-radius: 500%;
    margin-right: 1.600vw;
}

#for_mobile .authen-detail .level-tab {

    font-style: normal;
    font-weight: bold;
    font-size: 4.267vw;
    line-height: 4.267vw;
    color: #9E9E9E;
    /* margin-top: -1.600vw; */
}

#for_mobile .authen-detail .text-bottom {
    margin-top: 5.067vw;

    font-style: normal;
    font-weight: normal;
    font-size: 4.800vw;
    line-height: 7.467vw;
    color: #415984;
}

#for_mobile .authen-detail .btn-test {
    margin-top: 6.400vw;
}

#for_mobile .authen-detail .show-now {
    background: #00DBB6;
    box-shadow: 0px 1.6vw 5.333vw #adf0dc;
    border-radius: 4.267vw;
    border: none;
    outline: none;
    width: 50.067vw;
    height: 12.8vw;
}

#for_mobile .authen-detail .show-now a {
    text-decoration: none;

    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;
    color: #212E4B;
}

#for_mobile .authen-detail .view-my-passcard {
    margin-top: 8.533vw;
    height: 156.533vw;
    background: url(/static/images/new_Jobpasscard/home-authen-bg.png) no-repeat;
    background-size: 156.267vw auto;
    background-position: -41.067vw -10.667vw;
}

#for_mobile .authen-detail .view-my-passcard button {
    border: 0.400vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    background: transparent;
    width: 42.667vw;
    height: 12.800vw;
    outline: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#for_mobile .authen-detail .view-my-passcard button a {

    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;
    text-decoration: none;
    color: #59C4AE;
}

#for_mobile .authen-detail .view-my-passcard button a img {
    width: 6.400vw;
    margin-left: 2.133vw;
}

#for_mobile .to-passcard-text {

    font-style: normal;
    font-weight: 500;
    font-size: 4.800vw;
    line-height: 6.400vw;
    color: #212E4B;
}

#for_mobile .to-passcard-view {
    float: right;
    width: 29.333vw;
    height: 7.467vw;
    display: flex;
    margin-right: -0.267vw;
    background: transparent;
    border: none;
    outline: none;
    margin-top: -1.067vw;
}

#for_mobile .to-passcard-view a {

    font-style: normal;
    font-weight: bold;
    font-size: 4.267vw;
    line-height: 7.467vw;
    color: #59C4AE;
    text-decoration: none;
}

#for_mobile .to-passcard-view a img {
    width: 6.400vw;
    margin-left: 2.133vw;
}

#for_mobile #home-mobile-section-1 {
    margin-top: 14%;
}

#for_mobile #home-mobile-section-1 .logo_customer,
#for_mobile #home-mobile-section-5 .logo_customer {
    width: 15.467vw;
    margin-bottom: 3.733vw;
}

#for_mobile #home-mobile-section-1 .logo-right,
#for_mobile #home-mobile-section-5 .logo-right {
    float: right;
}

#for_mobile #home-mobile-section-1 .logo-left,
#for_mobile #home-mobile-section-5 .logo-left {
    float: left;
}

#for_mobile #home-mobile-section-1 .logo-center,
#for_mobile #home-mobile-section-5 .logo-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#for_mobile #home-mobile-section-1 .text-header {
    padding-top: 10.667vw;
}

#for_mobile #home-mobile-section-1 .text-header div {
    font-style: normal;
    font-weight: 600;
    font-size: 9.600vw;
    line-height: 12vw;
    color: #212E4B;

    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #home-mobile-section-1 .logo {
    width: 8.533vw;
    height: 8.533vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10.667vw;
}

#for_mobile #home-mobile-section-1 button {
    border: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: #00DBB6;
    box-shadow: 0px 1.6vw 5.333vw #adf0dc;
    border-radius: 6.400vw;
    width: 57.333vw;
    height: 17.067vw;
    margin-bottom: 12.800vw;
}

#for_mobile #home-mobile-section-1 button a {
    font-style: normal;
    font-weight: 600;
    font-size: 4.800vw;
    line-height: 8.533vw;

    color: #212E4B;
    text-decoration: none;
}

#for_mobile #home-mobile-section-1 button img {
    width: 6.400vw;
    height: 6.400vw;
    margin-left: 2.133vw;
}

#for_mobile #home-mobile-section-1 .text-1-section-1 {
    font-style: normal;
    font-weight: 500;
    font-size: 4.800vw;
    line-height: 6.400vw;
    color: #212E4B;

    text-align: center;
    margin-bottom: 6.400vw;
}

#for_mobile #home-mobile-section-1 .logo-company {
    width: 96%;
    margin-bottom: 10.667vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#for_mobile #home-mobile-section-1 .passcard-bg {
    width: 100%;
}

#for_mobile #home-mobile-section-2 {
    background-image: url(/static/images/new_Jobpasscard/bg-v-mobile.png);
    background-size: 100% 318px;
    width: 100%;
    height: 318px;
    padding-top: 48px;
}

#for_mobile #home-mobile-section-2 iframe {
    border-radius: 32px;
}

#for_mobile #home-mobile-section-3 {
    padding-top: 12.800vw;
}

#for_mobile #home-mobile-section-3 .passcard {
    width: 6.400vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 6.400vw;
}

#for_mobile #home-mobile-section-3 .text-1-section-3 {
    font-style: normal;
    font-weight: 500;
    font-size: 9.600vw;
    line-height: 12.800vw;
    color: #212E4B;

    width: 85.867vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6.400vw;
}

#for_mobile #home-mobile-section-3 .text-2-section-3 {
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;
    color: #7A89A6;
    text-align: center;
    width: 89.600vw;
    margin-left: auto;
    margin-right: auto;

    margin-bottom: 8.533vw;
}

#for_mobile #home-mobile-section-3 .home-card {
    width: 68vw;

}

#for_mobile #home-mobile-section-3 .carousel-inner {
    width: 74vw;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #home-mobile-section-3 .carousel-item {
    padding-left: 3vw;
}


#for_mobile #home-mobile-section-3 .first-card-title,
#for_mobile #home-mobile-section-3 .second-card-title,
#for_mobile #home-mobile-section-3 .third-card-title {
    position: absolute;
    top: 27.733vw;
    left: 10.4vw;
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 6.400vw;
    line-height: 8.533vw;

    width: 56vw;
}

#for_mobile #home-mobile-section-3 .first-card-content {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8vw;

    width: 53.600vw;
    position: absolute;
    top: 54.400vw;
    left: 10.4vw;
}

#for_mobile #home-mobile-section-3 .second-card-content {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8vw;

    width: 53.600vw;
    position: absolute;
    top: 48vw;
    left: 10.4vw;
}

#for_mobile #home-mobile-section-3 .carousel-indicators {
    position: inherit;
    margin-top: 8.533vw;
}

#for_mobile #home-mobile-section-3 .carousel-indicators button {
    background-color: #C3CBD9;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 3.200vw;
    margin-right: 3.200vw;
}

#for_mobile #home-mobile-section-3 .carousel-indicators .active {
    background: #00DBB6;
    border-radius: 100px;
    width: 48px;
    height: 8px;
    margin-top: 10px;
    border: none;
}

#for_mobile #home-mobile-section-4 {
    padding-top: 25.600vw;
}

#for_mobile #home-mobile-section-4 .shield {
    width: 5.120vw;
    height: 6.400vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 6.400vw;
}

#for_mobile #home-mobile-section-4 .text-1-section-4 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 7.467vw;
    line-height: 9.600vw;

    text-align: center;
    margin-bottom: 4.267vw;
}

#for_mobile #home-mobile-section-4 .text-2-section-4 div {

    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #7A89A6;
}

#for_mobile #home-mobile-section-4 .text-2-section-4 {
    margin-bottom: 8.533vw;
}

#for_mobile #home-mobile-section-4 .home-card {
    width: 42.667vw;
    height: 56.800vw;
    margin-bottom: 4.267vw;
}

#for_mobile #home-mobile-section-4 .course_group_card {
    width: 42.667vw;
    height: 56.800vw;
    position: relative;
    margin-bottom: 3.200vw;
}

#for_mobile #home-mobile-section-4 .course_group_card .tab-course-group-level {
    position: absolute;
    bottom: 5.333vw;
    left: 4vw;
    width: 34.667vw;
}

#for_mobile #home-mobile-section-4 .course_group_card .tab-course-group-level .col-8 {
    display: flex;
}

#for_mobile #home-mobile-section-4 .course_group_card .tab-course-group-level .col-4 div {
    position: relative;
    z-index: 1;
    text-align: right;
    color: #FFFFFF;
    text-align: right;

    font-style: normal;
    font-weight: 600;
    font-size: 2.667vw;
    line-height: 4.533vw;
}

#for_mobile #home-mobile-section-4 .course_group_card .dot-level {
    background: #FFFDEA;
    width: 2.667vw;
    height: 2.667vw;
    border-radius: 50%;
    margin-right: 1.333vw;
    margin-top: 0.800vw;
}

#for_mobile #home-mobile-section-4 .row {
    width: 91vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5vw;
}

#for_mobile #home-mobile-section-4 .exercise-row {
    max-height: 119.991vw;
    overflow: hidden;
}

#for_mobile #home-mobile-section-4 .col_width176 {
    width: 46.933vw;
}

#for_mobile #home-mobile-section-4 .col_width160 {
    width: 42.667vw;
}

#for_mobile #home-mobile-section-4 .view_more a {
    color: #59C4AE;
    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;

    text-decoration: none;
}

#for_mobile #home-mobile-section-4 .view_more {
    width: 46.133vw;
    height: 12.800vw;
    border: 0.400vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    outline: none;
    background: transparent;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 12.800vw;
    margin-top: 4vw;
}

#for_mobile #home-mobile-section-5 .shield {
    width: 5.120vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 6.400vw;
}

#for_mobile #home-mobile-section-5 {
    padding-top: 6.400vw;
    margin-bottom: 14.933vw;
}

#for_mobile #home-mobile-section-5 .text-2-section-5 div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;
    text-align: center;

}

#for_mobile #home-mobile-section-5 .text-1-section-5 {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 7.467vw;
    line-height: 9.600vw;

    text-align: center;
    margin-bottom: 4.267vw;
}

#for_mobile #home-mobile-section-5 .text-2-section-5 {
    margin-bottom: 8.533vw;
}

#for_mobile #home-mobile-section-5 .view_more {
    width: 73.600vw;
    height: 12.800vw;
    border: 0.400vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    background: transparent;
    outline: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 8.533vw;
}

#for_mobile #home-mobile-section-5 .view_more a {
    color: #59C4AE;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;

}

#for_mobile #home-mobile-section-6 {
    background-image: url(/static/images/new_Jobpasscard/exp_bg_mobile.png);
    background-size: 100vw 206.933vw;
    margin-top: 27.733vw;
}

#for_mobile #home-mobile-section-6 .text-1-section-6 {
    font-style: normal;
    font-weight: 500;
    font-size: 7.467vw;
    line-height: 9.600vw;
    text-align: center;
    padding-top: 25.600vw;
    margin-bottom: 4.267vw;
    color: #212E4B;

}

#for_mobile #home-mobile-section-6 .text-2-section-6 div {
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;

    text-align: center;
}

#for_mobile #home-mobile-section-6 .text-2-section-6 {
    margin-bottom: 18.133vw;
}

#for_mobile #home-mobile-section-6 .home-card {
    width: 66.133vw;
    height: 96vw;
}

#for_mobile #home-mobile-section-6 .carousel-item {
    padding-left: 3.5vw;
}

#for_mobile #home-mobile-section-6 .carousel-inner {
    width: 74vw;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #home-mobile-section-6 .carousel-indicators .active {
    background: #00DBB6;
    border-radius: 26.667vw;
    width: 12.800vw;
    height: 2.133vw;
    margin-top: 2.667vw;
    border: none;
}

#for_mobile #home-mobile-section-6 .carousel-indicators button {
    background-color: #C3CBD9;
    width: 2.133vw;
    height: 2.133vw;
    border-radius: 50%;
    margin-right: 3.200vw;
    margin-left: 3.200vw;
}

#for_mobile #home-mobile-section-6 .carousel-indicators {
    position: inherit;
    margin-top: 8.533vw;
}

#for_mobile #home-mobile-section-6 .first-card-title {
    position: absolute;
    top: 14.933vw;
    left: 8.5vw;
    color: #00DBB6;
    font-style: normal;
    font-weight: 500;
    font-size: 6.400vw;
    line-height: 8.533vw;

}

#for_mobile #home-mobile-section-6 .first-card-content {
    position: absolute;
    top: 30.933vw;
    left: 8.5vw;
    width: 53.333vw;
    color: #7A89A6;
    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;

}

#for_mobile #home-mobile-section-6 #control3 {
    padding-bottom: 9.600vw;
}

#for_mobile #about-us-section-1 {
    background-image: url(/static/images/new_Jobpasscard/about-us-bg-mobile.png);
    background-repeat: no-repeat;
    background-size: 100% 397px;
    width: 100%;
    height: auto;
    margin: auto;
    position: relative;
}

#for_mobile #about-us-section-1 .header-text {
    padding-top: 10.13vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #about-us-section-1 .header-text div {

    font-style: normal;
    font-weight: 600;
    font-size: 9.6vw;
    line-height: 12.8vw;
    text-align: center;
    color: #212E4B;
}

#for_mobile #trust-by {
    width: auto;
    height: 24px;
    margin-left: auto;
    margin-right: auto;

    font-style: normal;
    font-weight: 500;
    font-size: 5.33vw;
    line-height: 24px;
    text-align: center;
    color: #212E4B;
}

#for_mobile #about-us-section-1 #trust-logo-wrap {
    height: auto;
    display: block;
    left: 23.2px;
    justify-content: center;
    margin-top: 16px;
    text-align: center;
}

#for_mobile #about-us-section-1 .trust-logo {
    width: 55.6px;
    height: 55.6px;
    position: relative;
    display: flex;
}

#for_mobile #we-are {
    margin-top: 40px;
}


#for_mobile #we-are div.green {

    font-style: normal;
    font-weight: 500;
    font-size: 9.6vw;
    line-height: 48px;
    text-align: center;
    color: #00DBB6;
    margin-right: 8px;
}

#for_mobile #we-are div.bold {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 9.6vw;
    line-height: 48px;
    text-align: center;
    margin-right: 8px;
}

#for_mobile #we-are div.normal {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 9.6vw;
    line-height: 48px;
    text-align: center;
}

#for_mobile #we-are {
    width: max-content;
    margin-left: auto;
    margin-right: auto;

}

#for_mobile #describe {
    width: 336px;
    height: 192px;

    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #7A89A6;
}

.describe-paragraph {
    font-size: 4.8vw;
    height: auto;
    width: 90.934vw;

    font-style: normal;
    font-weight: normal;
    line-height: 6.4vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #7A89A6;
}

#for_mobile #for-jobber {
    margin-top: 16px;
    width: 339px;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile .green-text {

    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 34px;
    color: #59C4AE;
    text-align: center;
}

#for_mobile .gray-text {

    font-style: normal;
    font-weight: normal;
    line-height: 24px;
    color: #7A89A6;
    margin-top: 16px;
    text-align: center;
    font-size: 4.8vw;
    height: auto;
    width: 90.934vw;
}

#for_mobile #for-enterprise {
    margin-top: 16px;
    width: 339px;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #frame_3984 {
    width: 862px;
    height: 409px;
    margin-top: 36px;
    margin-left: -296px;
}

#for_mobile #spec {
    width: 100%px;
    height: max-content;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #spec .flag {
    width: 19.2px;
    height: 16.8px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 31.2px;
}

#for_mobile #spec .spec-text {
    width: 336px;
    height: 32px;

    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #spec .for {
    width: 179px;
    height: 46px;

    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    margin: auto;
    cursor: pointer;
}

#for_mobile #spec #line {
    width: 1121px;
    height: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #EEEEEE;
    margin-bottom: 48px;
}

#for_mobile #spec #green-line {
    /* left: 10px; */
    left: 92px;
    position: relative;
    width: 187px;
    height: 4px;
    background: #00DBB6;
    border-radius: 4px 4px 0px 0px;
}

#for_mobile #spec .block {
    width: 336px;
    height: 144px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

#for_mobile #spec .block img {
    top: 28px;
    left: 22px;
    width: 24px;
    height: 24px;
}

#for_mobile #spec .block .title {
    margin-left: 38px;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    display: inline-flex;
}

#for_mobile #spec .block .text-in {
    width: 264px;
    height: 48px;
    margin-left: 66px;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #7A89A6;
    margin-top: 16px;
}

#for_mobile #our-customer-mobile {
    width: 100%;
    margin-top: 96px;
    text-align: center;
}

#for_mobile #our-customer-mobile .shield {
    width: 19.2px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile #our-customer-mobile #customer-header {
    width: 336px;

    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

#for_mobile #our-customer-mobile #customer-detail {
    width: 336px;

    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #7A89A6;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

#for_mobile #our-customer-mobile .col-2 {
    width: 33.33%;
}

#for_mobile #our-customer-mobile .row {
    width: 336px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

#for_mobile .section1-logo .logo_customer {
    margin-right: 20px;
    margin-top: 4px;
}


/**** NEW new home jpc ***/

/* new template */

.new_navbar {
    height: 72px;
    background: #FFFFFF;
}

.new_navbar .container-fluid {
    width: 1120px;
}

.new_navbar .navbar-brand img {
    width: 189px;
    height: 32px;
}

.new_navbar #new-main-menu ul {
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
}

.new_navbar #is_not_authenticated {
    margin-top: 4px;
}

.new_navbar #is_not_authenticated .icon-bar .search-iconcss {
    width: 24px;
    margin-top: 4px;
}

.new_navbar #is_not_authenticated .icon-bar .cart-iconcss {
    width: 32px;
}

.new_navbar #is_not_authenticated .icon-bar .nav-item.icon-img {
    margin-right: 24px !important;
}

.new_navbar .normal-menu {

    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 14px;
    text-decoration: none;
    color: #212E4B !important;
}

#break-navbar {
    border-bottom: 1px solid #EEEEEE;
}

#secondary-navbar {
    min-height: 72px;
    height: 72px;
    background-color: white;
    border-bottom: 1px solid var(--stable-blue-50-stroke, #E8EAF0);
}

#secondary-navbar button,
#secondary-navbar a[role="button"] {
    color: #BDBDBD;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    border: none;
    background: transparent;
    outline: none;
    width: 112px;
    height: 100%;
}

#secondary-navbar button.active {
    background: white;
    color: #212E4B !important;
    border-bottom: 4px solid #00DBB6;
}

#secondary-navbar button:hover {
    color: #212E4B !important;
}

#secondary-navbar .container-fluid {
    max-width: 1120px;
    /* padding-top: 16px; */
    height: 100%;
    display: flex;
    align-items: center;
}

/* #secondary-navbar .dropdown {
  float: right;
  margin-left: auto;
  width: 112px;
} */

#secondary-navbar .language-name img,
#secondary-navbar .dropdown-item img {
    width: 23px;
    margin-right: 8px;
}

#secondary-navbar .language-name span,
#secondary-navbar .dropdown-item span {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;

    color: #212E4B;
}

#secondary-navbar .dropdown-toggle {
    outline: none;
    width: 112px;
    display: flex;
}

#secondary-navbar .dropdown-toggle:focus,
#secondary-navbar .dropdown-toggle:visited,
#secondary-navbar .dropdown-toggle:active {
    outline: none;
    box-shadow: none;
}

/* #secondary-navbar .dropdown-toggle::after {
  margin-top: 12px !important;
  margin-left: -8px !important;
  border: none;
} */

#secondary-navbar .container-fluid .row {
    padding-left: 15px;
    padding-right: 15px;
}

#secondary-navbar .dropdown-toggle a:focus,
#secondary-navbar .dropdown-toggle a:visited,
#secondary-navbar .dropdown-toggle a:hover {
    background: none !important;
}

#secondary-navbar .dropdown-toggle a {
    padding: 0px 0px;
}

/* #secondary-navbar .dropdown-menu {
  min-width: 99px !important;
  transform: translate3d(10px, 40px, 0px) !important;
} */

.new_navbar #is_not_authenticated .icon.bell {
    width: 32px;
}

.new_navbar #is_not_authenticated .break {
    width: 1px;
    height: 32px;
    background: #EEEEEE;
}

.new_navbar #is_not_authenticated .private-menu {
    margin-bottom: 0px !important;
}

.new_navbar #is_not_authenticated .private-menu button {
    display: flex;
    min-width: 132px;
    margin-bottom: 0px;
    margin-left: -4px;
    justify-content: center;
}

.private-menu .view-profile-setting:hover {
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    color: #212E4B !important;
}

.private-menu .view-profile-setting:hover>a {
    background: #00DBB6;
    border-radius: 16px;
    color: #212E4B !important;
}

.new_navbar #is_not_authenticated .private-menu button:focus {
    outline: none;
    box-shadow: none;
}

.new_navbar #is_not_authenticated .private-menu .profile-img {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 8px;
    margin-top: -1px;
}

.new_navbar #is_not_authenticated .private-menu .dropdown-toggle::after {
    margin-left: 8px !important;
    margin-top: 9px !important;
}

.new_navbar #is_not_authenticated .private-menu button a {
    background: transparent;
    padding: 0 !important;
}

.new_navbar #is_not_authenticated .private-menu li a,
.new_navbar #is_not_authenticated .private-menu li a span {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: #212E4B;
    padding: 0px 40px;
}

.new_navbar #is_not_authenticated .private-menu a span.name {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: #212E4B;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70px;
    overflow: hidden;
    display: inline-block;
}

#footer-desktop {
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    padding-top: 25px;
    padding-bottom: 24px;
    background: white;
}

#footer-desktop .detail {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
}

#footer-desktop .detail .title-text {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;

    line-height: 28px;
    color: #212E4B;
    margin-bottom: 34px;
}

#footer-desktop .detail a {
    color: #7A89A6;
    text-decoration: none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

}

#footer-desktop .detail li {
    margin-bottom: 24px;
}

#footer-desktop .detail .add_line_jobpasscard-img {
    width: 112px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 16px;
}

#footer-desktop .detail .line-break-footer {
    border: 1px solid #EEEEEE;
    margin-top: 24px;
    margin-bottom: 44px;
}

#footer-desktop .detail .contact-left {
    display: flex;
}

#footer-desktop .detail .contact-left .logo {
    width: 172.92px;
    height: 24px;
    margin-right: 24.08px;
}

#footer-desktop .detail .contact-left .break {
    font-size: 30px;
    font-weight: 100;
    margin-top: -12px;
    color: #E8EAF0;
    margin-right: 18px;
}

#footer-desktop .detail .contact-left .contact-icon {
    width: 24px;
    margin-right: 24px;
}

#footer-desktop .detail .right-job {
    float: right;
    color: #9FAABF;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;

}

#footer-mobile {
    background: #ffffff;
    padding-top: 21.333vw;
    /* padding-bottom: 21.333vw; */
    padding-bottom: 60.333vw;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
}

#footer-mobile .row {
    width: 89.600vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12.800vw;
}

#footer-mobile .title-text {
    color: #212E4B;
    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;

    margin-bottom: 8.533vw;
}

#footer-mobile li {
    margin-bottom: 6.400vw;
}

#footer-mobile li a {
    color: #7A89A6;
    font-style: normal;
    font-weight: 400;
    font-size: 3.733vw;
    line-height: 6.400vw;

    text-decoration: none;
}

#footer-mobile .add_line_jobpasscard-img {
    width: 29.867vw;
    border: 0.267vw solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 4.267vw;
}


#footer-mobile .contact-left .logo {
    width: 46.112vw;
    height: 6.400vw;
    margin-right: 6.421vw;
}

#footer-mobile .contact-left .break {
    font-size: 8vw;
    font-weight: 100;
    margin-top: -3.200vw;
    color: #E8EAF0;
    margin-right: 4.800vw;
}

#footer-mobile .contact-left .contact-icon {
    width: 6.400vw;
    margin-right: 6.400vw;
}

#footer-mobile .contact-left {
    display: flex;
    padding: 0;
}

#footer-mobile .right-job {
    color: #9FAABF;
    font-style: normal;
    font-weight: normal;
    font-size: 3.200vw;
    line-height: 5.333vw;

    text-align: center;
}

#menu_mobile .main {
    background: #FFFFFF;
    width: 100%;
    height: 68px;
    position: sticky;
    top: 0px;
    z-index: 9999;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    padding: 18px 24px;
}

#menu_mobile .navbar-mobile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu_mobile .navbar-mobile .logo-img {
    width: 140px;
    /* margin-right: 4.664vw */
}

#menu_mobile .navbar-mobile .icon {
    width: 6.400vw;
    margin-right: 4.5vw;
}

#menu_mobile .bg_blur .profile-img-menu {
    width: 17.067vw;
    height: 17.067vw;
}

#menu_mobile .bg_blur .first-section .row {
    width: 76.800vw;
    margin-right: auto;
    margin-left: auto;
}

#menu_mobile .bg_blur .text-wel {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 5.333vw;
    line-height: 6.400vw;

    margin-bottom: 2.133vw;
}

#menu_mobile .bg_blur .login-regist-btn {
    display: flex;
}

#menu_mobile .bg_blur .login-regist-btn .login {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

    margin-right: 2.667vw;
    margin-top: 1.600vw;
    text-decoration: none;
}

#menu_mobile .bg_blur .login-regist-btn .line-break {
    color: #EEEEEE;
    font-size: 6.933vw;
    font-weight: 300;
    margin-right: 2.667vw;
}

#menu_mobile .bg_blur .login-regist-btn .regist {
    margin-top: 1.600vw;
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

    text-decoration: none;
}

#menu_mobile .bg_blur .line-break-section {
    border: 0.267vw solid #EEEEEE;
    margin-top: 6.400vw;
    margin-bottom: 6.400vw;
    width: 76.800vw;
    margin-left: auto;
    margin-right: auto;
}

#menu_mobile .bg_blur .second-section,
#menu_mobile .bg_blur .third-section {
    padding-left: 4.267vw;
}

#menu_mobile .bg_blur .second-section li,
#menu_mobile .bg_blur .third-section li,
#menu_mobile .first-section.is-authen li {
    margin-bottom: 4.267vw;
    list-style-type: none;
    display: flex;
}

#menu_mobile .bg_blur .second-section .icon,
#menu_mobile .bg_blur .third-section .icon,
#menu_mobile .first-section.is-authen .icon {
    width: 6.400vw;
    height: 6.400vw;
    margin-right: 4.267vw;
}

#menu_mobile .bg_blur .second-section .text-menu a,
#menu_mobile .bg_blur .third-section .text-menu a,
#menu_mobile .first-section.is-authen .text-menu a {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

    text-decoration: none;
}


.new_navbar #is_not_authenticated .private-menu #dropdownMenuPrivateButton {
    background: transparent;
    width: 132px;
    height: 32px;
    padding: 4px;
    border: 1px solid #71E8C4;
    box-sizing: border-box;
    border-radius: 8px;
}

.new_navbar #is_not_authenticated .private-menu #dropdownMenuPrivateButton::after {
    color: #BDBDBD;
}

#menu_mobile .before-first-section .btn-jobseeker-mode {
    color: #BDBDBD;
    border: none;
    background: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

    margin-right: 4.267vw;
    width: 35.467vw;
}

#menu_mobile .before-first-section .btn-company-mode {
    color: #BDBDBD;
    border: none;
    background: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

    width: 35.467vw;
}

#menu_mobile .before-first-section {
    width: 76.800vw;
    margin-left: auto;
    margin-right: auto;
}

#menu_mobile .before-first-section .btn-jobseeker-mode.active,
#menu_mobile .before-first-section .btn-company-mode.active {
    background: #E8EAF0;
    border-radius: 4.267vw;
    height: 10.667vw;
    color: #212E4B !important;
}

#menu_mobile .first-section.is-authen {
    padding-bottom: 5.333vw;
    padding-left: 4.267vw;
    padding-right: 4.267vw;
}

#menu_mobile .first-section.is-authen .profile-img-menu {
    margin-right: 6.400vw;
}

#menu_mobile .first-section.is-authen span {
    color: #212E4B;
    font-style: normal;
    font-weight: bold;
    font-size: 5.333vw;
    line-height: 6.400vw;
    text-align: right;

}

#menu_mobile .first-section.is-authen button {
    border: 0.400vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    width: 76.800vw;
    height: 16vw;
    background: transparent;
    margin-top: 4.267vw;
    margin-left: -1.5vw;
    margin-bottom: 5.867vw;
}

#menu_mobile .first-section.is-authen button a {
    text-decoration: none;
    color: #59C4AE;
    font-style: normal;
    font-weight: bold;
    font-size: 4.800vw;
    line-height: 7.467vw;

}

/* end of new template */

/* passcard list */

.test-items-images .test_list_desktop .row {
    position: absolute;
    bottom: 32px;
    left: 48px;
    width: 240px;
    height: 24px;
}

.test_list_desktop .level-power .level-tab {
    display: flex;
}

.test_list_desktop .level-power .level-tab div {
    width: 16px;
    height: 16px;
    background: #E7F3FE;
    border-radius: 50%;
    margin-right: 8px;
}

.test_list_desktop .level-text {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: #FFFFFF;

}

.test_list_desktop .hover-course-group {
    display: none;
    width: 376px;
    right: 258px;
}

.hover-course-group {
    position: absolute;
    border-radius: 16px;
    top: -60px;
    right: 12px;
    padding-top: 8px;
}

.hover-course-group .wishlist-heart {
    background: transparent;
    outline: none;
    border: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.hover-course-group .bg_course_skill {
    width: 376px;
    margin-right: 240px;
    margin-top: -66px;
}

.hover-course-group .heart {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 50%;
    width: 40px;
}

.hover-course-group .course-skill-btn {
    position: absolute;
    bottom: 24px;
    left: 0px;
    display: flex;
}

.hover-course-group .course-skill-btn .cart-course-skill {
    width: 248px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    margin-left: 24px;
    margin-right: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;

    border: none;
    outline: none;
}

.hover-course-group .detail {
    position: absolute;
    top: -42px;
    width: 304px;
    left: 24px;
}

.hover-course-group .detail .name {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;

    line-height: 32px;
    color: #212E4B;
    margin-bottom: 8px;
}

.hover-course-group .detail .skill-title {
    color: #212E4B;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    margin-top: 16px;
    margin-bottom: 8px;
}

.hover-course-group .detail .item img {
    width: 24.9px;
}

.hover-course-group .detail .item .item-li,
.hover-course-group .detail .item .item-li span,
.hover-course-group .detail .item .item-li span li,
.hover-course-group .detail .item .item-li span div {
    color: #7A89A6;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-break: break-word;
    height: 48px;
}

.hover-course-group .detail .item .row {
    position: inherit !important;
    height: inherit !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.test_list_mobile .item {
    position: relative;
    margin-bottom: 4.267vw;
}

.test_list_mobile .item .level-item {
    position: absolute;
    bottom: 5.232vw;
    width: 42.643vw;
    height: 2.669vw;
    margin-left: 0.2vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

.test_list_mobile .item .level-item .level-tab {
    display: flex;
}

.test_list_mobile .item .level-item .level-tab div {
    background: #FFFDEA;
    width: 2.667vw;
    height: 2.667vw;
    border-radius: 50%;
    margin-right: 1.333vw;
}

.test_list_mobile .item .level-item .level-text {
    font-style: normal;
    font-weight: 600;
    font-size: 2.667vw;
    line-height: 4.533vw;
    color: #FFFFFF;

    text-align: right;
}

.test-items-images #filter-desktop .checkbox-values {
    display: block;
}

.test-items-images .filter-desktop-section {
    width: 256px;
    min-height: 312px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 27px 24px;
    margin-bottom: 24px;
}

.test-items-images .filter-desktop-section .title {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 16px;
}

.test-items-images .filter-desktop-section .title img {
    width: 24px;
    margin-right: 8px;
}

.test-items-images .filter-desktop-section .sub-title {
    color: #212E4B;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    margin-bottom: 16px;
}

.test-items-images .flowers-wrap li,
#notification .flowers-wrap .item {
    color: #212E4B;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;

    display: flex;
    margin-bottom: 24px;
}

.test-items-images .flowers-wrap input[type="checkbox"],
#notification .flowers-wrap input[type="checkbox"] {
    width: 24px;
    height: 24px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin-right: 16px;
}

.test-items-images .flowers-wrap input[type="checkbox"]:checked,
#notification .flowers-wrap input[type="checkbox"]:checked {
    visibility: visible;
    outline: none;
    background-image: url(/static/images/new_Jobpasscard/checked.png);
    background-size: 100% auto;
    border-radius: 4px;
}

@media only screen and (min-device-width: 501px) {
    .bg_blur_filter_mobile {
        display: none;
    }

    .test-items-images .sort-desktop-section {
        box-sizing: border-box;
        border-radius: 16px;
        width: 256px;
        margin-bottom: 56px;
        position: relative;
    }

    .test-items-images .sort-desktop-section .sorting-title {
        color: #212E4B;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 32px;

        margin-bottom: 16px;
    }

    .test-items-images .sort-desktop-section select {
        border: 1px solid #E0E0E0;
        box-sizing: border-box;
        border-radius: 4px;
        background-color: #FFFFFF;
        width: 208px;
        height: 48px;
        padding-left: 16px;
        padding-right: 16px;
        outline: none;
        -webkit-appearance: none;
        background-image: url(/static/images/new_Jobpasscard/chevron-down.png);
        background-repeat: no-repeat;
        background-size: 12px 6px;
        background-position: 174px 21px;
        color: #000000;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;

    }
}

@media screen and (max-width: 500px) {
    .course-filter {
        display: none;
    }

    button#sort_course_dropdown {
        width: 42.64vw !important;
        height: 12.8vw !important;
        padding: 2.65vw 4.267vw !important;
        font-size: 3.734vw !important;
    }

    button#sort_course_dropdown {
        background-image: url(/static/images/new_Jobpasscard/chevron-down-modal.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: 130px 21px !important;
    }

    .sort-desktop-section .dropdown-menu {
        width: 42.64vw !important;
        background-color: #FFFFFF;
        border: 1px solid #EEEEEE;
        box-sizing: border-box;
        box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
        border-radius: 16px;
        inset: 3px auto auto 0px !important;
    }

    .sort-desktop-section .dropdown-menu .dropdown-item {
        padding: 3.2vw 2.13vw !important;
        background-color: transparent !important;
    }

    .sort-desktop-section .dropdown-menu .dropdown-item.active {
        background-image: url(/static/images/new_Jobpasscard/dropdown-check.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: 130px 15px !important;
        color: #212529;
    }

    .sort-desktop-section .dropdown-menu li:hover,
    .sort-desktop-section .dropdown-menu li:focus {
        background-color: #F5F5F5 !important;
    }

    .test_list_mobile .sort-desktop-section {
        height: 12.800vw;
        width: 42.643vw;
    }

    .filter-mobile-content .title {

        font-style: normal;
        font-weight: 500;
        font-size: 6.400vw;
        line-height: 8.533vw;
        color: #212E4B;
        margin-bottom: 4.267vw;
    }

    .filter-mobile-content .title img {
        width: 6.400vw;
        margin-right: 2.133vw;
    }

    .filter-mobile-content .sub-title {
        color: #212E4B;
        font-style: normal;
        font-weight: normal;
        font-size: 5.333vw;
        line-height: 8.533vw;

        margin-bottom: 4.267vw;
    }

    .test-items-images .sort-desktop-section select {
        border: 0.267vw solid #E0E0E0;
        box-sizing: border-box;
        border-radius: 1.067vw;
        background: #FFFFFF;
        width: 42.643vw;
        height: 12.800vw;
        padding-left: 4.267vw;
        padding-right: 4.267vw;
        outline: none;
        -webkit-appearance: none;
        background-image: url(/static/images/new_Jobpasscard/chevron-down.png);
        background-repeat: no-repeat;
        background-size: 3.200vw 1.600vw;
        background-position: 34.133vw 5.600vw;
        color: #000000;
        font-style: normal;
        font-weight: normal;
        font-size: 3.733vw;
        line-height: 6.400vw;

    }

    .close-filter-mobile {
        position: fixed;
        top: 4vw;
        left: -150vh;
        z-index: 1999;
        overflow-y: scroll;
        transition: all 0.5s linear;
    }

    .close-filter-mobile img {
        width: 6.400vw;
    }

    /* .content-course .close-filter-mobile.filter-close-move{
    left: 88vw !important;
  } */

    .filter-mobile-content {
        width: 85.333vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: -100vh;
        background: white;
        padding: 7.200vw 4.267vw;
        z-index: 1999;
        overflow-y: scroll;
        transition: all 0.5s linear;
    }

    .bg_blur_filter_mobile.bg_color_blur>.filter-content-move {
        left: 0px !important;
    }

    .bg_blur_filter_mobile.bg_color_blur>.filter-close-move {
        left: 88vw !important;
    }

    .filter-mobile-content .flowers-wrap-mobile li {
        color: #212E4B;
        font-style: normal;
        font-weight: normal;
        font-size: 3.733vw;
        line-height: 6.400vw;

        color: #212E4B;
        font-style: normal;
        font-weight: 400;
        font-size: 4.267vw;
        line-height: 6.400vw;

        display: flex;
        margin-bottom: 6.400vw;
    }

    .filter-mobile-content .flowers-wrap-mobile input[type="checkbox"] {
        width: 6.400vw;
        height: 6.400vw;
        border: 0.267vw solid #EEEEEE;
        box-sizing: border-box;
        border-radius: 1.067vw;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        margin-right: 4.267vw;
    }

    .filter-mobile-content .flowers-wrap-mobile input[type="checkbox"]:checked {
        visibility: visible;
        outline: none;
        background-image: url(/static/images/new_Jobpasscard/checked.png);
        background-size: 100% auto;
        border-radius: 1.067vw;
    }

    #filter-mobile-btn {
        width: 42.667vw;
        height: 12.800vw;
        border: 0.400vw solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        background: transparent;
        outline: none;
        color: #59C4AE;
        font-style: normal;
        font-weight: 500;
        font-size: 4.800vw;
        line-height: 8.533vw;

    }

    #filter-mobile-btn img {
        width: 6.400vw;
        height: 6.400vw;
        margin-right: 2.133vw;
    }

    .filter-mobile-content .submit-filter {
        font-style: normal;
        font-weight: 500;
        font-size: 4.267vw;

        line-height: 7.467vw;
        color: #212E4B;
        margin-top: 4.267vw;
        margin-bottom: 4.267vw;
        background: #00DBB6;
        box-shadow: 0px 1.600vw 5.333vw #ADF0DC;
        border-radius: 4.267vw;
        width: 76.800vw;
        height: 12.800vw;
        border: none;
        outline: none;
    }

    .filter-mobile-content .cancel-filter {
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        width: 76.800vw;
        height: 12.800vw;
        background: transparent;
        font-style: normal;
        font-weight: bold;
        font-size: 4.267vw;
        line-height: 7.467vw;
        color: #59C4AE;
        margin-bottom: 4.267vw;

    }

    .filter-mobile-content .filter-btn {
        position: absolute;
        bottom: 0px;
    }
}

/* my passcard */
@media only screen and (min-device-width: 501px) {
    #content-no-passcard {
        margin-top: 30px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #content-no-passcard .title {
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;
        color: #212E4B;
        margin-bottom: 24px;
    }

    #content-no-passcard .detail {
        margin-bottom: 48px;
    }

    #content-no-passcard .detail p {

        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        margin-bottom: 0px;
        color: #7A89A6;
    }

    #content-no-passcard img {
        width: 160px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 48px;
    }

    #content-no-passcard .passcard-btn {
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        width: 270px;
        height: 48px;
        background: transparent;
        outline: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 32px;
    }

    #content-no-passcard .passcard-btn a {
        color: #59C4AE;

        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 28px;
        text-decoration: none;
    }
}

@media screen and (max-width: 500px) {
    #content-no-passcard {
        margin-top: 13.867vw;
    }

    #content-no-passcard .title {
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 6.400vw;
        line-height: 8.533vw;
        color: #212E4B;
        margin-bottom: 6.400vw;
        padding-top: 13.867vw;
    }

    #content-no-passcard .detail {
        width: 84vw;
        margin-bottom: 6.400vw;
        margin-left: auto;
        margin-right: auto;
    }

    #content-no-passcard .detail p {

        font-style: normal;
        font-weight: normal;
        font-size: 5.333vw;
        line-height: 8.533vw;
        text-align: center;
        margin-bottom: 0px;
        color: #7A89A6;
    }

    #content-no-passcard img {
        width: 42.667vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 8.533vw;
    }

    #content-no-passcard .passcard-btn {
        border: 0.400vw solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        width: 89.600vw;
        height: 12.800vw;
        background: transparent;
        outline: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 21.333vw;
    }

    #content-no-passcard .passcard-btn a {
        color: #59C4AE;

        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        text-decoration: none;
    }
}


#my_passcard_desktop #content-passcard {
    padding-left: 30px;
    padding-right: 30px;
    width: 1120px;
    margin: auto;
}

#my_passcard_desktop #content-passcard .title1 {
    margin-top: 64px;
    color: #1F2D4E;

    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 24px;
}

#my_passcard_desktop #content-passcard .title2 {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 46px;
    color: #7A89A6;
}

#my_passcard_desktop #content-passcard .title3 {
    margin-bottom: 24px;
    color: #212E4B;

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

#my_passcard_desktop #content-passcard .passcard_item {
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 16px;
    width: 1120px;
    height: 288px;
    padding: 32px 48px;
    margin-bottom: 24px;
    position: relative;
}

#my_passcard_desktop #content-passcard .progresses {
    display: flex;
}

#my_passcard_desktop #content-passcard .line_not_passed {
    width: 96px;
    height: 4px;
    background: #BDBDBD;
    margin-top: 13px;
}

#my_passcard_desktop #content-passcard .line_passed {
    width: 96px;
    height: 4px;
    background: #00DBB6;
    margin-top: 13px;
}


#my_passcard_desktop #content-passcard .passed {
    width: 32px;
    height: 30px;
    background: #00DBB6;
    padding: 9px;
    border-radius: 50%;
    color: #FFFFFF;
}

#my_passcard_desktop #content-passcard .icon.not_passed {
    width: 32px;
    height: 32px;
}

#my_passcard_desktop .progresses .pass-now {
    background: #FFFFFF;
    border: 4px solid #00DBB6;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
}

#my_passcard_desktop .progresses .pass-now img {
    width: 16px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    display: flex;
}

#my_passcard_desktop .progresses .show-lv-passed {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;

    color: #5E7094;
    margin-top: 8px;
    margin-left: 2px;
}

#my_passcard_desktop .progresses .show-now {
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    margin-top: 16px;
    margin-left: -38px;
    cursor: pointer;
    width: 163px;
    height: 40px;
    text-decoration: none;
    outline: none;
    border: none;
}

#my_passcard_desktop .progresses .show-now a {
    color: #212E4B;
    text-decoration: none;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;

}

#my_passcard_desktop .passed_all .passcard_name {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    color: #43997F;

    margin-bottom: 4px;
}

#my_passcard_desktop .passed_all .expire {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;

    color: #757575;
    margin-bottom: 11px;
}

#my_passcard_desktop .passed_all .level-item {
    background: #00DBB6;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 4px;
}

#my_passcard_desktop .passed_all .max-level {
    color: #9E9E9E;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;

    margin-left: 4px;
}

#my_passcard_desktop .passed_all .view-cert {
    width: 160px;
    height: 40px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
}

#my_passcard_desktop .passed_all .view-cert a {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;

}

#my_passcard_desktop .passed_all .line-passcard-all {
    border: 1px solid #EEEEEE;
    width: 1120px;
    margin-top: 24px;
    margin-bottom: 24px;
}

@media only screen and (min-device-width: 540px) {
    #my_passcard_mobile {
        display: block;
    }
}

@media screen and (max-width: 500px) {
    #my_passcard_desktop {
        display: block;
    }
}

#my_passcard_mobile {
    padding-top: 27.733vw;
}


#my_passcard_mobile .title1 {

    font-style: normal;
    font-weight: 500;
    font-size: 7.467vw;
    line-height: 9.600vw;
    color: #212E4B;
    margin-left: 5.333vw;
    margin-bottom: 4.267vw;
}

#my_passcard_mobile .title2 {

    font-style: normal;
    font-weight: normal;
    font-size: 5.333vw;
    line-height: 8.533vw;
    color: #7A89A6;
    width: 89.600vw;
    margin-left: 5.333vw;
    margin-bottom: 8.533vw;
}

#my_passcard_mobile .title3 {
    color: #212E4B;
    margin-left: 5.333vw;

    font-style: normal;
    font-weight: 500;
    font-size: 4.800vw;
    line-height: 6.400vw;
    width: 65.600vw;
}

#my_passcard_mobile .passcard_item {
    border: 0.267vw solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4.267vw;
    width: 89.600vw;
    padding: 6.400vw 4.267vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6.400vw;
}

#my_passcard_mobile .circle {
    background: #00DBB6;
    width: 8.533vw;
    height: 8.533vw;
    border-radius: 50%;
    margin-right: 2.400vw;
    margin-left: 6.9vw;
}

#my_passcard_mobile .circle img {
    width: 4.267vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 2.667vw;
}

#my_passcard_mobile .show-lv-passed {
    color: #5E7094;
    font-style: normal;
    font-weight: normal;
    font-size: 3.733vw;
    line-height: 6.400vw;

    margin-top: 1.333vw;
}

#my_passcard_mobile .line_passed {
    height: 21.333vw;
    background: #00DBB6;
    width: 1.067vw;
    margin-left: 10.2vw;
}

#my_passcard_mobile .show-now {
    background: #00DBB6;
    box-shadow: 0px 1.600vw 5.333vw #adf0dc;
    border-radius: 4.267vw;
    width: 43.467vw;
    height: 10.667vw;
    border: none;
    outline: none;
    margin-top: 5.333vw;
}

#my_passcard_mobile .show-now a {
    text-decoration: none;
    color: #212E4B;
    font-style: normal;
    font-weight: bold;
    font-size: 4.267vw;
    line-height: 7.467vw;

}

#my_passcard_mobile .pass-now {
    width: 21.333vw;
    height: 21.333vw;
    background: #FFFFFF;
    border: 1.067vw solid #00DBB6;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 4.267vw;
}

#my_passcard_mobile .pass-now img {
    width: 4.800vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 6.933vw;
}

#my_passcard_mobile .line_not_passed {
    background: #BDBDBD;
    height: 21.333vw;
    width: 1.067vw;
    margin-left: 10.2vw;
}

#my_passcard_mobile .not_passed {
    width: 8.533vw;
    margin-right: 2.4vw;
    margin-left: 6.9vw;
}

#my_passcard_mobile .passcard_name {
    color: #43997F;
    font-style: normal;
    font-weight: normal;
    font-size: 6.400vw;
    line-height: 8.533vw;

    margin-bottom: 1.067vw;
}

#my_passcard_mobile .expire {
    font-style: normal;
    font-weight: normal;
    font-size: 3.733vw;
    line-height: 6.400vw;
    color: #757575;
    margin-bottom: 2.933vw;
}

#my_passcard_mobile .level-item {
    width: 4.267vw;
    height: 4.267vw;
    background: #00DBB6;
    border-radius: 50%;
    margin-top: 1.600vw;
    margin-right: 2.133vw;
}

#my_passcard_mobile .passed_all {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#my_passcard_mobile .max-level {
    color: #9E9E9E;
    font-style: normal;
    font-weight: 500;
    font-size: 4.267vw;
    line-height: 7.467vw;

}

#my_passcard_mobile .view-cert {
    border: 0.400vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    width: 46vw;
    height: 10.667vw;
    background: transparent;
}

#my_passcard_mobile .view-cert a {
    color: #59C4AE;
    font-style: normal;
    font-weight: bold;
    font-size: 4.267vw;
    line-height: 7.467vw;
}

#my_passcard_mobile .line-passcard-all {
    width: 89.333vw;
    height: 0.533vw;
    background: #EEEEEE;
    margin-top: 6.400vw;
    margin-bottom: 6.400vw;
}

/* end of my passcard */

/* certificate */

.new-jobpasscard-certificate .tab-content {
    background-image: inherit !important;
}

@media only screen and (min-device-width: 540px) {
    .content-course .description {
        color: #7A89A6;
        font-style: normal;
        font-weight: 300;
        font-size: 20px;
        line-height: 32px;

        margin-bottom: 80px;
    }

    .header-cert-modal.mobile {
        display: none;
    }

    #my_passcard_desktop .CertificateModal .modal-dialog {
        max-width: 964px;
        margin: 2.75rem auto;
    }

    #my_passcard_desktop .CertificateModal .modal-dialog .modal-content {
        width: 964px;
        border-radius: 16px;
    }

    #my_passcard_desktop .CertificateModal .modal-body {
        padding: 32px 32px;
    }

    #my_passcard_desktop .CertificateModal .title-cert {
        color: #2B3E64;

        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        line-height: 48px;
    }

    #my_passcard_desktop .CertificateModal .header-cert-modal .share-btn {
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        width: 141px;
        height: 40px;
        background: transparent;
        color: #59C4AE;

        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 32px;
        margin-right: 16px;
        float: right;
        outline: none;
    }

    #my_passcard_desktop .CertificateModal .header-cert-modal .PDF-btn a {
        color: #59C4AE;

        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 32px;
        text-decoration: none;
    }

    #my_passcard_desktop .CertificateModal .header-cert-modal .PDF-btn {
        width: 172px;
        height: 40px;
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        background: transparent;
        color: #59C4AE;

        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 32px;
        margin-right: 16px;
        float: right;
        outline: none;
    }

    #my_passcard_desktop .CertificateModal .header-cert-modal {
        margin-bottom: 20px;
    }

    #my_passcard_desktop .CertificateModal .header-cert-modal button img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        margin-top: -4px;
    }

    .new-jobpasscard-certificate .nav-item button.active {

        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;
        color: #59C4AE;
        background-color: transparent;
        border-bottom: 4px solid #00DBB6;
        border-radius: 0px;
    }

    .new-jobpasscard-certificate .nav {
        border-bottom: 1px solid #EEEEEE;
        margin-bottom: 24px;
    }

    .new-jobpasscard-certificate .nav-item button {
        color: #212E4B;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;

    }

    .new-jobpasscard-certificate .nav-item button:disabled {
        color: #9FAABF;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;

    }

    .new-jobpasscard-certificate .level-title {
        color: #59C4AE;

        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 32px;
        margin-top: 6px;
        margin-right: 20px;
    }

    .new-jobpasscard-certificate .modal-content-level {
        width: 900px;
        min-height: 600px;
        filter: drop-shadow(0px 4px 160px rgba(0, 0, 0, 0.05));
        background-image: url(/static/images/new_Jobpasscard/bg-cert.png);
        background-repeat: no-repeat;
        background-size: 406px auto;
        background-position: 494px 184px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content {
        border: 1px solid #00DBB6;
        box-sizing: border-box;
        border-radius: 32px;
        width: 884px;
        min-height: 584px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 8px;
        padding: 40px 72px;
        position: relative;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .jobpasscard-logo-Cert {
        width: 306px;
        height: 56px;
        margin-bottom: 8px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text1 {

        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 32px;
        color: #2B3E64;
        margin-bottom: 32px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text2 {

        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        color: #7A89A6;
        margin-bottom: 3px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text3 {
        color: #00DBB6;

        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        line-height: 48px;
        margin-bottom: 32px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text4 {

        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        color: #7A89A6;
        margin-bottom: 4px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text5 {

        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        color: #2B3E64;
        margin-bottom: 24px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text5 span {
        color: #2B3E64;

        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 32px;
        margin-left: 16px;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .dark-level {
        display: flex;
    }

    .new-jobpasscard-certificate .jobpasscard-passed-level {
        width: 48px;
        margin-right: 10px;
    }


    .new-jobpasscard-certificate .QRcode img {
        width: 84px;
        border: 1px solid #EEEEEE;
        box-sizing: border-box;
        border-radius: 8px;
        margin-right: 24px;
    }

    .new-jobpasscard-certificate .QRcode div {
        color: #53B89F;

        font-style: normal;
        font-weight: normal;
        font-size: 8px;
        line-height: 24px;
        text-align: center;
        margin-right: 24px;
    }

    .new-jobpasscard-certificate .line-break_description {
        width: 1px;
        height: 84px;
        background: #E8EAF0;
        margin-right: 24px;
    }

    .new-jobpasscard-certificate .course_description {
        width: 620px;

        font-style: normal;
        font-weight: 300;
        font-size: 10px;
        line-height: 14px;
        color: #424242;
    }

    .new-jobpasscard-certificate .course_description span {

        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 14px;
        color: #424242;
    }

    .new-jobpasscard-certificate .personal-part {
        position: absolute;
        top: 74px;
        right: 72px;
        width: 240px;
    }

    .new-jobpasscard-certificate .personal-part .personal-img {
        width: 240px;
    }

    .new-jobpasscard-certificate .personal-part .personal-part-text1 {
        color: #7A89A6;
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        margin-top: 16px;
        margin-bottom: 4px;
    }

    .new-jobpasscard-certificate .personal-part .personal-part-text2 {
        color: #7A89A6;
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
    }

    .new-jobpasscard-certificate .personal-part .personal-img-avartar {
        width: 190px;
        height: 190px;
        border-radius: 50%;
        position: absolute;
        top: 26px;
        left: 25px;
    }

    .new-jobpasscard-certificate .QR-row {
        display: flex;
        margin-top: 51px;
    }
}

@media screen and (max-width: 500px) {
    .CertificateModal .modal-dialog .modal-content {
        margin-top: 16.533vw;
        border-radius: 4.267vw;
    }

    .header-cert-modal.desktop {
        display: none;
    }

    .CertificateModal .title-cert {
        color: #2B3E64;
        font-style: normal;
        font-weight: 600;
        font-size: 7.467vw;
        line-height: 8.533vw;

        margin-bottom: 5.333vw;
        margin-top: 2.133vw;
    }

    .CertificateModal .header-cert-modal .share-btn,
    .CertificateModal .header-cert-modal .PDF-btn {
        min-width: 37.867vw;
        height: 10.667vw;
        border: 0.400vw solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        color: #59C4AE;
        background: transparent;
        font-style: normal;
        font-weight: 600;
        font-size: 4.800vw;
        line-height: 8.533vw;

    }

    .CertificateModal .header-cert-modal .PDF-btn a {
        color: #59C4AE;
        text-decoration: none;
        font-style: normal;
        font-weight: 600;
        font-size: 4.800vw;
        line-height: 8.533vw;

    }

    .CertificateModal .header-cert-modal button img {
        width: 6.400vw;
        margin-top: -1.600vw;
        margin-right: 2.133vw;
    }

    .new-jobpasscard-certificate .level-title {

        font-style: normal;
        font-weight: normal;
        font-size: 5.867vw;
        line-height: 7.467vw;
        color: #59C4AE;
        margin-right: 3.200vw;
    }

    .new-jobpasscard-certificate .nav-item {
        margin-right: 2.133vw !important;
    }

    .new-jobpasscard-certificate .nav-item button {
        color: #212E4B;
        font-style: normal;
        font-weight: 300;
        font-size: 5.867vw;

    }

    .new-jobpasscard-certificate .nav-item button.active {
        background: transparent;
        color: #59C4AE;
        padding-bottom: 5.333vw;
        border-bottom: 1.067vw solid #00DBB6;
        border-radius: 0px;
    }

    .new-jobpasscard-certificate .nav {
        border-bottom: 0.267vw solid #EEEEEE;
        margin-bottom: 6.133vw;
    }

    .new-jobpasscard-certificate .nav-item button:disabled {
        color: #9FAABF;
    }

    .new-jobpasscard-certificate .modal-content-level {
        width: 78.933vw;
        min-height: 50vw;
        filter: drop-shadow(0px 0.333vw 13.333vw rgba(0, 0, 0, 0.05));
        background-image: url(/static/images/new_Jobpasscard/bg-cert.png);
        background-repeat: no-repeat;
        background-size: 39vw auto;
        background-position: 41vw 15vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content {
        border: 0.083vw solid #00DBB6;
        box-sizing: border-box;
        border-radius: 2.667vw;
        width: 78vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.667vw;
        padding: 4.267vw 4.933vw !important;
        position: relative;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .jobpasscard-logo-Cert {
        width: 25.500vw;
        height: 4.667vw;
        margin-bottom: 0.667vw;
    }

    .new-jobpasscard-certificate .item-tab-content {
        width: 78vw;
        margin-left: auto;
        margin-right: auto;
    }

    .new-jobpasscard-certificate .tab-content {
        width: 88vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text1 {

        font-style: normal;
        font-weight: normal;
        font-size: 1.667vw;
        line-height: 2.667vw;
        color: #2B3E64;
        margin-bottom: 2.667vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text2 {

        font-style: normal;
        font-weight: normal;
        font-size: 1.167vw;
        line-height: 2vw;
        color: #7A89A6;
        margin-bottom: 0.250vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text3 {
        color: #00DBB6;

        font-style: normal;
        font-weight: 500;
        font-size: 3vw;
        line-height: 4vw;
        margin-bottom: 2.667vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text4 {

        font-style: normal;
        font-weight: normal;
        font-size: 1.167vw;
        line-height: 2vw;
        color: #7A89A6;
        margin-bottom: 0.333vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text5 {

        font-style: normal;
        font-weight: 500;
        font-size: 2vw;
        line-height: 2.667vw;
        color: #2B3E64;
        margin-bottom: 2vw;
    }

    .new-jobpasscard-certificate .modal-content-level .level-content .text5 span {
        color: #2B3E64;

        font-style: normal;
        font-weight: normal;
        font-size: 1.667vw;
        line-height: 2.667vw;
        margin-left: 1.333vw;
    }


    .new-jobpasscard-certificate .jobpasscard-passed-level {
        width: 4vw;
        margin-right: 0.833vw;
    }


    .new-jobpasscard-certificate .QRcode img {
        width: 6vw;
        border: 0.083vw solid #EEEEEE;
        box-sizing: border-box;
        border-radius: 0.667vw;
        margin-right: 2vw;
    }

    .new-jobpasscard-certificate .QRcode div {
        color: #53B89F;

        font-style: normal;
        font-weight: normal;
        font-size: 0.667vw;
        line-height: 2vw;
        text-align: center;
        margin-right: 2vw;
    }

    .new-jobpasscard-certificate .line-break_description {
        width: 0.083vw;
        height: 5.333vw;
        background: #E8EAF0;
        margin-right: 2vw;
    }

    .new-jobpasscard-certificate .course_description {
        width: 51.667vw;

        font-style: normal;
        font-weight: 300;
        font-size: 0.833vw;
        line-height: 1.167vw;
        color: #424242;
    }

    .new-jobpasscard-certificate .course_description span {

        font-style: normal;
        font-weight: 500;
        font-size: 0.833vw;
        line-height: 1.167vw;
        color: #424242;
    }

    .new-jobpasscard-certificate .QR-row {
        display: flex;
        margin-top: 4.250vw;
    }


    .new-jobpasscard-certificate .personal-part {
        position: absolute;
        top: 6.167vw;
        right: 6vw;
        width: 20vw;
    }

    .new-jobpasscard-certificate .personal-part .personal-img {
        width: 20vw;
    }

    .new-jobpasscard-certificate .personal-part .personal-part-text1 {
        color: #7A89A6;
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 1vw;
        line-height: 1.667vw;
        margin-top: 1.333vw;
        margin-bottom: 0.333vw;
    }

    .new-jobpasscard-certificate .personal-part .personal-part-text2 {
        color: #7A89A6;
        text-align: center;

        font-style: normal;
        font-weight: normal;
        font-size: 1vw;
        line-height: 1.667vw;
    }

    .new-jobpasscard-certificate .personal-part .personal-img-avartar {
        width: 15.833vw;
        height: 15.833vw;
        border-radius: 50%;
        position: absolute;
        top: 2.167vw;
        left: 2.083vw;
    }

    #my_passcard .btn-view-cert {
        border: 0.400vw solid #59C4AE;
        box-sizing: border-box;
        border-radius: 4.267vw;
        min-width: 42.667vw;
        height: 10.667vw;
        font-style: normal;
        font-weight: bold;
        font-size: 4.267vw;
        line-height: 7.467vw;

        color: #59C4AE;
        background: transparent;
    }

    #my_passcard .btn-view-cert:disabled {
        border: 0.400vw solid #BDBDBD;
        box-sizing: border-box;
        border-radius: 4.267vw;
        min-width: 42.667vw;
        height: 10.667vw;
        font-style: normal;
        font-weight: bold;
        font-size: 4.267vw;
        line-height: 7.467vw;

        color: #BDBDBD;
        background: transparent;
    }
}


#my_passcard #my_passcard_desktop .course-group-img {
    overflow: hidden;
    border-radius: 20px;
    width: 160px;
    height: auto;
    max-height: 160px;
    position: relative;
}

#my_passcard #my_passcard_desktop .course-group-img img {
    width: 160px;
}

#my_passcard_desktop #content-passcard .passcard_item .row {
    max-height: 224px;
    display: flex;
    height: 224px;
}

#my_passcard #my_passcard_desktop .col-4.col-mobile-course-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#my_passcard #my_passcard_mobile .course-group-img {
    overflow: hidden;
    border-radius: 5.333vw;
    width: 42.667vw;
    height: 42.667vw;
    margin-bottom: 6.400vw;
}

#my_passcard #my_passcard_mobile .course-group-img img {
    width: 42.667vw;
}



#my_passcard_desktop .btn-view-cert {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    width: 174px;
    height: 40px;
    color: #59C4AE;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    outline: none;
    margin-top: 24px;
}

#my_passcard_desktop .btn-view-cert:disabled {
    border: 1.5px solid #BDBDBD;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    width: 174px;
    height: 40px;
    color: #BDBDBD;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    outline: none;
    margin-top: 24px;
}

#my_passcard_desktop .wishlist-desktop .wishlist-img {
    width: 256px;
}

#my_passcard_desktop .wishlist-desktop .wishlist-card {
    width: 256px;
    height: 341px;
    position: relative;
    margin-bottom: 20px;
}

#my_passcard_desktop .wishlist-desktop .wishlist-card button {
    position: absolute;
    outline: none;
    border: none;
    background: transparent;
    left: 192px;
    top: 261px;
}

#my_passcard_desktop .wishlist-desktop .wishlist-card button img {
    width: 40px;
}

#my_passcard_mobile .wishlist-card {
    width: 42.667vw;
    height: 56.800vw;
    position: relative;
    margin-bottom: 5.333vw;
}

#my_passcard_mobile .wishlist-card .wishlist-img {
    width: 42.667vw;
    height: 56.800vw;
}

#my_passcard_mobile .wishlist-card button {
    border: none;
    background: transparent;
    position: absolute;
    top: 39.733vw;
    right: 4.267vw;
}

#my_passcard_mobile .wishlist-card button img {
    width: 10.667vw;
}

.is_public-title-cert {
    width: 832px;
    margin-left: auto;
    margin-right: auto;

    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #2B3E64;
    margin-top: 65px;
    margin-bottom: 16px;
    padding: 0;
}

.is_public-level-title {

    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    color: #5E7094;
    width: 832px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.is_public-cert {
    width: 832px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.is_public-cert .is_public-level-content {
    border: 1px solid #00DBB6;
    box-sizing: border-box;
    border-radius: 32px;
    width: 776px;
    padding: 35.09px 63.16px;
    position: relative;
}

.is_public-cert .is_public-level-content .jobpasscard-logo-Cert {
    width: 268.42px;
    height: 49.123px;
    margin-bottom: 7.02px;
}

.is_public-cert .is_public-level-content .text1 {

    font-style: normal;
    font-weight: normal;
    font-size: 17.54px;
    line-height: 28.07px;
    color: #2B3E64;
    margin-bottom: 28.07px;
}

.is_public-cert .is_public-level-content .text2 {

    font-style: normal;
    font-weight: normal;
    font-size: 12.28px;
    line-height: 21.05px;
    color: #7A89A6;
    margin-bottom: 2.632px;
}

.is_public-cert .is_public-level-content .text3 {
    color: #00DBB6;

    font-style: normal;
    font-weight: 500;
    font-size: 31.58px;
    line-height: 42.11px;
    margin-bottom: 28.07px;
}

.is_public-cert .is_public-level-content .text4 {

    font-style: normal;
    font-weight: normal;
    font-size: 12.281px;
    line-height: 21.53px;
    color: #7A89A6;
    margin-bottom: 3.51px;
}

.is_public-cert .is_public-level-content .text5 {

    font-style: normal;
    font-weight: 500;
    font-size: 21.53px;
    line-height: 28.07px;
    color: #2B3E64;
    margin-bottom: 21.53px;
}

.is_public-cert .is_public-level-content .text5 span {
    color: #2B3E64;

    font-style: normal;
    font-weight: normal;
    font-size: 17.544px;
    line-height: 28.07px;
    margin-left: 14.351px;
}

.is_public-cert .is_public-level-content .jobpasscard-passed-level {
    width: 42.105px;
    margin-right: 8.77px;
}

.is_public-cert .is_public-level-content .QR-row {
    display: flex;
    margin-top: 44.74px;
}

.is_public-cert .is_public-level-content .QR-row img {
    width: 73.684px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 8px;
    margin-right: 21.053px;
}

.is_public-cert .is_public-level-content .QRcode div {
    color: #53B89F;

    font-style: normal;
    font-weight: normal;
    font-size: 7.18px;
    line-height: 21.053px;
    text-align: center;
    margin-right: 21.053px;
}

.is_public-cert .is_public-level-content .line-break_description {
    width: 1px;
    height: 73.864px;
    background: #E8EAF0;
    margin-right: 21.053px;
}

.is_public-cert .is_public-level-content .course_description,
.is_public-cert .is_public-level-content .course_description p {
    width: 526px;

    font-style: normal;
    font-weight: 300;
    font-size: 8.772px;
    line-height: 12.281px;
    color: #424242;
}

.is_public-cert .is_public-level-content .course_description span {

    font-style: normal;
    font-weight: 500;
    font-size: 8.772px;
    line-height: 12.281px;
    color: #424242;
}

.is_public-cert .is_public-level-content .personal-part {
    position: absolute;
    top: 64.912px;
    right: 63.16px;
    width: 210.53px;
}

.is_public-cert .is_public-level-content .personal-part .personal-img {
    width: 210.53px;
}

.is_public-cert .is_public-level-content .personal-part .personal-img-avartar {
    width: 166.67px;
    height: 166.67px;
    border-radius: 50%;
    position: absolute;
    top: 22.81px;
    left: 21.93px;
}

.is_public-cert .is_public-level-content .personal-part .personal-part-text1 {
    color: #7A89A6;
    text-align: center;

    font-style: normal;
    font-weight: normal;
    font-size: 10.53px;
    line-height: 17.544px;
    margin-top: 14.04px;
    margin-bottom: 3.51px;
}

.is_public-cert .is_public-level-content .personal-part .personal-part-text2 {
    color: #7A89A6;
    text-align: center;

    font-style: normal;
    font-weight: normal;
    font-size: 10.53px;
    line-height: 17.544px;
}

.is_public-cert .is_public-cert-bg {
    filter: drop-shadow(0px 4px 160px rgba(0, 0, 0, 0.05));
    width: 792px;
    padding: 8px;
    background: #FFFFFF;
}

.is_public-cert .line-break-is-public {
    background: #EEEEEE;
    width: 832px;
    height: 1px;
    margin-top: 48px;
    margin-bottom: 16px;
}

.is_public-cert .is_public-skill {
    width: 832px;
    height: 549px;
    padding: 32px 0px;
}

.is_public-cert .is_public-skill .title {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #2B3E64;
    margin-bottom: 21px;
}

.is_public-cert .is_public-skill .course_skill_item {
    margin-bottom: 24px;
}

.is_public-cert .is_public-skill .course_skill_item .description li {
    list-style-type: disc;

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    margin-left: 48px;
}

.is_public-cert .is_public-skill .course_skill_item .item {

    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
}

.is_public-cert .is_public-skill .course_skill_item .item img {
    width: 16px;
    height: 11px;
    margin-right: 32px;
    margin-top: 19px;
}

/* end of certificate */

/* setting-menu */
.private-menu .dropdown-menu[data-bs-popper] {
    border: 1px solid #EEEEEE;
    width: 352px;
    padding: 26px 0 0;
    left: -124px !important;
    background: white;
    top: 60px;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
}

.private-menu .menu-setting-menu-bg {
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    width: 352px;
    position: absolute;
    z-index: -1;
    top: -14px;
    height: 103.5% !important;
}


.private-menu .first-setting-menu {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}

.private-menu .first-setting-menu img {
    width: 64px;
    max-width: 64px;
    background: #C4C4C4;
    height: 64px;
    border-radius: 50%;
    margin-right: 24px;
}

.private-menu .first-setting-menu span {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;

    word-break: break-word;
}

.private-menu .view-profile-setting {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    width: 297px;
    height: 40px;
    margin-left: auto !important;
    margin-right: auto;
    margin-top: 16px;
    margin-bottom: 16px !important;
    padding-top: 4px;
    outline: none;
}

.private-menu .view-profile-setting a {
    text-decoration: none !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #59C4AE;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 28px !important;
}

.private-menu li {
    padding: 16px 24px;
    height: 60px;
}

.private-menu .passcard a {
    background: url("/static/images/new_Jobpasscard/passcard-icon.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0px 0px;
}

.private-menu .passcard:hover>a {
    background: url("/static/images/new_Jobpasscard/passcard.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0px 0px;
}

.private-menu .setting a {
    background: url("/static/images/new_Jobpasscard/setting-icon.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0px 0px;
}

.private-menu .setting:hover>a {
    background: url("/static/images/new_Jobpasscard/setting-icon-hover.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0px 0px;
}

.private-menu .help a {
    background: url("/static/images/new_Jobpasscard/help-icon.png") no-repeat;
    background-size: 24px auto;
    background-position: 0px 0px;
}


.private-menu .help:hover>a {
    background: url("/static/images/new_Jobpasscard/help-icon-hover.png") no-repeat;
    background-size: 22px auto;
    background-position: 1px 1px;
}

.private-menu .li-logout a {
    background: url("/static/images/new_Jobpasscard/signOut-icon.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0px 0px;
}


.private-menu .li-logout:hover>a {
    background: url("/static/images/new_Jobpasscard/signOut-icon-hover.png") no-repeat;
    background-size: 20px auto;
    background-position: 2px 1px;
}


.private-menu li:hover {
    background-color: #F5F5F5;
}

.private-menu li.li-logout:hover {
    background-color: #F5F5F5;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.private-menu li .icon-setting {
    width: 24px;
    padding-top: inherit !important;
    margin-right: 16px;
    margin-top: -4px;
}

/* end of setting-menu */

.passcard_item .hover-course-group,
#content-passcard .passed_all .hover-course-group {
    display: none;
}

.passcard_item .course-group-img:hover,
#content-passcard .passed_all .course-group-img:hover {
    cursor: pointer;
}

.passcard_item .hover-course-group {
    position: absolute;
    border-radius: 16px;
    top: -134px;
    left: 190px;
    padding-top: 8px;
    width: 375px !important;
    height: auto !important;
    background: transparent !important;
}

#content-passcard .passed_all .hover-course-group {
    position: absolute;
    border-radius: 16px;
    top: -134px;
    left: 150px;
    padding-top: 8px;
    width: 375px !important;
    height: auto !important;
    background: transparent !important;
}

#content-passcard .passed_all {
    position: relative;
}

.passcard_item .hover-course-group .bg_course_skill,
#content-passcard .passed_all .hover-course-group .bg_course_skill {
    width: 375px;
    border: none;
    border-radius: inherit;
}

.passcard_item .hover-course-group .detail,
#content-passcard .passed_all .hover-course-group .detail {
    /* position: absolute; */
    top: -42px;
    /* width: 304px; */
    left: 47px;
}

.passcard_item .hover-course-group .detail .name,
#content-passcard .passed_all .hover-course-group .detail .name {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;

    line-height: 32px;
    color: #212E4B;
    margin-bottom: 8px;
}

.passcard_item .hover-course-group .detail .skill-title,
#content-passcard .passed_all .hover-course-group .detail .skill-title {
    color: #212E4B;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;

    margin-top: 16px;
    margin-bottom: 8px;
}

.passcard_item .hover-course-group .detail .item img,
#content-passcard .passed_all .hover-course-group .detail .item img,
#content-passcard .passed_all .hover-course-group .course-skill-btn img {
    width: 24.9px;
    border: inherit !important;
}

.passcard_item .hover-course-group .detail .item .item-li,
.passcard_item .hover-course-group .detail .item .item-li span,
.passcard_item .hover-course-group .detail .item .item-li span li,
#content-passcard .passed_all .hover-course-group .detail .item .item-li,
#content-passcard .passed_all .hover-course-group .detail .item .item-li span,
#content-passcard .passed_all .hover-course-group .detail .item .item-li span li {
    color: #7A89A6;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;

}

.passcard_item .hover-course-group .detail .item .row,
#content-passcard .passed_all .hover-course-group .detail .item .row {
    position: inherit !important;
    height: inherit !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.passcard_item .hover-course-group .course-skill-btn,
#content-passcard .passed_all .hover-course-group .course-skill-btn {
    position: absolute;
    bottom: 24px;
    left: 47px;
    display: inherit;
}

.passcard_item .hover-course-group .course-skill-btn .to-cart {
    background: #00DBB6;
    width: 304px;
    height: 48px;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 16px;
    outline: none;
    border: none;
}

.passcard_item .hover-course-group .course-skill-btn .to-view-score,
#content-passcard .passed_all .hover-course-group .course-skill-btn .to-view-score {
    width: 304px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    color: #59C4AE;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    outline: none;
    background: transparent;
}

.passcard_item .hover-course-group .course-skill-btn .to-view-score:disabled {
    color: #BDBDBD !important;
    border: 1.5px solid #BDBDBD !important;
}

#content-passcard .passed_all .hover-course-group .course-skill-btn .complete-text {
    text-align: center;
    margin-top: 16px;
}

#content-passcard .passed_all .hover-course-group .course-skill-btn .complete-text span {

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #59C4AE;
}

#content-passcard .passed_all .hover-course-group .course-skill-btn .complete-text img {
    margin-right: 9px;
}

.passed_all .bg_complete {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(/static/images/new_Jobpasscard/bg-passcard-complete.png) no-repeat;
    background-size: 100% 100%;
}

.passed_all .bg_complete .jobpasscard-complete-icon {
    width: 41.96px !important;
    margin-top: 48px !important;
    margin-left: 59px !important;
}

.passed_all .bg_complete .complete-text {

    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
}

#content-passcard .passcard_item .hover-course-group {
    top: -67px;
}


.login-notification-nav {
    min-height: 50px;
    background: #FDF3A9;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #212E4B;
    position: relative;
}


.login-notification-nav p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #212E4B;
}


.login-notification-nav a {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #4B8DF1;
}

.login-notification-nav img.dark-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%)
}

@media screen and (max-width: 500px) {
    .login-notification-nav {
        text-align: center;
        padding: 4px 47px;
    }

    /* .login-notification-nav span,
  .login-notification-nav p{
    line-height: 30px;
  } */

    .login-notification-nav img.dark-close-btn {
        right: 16px;
    }
}

/* search */
#menu-desktop #is_not_authenticated .tab-search {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4px;
    width: 296px;
    height: 48px;
}

#menu-desktop #is_not_authenticated #jpc-search-vue-select {
    display: none;
    width: 0px;
    transition: width 2s;
    background-size: 24px auto !important;
    background-position: 16px 12px !important;
    margin-top: -10px;
}

#menu-desktop #is_not_authenticated #jpc-icon-search:hover {
    cursor: pointer;
}

#menu-desktop #is_not_authenticated .vs--searchable .vs__dropdown-toggle {
    height: 48px;
    padding-left: 48px;
    padding-right: 16px;
}

#menu-desktop #is_not_authenticated #jpc-search-vue-select .vs__actions {
    display: none;
}

.v_search_mobile {
    display: none;
    position: fixed !important;
    top: 0;
    z-index: 1999;
    width: 100%;
    height: 16vw;
    background: #FFFFFF;
    padding: 4.571vw;
}

.v_search_mobile_blur.is_blur {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 1666.667vw;
    margin-top: -15vw;
    position: absolute;
    z-index: 1990;
}

.v_search_mobile_blur.is_blur>.v_search_mobile {
    display: block;
}

.v_search_mobile .vs__dropdown-toggle {
    border: none !important;
    height: 100% !important;
    background: url(/static/images/new_Jobpasscard/search-icon.png) no-repeat !important;
    background-size: 6.857vw auto !important;
    padding-left: 9.714vw !important;
}

.v_search_mobile .vs__actions {
    display: none;
}

.v_search_mobile .vs__dropdown-menu {
    background: #FFFFFF;
    border: 0.286vw solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 1.143vw 45.714vw rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 4.571vw 4.571vw;
}

.v_search_mobile .vs__dropdown-menu li {
    height: 11.429vw;
}

#passcard_list .not-found {
    text-align: center;
}

#passcard_list .not-found .title1 {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 24px;
}

#passcard_list .not-found .title2 {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
}

#passcard_list .not-found img {
    margin-top: 48px;
    width: 160px;
    margin-bottom: 48px;
}

#passcard_list .not-found .view-passcard {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    width: 287px;
    height: 48px;
    background: transparent;
    outline: none;
    margin-bottom: 110px;
}

#passcard_list .not-found .view-passcard a {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;
    text-decoration: none;
}

/* end search */

/* notification */

#notification #course {
    min-height: inherit;
}

#notification .filter-desktop-section {
    width: 256px;
    min-height: 312px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 27px 24px;
    margin-bottom: 24px;
    margin-top: 64px;
    float: right;
}

#notification .filter-desktop-section .title {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 16px;
}

#notification .filter-desktop-section .title img {
    width: 24px;
    margin-right: 8px;
}

#notification .filter-desktop-section .sub-title {
    color: #212E4B;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 16px;
}

#notification .title-detail {
    margin-top: 68px;
    padding-left: 32px;
    padding-right: 24px;
    margin-bottom: 24px;
    width: 876px;
}

#notification .list-item .notification_item .created {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #59C4AE;
    margin-left: auto;
}

#notification .list-item .notification-link {
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #212E4B;
}

#notification .title-left {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #212E4B;
}

#notification #noti-mobile .title-left {
    font-style: normal;
    font-weight: 500;
    font-size: 9.600vw;
    line-height: 12.800vw;
    color: #212E4B;
    margin-top: 12.800vw;
    margin-left: 5.333vw;
    margin-bottom: 8.533vw;
}

#notification #noti-mobile .bg_color_blur {
    margin-top: -50vw !important;
}

#notification #noti-mobile .row_mobile {
    margin-bottom: 8.533vw;
    width: 93.333vw;
    margin-left: auto;
    margin-right: auto;
}

#notification #noti-mobile .notification_item .message {
    width: 65vw;
    font-style: normal;
    font-weight: normal;
    font-size: 3.733vw;
    line-height: 6.400vw;
    color: #212E4B;
}

#notification .delete_icon {
    display: none;
    width: 40px !important;
    height: 40px !important;
    margin-left: 40px;
    margin-top: 22px;
    cursor: pointer;
}

#menu-desktop .notification_detail {
    border: none;
    width: 342px;
    margin: 20px 10px;
    background: transparent;
    top: 30px;
    position: absolute;
    display: none;
    z-index: 1999;
}

#menu-desktop .notification_detail .menu-setting-menu-bg {
    width: 352px;
    z-index: 1;
    position: absolute;
    top: 11px;
    height: 494px !important;
}

#menu-desktop .notification_detail .head {
    display: flex;
    position: absolute;
    width: 352px;
    top: 58px;
    z-index: 2;
    margin-bottom: 24px;
}

#menu-desktop .notification_detail .head .title {
    color: #212E4B;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    margin-left: 24px;
}

#menu-desktop .notification_detail .head .delete_all {
    float: right;
    text-align: right;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    text-indent: 8px;
    text-decoration-line: underline;
    color: #4B8DF1;
    margin-right: 24px;
    margin-top: 4px;
}

#menu-desktop .notification_detail .view_more {
    width: 304px;
    height: 40px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    outline: none;
    background: transparent;
}

#menu-desktop .notification_detail .view_more a {
    color: #59C4AE;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
}

#menu-desktop .notification_detail .btn_bottom {
    position: absolute;
    bottom: 14px;
    left: 24px;
    z-index: 2;
}

#notification .flower-mobile.swipeleft .delete_icon {
    display: block !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

#notification .flower-mobile .detail_swipe {
    display: flex;
    transition: 0.5s ease-in-out;
}

#notification .flower-mobile .swipeToLeft {
    margin-left: -11.733vw;
    margin-right: 3.733vw;
    transition: 0.5s ease-in-out;
}

#menu-desktop .notification_detail .menu-notification-container {
    position: absolute;
    z-index: 2;
    top: 120px;
    left: 16px;
    height: 312px;
}

#menu-desktop .notification_detail .menu-notification-container .link-block-45 {
    text-decoration: none;
}

#menu-desktop .notification_detail .menu-notification-container .div-block-216 {
    display: flex;
}

#menu-desktop .notification_detail .menu-notification-container img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    margin-left: 8px;
}

#menu-desktop .notification_detail .menu-notification-container .text-block-160 {
    width: 248px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #212E4B;
    margin-bottom: 4px;
}

#menu-desktop .notification_detail .menu-notification-container .text-block-161 {
    margin-left: 56px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #59C4AE;
    margin-bottom: 8px;
}

#menu-desktop .notification_detail .menu-notification-container .line-break {
    width: 320px;
    height: 0px;
    border: 1px solid #E8EAF0;
    transform: rotate(180deg);
    margin-bottom: 16px;
}

#menu-desktop .notification_detail .menu-notification-container .item.not_seen {
    background: #FFFDEA;
    padding-bottom: 16px;
    padding-top: 8px;
    width: 320px;
    height: 92px;
}

#is_not_authenticated .bg-menu-notification-badge {
    position: absolute;
    right: 0px;
    top: 0px;
    min-width: 20px;
    height: 16px;
    border-radius: 16px;
    background: #EB3C2B;
}

#is_not_authenticated .menu-notification-badge {
    color: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    line-height: 17px;
    margin-left: auto;
    margin-right: auto;
}

#is_not_authenticated .notification_icon:hover {
    cursor: pointer;
}

.is-authen .bg-menu-notification-badge-mobile {
    background: #EB3C2B;
    border-radius: 16px;
    min-width: 20px;
    height: 16px;
    margin-left: 8px;
    margin-top: 6px;
}

.is-authen .bg-menu-notification-badge-mobile .menu-notification-badge-mobile {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF;
}

/* side bar in lms */
/* #chapter-content {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
} */

#chapter-content #btn-show-chapter-container {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 31px;
    color: #4B8DF1;
    text-decoration: underline;
    display: none;
    cursor: pointer;
}

#chapter-content #btn-show-chapter-container img {
    width: 24px;
    height: 24px;
    margin-left: 8px;
}

#chapter-container.col-5 {
    /* margin-top: 136px; */
    width: 352px;
    background: #FFFFFF;
    border-radius: 16px;
}

#chapter-container #chapter-head {
    padding: 24px 20px 0px 20px;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    background: #FFFFFF;
}

#chapter-container #chapter-head .chapter-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    margin-top: 4px;
}

#chapter-container #chapter-head .chapter-head-title {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

#chapter-container #chapter-head .hide-chapter-btn {
    outline: none;
    border: none;
    text-decoration: underline;
    background: transparent;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    padding-left: 0;
    color: #4B8DF1;
    margin-bottom: 24px;
}

#chapter-container #chapter-head .hide-chapter-btn .hide-left-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

#chapter-container .root-chapter {
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    background: #FFFFFF;
    min-height: 140px;
}

#chapter-container .root-chapter .root-chapter-section {
    display: flex;
}

#chapter-container .root-chapter .root-chapter-expander .show-down-icon {
    width: 24px;
    height: 24px;
    margin-top: 16px;
}

#chapter-container .root-chapter .parent-chapter {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-decoration: none;
    color: #2B3E64;
    width: 288px;
    word-break: break-word;
    margin-right: 8px;
    margin-bottom: 12px;
    height: 64px;
    padding: 16px 0px 0px 16px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chapter-container .root-chapter .chapter_detail {
    display: flex;
    padding-left: 16px;
}

#chapter-container .root-chapter .chapter_detail .sub-line-break {
    margin-left: 16px;
    margin-right: 16px;
    height: 32px;
    width: 1px;
    background: #EEEEEE;
}

#chapter-container .root-chapter .chapter_detail .count_of_child {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 24px;
    color: #7A89A6;
}

#menu_mobile {
    background: #FFFFFF;
    width: 100vw;
    height: 68px;
    position: fixed;
    z-index: 2;
    top: 0;
}

#chapter-container .line-break-chapter {
    width: 352px;
    height: 1px;
    background: #EEEEEE;
    margin-left: -20px;
}

#chapter-container .line-break-chapter.parent {
    margin-top: 16px;
}

#chapter-container .root-chapter .childs-chapter .chapter-item {
    min-height: 82px;
    background: #F4F4F4;
    padding: 8px 16px;
}

#chapter-container .root-chapter .childs-chapter .chapter-item:hover .link-3 {
    font-weight: 600;
}

#chapter-container .root-chapter .childs-chapter .child-chapter-item {
    display: flex;
}

#chapter-container .root-chapter .childs-chapter .child-chapter-item input {
    width: 24px;
    height: 24px;
}

#chapter-container .root-chapter .childs-chapter .child-chapter-item .link-3 {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    color: #2B3E64;
    margin-top: 6px;
}

#chapter-container .child-chapter-item input[type="checkbox"] {
    width: 24px;
    height: 24px;
    border: 1px solid #9E9E9E;
    box-sizing: border-box;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin-right: 16px;
    margin-top: 9px;
}

#chapter-container .child-chapter-item input[type="checkbox"]:checked {
    visibility: visible;
    outline: none;
    background-image: url(/static/images/new_Jobpasscard/checked.png);
    background-size: 100% auto;
    border-radius: 4px;
    border: none;
}

#alert_is_not_test_in_mobile1 {
    font-weight: 1000;
    font-size: 24px;
}

#alert_is_not_test_in_mobile2 {
    font-weight: 1000;
}

/* end side bar in lms */


/* webcam in lms */
#course-navigator #webcam-container {
    position: fixed;
    right: 50px;
    top: 60px;
    width: 160px;
    height: 90px;
    /*border: 1px solid #9e9e9e;*/
    display: none;
}

#course-navigator #webcam-container #webcam-canvas {
    display: none;
}

/* end webcam in lms */


/* timer in lms */
#course-navigator #webcam-container #timer-container {
    position: fixed;
    right: 50px;
    top: 154px;
    width: 66px;
    height: 32px;
    border: 1px solid #9e9e9e;
    text-align: right;
    background: #6d6c6c;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 17px;
}

/* end timer in lms */
.dropdown.private-menu .dropdown-item:active {
    background-color: transparent !important;
}

/* not found page */
#content_error_404.section-52 {
    height: calc(100vh - 74px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1120px;
    margin: auto;
    flex-direction: column;
    padding: 0 40px;
    padding-bottom: 32px;
}

#content_error_404.section-52 .heading-30 {
    color: #71E8C4;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
}

#content_error_404.section-52 .heading-31 {
    color: #05112b;
    font-size: 150px;
    line-height: 150px;
    font-weight: 600;
    text-align: center;
}

#content_error_404.section-52 .div-block-132 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

#content_error_404.section-52 .div-block-132 a {
    color: #061f44;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

#content_error_404 .lb-label {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    display: flex;
    align-items: center;
    color: #212E4B;
}

#content_error_404 .lb-main {
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 95px;
    display: flex;
    align-items: center;
    color: #212E4B;
}

#content_error_404 .lb-sub {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #5E7094;
}

#content_error_404 .jpc-primary-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    gap: 8px;
    width: 256px;
    height: 64px;
    background: #00DBB6;
    border-radius: 16px;
    box-shadow: none;
    text-decoration: none;
    margin-top: 64px;
}

#content_error_404 .jpc-primary-btn:hover {
    color: #212E4B;
}

#content_error_404 .footer-contact {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

#content_error_404 .footer-contact .message {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #5E7094;
}

#content_error_404 .footer-contact a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #4B8DF1;
    text-decoration: none;
}

#content_error_404 .footer-contact a:hover {
    color: #7AB8F9;
}

#content_error_404 .footer-contact a:active {
    color: #3D69CB;
}

/* end not found page */


#has_not_notification_item .text-1 {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    margin-bottom: 24px;
}

#has_not_notification_item .text-2 {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    color: #7A89A6;
}

#has_not_notification_item img {
    width: 60px !important;
    height: 60px !important;
    margin-top: 18px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

#has_not_notification_item {
    margin-left: 8px;
    padding-top: 20px;
}

.filter-display-type {
    display: flex;
}

.course-filter {
    position: relative;
}

.course-filter-button {
    position: relative;
    width: 155px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    background-color: #FFFFFF;
    margin-right: 32px;
}

.course-filter-button:hover {
    border: 1.5px solid #71E8C4;
    color: #71E8C4;
}

.course-filter-button:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

.course-filter-button:is(:hover) .course-filter-image {
    opacity: 0.6;
}

.course-filter-button:is(:active) .course-filter-image {
    opacity: 1;
}

.course-filter:focus-within .filter-desktop-section {
    z-index: 1070;
    transition: opacity 0.2s, z-index 0.2s, max-height 0.2s;
    display: block;
}

.filter-desktop-section {
    position: absolute;
    top: 52px;
    left: 0px;
    z-index: -1;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 4px 160px rgba(0, 0, 0, 0.05);
}

button#sort_course_dropdown {
    position: relative;
    font-family: inherit;
    background-color: #FFFFFF;
    width: 248px;
    height: 48px;
    padding: 10px 16px;
    font-size: 14px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0px 0px 1px 1px #c5c5c5;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    color: #000000;
}

button#sort_course_dropdown {
    background-image: url(/static/images/new_Jobpasscard/chevron-down-modal.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 218px 21px;
}

.sort-desktop-section .select-label {
    position: relative;
    color: #9E9E9E;
    top: -58px;
    left: 16px;
    transition: 0.2s ease all;
    font-size: 14px;
    background: linear-gradient(180deg, #FFFFFF 45%, #FFFFFF 55%);
    padding: 0 4px;
}

.sort-desktop-section .dropdown-menu {
    width: 248px;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
    inset: 3px auto auto 0px !important;
}

.sort-desktop-section .dropdown-menu .dropdown-item {
    padding: 12px 8px;
    background-color: transparent !important;
}

.sort-desktop-section .dropdown-menu .dropdown-item.active {
    background-image: url(/static/images/new_Jobpasscard/dropdown-check.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 218px 15px;
    color: #212529;
}

.sort-desktop-section .dropdown-menu li:hover,
.sort-desktop-section .dropdown-menu li:focus {
    background-color: #F5F5F5 !important;
}

.course-title {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 48px;
}

.course-hover-card {
    position: absolute;
    width: 376px;
    margin-right: 240px;
    top: -60px;
}

.skill-content {
    width: 352px;
    height: 436px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
    margin-right: 260px;
    position: relative;
}

.hover-course-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 446px;
    padding-bottom: 24px;
}

.hover-course-group .detail {
    position: unset;
    width: 344px;
    padding-left: 24px;
    padding-top: 24px;
}

.hover-course-group .course-skill-btn {
    position: unset;
    bottom: 24px;
    left: 0px;
    display: flex;
}

.hover-course-group .wishlist-heart {
    margin-left: 0;
}

@media screen and (min-width:1185px) and (max-width:1400px) {
    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group {
        right: 0;
        left: 280px;
        position: absolute;
        z-index: 10;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .bg_course_skill {
        transform: scaleX(-1);

    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group {
        right: 0;
        left: 280px;
        position: absolute;
        z-index: 10;
    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .bg_course_skill {
        transform: scaleX(-1);

    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .detail {
        position: unset;
        width: 344px;
        padding-left: 44px;
        padding-top: 24px;
    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .detail {
        position: unset;
        width: 344px;
        padding-left: 44px;
        padding-top: 24px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .course-hover-card {
        position: absolute;
        width: 376px;
        margin-right: 0px;
        top: -60px;
        left: 240px;
    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .course-hover-card {
        position: absolute;
        width: 376px;
        margin-right: 0px;
        top: -60px;
        left: 240px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .skill-content {}

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .skill-content:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-right: 25px solid #EEEEEE;
        border-bottom: 16px solid transparent;
        border-left: 0 !important;
        position: absolute;
        top: 50%;
        right: 0;
        left: -25px;
    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .skill-content::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-right: 24px solid white;
        border-bottom: 15px solid transparent;
        border-left: 0 !important;
        position: absolute;
        top: 50%;
        right: 0;
        left: -24px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .course-skill-btn {
        position: unset;
        bottom: 24px;
        left: 0px;
        display: flex;
        padding-left: 20px;
    }

    .test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .course-skill-btn {
        position: unset;
        bottom: 24px;
        left: 0px;
        display: flex;
        padding-left: 20px;
    }
}

@media screen and (min-width:1401px) {

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group {
        right: 0;
        left: 280px;
        position: absolute;
        z-index: 10;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .bg_course_skill {
        transform: scaleX(-1);

    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .detail {
        position: unset;
        width: 344px;
        padding-left: 44px;
        padding-top: 24px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .course-hover-card {
        position: absolute;
        width: 376px;
        margin-right: 0px;
        top: -60px;
        left: 240px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .skill-content {
        width: 352px;
        height: 436px;
        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        box-sizing: border-box;
        box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
        border-radius: 16px;
    }

    .test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .course-skill-btn {
        position: unset;
        bottom: 24px;
        left: 0px;
        display: flex;
        padding-left: 20px;
    }

}

#for_desktop .home-section-7 {
    width: 1160px;
    min-height: 620px;
    padding-left: 18px;
    margin-left: auto;
    margin-right: auto;
    background: url('/static/images/new_Jobpasscard/home-course-bg.png') no-repeat;
    background-size: 586px auto;
    background-position: 608px 10px;
}

#for_desktop .home-section-header {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #212E4B;
    margin-bottom: 24px;
}

#for_desktop .home-section-7 .item {
    background: #FFFFFF;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
    width: 640px;
    height: 224px;
    padding: 32px;
    margin-bottom: 24px;
}

#for_desktop .home-section-7 img.video-mockup {
    width: 296px;
    height: 160px;
    border-radius: 8px;
}

#for_desktop .home-section-7 .course-name {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
    text-decoration: none;
}

#for_desktop .home-section-7 .arjan-name {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #9E9E9E;
}

.home-section-7 .progress {
    width: 153px;
    height: 8px;
    background: #DEFAF2;
    border-radius: 8px;
}

.home-section-7 .progress-bar {
    width: 75%;
    background: #00DBB6;
    border-radius: 8px;
}

.home-section-7 .progress-percent {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    text-transform: uppercase;
    color: #212E4B;
    margin-left: 8px;
}

.course-progress {
    margin-top: 24px;
    display: flex;
    align-items: center;
}

#for_desktop .view-my-course {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#for_desktop .view-my-course button {
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: transparent;
    width: 160px;
    height: 48px;
    margin-top: 8px;
    outline: none;
}

#for_desktop .view-my-course button a {
    color: #59C4AE;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-decoration: none;
}

#for_desktop .view-my-course button img {
    width: 24px;
    margin-left: 8px;
}

#for_desktop .course-card {
    width: 256px;
    height: 341px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 5%);
    border-radius: 32px;
    background-image: url('/static/images/manage_assign/bg-course-card.png');
    background-size: 272px 353px;
    margin-bottom: 16px;
}

#for_desktop .course-items-img {
    width: 208px;
    height: 112px;
    margin-left: 24px;
    margin-top: 24px;
}

#for_desktop .course-title-group {
    position: relative;
    width: 208px;
    height: 64px;
    left: 24px;
    top: 16px;
}

#for_desktop .course-name {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
    width: 210px;
}

#for_desktop .sub-course-name {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #9E9E9E;
}

#for_desktop .course-rating-group {
    display: flex;
    align-items: center;
}

#for_desktop .select-rating {
    background-image: url('/static/images/new_Jobpasscard/rating-fill.png');
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
}

#for_desktop .unselect-rating {
    background-image: url('/static/images/new_Jobpasscard/rating-outline.png');
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
}

#for_desktop span.course-rating-count {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    text-transform: uppercase;
    color: #212E4B;
    margin-left: 8px;
}

#for_desktop p.course-price {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    color: #59C4AE;
}

#for_desktop .best-seller {
    position: absolute;
    width: 69px;
    height: 20px;
    margin-left: 150px;
    margin-top: -100px;
    background: #F9E561;
    border-radius: 4px;
    padding: 0 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    color: #212E4B;
}

#for_desktop #home-section-4 .course-row {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 128px;
    display: flex;
    overflow: hidden;
}

#for_desktop .about-etda-section {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
    text-align: center;
}

img.about-etda-home {
    width: 24px;
}

p.about-etda-header {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: #212E4B;
    margin-top: 24px;
}

p.about-etda-des {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #7A89A6;
    width: 544px;
    margin: auto;
}

.btn-about-etda {
    width: 276px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: white;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    margin-top: 32px;
}

.btn-about-etda:hover {
    background: #FFFFFF;
    border: 1.5px solid #71E8C4;
    box-sizing: border-box;
    color: #71E8C4;
}

.btn-about-etda:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    color: #59C4AE;
}

#for_mobile .home-courselist-selection .home-courselist-header {
    font-style: normal;
    font-weight: 500;
    font-size: 7.467vw;
    line-height: 9.600vw;
    color: #212E4B;
    width: 89.6vw;
    margin: auto;
    margin-bottom: 10.7vw;
}

#for_mobile .home-courselist-selection {
    margin-top: 8.6vw;
    max-height: 244.991vw;
    overflow: hidden;
}

#for_mobile .home-courselist-selection .item {
    background: #FFFFFF;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 3.8647vw;
    margin: auto;
    width: 89.6vw;
    height: 28vw;
    padding: 3.8647vw;
    margin-bottom: 3.8647vw;
}

#for_mobile .home-courselist-selection .view-my-course button {
    border: 0.4vw solid #59C4AE;
    box-sizing: border-box;
    border-radius: 4.267vw;
    background: transparent;
    width: 42.667vw;
    height: 12.8vw;
    outline: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#for_mobile .home-courselist-selection .view-my-course {
    margin-top: 8.533vw;
    height: 156.533vw;
    background: url('/static/images/new_Jobpasscard/home-course-bg.png') no-repeat;
    background-size: 156.267vw auto;
    background-position: -41.067vw -10.667vw;
}

#for_mobile .home-courselist-selection .view-my-course button a {
    font-style: normal;
    font-weight: 600;
    font-size: 4.267vw;
    line-height: 7.467vw;
    text-decoration: none;
    color: #59C4AE;
}

#for_mobile .home-courselist-selection .view-my-course button a img {
    width: 6.4vw;
    margin-left: 2.133vw;
}

#for_mobile img.video-mockup {
    width: 35vw;
    height: 18.8vw;
}

#for_mobile .course-name {
    font-style: normal;
    font-weight: normal;
    font-size: 4.34782vw;
    line-height: 5.8vw;
    color: #212E4B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

#for_mobile .arjan-name {
    font-style: normal;
    font-weight: 600;
    font-size: 3.06vw;
    line-height: 3.63vw;
    text-transform: uppercase;
    color: #9E9E9E;
    margin-top: 2vw;
    margin-bottom: 0.323vw;
}

#for_mobile .home-courselist-selection .progress {
    width: 35vw;
    height: 1.94vw;
    background: #DEFAF2;
    border-radius: 1.94vw;
}

#for_mobile .home-courselist-selection .progress-bar {
    width: 75%;
    background: #00DBB6;
    border-radius: 1.94vw;
}

#for_mobile .home-courselist-selection .course-progress {
    margin-top: 1.8vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#for_mobile #home-mobile-section-4 .course-card {
    background: #FFFFFF;
    border-radius: 4.831vw;
    background-image: url('/static/images/manage_assign/bg-course-card.png');
    background-size: 41.305vw 51.45vw;
    width: 38.65vw;
    height: 51.45vw;
    margin-bottom: 3.8647vw;
}

.course-items-img {
    margin-left: 3.63vw;
    margin-top: 3.63vw;
    width: 31.41vw;
    height: 17vw;
}

#for_mobile #home-mobile-section-4 .course-card .course-name {
    font-style: normal;
    font-weight: normal;
    font-size: 4.34782vw;
    line-height: 5.8vw;
    color: #212E4B;
    width: 31.41vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#for_mobile #home-mobile-section-4 .course-card .sub-course-name {
    font-style: normal;
    font-weight: 600;
    font-size: 2.06vw;
    line-height: 3.63vw;
    text-transform: uppercase;
    color: #9E9E9E;
    margin-bottom: 0.323vw;
}

#for_mobile .best-seller {
    position: absolute;
    width: 19vw;
    height: 4.831vw;
    margin-left: 15vw;
    margin-top: -16vw;
    background: #F9E561;
    border-radius: 0.964vw;
    padding: 0px 2.94vw;
    font-style: normal;
    font-weight: normal;
    font-size: 2.9vw;
    line-height: 4.831vw;
    color: #212E4B;
}

#for_mobile .select-rating {
    background-image: url('/static/images/new_Jobpasscard/rating-fill.png');
    background-size: 3.8647vw 3.8647vw;
    width: 3.8647vw;
    height: 3.8647vw;
}

#for_mobile .unselect-rating {
    background-image: url('/static/images/new_Jobpasscard/rating-outline.png');
    background-size: 3.8647vw 3.8647vw;
    width: 3.8647vw;
    height: 3.8647vw;
}

#for_mobile .course-rating-group {
    display: flex;
    align-items: center;
}

#for_mobile span.course-rating-count {
    font-style: normal;
    font-weight: 500;
    font-size: 3.38164vw;
    line-height: 5.8vw;
    text-align: right;
    text-transform: uppercase;
    color: #212E4B;
    margin-left: 1.94vw;
}

#for_mobile p.course-price {
    font-style: normal;
    font-weight: bold;
    font-size: 5.8vw;
    line-height: 7.729vw;
    color: #59C4AE;
}

#for_mobile .course-title-group {
    position: relative;
    left: 3.8vw;
    top: 2.8647vw;
}

#for_mobile .about-etda-section {
    text-align: center;
    margin-top: 18vw;
    margin-bottom: 60vw;
}

#for_mobile p.about-etda-header {
    font-style: normal;
    font-weight: bold;
    font-size: 6.8vw;
    line-height: 7.7294vw;
    text-align: center;
    color: #212E4B;
    margin-top: 5.8vw;
}

#for_mobile p.about-etda-des {
    font-style: normal;
    font-weight: normal;
    font-size: 4.34782vw;
    line-height: 6.8vw;
    text-align: center;
    color: #7A89A6;
    width: 89.6vw;
    margin: auto;
}

#for_mobile img.about-etda-logo {
    position: relative;
    width: 100%;
    margin: auto;
}

.organiz-has-passcard {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    width: 276px;
    height: 24px;
    background: #FDF3A9;
}

#course-navigator div#start_exam_container {
    width: 100%;
    margin: auto;
}

#course-navigator div#timer-countdown {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #4B8DF1;
}

#course-navigator .chapter-header-content {
    width: 100%;
    height: auto;
    background: #F5F5F5;
    padding: 21px 0;
    margin-top: 65px
}

#course-navigator .chapter-header-group {
    width: 77.7vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#course-navigator .chapter-course-detail {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
}

#course-navigator .chapter-course-detail .label {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #3B517B;
}

#course-navigator .chapter-course-detail .course-name {
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 35px;
    color: #212E4B;
    max-width: 352px;
}

#course-navigator img.course-timer {
    margin-right: 8px;
}

#course-navigator .chapter-course-time {
    display: flex;
    align-items: center;
    gap: 16px;
}

#course-navigator .chapter-course-time img.course-icon {
    width: 24px;
    height: 24px;
}

canvas#webcam-canvas {
    display: none;
}

video#webcam-video {
    border-radius: 6px;
    object-fit: cover;
    width: 157px;
    transform: scaleX(-1);
    box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

div.section_item {
    padding: 0;
}

div.section_item[data-type="video"] {
    padding: 0;
    position: relative;
    padding-bottom: 50%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

div.section-exercise-item {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 113px);
    z-index: 5;
    position: relative;
}

.section-exercise-item.linear-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    height: calc(100vh - 113px);
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-y: auto;
    padding-top: 100px;
    background: #FAFAFA;
}

div.section-exercise-item.dark {
    /* background-color: #1e1e1e; */
    color: #D4D4D4;
}

div.section-exercise-item.one_item {
    display: none !important;
}


div.row.progress_item {
    display: none;
}

.section-question-row {
    /* width: 77.7vw;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 48px 0;
    padding-bottom: 150px;
    align-items: flex-start;
    justify-content: space-between; */
    /* width: 77.7vw; */
    /* margin: auto; */
    display: flex;
    flex-wrap: wrap;
    /* padding: 48px 0; */
    /* padding-bottom: 150px; */
    justify-content: space-between;
    background: #FAFAFA;
    align-items: stretch;
}

.section-question-row.choice-img {
    flex-direction: column;
}

.card.section-question-solution {
    display: none;
    width: 100%;
    margin-bottom: 48px;
    padding: 27px 46px;
    height: auto;
    background: #F5F5F5;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 16px;
}

.card.section-question-solution .solution-title {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #212E4B;
    margin-bottom: 26px;
}

.section-question-answer {
    user-select: none;
}

.section-question-answer.question-multiple_choice.distance_choice,
.section-question-answer.question-multiple_select.distance_choice,
.section-question-answer.question-gdocs.distance_choice,
.section-question-answer.question-gsheet.distance_choice,
.section-question-answer.question-gslide.distance_choice,
.section-question-answer.question-coding.distance_choice,
.section-question-answer.question-sql.distance_choice,
.section-question-answer.question-gpt.distance_choice {
    width: calc(100vw - 514px);
    height: auto;
    max-height: calc(100vh - 113px);
    overflow-y: auto;
}

.section-exercise-title-jobpasscrd {
    width: calc(100vw - 514px);
    height: auto;
    max-height: calc(100% - 60px);
    overflow-y: auto;
}

.section-question-answer.question-gpt.distance_choice .row {
    height: 100%;
}

.choice-img .section-question-answer.question-multiple_choice.distance_choice,
.choice-img .section-question-answer.question-multiple_select.distance_choice {
    width: 100%;
}

.section-exercise-title-jobpasscrd.linear-grid {
    width: 100%;
    padding: 0;
    color: var(--stable-blue-900-base, #212E4B);
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.section-exercise-item.dark .section-exercise-title-jobpasscrd {
    background-color: #1e1e1e;
    color: #D4D4D4;
}

.section-exercise-item .question-index {
    /* width: 100%;
    font-size: 28px;
    color: #212E4B;
    padding-bottom: 16px; */
    color: #212E4B;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.section-exercise-item .question-full-score-info {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0px;
    color: #9FAABF;
}

.section-exercise-item .question-deducted-score-info {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0px;
    color: #EB3C2B;
}

.section-exercise-item .question-index-line {
    width: 100%;
    height: 1px;
    background: #E8EAF0;
    margin: 16px 0;
}

/* .section-exercise-item .question-index::after {
    content: '';
    display: block;
    width: 160px;
    border-bottom: 2px solid #00DBB6;
    padding-top: 10px;
} */

.section-exercise-item .question-index-linear-grid {
    color: var(--stable-blue-400-body-text, #5E7094);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.section-question-answer.question-multiple_choice.distance_choice .row,
.section-question-answer.question-multiple_select.distance_choice .row {
    flex-direction: column;
    margin-left: 0;
    padding: 40px 48px;
    overflow: auto;
    flex-wrap: nowrap;
    width: 100%;
}

.choice-img .section-question-answer.question-multiple_choice.distance_choice .row,
.choice-img .section-question-answer.question-multiple_select.distance_choice .row {
    flex-direction: row;
    max-height: unset;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section-question-answer.question-multiple_choice.distance_choice .row::-webkit-scrollbar,
.section-question-answer.question-multiple_select.distance_choice .row::-webkit-scrollbar {
    width: 14px;
}

.section-question-answer.question-multiple_choice.distance_choice .row::-webkit-scrollbar-thumb,
.section-question-answer.question-multiple_select.distance_choice .row::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #E0E0E0;
}

.section-question-answer.question-linear_grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.section-question-answer.question-linear_grid .description {
    padding: 0;
    color: var(--secondary-300-info, #7AB8F9);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.section-question-answer.question-linear_grid .col {
    border: none;
    margin: 0;
    cursor: default;
    justify-content: center;
}

.section-question-answer.question-linear_grid input {
    cursor: pointer;
}

.answer-message {
    color: var(--secondary-300-info, #7AB8F9);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.col.s12 {
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 12px;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
}

.choice-img .col.s12 {
    height: unset;
    width: 49%;
    flex: 0 0 auto;
}

.question-multiple_choice .col.s12,
.question-multiple_select .col.s12 {
    background-color: #fff;
}

.col.s12 p {
    margin: 0;
    display: flex;
    align-items: center;
}

.col.s12 p label {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
    color: #212E4B;
    margin-left: 8px;
}

.col.s12 input[type="radio"] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    position: absolute;
}

.col.s12 p input[type="radio"]:checked {
    background-color: #71E8C4;
    border: 1.5px solid #71E8C4;
}

.col.s12.active {
    background-color: #DEFAF2;
    border: 1px solid #71E8C4;
}

.section-exercise-item.dark .col.s12.active {
    border: 1px solid #FFFFFF;
}

.col.s12 .radio-box {
    border: 0;
    box-sizing: unset;
    border-radius: 0;
    /* background-color: white; */
    margin-top: 0;
}

.form-check-label {
    /* margin-bottom: 20px; */
}

.col.s12 .radio {
    padding-left: 0;
}

.col.s12 .form-check.radio.radio-blue.radio-sm.radio-box {
    display: flex;
    color: #212E4B;
    align-items: center;
    margin-bottom: 0;
}

.section-exercise-item.dark .col.s12 .form-check.radio.radio-blue.radio-sm.radio-box {
    background-color: #1e1e1e;
}

.col.s12 .radio.radio-sm label::after {
    width: 16px;
    height: 16px;
    /* padding-left: 4px; */
    font-size: 20px;
    left: 2px;
    top: 3px;
}

.col.s12 .radio.radio-sm label::before {
    width: 24px;
    height: 24px;
    top: -1px;
    left: -3px;
}

.col.s12 .radio.radio-sm label {
    display: flex;
    align-items: center;
}

.col.s12 .radio-blue input[type="radio"]+label::after {
    background-color: #71E8C4;
}

.section-exercise-item.dark .col.s12 .radio-blue input[type="radio"]+label::after {
    background-color: #1e1e1e;
}

button.jpc-primary-btn.btn-new-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
    width: 160px;
}

input[type='checkbox'] {
    accent-color: #71E8C4;
    color: #ffffff !important;
}

.col.s12 .radio label::before {
    border: 1px solid #BDBDBD
}

.radio-border {
    border: 1px solid #BDBDBD;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    position: relative;
}

.radio-border .radio-dot {
    background-color: transparent;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
    border-radius: 100%;
}

.col.s12.active .radio .radio-border {
    border: 1px solid #71E8C4;
    background: white;
}

.col.s12.active .radio .radio-border .radio-dot {
    background-color: #71E8C4;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
    border-radius: 100%;
}

.section-question-answer [type="radio"]:checked+.radio-border {
    border: 1px solid #71E8C4;
    background: white;
}

.section-question-answer [type="radio"]:checked+.radio-border .radio-dot {
    background-color: #71E8C4;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
    border-radius: 100%;
}

.col.s12.active .radio label::before {
    border: 1px solid #71E8C4;
}

.col.s12.active .radio.checkbox-border label::before {
    border-color: transparent;
}

.next-question-align {
    justify-content: center;
    display: flex;
    align-items: center;
    border-top: 1px solid #EEEEEE;
    padding: 16px 0;
    position: fixed;
    bottom: 0;
    background: white;
    left: 0;
}

#question-number.progress {
    width: 52.986vw;
    ;
    display: flex;
    height: 8px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #DEFAF2;
    border-radius: 8px;
    margin-right: 8px;
}

#question-number .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #00DBB6;
    transition: width .6s ease;
    border-radius: 8px;
}

.progress-text {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #070417;
    margin-right: 32px;
}

.btn_next_question,
.btn_next_question_linear_grid {
    width: 160px;
    height: 48px;
    background: #00DBB6 !important;
    /* box-shadow: 0px 6px 20px #ADF0DC; */
    border-radius: 16px;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B !important;
    border: #00DBB6 solid 1px !important;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 8px;
}

button.btn_next_question:disabled,
button.btn_next_question[disabled],
button.btn_next_question_linear_grid:disabled,
button.btn_next_question_linear_grid[disabled] {
    background-color: #E0E0E0 !important;
    color: #BDBDBD !important;
    box-shadow: none;
    border: unset !important;
}

.resize-question-title {
    height: 100%;
    overflow-y: auto;
    width: 442px;
    min-width: 442px;
    overflow-x: hidden;
    user-select: none;
    border-right: 1px solid #E8EAF0;
    background: #FAFAFA;
}

.allow_copy {
    user-select: text;
}

.ck-powered-by-balloon {
    display: none !important;
}

.section-question-answer.question-gdocs.distance_choice,
.section-question-answer.question-gsheet.distance_choice,
.section-question-answer.question-gslide.distance_choice,
.section-question-answer.question-coding.distance_choice,
.section-question-answer.question-sql.distance_choice,
.section-question-answer.question-frontend.distance_choice {
    width: 100%;
    /* height: 100%; */
}

.section-question-answer.question-gdocs.distance_choice iframe,
.section-question-answer.question-gsheet.distance_choice iframe,
.section-question-answer.question-gslide.distance_choice iframe,
.section-question-answer.question-coding.distance_choice iframe,
.section-question-answer.question-sql.distance_choice iframe,
.section-question-answer.question-frontend.distance_choice iframe {
    height: 100%;
    padding: 0;
}

.resize-question-title::-webkit-scrollbar {
    width: 14px;
}

.resize-question-title::-webkit-scrollbar-thumb {
    background: #C3CBD9;
    border-radius: 16px;
    background-clip: padding-box;
}

.col.s12 .form-check.radio label img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: 240px;
    max-height: 240px;
    margin-left: 32px;
}

.section-exercise-title-jobpasscrd img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
}

.resize-question-title img {
    height: auto;
    max-width: 100%;
}

button.btn_next_question:is(:disabled)>.right-arrow,
button.btn_next_question_linear_grid:is(:disabled)>.right-arrow {
    opacity: 0.25;
}

.right-arrow {
    width: 16px;
    height: 12px;
    margin-left: 8px;
}

.ready-player-1.player {
    width: 427px;
    height: 197px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 15px 45px;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
}

.player {
    width: 100%;
    max-width: 568px;
    display: block;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.ready-player {
    border-radius: 24px;
    border: 1px solid var(--stable-blue-50-stroke, #E8EAF0);
    background: var(--grayscale-white, #FFF);
    padding: 24px;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.play,
.play-rec {
    /* background-image: url('/static/images/new_Jobpasscard/playbutton.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    width: 64px;
    height: 64px; */
    width: 96px;
    height: 96px;
    display: flex;
    padding: 24px;
    justify-content: center;
    align-items: center;
    border-radius: 76.8px;
    border: 1.6px solid var(--stable-blue-100, #C3CBD9);
    background: var(--grayscale-white, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

.play .material-icons-outlined,
.play-rec .material-icons-outlined {
    color: #9FAABF;
    font-size: 48px;
}

.play:hover,
.play-rec:hover {
    border-radius: 76.8px;
    border: 1.6px solid var(--primary-200, #71E8C4);
    background: var(--primary-50, #DEFAF2);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

.play:hover .material-icons-outlined,
.play-rec:hover .material-icons-outlined {
    color: #71E8C4;
    font-size: 48px;
}

.playpause .pause,
.playpause .pause-rec {
    display: flex;
    width: auto;
    cursor: pointer;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.playpause .pause,
.playpause .pause-rec {
    /* display: none;
    background-image: url('/static/images/new_Jobpasscard/pausebutton.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    width: 64px;
    height: 64px; */
    width: 96px;
    height: 96px;
    display: none;
    padding: 24px;
    justify-content: center;
    align-items: center;
    border-radius: 76.8px;
    border: 1.6px solid var(--stable-blue-100, #C3CBD9);
    background: var(--grayscale-white, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

.playpause .pause .material-icons-outlined,
.playpause .pause-rec .material-icons-outlined {
    color: #9FAABF;
    font-size: 48px;
}

.playpause .pause:hover,
.playpause .pause-rec:hover {
    border-radius: 76.8px;
    border: 1.6px solid var(--primary-200, #71E8C4);
    background: var(--primary-50, #DEFAF2);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

.playpause .pause:hover .material-icons-outlined,
.playpause .pause-rec:hover .material-icons-outlined {
    color: #71E8C4;
    font-size: 48px;
}

.player .scrubber .bar {
    height: 8px;
    width: 242px;
    background: lightgray;
    border-radius: 2px;
    cursor: pointer;
}

.player .scrubber .position-marker {
    background: red;
    border-radius: 50%;
    height: 6px;
    width: 6px;
    position: relative;
    top: 50%;
    transform: translateY(-50%) scale(1.5);
}

.player-duration-group {
    display: flex;
    align-items: center;
    margin-top: 49px;
}

.player .elapsed span,
.player .elapsed-rec span,
.player .elapsed-end span,
.player .elapsed-rec-end span {
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #7AB8F9;
    white-space: nowrap;
}

.ready-player-1 .progress,
.player .progress {
    width: 100%;
    height: 8px;
    background-color: #E8EAF0;
    border-radius: 8px;
    margin: 0 10px;
    cursor: pointer;
    position: relative;
    padding: 2px;
}

.bar,
.bar-rec {
    cursor: pointer;
    border-radius: 8px;
}

.volume-container {
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24px;
}

.player-backward,
.player-backward-rec {
    background-image: url(/static/images/new_Jobpasscard/backward.png);
    background-repeat: no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.player-forward,
.player-forward-rec {
    background-image: url(/static/images/new_Jobpasscard/forward.png);
    background-repeat: no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.player-backward:hover,
.player-backward-rec:hover {
    background-image: url(/static/images/new_Jobpasscard/b-backward.png);
    background-repeat: no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.player-forward:hover,
.player-forward-rec:hover {
    background-image: url(/static/images/new_Jobpasscard/b-forward.png);
    background-repeat: no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.volume-container .volume-button {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    background-image: url('/static/images/new_Jobpasscard/volume.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
}

.volume-container .volume-button .volume {
    transform: scale(0.7);
}

.volume-container .volume-slider {
    z-index: -1;
    width: 64px;
    height: 8px;
    background: #E8EAF0;
    transition: 0.25s;
    border-radius: 8px;
    margin: 0 8px;
    padding: 2px;
}

.volume-container .volume-slider .volume-percentage {
    background: #00DBB6;
    height: 100%;
    width: 75%;
    border-radius: 8px;
}

button#dropdownMenuVolumn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

button#dropdownMenuVolumn:hover,
button#dropdownMenuVolumn.show {
    border-radius: 8px;
    background: var(--stable-blue-50-stroke, #E8EAF0);
}

button#dropdownMenuVolumn:focus,
button#dropdownMenuVolumn:focus-visible {
    outline: 0;
    box-shadow: none;
}

button#dropdownMenuVolumn::after {
    display: none;
}

button#dropdownMenuVolumn+.dropdown-menu.show {
    display: flex;
    min-width: 64px;
    width: fit-content;
    align-items: center;
    justify-content: center;
}

.section-question-answer.question-free_text.distance_choice {
    width: calc(100vw - 514px);
    /* max-width: calc(100vw - 514px); */
    height: 100%;
    max-height: calc(100vh - 109px);
    overflow-y: auto;
    margin-left: 0;
    padding: 40px 48px;
}

.stop-border {
    display: none;
    background: #FFFFFF;
    box-sizing: border-box;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.isStopRecord {
    width: 40px;
    height: 40px;
}

.isStartRecord {
    width: 64px;
    height: 64px;
}

.isStartRecord,
.isStopRecord {

    cursor: pointer;
}

.title-record {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #7A89A6;
    flex-direction: column;
    margin-bottom: 12px;
}

.recording {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #7A89A6;
    flex-direction: column;
    margin-bottom: 12px;
    display: none;
}

.audio-record {
    width: 100%;
    height: auto;
    min-height: 320px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.time-during-record {
    color: var(--secondary-300-info, #7AB8F9);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

#record-minutes,
#record-seconds {
    cursor: pointer;
}

.sound-playback {
    display: none;
    width: 100%;
    height: auto;
    min-height: 320px;
    padding: 24px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    filter: drop-shadow(0px 4px 160px rgba(0, 0, 0, 0.05));
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-color: white;
    gap: 72px;
}

#recordButton {
    width: 96px;
    height: 96px;
    display: flex;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 76.8px;
    border: 1.6px solid var(--stable-blue-100, #C3CBD9);
    background: var(--grayscale-white, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

#recordButton .material-icons-outlined {
    color: #9FAABF;
    font-size: 48px;
}

#recordButton:hover {
    border-radius: 76.8px;
    border: 1.6px solid var(--primary-200, #71E8C4);
    background: var(--primary-50, #DEFAF2);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

#recordButton:hover .material-icons-outlined {
    color: #71E8C4;
    font-size: 48px;
}

#stopButton {
    width: 96px;
    height: 96px;
    display: flex;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 76.8px;
    border: 1.6px solid #EB3C2B;
    background: var(--grayscale-white, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

#stopButton .material-icons-outlined {
    color: #EB3C2B;
    font-size: 48px;
}

#stopButton:hover {
    border-radius: 76.8px;
    border: 1.6px solid #EB3C2B;
    background: #FCEAEC;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}

#stopButton:hover .material-icons-outlined {
    color: #EB3C2B;
    font-size: 48px;
}


.record-saved {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

.re-record {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    cursor: pointer;
}

.record-img {
    margin-right: 8px;
}

.player .play,
.player .play-rec {
    margin: 0 40px;
}

.player .pause,
.player .pause-rec {
    margin: 0 40px;
}

.record-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    cursor: pointer;
    margin-bottom: 16px;
}

.delete-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
    cursor: pointer;
    gap: 8px;
    margin-left: 24px;
    border-radius: 8px;
}

.delete-text:hover {
    border-radius: 8px;
    background: var(--stable-blue-50-stroke, #E8EAF0);
}

#record-minutes,
#record-seconds {
    color: var(--secondary-300-info, #7AB8F9);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.section-question-answer .row textarea {
    height: 416px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 16px;
    margin-top: 0;
    min-height: 416px;
}

.ck-textarea-answer {
    height: 416px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #BDBDBD !important;
    box-sizing: border-box;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-top: 0;
    min-height: 416px;
    /* font-size: 18px; */
}

/* .ck-textarea-answer * {
    font-size: inherit !important;
} */

.ck-textarea-answer b,
.ck-textarea-answer strong {
    font-size: inherit !important;
}

.ck-textarea-answe.ck-focused {
    border: 1px solid #71E8C4 !important;
}

.section-question-answer .row textarea:focus {
    border: 1px solid #71E8C4;
    outline: none !important;
}

.resize-question-title img {
    max-width: 1000px;
}

.swal-wide {
    width: 328px !important;
}

/* lms radio button */

.section-question-answer [type="radio"]:checked+label,
.section-question-answer [type="radio"]:not(:checked)+label {
    position: relative;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    word-break: break-word;
    color: #666;
}

.radio input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

.section-exercise-item.dark .section-question-answer [type="radio"]:checked+label,
.section-exercise-item.dark .section-question-answer [type="radio"]:not(:checked)+label {
    color: #D4D4D4;
}

.section-question-answer [type="radio"]:checked+label:before,
.section-question-answer [type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: -20px;
    border-radius: 50%;
    background-color: white;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}

.section-question-answer [type="radio"]:checked+label:after,
.section-question-answer [type="radio"]:not(:checked)+label:after {
    content: '';
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin-left: -20px;
    border-radius: 50%;
}

.section-question-answer [type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.section-question-answer [type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.section-question-answer [type="checkbox"] {
    display: none;
}

.section-question-answer [type="checkbox"]+label {
    color: #666;
    cursor: pointer;
}

.section-question-answer [type="checkbox"]+label:before {
    content: "";
    display: flex;
    vertical-align: bottom;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #C3CBD9;
    margin-right: 10px;
}

.section-question-answer [type="checkbox"]:checked+label::before {
    background-image: url("/static/images/new_Jobpasscard/checked.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-width: 1px;
    border-color: transparent;
}

.container-fluid.lms {
    width: 100%;
    max-width: 1440px;
}

.section-question-row.iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    align-items: flex-start;
    z-index: 0;
    flex-direction: row;
    justify-content: unset;
}

nav.breadcrumb-chapter-list li.breadcrumb-item {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #7A89A6;
}

nav.breadcrumb-chapter-list li.breadcrumb-item.active {
    color: #59C4AE;
}

nav.breadcrumb-chapter-list .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
}

nav.breadcrumb-chapter-list .breadcrumb-item+.breadcrumb-item::before {
    padding-right: 12px;
}

.chapter-list-jpc {
    width: 352px;
    margin-right: 32px;
}

.chapter-content-jobpasscard.course {
    display: flex;
    /* width: 1440px; */
    max-width: 1440px;
    margin: auto;
    flex-wrap: wrap;
}

div.section_item[data-type="video"] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-text-data .content p {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #415984;
    margin-top: 32px;
    max-width: 100%;
    word-wrap: break-word;
    margin-bottom: 32px;
}

.bc-chapter-list {
    width: 1440px;
    margin: auto;
}

.chapter-content-jobpasscard.course.nav-chapter-hide {
    flex-direction: column;
}

.section-text-data .content p img {
    /* max-width: 736px;
  height: auto; */
    max-width: 100%;
    width: 100%;
    height: auto;
}

.section-text-data .content p img.nav-chapter-hide {
    width: 100%;
    max-width: 100%;
}

.progress.course {
    width: 968px;
    background: #DEFAF2;
    border-radius: 8px;
    height: 8px;
}

.progress-bar.course {
    height: 8px;
    background: #00DBB6;
    border-radius: 8px;
}

.progress-course {
    display: flex;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 76px;
}

.percent-text {
    margin-left: 8px;
    width: 145px;
}

.section-lesson-btn {
    border-top: 1px solid #dfdfdf;
    padding: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1040px;
    position: fixed;
    height: 125px;
    bottom: 0;
    background: white;
}

.player .playpause {
    display: flex;
    width: auto;
    cursor: pointer;
    margin: auto;
    justify-content: center;
    align-items: center;
}

#footer-lms {
    height: auto;
    background: white;
}

button.btn.btn-prve-chapter,
button.btn.btn-backhome {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

button.btn.btn-prve-chapter,
button.btn.btn-backhome {
    width: 224px;
    height: 48px;
    left: 28px;
    top: 12px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
}

button.btn.btn-prve-chapter:hover,
button.btn.btn-backhome:hover {
    border: 1.5px solid #71E8C4;
    color: #71E8C4;
}

button.btn.btn-prve-chapter:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

button.btn.btn-next-chapter {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
}

button.btn.btn-next-chapter {
    width: 224px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
}

button.btn.btn-next-chapter:hover {
    background: #71E8C4;
    box-shadow: 0px 6px 20px #ADF0DC;
}

button.btn.btn-next-chapter:active {
    background: #59C4AE;
    box-shadow: 0px 6px 20px #ADF0DC;
}

img.chapter-prev-arrow {
    margin-right: 8px;
}

img.chapter-next-arrow {
    margin-left: 8px;
}

.section-text-data .content p.nav-chapter-hide {
    max-width: 100%;
}

div.section_item[data-type="video"] iframe.nav-chapter-hide {
    width: 100%;
    height: 80%;
}

#course-navigator .chapter-header-content.course {
    display: none;
}

.section-exercise-title-jobpasscrd.multiple-choice,
.section-exercise-title-jobpasscrd.question-title-wrapper {
    padding: 0;
    color: #5E7094;
    word-break: break-word;
    overflow: auto;
    height: calc(100% - 40px);
    width: 100%;
}

.section-exercise-title-jobpasscrd.multiple-choice * {
    font-size: 16px;
}

.choice-img .section-exercise-title-jobpasscrd.multiple-choice {
    height: unset;
    margin-bottom: 40px;
    width: 100%;
}

.multiple-choice::-webkit-scrollbar {
    width: 14px;
}

.multiple-choice::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #E0E0E0;
}

.section-exercise-item.dark .section-exercise-title-jobpasscrd {
    background-color: transparent;
    color: #5E7094;
}

.section-exercise-title-jobpasscrd {
    padding: 16px;
}

.col.s12.course.active .radio label::before {
    border: 1px solid #212E4B;
}

.col.s12.course .radio-blue input[type="radio"]+label::after {
    background-color: #212E4B;
}

.col.s12.course {
    border: 0;
}

.section-question-row.course {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 0 48px 0;
}

.section-question-row.linear-grid {
    padding-bottom: 0;
    flex-direction: column;
    width: 100%;
    max-width: 1120px;
    margin: auto;
}

.section-question-row.linear-grid hr {
    border: 1px solid #E8EAF0;
    width: 100%;
}

.section-question-row.course .section-exercise-title-jobpasscrd {
    width: 100%;
}

.section-question-row.course .section-question-answer.question-multiple_choice.distance_choice,
.section-question-row.course .section-question-answer.question-multiple_select.distance_choice {
    margin-top: 32px;
}

button.btn_next_question.btn-send-exercise.course.accent-4,
button.btn_next_question_linear_grid.btn-send-exercise.course.accent-4 {
    display: none;
}

button.btn.btn-backhome:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

.certificate-report-header {
    display: flex;
    align-items: center;
    margin-top: 13px;
}

.in-depth-report {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #2B3E64;
}

.report-score {
    width: 163px;
    height: 40px;
    left: 364px;
    top: 635px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    margin-left: 34px;
    padding: 6px;
    padding-left: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

span.report-score-number {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: right;
    width: 68px;
}

img.score-check {
    width: 32px;
    height: 32px;
}

.report-certificate-name {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 48px;
    color: #00DBB6;
}

.core-skills {
    width: 100%;
    height: 280px;
    left: 34px;
    top: 732px;
    background: #E6E6E6;
    border-radius: 17px;
    padding: 17px 34px;
    margin-top: 13px;
    margin-bottom: 16px;
}

.core-skills {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    color: #212E4B;
}

.report-task-tbl {
    width: 100%;
    height: 70px;
    left: 35px;
    top: 1028px;
    background: #00DBB6;
    border-radius: 10px;
    padding: 26px;
    padding-left: 64px;
    padding-right: 105px;
}

.report-task-tbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report-task-tbl .title-1 {
    width: 323px;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 19px;
    color: #FFFFFF;
}

.report-task-tbl .title-2 {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 19px;
    text-align: center;
    color: #FFFFFF;
    width: 119px;
}

.report-task-tbl .title-3 {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 19px;
    text-align: center;
    color: #FFFFFF;
    width: 163px;
}

.report-task-tbl-row {
    border-bottom: 1px solid #EEEEEE;
    width: 100%;
    height: auto;
    margin-top: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
}

img.icon-check {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    box-shadow: 0px 4px 56px rgb(0 0 0 / 5%);
    margin-right: 16px;
}

.task-name {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    width: 323px;
    margin: 0 auto;
}

.task-time {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #00DBB6;
    width: 119px;
    margin: 0 auto;
}

.task-score {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    color: #7A89A6;
    margin: 0 auto;
}

img.icon-action-1,
img.icon-action-3 {
    width: 18px;
    cursor: pointer;
}

img.icon-action-2 {
    width: 29px;
    margin: 0 18px;
    cursor: pointer;
}

.row-tbl-action {
    margin-top: 3px;
}

.task-name li {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #7A89A6;
    width: 323px;
    margin: 0 auto;
}

.skills-required {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #2B3E64;
    margin-top: 14px;
}

div.report-task-tbl-row:last-child {
    border-bottom: 0;
}

.skills-tag {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

.skills-tag {
    width: auto;
    height: 40px;
    left: 0px;
    top: 0px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 6px 13px;
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 22px;
}

.skills-required-group {
    display: flex;
    margin-top: 24px;
    flex-wrap: wrap;
}

.show-score-tbl {
    width: 297px;
    height: 350px;
    top: 100px;
    background: #F9F9F9;
    border-radius: 15px;
    position: absolute;
    margin-top: 787px;
    left: 355px;
    display: none;
}

.report-score:hover+.show-score-tbl {
    display: block;
}

.header-left,
.header-right {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #212E4B;
}

.show-score-tbl-header {
    display: flex;
    justify-content: space-between;
    padding: 9px 40px;
}

.show-score-tbl {
    background-image: url(/static/images/new_Jobpasscard/tbl-score-bg.png);
    background-repeat: no-repeat;
    background-position: 0px 38px;
}

.tbl-score-row {
    display: flex;
    align-items: center;
    padding: 9px;
    padding-left: 40px;
    padding-right: 53px;
    justify-content: space-between;
    height: 40px;
}

.tbl-score-row:last-child {
    display: flex;
    align-items: center;
    padding: 9px;
    padding-left: 40px;
    padding-right: 53px;
    justify-content: space-between;
    height: 30px;
}

.tbl-score-row div {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    align-items: center;
    color: #212E4B;
    width: 55px;
}

.core-skill-hover {
    width: 608px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 4px 160px rgb(0 0 0 / 5%);
    border-radius: 16px;
    position: absolute;
    margin: -65px 145px;
    display: none;
    padding: 30px 24px;
}

.core-skill-hover:before,
.core-skill-hover:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #FFFFFF;
}

.core-skill-hover:before {
    top: -18px;
    left: 50%;
    border-top-color: #FFFFFF;
    border-width: 18px;
}

.core-skill-hover:after {
    top: -18px;
    left: 50%;
    border-top-color: #FFFFFF;
    border-width: 18px;
}

.core-skills:hover+.core-skill-hover {
    display: block;
}

.core-skill-des {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.core-skill-des .progress {
    background: rgba(89, 196, 174, 0.23);
    border-radius: 8.5px;
    width: 100px;
}

.core-skill-des .progress .progress-bar {
    background: #59C4AE;
    border-radius: 8.5px;
}

.core-skill-title {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    align-items: center;
    text-align: right;
    color: #212E4B;
    width: 205px;
}

.core-skill-level {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    align-items: center;
    text-align: right;
    width: 100px;
}

.core-skill-level.excellent {
    color: #27AE60;
}

.core-skill-level.fair {
    color: #F2C94C;
}

.core-skill-level.poor {
    color: #EB5757;
}

.core-skill-score {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #212E4B;
    width: 76px;
    justify-content: flex-end;
}

span.score-excellent {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #27AE60;
}

span.score-fair {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #F2C94C;
}

span.score-poor {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #EB5757;
}

@media (min-width: 576px) {
    .CertificateModal .modal-dialog {
        max-width: 964px;
        margin: 1.75rem auto;
    }
}

.access-code-group {
    height: 120px;
    width: 641px;
    margin-bottom: 32px;
    align-items: center;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 13px 36px;
}

.access-code-title {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 8px;
}

.progress .progress-bar.position-marker.bar,
.progress .progress-bar.position-marker-rec.bar-rec {
    transition: width 0.2s linear;
    background: #00DBB6;
    pointer-events: none;
    /* TODO: change to linear-gradient */
}

.next-question-align.course {
    justify-content: center;
    display: flex;
    align-items: center;
    background: white;
    margin-bottom: 24px;
    border: 0;
    padding: 0 10.5px;
    position: unset;
    bottom: 0;
    left: 0;
}

.section-lesson-btn.nav-chapter-hide {
    width: 1440px;
}

.section-question-answer.question-free_text.distance_choice.course {
    width: 100%;
}

.exercise-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.align-level {
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-btn-group .circle {
    margin-top: 25%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border: 4px solid #00DBB6;
    box-sizing: border-box;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle .exercise-image {
    width: 56px;
    height: 56px;
}

.exercise-action-button {
    width: 163px;
    height: 40px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
}

.exercise-action-button:hover {
    background: #71E8C4;
}

.exercise-action-button:active {
    background: #59C4AE;
}

.progress-line {
    width: 150px;
    height: 0;
    border-top: 4px solid #00DBB6;
    z-index: -1;
}

.dissabled-progress-line {
    width: 118px;
    height: 0;
    border-top: 4px solid #BDBDBD;
    z-index: -1;
}

.progress-line-gradient {
    width: 150px;
    height: 0;
    border-top: 4px solid;
    z-index: -1;
    border-image: linear-gradient(to right, #00DBB6, #BDBDBD) 1 100%;
}

.passed-course-img {
    width: 32px;
    height: 32px;
}

.level-margin {
    margin-right: 50px;
}

.align-level .test-btn {
    position: absolute;
    left: -50%;
}

.align-level .test-btn-group {
    position: relative;
}

.private-menu .dropdown-menu[data-bs-popper]:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 25px solid #EEEEEE;
    position: absolute;
    top: -25px;
    left: 50%;
}

.private-menu .dropdown-menu[data-bs-popper]::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 24px solid white;
    position: absolute;
    top: -24px;
    left: 50.4%;
}

.btn-close-md {
    width: 24px;
    height: 24px;
    right: 0;
    top: 25px;
    display: flex;
    padding: 5px;
    background: #FFFFFF;
    box-shadow: 0px 6px 20px #9e9e9e;
    border-radius: 100px;
    justify-content: flex-end;
    margin: auto;
    margin-right: 0;
    margin-bottom: 20px;
    cursor: pointer;
}

.btn-close-md img {
    cursor: pointer;
}

.private-menu .view-profile-setting {
    text-decoration: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #59C4AE;
}

.private-menu .view-profile-setting:hover {
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    color: #212E4B !important;
}

a.view-profile {
    text-decoration: none;
}

.solution {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
}

.answer {
    display: flex;
    margin-top: 24px;
}

.answer .title {
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    color: #212E4B;
    margin-right: 8px;
}

.answer .answer-title p,
.answer .answer-title {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    background: #212E4B;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 16px;
    padding: 0 16px;
}

.skill-content:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-left: 25px solid #EEEEEE;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 50%;
    right: -24px;
}

.skill-content::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 24px solid white;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 50%;
    right: -23px;
}

.course-recommendation-col:nth-child(4n-3)>.hover-course-group .skill-content:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-right: 25px solid #EEEEEE;
    border-bottom: 16px solid transparent;
    border-left: 0;
    position: absolute;
    top: 50%;
    right: 0;
    left: -25px;
}

.course-recommendation-col:nth-child(4n-3)>.hover-course-group .skill-content::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 24px solid white;
    border-bottom: 15px solid transparent;
    border-left: 0;
    position: absolute;
    top: 50%;
    right: 0;
    left: -24px;
}

.course-recommendation-col:first-child>.hover-course-group {
    position: absolute;
    border-radius: 16px;
    top: -60px;
    right: -625px;
    padding-top: 8px;
    z-index: 99999;
}

.test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .skill-content:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-right: 25px solid #EEEEEE;
    border-bottom: 16px solid transparent;
    border-left: 0;
    position: absolute;
    top: 50%;
    right: 0;
    left: -25px;
}

.test_list_desktop.flower:nth-child(4n-3)>.hover-course-group .skill-content::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 24px solid white;
    border-bottom: 15px solid transparent;
    border-left: 0;
    position: absolute;
    top: 50%;
    right: 0;
    left: -24px;
}

.test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .skill-content:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-left: 25px solid #EEEEEE;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 50%;
    right: -24px;
}

.test_list_desktop.flower:nth-child(4n-2)>.hover-course-group .skill-content::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 24px solid white;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 50%;
    right: -23px;
}

@media screen and (max-width: 500px) {
    .sort-desktop-section .select-label {
        position: relative;
        color: #9E9E9E;
        top: -15.3vw;
        left: 16px;
        transition: 0.2s ease all;
        font-size: 3.734vw !important;
        background: linear-gradient(180deg, #FFFFFF 45%, #FFFFFF 55%);
        padding: 0 1.067vw !important;
    }
}

.resize-question {
    flex: 0 0 auto;
    width: 16px;
    background: url(/static/images/new_Jobpasscard/btn-resize.png) center center no-repeat;
    min-height: 200px;
    cursor: col-resize;
    margin: 0 5px;
    margin-left: -8px;
    margin-right: -8px;
    height: 100%;
    z-index: 1;
}

.resize-question-bg {
    width: 1px;
    height: 100%;
    /* background-color: #E8EAF0; */
    position: relative;
    top: 0;
    left: 7px;
    z-index: -1;
}

a button.view-more {
    color: #59C4AE;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
}

#home-section-4 a,
.view-my-passcard a {
    text-decoration: none;
}

.view-my-passcard a button {
    color: #59C4AE;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
}

.view-my-passcard img.logo-arrow-1 {
    width: 24px;
    margin-left: 8px;
}

[v-cloak] {
    display: none;
}

#content_coming_soon.section-1 {
    padding-top: 133px;
    padding-bottom: 187px;
    height: auto;
    margin: auto;
    background-image: url(/static/images/new_Jobpasscard/comingsoon-bg.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 100% 100%;
}

#content_coming_soon .heading-1 {
    font-style: normal;
    font-weight: bold;
    font-size: 45px;
    line-height: 32px;
    text-align: center;
    color: #71E8C4;
    margin-bottom: 48px;
}

#content_coming_soon .heading-2 {
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #212E4B;
    margin-bottom: 40px;
}

#content_coming_soon .heading-3 {
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    color: #71E8C4;
}

#content_coming_soon button.btn-backhome.comingsoon {
    width: 287px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: white;
}

#content_coming_soon button.btn-backhome.comingsoon:hover {
    border: 1.5px solid #71E8C4;
    color: #71E8C4;
}

#content_coming_soon button.btn-backhome.comingsoon:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

#content_coming_soon a button.btn-backhome.comingsoon {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

#content_coming_soon .mt-34 {
    margin-top: 34px;
}

body.swal2-shown {
    padding-right: 0 !important;
}

.course-level-group {
    display: flex;
    align-items: center;
    height: 170px;
}

.level-next-progress {
    display: flex;
    align-items: center;
}

.no-course-level-text {
    position: absolute;
    width: 50px;
    left: -10%;
    margin-top: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
}

.lock-image-group {
    position: relative;
}

.all-passed-level {
    display: flex;
    margin-bottom: 24px;
}

@media screen and (min-width:320px) and (max-width:500px) {

    #my_passcard_desktop #content-passcard .title1 {
        margin-top: 12.8vw;

        font-style: normal;
        font-weight: 500;
        font-size: 7.467vw;
        line-height: 9.6vw;
        color: #1F2D4E;
        margin-bottom: 6.4vw;
        width: 89.6vw;
    }

    #my_passcard_desktop #content-passcard .title2 {

        font-style: normal;
        font-weight: normal;
        font-size: 5.33vw;
        line-height: 8.53vw;
        margin-bottom: 8.53vw;
        color: #7A89A6;
        width: 89.6vw;
    }

    #my_passcard_desktop #content-passcard .title3 {
        margin-bottom: 6.4vw;
        color: #212E4B;

        font-style: normal;
        font-weight: 500;
        font-size: 4.8vw;
        line-height: 6.4vw;
        width: 89.6vw;
        letter-spacing: 1px;
    }

    #my_passcard .access-code-group {
        display: flex;
        height: auto;
        width: 89.6vw;
        margin-bottom: 8.53vw;
        align-items: center;
        border: 1px solid #E0E0E0;
        box-sizing: border-box;
        border-radius: 16px;
        padding: 3.467vw 9.6vw;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

    #my_passcard #content-no-passcard .access-code-group {
        display: flex;
        height: auto;
        width: 89.6vw;
        margin-bottom: 8.53vw;
        align-items: center;
        border: 1px solid #E0E0E0;
        box-sizing: border-box;
        border-radius: 16px;
        padding: 3.467vw 9.6vw;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-top: 9.6vw;
    }

    #my_passcard .access-code-title {
        font-style: normal;
        font-weight: 500;
        font-size: 6.4vw;
        line-height: 8.53vw;
        color: #212E4B;
        margin-bottom: 2.13vw;
    }

    #my_passcard #email-form.form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #my_passcard .w-input-acess {
        padding: 4.267vw !important;
        font-style: normal;
        font-weight: normal;
        font-size: 4.267vw;
        line-height: 7.2vw;
        color: #9E9E9E;
        outline: none;
    }

    #my_passcard .text-field-access {
        width: 61.36vw;
        height: 12.8vw;
        background: #FFFFFF;
        border: 1px solid #E0E0E0;
        box-sizing: border-box;
        border-radius: 4px;
        margin-right: 0;
    }

    #my_passcard .submit-button-access {
        width: 42.64vw;
        height: 10.66vw;
        left: 92.267vw;
        top: 14.934vw;
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        background: transparent;
        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        text-transform: uppercase;
        color: #59C4AE;
        margin-top: 4.267vw;
    }

    #my_passcard_desktop #content-passcard #passed-all-course-title.title3 {
        margin-top: 14.934vw;
        margin-bottom: 6.4vw;
        color: #212E4B;

        font-style: normal;
        font-weight: 500;
        font-size: 4.8vw;
        line-height: 6.4vw;
        width: 90.67vw;
    }

    #my_passcard_desktop #content-passcard {
        padding-left: 5.33vw;
        padding-right: 5.33vw;
        width: 298.67vw;
        margin: auto;
    }

    #my_passcard .col-mobile-course-group.col-4 {
        width: 41.6666666667%;
    }

    #my_passcard #my_passcard_desktop .course-group-img {
        overflow: hidden;
        border-radius: 20px;
        width: 42.64vw;
        height: 42.64vw;
        position: relative;
    }

    #my_passcard_desktop .btn-view-cert:disabled {
        border: 1.5px solid #BDBDBD;
        box-sizing: border-box;
        border-radius: 16px;
        background: transparent;
        width: 46.4vw;
        height: 10.66vw;
        color: #BDBDBD;
        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        outline: none;
        margin-top: 6.4vw;
    }

    #my_passcard_desktop #content-passcard .passcard_item {
        width: 89.6vw;
        height: auto;
        padding: 6.4vw 4.267vw;
        margin-bottom: 6.4vw;
        position: relative;
    }

    #my_passcard .course-level-group {
        display: flex;
        align-items: center;
        height: auto;
        padding-left: 0;
        margin-top: 4.267vw;
    }

    #my_passcard .level-next-progress {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #my_passcard .circle {
        margin-top: 0;
        border-radius: 50%;
        width: 21.32vw;
        height: 21.32vw;
        background: #FFFFFF;
        border: 4px solid #00DBB6;
        box-sizing: border-box;
        margin-bottom: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #my_passcard .align-level {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #my_passcard .align-level .test-btn {
        position: absolute;
        left: 25.6vw;
        top: 5.33vw;
    }

    #my_passcard .exercise-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }

    #my_passcard .exercise-action-button {
        width: 43.467vw;
        height: 10.66vw;
        background: #00DBB6;
        box-shadow: 0px 6px 20px #adf0dc;
        border-radius: 16px;
        border: none;
        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        text-transform: uppercase;
        color: #212E4B;
    }

    #my_passcard .dissabled-progress-line {
        width: 0;
        height: 13.34vw;
        border-left: 4px solid #BDBDBD;
        z-index: -1;
    }

    #my_passcard .progress-line {
        width: 0;
        height: 13.34vw;
        border-left: 4px solid #00DBB6;
        z-index: -1;
    }

    #my_passcard .level-next-progress {
        display: flex;
        align-items: center;
    }

    #my_passcard .no-course-level-text {
        position: absolute;
        width: 13.34vw;
        left: 10.66vw;
        top: -1.33vw;
        margin-top: 2.13vw;
        font-style: normal;
        font-weight: normal;
        font-size: 3.734vw;
        line-height: 6.4vw;
        color: #5E7094;
    }

    #my_passcard .lock-image-group {
        position: relative;
    }

    #my_passcard .passed_all .col-3 {
        width: 33.3333333333%;
    }

    #my_passcard_desktop .passed_all .passcard_name {
        margin-top: 6.4vw;
        font-style: normal;
        font-weight: normal;
        font-size: 6.4vw;
        line-height: 8.53vw;
        color: #43997F;

        margin-bottom: 1.067vw;
    }

    #my_passcard_desktop .passed_all .expire {
        font-style: normal;
        font-weight: normal;
        font-size: 3.734vw;
        line-height: 6.4vw;

        color: #757575;
        margin-bottom: 2.93vw;
    }

    #my_passcard .all-passed-level {
        display: flex;
        margin-bottom: 6.4vw;
    }

    #my_passcard_desktop .passed_all .level-item {
        background: #00DBB6;
        width: 4.267vw;
        height: 4.267vw;
        border-radius: 50%;
        margin-right: 2.13vw;
        margin-top: 1.067vw;
    }

    #my_passcard_desktop .passed_all .max-level {
        color: #9E9E9E;
        font-style: normal;
        font-weight: 500;
        font-size: 4.267vw;
        line-height: 7.467vw;

        margin-left: 1.067vw;
    }

    #my_passcard_desktop .btn-view-cert {
        border: 1.5px solid #59C4AE;
        box-sizing: border-box;
        border-radius: 16px;
        background: transparent;
        width: 46.4vw;
        height: 10.66vw;
        color: #59C4AE;
        font-style: normal;
        font-weight: 600;
        font-size: 4.267vw;
        line-height: 7.467vw;
        outline: none;
        margin-top: 6.4vw;
    }

    #my_passcard #my_passcard_desktop .course-group-img img {
        width: 42.64vw;
    }

    #my_passcard_desktop .passed_all .line-passcard-all {
        border: 1px solid #EEEEEE;
        width: 89.33vw;
        margin-top: 6.4vw;
        margin-bottom: 6.4vw;
    }
}

#home #level-dropdown.dropdown {
    margin-bottom: 0;
}

#home #level-dropdown.dropdown .dropdown-toggle {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #9E9E9E;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    width: 93px;
    height: 28px;
    padding: 0 8px 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 54px;
}

#home #level-dropdown.dropdown .dropdown-toggle.show {
    border: 1px solid #00DBB6;
}

#home #level-dropdown.dropdown .dropdown-toggle .dropdown-chevron {
    content: url("../images/cart_view/chevron-down-24x24.png");
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

#home #level-dropdown.dropdown .dropdown-toggle.show .dropdown-chevron {
    content: url("../images/cart_view/chevron-up-24x24.png");
}

#home #level-dropdown .dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 93px;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
}

#home #level-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    align-items: center;
    display: flex;
    height: 40px;
}

#home #level-dropdown .dropdown-item:focus,
#home #level-dropdown .dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef;
    height: 40px;
}

#home #level-dropdown .dropdown-menu.show {
    display: block;
}

#home #level-dropdown .jpc-icon-img {
    width: 24px;
    height: 24px;
    margin-left: 9px;
}

#home #level-dropdown .selected-level {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    width: 93px;
    height: 28px;
}

#home .to-passcard-view img.logo-arrow-1 {
    width: 24px;
    margin-left: 8px;
}

.dropdown-level-group {
    margin-top: 24px;
    margin-left: 18px;
    display: flex;
    align-items: center;
    align-content: center;
    padding: 0;
}

#home #for_mobile #level-dropdown.dropdown .dropdown-toggle {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 28px;
    color: #9E9E9E;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    width: 93px;
    height: 28px;
    padding: 0 8px 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 0;
}

/*privacy-content*/
#privacy-content {
    min-height: 624px;
    background-image: url(/static/images/new_Jobpasscard/privacy_bg.png);
    outline: none;
    background-size: 636.85px, 624px;
    background-repeat: no-repeat;
    background-position-x: right;
}

#privacy-content #main-content {
    width: 372px;
    height: 336px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 202px;
}

#privacy-content img {
    width: 56px;
    height: 64px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 16px;
}

#privacy-content #text {
    width: 324px;
    height: 104px;
    padding: 24px 16px;
    margin-left: auto;
    margin-right: auto;
}

#privacy-content #text div {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #000000;
    text-align: center;
}

#privacy-content button {
    width: 155px;
    height: 48px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #ADF0DC;
    border-radius: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
    outline: none;
    border: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#privacy-content button a {
    text-decoration: none;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #212E4B;
}

.level-content .report-score {
    margin-left: 0;
    cursor: auto;
}

.report-task-tbl-row .collapse {
    margin-top: 50px;
}

.report-task-tbl-row .collapse .show-video {
    background: white;
    width: 100%;
    height: auto;
    border-radius: 14px;
    padding-bottom: 0;
}

.collapse .show-video .title {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 19px;
    align-items: center;
    text-align: center;
    color: #212E4B;
    background: #F2F2F2;
    padding: 12px;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapse .show-video iframe {
    width: 100%;
    height: 411px;
    border-radius: 0 0 14px 14px;
}

.collapse .show-video video {
    width: 100%;
    height: 411px;
    border-radius: 0 0 14px 14px;
}


img.icon-des {
    margin: 0 16px;
}

.chapter-row.nav-chapter-hide {
    flex-direction: column;
}

div#detail-not-access {
    max-width: 1440px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: max-content;
    border-radius: 3px;
    text-align: center;
}

#detail-not-access .message {
    color: #061f44;
    font-size: 40px;
    font-weight: 600;
    text-decoration: none;
}

#detail-not-access .message a {
    color: #71E8C4;
    font-size: 16px;
    font-weight: 500;
}

#detail-not-access button.btn-click {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-transform: uppercase;
    color: #59C4AE;
}

#detail-not-access button.btn-click {
    width: 287px;
    height: 48px;
    border: 1.5px solid #59C4AE;
    box-sizing: border-box;
    border-radius: 16px;
    background: white;
    margin-top: 34px;
}

#detail-not-access button.btn-click:active {
    background: #DEFAF2;
    border: 1.5px solid #59C4AE;
    color: #59C4AE;
}

#detail-not-access button.btn-click:hover {
    border: 1.5px solid #71E8C4;
    color: #71E8C4;
}

#detail-not-access .heading-1 {
    font-style: normal;
    font-weight: bold;
    font-size: 45px;
    line-height: 32px;
    text-align: center;
    color: #71E8C4;
    margin-bottom: 48px;
}

#detail-not-access .heading-2 {
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #212E4B;
    margin-bottom: 40px;
}

#detail-not-access .heading-3 {
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    color: #71E8C4;
}

#finish-test-rating {
    display: flex;
    align-items: center;
    height: calc(100vh - 76px);
}

#finish-test-rating .container-fluid {
    width: 1120px;
}

#finish-test-rating,
#finish-test-static {
    background: #F5F5F5;
}

#finish-test-static {
    padding-bottom: 4rem;
}

#finish-test-static .section-1 {
    width: 1120px;
    height: calc(100vh - 76px);
    display: flex;
    align-items: center;
}

#finish-test-static .section-2 {
    width: 1120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px;
    gap: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 4%), 4px 2px 8px rgb(0 0 0 / 6%);
    border-radius: 16px;
}

#finish-test-rating .message .header,
#finish-test-static .message .header {
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    color: #212E4B;
    margin-bottom: 2rem;
}

#finish-test-rating .message .sub-message,
#finish-test-static .message .sub-message {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #212E4B;
    margin-bottom: 32px;
}

#finish-test-rating .rating_box {
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    margin-bottom: 32px;
}

#finish-test-rating .rating_box .title {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 16px;
}

#finish-test-rating .rating_box .star-rating {
    display: flex;
    flex-direction: row-reverse;
    width: auto;
    gap: 8px;
    justify-content: flex-end;
}

#finish-test-rating .rating_box .star-rating input {
    display: none;
}

#finish-test-rating .rating_box .star-rating label {
    color: #ccc;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-image: url(/static/images/star.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
}

#finish-test-rating .rating_box .star-rating :checked~label {
    width: 32px;
    height: 32px;
    background-image: url(/static/images/star-select.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
}

#finish-test-rating .rating_box .star-rating label:hover,
#finish-test-rating .rating_box .star-rating label:hover~label {
    width: 32px;
    height: 32px;
    background-image: url(/static/images/star-select.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
}

#finish-test-rating .rating_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#finish-test-rating .rating-message {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #4B8DF1;
}

#finish-test-rating .contact_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#finish-test-rating .contact_info span,
#finish-test-static .contact_info span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #5E7094;
}

#finish-test-rating .modal-content {
    border-radius: 16px;
    border: 0;
}

#finish-test-rating .modal-dialog {
    max-width: max-content;
    margin: 1.75rem auto;
}

#finish-test-rating .modal-body {
    padding: 24px 32px;
}

#finish-test-rating .modal-body .header {
    margin-bottom: 16px;
}

#finish-test-rating .modal-body .title {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
}

#finish-test-rating .modal-body .sub-title {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #5E7094;
}


#finish-test-rating label.modal_checkbox {
    position: relative;
}

#finish-test-rating label.modal_checkbox>input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

#finish-test-rating label.modal_checkbox>input[type="checkbox"]+.checkbox_custom::before {
    content: "";
    display: flex;
    vertical-align: bottom;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #d9d9d9;
}

#finish-test-rating label.modal_checkbox>input[type="checkbox"]:checked+.checkbox_custom::before {
    background-image: url("/static/images/new_Jobpasscard/checked.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-width: 1px;
    border-color: transparent;
}

#finish-test-rating label.modal_checkbox .checkbox_custom {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

#finish-test-rating .modal_checkbox_group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

#finish-test-rating .comment_title {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #212E4B;
    margin-bottom: 8px;
}

#ratingComplete .modal-content {
    border-radius: 16px;
    border: 0;
    padding: 24px;
    text-align: center;
}

#finish-test-rating .comment_rating {
    width: 100%;
    height: 152px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 0;
    margin-bottom: 16px;
    padding: 16px;
    resize: none;
}

#finish-test-rating .comment_rating:focus-visible {
    outline: 0;
    padding: 16px;
}

#finish-test-rating button.send_rating {
    border: 0;
    padding: 16px 24px;
    width: 155px;
    height: 40px;
    background: #00DBB6;
    box-shadow: 0px 6px 20px #adf0dc;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#finish-test-rating button.send_rating:hover {
    background: #71E8C4;
}

#finish-test-rating button.send_rating:active {
    background: #59C4AE;
}

#finish-test-rating .footer_modal {
    display: flex;
    justify-content: flex-end;
}

#finish-test-static .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 1.5px solid #212E4B;
    border-radius: 30px;
    opacity: .8;
    transition: opacity .6s ease;
}

#finish-test-static .carousel-indicators .active {
    background: #212E4B;
    opacity: 0.8;
    border: 1.5px solid #212E4B;
    width: 8px;
    height: 8px;
    border-radius: 30px;
}

#finish-test-static .carousel-control-prev-icon {
    background-image: url("/static/images/Arrow_Left.svg");
}

#finish-test-static .carousel-control-next-icon {
    background-image: url("/static/images/Arrow_Right.svg");
}

#finish-test-static .carousel-control-next,
#finish-test-static .carousel-control-prev {
    opacity: 1;
    width: 5%;
}

#finish-test-static .perk-benefit-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

#finish-test-static .perk-benefit-group .header {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    color: #212E4B;
}

#finish-test-static .perk-benefit-item {
    display: grid;
    align-items: start;
    align-content: center;
    gap: 32px 0;
    grid-template-columns: repeat(4, 25%);
}

#finish-test-static .perk-benefit-item .item-title {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
    height: 96px;
}

#finish-test-static .perk-benefit-item .item-detail {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #202124;
    width: 90%;
}

#finish-test-static .perk-benefit-item .item-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

#finish-test-static .perk-benefit-item .item-img {
    width: 96px;
    height: 96px;
}

#finish-test-static .our-team-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#finish-test-static .our-team-group .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 50px;
}

#finish-test-static .our-team-group .header span:nth-child(1) {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #00DBB6;
}

#finish-test-static .our-team-group .header span:nth-child(2) {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #212E4B;
}

#team_silde {
    padding: 0 24px;
}

#team_silde .carousel-control-prev,
#team_silde .carousel-control-next {
    width: 72px;
    height: 72px;
    top: 50%;
    transform: translateY(-50%)
}

#team_silde .carousel-control-prev {
    left: -50px;
}

#team_silde .carousel-control-next {
    right: -50px;
}

#team_silde .carousel-item {
    margin-right: 20px;
    flex: 0 0 220px;
    display: block;
    transition: all 600ms;
}

.silde-hide {
    margin-right: 0 !important;
    opacity: 0;
}

#team_silde .carousel-inner {
    display: flex;
    padding-bottom: 10px;
}

#team_silde .carousel-control-prev-icon {
    background-image: url("/static/images/team-arrow-left.svg");
    background-size: 72px 72px;
    width: 72px;
    height: 72px;
}

#team_silde .carousel-control-next-icon {
    background-image: url("/static/images/team-arrow-right.svg");
    background-size: 72px 72px;
    width: 72px;
    height: 72px;
}

#finish-test-static .team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 2%), 2px 2px 4px rgb(0 0 0 / 8%);
    border-radius: 16px;
}

#finish-test-static img.image-wrapper {
    max-width: 100%;
    max-height: 100%;
}

#finish-test-static span.team-message {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #5E7094;
    margin-top: 10px;
    height: 150px;
}

#finish-test-static hr.team-line {
    width: 100%;
    color: #C3CBD9;
    margin-top: 56px;
    margin-bottom: 8px;
}

#finish-test-static .team-info {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#finish-test-static .team-info .name {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #5E7094;
}

#finish-test-static .team-info .position {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #212E4B;
}

#finish-test-static button.btn-back {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 32px;
    gap: 16px;
    width: 307px;
    height: 40px;
    background: #212E4B;
    border-radius: 100px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #00DBB6;
    border: 0;
}

#finish-test-static .static-footer {
    margin: auto;
    margin-top: 64px;
}

@media screen and (max-width: 500px) {

    #finish-test-rating,
    #finish-test-static {
        display: block;
        height: 100vh;
        overflow-x: hidden;
    }

    #finish-test-rating .container-fluid,
    #finish-test-static .container-fluid {
        width: 100vw;
        padding-top: 7rem;
    }

    #finish-test-rating .test-end-image,
    #finish-test-static .test-end-image {
        width: 100%;
    }

    #finish-test-rating .message .header,
    #finish-test-static .message .header {
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 34px;
        color: #212E4B;
        margin-bottom: 1rem;
    }

    #finish-test-rating .message .sub-message,
    #finish-test-static .message .sub-message {
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #212E4B;
        margin-bottom: 32px;
    }

    #finish-test-rating .modal-dialog {
        max-width: 95vw;
        margin: 1.75rem auto;
    }

    #finish-test-rating .modal_checkbox_group {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
        flex-direction: column;
    }

    #team_silde {
        padding: 0px 40px;
    }

    #finish-test-static .section-1 {
        display: block;
        height: 100vh;
    }

    #finish-test-static .section-2 {
        width: 90vw;
        padding: 24px;
    }

    #finish-test-static img.logo-looloo {
        width: 60%;
    }

    #finish-test-static .perk-benefit-group .header {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        color: #212E4B;
    }

    #finish-test-static .perk-benefit-item {
        display: grid;
        align-items: start;
        align-content: center;
        gap: 32px 0;
        grid-template-columns: repeat(2, 50%);
    }

    #finish-test-static .perk-benefit-item .item-title {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 18px;
        color: #212E4B;
        height: 50px;
    }

    #finish-test-static .our-team-group .header {
        padding-left: 0;
    }

    #finish-test-static .our-team-group .header span:nth-child(1) {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: #00DBB6;
    }

    #finish-test-static .our-team-group .header span:nth-child(2) {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: #212E4B;
    }

    #finish-test-static button.btn-back {
        width: 100%;
    }

    #team_silde .carousel-control-next-icon {
        background-image: url(/static/images/team-arrow-right.svg);
        background-size: 42px 42px;
        width: 42px;
        height: 42px;
    }

    #team_silde .carousel-control-prev-icon {
        background-image: url(/static/images/team-arrow-left.svg);
        background-size: 42px 42px;
        width: 42px;
        height: 42px;
    }

    #team_silde .carousel-control-next {
        right: -25px;
    }

    #team_silde .carousel-control-prev {
        left: -25px;
    }

    #finish-test-static .perk-benefit-item .item-img {
        width: 64px;
        height: 64px;
    }
}

@media screen and (min-width: 360px) and (max-width: 375px) {

    #finish-test-rating .container-fluid,
    #finish-test-static .container-fluid {
        width: 100vw;
        padding-top: 5rem;
    }

    #finish-test-static .section-1 {
        display: block;
        height: 120vh;
    }

    #finish-test-static .section-2 {
        width: 90vw;
    }

    #finish-test-static button.btn-back span {
        font-size: 12px;
    }

    #team_silde {
        padding: 0px 26px;
    }

    #team_silde .carousel-control-next {
        right: -32px;
    }

    #team_silde .carousel-control-prev {
        left: -32px;
    }
}

#skill-report .modal-body {
    display: flex;
    gap: 32px;
    padding: 64px;
    padding-bottom: 42px;
    flex-direction: column;
}

#skill-report .modal-content {
    border-radius: 16px;
    border: 0;
}

#skill-report .modal-dialog {
    max-width: 1228px;
    margin: 1.75rem auto;
}

#skill-report .report-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#skill-report .report-title {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #2B3E64;
}

#skill-report .report-name {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #5E7094;
}

#skill-report .user-skill-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 32px;
    gap: 64px;
    justify-content: center;
}

#skill-report img.report-user-image {
    width: 230px;
    height: 166px;
    border-radius: 16px;
}

#skill-report .center-content {
    max-width: 386px;
    width: 100%;
}

#skill-report .user-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#skill-report .user-detail .score {
    display: flex;
    flex-direction: column;
}

#skill-report .user-detail .report-user-name {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #00DBB6;
}

#skill-report .user-detail .report-score-title {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #212E4B;
}

#skill-report .user-detail .score-value {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #00DBB6;
}

#skill-report .user-performance .title {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #000000;
}

#skill-report .user-performance {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#skill-report .performance-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#skill-report .performance-item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;

}


#skill-report .performance-item-name {
    width: 100%;
}

#skill-report .performance-item-name {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #212E4B;
}

#skill-report .performance-item-score {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #5E7094;
}

#skill-report hr {
    color: #c0c0c0;
    margin: 0;
}

#skill-report .right-content {
    position: relative;
    max-width: 288px;
    width: 100%;
    display: flex;
    justify-content: center;
}

#skill-report .chart-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
}

#skill-report .implementation-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

#skill-report .problem-understanding-icon {
    position: absolute;
    top: 40%;
    right: -25px;
    transform: translateY(-40%);
}

#skill-report .problem-solving-icon {
    position: absolute;
    bottom: -20px;
    right: 20px;
    transform: translateY(-20%);
}

#skill-report .code-icon {
    position: absolute;
    bottom: -20px;
    left: 20px;
    transform: translateY(-20%);
}

#skill-report .speed-icon {
    position: absolute;
    top: 40%;
    left: -25px;
    transform: translateY(-40%);
}

#skill-report .tested-skills {
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #2B3E64;
}

#skill-report .score-question-number {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #7A89A6;
    margin-bottom: 16px;
}

#skill-report .question-time-group,
#skill-report .question-total-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#skill-report .question-time-group .title {
    display: flex;
    align-items: center;
    gap: 8px;
}

#skill-report .question-total-group .title {
    padding-left: 32px;
}

#skill-report .question-time-group .title .text,
#skill-report .question-total-group .title .text {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #212E4B;
    text-transform: none;
}

#skill-report .question-time-group .time,
#skill-report .question-total-group .total-score {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    text-transform: uppercase;
    color: #00DBB6;
}

#skill-report .content-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#skill-report .btn_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#skill-report .btn_toggle .title .text {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #212E4B;
    text-transform: none;
}

#skill-report .btn_toggle .title {
    display: flex;
    align-items: center;
    gap: 16px;
}

#skill-report .btn_toggle .score {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #5E7094;
}

#skill-report .qusetion_toggle_list {
    display: flex;
    flex-direction: column;
}

#skill-report .qusetion_toggle_list.toggle {
    gap: 8px;
}

#skill-report .qusetion_toggle_list ul {
    padding-left: 3.5rem;
    opacity: 0;
    height: 0;
    margin: 0;
    visibility: hidden;
}

#skill-report .qusetion_toggle_list.toggle ul {
    opacity: 1;
    height: auto;
    visibility: visible;
    transition: all 0.3s linear;
}

#skill-report .qusetion_toggle_list li {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #7A89A6;
}

#skill-report .tooltip {
    position: relative;
    display: inline-block;
}

#skill-report .tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    opacity: 0.8;
    color: #F5F5F5;
    text-align: left;
    vertical-align: middle;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: pre;
    position: absolute;
    z-index: 1;
    top: -140%;
    left: 110%;
}

#skill-report .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 55%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

#skill-report .tooltip:hover .tooltiptext {
    visibility: visible;
}

#skill-report .qusetion_toggle_list li .true-point {
    color: #00DBB6;
}

#skill-report .qusetion_toggle_list li .wrong-point {
    color: #E16D67;
}

#skill-report .qusetion_toggle_list.toggle .icon {
    transform: rotateX(180deg);
}

#skill-report .qusetion-detail {
    background: #F5F5F5;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 725px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #5E7094;
}

#skill-report .qusetion-detail li,
#skill-report .qusetion-detail p {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #5E7094;
}

#skill-report .qusetion-score {
    width: 100%;
    height: max-content;
    max-width: 311px;
}

#skill-report .score-question-list {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

#skill-report .qusetion-detail .question,
#skill-report .qusetion-detail .anwser {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}

#skill-report .report-footer {
    display: flex;
    justify-content: center;
}

#skill-report button.report-close {
    border: 0;
    padding: 0 8px;
    width: 104px;
    height: 24px;
    background: #00DBB6;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#skill-report button.report-close:hover {
    background: #71E8C4;
}

#skill-report button.report-close:active {
    background: #59C4AE;
}

#skill-report .skill-info-icon {
    cursor: pointer;
}

.no_menu_job .language-name {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
}

.no_menu_job .flag-img-menu {
    width: 22px;
    height: 13px;
    margin-right: 8px;
}

.no_menu_job .change_language button.btn.dropdown-toggle {
    width: 100px;
    background-color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
}

.no_menu_job .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 89px;
}

.no_menu_job .dropdown-menu.show {
    padding: 0;
    box-shadow: 0px 6px 20px #c0c0c0;
    border-radius: 8px;
    border: 0;
}

.no_menu_job .dropdown-item.active,
.dropdown-item:active {
    color: #212E4B;
    text-decoration: none;
    background-color: white;
}

.no_menu_job .dropdown-toggle::after {
    content: '';
    border: 0;
    background-image: url('/static/images/chevron-down.svg');
    background-repeat: no-repeat;
    width: 16px;
    height: 6px;
}

.no_menu_job .bootstrap-select .bs-ok-default:after {
    content: '';
    border: 0;
    background-image: url(/static/images/check.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    transform: translateY(30%);
}

.no_menu_job .btn-check:focus+.btn-light,
.no_menu_job .btn-light:focus {
    box-shadow: none;
}

.no_menu_job .bootstrap-select .dropdown-toggle:focus,
.no_menu_job .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
    outline-offset: 0 !important;
}

.header-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

#secondary-navbar .top_nav.active button {
    color: #212E4B;
}

#secondary-navbar .top_nav.active {
    border-bottom: 4px solid #00DBB6;
}

#jop_qrcode {
    height: 100vh;
    overflow: hidden;
}

#reader {
    width: 100%;
    /* height: calc(100% - 96px); */
    height: 100%;
    border: 0 !important;
}

#reader__scan_region {
    height: 100%;
}

#jop_qrcode video {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

#qr-shaded-region div {
    background-color: #00DBB6 !important;
}

#reader__header_message,
#reader__scan_region img {
    display: none !important;
}

button#html5-qrcode-button-camera-permission,
button#html5-qrcode-button-camera-stop,
#reader__dashboard_section {
    visibility: hidden;
    position: absolute;
}

#jop_qrcode .footer {
    width: 100%;
    height: 96px;
    padding: 36px 48px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 4%), 4px -4px 8px rgb(0 0 0 / 6%);
}

#jop_qrcode input[type="file"] {
    visibility: hidden;
    position: absolute;
}

.result {
    background-color: green;
    color: #fff;
    padding: 20px;
}

#reader__scan_region {
    background: white;
}

#jop_qrcode img[alt="Info icon"] {
    display: none !important;
}

#jop_qrcode .message {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #212E4B;
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 20%;
}

.qr-group {
    height: 100vh;
}

.qrcode-stream-overlay {
    max-width: 212px;
    max-height: 212px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.qr-track:nth-child(1) {
    position: absolute;
    width: 40px;
    height: 5px;
    top: -5px;
    left: 0px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(2) {
    position: absolute;
    width: 40px;
    height: 5px;
    top: -5px;
    right: 0px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(3) {
    position: absolute;
    width: 40px;
    height: 5px;
    bottom: -5px;
    left: 0px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(4) {
    position: absolute;
    width: 40px;
    height: 5px;
    bottom: -5px;
    right: 0px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(5) {
    position: absolute;
    width: 5px;
    height: 45px;
    top: -5px;
    left: -5px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(6) {
    position: absolute;
    width: 5px;
    height: 45px;
    bottom: -5px;
    left: -5px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(7) {
    position: absolute;
    width: 5px;
    height: 45px;
    top: -5px;
    right: -5px;
    background-color: #00DBB6 !important;
}

.qr-track:nth-child(8) {
    position: absolute;
    width: 5px;
    height: 45px;
    bottom: -5px;
    right: -5px;
    background-color: #00DBB6 !important;
}

.note-important {
    font-style: normal;
    font-weight: 400;
    font-size: 3.077vw;
    line-height: 24px;
    color: #EB3C2B;
    padding-bottom: 32px;
    white-space: nowrap;
}

#menu_jpc #burger-icon {
    width: 20px;
    height: 16px;
    position: absolute;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
    left: 24px;
}

#burger-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 20px;
    background: #5E7094 !important;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#burger-icon span:nth-child(1) {
    top: 0px;
    transform-origin: left center;
}

#burger-icon span:nth-child(2) {
    top: 6px;
    transform-origin: left center;
}

#burger-icon span:nth-child(3) {
    top: 12px;
    transform-origin: left center;
}

#burger-icon.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 1px;
    left: 8px;
}

#burger-icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#burger-icon.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 15px;
    left: 8px;
}

.hamburger_toggle {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #content_error_404.section-52 {
        height: 100vh;
        align-items: center;
        padding: 0 16px;
        padding-bottom: 32px;
    }

    #content_error_404 .group {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #content_error_404 .lb-main {
        font-size: 70px;
    }

    #content_error_404 .lb-sub {
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        color: #5E7094;
        text-align: center;
        word-break: break-word;
    }

    #content_error_404 .lb-sub br {
        display: none;
    }
}



@media (max-width: 1368px) and (max-height: 768px) {
    div[style="margin-bottom: 64px;"] {
        margin-bottom: 24px !important;
    }

    .ck-textarea-answer {
        height: 200px;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #BDBDBD !important;
        box-sizing: border-box;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-top: 0;
        min-height: calc(100vh - 275px);
        font-size: 18px;
    }

    .course-landing-wrapper {
        height: auto !important;
        margin: 0 !important;
        padding: 24px;
        overflow-y: unset !important;
    }
}

@media (max-width: 1024px) and (max-height: 768px) {
    .resize-question-title {
        height: 100%;
        overflow-y: auto;
        width: 350px;
        min-width: 350px;
        overflow-x: hidden;
        user-select: none;
        border-right: 1px solid #E8EAF0;
        background: #FAFAFA;
    }

    .section-question-answer.question-free_text.distance_choice {
        width: 100%;
        max-width: 100%;
    }
}

#list-question-scrollbar .simplebar-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.simplebar-scrollbar:before {
    background: #5e7094 !important;
}