@media screen and (max-width: 1024px) {
    .bigcount{
        font-size: 28px;
    }
}

@media screen and (max-width: 1024px) {
    .blogwrapper{

    }
    .nav > li > a{
        padding: 5px 15px;
    }
    .inner-container .box .resplogin-img{ 
        display: block;
        text-align: center;
      }
      .inner-container .box .login-img{
          display: none;
      }
    .inner-container {
        width: 50%;
        height: auto;
        position: absolute;
        overflow: hidden;
        left: 25%;
        top:45%;
    }
    .superhero img{
        object-fit: cover;
    }
    .login-footlinks {
        margin-bottom: 30px;
    }
    .inner-container .box{
        background: #061045b3;
        padding: 30px 30px;
        color: #fff;
        
    }
    .inner-container .box input.logininput{
        max-width: 100%;
        background: #ffffffa8;
    }
    .btn-register{
        max-width: 100%;
    }
    .inner-container .box button.mysignin{
        max-width: 100%;
        background-image: linear-gradient(to top, #9c000f, #aa0214, #b80418, #c6071d, #d50a22);
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        border: 1px solid #fff;
    }
    .navbar-toggle{
        padding: 9px 10px;
        margin-top: 30px;
        margin-right: 35px;
        margin-bottom: 8px;
    }
    
    /* .dashboardfirstcol{
        flex: 100%;
        max-width: 100%;
      }
    .dashboardmiddlecol{
        flex: 50%;
        max-width: 50%;
        padding: 0 10px;
    }
    .dashboardrightcol{
        flex: 50%;
        max-width: 50%;
        padding: 0 0px;
    } */
    .step-steps{
        overflow: scroll;
    }
    .myscroll {
        /* height: 768px;
        overflow: auto !important; */
    }
    
    .achievements {
        width: 280px;
    }
    .right-panel{
        display: none;
        width: 100%;
    }
    .assessment-dialog {
        width: 90%;
        margin: auto;
    }
    .medal-history{
        width: 1366px;
    }
    .login-footlinks p a {
        color:#ffffff;
    }
    .stars{
        width: 100%;
    }
    .blogholder {
        width: 100%;
    }
    .programstate{
        width: 100%;
    }
    .personcount{
        width: 100%;
    }
    .intakebutton{
        width: 100%;
    }
    .header-section {
        height: 130px;
    }
    .dailyprogressnew {
        flex: 45%;
        max-width: 45%;
        margin: 0;
        padding: 0px 5px;
    }
      /*new css*/
      .dashboardrightcol {
        flex: 48%;
        max-width: 48%;
        padding: 0 0px;
        order: 1;
        margin: 0px 1%;
    }
    .dashboardmiddlecol {
        flex: 48%;
        max-width: 48%;
        padding: 0 0px;
        order: 2;
        margin: auto 1%;
    }
    .dashboardfirstcol {
        flex: 100%;
        max-width: 98%;
        order: 3;
        margin: 0px 1%;
    }
    .dashboardfullcol {
        flex: 100%;
        max-width: 100%;
        margin: auto;
    }
    .logo {
        float: left;
        width: 15%;
        text-align: center;
    }
    .mainwrapper .dashlogo {
        max-width: 100%;
        width: 70%;
        margin: 25px 0px;
    }
    .webnav .rightnav {
        float: right;
        width: 72%;
        margin: 10px 0%;
    }
    .content-holder {
        margin-top: 50px;
    }
    .sprite.calories {
        margin: 0px 8px 0px 0px;
    }
    .headdata {
        font-size: 12px;
    }
    .sprite.steps {
        margin: 0px 10px 0px 10px;
    }
    .sprite.bodyweight{
        margin: 0px 10px 0px 0px;
    }
    .fitnessdetailsbody{
        padding: 5px 25px 5px;
        max-height: 100%;
    }
    .btn-register{
        -webkit-box-shadow: 0px 0px 7px 1px rgba(222,222,224,1);
        -moz-box-shadow: 0px 0px 7px 1px rgba(222,222,224,1);
        box-shadow: 0px 0px 7px 1px rgba(222,222,224,1);
    }
    .bigcount{
        font-size: 28px;
    }
}
@media screen and (max-width: 991px) {
    .resp30 {
    flex: 45% ;
    max-width: 45% ;
    margin: 0px auto;
    padding: 0px 5px;
    }
    .fitnessdetailsnew{
        flex: 100%;
        max-width: 100%;
    }
    .bigcount{
        font-size: 28px;
    }
} 
@media screen and (max-width: 991px) {
    .dashcolholder{
        flex: 100% ;
        max-width: 100%;
        display: flex;
    }
    .personcount,
    .programstate,
    .rewardsbox {
        flex: 32.33%;
        max-width: 32.33%;
    }
    .dailyblogs {
        flex: 100%;
        max-width: 100%;
        min-height:  150px;
    }
    .bigcount {
    font-size: 26px;
    }
}
@media screen and (max-width: 600px) {
    /* new layout*/
    .resp30 {

    }
    .blogsmalldata{
        max-height: 40px;  
    }
    .webavatarpopup{
        display: none;
    }
    .mobavatarpopup{
        display: block;
    }
    .mobavatarpopup .stages{
        width: 100%;
        height: 105px;
    }
    .superhero-modal .modal-dialog {
        width: 95%;
        margin: 10px auto;
    }
    .mobavatarpopup .super-popups li{
        background-repeat: no-repeat;
        cursor: pointer;
        padding: 40px 5px;
        border-radius: 50%;
        color: #fff;
        font-size: 13px;
        text-transform: uppercase;
        width: 90px;
        margin: 10px 5px;
        background-size: cover;
        height: 90px;
        float: left;
        text-align: center;
    }
    :focus{
        outline:none;
    }
    .activestage{
        background-image:url('../images/stages.png');
      } 
      li.activestage:focus{
        outline: none;
      }
      .stages{
        width: 100%;
        display: inline-block;
      }
      
    .weekname {
        display: inline-block;
        padding: 12px 15px;
        color: #a9abb8;
        font-family: 'FredokaOne';
        text-transform: uppercase;
        font-weight: 100;
        letter-spacing: 0px;
        font-size: 14px;
        background: #122370;
        border-radius: 10px;
        cursor: pointer;
        margin-right: 5px;
        text-align: center;
        width: 41px;
    }
    .showinfo-form {
        background: #040c33;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 13px;
        left: -70px;
        margin: 0;
        padding: 20px 20px 20px 30px;
        position: absolute;
        text-transform: none;
        top: 30px;
        z-index: 1;
        width: max-content;
        max-width: 220px;
        transition: opacity 0.5ms linear;
    }
    .fitnessdetailsnew {
        flex: 100%;
        max-width: 100%;
        padding: 0px 5px;
    }
    .selectstage {
        float: left;
        width: 100%;
    }
    .selectstage select{
        width: 100%;
        margin-left: 0px;
    }
    #instructionWaist{
        top: 20px;
      }
    .dailyprogressnew {
        flex: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0px 5px;
    }
    .dashcolholder {
        flex: 100%;
        max-width: 100%;
        margin: 0px;
        padding: 0px 5px;
        flex-wrap: wrap;
    }
    .personcount, .programstate, .rewardsbox {
        flex: 100%;
        max-width: 100%;
    }
    .blog-banner {
        background: #083078;
        padding: 25px 10px;
        text-align: center;
        margin-bottom: 30px;
        border-radius: 10px;
    }
    .respintake{
        display: block;
      }
    .respintake .intake{
        padding: 7px;
        font-size: 18px;
    }
    .intake-modal-dialog {
        width: 90%;
    }
    .instruction .instructiondata ol li{
        margin: 0px 15px;
    }
    #noti_status1{
        float: left;
    }
    .no-data-grid img{
        width: 100%;
    }
    .dp-fitnessdetailsbody{
        padding: 15px 5px 10px 5px;
    }
    .webmedals{
        display: none;
    }
    .mob-medalhistory{
        display: block;
    }
    .web-medalhistory{
        display: none;
    }
    .responsive-medal{
        width: 100%;
        text-align: center;
        display: block;
    }
    .sidenav a {font-size: 18px;}
    .resp-rightnav{
        display: none;
    }
    .saveme{
        width: 100px;
        margin-right: 10px;
    }
    .previous{
        width: 100px;
        margin-right: 10px; 
    }
    .successme{
      width: 100px; 
    }
    .form-group .inline.radio{
      margin: 5px 30px 5px 0;  
    }
    .form-group .sub-group {
        margin-bottom: 5px;
    }
    .mCSB_inside > .mCSB_container {
        margin-right: 5px !important;
    }
    .navbar-nav {
        margin: 0px !important;
        width: 100%;
        background: #03367c;
    }
    .fitnessdata{
        font-size: 16px;
        margin-bottom: 20px;
    }
    .resultdata small{
        margin: 0px 15px;
        font-size: 14px;
    }
    .webnav{
        display: none;
    }
    .responsivenav{
        display: block;
      }
      .resp-logo{
        width: 100%;
        margin:25px auto;
        text-align: center
      }
      .resp-logo img{
          width: 70px;
      }
    .rightnav{
        width: 100%;
        display: none;
    }
    .currenttab{
        width: 65%;
        float: left;
        padding: 20px 5px;
        color: #fff;
        font-size: 18px;
        text-transform: uppercase;
        font-family: 'FredokaOne';
        letter-spacing: 1px;
    }
    .resp-actionbutton {
        width: 25% ;
        margin-left: 0px ;
    }
    .content-holder {
        margin-top: -10px !important;
    }
    .selector li {
        float: left;
        margin: 10px 25px 10px;
    }
    #uploaddp{
        margin: 20px 10px;
    }
    .resp-sync{
        position: relative;
        display: block;
        padding: 5px 10px;
        margin: 20px 5px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background: #d40a22;
        color: #fff;
        float: left;
    }
    .resp-logoff{
        position: relative;
        padding: 5px 10px;
        margin: 20px auto;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background: transparent;
        color: #fff;
        margin-left: 0px;
        margin-right: 0px;
    }
    .togglesidenav{
        width: 10%;
        float: left;
        padding: 20px 0px;
        cursor: pointer;
    }
    .togglesidenav img{
        margin: auto;
    }
    .resp-wrapper{
        display: inline-block;
        width: 100%;
    }
    .webfitnessdetails{
        display: none;
    }
    .resp_fitnessdetails {
        margin: 15px 25px;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 15px 20px !important;
        margin: 0px auto !important;
        color: #a9abb8;
        font-family: 'FredokaOne';
        text-transform: uppercase;
        font-weight: 400;
        letter-spacing: 1px;
    }
    .inner-container {
        width: 85%;
        height: auto;
        position: relative;
        left: auto;
        margin: 0 auto 60px;
        padding: 30px 0 0;
    }
    .inner-container .box input.logininput {
        width: 100%;
    }
    .inner-container .box input.fgpassinput {
        width: 100%;
        background: #ffffffa8;
    }
    .inner-container .box button.mysignin {
        background-image: linear-gradient(to top, #9c000f, #aa0214, #b80418, #c6071d, #d50a22);
        border: 1px solid #9c000f;
        color: #fff;
        padding: 15px;
        font-size: 16px;
        width: 100%;
        margin: 10px 0px;
        display: block;
        cursor: pointer;
        transition: all 0.5s;
    }
    .croppie-container .cr-boundary{
        width: 100%;
        height: 300px;
    }
    .login-footer {
        position: relative;
        bottom: auto;
        left: auto;
        text-align: center;
        transform: translateY(5%);
        margin: 35px auto;
    }
    .inner-container .box p.forgot a {
        color: #ffffff;
    }
    .superhero{
        background-image: url(../images/resp-bg.png);
        background-size: cover;
        position: fixed;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .superhero .bgimg{
        display: none;
    }
    .flyingsuperhero{
        right: 125px !important;
        margin-right: -40px !important;
    }
    .inner-container .box .login-img{
        text-align: center;
    }
    .footer-logo {
        margin: 0;
    }
    .backbtn a{
        color: #fff;
    }
    .socialicons {
        left: 150px;
    }
    .dashboardfirstcol{
        flex: 100%;
        max-width: 100%;
        order: 1;
      }
    .dashboardmiddlecol{
        flex: 100%;
        max-width: 100%;
        padding: 0 0px;
        order: 2;
    }
    .dashboardrightcol{
        flex: 100%;
        max-width: 100%;
        padding: 0 0px;
        order: 3;
    }
    .dashboardfullcol {
        flex: 100%;
        max-width: 100%;
        order: 4;
    }
    .intake {
        padding: 15px;
        font-size: 18px;
    }
    .right{
        text-align: center;
        float: none;
        margin: 5px 0px 0px;
    }
    .hiddenstars{
        height:380px;
    }
    
    .profileperson {
        position: absolute;
        right: 15px;
        bottom: 80px;
        z-index: 99;
        cursor: pointer;
    }
    .profileperson img{
        border-radius: 50%;
        width: 60px;
        height: 60px;
        border: 3px solid #fff;
    }
    .leftstages{
        display: none;
    }
    .rightstage{
        display: none;
    }
    .currentstage{
        width: 100%;
        height:75vh;
    }
    .headdata{
        font-size: 18px;
    }
    .section span{
        display: none;
    }
    .dash-medal-display .section {
        float: left;
        margin: 5px 8px 0;
        text-align: center;
        width: 50px;
    }
    .copyright {
        color: #747990;
        text-align: center;
        font-size: 12px;
    }
    .blogname{
        font-size: 16px;
    }
    .blogcontent{
        font-size: 14px;
    }
    .infographicblog {
        margin: 20px auto;
        text-align: center;
    }
    .medalsholder {
        display: inline-block;
        margin: auto;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 40px;
    }
    .medalsline {
        font-size: 16px;
        color: #fff;
        width: 50%;
        margin: -30px auto 25px;
    }
    .challenges {
        font-size: 24px;
        color: #fff;
        margin: 0px 0px 25px;
    }
    .achievements {
        width: 100%;
    }
    .stars{
        width: 100%;
        height: 470px;
    }
    .superherouser{
        width: 90%;
        left: 0px !important;
    }
    .dailyblogs {
        flex: 100%;
        max-width: 100%;
        padding: 0px 5px;
    }
    .blogwrapper{
        padding: 5px 10px;
    }
    .w60 {
        float: left;
        width: 100%;
        text-align: center;
        margin: 30px auto !important;
        display: none;
      }
    .mydatepicker{
        width: 100%;
        margin: 15px auto;
    }
    .mydatepicker i{
        top: 7px;
        right: 20px;
    }
    #getHistory {
        margin: 15px 30% 0px;
        padding: 10px 12px;
        width: 40%;
    }
    #dailyRecordsPicker{
        padding: 20px;
        width: 100%;
        margin: 0;
    }
    .blogholder{
        width: 100%;
    }
    .programstate{
        width: 100%;
    }
    .personcount{
        width: 100%;
    }
    .intakebutton{
        width: 100%;
    }
    .assessment-form-container .assessment-cards .section{
        background-position: 100% 100%; 
        width: calc(100% / 1 - 10px);
        background-size: cover;
    }
    .notification-card {
        width: 100%;
        display: inline-block;
    }
    .buttonholder .accept , .buttonholder .reject {
        padding: 10px 10px;
        width: 120px;
    }
    .noti-body-msg ul{
        list-style: none;
    }
    .goback{
        margin: 0px 0px 15px;
        text-align: right;
        font-size: 16px;
        color: #fff;
        display: none;
    }
    
    .content-card {
        width: 100%;
        padding: 15px;
    }
    .notif-banner {
        padding: 5px;
        width: 100%;
    }
    .left-panel {
        width: 100%;
    }
    .slick-slide img {
        display: inline-block !important;
    }

    .swal-footer .swal-button-container {
        display: block;
    }
    .swal-footer .swal-button {
        margin: 10px auto;
        padding: 10px 10px;
    }
}

