/* GENERAL
================================================== */

body{
    overflow-x : hidden;
    font-family: roboto;
}

a:hover{
    text-decoration: unset !important;
}

a:focus{
    text-decoration: unset !important;
}

a:active{
    text-decoration: unset !important;
}

/* Landing Page */

#landingpage1{
    background-image: url('../../images/introduction-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

#landingpage1 .desktop .container{
    text-align: center;
    padding-top: 120px;
    height: 500px;
}

#landingpage1 .desktop h1{
    font-size: 50px;
    font-weight: bold;
    font-family: muli;
    color: #fff;
    text-align: center;
    padding: 0px 265px;
    margin-bottom: 20px;
}

#landingpage1 .desktop h4{
    font-size: 20px;
    font-weight: normal;
    font-family: muli;
    display : block; 
    color: #fff;
    padding: 0px 374px;
    text-align: center;
}

#landingpage1 .desktop button{
    margin-top: 18px;
    background-color: #FFF75A;
    color : #00528D;
    font-size: 20px;
    font-family: muli;
    font-weight: bold;
    padding : 5px 34px;
    border-radius: 20px;
}

#landingpage1 .desktop button:hover{
    background-color: #fff;
    color : #00528D;
}

#landingpage2{
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
    margin-top: 80px;;
}

#landingpage2 h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000;
}

#landingpage2 .content-panel-1{
    text-align: center;
    padding: 0px 80px;
}

#landingpage2 .content-panel-2{
    text-align: center;
    padding: 0px 70px;
}

#landingpage2 h3{
    font-size: 20px;
    font-weight: bold;
    color: #00528D;
    font-family: muli;
}

#landingpage2 h5{
    font-size: 16px;
    font-weight: normal;
    color: #000;
    font-family: muli;
}

#landingpage2 img{
    margin-bottom: 20px;
}

#landingpage2 .mobile{
    display: none;
}

#landingpage4 .swiper-container {
    min-height: 316px;
    border-radius: 10px;
    height: auto;
}

#landingpage4 h1 {
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000;
    padding: 0px 200px;
}

#landingpage4 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: inherit;
    padding-top: 37px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 55px;
}

#landingpage3 {
    margin-top: 40px;
}

#landingpage3 .desktop .box1{
    background-color: #fff;
    padding: 40px 40px 20px 40px;
}

#landingpage3 .desktop .box2 img{
   width: 100%;
   min-height: 455px;
}

#landingpage3 img{
    width: 100%;
}

#landingpage3 .desktop h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000;
}

#landingpage3 .desktop h5{
    font-size: 17px;
    font-weight: normal;
    color: #000;
    line-height: 30px;
    font-family: muli;
}

#landingpage3 .desktop .box3 h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #fff;
}

#landingpage3 .desktop .box3 h5{
    font-size: 17px;
    font-weight: normal;
    color: #fff;
    font-family: muli;
    line-height: 25px;
}

#landingpage3 .desktop .box3{
    background-color: #00528D;
    padding: 40px;
    min-height: 478px;
}

#landingpage3 .desktop .box4{
    max-height: 478px;
}

#landingpage3 .desktop .box4 img{
    min-height: 513px;
}

#landingpage3 .desktop .box5{
    background-color: #fff;
    padding: 40px;
    min-height: 478px;
    line-height: 24px;
}

#landingpage3 .desktop a{
    background: #1076BB;
    border-radius: 3px; 
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    padding: 7px 10px;
    font-size: 18px;
    line-height: 27px;
    margin-top: 20px;
    color: #FFFFFF;
}

#landingpage3 .desktop a:hover{
    background: #00528D;
}


#landingpage3 .h1-mobile{
    display: none;
}

#landingpage3 .mobile{
    display: none;
}

#landingpage3 .mobile .container-fluid{
    background-color: #FFF75A;
    padding: 40px;
}

#landingpage3 .mobile h1{
    font-size: 24px;
}

#landingpage3 .mobile .box1 .content-img{
    background-color: #00528D;
    padding-top: 20px;
    border-radius: 20px 20px 0px 0px;
}

#landingpage3 .mobile .content-text{
    background-color: #fff;
    border-radius: 0px 0px 20px 20px;
    padding: 20px 0px;
}

#landingpage3 .mobile h3{
    font-size: 18px;
    font-family: muli;
    font-weight: bold;
}

#landingpage4{
    margin-top: 60px;
}

#landingpage4 img{
    width: 100%;
}

#landingpage4 .desktop h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000;
}

#landingpage4 .desktop .card-title{
    font-size: 18px;
    color: #000;
    min-height: 45px;
    font-weight: bold;
    font-family: muli;
}

#landingpage4 .desktop .card-body-custom{
    min-height: 260px;
    padding: 20px;
}

#landingpage4 .desktop .card-text{
    font-size: 16px;
    font-weight: normal;
    color: #000;
    font-family: muli;
}

#landingpage4 .mobile .card-custom{
    width: 60%;
}

#landingpage4 .desktop .card-custom{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: unset !important;
}

#landingpage4 .card-body-custom{
    background-color: #E3ECF2 !important;
    border: unset !important;
}

#landingpage4 .mobile .card-title{
    font-size: 18px;
    color: #000;
    min-height: 45px;
    font-weight: bold;
    font-family: muli;
}

#landingpage4 .mobile .card-body-custom{
    min-height: 280px;
    padding: 10px;
}


#landingpage4 .mobile .card-text{
    font-size: 16px;
    font-weight: normal;
    color: #000;
    font-family: muli;
}

#landingpage4 .mobile{
    display: none;
}

#landingpage5 {
    margin-top: 80px;
}

#landingpage5 .desktop h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000;
    padding: 0px 200px;
}

#landingpage5 .desktop .box{
    margin-top: 20px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100px;
}

#landingpage6 {
    margin-top: 40px;
}

#landingpage6 .row{
    display: inline-block !important;
    width: 100%;
    margin: 0;
}

#landingpage6 .desktop h1{
    font-size: 36px;
    font-weight: bold;
    font-family: muli;
    color: #000; 
}

#landingpage6 .desktop .box{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100px;
}

#landingpage7 {
    background-color: #FFF75A;
}

#landingpage7 .container{
    padding-top: 60px;
    padding-bottom: 60px;
}

#landingpage7 .desktop h1{
    font-size: 32px;
    font-weight: bold;
    font-family: muli;
    color: #000;
    padding-right: 150px;
    margin-top:unset;
}

#landingpage7 .desktop .box{
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

#landingpage7 .row-badge{
    display: inline-block !important;
    width: 100%;
    margin: 0;
}

.img-width{
    max-width: 70%;
    height: auto;
}

.img-height{
    width: auto;
    max-height: 50%;
}

.img-badge{
    width: 80%;
    margin-top: 4%;
}

.img-media{
    max-width: 60%;
    height: auto;
}

.footer-custom{
    background-color: #00528D !important;
}

.footer-middle-custom{
    padding: 30px 0px 60px 0px !important;
}

#footer label{
    font-family: muli;
    color: #fff;
    font-size: 12px;
}

#footer .logo-footer{
    width: 60%;
    margin-bottom: 10px;
}

#footer a{
    font-family: muli;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

#footer h3{
    font-family: muli;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

#footer .logo-market{
    width: 30%;
}

#footer hr{
    display: none;
}


/* ==================================================  */

/* @media screen and (max-width: 1305px){
    #landingpage3 .desktop .box3{
        padding: 15% 100px 0 100px;
    }
} */

@media screen and (max-width: 1199px){
    #landingpage1 .desktop h1{
        padding: 0px 100px;
    }

    #landingpage1 .desktop h4{
        padding : 0px 284px;
    }

    #landingpage4 .desktop .card-body-custom{
        min-height: 300px;
    }

    #landingpage7 .desktop h1{
        padding-right : 100px;
    }
    
}

