.navbar-large .navbar-bg {
    height: calc(7% + var(--f7-navbar-large-title-height));
    transform: translate3d(0px,calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),0);
}
.navbar-large-collapsed .navbar-inner{
    background-color: #f7f7f8!important;
}
.custom-icons{
    margin-top: 12px;
}
.custom-link{
    color: #1c1c1d !important;
}
.custom-link {
    color: #505765;
    text-align: center;
    font-family: Open Sans;
    font-size: 16.213px;
    font-style: normal;
    font-weight: 600;
    line-height: 38.08px;
    /* 171.429% */
    letter-spacing: 0.159px;

}
.button.tab-link-active {
    background-color: transparent !important;
    border-bottom: 3px solid blue;
    color: #000 !important;
    border-radius: 0px 0px;
}
.custon-card {
    border-radius: 10px;
    padding: 10px;
    background-color: #f7f8fa;
}
span.text-end {
    float: right;
    font-size: 16px;
}
h4.custom-h4 {
    margin: 0px;
    font-weight: 600;
    font-size: 15px;
}
.custon-card-1 {
    border-radius: 10.76px;
    padding: 12px 10px;
    border: 1.056px solid rgba(163, 171, 187, 0.50);
    background: #FFF;
    box-shadow: 0px 4.225242614746094px 4.225242614746094px 0px rgba(0, 0, 0, 0.10), 0px 2.6899001598358154px 64.55760192871094px 0px rgba(0, 0, 0, 0.04);

}

.custon-icon {
    border: 2px solid #D8D8D8;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 100%;
    flex-shrink: 0;
}

.main-sleep {
    width: 100%;
    padding: 0px 10px;
}

.f7-icons {
    font-size: 30 !important;
}

.custon-card-1 {
    border-radius: 10.76px;
    border: 1.056px solid rgba(163, 171, 187, 0.50);
    background: #FFF;
    box-shadow: 0px 4.225242614746094px 4.225242614746094px 0px rgba(0, 0, 0, 0.10), 0px 2.6899001598358154px 64.55760192871094px 0px rgba(0, 0, 0, 0.04);
}

span.text-1 {
    float: right;
    font-size: 14px;
    font-weight: 500;
    color: #A3ABBB;

}

.custon-p {
    font-size: 15px;
    margin: 0 0 4px 0;
    font-weight: 600;
}

.card-2 {
    border-radius: 10.738px;
    border: 0.671px solid #DAE0EB;
    background: #FFF;
}

.custon-icon-1 {
    border: 2px solid #A3ABBB;
    width: 64px;

    padding: 9px;
    height: 60px;
    margin-left: 8px;
    margin-top: 12px;
    border-radius: 100%;
}

.custon-icon-new {
    font-size: 20px !important;
}

img {
    width: 100%;
}


.custon-icon-2 {
    border: 2px solid #D8D8D8;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 64px;
    border-radius: 100%;
}

.custon-card-3 {
    border-radius: 10.738px;
    border: 0.671px solid #DAE0EB;
    background: #FFF;
}

.custon-toolbar {
    border-radius: 0px 0px 13.204px 13.204px !important;
    background: #FFF !important;
    box-shadow: 0px -2.6407768726348877px 5.281553745269775px 0px rgba(0, 0, 0, 0.10) !important;
}

.toolbar-inner .link {
    display: flex;
    flex-direction: column;

}

.toolbar-img {
    width: 20px !important;
}

.toolbar.toolbar-bottom.tabbar-icons {
    height: 56px!important;
}

.custon-link {
    color: #A3ABBB !important;
    font-family: Open Sans;
    font-size: 13.204px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.icon-custom {
    font-size: 16px !important;
    float: right !important;
}

.custon-p-1 {
    color: #000;
    font-family: Open Sans;
    font-size: 15.829px;
    font-style: normal;
    font-weight: 600;
    margin: 0px !important;
}
.m-3{
    margin: 19px;
}

.custom-bg {
    background-color: #F5F6F8;
}
.custom-h2 {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0px;
    text-align: center;
}
.md .button {
     transition-duration: .0s;
     transform: translate3d(0,0,0);
}
.custom-hr{
  width: 83%;
    margin-top: -2px;
    margin: auto;
}
p.m-0 {
    margin: 0px !important;
}
.custom-img{
    margin-top: 12px !important;
}
.card.custom-model {
    position: absolute;
    margin-left: 5px;
    padding: 5px;
    width: 50%;

}
#todayPage .myPlanActivitySlider .custom-slider-1 {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
}
#todayPage .myPlanActivitySlider .custom-slider-1 img{
    height: 100%;
    object-fit: cover;
}
.custom-slider-1 {
    position: relative;
    width: 100%;
}
.m-0{
    margin: 0px !important;
    }

