.span-beasiswa{
    padding: 4px 8px;
    background: rgba(44, 113, 219, 0.2);
    border-radius: 4px;
    color: var(--new-secondary-light);
    display: none;
}

.span-beasiswa.active{
    display: inline;
    white-space: nowrap;
}


/* extra-images/home/mainheader.png */
input[type=number] {
    -moz-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }

input[type=search] {
    -webkit-appearance: none;
}

.container-full-search{
    /* width: 100%; */
    /* height: 100%; */
    position: absolute;
    /* top: 0;
    left: 0; */
    
}

.container-show-dropdown{
    /* position: absolute;
    left: 0;
    top: 44px;
    right: 0; */
    width: 100%;
    background-color: white;
    padding: 10px;
    border: 1px solid blue;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: scroll;
}

.container-input-search{
    /* position: absolute;
    left: 0;
    bottom:  0;
    right: 0; */
    background-color: white;
    padding: 5px;
    border: 1px solid lightgrey;
    border-radius: 10px;
    
}

.container-input-search > .input-form {
    padding: 8px 12px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #CFD6E6;
    border-radius: 4px;
}

.button-add-this{
    background-color: #008CBA;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
}

.container-other{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.container-loadmore{
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-loadmore{
    background-color: white;
    border: 1px solid lightblue;
    padding: 5px 10px;
    color: black;
    border-radius: 5px;
}

.container-show-dropdown::-webkit-scrollbar {
    /* width: 0; */
    width: unset;
}

.item-list-drop:hover{
    background-color: lightblue;
    cursor: pointer;
}

.containerHeader{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 64px;
    background-color: var(--new-primary-primary);
    background-image: url("/extra-images/home/mainheader.png");
    background-repeat: no-repeat;
    background-position:  center top;
    background-size: 1280px 597px;
}


.containerRow{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin: 16px auto;
    max-width: 536px;
    background: #F5F8FF;
    border-radius: 16px;
    position: relative;

}

.containerCardBoot{
    padding: 16px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    /* height: fit-content; */
}

.hoveredContainer{
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #008CBA;
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .5s ease;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    display: flex;
    /* bottom: 0;
    height: 100%; */
}

.cardRow{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    max-width: 536px;
}

.containerRow:hover{
    cursor: pointer;
}

.containerRow:hover .hoveredContainer {
    bottom: 0;
    height: 100%;
  }



.reasonBlock{
      max-width: 1088px;
      background-color: var(--new-secondary-dark);
      display: flex;
      flex-direction: row;
      padding:24px;
      margin-top: 64px;
      margin-bottom: 64px;
      border-radius: 6px;
      position: relative;
  }

.cardReasone{
    max-width: 248px;
    margin-right: 16px;
}

.reasonBlock:last-child{
    margin-right: 0;
}

.track{
    display: flex;
    width: 100%;
   
}

.transition-move{
    transition: transform .5s ease-in;
}


.nav-progress{
   display: none;
}


.containerHeader > .new_headline_h3{ 
    max-width: 720px;
}

.containerHeader > .new_body1_regular{ 
    max-width: 484px;
    text-align: center;
}

.bootcampBlock{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}


.bootcampBlock > .new_headline_h4 {
    text-align: center;
    margin-top: 64px;
    margin-bottom: 4;
}

.bootcampBlock > .new_body1_regular {
    text-align: center;
}

.listBootcamp{
    display: flex;
    max-width: 1040px;
    flex: 0 1 1040px;
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* width: 100%; */
    /* justify-content: center; */
    /* flex: 1 1 100vw;
    overflow-x: scroll; */
    justify-content: flex-start;
    flex-wrap: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ 
    
}

.listBootcamp::-webkit-scrollbar {
    display: none; }

.listBootcampItem{
    flex: 1 0 248px;
    /* flex: 0 0 auto; */
   
    /* box-sizing:border-box; */
    /* white-space: nowrap; */
}

.cardBootcamp:hover{
    cursor: pointer;
    opacity: 0.05;
    background: #234B88;
    border-radius: 16px;
}

.cardBootcamp{
    flex: 0 0 248px;
    max-width: 248px;
    margin-right: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.imageBootcamp{
    max-height: 146px;
    min-height: 146px;
    object-fit: contain;
}

.containerCardBootcamp{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 8px 8px;
}

.containerCardBootcamp > .new_overline{
    margin-bottom: 4px;
    margin-top: 16px;
}

.containerCardBootcamp > .new_headline_6{
    margin-bottom: 6px;
}

.blockLevel{
    display: flex;
    flex-direction:row;
    align-items: center;
}

.levelImage{
    width: 24px;
    height: 14.3px;
}

.blockLevel > .new_body2_regular{
    margin-bottom: 0;
    margin-left: 8px;
}

/* .listBootcamp{
    position:relative;
} */

.listBootcampItem {
   
   
    height: 387px;
   
}

.bootcampBlock{
    position:relative;
}

/*right tolltip*/

.listBootcampItem .tooltip-right {
    min-width:200px;
    width: 360px;
    max-width: 360px;

    /* top:50%;
    left:20%; */
    margin-left:0px;
    transform:translate(0, -50%);
    padding:10px 24px;
    color:#444444;
    background-color:white;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.8);
    visibility:hidden; 
    opacity:0; 
    transition:opacity 0.8s;
    }
    
.cardBootcamp:hover + .tooltip-right {
visibility:visible; opacity:1;
}

.tooltip-right:hover {
    visibility:visible; opacity:1;
    }

.listBootcampItem .tooltip-right .arrow {
position:absolute;
top:50%;
right:100%;
margin-top:-12px;
width:12px;
height:24px;
overflow:hidden;
}

.listBootcampItem .tooltip-right .arrow::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:0;
top:50%;
transform:translate(50%,-50%) rotate(-45deg);
background-color:#EEEEEE;
box-shadow:0 1px 8px rgba(0,0,0,0.8);
}
/*end right*/  
    
    
    /*start left tip*/
.listBootcampItem .tooltip-left {
    min-width:200px;
    width: 360px;
    max-width: 360px;
    /* top:50%;
    right:100%; */
    margin-right:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:white;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.8);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.cardBootcamp:hover + .tooltip-left {
    visibility:visible; opacity:1;
}

.tooltip-left:hover {
    visibility:visible; opacity:1;
}

/* tooltip-left:hover + .cardBootcamp{
    opacity: 0.05;
    background: #234B88;
    border-radius: 16px;
} */
/* .listBootcampItem:focus .tooltip-left {
visibility:visible; opacity:1;
} */

.listBootcampItem .tooltip-left .arrow {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.listBootcampItem .tooltip-left .arrow::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.8);
}
/*end left*/