@media screen and (max-width: 991px){
    #landingpage1{
        background-image: url('../../images/introduction-bg-mobile.svg');
        background-position: center;
    }

    #landingpage1 .desktop .container{
        height: 500px;
    }

    /* #landingpage1 .desktop .container{
        justify-content: flex-start;
        padding-top: 12%;
    } */

    #landingpage1 .desktop h1{
        padding: 0px 40px;
        font-size: 60px;

    }

    #landingpage1 .desktop h4{
        padding : 0px 164px;
        font-size: 30px;
        margin-top: 10px;
    }

    #landingpage1 .desktop button{
        margin-top: 40px;
        font-size: 30px;
    }

    #landingpage2 .desktop{
        display: none;
    }

    #landingpage2 .mobile{
        display: block;
    }

    #landingpage2 h1{
        font-size: 40px;
    }

    #landingpage2 img{
        width: 25%;
    }

    #landingpage2 h3{
        font-size: 30px;
    }
    #landingpage2 h5{
        margin-top: 10px;
        font-size: 22px;
        line-height: 25px;
        padding: 0px 120px;
        margin-bottom: 40px;
    }

    #landingpage4 .swiper-container {
        width: auto;
        background-color: white;
        min-height: 316px;
        border-right: unset !important;
        height: auto;
    }

    #landingpage4 .swiper-slide{
        flex-direction: column;
    }
    
    #landingpage4 .swiper-container h5{
        font-size: 18px;
        color: #04518D;
        font-weight: 500;
        padding:10px 20px 0px 20px;
    }

    #landingpage4 .swiper-container label{
        font-size: 18px;
        color: #04518D;
        padding: 0px 20px 40px 20px;
    }

    #landingpage3 img{
        width: 70%;
    }

    #landingpage3 .mobile h1{
        font-size: 30px;
    }

    #landingpage3 .desktop{
        display: none;
    }

    #landingpage3 .mobile{
        display: block;
    }

    #landingpage3 .mobile img{
        cursor: pointer;
    }

    #landingpage4 .desktop .card-title{
        margin: unset;
    }

    
    #landingpage4 .desktop{
        display: none;
    }

    #landingpage4 .mobile{
        display: block;
    }

    #landingpage4 .mobile .card-custom{
        width: 50%;
    }

    #landingpage4 .mobile .card-title{
        font-size: 26px;
        margin-bottom: 24px;
    }

    #landingpage4 h1{
        font-size: 40px !important;
    }

    #landingpage4 .mobile .card-text{
        font-size: 22px;
    }
    
    #landingpage5 .desktop h1{
        font-size: 40px;
        padding: unset;
    }
    

    #landingpage6 .desktop h1{
        font-size: 40px;
    }

    #landingpage7 .desktop h1{
        /* padding-right : 150px;
        padding-left: 150px; */
        margin-bottom: 30px;
        font-size: 36px;
        padding: unset;
    }

    #landingpage7 .desktop .row-badge{
        text-align: center !important;
    }

    #landingpage7 .col-googleplay{
        text-align: right;
    }

    #landingpage7 .col-appstore{
        text-align: left;
    }


    #aplikasinusatalent h1{
        padding: 63px 40px 0px 40px;
        font-size: 24px;
        font-family: muli;
        color: #fff;
        margin-bottom: 20px;
        font-weight: bold;
    }

    #aplikasinusatalent h3{
        font-size: 18px;
        padding: 0px 40px;
        font-family: muli;
        color: #fff;
        font-weight: normal;
        line-height: 27px;
        margin-bottom: 20px;
    }

    #aplikasinusatalent .row-badge{
        padding-bottom: 40px;
        padding-top: 40px;
    }

    #aplikasinusatalent .badge-apps{
        margin-top: 120px;
    }

    #digitaljobfair h1{
        padding: 63px 40px 0px 40px;
        font-size: 24px;
        font-family: muli;
        color: #fff;
        font-weight: bold;
        margin-bottom: 20px;
    }

    #digitaljobfair .container-fluid{
        padding: unset ;
    }

    #digitaljobfair h3{
        font-size: 18px;
        line-height: 27px;
        padding: 0px 40px;
        font-family: muli;
        color: #fff;
        font-weight: normal;
        margin-bottom: 20px;
    }

    #digitaljobfair img{
        padding-top: 20px;
        width: 100%;
    }

    #footer h3{
        margin-top: unset;
    }
   
}


@media screen and (max-width: 768px){

    #landingpage1 .desktop .container{
        padding-top: 15%;
    }

    #landingpage1 .desktop h1{
        padding: unset;
        font-size: 34px;

    }

    #landingpage1 .desktop h4{
        padding: 0px 74px;
    }

    #landingpage1 .desktop button{
        font-size: 20px;
    }

    #landingpage2 h3{
        font-size: 24px;
    }

    #landingpage2 h1{
        font-size: 30px;
    }

    #landingpage2 h5{
        font-size: 20px;
        padding: unset;
    }

    #landingpage2 img{
        width: 30%;
    }

    #landingpage4 h1{
        font-size: 30px !important;
    }

    #landingpage4 .mobile .card-custom{
        width: 55%;
    }

    #landingpage4 .mobile .card-title{
        font-size: 22px;
        margin-top: unset;
    }

    #landingpage4 .mobile .card-text{
        font-size: 18px;
    }

    #landingpage5 .desktop h1{
        font-size: 30px;
    }

    #landingpage6 .desktop h1{
        font-size: 30px;
    }

    #landingpage7 .desktop h1{
        padding-right : 80px;
        padding-left: 80px;
        font-size: 32px;
    }

}

@media screen and (max-width : 767px){

    #landingpage7 .desktop h1{
        padding : unset;
        font-size: 30px;
    }

    #landingpage7 .col-googleplay{
        text-align: unset;
    }

    #landingpage7 .col-appstore{
        text-align: unset;
    }

    #footer label{
        display: none;
    }

    #footer .logo-footer{
        width: 50%;
        margin-right: auto;
        display: block;
        margin-left: auto;
    }

    #footer hr{
        display: block;
        height: 1px;
        background-color: #fff;
    }

    #footer .logo-market{
        width: 20%;
    }
    #footer .text-align-right{
        text-align: left !important;
    }
}

@media screen and (max-width: 600px){
    #landingpage1 .desktop h1{
        padding: 0px 70px;
        font-size: 36px;
    }

    #landingpage1 .desktop h4{
        padding: 0px 74px;
        font-size: 18px;
    }

    #landingpage2 h5{
        padding: 0px 50px;
    }

    #landingpage3 img{
        width: 100%;
    }

    #landingpage4 h1{
        padding: unset;
    }
    #landingpage4 .mobile .card-custom{
        width: 90%;
    }
    
}

@media screen and (max-width: 575px){
    #landingpage7 img{
        width: 50%;
    }
}

@media screen and (max-width: 521px){
    #landingpage1 .desktop h1{
        padding: 0px 40px;
        font-size: 28px;
    }

    #landingpage1 .desktop h4{
        padding: 0px 60px;
        font-size: 18px;
    }

    #landingpage6 .desktop h1{
        font-size: 24px;
    }

    #landingpage7 .desktop h1{
        font-size: 24px;
        padding-right : 20px;
        padding-left: 20px;
    }
}

@media screen and (max-width: 364px){
    #landingpage1 .desktop h1{
        padding: unset;
    }

    #landingpage1 .desktop h4{
        padding: unset;
    }

    #landingpage2 img{
        width: 35%;
    }

}

@media screen and (max-width: 370px){
    #landingpage2 h5 {
        padding: 0px 20px;
    }
}
/* End landing page */

/*- Navbar -*/

#header{
    height: 64px !important;
}

#header a, a:hover{
    text-decoration : none !important;
}

header.fullwidth .container{
    margin-right: auto !important;
    margin-left: auto !important;
}

#navigation{
    margin-top: 15px !important;
}

#navigation ul li a {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    font-family: muli;
    border-radius: 20px;
}

#navigation ul a.button-login{
    border-right : 1px solid #F89B22 !important;
}

#navigation ul li a:hover{
    color: #fff !important;
    background-color: #00528D;
    border: unset; 
    border-right: unset !important;
}

#navigation ul li a.navbar-active{
    background-color: #00528D;
    color: #fff;
    border-radius: 20px;
}

#navigation ul li a.button-login{
    border : 1px solid #F89B22;
    color: #F89B22 !important;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: bold;
    font-family: muli;
    text-align: center;
    border-radius: 20px;
    min-width: 95px;
}

#navigation ul li a.button-login:hover{
    border : unset !important;
    background-color:  #00528D !important;
    color: white !important;
}

#navigation ul li a.button-register{
    background-color: #F89B22;
    color: #fff !important;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: bold;
    font-family: muli;
    text-align: center;
    border-radius: 20px;
    min-width: 95px;
}

#navigation ul li a.button-register:hover{
    background-color:  #00528D !important;
}

#navigation ul li:hover{
    color: #04518D;
}

.container-special{
    height: 100%;
}

.logo-custom{
    border-right: unset !important;
    padding-right: unset !important;
    margin-right: unset !important;
    margin-left: 20px !important;
}

.header-custom{
    border: unset !important;
    padding:  unset !important;
}

.mmenu-trigger-custom{
    background-color: #fff;
}

.hamburger-inner-custom{
    background-color: #000;
}

.hamburger-inner-custom:before{
    background-color: #000;
}

.hamburger-inner-custom:after{
    background-color: #000;
}

.mm-panel.mm-hasnavbar .mm-navbar{
    background-color: #00528D !important;
}

.mm-panels{
    background-color: #00528D !important;
}

.mm-panels>.mm-panel>.mm-listview{
    margin:0 !important;
}

.mm-listview>li{
    border-bottom: 2px solid #fff;
}

.mm-listview>li>a{
    font-size: 18px;
    font-weight: bold;
}

.wrapperCustom{
    padding-top: 64px !important;
}

/*- End Navbar -*/

/* Home */

/* #introSection h1{
    font-family: Muli;
    font-weight: bold;
    font-size: 46px;
    line-height: 57px;
    color: #0F76BC;
}

#introSection h5{
    font-family: roboto;
    padding-right: 40px;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;   
    color: #001623;  
}

#introSection .colIntro{
    padding-right: 120px;
} */

#introSection .container-fluid{
    padding: 0;
    margin: 0;
}

#introSection .swiper-container {
    width: 100%;
    height: 100%;

}

#introSection .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

#introSection .swiper-pagination{
    position: unset !important;
    margin-top: 15px;
}

#swiper-mobile{
    display: none;
}


