@media (max-width: 360px){
     /*Learner page*/
    .tabpanel-getstarteddescription{
        width: 298px !important;
        margin: 0px 16px 0px 16px !important;
    }
    .my-hub-img {
        width: 100% !important;
    }
    .row.dynamicGetStarted {
        flex-direction: column !important;
    }
    .getstarted-container{
        width: 330px !important;
        margin-left: 0px !important;
    }
    #enterpriseLearning{
        margin-top: -32px !important;
        width: 310px;
        margin-left: 21px;
    }
    .backdrop{
        width: 330px !important;
        height: 580px !important;
        padding: 24px !important;
        gap: 32px !important;
        border-radius: 8px !important;
    }
    #get-started-container{
        flex-direction: column;
    }
    #backDropJoinProgramLearning{
        padding-left: 14px !important;
        margin-top: 32px !important;
    }
    #helpCenterHeader{
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 32px !important;
        text-align: center !important;
    }
    #helpCenterContainer{
        width: 360px !important;
    }
    #helpCenterContent{
        text-align: center;
    }
    ul.bapi-link-list.bapi-link-list--horizontal-on-medium.bapi-link-list--spaced-between{
        display: flex;
        flex-direction: column !important;
    }
    .bapi-common-footer .bapi-link-list {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        float: none;
    }
    .bapi-column-bapi-privacy{
        float: none !important;
        align-items: center !important;
        display: flex !important;
        justify-content: center !important;
    }
    .btnreadyclass{
        padding-left: 0px !important;
        width: 330px;
        display: flex;
        justify-content: center;
        padding-right: 0px !important;
    }
    .tabpanel-description{
        width: 327px;
        text-wrap: wrap !important;
    }
    .sub-tabpanelSection{
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 327px;
    }
    .sub-tabpabel-prefix{
        width: 230px;
        margin-bottom: 69px;
    }
    .sub-tabpanel{
        width: 360px !important;
    }
    .info-icon{
        margin-bottom: 65px !important;
    }
    .learningcourse-thumbnails-container{
        width: 336px;
        margin: 32px 0px;
        padding-top: 0px !important;
    }
    #coursethumbnailContainer{
        width: 336px !important;
    }
    #coursethumbnailContainer .col-sm-6.col-md-4{
        padding: 0px !important;
        width: 336px !important;
    }
    .courseSchedule{
        width: 335px !important;
    }
    .courseStart{
        width: 304px !important;
    }
    .courseimage{
        width: 335px !important;
    }
    .learningthumbnail{
        width: 329px;
    }
    .learningInfo:hover .btnstartcourse{
        left: 27px;
    }
    #LearningHeader{
        font-size: 24px !important;
        font-weight: 600;
        line-height: 32px;
        text-align: center !important;
        height: 80px !important;
        width: 330px;
        padding: 0px !important;
    }
    #LearningHeaderContainer{
        height: 80px !important;
    }

    #dynamicGetstartedthumbnailContainer{
        width: 330px;
        margin-bottom: 0px !important;
    }
    #learningcourse-container{
        padding: 12px !important;
        width: 360px !important;
    }
    #mylearningtabContainer{
        padding: 0px !important;
    }
    #EnterpriseChampAssessmentsHeader{
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 32px !important;
        text-align: center !important;
        width: 349px !important;
    }
    #EnterpriseChampAssessmentsContainer{
        margin-bottom: 32px !important;
    }
    .champ-feedback-img{
        display: none;
    }
    .assessment-tab-container{
        width: 349px !important;
        padding: 12px 15px 26px 15px !important;
    }
    .faq-tabs-nav{
        width: 349px;
        height: 48pxpx;
        padding: 32px 0px 0px 0px;
    }
    #assessments-tabpanel{
        width: 349px !important;
    }
    #enterpriseAssessmentsContainer{
        padding-left: 4px !important;
        margin-bottom: 0px !important;
        padding-top: 0px !important;
    }
    #dev-env-tabpanel{
        width: 330px !important;
        text-wrap: wrap;
    }
    .main-div-top-sub{
        width: 305px !important;
    }
    .experimentHeader{
        text-align: center !important;
    }
    .main-div-bottom{
        flex-direction: column !important;
        width: 329px !important;
        padding: 0px 66px 0px 66px !important;
        gap: 48px !important;
    }
    .main-div-bottom-text{
        width: 289px !important;
        margin: 0px 21px 22px 21px !important;
        height: 40px !important;
    }
    .experimentTitle{
        text-align: center !important;
    }
    .main-subdiv-bottom{
        align-items: center !important;
    }
    .dev-envbyot-title{
        text-wrap: wrap;
    }
    .main-div-bottom-text{
        text-wrap: wrap;
        text-align: center;
    }
    .final-app-challenge-img{
        padding: 20px 65px 0px 76px !important;
    }
    #mylearningtabContainer{
        margin-bottom: 0px !important;
    }
    .final-app-upload-video{
        width: 130px;
    }
    .final-app-challenge-block{
        margin-bottom: 0px !important;
    }
    .final-app-challenge-content{
        margin-bottom: 0px !important;
        width: 291px !important;
    }
    .upload-video-text {
        width: 291px !important;
    }
    .upcoming-events-text{
        margin-bottom: 0px !important;
    }
    .no-sessions-text{
        text-wrap: nowrap;
    }
    .learnerNoSessions{
        width: 280.95px;
        height: 158px;
        margin-bottom: -32px;
    }
    .tab-content{
        width: 351px;
        padding-right: 18px;
    }
    .imagedesctext{
        font-size: 17px !important;
        width: 250px !important;
    }
    .timezone-container{
        width: 298px !important;
        flex-direction: column !important;
        align-items: normal !important;
        margin-bottom: 20px !important;
    }
    .entitylist{
        width: 285px !important;
    }
    .top-learners-body{
        width: 325px !important;
        margin-left: 5px !important;
    }

    div#getstartedthumbnailContainer {
        width: 360px !important;
        flex-direction: column !important;
        gap: 32px !important;
        margin-top: 0px !important;
        margin-right: 10px !important;
    }

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

    .region-filter{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
        margin-top: -20px !important;
        border-bottom: 0px !important;
    }
    select#learningtabs{
        padding: 10px !important;
    }

    /*Hub welcome page*/
    .program-title{
        width: 330px;
        gap: 4px;
        display: flex;
        margin-left: 15px;
        margin-right: 15px;
    }
    .signup-enterprise{
        margin-left: 15px;
        margin-right: 15px;
    }
    .ent-text{
        width: 330px;
    }
    .two-boxes{
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
    }
    .two-boxes-getStarted{
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        margin-right: 15px;
        padding: 25px 12px;
        align-items: center;
    }
    .img-get-started{
        width: 198px;
        height: 198px;
    }
    .mainSection{
        margin: 0px !important;
        width: 300px !important;
    }
    .progress-indicator{
        border-right: 0px solid #e4e4e4 !important;
    }
    .formHeadline {
        padding: 24px 0px 0px 0px !important;
    }
    .formLabel{
        padding: 15px 0px 0px 0px !important;
    }
    #ig5k89{
        padding: 0px !important;
    }
    .mainSection{
        margin-bottom: 24px !important;
    }
    .horizontalLine {
        margin-left: -24px !important;
        margin-right: -24px !important;
        border-top: 0px solid #e4e4e4 !important;
    }
    .signup-hubuser{
        margin-left: 15px !important;
    }
    .two-boxes-getStarted{
        align-items: center !important;
    }
    
    /*Enterprise page*/
    .ent-section{
        width: 330px !important;
        margin: 0px !important;
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 24px !important;
    }
    .formHeadline{
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
    .formLabel{
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
    .subSectionSecond, .subSectionThird {
        width: 330px !important;
    }
    hr#enterpriseHorizontalLine {
        margin-left: 0px !important;
        width: 330px !important;
    }
    div#i48u0i {
        padding-top: 0px !important;
    }
    .crmEntityFormView .section:first-child{
        padding-top: 0px !important;
    }

    /*Course Module page*/
    #learning-plan-module{
        flex-direction: column !important;
    }
    .course-name{
        text-wrap: balance;
        width: 210px;
    }
    .next-course{
        flex-direction: column-reverse;
    }
    #nextModule{
        width: 33.33px;
        margin-left: 282px;
        margin-top: 10px;
    }
    #learning-plan-module .columnBlockLayout {
        margin-bottom: -48px !important;
        gap: 10px !important;
        width: 330px;
    }
    .module-status{
        margin-bottom: 50px;
        margin-right: 212px;
    }
    div#learnerSessionCommunity {
        flex-direction: column;
        height: 490px;
    }
    .module-component{
        min-height: 590px !important;
    }
    .modules-name{
        height: 590px;
        min-height: 590px !important;
        overflow-y: scroll;
        scrollbar-width: thin;
    }
    .module-status-img{
        margin-left: 120px;
    }
    button#prevModule {
        margin-left: 16px;
    }
    #noliveQASession{
        flex-direction: column !important;
        height: 175px;
    }
    .noSessionContainer{
        padding: 36px 0px 64px 0px !important;
    }
    .noSession{
        margin-top: -91px;
    }
    .upcomingQASession{
        display: none;
    }
    .moreQASession{
        display: flex !important;
    }

    /* dev environment */
    .dev-env-details{
        flex-direction: column !important;
        width: 298px !important;
    }
    .how-it-works-title{
        width: 298px !important;
        text-wrap: wrap;
        text-align: center;
    }
    .how-it-works-details{
        flex-direction: column !important;
    }
    .how-it-works-step:nth-child(odd):not(:last-child):after{
        transform: rotate(86.085deg) !important;
        top: 349.28px !important;
        left: -13.57px !important;
    }
    .how-it-works-step:nth-child(even):not(:last-child):after{
        transform: rotate(95.085deg) !important;
        top: -63.72px !important;
        left: 116.43px !important;
    }

    /* Leaderboard */
    .runner-name {
        width: 108px !important;
        display: flex;
        justify-content: flex-start !important;
    }
    .runner-details{
        flex-direction: column;
        width: 108px;
        align-items: flex-start;F
    }
    
    /* Help Center */
    .container.faqsContainer {
        width: 360px;
    }

    /* Course Module pop-up */
    .modal-content.champ-modal-content {
        width: 330px;
        height: 260px !important;
    }
    #alertModal {
        width: 360px;
        display: flex !important;
    }
    .modal-header{
        margin-left: 12px;
    }
    .col-md-2.learnapi-image {
        display: flex;
        justify-content: center !important;
    }
    .resources-for-learnapi{
        margin-top: -28px !important;
    }
    .my-hub-img{
        height: 60px;
        width: 326px !important;
    }
    .upload-app-challenge{
        width: 291px !important;
    }

    /* FAC */
    .final-app-challenge-body{
        width: 291px !important;
    }
    .upload-video-info{
        width: 291px !important;
    }
    iframe#upload-file {
        width: 291px !important;
    }
    .upload-video-option{
        width: 291px !important;
    }
}