.custom-posttion {
    position: absolute;
    top: -1px;
    /* margin-right: 60px; */
    margin-left: 18px;
}
.custom-bt-challenges,
.custom-bt {
    position: absolute;
    bottom: 12px;
    right: 12px;
}
.btn-bg {
    padding: 6px 15px;
    background-color: #13D022;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-family: Open Sans;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

/*streaks css*/

.progressbar-img{
    margin-left: -6px;
    margin-right: -8px;
}
.custom-navbar{
    display: flex!important;
    justify-content: space-between !important;
}
.custom-fs {
    font-size: 25px;
    font-weight: 600;
}
a.button.button-raised.custom-bg-1 {
    width: 45%;
    background-color: #13D022;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    margin: auto;
    height: 47px;
    border-radius: 32px;
}

h2.custom-h2-straks {
    color: var(--c-malachite-1, #13D022);
    text-align: center;
    font-family: Open Sans;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.15px;
}
p.custom-p-straks {
    text-align: center;
    font-size: 18px;
}
.custom-modal{
    top: 15%;
    z-index: 100;
}

.custom-modal-content{
    border-radius: 30px !important;
}
.custom-model-header{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 25px !important;
     border-bottom: none !important;

}

/*challenges css*/


.custom-search {
    border: 2px solid #c9c9c9;

    height: 45px;
    padding: 10px;
    border-radius: 50px;
}
.custom-select {
    width: 150px;
    padding: 10px;
    height: 45px !important;
    border-radius: 55px !important;
    border: 2px solid #13D022;
}
.custom-d-flex{
    display: flex!important;
    justify-content: space-around;
}
.custom-bg-page{
    background-color: #fff !important;
}
.page-content {
background-color: #fff !important;
}
.custom-bt-user {
    width: 100%;
    position: absolute;
    top: 5%;
    left: 20px;
}
.user-icon{
    border: 2px solid black;

}
.user-icon {
    border: 2px solid black;
    width: 23px;
    border: none;
    height: 18px;
    color: #fff;
    background-color: #FFCC00;
    padding: 6px;
    border-radius: 62%;
}

a.tab-link.button.tab-link-active {
    color: black !important;
}
a.tab-link.button {
    color: #ccc !important;
}
/*section.opposite-custom {*/
/*    opacity: 0.32;*/
/*}*/
.custom-drafts {
    border: 2px solid black;
    width: 154px;
    background-color: #fff;
    border: none;
    font-weight: 500;
    text-align: center;
    position: static;
    font-size: 14px;
}
.custom-icon-drafts {
    border: 2px solid black;
    height: 56px;
    padding: 17px;
    width: 56px;
    border-radius: 52px;
    border: none;
    background-color: #FFA800;
}
.custom-icon2-drafts{
    font-size: 22px;
    color: #fff;
}
/*section.position {*/
/*    position: fixed;*/
/*    bottom: 100px;*/
/*    right: 14px;*/
/*}*/
.custom-text {
    position: absolute;
    bottom: 1%;
    left: 14px;
    color: #fff;
    font-size: 17px;
}
.custom-hr-new{
    width: 74%;
    margin: auto;
}


.round {
    position: relative;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 22px;
    left: -10px;
    position: absolute;
    top: 0;
    width: 21px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 6px;
    opacity: 0;
    position: absolute;
    top: 6px;
    transform: rotate(-45deg);
    width: 9px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
    background-color: #FFCC00;
    border-color: #FFCC00;
}

.round input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
.custom-input {
    border: 1px solid #e6e6e6;
    width: 100%;
    background-color: #fff;
    padding:0px;
    margin: 15px;
    border-radius: 48px;
}
.termsSection{
    margin: 24px auto 10px;
    display: inline-block;
}
.page-min-height {
    min-height: calc(100vh - 239px);
}
span.bannerImage {
    display: inline-block;
    padding: 20px 0px;
}

/*facescreen css*/