@media screen and (min-width: 768px){
    #swiper-desktop{
        display: block;
    }

    #swiper-mobile{
        display: none;
    }
}

@media screen and (max-width: 767px){
    #swiper-desktop{
        display: none;
    }

    #swiper-mobile{
        display: block;
    }
}

#scheduleSection h1{
    font-family: Muli;
    font-weight: bold;
    font-size: 28px;
    line-height: 35px;
    color: #0F76BC;
}

#scheduleSection img{
    width: 100%;
}

#scheduleSection .navCustom{
    border-top: 0.5px solid #ADB3C3;
    border-bottom: 0.5px solid #ADB3C3;
}

/* changes */
#scheduleSection .navCustom li a{
    width: 130px !important;
    text-align: center;
    font-family: Roboto;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #6C7887;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

#scheduleSection .navCustom li a:hover{
    background-color: transparent;
    border-top: 3px solid transparent;
    border-radius: unset;
    color: #0F76BC;
    border-bottom: 3px solid #0F76BC;
}

.buttonGroup{
    background: #fff;
    padding: 10px 16px;
    color: #001623;
    border-radius: 0px 0px 3px 3px;
    border: 1px solid #9EA7B5 !important;
    min-width: 70px;
    height: 36px;
}

.buttonGroup:hover{
    background: #C4C4C4;
}

.btn-active{
    background: #DFE2E6;
    box-shadow: inset 4px 4px 4px rgba(126, 137, 157, 0.25);
    border: 1px solid #9EA7B5;
}

#scheduleSection .navCustom li.active a{
    background-color: transparent;
    border-top: 3px solid transparent;
    font-family: Roboto;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #0F76BC;
    border-radius: unset;
    border-bottom: 3px solid #0F76BC;
}

/* changes */
#scheduleSection .grid-layout .job-listing{
    margin: 0 24px 30px 0;
    min-height: 438px;
    width: calc(100% * (1/4) - 24px);
}

#scheduleSection .grid-layout .job-listing{
    justify-content: unset;
}

#scheduleSection .grid-layout .job-listing-details{
    padding: 0 !important;
    flex-grow: unset;

}

#scheduleSection .job-listing .job-listing-description{
    padding-top: unset !important;
}

#scheduleSection span.bookmark-icon{
    background-color: #fff;
    color: #2B3D4B;
    box-shadow: 0px 0px 3px rgba(47, 54, 66, 0.5);
}

#scheduleSection .bookmark-icon:before {
    font-family: FontAwesome;
    content: "\f1e0";    
}

#scheduleSection .grid-layout .job-listing-footer{
    padding: 16px 14px 24px 14px;
    min-height: 110px;
    border-radius: unset;
}

#scheduleSection .job-listing .job-listing-footer{
    background-color: white;
}

#scheduleSection h5{
    font-family: Roboto;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    text-transform: uppercase;
    color: #04518D;
    font-style: normal;
}

#scheduleSection h4.certificate{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #F99108;
}

#scheduleSection h4.certificate i{
    font-size: 18px;
}

#scheduleSection h4.online{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #0ED872;
}

#scheduleSection h4.online i{
    font-size: 16px;
}


#scheduleSection h4.address{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #41515F;
}

#scheduleSection h4.address i{
    font-size: 16px;
}

#scheduleSection .secondRow{
    display: none !important;
}

#scheduleSection h3{
    font-family: Roboto;
    font-weight: 700;
    font-size: 16px;
    font-style: normal;
    line-height: 21px;
    color: #162A37;
    min-height: 50px;
}

#scheduleSection hr{
    border: 0.5px solid #ADB3C3;
}

#scheduleSection .status-icon{
    border-radius: 3px;
    width: auto;
    height: 24px;
    text-align: center;
    border: unset;
    top: 25px;
    padding: 0px 10px;
    text-transform: uppercase;
    right: -17px;
    transform: translateY(-50%) scale(0.96);
}

#scheduleSection .badge-past{
    background: #6C7887;
    box-shadow: 0px 1px 3px rgba(47, 54, 66, 0.5);
}

#scheduleSection .badge-past:before {
    content: "Past Event";
    font-family: Roboto;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
}

#scheduleSection .badge-free{
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(47, 54, 66, 0.5);
}

#scheduleSection .badge-free:before {
    content: "Free";
    font-family: Roboto;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #2B3D4B;
}

#scheduleSection .share-icon {
    font-family: Roboto;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: unset !important;
    position: absolute;
    z-index: 101;
    padding: 7px 12px;
    color: #1076BB !important;
    width: unset !important;
    height: unset !important;
    top: unset !important;
    margin-right: 16px !important;
    border-radius: unset !important;
    box-shadow: unset !important;
    transform: unset !important;
}

#scheduleSection .share-icon:before {
    content: unset;
}

#scheduleSection .share-icon:hover{
    background: #D6EEFF;
}

#scheduleSection .pastEvent{
    color: #576573 !important;
}

/* @media screen and (max-width: 1239px){
    #scheduleSection .grid-layout .job-listing{
        width: calc(100% * (1/3) - 24px);
    }
} */

@media screen and (max-width: 991px){
    #scheduleSection .grid-layout .job-listing{
        width: calc(100% * (1/2) - 24px);
    }
}

@media screen and (max-width: 767px){
    #scheduleSection .grid-layout .job-listing{
        margin: 0 0 30px 0;
        width: 100%;
    }
    #introSection h1 {
        font-size: 44px;
    }
}

#scheduleSection h5.titlePerson{
    font-family: Roboto;
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    color: #0F76BC;
}

#scheduleSection span.pembicara{
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    color: #000;
    text-transform: capitalize !important;
}

#scheduleSection h5.testdetails{
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    color: #000;
    text-transform: capitalize !important;
}

#scheduleSection h5.jabatan{
    font-family: Roboto;
    font-weight: 500;
    font-size: 12px;
    color:#000;
    line-height: 21px;
    text-transform: capitalize !important;
}

/* #scheduleSection .grid-layout .job-listing-mobie{
    min-height: 170px !important;
} */

.job-listing-mobile{
    display: none;
}

@media screen and (max-width: 768px){
    .job-listing-desktop{
        display: none;
    }

    .job-listing-mobile{
        display: block;
    }   

    #scheduleSection .grid-layout .job-listing-footer{
        padding: 16px 20px 24px 0px;
    }

    .job-listing{
        min-height: 170px !important;
    }

    #scheduleSection .status-icon{
        right: 0px;
    }

    #scheduleSection h3{
        min-height: 65px;
        margin: unset;
        line-height: 24px;
    }

    #scheduleSection h5{
        margin-top: unset;
    }

    
}


/* @media screen and (max-width: 768px){
    .column-2{
        padding-left: 0 !important;
    }

    .column-11{
        padding-right: 0 !important;
    }

    #scheduleSection span.bookmark-icon{
        display: none;
    }

   
    #scheduleSection .grid-layout .job-listing-footer{
        padding-right: 16px !important;
        padding-bottom: 16px !important;
        padding-top: 6px;
        padding-left: 20px !important;
    }

    #scheduleSection .grid-layout .job-listing{
        min-height: unset;
    }

    #scheduleSection h4.certificate{
        display: none;
    }

    #scheduleSection h3{
        min-height: 0;
        font-size: 18px;
        margin-top: unset;
        font-weight: normal;
    }

    #scheduleSection hr{
        display: none;
    }

    #scheduleSection h5.titlePerson{
        display: none;
    }

    #scheduleSection h5.jabatan{
        display: none;
    }
    
    #scheduleSection .status-icon{
        z-index: 100;
        top: 35px;
        right: -9px;
    }

    #scheduleSection h4.desktop{
        display: none;
    }

    #scheduleSection .secondRow{
        display: block !important;
    }

    #scheduleSection .share-icon{
        display: block !important;
    }

    #scheduleSection .image-footer{
        display: none;
    }

    #event_1 .header{
        content: url('../../images/nusatalent-nusatalks-mobile.jpg');
    } 

    #event_2 .header{
        content: url('../../images/jobfair_selasa-mobile.jpg');
    } 

    #event_3 .header{
        content: url('../../images/jobfair-cdc-ibik-mobile.jpg');
    } 

    #event_4 .header{
        content: url('../../images/testminatbakat-mobile.jpg');
    } 
} */

@media screen and (max-width: 767px){
    #scheduleSection .grid-layout .job-listing-details{
        padding: 16px 0px 16px 16px !important;
    }

}

@media screen and (max-width: 423px){
    #scheduleSection h3{
        font-size: 16px;
    }

    #scheduleSection h4.mobile{
        font-size: 12px;
    }

    #scheduleSection h4.mobile i {
        font-size: 14px;
    }
}

#modal-share .modal-header{
    border-bottom: unset;
    padding: 24px 24px 16px 24px;
}

#modal-share .modal-title{
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #001623;
}

#modal-share .modal-body{
    padding: 0px 24px 24px 24px;
}

#modal-share label{
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #576573;
}

#modal-share .form-row{
    height: 36px;
}

#modal-share input{
    height: 100%;
    border: 1px solid #828C9B !important;
    width: 100%;
    border-radius: 5px 0px 0px 5px;
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #001623;
}

#modal-share .button-copy{
    height: 100%;
    border: 1px solid #828C9B;
    border-left: unset;
    width: 100%;
    border-radius: 0px 5px 5px 0px;
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #001623;
}