.list-materi > li{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.list-materi > li > i{
    /* margin-top: 6px */
    font-size: 16px;
}


.scholarship-info > li {
    color: var(--new-additional-green);
}

.daftarBootcamp{
    width: 100%;
    height: 44px;
    /* left: 24px;
    top: 495px; */

    /* NEW/Secondary/Secondary */

    background: #2761BA;
    border-radius: 6px;
    margin: 16px 0;


    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    /* identical to box height */


    color: #FFFFFF;
}


.daftarBootcamp--see-all{
    max-width: 153px;
    margin-top: 0;
}


.scholarship-block{
    display: flex;
    flex-direction: row;
    padding: 0 auto;
    max-width: 1088px;
    margin: 0 auto;
    margin-top: 60px;
}

.scholarship-detail{
    flex: 0 1 536px;
    margin-right: 16px;
}

.scholarship-image-container{
    flex: 0 1 536px;
    max-height: 258px;

}

.scholarship-image{
    /* max-width: 536px; */
    /* height: 100%; */
    object-fit: contain;
    max-height: 258px;
}


.pembayaran-block{
    margin: 50px auto;
    /* padding: 0 20px; */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 1088px;

    /* height: fit-content; */
}


.pembayaran-block > .new_headline_h4{
    margin-bottom: 32px;
}

.list-pembayaran-container{
    display: flex;
    flex-direction: row;
}

/* .list-pembayaran-container:first-child{
   margin-right: 16px;
} */

.list-pembayaran-item-container{
    display: flex;
    flex-direction: row;
}

.pemayaran-detail > ul{
    margin-left: 0;
}

.pemayaran-detail > ul > li > i{
    margin-top: 6px;
}
.pemayaran-detail > ul > li{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.pemayaran-detail > ul > li:last-child{ 
    margin-top: 20px;
}

.pembayaran-image{
    height: 144px;
    width: 144px;
    margin-right: 16px;
}

/* online course list */

.online-course-block{
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 1088px;
}

.online-course-block >h3,p {
    align-self: flex-start;
}

.online-course-block > p.new_body1_regular.subtitle {
    align-self: center;
    margin-bottom: 43px;
    text-align: center;
}

.list-online-course-container{
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.cardImageEvent{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-color: white;
    border-radius: 16px;
    position: relative;
}

.speaker-event{
    max-width: 104px;
    height: 146px;
    object-fit: cover;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.detail-event-image{
    margin-left: 8px;
  
}
.codingid-logo{
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    background-color: #2761BA;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.showTablet{
    display: none;
}

.containerCardBootcamp > p{
    margin-bottom: 4px;
}

.new_body2_regular.new_body2_regular--strikethrough{
    text-decoration: line-through;
}

.list-online-course-item > .cardBootcamp.list-online-course-item-container { 
    min-width: 248px;
}

.list-online-course-item > .cardBootcamp.list-online-course-item-container:hover{
    opacity: 1;
    background: #ECF0FA;
}

.course-button-all{
    margin-top: 32px;
}

/* online course list */

/* comparison block */

 .wrapper-block{
     background-color: white;
     width: 100vw;
 }

.comparison-block{
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 1088px;
    margin-bottom: 0;
    padding-top: 60px;
}

.hidedesktop {
    display: none;
}

.comparison-block > .subtitle {
  
    align-self: center;
    margin-bottom: 64px;
}

.header-table > .new_headline_5 {
    margin-bottom: 4px;
}

.header-table > .new_body1_regular {
    margin-bottom: 16pxpx;
}

.table-comparison > table > tr > td > h3 {
    margin-bottom: 4px;
}

tr > td > .new_body1_regular {
    margin-bottom: 0px;
}

.table-comparison > table > tr > td {
    line-height: unset;
}



.list-check{
    /* margin-top: 16px; */
    /* margin-bottom: 16px; */
}

.list-check > li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 4px;
    
}

.list-check > li > i {
    margin-top: 4px;
    margin-right: 8px;
}

th, td {
    padding: 15px;
}

.last-row > td {
    border-color: transparent;
}

.blockSponsoreMore{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 496px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.container-sponsor {
    padding-top: 64px;
    padding-bottom: 44px;
}
.seemore:hover{
    cursor: pointer;
}

.seemoreicon{
    transform: rotate(90deg);
}

.seemoreicon.up{
    transform: rotate(-90deg);
}

.modal-open {
    display: block;
}



#FormBootcampContainer {
    min-height: 97vh;
    /* max-width: 60vw; */
    max-width: 800px;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 auto;
    background-color: white;
    flex-direction: column;
    position: relative;
    /* padding: 24px; */
}

#modal-registration > .modal-body {
    /* padding-top: 10px */
    padding: 10px;
}

.notif-alert-form{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: lightblue; */
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.notif-alert-form--show{
    display: flex;
}

.container-alert{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    min-width: 300px;
    min-height: 200px;
    max-width: 400px;
    max-height: 200px;
    border-radius: 20px;
    padding: 24px;
}


.header-bootcamp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 24px;
    border: 1px solid #CFD6E6;
    border-width: 0;
    border-bottom-width: 1px;

}

.header-bootcamp > .new_body1_semibold {
    margin-bottom: 0;
}

.close-modal-button{
    background-color: white;
}

.step-form-block{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
}

.item-step{
    padding: 4px 8px;
    gap: 10px;

    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* NEW/Primary/Primary */
    border: 1px solid #B8BECC;
    
    border-radius: 8px;
}

.item-step--active{
    background: #3EC3DC;
}



.item-step > .new_body1_semibold {
    margin: 0;
}

.item-step > i {
    display: none;
}

.item-step--success {
    background-color: white;
    border-color: #3EC3DC;
    border-width: 3px;
}

.item-step--success > i {
    display: block;
    color: #3EC3DC;
}

.item-step--success > .new_body1_semibold{
    display: none;
}

.step-line{
    width:  44px;
    border: .5px solid #B8BECC;
    margin: 0 8px;
   
}

.track-form{
    /* transition: all 0.5s ease-in-out; */
}

.main-form{
    padding: 0 0;
    width: 100%;
    position: relative;
    min-height: 50vh;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

.page {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 24px;
    opacity: 0;
    width: 100%;
    transition: opacity 2s ease-in-out;
    /* transition: opacity 1s ease-in-out; */

}

.page > .new_headline_6{
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

.level-box-form{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.tooltip-level{
    position: absolute;
    top: 0px;
    left: 0;
    background: #234B88;
    border-radius: 8px;
    padding: 16px
}

.level-box{
    width: 248px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #B8BECC;
    
    border-radius: 8px;
    background: white;
    position: relative;
}



.level-box > h5{
    margin-bottom: 0;
}

.block-kelas-form{
    padding: 24px 0
}

.container-kelas-choice{
    padding: 17px;
    border: 1px solid #B8BECC;
    
    border-radius: 8px;
    height: 240px;
    overflow-y: scroll;
}

.container-choice{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 25px;
}

.container-choice > label {
    margin-bottom: 0;
    margin-left: 6px;
}

.container-choice > input {
    margin-top: 0;
    width: 20px;
    height: 20px;
}

.button-next-container{
    display: flex;
    justify-content: flex-end;
}

.footer-form-block{
    width: 100%;
    padding: 0 24px 24px;
}

.footer-form-block > .new_body2_regular{
    max-width: 80%;
}

.page-1{
    display: none;
}

.page.page-2 > .new_headline_6{
    margin-bottom: 4px;
}

.page.page-2 > .new_body1_regular{
    margin-bottom: 24px;
    text-align: center;
    width: 100%;
}

.block-input-item {
    margin-bottom: 24px;
    position: relative;
}

.error-message-input-item{
    position: absolute;
    left: 0;
    bottom: -20px;
    color: red
}

.block-input-item > .new_body2_regular{
    margin-bottom: 4px;
}

.block-input-item > .input-form{
    padding: 8px 12px;

    width: 100%;
    min-height: 44px;

    background: #FFFFFF;
    /* NEW/Neutral/N80 */

    border: 1px solid #CFD6E6;
    border-radius: 4px;
}

.daftarBootcamp--no-background{
    background-color: white;
    border: 1px solid #234B88;
    border-radius: 6px;
    color: var(--new-secondary-dark)
}

.button-next-container.space-between{
    justify-content: space-between;
}

.block-input-item--page-3 > .contained-choice {
    border: 1px solid #CFD6E6;
    border-radius: 8px;
    padding: 24px 24px 0
}

.block-input-item--page-3 > .contained-choice > .container-choice > .new_body2_regular {
    margin-top: 2px;
}

.container-choice > .input-form{
    padding: 8px 12px;

    width: 100%;
    height: 44px;

    background: #FFFFFF;
    /* NEW/Neutral/N80 */

    border: 1px solid #CFD6E6;
    border-radius: 4px;
    margin-left: 8px;
}

.daftarBootcamp.daftarBootcamp--see-all.daftarBootcamp--no-background.button--disable{
    opacity: 0;
    pointer-events: none;
}

/* .level-box-form:first-child{
    margin-right: 20px;
    
}

.level-box + .level-box {
    margin-right: 20px;
} */

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

    .footer-form-block > .new_body2_regular{
        max-width: unset;
    }

    .container-alert {
        margin: auto;
        /* width: 95vw; */
    }

    #FormBootcampContainer {
        max-width: unset;
        min-height: 100vh;
    }

    #modal-registration > .modal-body {
        padding: 0;
    }

    .level-box-form{
        flex-wrap: wrap;
    }

    .level-box{
        width: calc( 100vw - 48px );
        margin-bottom: 16px;
    }

    .block-level-form {
        margin-top: 24px;
    }


    .blockSponsoreMore{
        visibility: visible;
        background: linear-gradient(360deg, #FFFFFF 40.91%, rgba(255, 255, 255, 0) 180.68%);
    }
    .container-sponsor{
        padding-top: 48px;
    }
    .container-sponsor--height{
        height: 530px;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
        /* background: linear-gradient(360deg, #FFFFFF 40.91%, rgba(255, 255, 255, 0) 180.68%); */
        /* background-image: linear-gradient(to bottom, transparent 80%, #bbbbbb); */
    }

   .blockSponsoreMore--open {
       top: unset;
       bottom: 0;
   }

   .hidemobile {
        display: none;
    }

    .hidedesktop {
        display: block;
    }

    tr > .comparison-mobile--hidden{
        display: none;
    }

    th, td {
       width: 233px;
       padding: 11px;
    }

    .table-comparison{
        width: 100vw;
        overflow-x: scroll;
        padding: 0 20px;
    }

    .list-check > li {
        width: 240px;
    }


    .list-online-course-container {
    
        overflow: scroll;
    }

    .course-button-all{
        max-width: unset;
        margin-top: 20px
    }

    /* pembayaran block */

    .pembayaran-block{
        margin: 32px auto;
    }

    .pembayaran-block > .new_headline_h4{
        margin-bottom: 32px;
    }
    .list-pembayaran-container{
        display: flex;
        flex-direction: column;
    }

    .list-pembayaran-item-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin: 0 20px 32px;
        background-color: white;
        padding: 24px;
        border-radius: 16px;
    }

    .pemayaran-detail > ul > li:last-child{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 8px;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 15px;
        margin-top: 8px;
        /* identical to box height */

        text-align: right;

        /* NEW/Neutral/N10 */

        color: #2B2E33;
    }

    .pembayaran-image{
        margin-bottom: 16px;
    }

   /* pembayaran block */
    

    .cardBootcamp:hover + .tooltip-left {
        visibility:hidden; opacity:0;
        }

    .cardBootcamp:hover + .tooltip-right {
        visibility:hidden; opacity:0;
        }

    .daftarBootcamp--see-all{
        max-width: unset;
        margin: 0 20px 16px;
        width: calc( 100vw - 40px );
    }

    td > a > .daftarBootcamp--see-all{
        max-width: unset;
        margin: 0 ;
        /* width: calc( 100vw - 40px ); */
    }

    /* .bootcampBlock{
        max-width: 100vw;
        padding: 0;
    } */
    .listBootcamp{
        max-width: 100vw;
        margin-left: 20px;
    }
    .containerHeader > .new_headline_h3{
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
        width: 100%;
    }

    .containerHeader > .new_body1_regular{
        margin-left: 20px;
        text-align: left;
        margin-right: 20px;
        max-width: 100%;
    }

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

    .nav-progress{
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .progress-bar {
       
        height: 5px;
        width: 100%;
        margin-left: 4px;
        margin-right: 4px;
       
        /* &--primary {
          z-index: 2;
        } */
    }
    
    .progress-bar__fill{
        width: 0;
        height: inherit;
        background: var(--new-primary-primary);
        
    }
    .transition-nav{
        transition: all 3s;
    }

    .progress-bar__fill--primary{
        z-index: 2;
        background: var(--new-primary-primary);
        width: 100%;
    }

    .containerHeader{
       
        background-image: none
    }

    .reasonBlock{ 
        width: 100%;
        position: relative;
        min-height: 193px;
        overflow: hidden;
        border-radius: 0;
        padding: 0;
        margin-top: 20px
       
    }

    .cardReasone{
        /* opacity: 0; */
        display: block;
        max-width: 100%;

        /* display: none; */
        max-height: 193px;
        width: 100%;
        position: absolute;
        padding: 24px 20px;
        /* transition: 200ms opacity ease-in-out; */
        /* transition-delay: 200ms; */
       
    }

    /* .cardReasone[data-active]{
        opacity: 1;
        display: block;
        width: 100%;
        transition-delay: 0ms;
    } */

    .cardReasone > .new_body1_semibold{
       text-align: center;
    }

    .cardReasone > .new_body2_regular{
        text-align: center;
        margin-top: auto;
     }

     .listBootcamp{
         justify-content: flex-start;
     }

     .scholarship-block{
        margin-top: 32px;
        flex-direction: column-reverse;
        align-items: center;
    }

    .scholarship-detail{
        margin-right: 0;
        padding: 16px 20px;
        flex: 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .scholarship-detail > .new_headline_h4{
        text-align: center;
    }

    .scholarship-detail > .new_body1_regular{
        text-align: center;
    }

    .scholarship-detail > .new_overline{
        display: none;
    }

    .daftarBootcamp.daftarBootcamp--see-all.daftarBootcamp--scholarship {
       
        color: blue;
        background-color: transparent;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        /* identical to box height */


        /* NEW/Secondary/Dark */

        color: #234B88;

        margin : 0 auto
    }

    .scholarship-image{
        
        width: 50vw;
        height: auto
    }

    .scholarship-image-container{
        flex: 0 0 0;
    }

}

@media only screen and (min-width: 600px) and (max-width: 799px)  {

    #FormBootcampContainer {
        max-width: 95vw;
        
    }

    tr > .comparison-mobile--hidden{
        display: none;
    }

    th, td {
       width: 233px;
       padding: 11px;
    }

    .table-comparison{
        width: 100vw;
        overflow-x: scroll;
        padding: 0 30px;
    }

    .list-check > li {
        width: 240px;
    }

    /*   
    online course */
    .online-course-block{
      
        /* max-width: 568px; */
        max-width: calc(100vw - 14vw);
        padding: 0;

    }

    .list-online-course-container{
        flex-wrap: wrap;
    }

    .list-online-course-item > .cardBootcamp.list-online-course-item-container {
        flex-direction: row;
        align-items: flex-start;
        min-width: 259px;
        margin-bottom: 40px;
    }

    .list-online-course-item >  .cardBootcamp.list-online-course-item-container > .imageBootcamp{
        width: 64px;
        height: 64px;
        min-height: unset;
        margin-top: 3px;
        border-radius: 6px;
        margin-right: 11px;
    }

    .cardImageEvent{
        width: unset;
    }

    .speaker-event{
        width: 64px;
        height: 64px;
        border-radius: 6px;
    }

    .showTablet{
        display: block;
    }

    .detail-event-image{
        display: none;
    }

    .codingid-logo{
        display: none;
    }

    /*   
    online course */

    /* bootcamp card */

    .containerCardBootcamp > .new_overline{
        margin-bottom: 4px;
        margin-top: 0;
    }

  /* pembayaran block */

    .pembayaran-block{
        margin: 32px auto;
    }
    .list-pembayaran-container{
        display: flex;
        flex-direction: column;
    }



    .list-pembayaran-item-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 32px;
        background-color: white;
        padding: 24px;
        border-radius: 16px;
    }

    .pembayaran-image{
        margin-bottom: 16px;
    }

    /* pembayaran block */
        

       
    .scholarship-block{
        margin-top: 32px;
        padding: 0 20px;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1280px){

    #FormBootcampContainer {
        max-width: 777px;
        width: 777px;
      
    }

    /* online course */

    .online-course-block{
      
        /* max-width: 700px; */
        padding: 0 ;
        max-width: calc(100vw - 14vw);
    }


    .list-online-course-container{
        flex-wrap: wrap;
    }

    .list-online-course-item > .cardBootcamp.list-online-course-item-container {
        flex-direction: row;
        align-items: flex-start;
        min-width: 259px;
        margin-bottom: 40px;

    }

    .list-online-course-item >  .cardBootcamp.list-online-course-item-container > .imageBootcamp{
        width: 64px;
        height: 64px;
        min-height: unset;
        margin-top: 3px;
        border-radius: 6px;
        margin-right: 11px;
    }

    .cardImageEvent{
        width: unset;
    }

    .speaker-event{
        width: 64px;
        height: 64px;
        border-radius: 6px;
    }

    .detail-event-image{
        display: none;
    }

    .codingid-logo{
        display: none;
    }

    .showTablet{
        display: block;
    }

    /* online course */

    
    /* bootcamp card */

    .containerCardBootcamp > .new_overline{
        margin-bottom: 4px;
        margin-top: 0;
    }

    /* bootcamp */

    .pembayaran-block {
        /* max-width: 800px; */
        max-width: calc(100vw - 14vw);
    }

    .scholarship-block{
        margin-top: 32px;
        padding: 0 20px;
    }

}