@media (min-width: 361px) and (max-width: 640px){
    .dc-logged-user-name{
        text-align: right !important; 
        display : flex !important;
    }
    .bapi-top-bar__brand{
        display: none !important ;
    }
    #LearningHeader{
        text-align: center !important;
    }
    .getstarted-container{
        width: 610px !important;
        margin-left: 0px !important;
    }
    .tab-content{
        padding-left: 0px !important;
    }
    #enterpriseLearning{
        flex-direction: column !important;
        width: 450px;
        height: 288px;
        margin-top: 0px !important;
        gap: 16px !important;
    }
    #dynamicGetstartedthumbnailContainer{
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
        width: 610px;
        padding: 8px 80px 0px 80px;
    }
    .imagevideoplayer{
        height: 120px !important;
    }
    .backdrop{
        width: 571px !important;
        height: 392px !important;
        padding: 24px !important;
        gap: 32px !important;
        border-radius: 8px !important;
    }
    #backDropJoinProgramLearning{
        padding-left: 15px !important;
        margin-top: 32px;
    }
    .tabpanel-getstarteddescription{
        width: 578px !important;
        text-wrap: wrap !important;
    }
    .tabpanel-description{
        width: 582px !important;
        padding: 0px 16px 0px 16px !important;
        text-wrap: wrap;
    }
    #final-app-challenge-tabpanel{
        width: 580px !important;
    }
    .final-app-challenge-block{
        padding: 32px !important;
    }
    #dynamicGetstartedthumbnailContainer .dynamicGetStarted:last-of-type {
        margin-top: -15px !important;
    }
    #assessments-tabpanel{
        width: 610px !important;
        padding-right: 25px !important;
    }
    #EnterpriseChampAssessmentsHeader{
        text-align: center !important;
    }
    #EnterpriseChampAssessmentsContainer{
        margin-bottom: 0px !important;
    }
    .sub-tabpanelSection{
        width: 606px !important;
    }
    .sub-tabpabel-prefix{
        width: 100px !important;
    }
    .sub-tabpanelSection{
        width: 606px !important;
    }
    #coursethumbnailContainer{ 
        flex-direction: row;
        display: flex;
        width: 640px !important;
        margin-left: -6px;
    }
    .main-div{
        width: 580px;
    }
    .champ-feedback-img{
        margin: 0px !important;
        width: 241px !important;
        height: 241px !important;
    }
    .main-div-bottom{
        width: 580px !important;
        padding: 0px 20px 0px 20px !important;
        gap: 80px !important;
    }
    .dev-env-byotImg{
        margin-left: -20px !important;
    }
    .main-div-bottom-text{
        margin: 47px 87px 47px 68px !important;
    }
    .experimentTitle{
        width: 260px !important;
    }
    .final-app-challenge-img{
        padding: 0px 32px 0px 0px !important;
        width: 100px !important;
        margin-bottom: 0px !important;
        margin-top: 190px;
    }
    .col-md-12.columnBlockLayout.final-app-challenge-block {
        display: flex;
        flex-direction: row;
    }
    img.final-app-upload-video {
        width: 159.62px !important;
        height: 159.62px !important;
    }
    .livesessions-container{
        width: 585px !important;
        height: 896px !important;
    }
    .final-app-challenge-body{
        width: 381px !important;
    }
    .upload-video-info{
        text-wrap: pretty;
        width: 360px !important;
    }
    .entitylist{
        width: 546px !important;
    }
    .top-learners-header{
        width: 610px !important;
    }
    .top-learners-body{
        width: 610px !important;
    }
    #mylearningtabslist{
        width: 565px !important;
        overflow-x: auto;
        scrollbar-color: #C8C6C4 lightblue;
        scrollbar-width: thin;
    } 
    ::-webkit-scrollbar{
        height: 12px;
        width: 12px;
    }
    div#mylearningtabContainer {
        width: 640px;
    }
    #coursethumbnailContainer .col-sm-6.col-md-4 {
        padding-right: 1px !important;
    }

    .row.sectionBlockLayout.learningcourse-thumbnails-container {
        width: 610px !important;
    }

    div#mylearningContainer {
        width: 633px !important;
    }

    /*Hub welcome page*/
    .program-title {
        margin-left: 15px;
        margin-right: 15px;
        width: 610px; 
    }
    .signup-enterprise{
        margin-left: 15px;
        margin-right: 15px;
        width: 610px;
    }
    .two-boxes{
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
    }
    .container.sectionDown{
        margin-left: 15px;
        margin-right: 15px;
    }    
    
    /*Course module page*/
    .course-name{
        width: 335px;
    }
    .modules-name{
        width: 578px;
        height: 550px;
        min-height: 550px !important;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .sessionMainContainer{
        width: 271px;
        height: 279.6px;
    }
    div#noliveQASession {
        height: 256px;
        flex-direction: column !important;
    }
    .noSessionContainer{
        padding: 0px 0px 64px 0px !important;
    }
    .noSession{
        margin-top: -46px;
    }
    .sessionLabel{
        text-wrap: nowrap;
    }
    a#communityLinkBtn {
        margin-top: 70px;
    }
    .video-or-feedback{
        padding: 8px 16px 0px 16px !important;
    }
    .module-component{
        width: 578px !important;
        min-height: 550px !important;
    }
    .upcomingQASession{
        display: none;
    }
    .moreQASession{
        display: flex !important;
    }    

    /* dev environment tab */
    .how-it-works-step{
        width: 168px !important;
        height: 200px !important;
    }
    .how-it-works-details{
        margin-left: 12px;
    }
    div#step1 {
        margin-right: 71px;
    }
    div#step2 {
        margin-left: -65px;
    }
    .how-it-works-step:nth-child(odd):not(:last-child):after{
        width: 100px;
    }
    .how-it-works-step:nth-child(even):not(:last-child):after{
        width: 108px;
    }
    div#step-text3{
        margin-right: 20px !important;
    }
    div#step-text2 {
        margin-top: -8px;
    }

    /* live session tab*/
    .livesessions-calendar-container{
        flex-wrap: unset !important;
    }

    .btnreadyclass{
        width: 570px !important;
        padding: 0px !important;
        padding-left: 0px !important;
        display: flex;
        justify-content: center !important;
    }
    .no-sessions{
        margin-bottom: -33px !important;
    }

    /* Course Module popup */
    .modal-content.champ-modal-content {
        width: 561px !important;
        height: 222px !important;
    }
    .modal-title{
        margin-left: 15px;
    }
    #modalContainer {
        margin-right: 1px !important;
    }
    .col-md-2.learnapi-image {
        display: flex !important;
        justify-content: center !important;
    }
    .resources-for-learnapi{
        margin-top: -28px !important;
    }

    .modal-dialog.modal-lg {
        width: 97% !important;
    }
    .step-circle {
        width: 100px !important;
        height: 100px !important;
    }
    .step-text{
        width: 130px !important;
    }

    .toggle-button{
        display: flex !important;
        width: 44px;
        height: 44px;
        position: absolute;
        right: 30px;
        z-index: 99;
        cursor: pointer;
        bottom: 0px;
    }
}