#modal-share .button-copy:hover{
    background: #D6EEFF;
}

#modal-share .button-copy:focus{
    background: #D6EEFF;
}

#modal-share .modal-footer{
    text-align: center;
    border-top: unset;
    padding: 0px 24px 24px 24px;
}

#modal-share .modal-footer img{
    margin-right: 16px;
}

#modal-share .modal-footer img:last-child{
    margin-right: unset;
}

/* End Home */

/* Event Details */

h1.title{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 37px;
    color: #001623;
}

hr{
    margin-top: unset !important;
    border: 0.5px solid #ADB3C3;
}

.divContainer{
    background: #FFFFFF;
    border-radius: 3px;
    padding: 16px 24px;
    width: 100%;
}

.columnOne{
    padding-right: 60px !important;
}

div.companyParticipants{
    display: flex;
    justify-content: space-between;
}

h2.title{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: #001623;
    margin-top: unset;
}

h2.link{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 27px;
    color: #0F76BC;
    margin-top: unset;
}

h5.about{
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #001623;
}

h2.link a{
    padding: 10px;
}

h2.link a:hover{
    background: #F2F3F5;
    border-radius: 3px;
    padding: 10px;
    color: #0F76BC;
}

h2.link a:focus{
    background: #D6EEFF !important;
    border-radius: 3px;
    padding: 10px;
    color: #0F76BC !important;
    text-decoration: unset !important;
}

.companyLogo{
    border: 0.5px solid #ADB3C3;
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    min-height: 50px;
    padding: 10px 8px;
    text-align: center;
    margin-bottom: 12px;
}

.companyLogo img{
    max-width: 100%;
    max-height: 30px;
}

hr.hrjob{
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

#divJobVacancy label{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    color: #41515F;
}

#divJobVacancy h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #001623;
    margin-top: unset;
    margin-bottom: 5px;
}

.divContainer2{
    background: #FFFFFF;
    border-radius: 3px;
    padding: 24px;
    width: 100%;
}

#detailsEvent h3{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #001623;
}

#detailsEvent h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #2B3D4B;
}

#detailsEvent h5 i{
    color: #6C7887;
    margin-right: 10px;
}

#detailsEvent h5.status{
    color: #0ED872;
    font-weight: bold;
    text-transform: uppercase;
}

#detailsEvent h5.status i{
    font-size: 20px;
}

#detailsEvent h5.free{
    color: #F99108;
    font-weight: bold ;
    text-transform: uppercase;
}

#detailsEvent h5.free i.ticket{
    margin-right: 15px;
}

#detailsEvent img{
    margin-right: 25px;
    margin-bottom: 20px;
}
  
#detailsEvent img:last-child{
    margin-right: unset;
}

@media screen and (max-width: 991px){
    .detailimages{
        text-align: center;
    }
}

@media screen and (max-width: 767px){
    .detailimages{
        text-align: left;
    }
}

.buttonBack{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    text-decoration: unset !important;
    color: #2B3D4B; 
}

.buttonBack:hover{
    color: #0F76BC;
    text-decoration: unset !important;
}

.buttonBack:focus{
    color: #04518D;
    text-decoration: unset !important;
}

#detailsEvent h4{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #2B3D4B;
}


#stepEvent h3{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: #001623;
}

#stepEvent ul li{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    color: #2B3D4B;
}

#contactEvent h3{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #001623;
}

#contactEvent h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    color: #2B3D4B;
}

#contactEvent h5 i{
    color: #0F76BC;
    font-size: 20px;
    margin-right: 5px;
    font-weight: bold;
}

#contactEvent h5 a{
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    color: #2B3D4B;
}

.padding-googleplay{
    padding-right: 5px !important;
}

.padding-appstore{
    padding-left: 5px !important;
}


@media screen and (max-width: 991px){
    div.companyParticipants{
        display: block;
    }
}

@media screen and (max-width: 767px){
    .columnOne{
        padding-right: unset !important;
        padding-left: unset !important;
    }

    .badge-googleplay{
        width: 200px !important;
    }

    .badge-appstore{
        width: 200px !important;
    }

    .padding-appstore{
        padding-left: 15px !important;
    }
    
}

/* End Event Details  */

/* Webinar Details */

.btn-register{
    background: #1076BB;
    border-radius: 3px;
    color: #fff;
    width: 100%;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    padding: 10px;
}

.btn-register:hover{
    background: #04518D;
}

.btn-register:active{
    background: #033D6A;
}

.btn-register a{
    color: white;
}

.btn-register a:hover{
    color: white;
}

#detailsEvent h1.titleTest{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 48px;
    color: #001623;
}

#detailsEvent h5.price{
    color: #F99108;
    font-weight: bold ;
    text-transform: capitalize;
}

#detailsEvent h5.price i.ticket{
    margin-right: 15px;
}

#detailsEvent h5.price i.certificate{
    margin-right: 15px;
    font-size: 20px;
}

.wrapperdetails{
    overflow-y:hidden; 
    overflow-x:hidden; 
    background-color: #E5E5E5; 
    height: 100%;
}

.rowmobile{
    display: none !important;
}

.maxheight-fair{
    max-height: 1193px; 
    overflow-y: auto; 
    overflow-x: hidden;
}

.maxheight-test{
    max-height: 550px;
    overflow-y: auto; 
    overflow-x: hidden;
}

@media screen and (max-width: 767px){

    .wrapperdetails{
        overflow-y: auto;
    }

    .rowdesktop{
        display: block !important;
    }

    .maxheight-test{
        max-height: unset;
        overflow-y: unset;
    }

    .maxheight-fair{
        max-height: unset;
        overflow-y: unset;
    }
}

#modal-form .modal-header{
    border-bottom: unset !important;
    padding: 24px;
}

#modal-form .modal-title{
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #001623;
}

#modal-form .modal-body{
    padding: 0px 44px 24px 44px;
}

#modal-form input{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    padding: 0px 10px !important;
    line-height: 16px;
    color: #000;
    margin-bottom: unset !important;
}

#modal-form hr{
    margin-bottom: 16px !important;
}

#modal-form button.btn-action{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    line-height: 27px;
    padding: 5px 10px;
    color: #FFFFFF;
}

#modal-form label.form-title{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #00528D;
}

#modal-form button.btn-action:hover{
    background: #04518D;
}

#modal-form button.btn-action:active{
    background: #033D6A;
}

#modal-form h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #001623;
}

#modal-form a{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #1076BB;
}

#modal-form .modal-footer{
    border-top: unset !important;
    padding: 0px 15px 15px 15px !important;
}

#modal-form .divRegister{
    display: none;
}

#modal-form .divPassword{
    display: none;
}

@media (min-width: 768px){
    #modal-form .modal-dialog {
        width: 400px;
    }
}

/* End Webinar Details */

/* Register Webinar */

#registerWebinar .divRegister{
    background-color: #fff;
    border-radius: 5px;
}

#registerWebinar .formRegister{
    padding: 24px 16px;
}

#registerWebinar h5.header{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
    color: #1076BB;
    margin-left: 10px;
}

#registerWebinar h4.title{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 25px;
    color: #000000;
    margin-left: 10px;
    margin-top: unset;
}

#registerWebinar hr{
    border: 0.5px solid #979FAF;
}

.form__group {
    position: relative;
    margin-top: 15px;
}

.form__field {
    font-family: roboto;
    width: 100%;
    border: 0 !important;
    border-bottom: 0.5px solid #ADB3C3 !important;
    outline: 0 !important;
    border-radius: unset !important;
    font-size: 14px;
    margin: 0 !important;
    padding: 5px 0px 0px 0px !important;
    transition: border-color 0.2s !important;
}

.form__field::placeholder {
    color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
    cursor: text;
    top: 20px;
    font-family: Roboto;
    font-size: 14px;
    color: #828C9B;
    padding: 0px;
}

.form__field:placeholder-shown ~ .trigger-password {
    opacity: 0;
}

.field-icon {
    float: right;
    margin-right: 10px;
    margin-top: -33px !important;
    position: relative;
    z-index: 20;
    color: #9D9D9D;
}

.form__label {
    position: absolute;
    top: -5px;
    display: block;
    transition: 0.2s;
    font-family: Roboto;
    font-weight: normal;
    font-size: 12px;
    color: #1076BB;
    padding: 0px;
    line-height: 16px;
}

.form__field:focus {
    padding-bottom: 6px;  
    border-width: 3px;
    color: #000;
    border-image-slice: 1;
    border-bottom: 2px solid #1076BB !important;
}

.form__field:focus + .form__label {
    position: absolute;
    top: -5px;
    display: block;
    transition: 0.2s;
    font-size: 12px;
    padding: 0px;
    color: #1076BB;  
}

.form__field:focus ~ .trigger-password{
    opacity: 1;
}

.form__fieldError{
    border: 1px solid #BF2929;
}

.form__field{
    box-shadow:none; 
}

.form__field:required { 
    box-shadow:none; 
}

.form__field:invalid {
    box-shadow:none;
}

.border-error{
    border-bottom: 1px solid #FF2D55 !important;
}