@media (max-width: 990px) {
    
    
      /*new css*/
      /* .dashboardrightcol {
        flex: 48%;
        max-width: 48%;
        padding: 0 0px;
        order: 1;
        margin: 0px 1%;
    }
    .dashboardmiddlecol {
        flex: 48%;
        max-width: 48%;
        padding: 0 0px;
        order: 2;
        margin: auto 1%;
    }
    .dashboardfirstcol {
        flex: 100%;
        max-width: 98%;
        order: 3;
        margin: 0px 1%;
    }
    .dashboardfullcol {
        flex: 98%;
        max-width: 98%;
        order: 4;
        margin: 0px 1%;
    } */
    
    .sidenav a {font-size: 18px;}
    .resp-rightnav{
        display: none;
    }
    .navbar-nav {
        margin: 0px !important;
        width: 100%;
        background: #03367c;
    }
    .fitnessdata{
        font-size: 16px;
        margin-bottom: 20px;
    }
    .resultdata small{
        margin: 0px 15px;
        font-size: 14px;
    }
    .webnav{
        display: none;
    }
    .responsivenav{
        display: block;
      }
      .resp-logo{
        width: 100%;
        margin:25px auto;
        text-align: center
      }
      .resp-logo img{
          width: 70px;
      }
    .rightnav{
        width: 100%;
        display: none;
    }
    .currenttab{
        width: 65%;
        float: left;
        padding: 20px 5px;
        color: #fff;
        font-size: 18px;
        text-transform: uppercase;
        font-family: 'FredokaOne';
        letter-spacing: 1px;
    }
    .resp-actionbutton{
        width: 12%;
        float: left;
        display: inline-block;
        margin-left: 10%;
        text-align: right;
    }
    .resp-sync{
        position: relative;
        display: block;
        padding: 5px 10px;
        margin: 20px 5px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background: #d40a22;
        color: #fff;
        float: left;
    }
    .resp-logoff{
        position: relative;
        padding: 5px 10px;
        margin: 20px auto;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background: transparent;
        color: #fff;
        margin-left: 0px;
        margin-right: 0px;
    }
    .togglesidenav{
        width: 10%;
        float: left;
        padding: 20px 0px;
        cursor: pointer;
    }
    .togglesidenav img{
        margin: auto;
    }
    .resp-wrapper{
        display: inline-block;
        width: 100%;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 15px 20px !important;
        margin: 0px auto !important;
        color: #a9abb8;
        font-family: 'FredokaOne';
        text-transform: uppercase;
        font-weight: 400;
        letter-spacing: 1px;
    }
    /* .inner-container {
        width: 80%;
        height: auto;
        position: relative;
        left: auto;
        margin: 0 auto 60px;
        padding: 60px 0 0;
    } */
    .inner-container .box input.logininput {
        width: 100%;
    }
    .inner-container .box input.fgpassinput {
        width: 100%;
        background: #ffffffa8;
    }
    .inner-container .box button.mysignin {
        background-image: linear-gradient(to top, #9c000f, #aa0214, #b80418, #c6071d, #d50a22);
        border: 1px solid #9c000f;
        color: #fff;
        padding: 15px;
        font-size: 16px;
        width: 100%;
        margin: 10px 0px;
        display: block;
        cursor: pointer;
        transition: all 0.5s;
    }
    /* .login-footer {
        position: relative;
        bottom: auto;
        left: auto;
        text-align: center;
        transform: translateY(5%);
        margin: 20px auto;
    } */
    .inner-container .box p.forgot a {
        color: #ffffff;
    }
    .superhero{
        background-image: url(../images/resp-bg2.png);
        background-size: cover;
        position: fixed;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .superhero .bgimg{
        display: none;
    }
    .backbtn a{
        color: #fff;
    }
    .socialicons {
        left: 150px;
    }
    .right{
        text-align: center;
        float: none;
        margin: 5px 0px 0px;
    }
    .profileperson {
        position: fixed;
        right: 15px;
        bottom: 35px;
        z-index: 99;
        cursor: pointer;
    }
    .profileperson img{
        border-radius: 50%;
        width: 60px;
        height: 60px;
        border: 3px solid #fff;
    }
    .leftstages{
        display: none;
    }
    .rightstage{
        display: none;
    }
    .currentstage{
        width: 100%;
    }
    .section span{
        display: none;
    }
    .dash-medal-display .section {
        float: left;
        margin: 5px 8px 0;
        text-align: center;
        width: 50px;
    }
    .copyright {
        color: #747990;
        text-align: center;
        font-size: 12px;
    }
    .blogname{
        font-size: 16px;
    }
    .blogcontent{
        font-size: 14px;
    }
    .infographicblog {
        margin: 20px auto;
        text-align: center;
    }
    .medalsholder {
        display: inline-block;
        margin: auto;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 40px;
    }
    .medalsline {
        font-size: 16px;
        color: #fff;
        width: 50%;
        margin: -30px auto 25px;
    }
    .challenges {
        font-size: 24px;
        color: #fff;
        margin: 0px 0px 25px;
    }
    .achievements {
        width: 100%;
    }
    .stars{
        width: 100%;
        min-width: 320px;
        height: 470px;
    }
    .superherouser{
        width: 90%;
    }
    .blogholder{
        width: 100%;
    }
    .programstate{
        width: 100%;
    }
    .personcount{
        width: 100%;
    }
    .intakebutton{
        width: 100%;
    }
    .assessment-form-container .assessment-cards .section{
        background-position: 100% 100%; 
        width: calc(100% / 1 - 10px);
        background-size: cover;
    }
    .notification-card {
        width: 100%;
        display: inline-block;
    }
    .buttonholder .accept , .buttonholder .reject {
        padding: 10px 10px;
        width: 120px;
    }
    .noti-body-msg ul{
        list-style: none;
    }
    .goback{
        margin: 0px 0px 15px;
        text-align: right;
        font-size: 16px;
        color: #fff;
        display: none;
    }
    
    .content-card {
        width: 100%;
        padding: 15px;
    }
    .notif-banner {
        padding: 5px;
        width: 100%;
    }
    .left-panel {
        width: 100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .header-section {
        height: 90px;
    }
    .content-holder {
        margin-top: 5px;
    }
    .respintake{
        display: block;
      }
    .respintake .intake{
        padding: 7px;
        font-size: 18px;
        margin: 15px auto;
    }
}

@media screen and (max-width: 600px) {
    .currenttab{
        width: 60%;
    }
    .resp-actionbutton {
        width: 30% ;
        margin-left: 0px ;
    }
    .faq-modal .accord-pane > a{
        padding: 10px 25px 10px 15px;
    }
    .login-footlinks p span{
        display: inline-block;
    }
    .login-footlinks .link-box {
        max-width: 100%;
        display: block;
    }
}