.select-error {
    height: calc(1.5em + .75rem + 2px) !important;
    border-bottom: 1px solid #FF2D55 !important;
    word-break: break-all;
    box-shadow: unset !important;
    padding: 0px !important;
    border-radius: unset;
}

.input-error{
    height: calc(1.5em + .75rem + 2px) !important;
    word-break: break-all;
    box-shadow: unset !important;
    border: 1px solid #FF2D55 !important;
}

label.helperTextField{
    font-family: Roboto;
    font-weight: normal;
    font-size: 12px;
    color: #FF2D55;
    margin: 3px 5px;
}

#registerWebinar label.subtitle{
    font-family: Roboto;
    font-weight: normal;
    font-size: 12px;
    color: #1076BB;
}

#registerWebinar label.white{
    color: white !important;
}

@media screen and (max-width: 767px){
    #registerWebinar label.white{
        display:none;
    }
}

#registerWebinar .input-date{
    border-radius: unset !important;
    border: unset !important;
    padding-left: unset;
    box-shadow: unset;
    padding-right: unset;
    border-bottom: 0.5px solid #ADB3C3 !important;
}

#registerWebinar .input-date:focus{
    box-shadow: unset !important;
    border-bottom:  1px solid #1076BB !important;
}

#registerWebinar .error-input-date{
    border-radius: unset !important;
    border: unset !important;
    padding-left: unset;
    padding-right: unset;
    border-bottom: 1px solid #FF2D55 !important;
}

#registerWebinar .input-custom:focus{
    box-shadow: unset !important;
    border-bottom: 1px solid #1076BB !important;
}

#registerWebinar h2.titleprice {
    font-family: Roboto;
    font-weight: 700;
    margin-top: 48px;
    font-size: 14px;
    color: #001623;
}

#registerWebinar h3.titleprice {
    font-family: Roboto;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #001623;
}

#registerWebinar .buttonRegister{
    background: #1076BB;
    border-radius: 3px;
    padding: 5px 32px;
    margin-top: 20px;
    font-family: Roboto;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
}

#registerWebinar .buttonRegister:hover{
    background: #04518D;
}

#registerWebinar .buttonRegister:active{
    background: #033D6A;
}

#registerWebinar .detailsimages{
    width: 100%;
}

.disabledContent{
    pointer-events: none;
    border-bottom: unset !important;
}

@media screen and (max-width: 767px){
    #registerWebinar .buttonRegister{
        width: 100%;
    }

    #registerWebinar .detailsimages{
        margin-top: 10px;
    }

    #registerWebinar .bottom1{
        margin-top: 10px;
    }
}

/* End Register Webinar */

/* Skeleton */

/*- General Skeleton -*/
.loading{
    animation : shimmer 2s infinite linear;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;
}
  
.big-loading{
    animation : shimmer 1s infinite linear;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 3000px 100%;
}
  
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
/*- End General Skeleton -*/

.animate-introduction{
    min-height: 300px;
}

.animate-banner{
    min-height: 150px;
}

.animate-logo{
    min-height: 280px;
}

.animate-register-banner{
    min-height: 125px;
}

.animate-content1{
    min-height: 20px;
}

.animate-content2{
    min-height: 42px;
}

.animate-content3{
    min-height: 82px;
}

.animate-content4{
    min-height: 46px;
}

.animate-content5{
    min-height: 24px;
}

.animate-content6{
    min-height: 70px;
}

.animate-content7{
    min-height: 36px;
}

.animate-content8{
    min-height: 63px;
}

.animate-content9{
    min-height: 55px;
    width: 140px;
}

.animate-content10{
    min-height: 108px;
}

.animate-table{
    min-height: 26px;
    width: 100%;
}

.animate-images{
    min-width: 64px;
    width: 100%;
    min-height: 64px;
    height: 100%;
}

.animate-images2{
    width: 480px;
    height: 402px;
}

.animate-images3{
    min-width: 371px;
    width: 100%;
    min-height: 480px;
}

.animate-images4{
    width: 100%;
    min-height: 400px;
}

.animate-button{
    width: 116px;
    min-height: 36px;
}

.animate-button2{
    width: 120px;
    min-height: 36px;
}

.animate-button3{
    width: 400px;
    min-height: 40px;
}

.animate-title-details{
    min-height: 44px;
}

.animate-title-center{
    width: 397px;
    min-height: 45px;
}

.animate-title2-center{
    width: 600px;
    min-height: 45px;
}

.animate-title3-center{
    width: 600px;
    min-height: 33px;
}

.flexbetween{
    display:flex; 
    justify-content:space-between;
}

.flexaround{
    display:flex; 
    justify-content:space-around;
}

.animate-title-flex1{
    min-width: 400px;
    height: 45px;
}

.animate-title-flex2{
    min-width: 163px;
    height: 45px;
}

.button-register-skeleton{
    display: flex;
    justify-content: flex-end;
}

.button-center-skeleton{
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 991px){
    .flexbetween{
        display: block;
    }

    .flexaround{
        display: block;
    }

    .animate-title-flex1{
        margin-top: 16px;
        height: 20px;
    }
    
    .animate-title-flex2{
        margin-top: 16px;
        height: 30px;
    }
}

@media screen and (max-width: 767px){
    .button-register-skeleton{
        justify-content: flex-start;
    }

    .animate-button{
        width: 100%;
    }

    .animate-images3{
        min-width: 100%;
        width: 100%;
        min-height: 155px;
        margin-bottom: 10px;
    }
    
}

/* End Skeleton */

/*- Pagination -*/

.pagination-custom ul li a{
    color: #2B3D4B;
    font-size: 16px;
    font-weight: bold;
    font-family: roboto;
    border-radius: 5px;
    margin-right: 10px;
    padding: 8px 15px;
    height: 36px;
    border: unset;
}

.pagination-custom ul li .page-link{
    color:#2B3D4B;
    font-size: 16px;
    font-weight: bold;
    font-family: roboto;
    border-radius: 5px;
    margin-right: 10px;
    padding: 8px 15px;
    height: 36px;
    border: unset;
}

.pagination-custom ul li.active span{
    color: #fff ;
    background-color: #0F76BC;
}

.pagination-custom ul li.page-item{
    cursor: pointer;
}

.pagination-custom ul li a span{
    font-size: 14px;
}

.pagination-custom ul li:hover a{
    background-color: #D8DAEB;
    color: #2B3D4B;
}

.pagination-custom ul li.disabled:hover a{
    color: #2B3D4B ;
    background-color: #fff;
}

.pagination-custom ul li.disabled:hover a span{
    color: #2B3D4B;
}

.pagination-custom ul li.active a{
    color: #fff ;
    background-color: #0F76BC;
}

.pagination-custom .previous a{
    color: #0F76BC;
    font-weight: bold;
}


/*- Flexbox -*/

.flex{
    display: flex;
}

.align-items-center{
    align-items: center;
}

.justify-content-spacebetween{
    justify-content: space-between;
}

.justify-content-spacearound{
    justify-content: space-around;
}

.flex-direction-column{
    flex-direction: column;
}

/*- End Flexbox -*/

/*- Margin -*/

.margin-top-8{
    margin-top: 8px;
}

.margin-top-20{
    margin-top: 20px;
}

.margin-top-24{
    margin-top: 24px;
}

.margin-top-28{
    margin-top: 28px;
}

.margin-top-33{
    margin-top: 33px;
}

.margin-top-38{
    margin-top: 38px;
}

.margin-left-5{
    margin-left: 5px;
}

.margin-left-10{
    margin-left: 10px;
}

.margin-right-10{
    margin-right: 10px;
}

.margin-right-20{
    margin-right: 20px;
}

.margin-right-30{
    margin-right: 30px;
}

.margin-bottom-24{
    margin-bottom: 24px;
}

.margin-bottom-40{
    margin-bottom: 40px;
}

.margin-bottom-60{
    margin-bottom: 60px;
}

.no-margin-bottom{
    margin-bottom: unset !important; 
}

.no-margin-top{
    margin-top: unset !important; 
}

.no-margin-bottom{
    margin-bottom: unset !important; 
}

/*- End Margin -*/


.not-allowed{
    pointer-events: none;
}


/* opacity */

.opacity07{
    opacity: 0.7;
}

.opacity05{
    opacity: 0.5;
}

/* end opacity */

/*- Padding -*/
.no-padding-left-right{
    padding-right: unset !important; 
    padding-left: unset !important; 
}

.no-padding-right{
    padding-right: unset !important; 
}

.no-padding-left{
    padding-left: unset !important; 
}

/*- End Padding -*/


/*- Form Elements -*/
.input-custom{
    height: calc(1.5em + .75rem + 2px) !important;
    border : 1px solid #ced4da !important;
    word-break: break-all;
    box-shadow: unset !important;
}

.select-custom{
    height: calc(1.5em + .75rem + 2px) !important;
    border-bottom: 0.5px solid #ADB3C3 !important;
    word-break: break-all;
    box-shadow: unset !important;
    padding: 0px !important;
    border-radius: unset;
}

.select-custom:focus{
    border-bottom: 1px solid #1076BB !important;
}

.font-weight-normal{
    font-weight: normal !important;
}

.text-underline{
    text-decoration: underline;
}

.text-uppercase{
    text-transform: uppercase;
}

.text-align-left {
    text-align: left !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

.form-control:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
    border: 1px solid #e0e0e0 ;
}
/*- End Form Elements -*/

/*- Scrollbar -*/

::-webkit-scrollbar {
    width:1px;
    height: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px #d8d8d8; 
    /* box-shadow: inset 0 0 5px grey;  */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #C4C4C4; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C4C4C4; 
}

/*- End Scrollbar -*/


/*- Footer -*/

.footer-copyright{
    font-family: muli;
    bottom: 0px;
    height: 10px;
    width: 100%;
    background-color: #002A43;
    color: white;
    font-size: 14px;
    text-align: center;
    padding-bottom: 27px;
    padding-top: 8px;
}

/*- End Footer -*/



/* MEDIA QUERY
================================================== */

@media screen and (max-width: 1099px){
    .logo-custom img{
        content: url('../../images/logo-mobile.svg');
    }
}

@media screen and (max-width: 991px){
    #footer h3{
        margin-top: unset;
    }
}

@media screen and (max-width : 767px){
    #footer .contact-us{
        text-align: center;
        margin-top: 20px;
    }

    #footer .logo-footer{
        width: 50%;
        margin-right: auto;
        display: block;
        margin-left: auto;
    }

    .footer-middle-custom{
       padding: 60px 0px 80px 0px!important
    }

    #footer hr{
        display: block;
        height: 1px;
        background-color: #fff;
    }

    #footer .logo-market{
        width: 20%;
    }
    #footer .text-align-right{
        text-align: left !important;
    }
}

@media screen and (max-width: 434px){
    .footer-copyright{
        padding-top: 5px;
        font-size: 12px;
    }
}

/* personality test details */

#testdetails ul li{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #001623;
}

/* end personality test details */

/* personality test opening */

#testopening h1{
    font-family: Roboto;
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    line-height: 50px;
    color: #0F76BC;
    margin-top: unset;
    margin-bottom: unset;
}

#testopening h3{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    margin-top: 5px;
    font-size: 22px;
    line-height: 33px;
    color: #000000;
}

#testopening .intro-opening{
    padding: 0px 199px;
}

#testopening .subintro-opening{
    padding: 0px 183px;
}


@media screen and (max-width: 1239px){
    #testopening .intro-opening{
        padding: 0px 94px;
    }

     #testopening .subintro-opening{
        padding: 0px 118px;
    }
}

@media screen and (max-width : 1099px){
    #testopening h1{
        margin-top: 15px;
    }
}


@media screen and (max-width: 991px){
    #testopening .intro-opening{
        padding: 0px 57px;
    }

    #testopening .subintro-opening{
        padding: 0px 0px;
    }
    
    #testopening .intro-opening{
        padding: 0px 57px;
    }
    
    #testopening h1{
        font-size: 28px;
        line-height: 40px;
    }
}

@media screen and (max-width: 767px){
    #testopening .intro-opening{
        padding: 0px 0px;
        margin-top: 24px;
    }

    #testopening h3{
        font-size: 17px;
        line-height: 30px;
        margin-top: 24px;
    }
}

@media screen and (max-width: 529px){
    #testopening h3{
        font-size: 16px;
        line-height: 30px;
    }
}

@media screen and (max-width: 521px){
    #testopening h1{
        font-size: 24px;
        line-height: 30px;
    }
}

@media screen and (max-width: 529px){
    #testopening h3{
        font-size: 14px;
        line-height: 24px;
    }
}

@media screen and (max-width: 416px){
    #testopening h1{
        font-size: 22px;
        line-height: 30px;
    }
}


@media screen and (min-height: 1024px){
    #testopening .intro-opening{
        margin-top: 15%;
    }
}

#testopening .button-start{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    margin-top: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
    padding: 5px 20px;
}

#testopening .button-start:hover{
    background: #04518D;
}

#testopening .button-start:active{
    background: #033D6A;
}

/* end personality test opening*/

/* personality test rules */

#testrules h1{
    font-family: Roboto;
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    line-height: 50px;
    color: #0F76BC;
    margin-top: unset;
    margin-bottom: unset;
}

.divRules{
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(130, 140, 155, 0.5);
    border-radius: 10px;
    width: 610px;
    margin: 5px auto;
    padding: 10px 11px;
}

#testrules .column-1{
    padding-bottom: 5px;
}

#testrules .column-2{
    padding-top: 12px;
}

#testrules .column-2 p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    color: #001623;
}

#testrules hr{
    margin-bottom : 5px;
}

#testrules .button-next{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
    padding: 5px 20px;
}


#testrules .button-next:hover{
    background: #04518D;
}

#testrules .button-next:active{
    background: #033D6A;
}

@media screen and (max-width: 991px){
    #testrules h1{
        font-size: 28px;
        line-height: 40px;
    }
}

@media screen and (max-width: 767px){
    .divRules{
        width: 100%;
    }

    #testrules h1{
        margin-top: 24px;
    }

    #testrules .column-2{
        padding-top: 0px;
    }
}

@media screen and (min-width: 767px){
    #testrules .column-2{
        padding-left: 0px;
    }
}


@media screen and (max-width: 521px){
    #testrules h1{
        font-size: 22px;
        line-height: 30px;
    }
}

@media screen and (max-width: 416px){
    #testrules h1{
        font-size: 18px;
        line-height: 27px;
    }
}

/* @media screen and (max-width: 397px){
    #testrules .column-2{
        width: 65%;
    }
} */

/* end personality test rules */


/* personality test question */

#testquestion .divProgressBar{
    background: #ECECFD;
    border-radius: 10px;
    width: 800px;
    padding: 20px 24px;
    margin: 60px auto 0px auto;
}

#testquestion .quizContainer{
    background: #FFFFFF;
    box-shadow: 0px 0px 10px #979FAF;
    border-radius: 10px;
    width: 800px;
    padding: 36px 28px;
    margin: 70px auto 70px auto;
}

.question {
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 45px;
    text-align: center;
    margin-top: unset;
    margin-bottom: unset;
    color: #162A37;
}

@media screen and (max-width: 767px){
    .question{
        font-size: 26px;
        line-height: 40px;
    }
}

@media screen and (max-width: 600px){
    .question{
        font-size: 22px;
        line-height: 38px;
    }
}

@media screen and (max-width: 400px){
    .question{
        font-size: 20px;
        line-height: 35px;
    }
}

@media screen and (max-width: 300px){
    .question{
        font-size: 18px;
        line-height: 33px;
    }
}

#testquestion h3.setuju{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 24px;
    margin-top: 10px;
    color: #0BA256;
}

#testquestion h3.tidaksetuju{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
    margin-top: 5px;
    color: #FF2D55;
}

#testquestion .progresscustom{
    margin-bottom: unset;
    height: 4px;
    background: #95D4FF;
    border-radius: 5px;
    margin-top: 50px;
}

#testquestion .progressbarcustom{
    background: #0E8AD4;
}

#testquestion h5.questionRange{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    text-align: right;
    color: #0F76BC;
}

#testquestion .divButtonSubmit button{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    margin-top: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
    padding: 5px 20px;
}

#testquestion .divButtonSubmit button:hover{
    background: #04518D;
}

#testquestion .divButtonSubmit button:active{
    background: #033D6A;
}

.divButtonSubmit{
    display: none;
    text-align: center;
}

.styleradio1{
    width: 30px !important;
    height: 30px !important;
    border: 3px solid #0BA256 !important;
    margin-top: -5px !important;
}

.radio input[type="radio"]:checked + label .styleradio1{
    box-shadow: inset 0 0 0 16px #fff !important;
    background-color: #0BA256 !important;
}

.styleradio2{
    width: 25px !important;
    height: 25px !important;
    border: 3px solid #0BA256 !important;
    margin-top: -3px !important;
}

/* .radio input[type="radio"]:checked + label .styleradio2{
    box-shadow: inset 0 0 0 0px #0BA256 !important;
    background-color: #0BA256 !important;
} */

.radio input[type="radio"]:checked + label .styleradio2{
    box-shadow: inset 0 0 0 12px #fff !important;
    background-color: #0BA256 !important;
}

.styleradio3{
    width: 20px !important;
    height: 20px !important;
    border: 3px solid #6C7887 !important;
}

/* .radio input[type="radio"]:checked + label .styleradio3{
    box-shadow: inset 0 0 0 0px #6C7887 !important;
    background-color: #6C7887 !important;
} */

.radio input[type="radio"]:checked + label .styleradio3{
    box-shadow: inset 0 0 0 12px #fff !important;
    background-color: #6C7887 !important;
}

.styleradio4{
    width: 25px !important;
    margin-top: -3px !important;
    height: 25px !important;
    border: 3px solid #FF2D55 !important;
}


/* .radio input[type="radio"]:checked + label .styleradio4{
    box-shadow: inset 0 0 0 0px #FF2D55 !important;
    background-color: #FF2D55 !important;
} */

.radio input[type="radio"]:checked + label .styleradio4{
    box-shadow: inset 0 0 0 12px #fff !important;
    background-color: #FF2D55 !important;
}

.styleradio5{
    width: 30px !important;
    height: 30px !important;
    margin-top: -5px !important;
    border: 3px solid #FF2D55 !important;
}


/* .radio input[type="radio"]:checked + label .styleradio5{
    box-shadow: inset 0 0 0 0px #FF2D55 !important;
    background-color: #FF2D55 !important;
} */

.radio input[type="radio"]:checked + label .styleradio5{
    box-shadow: inset 0 0 0 16px #fff !important;
    background-color: #FF2D55 !important;
}


@media screen and (min-width: 768px){
    .styleradio1:hover{
        box-shadow: inset 0 0 0 0px #0BA256 !important;
        background-color: #0BA256 !important;
    }

    .styleradio2:hover{
        box-shadow: inset 0 0 0 0px #0BA256 !important;
        background-color: #0BA256 !important;
    }
    
    .styleradio3:hover{
        box-shadow: inset 0 0 0 0px #6C7887 !important;
        background-color: #6C7887 !important;
    }
    
    .styleradio4:hover{
        box-shadow: inset 0 0 0 0px #FF2D55 !important;
        background-color: #FF2D55 !important;
    }

    .styleradio5:hover{
        box-shadow: inset 0 0 0 0px #FF2D55 !important;
        background-color: #FF2D55 !important;
    }
}

@media screen and (max-width: 991px){
    #testquestion .divProgressBar{
        width: 100%;
    }

    #testquestion .quizContainer{
        width: 100%;
    }
}

@media screen and (max-width: 767px){
    #testquestion h3.setuju{
        font-size: 18px;   
    }
    #testquestion h3.tidaksetuju{
        margin-top: unset;
        font-size: 18px;   
    }
}

@media screen and (max-width: 575px){
    .styleradio1{
        width: 18px !important;
        height: 18px !important;
        border: 3px solid #0BA256 !important;
        margin-top: unset !important;
    }
    
    
    .styleradio2{
        width: 18px !important;
        height: 18px !important;
        border: 3px solid #0BA256 !important;
        margin-top: unset !important;
    
    }
    
    .styleradio3{
        width: 18px !important;
        height: 18px !important;
        border: 3px solid #6C7887 !important;
    }
    
    .styleradio4{
        width: 18px !important;
        margin-top: unset !important;
        height: 18px !important;
        border: 3px solid #FF2D55 !important;
    }
    
    .styleradio5{
        width: 18px !important;
        height: 18px !important;
        margin-top: unset !important;
        border: 3px solid #FF2D55 !important;
    }
}

/* end personality test question */

/* personality test closing */

#testclosing h1{
    font-family: Roboto;
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    line-height: 50px;
    color: #0F76BC;
    margin-top: unset;
    margin-bottom: unset;
}


#testclosing h3{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    margin-top: unset;
    font-size: 22px;
    line-height: 33px;
    color: #000000;
}

#testclosing .intro-opening{
    padding: 0px 199px;
    margin-top: 30px;
}

#testclosing .subintro-opening{
    padding: 0px 183px;
}


@media screen and (max-width: 1239px){
    #testclosing .intro-opening{
        padding: 0px 94px;
    }

     #testclosing .subintro-opening{
        padding: 0px 118px;
    }
}

@media screen and (max-width: 991px){
    #testclosing .intro-opening{
        padding: 0px 50px;
    }

    #testclosing .subintro-opening{
        padding: 0px 0px;
    }
    
    #testclosing .intro-opening{
        padding: 0px 57px;
    }
    
    #testclosing h1{
        font-size: 28px;
        line-height: 40px;
    }
}

@media screen and (max-width: 767px){
    #testclosing .intro-opening{
        padding: 0px 0px;
        margin-top: 50px;
    }

    #testclosing h3{
        font-size: 17px;
        line-height: 27px;
        margin-top: 24px;
    }
}

@media screen and (max-width: 529px){
    #testclosing h3{
        font-size: 16px;
        line-height: 30px;
    }
}

@media screen and (max-width: 521px){
    #testclosing h1{
        font-size: 22px;
        line-height: 30px;
    }
}

@media screen and (max-width: 529px){
    #testopening h3{
        font-size: 14px;
        line-height: 24px;
    }
}

@media screen and (max-width : 392px){
    #testclosing h1{
        padding: 0px 40px;
    }
    #testclosing .intro-opening {
        margin-top: 50px;
    }
}

@media screen and (max-width : 379px){
    #testclosing h1{
        padding: 0px 20px;
    }

    #testclosing h3 br{
        display: none;
    }
}

@media screen and (min-height: 1024px){
    #testclosing .intro-opening{
        margin-top: 20%;
    }
}

#testclosing .button-start{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    margin-top: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
    padding: 5px 20px;
}

#testclosing .button-start:hover{
    background: #04518D;
}

#testclosing .button-start:active{
    background: #033D6A;
}

/* end personality test closing */

/* personality test result */

#testresultintroduction{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-result1.jpg");
}

#testresultintroduction .container{
    padding-top: 48px;
}

#testresultintroduction h2{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 39px;
    color: #162A37;
    margin-top: unset;
    margin-bottom: unset;
    text-align: center;
}

#testresultintroduction h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 72px;
    margin-top: 32px;
    line-height: 27px;
    text-align: center;
    color: #0F76BC;
}

#testresultintroduction .divPresentase{
    padding: 0px 200px;
}

#testresultintroduction .divPresentase h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    margin-top: unset;
    font-size: 24px;
    color: #0F76BC;
}

#testresultintroduction .progress1{
    margin-top: 7px;
    height: 16px;
    border-radius: 10px;
    background: #E7E7F8;
}

#testresultintroduction .progress-bar1{
    background: #0F76BC !important;
}

#testresultcard {
    margin: 20px 0px;;
}

#testresultcard .row{
    margin: 0px 15px;
}

#testresulthexagon{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-result2.jpg");
}

#testresulthexagon h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #2B3D4B;
    margin-top: 56px;
    padding: 0px 120px;
}

#testresulthexagon hr{
    margin-bottom: unset;
}

@media screen and (max-width: 991px){
    #testresulthexagon h5{
        padding: 0px 0px;
    }
    #testresultintroduction .divPresentase{
        padding: 0px 15px;
    }

    #testresultintroduction .divPresentase h5{
        font-size: 18px;
    }
    #testresultintroduction .progress1{
        margin-top: unset;
    }

}

@media screen and (max-width: 767px){
    #testresulthexagon h5{
        font-size: 15px;
        line-height: 24px;
    }

    #testresultintroduction .row{
        display: block;
    }

    #testresultinfluencer .row{
        display: block;
    }

    #testresultsupporter .row{
        display: block;
    }

    #testresultcreator .row{
        display: block;
    }

    #testresultorganizer .row{
        display: block;
    }

    #testresultthinker .row{
        display: block;
    }

    #testresultperformer .row{
        display: block;
    }
}

@media screen and (max-width: 575px){
    #testresultintroduction .divPresentase h5{
        text-align: center;
    }
}

@media screen and (max-width: 524px){
    #testresulthexagon h5{
        font-size: 14px;
        line-height: 24px;
    }
}

h5.resultContent{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    color: #2B3D4B;
    padding: 5px 0px 5px 5px;
}

#testresultinfluencer{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-influencer.jpg");
}

#testresultinfluencer .container{
    padding: 40px 15px;
}


#testresultinfluencer h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #FF2D55;
    padding: 0px 5px;
    margin-top: 10px;
}

#testresultsupporter{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-supporter.jpg");
}

#testresultsupporter .container{
    padding: 40px 15px;
}

#testresultsupporter h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #076C39;
    padding: 0px 5px;
    margin-top: 10px;
}

#testresultcreator{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-creator.jpg");
}

#testresultcreator .container{
    padding: 40px 15px;
}

#testresultcreator h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #04518D;
    padding: 0px 5px;
    margin-top: 10px;
}

#testresultorganizer{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-organizer.jpg");
}

#testresultorganizer .container{
    padding: 40px 15px;
}

#testresultorganizer h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #5754D5;
    padding: 0px 5px;
    margin-top: 10px;
}

#testresultthinker{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-thinker.jpg");
}

#testresultthinker .container{
    padding: 40px 15px;
}

#testresultthinker h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #0F76BC;
    padding: 0px 5px;
    margin-top: 10px;
}

#testresultperformer{
    min-height: 200px;
    background-size: cover;
    padding: 0;
    background-position: center;
    background-image: url("../../images/bg-performer.jpg");
}

#testresultperformer .container{
    padding: 40px 15px;
}


#testresultperformer h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 27px;
    color: #BB6D06;
    padding: 0px 5px;
    margin-top: 10px;
}

.button-sliding-custom{
    background: #0E8AD4 !important;
    border-radius: 5px;
    font-family: Roboto !important;
    font-style: normal;
    font-weight: 600 !important;
    width: 450px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #FFFFFF;
    margin-top: 36px;
    margin-bottom: 84px;
}

.button-sliding-custom:hover{
    color: white;
}

.button-sliding-custom:active{
    color: white;
}

.button-sliding-custom:focus{
    color: white;
}

.button-sliding-save{
    background: #ECECFD !important;
    border-radius: 5px;
    font-family: Roboto !important;
    font-style: normal;
    font-weight: 600 !important;
    width: 450px !important;
    font-size: 18px !important;
    line-height: 15px !important;
    color: #0E8AD4 !important;
    margin-top: 36px;
    margin-bottom: 84px;
}

.button-sliding-save:hover{
    background: #D8DAEB !important;
}

@media screen and (max-width: 991px){
    .button.button-sliding-icon{
        width: 100% !important;
    }

    .buttonslidingbottom{
        margin-bottom: unset;
    }
}

@media screen and (max-width: 767px){
    .button-sliding-custom{
        width: unset !important;
    }

    #testresultinfluencer{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-influencer-mobile.jpg");
    }

    #testresultinfluencer img{
        content: url("../../images/img-influencer-mobile.jpg");
        width: 100%;
    }

    #testresultinfluencer h1{
        margin-top: 16px;
    }

    #testresultsupporter{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-supporter-mobile.jpg");
    }

    #testresultsupporter img{
        content: url("../../images/img-supporter-mobile.jpg");
        width: 100%;
    }

    #testresultsupporter h1{
        margin-top: 16px;
    }

    #testresultcreator{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-creator-mobile.jpg");
    }

    #testresultcreator img{
        content: url("../../images/img-creator-mobile.jpg");
        width: 100%;
    }

    #testresultcreator h1{
        margin-top: 16px;
    }

    #testresultorganizer{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-organizer-mobile.jpg");
    }
    
    #testresultorganizer img{
        content: url("../../images/img-organizer-mobile.jpg");
        width: 100%;
    }

    #testresultorganizer h1{
        margin-top: 16px;
    }

    #testresultthinker{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-thinker-mobile.jpg");
    }

    #testresultthinker img{
        content: url("../../images/img-thinker-mobile.jpg");
        width: 100%;
    }

    #testresultthinker h1{
        margin-top: 16px;
    }

    #testresultperformer{
        background-size: cover;
        background-position: top;
        background-image: url("../../images/bg-performer-mobile.jpg");
    }

    #testresultperformer img{
        content: url("../../images/img-performer-mobile.jpg");
        width: 100%;
    }

    #testresultperformer h1{
        margin-top: 16px;
    }
}


#modal-register .modal-header{
    border-bottom: unset !important;
    padding: 24px 24px 0px 24px;
}

#modal-register .modal-title{
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #001623;
}

#modal-register h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #001623;
    padding: 0px 40px;
}

#modal-register .modal-body{
    padding: 16px 24px 24px 24px;
}

#modal-register input{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    padding: 0px 10px !important;
    line-height: 16px;
    color: #000;
    margin-bottom: unset !important;
}

#modal-register button.btn-action{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    padding: 5px 10px;
    color: #FFFFFF;
    margin-top: 10px;
}

#modal-register button.btn-action:hover{
    background: #04518D;
}

#modal-register button.btn-action:active{
    background: #033D6A;
}

#modal-email .divSucess{
    display: none;
}

@media (min-width: 768px){
    #modal-register .modal-dialog {
        width: 600px;
    }
}

/* end personality test result */

/* personality test job */

#jobintroduction{
    background-size: 100%;
    background-position: bottom;
    background-image: url("../../images/bg-job.jpg");
}

#jobintroduction .column2{
    text-align: right;
}

#jobintroduction h3{
    font-family: Roboto;
    font-style: normal;
    margin-bottom: unset;
    margin-top: 5px;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    color: #162A37;
}

#jobintroduction button {
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 27px;
    color: #FFFFFF;
    padding: 5px 20px;
}

#jobintroduction button:hover {
    background: #04518D;
}

#jobintroduction button:active {
    background: #033D6A;
}

#jobintroduction .button-save{
    background: #ECECFD !important;
    color: #0E8AD4 !important;
}

#jobintroduction .button-save:hover{
    background: #D8DAEB !important;
}

#jobintroduction .divTable{
    background: #FFFFFF;
    box-shadow: 0px 0px 10px #979FAF;
    border-radius: 5px;
}

#jobintroduction .divTitle{
    padding: 15px 24px;
    border-bottom: 0.5px solid #9EA7B5;
}

#jobintroduction .colContent{
    padding: 10px 20px;
    text-align: left;
    /* border: 0.5px solid #9EA7B5; */
    align-items: center;
    display: flex;
}

.colContent a{
    font-family: Roboto;
    font-size: 14px;
    color: #001623 !important;
    text-decoration: unset !important;
} 

.colContent a:hover{
    text-decoration: underline !important;
    color: #0F76BC !important;
}

.colContent a:active{
    text-decoration: underline !important;
    color: #0F76BC !important;
}

#jobintroduction .divIntro{
    padding-top: 47px; 
    padding-bottom: 36px;
    display: inline-block !important;
    width: 100%;
    margin: 0;
}

#jobintroduction h2.influencer{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #FF2D55;
    text-align: center;
}

#jobintroduction h2.influencer{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #FF2D55;
    text-align: center;
}

#jobintroduction h2.supporter{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #076C39;
    text-align: center;
}

#jobintroduction h2.creator{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #04518D;
    text-align: center;
}

#jobintroduction h2.performer{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #BB6D06;
    text-align: center;
}

#jobintroduction h2.organizer{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #3E3CA9;
    text-align: center;
}

#jobintroduction h2.thinker{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    margin: unset;
    line-height: 27px;
    color: #0F76BC;
    text-align: center;
}

#rowTest {
    margin-top: 42px; 
    margin-bottom: 61px;
    display: inline-block !important;
    width: 100%;
    margin-left: 0;
}

#rowTest button{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
    padding: 5px 20px;
}

#rowTest h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 24px;
    color: #162A37;
}

#rowTest .column-1{
    text-align: center;
}

#rowTest button:active{
    background: #033D6A;
}

#rowTest button:hover{
    background: #04518D;
}

#otherevents {
    background-color: #ECECFD;
}

#otherevents .divIntro{
    padding: 20px 0px;
    margin-top: 43px; 
    display: inline-block !important;
    width: 100%;
}

#otherevents .column2{
    text-align: right;
}

#otherevents button.desktop{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 50px;
    color: #1076BB;
}

#otherevents button.desktop:hover{
    text-decoration: underline;
}

#otherevents h3.titles{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 50px;
    color: #162A37;
    margin: unset;
}

#otherevents button.seeall{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 24px;
    padding: 5px 20px;
}

#otherevents button.seeall:active{
    background: #033D6A;
}

#otherevents button.seeall:hover{
    background: #04518D;
}

#otherevents .divButton{
    display: none;
}


#modal-email .modal-header{
    border-bottom: unset !important;
    padding: 24px 24px 0px 24px;
}

#modal-email .modal-title{
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #001623;
}

#modal-email h5{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #001623;
    padding: 0px 40px;
}

#modal-email .modal-body{
    padding: 10px 44px 44px 44px;
}

#modal-email input{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    padding: 0px 10px !important;
    line-height: 16px;
    color: #000;
    margin-bottom: unset !important;
}

#modal-email button.btn-action{
    background: #1076BB;
    border-radius: 3px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    line-height: 27px;
    padding: 5px 10px;
    color: #FFFFFF;
}

#modal-email button.btn-action:hover{
    background: #04518D;
}

#modal-email button.btn-action:active{
    background: #033D6A;
}

#modal-email .divSucess{
    display: none;
}

@media (min-width: 768px){
    #modal-email .modal-dialog {
        width: 400px;
    }
}

@media screen and (max-width: 991px){
    #jobintroduction .colHide{
        display: none;
    }

    #jobintroduction button{
        margin-top: 16px;
    }

    #rowTest h5{
        font-size: 20px;
    }

    #jobintroduction .column1{
        text-align: center;
    }

    #jobintroduction .column2{
        text-align: center;
    }

    #otherevents .column1{
        text-align: left;
    }

    #otherevents .column2{
        text-align: left;
    }

    #rowTest .column-1{
        text-align: center;
    }

    #rowTest .column-2{
        text-align: center;
    }   

    #jobintroduction h2.influencer{
        font-size: 22px;
    }
    
    #jobintroduction h2.supporter{
        font-size: 22px;
    }
    
    #jobintroduction h2.creator{
        font-size: 22px;
    }
    
    #jobintroduction h2.performer{
        font-size: 22px;
    }
    
    #jobintroduction h2.organizer{
        font-size: 22px;
    }
    
    #jobintroduction h2.thinker{
        font-size: 22px;
    }
    
}

@media screen and (max-width: 767px){
    /* #jobintroduction .column2{
        margin-top: 15px;
    } */

    #otherevents .column2{
        margin-top: 15px;
    }

    #jobintroduction h3{
        font-size: 22px;
    }

    #jobintroduction .divIntro{
        padding-top: 24px; 
        padding-bottom: 24px;
    }

    #otherevents .column1{
        text-align: center;
    }

    #otherevents .column2{
        display: none;
    }

    #otherevents .divButton{
        display: block;
    }

    #otherevents h3.titles{
        font-size: 22px;
        line-height: 28px;
    }
}

@media screen and (max-width: 390px){
    #jobintroduction button{
        margin-top: unset;
        margin-bottom: 24px;
    }
}
/* end personality test job */

.row{
    display: -webkit-box;
    flex-wrap: wrap !important;
}
.tab-content .row{
    display: block !important;
}

.display-block{
    display: block !important;
}

.row::before{
    display: none !important;
}

.row::after{
    display: none !important;
}

.container::before{
    display: none !important;
}

.container::after{
    display: none !important;
}