/******************************  Start Global Styles  *************************/
@font-face {
    font-family: Proxima-Nova-Bold;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/Proxima-Nova-Bold.otf);
}
@font-face {
    font-family: Proxima-Nova-Regular;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/Proxima-Nova-Regular.ttf);
}
@font-face {
    font-family: Lato;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/Lato-Regular.ttf);
}
@font-face {
    font-family: Proxima-Nova-Semibold;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/Proxima-Nova-Semibold.ttf);
}
@font-face {
    font-family: SFUIDisplay-Medium;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/SFUIDisplay-Medium.ttf);
}
@font-face {
    font-family: SF-Pro-Display-Regular;
    src:url(//d2pil9hl7m4qq3.cloudfront.net/fonts/SF-Pro-Display-Regular.otf);
}
@media only screen and (min-width: 1200px) {
    .container.custom-container{max-width: 1200px;}
}
@media only screen and (min-width: 991px) and (max-width: 1199px) {
    .container.custom-container{max-width: 100%;}
}
body{
    font-size: 16px;
    font-family: Proxima-Nova-Regular;
    color: #0e131d;
    background-color: #eff0f2;
}
a:hover{
    text-decoration: none;
}
input:focus{
    outline: none;
}
select:focus{
    box-shadow: none!important;
    border: solid 1px #d9dbe1!important;
}
.mt-30{
    margin-top: 30px;
}
.mood-title{
    font-size: 18px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.22;
    margin-bottom: 24px;
}
#content{
    margin-bottom: 30px;
}
.page-title-h1{
    font-family: Proxima-Nova-Bold;
}
a.yellow-btn{
    display: inline-block;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #000000;
    background-color: #FFE32C;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    border-radius: 4px;
    padding: 7.5px 25px;
    text-align: center;
}
a.turquoise-btn{
    display: inline-block;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #FFFFFF;
    background-color: #00c4cc;
    border-radius: 4px;
    padding: 7.5px 25px;
    text-align: center;
}
a.turquoise-border-btn{
    display: inline-block;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #00C4CC;
    border: 1px solid #00C4CC;
    border-radius: 4px;
    padding: 3.5px 13px;
    text-align: center;
}
a.simple-btn{
    display: inline-block;
    border-radius: 4px;
    border: solid 1px #cecece;
    font-family: Proxima-Nova-Semibold;
    font-size: 14px;
    line-height: 1.21;
    text-align: center;
    color: #0e131d;
    padding: 9px 15px;
    text-align: center;
}
a.uplift-btn{
    display: inline-block;
    color: #3B5998;
    border: 1px solid #3B5998;
    border-radius: 4px;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    text-align: center;
    padding: 6.5px 15px;
}
/*******************  Start Custom Scroll  ******************/
.scrollbar {
    height: 450px;
    overflow-y: auto;
}
.force-overflow {
    /*min-height: 450px;*/
}
.scrollbar::-webkit-scrollbar {
    width: 1px;
    background-color: #AFB4BD;
}
.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #3B5998;
}
/*******************  End Custom Scroll  ******************/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/caret-down.svg");
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: calc(100% - 12px) center;
    cursor: pointer;
}
.tooltip-inner{background-color: #00c4cc;font-size: 12px;}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {border-top-color: #00c4cc;}

/******************************  End Global Styles  *************************/

/******************************  Start Main Page Header  *************************/
.main-page-header{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
header.main-page-header .nav-item a.nav-link{
    color: #ffffff;
}
header.main-page-header .nav-item{
    /*margin-right: 30px;*/
}
.main-page-header-login{
    margin-right: 15px!important;
}
.main-page-header-login a{
    border: 1px solid #ffffff;
    padding: 9px 15px!important;
    border-radius: 4px;
}
.main-page-header-reg{

}
.main-page-header-reg a.yellow-btn{
    color: #000000!important;
    padding: 10px 15px!important;
}
header.main-page-header .main-mobile-menu .nav-item {
    margin-right: 0;
}
/******************************  End Main Page Header  *************************/

/******************************  Start Header  *************************/
header{
    background-color: #00C4CC;
    margin-bottom: 35px;
}
header .navbar{
    padding: 9px 0;
}
.header-logo img{
    height: 32px;
}
header .nav-item a.nav-link{
    font-size: 14px;
    line-height: 1.21;
    color: rgba(0, 0, 0, 0.3);
}
header .nav-item a.nav-link svg{
    height: 22px;
}
header .nav-item a.nav-link svg > g > g > g > path{
    fill: #b1c2e3;
}
header .nav-item a.nav-link:hover,header .nav-item.active a.nav-link{
    color: #ffffff;
}
header .nav-item a.nav-link:hover  svg > g > g > g > path,
header .nav-item.active a.nav-link  svg > g > g > g > path{
    fill: #FFFFFF;
}
header .nav-item a.nav-link i{
    margin-right: 11px;
}
.header-search-box{
    position: relative;
    display: inline-block;
}
.header-search-box:before {
    font-family: 'FontAwesome';
    content: "\f002";
    position: absolute;
    font-size: 16px;
    color: #00C4CC;
    z-index: 1;
    top: 5px;
    left: 12px;
}
.header-search{
    width: 340px;
    position: relative;
    border: none;
    border-radius: 4px;
    padding: 10px 10px 10px 40px;
    font-size: 14px;
    line-height: 1.21;
    color: #000000;
    background-color: #ffffff;
}
.header-search::placeholder {color: #00C4CC;opacity: 1;}
.header-search:-ms-input-placeholder {color: #00C4CC;}
.header-search::-ms-input-placeholder {color: #00C4CC;}

.nav-item-avatar{margin-left: 8px;}
.nav-item-avatar a.nav-link.dropdown-toggle{
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
}
.nav-item-avatar a.nav-link.dropdown-toggle:after{display: none}
.nav-item-avatar a.nav-link.dropdown-toggle img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.nav-item-avatar .dropdown-menu{
    width: 160px;
    left: auto;
    right: 0;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    border: solid 1px #e7e8eb;
    background-color: #ffffff;
    padding: 0;
    margin-top: 20px;
    min-width: auto;
}
.nav-item-avatar .dropdown-menu a.dropdown-item{
    font-size: 14px;
    line-height: 1.21;
    color: #0e131d;
    padding: 12px;
    background-color: transparent;
}
.nav-item-avatar .dropdown-menu a.dropdown-item:first-child{
    border-bottom: 1px solid #e7e8eb;
}
.nav-item-avatar .dropdown-menu .dropdown-item span{
    display: block;
    font-size: 12px;
    line-height: 1.25;
    color: #afb4bd;
}
.nav-item-avatar .dropdown-menu .fa-caret-up{
    position: absolute;
    top: -21px;
    right: 7px;
    color: #fff;
}


header a.dropdown-toggle:after{
    display: none;
}
.nav-item-messages .dropdown-menu{
    width: 132px;
    border: none;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.24);
    background-color: #00C4CC;
    padding: 5px 0;
    margin-top: 22px;
    min-width: auto;
}
.nav-item-messages .dropdown-menu a.dropdown-item{
    font-size: 14px;
    line-height: 1.21;
    color: #00898F;
    padding: 8px 12px;
    background-color: transparent;
}
.nav-item-messages .dropdown-menu a.dropdown-item:active,.nav-item-messages .dropdown-menu a.dropdown-item:hover,
.nav-item-messages .dropdown-menu a.dropdown-item:focus{
    color: #00C4CC;
    background-color: #FFFFFF;
}
.nav-item-messages .dropdown-menu .dropdown-item span{
    display: inline-block;
    font-size: 8px;
    line-height: 1.25;
    color: #0E131D;
    width: 16px;
    height: 16px;
    background-color: #FFE32C;
    padding: 3px 4px;
    border-radius: 50%;
    vertical-align: middle;
}
.nav-item-messages .dropdown-menu .fa-caret-up{
    position: absolute;
    top: -20px;
    left: 7px;
    color: #00C4CC;
}

.nav-item-not .leadersItem{
    padding: 12px;
    border: none;
    border-bottom: 1px solid #DFE0E2;
    border-radius: 0;
    margin-bottom: 0;
}
.nav-item-not .leadersPlay{
    width: auto;
    height: auto;
    background-color: transparent;
    line-height: 19px;
    vertical-align: top;
}
.nav-item-not .leadersName{
    color: #00C4CC;
    font-size: 14px;
}
.nav-item-not .leadersPoints{
    color: #B2B2B2;
    font-size: 12px;
}
.nav-item-not .leadersPlay{
    color: #51555D;
    font-size: 14px;
}

.nav-item-not .dropdown-menu{
    width: 270px;
    left: auto;
    right: 85px;
    border: none;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.24);
    background-color: #ffffff;
    padding: 5px 0;
    margin-top: 22px;
    min-width: auto;
}
.nav-item-not .dropdown-menu .fa-caret-up{
    position: absolute;
    top: -21px;
    right: 7px;
    color: #ffffff;
}
/******************************  End Header  *************************/


/****************************  Start Mobile HEADER  *************************/
.opened-header{
    width: calc(100vw * 0.85);
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.2s;
    background-color: #eff0f2;
}
.sidenav .sb-mood-box.sb-mood-box-first{
    border-bottom: 1px solid #e7e8eb !important;
    border-radius: 0;
}
.sidenav .closebtn {
    font-size: 20px;
    margin-left: auto;
    color: #0e131d;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.header-mobile{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 25;
    border-bottom: none;
}


.sitebarLogo{
    padding: 8px 12px;
}
.sitebarLogo img{
    width: 120px;
}
#mobile-sitebar{
    padding-bottom: 15px;
    padding-right: 12px;
    padding-left: 12px;
}
.closed-header{
    position: relative;
    width: 100%;
    padding: 7px 0;
}
a.mobile-menu-btn{
    color: #FFE32C;
}
a.mobile-menu-btn i{
    font-size: 24px;
    vertical-align: middle;
}
a.mobile-search-icon{
    color: #00898e;
    font-size: 24px;
}
a.mobNavItem{
    color: rgba(0, 0, 0,0.3);
}
a.mobNavItem i{
    font-size: 24px;
}
a.mobNavItem svg{
    height: 32px;
}
a.mobNavItem svg > g > g > g > path{
    fill: rgba(0, 0, 0,0.3);
}
a.mobNavItem:hover svg > g > g > g > path, a.mobNavItem:active  svg > g > g > g > path{
    fill: #FFFFFF;
}
a.mobNavItem.active{
    color: #ffffff;
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/****************************  End Mobile HEADER  *************************/

/******************************  Start Index Page  *************************/
.scroll-down-row{
    height: 770px;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/main-page/scroll-down.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
.scroll-down-content{

}
.scroll-down-title{
    font-size: 84px;
    font-family: Proxima-Nova-Bold;
    line-height: 112px;
    color: #00C4CC;
    text-shadow: -1px 0 #00898E, 0 1px #00898E, 1px 0 #00898E, 0 -1px #00898E;
}
.scroll-down-subtitle{
    width: 500px;
    margin: auto;
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    line-height: 33px;
    color: #00898E;
}
.scroll-down-box{
    padding-bottom: 50px;
}
.scroll-down-box .scroll-aroow{
    display: inline-block;
    vertical-align: middle;
}
.scroll-down-box  .scroll-box-desc{
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    margin-left: 10px;
}
.scroll-down-box .scroll-aroow img{
    width: 24px;
}
.scroll-down-box .scroll-box-title{
    font-size: 18px;
    font-family: Proxima-Nova-Semibold;
    line-height: 21px;
    color: #000000;
}
.scroll-down-box .scroll-box-subtitle{
    font-size: 18px;
    line-height: 20px;
    color: #000000;
}

.main-page-title{

}
.main-page-title h2{
    font-size: 36px;
    font-family: Proxima-Nova-Semibold;
    line-height: 44px;
    color: #0E131D;
    margin-bottom: 0;
}
.happiness-container{
    margin: 95px 0;
}
.happiness-lines-img-box{
    position: relative;
}
.happiness-lines-img-box:after{
    content: "";
    position: absolute;
    width: 155px;
    height: 148px;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/main-page/happiness-development-bg-lines.svg");
    background-repeat: no-repeat;
    right: -18px;
    bottom: -18px;
    z-index: -1;
}
.happiness-development-title{
    width: 850px;
    margin: 0 auto 65px auto;
    text-align: left;
}
.happiness-development-absDiv{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.happiness-development-content .yellow-btn{
    margin-top: 20px;
    margin-left: 50px;
}
.happiness-development-content .main-page-title{
    margin-bottom: 20px;
    margin-left: 20px;
}
.happiness-development-item{
    position: relative;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 12px 40px 16px 50px;
}
.happiness-development-item-icon-box{
    position: absolute;
    left: -49px;
    top: 50%;
    transform: translateY(-50%);
    width: 68px;
    height: 68px;
    background-color: #00C4CC;
    border-radius: 4px;
    text-align: center;
}
.happiness-development-item-icon-box img{
    width: 35px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.happiness-development-item-title{
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    line-height: 22px;
    color: #00C4CC;
    margin-bottom: 23px;
}
.happiness-development-item-desc{
    font-size: 16px;
    font-family: Proxima-Nova-Regular;
    line-height: 22px;
    color: #AFB4BD;
}
.main-page-tabs-container{
    background-color: #EEF2F3;
    padding-top: 95px;
    padding-bottom: 85px;
}
.main-page-tabs-content{
    position: relative;
    padding: 0 70px;
}
.main-page-tabs-content:before{
    content: "";
    width: 168px;
    height: 180px;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/main-page/tab-content-right-lines.svg");
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: -40px;
    z-index: 0;
}
.main-page-tabs-content:after{
    content: "";
    width: 168px;
    height: 180px;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/main-page/tab-content-left-lines.svg");
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: -40px;
    z-index: 0;
}
/*************  start new tabs  ************/
.new-tabs{

}
.new-tabs .newNavTabs{
    border-bottom: none;
    height: 53px;
}
.new-tabs .newTabContent{
    border-radius: 4px;
    background-color: #ffffff;
    padding: 30px 0;
    z-index: 1;
}
.new-tabs .newTabContent .newTabPan > .row{
    padding-right: 15px;
    padding-left: 15px;
}
.new-tabs .newNavLink{
    width: calc( (100% - 10px) / 3);
    height: 68px;
    border: none;
    margin: 0;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 22px;
    color: #00C4CC;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    padding: 15.5px 10px;
    text-align: center;
}
.new-tabs .newNavLink.nav-link.active{
    color: #ffffff;
    background-color: #00C4CC;
}
.new-tabs .newNavLink:nth-child(2){
    margin: 0 5px;
}
.new-tabs .newNavLink span{
    vertical-align: middle;
}
.new-tabs .newNavLink img{
    height: 35px;
    margin-right: 10px;
}
/*************  end new tabs  ************/
.light-blue-btn{
    display: block;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #0E131D;
    border: 1px solid #00C4CC;
    border-radius: 4px;
    padding: 6.5px 10px;
    text-align: center;
}
.light-blue-btn.active{
    color: #ffffff;
    background-color: #00C4CC;
}
.main-challenges-box-tab{
    height: 100%;
    border-right: 1px solid #EEF2F3;
    padding: 15px 30px 15px 0;
}
.main-challenges-box-tab .nav-tabs{
    border-bottom: none;
}
.main-challenges-title-tab{
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    line-height: 27px;
    color: #0E131D;
    margin-bottom: 15px;
}
.main-challenges-box-tab a.light-blue-btn{
    width: 100%;
    margin-bottom: 15px;
    color: #0E131D;
    border: 1px solid #00C4CC;
}
.main-challenges-box-tab a.light-blue-btn:hover{
    border: 1px solid #00C4CC;
}
.main-challenges-box-tab a.light-blue-btn.active{
    color: #ffffff;
    background-color: #00C4CC;
    border-color: #00C4CC;
}
.main-page-small-desc{
    font-size: 14px;
    font-family: Proxima-Nova-Regular;
    line-height: 16px;
    color: #AFB4BD;
}

.benefits-content-box{

}
.benefits-content-box .benefit-box{
    display: inline-block;
}
.benefits-content-box .benefit-box:nth-child(1){
    border-right: 1px solid #EEF2F3;
    padding-right: 15px;
}
.benefits-content-box .benefit-box:nth-child(2){
    padding-left: 15px;
}
.benefits-content-box .benefit-box .double-angle-circle{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    line-height: 30px;
    text-align: center;
}
.benefits-content-box .benefit-box .double-angle-circle img{
    width: 17px;
    height: 12px;
}
.benefits-content-box .benefit-box:nth-child(1) .double-angle-circle{
    vertical-align: top;
}
.benefits-content-box .benefit-box:nth-child(2) .double-angle-circle{
    vertical-align: bottom;
}
.benefits-content-box .benefit-box span{
    display: inline-block;
}
.benefits-content-box .benefit-box:nth-child(1) span{
    width: 73px;
    margin-left: 10px;
}
.benefits-content-box .benefit-box:nth-child(2) span{
    width: 51px;
    margin-right: 10px;
}
.explore-box img{
    margin-bottom: 15px;
    border-radius: 4px;
}
.main-page-social-container{
    margin-top: 85px;
    margin-bottom: 85px;
}
.main-page-social-container .main-page-title h2{
    margin-bottom: 20px;
}
.main-page-social-container .happiness-development-item-desc{
    margin-bottom: 30px;
}
.hash-socials-box a{
    display: inline-block;
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #0E131D;
    background-color: #EEF2F3;
    border-radius: 4px;
    margin-right: 10px;
    padding: 7.5px 12px;
}

.mobile-app-container{
    height: 670px;
    overflow: hidden;
}
.mob-app-img-box{
    padding-top: 60px;
}
.mob-app-content{
    margin-left: 55px;
}
.mob-app-content .main-page-title{
    margin-bottom: 22px;
}
.mob-app-content .happiness-development-item-desc{
    margin-bottom: 30px;
}
.get-app{
    width: 415px;
    margin-bottom: 60px;
}
.get-app .form-control{
    font-size: 14px;
    font-family: Proxima-Nova-Regular;
    color: #000000;
    background-color: #EEF2F3;
    border: none;
    border-radius: 4px;
}
.get-app .form-control:focus{
    box-shadow: none;
    border: none;
}
.get-app .yellow-btn{
    border: none;
    box-shadow: none;
}
.get-app .form-control::placeholder{color: #AFB4BD;opacity: 1;}
.get-app .form-control:-ms-input-placeholder {color: #AFB4BD;}
.get-app .form-control::-ms-input-placeholder {color: #AFB4BD;}
.mob-app-logos a:first-child{
    margin-right: 11px;
}
.mob-app-logos img{
    height: 64px;
}
/******************************  End Index Page  *************************/

/******************************  Start Registration Page  *************************/
/*Start Datepicker*/
.materialDatepicker:after{
    font-family: 'FontAwesome';
    content: "\f133";
    position: absolute;
    font-size: 20px;
    color: #CECECE;
    z-index: 1;
    top: 3px;
    right: 12px;
}
.ui-widget.ui-widget-content{
    border: 1px solid #00C4CC;
    margin-top: 5px;
}
.ui-datepicker .ui-datepicker-header{
    background-color: #00C4CC;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
    border: 1px solid #00C4CC;
    background-color: #00C4CC;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #FFE32C;
    background: #FFE32C;
    color: #ffffff;
}
/*End Datepicker*/

.reg-container{
    background-color: #ffffff;
}
.registration-content{
    width: 370px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.registration-img-box{
    height: 100%;
    background: url("//d2pil9hl7m4qq3.cloudfront.net/images/registration-bg.png") no-repeat center;
    background-size: cover;
}
.registration-logo{
    margin-top: 10px;
    margin-bottom: 70px;
}
.registration-logo svg{
    height: 32px;
}
.registration-logo svg g > text{
    font-family: Proxima-Nova-Bold;
    fill: #0e131d;
}
.h2{
    font-size: 24px;
    line-height: 1.21;
    color: #0e131d;
}
.registration-content .h2{
    margin-bottom: 30px;
}
.login-social{
    display: table;
}
.login-icon{
    display: inline-block;
    width: 40px;
    text-align: center;
    color: #ffffff;
    padding: 8px 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.login-facebook-icon{
    background-color: #2a487d;
}
.login-btn-fb-text{
    background-color: #3c5798;
}
.login-twitter-icon{
    background-color: #008ee5;
}
.login-btn-twitter-text{
    background-color: #1c9eed;
}
.login-google-icon{
    background-color: #3f74e7;
}
.login-btn-google-text{
    background-color: #4786ff;
}
.login-btn-text{
    width: 330px;
    text-align: center;
    display: inline-block;
    color: #ffffff;
    line-height: 40px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.or-line{
    width: 100%;
    text-align: center;
    border-bottom: 1px dashed #cecece;
    line-height: 4px;
    margin-top: 48px;
    margin-bottom: 55px;
}
.or-line span{
    font-size: 14px;
    background: #fff;
    padding: 0 20px;
}
/************ material input **********/
.material-group{
    position:relative;
    margin-bottom:14px;
}
input.material-input{
    font-size:14px;
    padding: 6.5px 12px;
    display:block;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
}
input.material-input:focus 		{ outline:none; }

/* LABEL ======================================= */
label.material-label 				 {
    color: #cecece;
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:12px;
    top: 8px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
input.material-input:focus ~ label.material-label, input.material-input:valid ~ label.material-label 		{
    top: -7px;
    background-color: #ffffff;
    padding: 0 3px;
    font-size:10px;
    color: #cecece;
}

/* BOTTOM BARS ================================= */
.material-bar 	{ position:relative; display:block; width:300px; }
.material-bar:before, .material-bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#5264AE;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.material-bar:before {
    left:50%;
}
.material-bar:after {
    right:50%;
}

/* active state */
input.material-input:focus ~ .material-bar:before, input.material-input:focus ~ .material-bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input.material-input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
/***************************************************************/
/************************  Material select  **********************/
.material-select {
    position: relative;
    margin-bottom: 14px;
}

.material-select-text {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 6.5px 12px;
    font-size: 14px;
    border: 1px solid #cecece;
    border-radius: 4px;
}

/* Remove focus */
.material-select-text:focus {
    outline: none;
}

/* Use custom arrow */
.material-select .material-select-text {
    appearance: none;
    -webkit-appearance:none
}

.material-select:after {
    position: absolute;
    top: 16px;
    right: 12px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}


/* LABEL ======================================= */
.material-select-label {
    color: #cecece;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 8px;
    transition: 0.2s ease all;
    margin-bottom: 0;
}

/* active state */
.material-select-text:focus ~ .material-select-label, .material-select-text:valid ~ .material-select-label {
    color: #cecece;
    top: -7px;
    transition: 0.2s ease all;
    font-size: 10px;
    background-color: #ffffff;
    padding: 0 3px;
}

/* BOTTOM BARS ================================= */
.select-bar {
    position: relative;
    display: block;
    width: 350px;
}

.select-bar:before, .select-bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #2F80ED;
    transition: 0.2s ease all;
}

.select-bar:before {
    left: 50%;
}

.select-bar:after {
    right: 50%;
}

/* active state */
.material-select-text:focus ~ .select-bar:before, .material-select-text:focus ~ .select-bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}
/*********************************************************/
/**********************  Material Checkbox  ********************/
.pure-material-checkbox {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.33;
    padding-left: 23px;
    text-indent: -23px;
}

.pure-material-checkbox > input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: -1;
    left: -15px;
    top: -15px;
    display: block;
    margin: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.42);
    outline: none;
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(0); /* Graceful degradation for IE */
    transition: opacity 0.5s, transform 0.5s;
}

.pure-material-checkbox > input:checked {
    background-color: #2196f3;
}

.pure-material-checkbox:active > input {
    opacity: 1;
    transform: scale(0);
    transition: opacity 0s, transform 0s;
}

.pure-material-checkbox > input:disabled {
    opacity: 0;
}

.pure-material-checkbox > input:disabled + span {
    color: rgba(0, 0, 0, 0.38);
    cursor: initial;
}

.pure-material-checkbox > span::before {
    content: "";
    display: inline-block;
    margin-right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: solid 1px #cecece;
    vertical-align: -4px;
    transition: border-color 0.5s, background-color 0.5s;
}

.pure-material-checkbox > input:checked + span::before {
    border-color: #00C4CC;
    background-color: #00C4CC;
}

.pure-material-checkbox > input:active + span::before {
    border-color: #2196f3;
}

.pure-material-checkbox > input:checked:active + span::before {
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.42);
}

.pure-material-checkbox > input:disabled + span::before {
    border-color: rgba(0, 0, 0, 0.26);
}

.pure-material-checkbox > input:checked:disabled + span::before {
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.26);
}

.pure-material-checkbox > span::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 10px;
    border: solid 2px transparent;
    border-left: none;
    border-top: none;
    transform: translate(5.5px, 1px) rotate(45deg);
    -ms-transform: translate(5.5px, 2px) rotate(45deg);
}

.pure-material-checkbox > input:checked + span::after {
    border-color: #fff;
}
.material-checkbox-box{
    margin-bottom: 14px;
}
/*********************************************************/
a.yellow-link{
    color: #00c4cc;
}
a.yellow-link:hover{
    text-decoration: underline;
}
a.reg-bottons-box{
    margin-top: 10px;
}
/******************************  End Registration Page  *************************/

/******************************  Start Login Page  *************************/
.login-container{
    background-color: #ffffff;
}
.login-img-box{
    height: 100%;
    background: url("//d2pil9hl7m4qq3.cloudfront.net/images/login-bg.jpg") no-repeat center;
    background-size: cover;
}
.forgot-pass{
    font-size: 10px;
    line-height: 1.25;
    text-align: right;
}
.forgot-pass a{
    color: #0e131d;
}
.remember-me{
    line-height: 1.17;
}
/******************************  End Login Page  *************************/

/******************************  Start Forgot Password Page  *************************/
.forgot-pass-content .turquoise-btn{
    font-family: Proxima-Nova-Regular;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.forgot-pass-content .h2{
    margin-bottom: 85px;
}
.forgot-pass-title{
    margin-bottom: 15px;
}
.forgot-pass-desc{
    width: 230px;
    font-size: 14px;
    line-height: 1.21;
    color: #afb4bd;
    margin-bottom: 24px;
}
/******************************  End Forgot Password Page  *************************/

/******************************  Start Sitebar  *************************/
.avatar-smile{
    position: absolute;
    bottom: 0;
    right: 0;
    border: 5px solid #ffffff;
    border-radius: 50%;
}
.smile-img{
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
    top: -2px;
}
.smile-dropdown-menu{
    left: auto!important;
    right: 50%!important;
    transform: translate3d(50%, -110%, 0px)!important;
    border-radius: 4px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.24);
    background-color: #ffffff;
    padding: 8px 12px;
    min-width: 143px;
}
.smile-dropdown-menu a{
    font-family: Lato;
    font-size: 10px;
    line-height: 1.2;
    color: #00C4CC;
    text-decoration: underline;
    margin-bottom: 10px;
}
.dropdown-menu-smile-box{

}
.dropdown-menu-smile-box span{
    display: inline-block;
    cursor: pointer;
}
.dropdown-menu-smile-box span img{
    width: 20px;
    height: 20px;
}
#sitebar{
    margin-bottom: 30px;
}
#sitebar a.invite-btn, #mobile-sitebar a.invite-btn{
    padding: 6px 15px;
}
.sb-profile-box{
    padding-top: 20px;
    text-align: center;
    border-radius: 4px;
    border: solid 1px #e7e8eb;
    background-color: #ffffff;
}
.avatar-box{
    position: relative;
    width: 122px;
    height: 122px;
    margin: auto;
    border-radius: 50%;
}
.avatar-box img{
    border-radius: 50%;
}
.sb-name{
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.23;
}
.sb-points{
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.21;
}
.sb-points > div:first-child{
    font-size: 18px;
    font-family: Proxima-Nova-Semibold;
    color: #3B5998;
}
.sb-followers{
    font-size: 10px;
    line-height: 1.2;
    background-color: #e7e8eb;
    padding: 13px 5px;
    border-right: 1px solid #fff;
}
.sb-followers:hover, .sb-following:hover{
    color: #ffffff;
    background-color: #00C4CC;
}

.sb-following{
    font-size: 10px;
    line-height: 1.2;
    color: #0e131d;
    background-color: #e7e8eb;
    padding: 13px 5px;
    border-left: 1px solid #fff;
}
.follow-count{
    font-family: Proxima-Nova-Semibold;
    line-height: 1.25;
    margin-bottom: 12px;
    font-size: 16px;
}
.sb-brain-title{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
    line-height: 1.21;
    padding: 10px 12px;
}
.sb-section-title{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 19px;
    color: #0E131D;
}
.sb-brain-progress-box{
    padding: 7px 12px;
    background-color: #e7e8eb;
    border-bottom: 1px solid #ffffff;
}
.sb-brain-progress-desc{
    font-size: 12px;
    line-height: 12px;
    color: #0E131D;
    max-width: calc(100% - 16px);
}
.sb-brain-progress-desc i{
    font-size: 16px;
    float: right;
    line-height: 12px;
}

.progress-content{

}
.progress-box{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 26px);
}
.progress{
    position: relative;
    border-radius: 8px;
    background-color: #EFF0F2;
}
.progress-content > span{
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-family: Proxima-Nova-Bold;
    color: #000000;
}
.progress-circle-box{
    cursor: pointer;
}
.progress-circle{
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #707070;
    border: 2px solid #eff0f2;
    border-radius: 50%;
}
.progress-circle.active{
    background-color: #FFE32C;
    border: 2px solid #ffffff;
}
.progress-bar{
    background-color: #ffa22c;
}
.sb-mood-box{
    padding: 6px 12px;
}
.sb-mood-box img{
    height: 18px;
}
.sb-mood-box span{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #00C4CC;
    vertical-align: middle;
}
.sb-mood-box i{
    font-size: 18px;
    color: #00C4CC;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}
a.invite-btn{
    width: 100%;
    background-color: #00c4cc;
}

.accordion-content-img-box{
    background-image: url(//d2pil9hl7m4qq3.cloudfront.net/images/accordion-content-img.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.accordion-content-info .yellow-btn{
    padding: 4.5px 25px;
}
.accordion-content-info-title{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 10px;
    color: #00C4CC;
}
.accordion-content-info-subtitle{
    font-size: 10px;
    font-family: Lato;
    line-height: 12px;
    color: #AFB4BD;
}
.accordion-content-friends-progress{
    font-size: 12px;
    color: #3B5998!important;
}
.accordion-content-friends-images{
    cursor: pointer;
}
.accordion-content-friends-images img:first-child{margin-left: 0;}
.accordion-content-friends-images img{
    display: inline-block;
    width: 24px;
    border-radius: 50%;
    margin-left: -16px;
}
.accordion-content-friends-images span{
    font-size: 10px;
    font-family: Lato;
    color: #AFB4BD;
    margin-left: auto;
}
.social-accordion-content-item{
    padding: 12px;
}
.accordion-content .social-accordion-content-item:first-child{
    border-bottom: 1px solid #DFE0E2;
}
.social-accordion-content-item span{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    color: #0E131D;
}
.social-accordion-content-item a{

}

/*MOBILE SITEBAR*/
#mobile-sitebar a.sb-view-profile{
    margin: 8px 12px 20px 12px;
    display: block;
    color: #ffffff;
    background-color: #3b5998;
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}
#mobile-sitebar .avatar-box{
    width: 100px;
    height: 100px;
}
#mobile-sitebar a.invite-btn{
    display: block;
    width: auto;
    margin-right: 12px;
    margin-left: 12px;
}
#mobile-sitebar .sb-profile-box, #mobile-sitebar, #mobile-sitebar .sb-mood-box{
    border: none;
}
#sitebar .sb-brain-progress-box, #sitebar .sb-mood-box, #sitebar .sb-followers, #sitebar .sb-following{
    cursor: pointer;
}
.invite-friends-icon{
    width: 16px;
}
a.sb-invite-btn{
    display: inline-block;
    font-family: Proxima-Nova-Semibold;
    font-size: 14px;
    line-height: 1.21;
    text-align: center;
    color: #3B5998;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 10px 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}



/*Start Custom Accordion*/
.accordion-link {
    display: block;
    position: relative;
}
.accordion-link:after {
    content: "\f0d7";
    font-family: 'FontAwesome';
    position: absolute;
    color: #0E131D;
    right: 0;
    top: 0;
    line-height: 5px;
    font-size: 16px;
}
.accordion-link[aria-expanded="true"]:after {
    content: "\f0d8";
}
.accordion-link[aria-expanded="false"] .sb-brain-progress-desc{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 16px);
}
#accordion-2 .accordion-link:after, #accordion-3 .accordion-link:after,
#mobile-accordion-2 .accordion-link:after, #mobile-accordion-3 .accordion-link:after{
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.sb-accordion .card{
    border: none;
    background-color: transparent;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: #ffffff;
}
#accordion-2.sb-accordion .accordion-link, #accordion-3.sb-accordion .accordion-link,
#mobile-accordion-2.sb-accordion .accordion-link, #mobile-accordion-3.sb-accordion .accordion-link{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    border-radius: 4px;
}
#accordion-2 .accordion-link[aria-expanded="true"], #accordion-3 .accordion-link[aria-expanded="true"],
#mobile-accordion-2 .accordion-link[aria-expanded="true"], #mobile-accordion-3 .accordion-link[aria-expanded="true"]{
    background-color: #00C4CC;
}
#accordion-2 .accordion-link[aria-expanded="true"] .sb-mood-text, #accordion-2 .accordion-link[aria-expanded="true"] .sb-mood-box i,
#accordion-3 .accordion-link[aria-expanded="true"] .sb-mood-text, #accordion-3 .accordion-link[aria-expanded="true"] .sb-mood-box i,
#mobile-accordion-2 .accordion-link[aria-expanded="true"] .sb-mood-text, #mobile-accordion-2 .accordion-link[aria-expanded="true"] .sb-mood-box i,
#mobile-accordion-3 .accordion-link[aria-expanded="true"] .sb-mood-text, #mobile-accordion-3 .accordion-link[aria-expanded="true"] .sb-mood-box i{
    color: #ffffff;
}
/*End Custom Accordion*/
/******************************  End Sitebar  *************************/


/******************************  Start Tabs Styles  *************************/
.tabs-container{

}
.custom-nav-tabs{
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background-color: #fff;
}
.custom-nav-tabs .nav-item a.nav-link{
    font-size: 14px;
    line-height: 1.21;
    color: #afb4bd;
    border: none;
    padding: 19px 20px;
}
.custom-nav-tabs .nav-item a.nav-link.active{
    color: #0e131d;
    border: none;
    border-bottom: 2px solid #00C4CC;
}
/******************************  End Tabs Styles  *************************/


/*****************************  Start All Chalanges  ************************/
.chalanges-filter-box{
    padding: 8px 12px;
    background-color: #e7e8eb;
    margin-bottom: 36px;
}
.chalanges-filter-box a{
    font-size: 14px;
    line-height: 1.21;
    color: #afb4bd;
    margin-right: 22px;
}
.chalanges-filter-box a:last-child{
    margin-right: 0;
}
.chalanges-filter-box a.active{
    color: #0e131d;
}
.all-chalanges-container{

}
.chalange-item{
    border-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    margin-bottom: 24px;
}
.chalange-info{
    position: relative;
    display: flex;
    min-height: 90px;
    padding: 16px 10px 16px 12px
}
.chalange-subtitle{
    font-family: Lato;
    font-size: 10px;
    line-height: 1.2;
    color: #afb4bd;
}
.chalange-title{
    font-size: 14px;
    line-height: 1.29;
    color: #0e131d;
    vertical-align: middle;
}
.chalange-info-img-box{
    height: 32px;
    display: inline-block;
    vertical-align: top;
}
.chalange-info-img-box img{
    height: 32px;
}
.chalange-info-title-box{
    width: 170px;
    display: inline-block;
}
.chalange-heart{
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
}
.chalange-heart i{
    font-size: 18px;
    color: #afb4bd;
}
.mobile-chalanges-filter-box select{
    background-color: transparent;
}
/*****************************  End All Chalanges  ************************/

/*****************************  Start My Chalanges  ************************/
.chalange-item-info{
    padding: 16px 16px 16px 0;
}
.chalange-item-info .sb-brain-progress-desc{
    font-size: 14px;
}
.chalange-item-info .progress-bar{
    background-image: linear-gradient(89deg, #ffa22c, #fe712c 55%, #ff6590);
}
.my-chalange-progress-subtitle{
    font-size: 12px;
    line-height: 1;
    color: #afb4bd;
    margin-top: 8px;
    margin-bottom: 16px;
}
.select-filter select{
    width: 230px;
    margin: 16px 0 24px auto;
    border-radius: 4px;
    border: solid 1px #d9dbe1;
    font-size: 14px;
    color: #51555d;
    cursor: pointer;
}
/*****************************  End My Chalanges  ************************/

/*****************************  Srart All Quick Flips  ************************/
.tabs-add-new-box{
    margin-left: auto;
    padding: 10px 12px;
}
.tabs-add-new-box i{
    color: #afb4bd;
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
    vertical-align: middle;
}
a.add-quick-flip{
    padding: 10px 32px;
}
/***********************  start multiple filter  *********************/
.multiple-filter-box{
    margin-top: 16px;
    margin-bottom: 16px;
}
.multiple-filter-box .form-group{
    display: inline-block;
    margin-bottom: 0;
    margin-right: 12px;
}
.multiple-filter-box select{
    width: 170px;
    border-radius: 4px;
    border: solid 1px #d9dbe1;
    background-color: transparent;
    font-size: 14px;
    line-height: 1.21;
    color: #51555d;
    height: auto!important;
    padding: 9px 12px;
}
.multiple-filter-box select:focus{
    background-color: transparent;
}
.multiple-filter-box .search-flips{
    width: 195px;
    border-radius: 4px;
    border: solid 1px #d9dbe1;
    background-color: transparent;
    padding: 6.5px 12px 6.5px 40px;
    font-size: 14px;
}
.multiple-filter-search-box{
    position: relative;
}
.multiple-filter-search-box:before{
    font-family: 'FontAwesome';
    content: "\f002";
    position: absolute;
    font-size: 18px;
    color: #51555d;
    z-index: 1;
    top: 5px;
    left: 12px;
    background-color: transparent;
}
.multiple-filter-box .pure-material-checkbox{
    font-size: 12px;
    line-height: 1.17;
    color: #51555d;
}

/***********************  end multiple filter  *********************/
.all-quick-info{
    display: block;
}
.all-quick-desc{
    font-size: 14px;
    line-height: 1.29;
    padding-right: 75px;
    color: #0e131d;
}
.all-quick-share-row{
    font-family: Lato;
    font-size: 10px;
    line-height: 1.2;
    color: #afb4bd;
}
.all-quick-share-row span{
    display: inline-block;
}
.all-quick-share-row span i{
    font-size: 13px;
    color: #afb4bd;
}
.all-quick-share-row span.active i.fa-heart{
    color: #00C4CC;
}
/*****************************  End All Quick Flips  ************************/


/**********************  Add New Quick Flip ******************/
.quick-flip-upload-box{
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    text-align: center;
    padding: 28px;
}
.quick-flip-upload-btn-box img{
    width: 106px;
    margin-bottom: 14px;
}
.recordUpload{
    font-size: 16px;
    line-height: 1.19;
    color: #707070;
}
.recordUpload a{
    text-decoration: underline;
    color: #3b5998;
}
.quick-flip-upload-desc{
    width: 400px;
    margin: auto;
    font-size: 12px;
    line-height: 1.5;
    color: #51555d;
}
.quick-flip-upload-desc a{
    color: #3b5998;
    text-decoration: underline;
}
.add-quick-flip-form .form-group{
    margin-bottom: 8px;
}
.add-quick-flip-form .form-control{
    font-size: 14px;
    line-height: 1.21;
    color: #51555d;
    border-radius: 4px;
    border: solid 1px #d9dbe1;
    padding: 9px 12px;
    background-color: transparent;
}
.add-quick-flip-form .form-control:focus{
    box-shadow: none;
}
.add-quick-flip-form select.form-control{
    height: auto;
}
.add-quick-flip-form textarea.form-control{
    padding: 12px;
    resize: none;
    height: 275px;
}
.add-quick-flip-form .form-control::placeholder {color: #51555d;opacity: 1;}
.add-quick-flip-form .form-control:-ms-input-placeholder {color: #51555d;}
.add-quick-flip-form .form-control::-ms-input-placeholder {color: #51555d;}

.add-quick-flip-form textarea.form-control::placeholder {color: #cecece;opacity: 1;}
.add-quick-flip-form textarea.form-control:-ms-input-placeholder {color: #cecece;}
.add-quick-flip-form textarea.form-control::-ms-input-placeholder {color: #cecece;}

/**********************  End New Quick Flip ******************/

/**********************  Start Quick Flip Item ******************/
.quick-item-control{
    padding: 5px 0;
    background-color: #e7e8eb;
    margin-top: -7px;
    border-bottom: 1px solid #aeafb1;
}
.prev-flip, .next-flip{
    font-size: 14px;
    line-height: 1.43;
}
.all-flip-icon i{
    display: block;
    font-size: 30px;
}
.quick-item-flower-box{
    padding: 11px 0;
    background-color: #e7e8eb;
}
.flower-icons-box span{
    font-size: 14px;
    cursor: pointer;
}
.flower-icons-box span i{
    color: #afb4bd;
}
.flower-desc{
    font-size: 14px;
    line-height: 1.43;
    padding: 16px;
    background-color: #ffffff;
}
/**********************  End Quick Flip Item ******************/

/**********************  Start Challenge Item ******************/
.challenge-item-img-box{
    height: 300px;
    overflow: hidden;
}
.challenge-item-mean{
    font-size: 14px;
    line-height: 1.21;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    padding: 15px 12px;
}
.challenge-item-desc-box{
    padding: 12px;
    background-color: #e7e8eb;
    margin-bottom: 30px;
    border-radius: 4px;
}
.challenge-item-desc-box .yellow-btn{
    width: 200px;
}
.challenge-item-desc{
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 25px;
}
.how-work-challenge-text{
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.17;
    color: #AFB4BD;
    text-align: center;
}
.clever-icon{
    width: 15px;
    vertical-align: middle;
}
.challenge-item-mean .turquoise-border-btn{
    padding: 5.5px 13px;
}
.challenge-item-mean .turquoise-border-btn span{
    display: inline-block;
    vertical-align: bottom;
}
.challenge-item-mean-desc{
    font-size: 18px;
    font-family: Proxima-Nova-Semibold;
}
.challenge-item-sitebar .scrollbar{
    height: 350px;
}

/**********************  Start Challenge Item ******************/


/**********************  Start Challenges View ******************/
.view-challenge-item-img-box > img:nth-child(2), .view-challenge-item-img-box > img:nth-child(3){
    display: none;
}
.view-challenge-content .challenge-item-desc{
    font-size: 12px;
    color: #51555D;
    line-height: 20px;
}
.view-challenge-content .challenge-item-mean{
    padding: 15px 20px;
}
.challenge-view-mean img{
    height: 35px;
    margin-right: 8px;
}
.challenge-view-mean .mean-title{
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
}
.challenge-view-mean .mean-subtitle{
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    color: #AFB4BD;
}
.view-mean-info-link i{
    font-size: 35px;
    color: #E7E8EB;
}
.view-challenge-item-box{
    padding: 30px 20px 80px;
    border-radius: 0;
    background-color: #e7e8eb;
}
.view-challenge-item-box .nav-tabs{
    border-bottom: none;
}
.view-challenge-item-box .nav-item.nav-link{
    border: 1px solid #00C4CC;
    border-radius: 4px;
}
.view-challenge-item-box a.turquoise-border-btn{
    width: 100%;
    margin-bottom: 30px;
    font-size: 18px;
    padding: 20.5px 5px;
}
.view-challenge-item-box a.turquoise-border-btn.active{
    color: #ffffff;
    background-color: #00C4CC;
}
/**********************  End Challenges View ******************/


/**********************  Start Challenge Active Item Main ******************/
.challenge-item-active-desc-box{
    padding: 16px 12px;
    background-color: #ffffff;
}
.challenge-item-active-title{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    color: #232937;
    margin-bottom: 12px;
}
.challenge-item-active-desc{
    font-size: 12px;
    line-height: 1.5;
    color: #afb4bd;
}
.challenge-active-tabs-container{
    margin-bottom: 30px;
}
.challenge-active-tabs-container .custom-nav-tabs{
    background-color: #e7e8eb;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 20px;
}
.challenge-active-tabs-container .custom-nav-tabs .nav-item a.nav-link{
    padding: 12px 20px;
}
.challenge-active-tabs-container .custom-nav-tabs .nav-item a.nav-link.active{
    background-color: transparent;
}
/**********************  End Challenge Active Item Main ******************/

/**********************  Start Challenge Active Item (Today's Activity) ******************/
.challenge-activity-progress-box{
    margin-bottom: 16px;
    padding: 16px 12px;
    background-color: #ffffff;
}
.challenge-activity-progress-box .sb-brain-progress-desc{
    font-size: 14px;
    line-height: 0.86;
}
.challenge-activity-progress-box .progress-content > span{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
}
.challenge-activity-progress-box .progress-box{
    width: calc(100% - 40px);
}
.challenge-activity-progress-box .progress-box .progress{
    height: 20px;
    border-radius: 25px;
}
.challenge-activity-progress-box .progress-box .progress .progress-circle-box{
    padding-top: 3px;
    padding-right: 14px;
    padding-left: 14px;
}
.challenge-activity-progress-box .progress-box .progress .progress-circle{
    width: 14px;
    height: 14px;
}
.followers-started-title{
    font-family: Proxima-Nova-Semibold;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.17;
    color: #0e131d;
    margin-bottom: 20px;
}
.today-activity-text{
    font-size: 14px;
    line-height: 1.43;
    color: #0e131d;
    background-color: #e7e8eb;
    padding: 12px;
    border-radius: 4px;
}
.today-activaty-msg-box{
    border-radius: 4px;
    border: solid 1px #d9dbe1;
}
.today-activaty-msg-box textarea{
    width: 100%;
    height: 100px;
    border: none;
    background-color: transparent;
    resize: none;
    padding: 12px;
}
.today-activaty-msg-box textarea:focus{
    outline: none;
}
.today-activaty-btn-box{
    border-top: 1px solid #d9dbe1;
    background-color: #e7e8eb;
}
.today-activaty-btn-box .yellow-btn{
    padding: 7.5px 38px;
}
.today-activaty-time{
    font-size: 14px;
    line-height: 1.43;
    color: #ffffff;
    width: 25%;
    background-color: #00c4cc;
    padding: 16px 12px;
    border-bottom-left-radius: 4px;
}
.today-activaty-btn{
    width: 73%;
    padding-right: 7px;
}
/**********************  End Challenge Active Item (Today's Activity) ******************/

/**********************  Start Challenge Active Item (Challenge Journal) ******************/
.journal-progress-date{
    font-size: 12px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.25;
    color: #0e131d;
    margin-top: 6px;
    padding-right: 40px;
}
#journal .today-activaty-msg-box{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#journal .today-activaty-time{
    width: 23%;
}
#journal .today-activaty-btn{
    width: 75%;
}
/**********************  End Challenge Active Item (Challenge Journal) ******************/

/**********************  Start Challenge Active Item (Settings) ******************/
#settings .mood-title{
    font-weight: normal;
    font-family: Proxima-Nova-Semibold;
}
.active-challenge-settings-box{
    margin-bottom: 24px;
}
.challenge-settings-title{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.21;
    color: #0e131d;
}
.challenge-settings-desc{
    font-size: 12px;
    line-height: 1.5;
    color: #afb4bd;
    margin-bottom: 16px;
}
.active-challenge-settings-box select.form-control{
    width: 300px;
    margin-left: 0;
    background-color: transparent;
}
.challenge-settings-btn-box a.turquoise-btn{
    width: 108px;
}
a.grey-btn{
    display: inline-block;
    font-family: Proxima-Nova-Semibold;
    font-size: 14px;
    line-height: 1.21;
    text-align: center;
    color: #0e131d;
    border-radius: 4px;
    background-color: #FFFFFF;
    padding: 10px 15px;
}
.challenge-settings-btn-box a.turquoise-border-btn{
    width: 178px;
    padding: 6.5px 13px;
}
/**********************  End Challenge Active Item (Settings) ******************/

/**********************  Start Profile (Activity) ******************/
#profile-activity .chalange-img-box{
    position: relative;
}
.nav-tabs-with-btn .turquoise-border-btn, .mobile-tabs-add-new-box .turquoise-border-btn{
    padding: 6.5px 13px;
}
/**********************  End Profile (Activity) ******************/

/**********************  Start Profile (My Posts) ******************/
#profile-posts{
    margin-top: 24px;
}
/**********************  End Profile (My Posts) ******************/

/**********************  Start Profile (Followers) ******************/
#profile-followers a.turquoise-btn{
    min-width: 108px;
}
.followers-container{

}
.followers-item{
    padding: 16px 0;
    border-bottom: 1px solid #e7e8eb;
}
.followers-img-box{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}
.followers-img-box img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.followers-info-box{
    display: table-cell;
    vertical-align: middle;
    padding-left: 16px;
}
.followers-name{
    font-size: 24px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.21;
    color: #000000;
}
.followers-since{
    font-size: 14px;
    line-height: 1.21;
    color: #afb4bd;
}
/**********************  End Profile (Followers) ******************/

/**********************  Start Profile (Followings) ******************/
#profile-following .turquoise-border-btn{
    min-width: 108px;
    padding: 6.5px 13px;
}
/**********************  End Profile (Followings) ******************/

/**********************  Start Profile (My Logs) ******************/
#profile-logs .grey-btn{
    color: #afb4bd;
    width: 108px;
    border: 1px solid #d9dbe1;
    background-color: transparent;
}
.logs-desc{
    font-size: 14px;
    line-height: 1.21;
    color: #afb4bd;
}
.logs-desc a{
    color: #3b5998;
    text-decoration: underline;
}
/**********************  End Profile (My Logs) ******************/

/***********************  Start Profile Page Mobile  **************************/
.mobile-custom-nav-tabs{
    display: none;
    background-color: #ffffff;
}
.profile-page-user-info{display: none;}
@media only screen and (max-width: 767px) {
    .profile-page #sitebar, .profile-page header, .profile-page footer,
    .profile-page .custom-nav-tabs, .profile-page .tabs-add-new-box{display: none;}
    .has-mobile-tab .custom-nav-tabs,.searchResultContent .custom-nav-tabs{display: none;}
    .mobile-custom-nav-tabs,
    .profile-page-user-info{display: block;}
    .profile-page-user-info .sb-profile-box{
        margin: 0;
    }
}
.profile-back-page{
    width: 100%;
    color: #ffffff;
    background-color: #00c4cc;
    padding: 7px 15px;
}
.profile-page-user-info .sb-profile-box{
    display: table;
    width: 100%;
    padding: 20px 15px;
}
.profile-page-user-info .avatar-box{
    display: table-cell;
    vertical-align: middle;
}
.profile-page-user-info .mobile-profile-info-box{
    display: table-cell;
    vertical-align: middle;
}
.mobile-profile-info-box a.grey-btn{
    color: #ffffff;
    background-color: #3b5998;
}
.mobile-profile-info-box .sb-name,
.mobile-profile-info-box .sb-points{
    text-align: left;
}
a.mb-logout{
    color: #3b5998;
}

#owl-tabs-mobile .nav-link, #owl-tabs-mobile-2 .nav-link, #owl-tabs-mobile-3 .nav-link{
    font-size: 14px;
    padding: 8px 10px;
    text-align: center;
    color: #afb4bd;
    border: none;
}
#owl-tabs-mobile .nav-link.active, #owl-tabs-mobile-2 .nav-link.active, #owl-tabs-mobile-3 .nav-link.active{
    border: none;
    background-color: transparent;
    color: #000000;
}
#owl-tabs-mobile .owl-wrapper-outer, #owl-tabs-mobile-2 .owl-wrapper-outer, #owl-tabs-mobile-3 .owl-wrapper-outer{
    z-index: 9;
}
#owl-tabs-mobile .owl-controls, #owl-tabs-mobile-2 .owl-controls, #owl-tabs-mobile-3 .owl-controls{
    margin: 0;
    top: 0;
    position: absolute;
    width: 100%;
}
#owl-tabs-mobile .owl-prev, #owl-tabs-mobile .owl-next,
#owl-tabs-mobile-2 .owl-prev, #owl-tabs-mobile-2 .owl-next,
#owl-tabs-mobile-3 .owl-prev, #owl-tabs-mobile-3 .owl-next{
    color: #afb4bd;
    background-color: transparent;
    position: absolute;
    z-index: 10;
}
#owl-tabs-mobile .owl-prev i, #owl-tabs-mobile .owl-next i,
#owl-tabs-mobile-2 .owl-prev i, #owl-tabs-mobile-2 .owl-next i,
#owl-tabs-mobile-3 .owl-prev i, #owl-tabs-mobile-3 .owl-next i{
    font-size: 16px;
}
#owl-tabs-mobile .owl-prev, #owl-tabs-mobile-2 .owl-prev, #owl-tabs-mobile-3 .owl-prev{left: 0;}
#owl-tabs-mobile .owl-next, #owl-tabs-mobile-2 .owl-next, #owl-tabs-mobile-3 .owl-next{right: 0;}
/***********************  End Profile Page Mobile  **************************/

/***********************  Start Update Profile  **************************/
.saved{
    width: 140px;
}
.up-profile-btn-box{
    padding: 10px 12px;
    background-color: #ffffff;
    border-radius: 4px;
}
.up-profile-btn-box .turquoise-border-btn{
    padding: 6.5px 13px;
}
.up-profile-avatar-info-box{
    padding: 16px 0;
}
.up-profile-avatar-box{
    position: relative;
}
.up-profile-avatar-box img{
    width: 100%;
    border-radius: 50%;
}
.change-avatar-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.change-avatar-icon img{
    width: 32px;
    border-radius: 0;
}
.up-profile-avatar-info-box{

}
.update-profile-content .form-group{
    margin-bottom: 0;
}
.update-profile-content .form-group label{
    font-size: 14px;
    line-height: 1.36;
    color: #0e131d;
}
.update-profile-content .form-control{
    display: inline-block;
    font-size: 14px;
    line-height: 1.36;
    color: #51555d;
    border-radius: 4px;
    border: 1px solid #d9dbe1;
    background-color: #ffffff;
    padding: 8.5px 8px;
}
.update-profile-content i.fa-eye{
    cursor: pointer;
    cursor: pointer;
    position: absolute;
    top: 11px;
    right: 12px;
    z-index: 9;
}
.interest .pure-material-checkbox > span::before{
    width: 18px;
    height: 18px;
}
.interest .pure-material-checkbox > span::after{
    width: 7px;
    height: 12px;
}
.update-profile-content select.form-control{
    height: auto;
    padding: 8.5px 8px;
    margin-left: auto;
}
.update-profile-content .form-group .form-control:focus{
    box-shadow: none;
}
.user-information-box{
    margin-top: 24px;
    margin-bottom: 24px;
}
.user-information-title{
    font-family: Proxima-Nova-Semibold;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
    color: #0e131d;
    background-color: #e7e8eb;
    padding: 16.5px 12px;
    margin-bottom: 24px;
}
.user-information-edit-box{
    border: 1px solid #d9dbe1;
    border-radius: 4px;
    background-color: #ffffff;
}
.user-information-edit-box > div:first-child{
    padding: 12px 12px 14px;
    border-bottom: 1px solid #d9dbe1;
}
.user-information-edit-box > div:last-child{
    padding: 14px 12px 12px;
}
.edit-title{
    font-family: Proxima-Nova-Semibold;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.36;
    color: #0e131d;
}
.edit-subtitle{
    border: none;
    background-color: transparent;
    font-size: 14px;
    line-height: 1.36;
    color: #51555d;
}
.preferences{
    width: 230px;
    margin-left: auto;
}
.preferences:focus{
    border: 1px solid #d9dbe1;
    box-shadow: none;
}

.interest .pure-material-checkbox > span::before{
    border-radius: 2px;
    border: solid 1px #d9dbe1;
    background-color: #ffffff;
}
.interest .pure-material-checkbox{
    font-size: 14px!important;
    line-height: 1!important;
    color: #51555d!important;
}
.messaging-select{
    width: 265px;
}
/***********************  End Update Profile  **************************/




/*********************************  Srart Create Card  ********************************/
.create-card-row{
    margin-top: 57px;
    margin-bottom: 57px;
}
.create-card-box{
    width: 190px;
    margin: auto;
}
.create-card-col-first{
    border-right: 1px solid #d9dbe1;
}
.create-card-box .turquoise-btn{
    padding-right: 10px;
    padding-left: 10px;
}
.create-card-subtitle{
    font-size: 14px;
    line-height: 1.43;
    color: #0e131d;
}
.create-card-img-box{
    display: inline-block;
    border-radius: 4px;
    background-color: #d9dbe1;
    padding: 31.5px 35px;
    margin-bottom: 16px;
}
.create-card-img-box img{
    width: 68px;
}
.create-card-text{
    font-size: 14px;
    line-height: 1.21;
    color: #51555d;
    margin-bottom: 24px;
}
.your-card-container{
    position: relative;
    margin-top: 24px;
    margin-bottom: 30px;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/pattern.png");
    padding: 36px;
}
.your-card-header{
    text-align: center;
    background-color: #ffffff;
    padding: 30px;
}
.your-card-header span{
    display: block;
    font-size: 22px;
    line-height: 1.27;
    max-width: 408px;
    margin: auto;
}
.your-card-body{
    background-color: #e7e8eb;
}
/****  start override ckeditor  ****/
.cke_top{
    background: #e0e0f1!important;
    border-bottom: none !important;
}
#cke_yourCardEditor{
    border: none;
}
/****  end override ckeditor  ****/
.your-card-upload-row{
    height: 690px;
}
.your-card-footer{
    background-color: #e7e8eb;
    padding: 8px 12px;
}
a.blue-btn{
    display: inline-block;
    font-family: ProximaNova;
    font-size: 14px;
    line-height: 1.21;
    text-align: center;
    color: #ffffff;
    background-color: #3b5998;
    border-radius: 4px;
    padding: 10px 15px;
}
.your-card-footer .turquoise-border-btn{
    padding: 6.5px 13px;
}
.your-card-footer .turquoise-border-btn, .your-card-footer .turquoise-btn{
    min-width: 102px;
}
.yourCardCollapse{
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border: 3px solid #00C4CC;
}
#yourCardCollapse{
    position: absolute;
    left: 4px;
    width: 300px;
    border-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background-color: #eff0f2;
    z-index: 9;
}
.your-card-collapse-title{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
    line-height: 0.86;
    text-align: center;
    padding: 12px;
    border-bottom: 1px solid rgba(175, 180, 189, 0.25);
}
.color-box{
    padding: 12px;
}
.color-item{
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
}

/*********************************  End Create Card  ********************************/

/*********************************  Srart My Messages  ********************************/
.my-messages-page .custom-nav-tabs .nav-item a.nav-link{
    padding: 19px 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #AFB4BD;
}
.my-messages-page .custom-nav-tabs .nav-item a.nav-link.active{
    color: #0E131D;
    background-color: transparent;
}
.my-messages-page .custom-nav-tabs{
    border-radius: 4px;
    box-shadow: none;
}
.tabs-new-msg{
    margin-left: auto;
    padding: 9px 12px;
}
.messages-user-box{

}
.messages-user-col{
    background-color: #FFFFFF;
}
.messages-user-item{
    display: table;
    width: 100%;
    padding: 19px 12px;
    cursor: pointer;
    border-top: 1px solid #D9DBE1;
    border-radius: 0 !important;
}
.messages-user-item.live .msg-user-name > span{
    display: inline-block;
    border-radius: 50%;
    margin-left: 6px;
    width: 6px;
    height: 6px;
    background-color: #85D451;
}
.messages-user-item.live .msg-user-name{
    font-family: Proxima-Nova-Semibold;
}
.messages-user-avatar-box{
    display: table-cell;
    vertical-align: middle;
    width: 38px;
    height: 38px;
}
.messages-user-avatar-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.messages-user-info-box{
    display: table-cell;
    vertical-align: middle;
    padding-left: 12px;
    line-height: 0.86px;
}
.msg-user-name{
    font-size: 14px;
    line-height: 0.86;
    color: #0e131d;
}
.msg-user-star{

}
.msg-user-star i{
    font-size: 11px;
    color: #FFE32C;
}
.msg-user-to{
    font-size: 12px;
    line-height: 1;
    color: #51555d;
}
.msg-user-date{
    font-size: 8px;
    line-height: 1.5;
    color: #afb4bd;
}
.messages-user-item.active{
    border-radius: 0!important;
    background-color: #00C4CC!important;
}
.messages-user-item.active .msg-user-name,
.messages-user-item.active .msg-user-to,
.messages-user-item.active .msg-user-date{
    color: #ffffff;
}
.messages-user-item.active .msg-user-name{
    font-weight: normal;
}
.chat-box{
    margin-top: 16px;
    padding: 14px 0;
    border-radius: 4px;
    background-color: #f8f8f8;
}
.chat-box .scrollbar{
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 40px;
}
.chat-item{
    display: table;
    margin-bottom: 16px;
}
.chat-avatar-box{
    display: table-cell;
    width: 38px;
    height: 38px;
}
.chat-avatar-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.chat-info{
    display: table-cell;
    vertical-align: top;
    padding-left: 8px;
}
.chat-name-date{
    font-size: 10px;
    line-height: 1.2;
    color: #afb4bd;
}
.chat-sm-circle{
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #afb4bd;
    margin-right: 6px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: middle;
}
.chat-msg-item{
    display: inline-block;
    font-size: 14px;
    line-height: 1.21;
    color: #51555d;
    padding: 7px 8px;
    background-color: #e7e8eb;
    border-radius: 4px 20px 20px 4px;
    max-width: 240px;
}
.chat-item-to .chat-msg-item{
    color: #ffffff;
    background-color: #00C4CC;
}
.chat-write-box{
    background-color: #e7e8eb;
    padding: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.chat-write-box textarea{
    border-radius: 4px;
    border: 1px solid #d9dbe1;
    background-color: #ffffff;
    resize: none;
    height: 36px;
    font-family: Lato;
    font-size: 12px;
    line-height: 1;
    padding: 10px 12px;
}
.chat-write-box img{
    color: #3b5998;
    position: absolute;
    right: 24px;
    top: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.chat-write-box::placeholder {color: #aeafb1;font-family: Lato;opacity: 1;font-size: 12px;}
.chat-write-box:-ms-input-placeholder {color: #aeafb1;font-family: Lato;font-size: 12px;}
.chat-write-box::-ms-input-placeholder {color: #aeafb1;font-family: Lato;font-size: 12px;}
.chat-write-box textarea:focus{
    box-shadow: none;
    border: 1px solid #d9dbe1;
}
#myMessages .form-group{
    padding: 0!important;
    width: 100%!important;
}

.search-group-img-box{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}
.search-group-img-box img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.search-group-info-box{
    display: table-cell;
    vertical-align: middle;
    padding-left: 16px;
}
.search-group-insiders{
    font-size: 18px;
    font-family: Proxima-Nova-Bold;
}
.search-group-people-count{
    color: #00c4cc;
}
.search-group-box .multiple-filter-box{
    margin-top: 30px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid #d9dbe1;
}
.search-group-box .multiple-filter-box select,
.search-group-box .multiple-filter-box .search-flips{
    width: 225px;
}
/*********************************  End My Messages  ********************************/

/*********************************  Start Uplift Friend  ********************************/
.uplift-friend .create-card-subtitle{
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 24px;
}
.uplift-friend .all-quick-info{
    padding: 16px 12px 24px;
}
.uplift-friend .all-quick-desc{
    font-size: 12px;
    line-height: 1.67;
    color: #0e131d;
    padding-right: 24px;
}
/*********************************  End Uplift Friend  ********************************/

/*********************************  Start Invitation Page  ********************************/
.invitationContent .challenge-item-active-title{
    padding-bottom: 10px;
    border-bottom: 1px solid #c3c3c3;
}
.invitationTitle{
    font-family: Proxima-Nova-Bold;
}
a.viewInvitation{
    color: #00c4cc;
    text-decoration: underline;
}
#collapseInvitation{
    font-size: 14px;
}
.invitationDates{
    color: #00c4cc;
    padding-top: 16px;
    border-top: 1px solid #c3c3c3;
    margin-top: 16px;
    display: inline-block;
}
.invitationDates strong{
    color: #707070;
}
#collapseInvitation .turquoise-border-btn{
    padding: 6.5px 13px;
}
#collapseInvitation .grey-btn{
    color: #afb4bd;
    width: 108px;
    border: 1px solid #d9dbe1;
    background-color: transparent;
}
.viewInvitation:before{
    content: 'View full invitation';
}
.viewInvitation[aria-expanded="true"]:before{
    content: 'Hide full invitation';
}
.rangeInvitationBox{

}
.rangeInvitationBox .form-group label{
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 8px;
}
.rangeInvitationBox .form-control-range {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #eff0f2;
    outline: none;
    border-radius: 25px;
    /*pointer-events: none;*/
}
.rangeInvitationBox .form-control-range:hover {
    opacity: 1;
}
.rangeInvitationBox .form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00c4cc;
    cursor: pointer;
}
.rangeInvitationBox .form-control-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #00c4cc;
    cursor: pointer;
}
/*********************************  End Invitation Page  ********************************/

/*********************************  Start notFoundPage Page  ********************************/
.notFoundPage .content-title{
    font-family: Proxima-Nova-Regular;
    color: #00c4cc;
    width: 500px;
    margin: auto;
}
.notFoundPage .content-title a{
    font-family: Proxima-Nova-Bold;
    color: #00c4cc;
    text-decoration: underline;
}
.notFounfLogo{
    width: 250px;
}
.notFoundTitle h2{
    font-size: 48px;
    font-family: Proxima-Nova-Bold;
}
/*********************************  End notFoundPage Page  ********************************/

/*********************************  Start Search Result Page  ********************************/
.search-result-container .chalange-item{
    padding-top: 12px;
}
.search-result-container .chalange-img-box{
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
}
.search-result-container .chalange-img-box img{
    width: 100%;
    height: 100%;
}
.search-result-container .challengeInfoBox .sb-points{
    margin-top: 12px;
}
.search-result-container .challengeInfoBox .yellow-btn{
    margin-top: 12px;
}
.search-result-container .challengeInfoBox .search-result-title{
    font-family: Proxima-Nova-Bold;
    text-align: center;
}
.search-result-container .challengeInfoBox .sb-points > div{
    display: inline-block;
    vertical-align: middle;
}
/*********************************  End Search Result Page  ********************************/

/*********************************  Start Email Verification Page  ********************************/
.success-msg{
    font-family: Proxima-Nova-Bold;
    color: #fff;
    background-color: #2eca2e;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
}
.verifyCodeBox{
    width: 500px;
}
.verifResendDesc{
    color: #00c4cc;
    text-align: center;
    font-size: 14px;
}
.verifResendDesc a{
    color: #00c4cc;
    text-decoration: underline;
    font-family: Proxima-Nova-Bold;
}

/*********************************  End Email Verification Page  ********************************/

/*********************************  End Survey Result Page  ********************************/
.surveyResultsTable{

}
.surveyResultsTable .table-bordered td, .surveyResultsTable .table-bordered th {
    width: 50%;
    border: 1px solid #d9dbe1;
}
.surveyResultsTable .table-bordered thead{
    color: #fff;
    background-color: #00c4cc;
}
.surveyResultsTable .table-bordered td:first-child{
    font-family: Proxima-Nova-Bold;
}
/*********************************  End Survey Result Page  ********************************/

/*********************************  Srart Modals  ********************************/
/*custom radio btn*/
@keyframes ripple {
    0% {
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
    }
    50% {
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
    }
}
.md-radio {
    margin: 10px 0;
}
.md-radio.md-radio-inline {
    display: inline-block;
}
.md-radio input[type="radio"] {
    display: none;
}
.md-radio input[type="radio"]:checked + label:before {
    border-color: #00C4CC;
    animation: ripple 0.2s linear forwards;
}
.md-radio input[type="radio"]:checked + label:after {
    transform: scale(1);
}
.md-radio label {
    display: inline-block;
    height: 14px;
    font-size: 12px;
    line-height: 1.17;
    color: #51555d;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
}
.md-radio label:before, .md-radio label:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    transition: all .3s ease;
    transition-property: transform, border-color;
}
.md-radio label:before {
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #00C4CC;
    background-color: #fff;
}
.md-radio label:after {
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    transform: scale(0);
    background-color: #00C4CC;
}
@media (min-width: 768px){
    #ReportModal .modal-dialog {max-width: 600px;}
    #inviteFriends .modal-dialog {max-width: 407px;}
    #quickText .modal-dialog{max-width: 315px;}
    #shareQuickFlip .modal-dialog,
    #newDiscussion .modal-dialog{max-width: 600px;}
    #MyPositivity .modal-dialog{max-width: 600px;}
    /*#MyFollowers .modal-dialog, #MyProgress .modal-dialog{max-width: 270px;}*/
    #Flip .modal-dialog{max-width: 370px;}
    #FirstBrainTrainer .modal-dialog{max-width: 600px;}
    .my-messages-page .uplift-btn{display: none;}
}
@media (min-width: 1200px){
    #chatModal .modal-dialog{max-width: 1170px;}
}
@media (min-width: 992px) and (max-width: 1199px){
    #chatModal .modal-dialog{max-width: 900px;}
}
@media (min-width: 768px) and (max-width: 991px){
    #chatModal .modal-dialog{max-width: 650px;}
}

.custom-modal .modal-content{
    border-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background-color: #eff0f2;
    padding: 0 12px 16px;
}
.custom-modal .modal-header{
    padding: 9px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(175, 180, 189, 0.25);
}
.custom-modal .modal-title{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
}
.custom-modal .close{
    padding: 0;
    margin: -4px 0 0 0;
}
.custom-modal .close i{
    font-size: 16px;
}
.custom-modal .close, .custom-modal .close:hover{
    color: #232937!important;
    opacity: 1!important;
}
.custom-modal .close:focus{
    outline: none;
}
.custom-modal .modal-body{
    padding: 0;
}
.custom-modal .modal-text{
    font-size: 14px;
    line-height: 1.43;
    color: #0e131d;
}
.custom-modal .modal-subtext{
    font-size: 12px;
    line-height: 1.42;
    color: #afb4bd;
}
.custom-modal .modal-footer{
    padding: 12px 0 0 0;
    border-top: 1px solid rgba(175, 180, 189, 0.25);
}
#inviteFriends .modal-text{
    font-size: 12px;
    line-height: 1.5;
    color: #51555d;
}
.invite-input{
    display: inline-block;
    width: calc(100% - 100px);
    font-size: 14px;
    padding: 6.5px 12px;
    border: 1px solid #d9dbe1;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.invite-input:focus{
    box-shadow: none;
    border: 1px solid #d9dbe1;
}
.invite-input::placeholder {color: #cecece;opacity: 1;}
.invite-input:-ms-input-placeholder {color: #cecece;}
.invite-input::-ms-input-placeholder {color: #cecece;}
.send-invite-btn{
    width: 100px;
    margin-left: -5px;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    padding-right: 10px!important;
    padding-left: 10px!important;
}
#inviteFriends .form-group{
    margin-top: 28px;
}
#quickText .form-group textarea, #shareQuickFlip .form-group textarea,
#newDiscussion .form-group textarea{
    height: 160px;
}
#shareQuickFlip .modal-content{
    padding: 7px 12px 16px;
}
#shareQuickFlip .chalange-img-box{
    height: 200px;
    overflow: hidden;
}
#newDiscussion .recordUpload{
    font-size: 14px;
    line-height: 1.29;
    color: #afb4bd;
}
#newDiscussion .quick-flip-upload-btn-box img{
    height: 34px;
    margin-bottom: 20px;
}
#chatModal .close{
    position: absolute;
    top: 12px;
    right: 12px;
}
#chatModal .chat-box{
    border-radius: 0;
    background-color: #ffffff;
}
#chatModal .chat-box.scrollbar{
    padding-right: 16px;
    padding-left: 16px;
}
#chatModal .custom-modal .modal-content{
    border-radius: 0;
    background-color: #ffffff;
    box-shadow: none;
}
.chatModalLeftCol .challenge-activity-progress-box {
    margin-bottom: 0;
    padding: 12px;
}
#chatModal.custom-modal .modal-content{
    background-color: #FFFFFF;
}
.chatModalInfoBox{
    padding: 12px;
    background-color: #FFFFFF;
}
.chatModalInfoBox .challengeInfoSubTitle{
    font-size: 12px;
}
.chatModalInfoBox .turquoise-border-btn{
    width: 116px;
}
.chatModalLeftCol .challenge-activity-progress-box, .chatModalLeftCol .chatModalInfoBox{
    border-right: 1px solid #E7E8EB;
}
#MyPositivity .modal-subtext{
    line-height: 1.5;
    color: #51555d;
    margin-bottom: 14px;
}
.modal-smile-box{

}
.modal-smile-item{
    padding: 5.5px 10px;
}
.modal-smile-item:nth-child(odd){
    background-color: #d9dbe1;
}
.modal-smile-item:nth-child(even){
    background-color: #e7e8eb;
}
.modal-smile-item img{
    width: 24px;
    height: 24px;
    margin-right: 8px;
}
.modal-smile-item span{
    font-family: Lato;
    font-size: 12px;
    line-height: 1.33;
    color: #232937;
}
.modal-graphic-box{
    padding-left: 10px;
    width: 100%;
    height: 100%;
    background-image: url("//d2pil9hl7m4qq3.cloudfront.net/images/modal-grafic.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#MyPositivity .modal-footer .grey-btn{
    color: #0e131d;
    padding: 10px 5px;
    width: 100%;
}
#MyPositivity .modal-footer .grey-btn.active{
    color: #ffffff;
    background-color: #00C4CC;
}
#MyPositivity .modal-footer {
    display: block;
    border-top: none;
}
#MyFollowers .modal-content, #MyProgress .modal-content{
    background-color: #ffffff;
    padding: 0;
}
#MyFollowers.custom-modal .modal-header, #MyProgress.custom-modal .modal-header{
    border-bottom: none;
    margin-bottom: 0;
    padding: 10px;
}
#MyFollowers .scrollbar{
    height: 400px;
}
#MyProgress .scrollbar{
    height: 250px;
}
#MyProgress.custom-modal .modal-title{
    color: #00C4CC;
}
#MyProgress.custom-modal .modal-subtitle{
    font-size: 10px;
    font-family: Lato;
    color: #AFB4BD;
    padding: 0 12px;
}
#MyProgress.custom-modal .modal-desc{
    font-size: 12px;
    line-height: 12px;
}
#MyProgress .modal-progress-content-title{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 12px;
    color: #3B5998;
}
#MyProgress.custom-modal .modal-body .scrollbar{
    padding: 0 12px;
}
#MyProgress.custom-modal .modal-header{
    padding: 12px 12px 0;
}
#MyProgress .leadersName{
    font-family: Proxima-Nova-Semibold;
}
#Flip.custom-modal .modal-content{
    background-color: #ffffff;
}
#Flip .flip-title-box{
    margin-bottom: 14px;
}
#Flip .flip-title{
    display: inline-block;
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
    line-height: 30px;
    color: #000000;
}
#Flip .share-circle{
    display: inline-block;
    float: right;
}
#Flip .share-circle img{
    width: 23px;
}
#Flip .flip-btn-box .yellow-btn,
#Flip .flip-btn-box .turquoise-border-btn{
    width: calc(50% - 5px);
}
#Flip .flip-btn-box .yellow-btn{
    padding: 4.5px 25px;
    box-shadow: none;
    float: right;
}
#Flip .face.back .modal-title{
    font-family: Proxima-Nova-Semibold;
    color: #00C4CC;
    cursor: pointer;
}
#Flip .flip-subtitle{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
}
#Flip .flip-desc{

}
#Flip.custom-modal .modal-content{
    border: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
#Flip.custom-modal .modal-header{
    border-bottom: none;
    margin-bottom: 0;
}
#Flip.custom-modal .modal-header .close{
    position: absolute;
    right: 0;
    top: 13px;
}
#Flip.custom-modal .face.back .modal-header .close{
    top: 9px;
}
#Flip.custom-modal .face.back .modal-body .scrollbar{
    height: 250px;
}

.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
}
.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.flip .card {
    border: none;
    height: 100%;
    background-color: transparent;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}
.flip .card .face {
    -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
    z-index: 2;
}
.flip .card .front {
    position: absolute;
    width: 100%;
    z-index: 1;
}
.flip .card .back {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
#backFlip .modal-content{
    padding-right: 0;
    padding-left: 0;
}
#backFlip .modal-header{
    padding-right: 12px;
    padding-left: 12px;
}
#backFlip .modal-title{
    color: #00c4cc;
}
#backFlip .scrollbar {
    height: 270px;
    padding-right: 12px;
    padding-left: 12px;
}
#backFlip .flip-subtitle{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
    padding-right: 12px;
    padding-left: 12px;
}
#backFlip .flip-desc{
    font-size: 14px;
    font-family: Proxima-Nova-Regular;
}
#SurveyModal .SurveyModalItem{
    margin-bottom: 30px;
}
#SurveyModal .SurveyModalItem .md-radio{
    padding-left: 12px;
}
#SurveyModal .scrollbar{
    overflow-x: hidden;
}
#SurveyModal .turquoise-border-btn{
    padding: 6.5px 13px;
}
#FirstBrainTrainer .modal-desc{
    font-size: 12px;
    line-height: 12px;
}
#FirstBrainTrainer .modal-progress-content-title{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
}
#FirstBrainTrainer .scrollbar{
    overflow-x: hidden;
    margin-right: -12px;
}
#FirstBrainTrainer .force-overflow{
    padding-right: 12px;
}

/*********************************  End Modals  ********************************/


/*********************************  Srart New Challenges Page (All)  ********************************/
.challenges-tab-container .material-select {
    width: 230px;
}
.content-title{
    font-size: 22px;
    font-family: Proxima-Nova-Semibold;
}
.challengeInfoBox{
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #DFE0E2;
}
.challengeInfoHeart{
    position: absolute;
    top: 12px;
    right: 12px;
}
.challengeInfoHeart i{
    color: #AFB4BD;
}
.challengeInfoHeart.active i{
    color: #00C4CC;
}
.challengeInfoSubTitle{
    font-size: 10px;
    font-family: Lato;
    color: #AFB4BD;
}
.challengeInfoTitle{
    font-size: 14px;
}
.challengeInfoBox .accordion-content-friends-images{
    margin-top: 30px;
}
.chalange-item .progress-content{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 8px 12px 0;
}
.challengeInfoBox .accordion-content-friends-images .turquoise-border-btn{
    min-width: 116px;
}
.challengeInfoBox .accordion-content-friends-images .yellow-btn{
    min-width: 116px;
    padding: 4.5px 10px;
    box-shadow: none;
}
@media only screen and (min-width: 1200px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
}
/***************************************************************************/
.challenges-tab-container .custom-nav-tabs{
    margin-bottom: 24px;
}
.challenges-tab-container .chalange-subtitle span{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #afb4bd;
    margin-right: 6px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}
.discussion-item .chalange-info-img-box img{
    border-radius: 50%;
}
.discussion-item .discussion-desc{
    font-size: 14px;
    line-height: 1.29;
    color: #afb4bd;
}
.discussion-item .chalange-info{
    border-bottom: 1px solid #dfe0e2;
}
.discussion-chat-box{
    padding: 16px 12px;
}
.discussion-chat-box .chat-msg-item{
    max-width: none;
}
.discussion-chat-box .chat-item-from:last-child{
    margin-bottom: 0;
}
/********************************  Positivity Points Leaders  ******************************/
.leadersBox{
    border-radius: 4px;
    background-color: #ffffff;
}
.leadersBox .scrollbar{
    padding: 10px;
}
.leadersTitle{
    font-size: 14px;
    font-family: Proxima-Nova-Semibold;
    line-height: 1.21;
    color: #fff;
    background-color: #00c4cc;
    padding: 10px 13px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
}
.leadersItem{
    padding: 10px;
    border: 1px solid #DFE0E2;
    border-radius: 4px;
    margin-bottom: 5px;
}
.leadersAvatar, .leadersInfoBox, .leadersCount{
    display: table-cell;
    vertical-align: middle;
}
.leadersAvatar img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.leadersName{
    font-size: 14px;
    line-height: 19px;
    color: #000000;
}
.leadersPoints{
    line-height: 19px;
    color: #AFB4BD;
}
.leadersCount{
    font-size: 14px;
    line-height: 19px;
    color: #28C940;
}
.leadersCount i{
    color: #28C940;
}
.leadersPlay{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: #00c4cc;
    text-align: center;
    line-height: 30px;
}
.leadersPlay i{
    color: #FFFFFF;
}
/***************************  Activity Log  ***********************/
.activityLogItem{display: table;margin-bottom: 15px;}
.green-circle, .yellow-circle{
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-top: 4px;
}
.green-circle{background-color: #28C940;}
.yellow-circle{background-color: #FFE32C;}
.activityLogInfo{
    display: inline-block;
    width: calc(100% - 15px);
    font-size: 14px;
    padding-left: 6px;
}
.activityLogInfo a{
    font-family: Proxima-Nova-Bold;
    text-decoration: none;
    color: #00c4cc;
}
/**********************  Challenge Invitation  **********************/
.invitationItem{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.invitaionInfoBox{
    font-size: 14px;
    color: #000000;
    line-height: 19px;
}
.invitaionInfoBox span{
    font-family: Proxima-Nova-Bold;
}
.along-with{
    font-family: Proxima-Nova-Regular!important;
    margin-right: 6px;
}
.invitationBox .scrollbar{height: 350px;}
.mobile-tabs-add-new-box .material-select-text:focus ~ .material-select-label,
.mobile-tabs-add-new-box .material-select-text:valid ~ .material-select-label{
    background-color: #eff0f2;
}

/*********************************  End New Challenges Page (All)  ********************************/

/*********************************  Start Challenges Filter Page  ********************************/
.challenge-filter-content .new-tabs .newNavTabs{height: auto;}
.challenge-filter-content .new-tabs .newNavLink{
    width: calc( (100% - 30px) / 3);
    height: auto;
    padding: 10.5px 3px;
}
.challenge-filter-content .new-tabs .newNavLink:nth-child(2) {margin: 0 15px;}
.challenge-filter-content .new-tabs .newTabContent{
    padding: 0;
    margin: 24px 0;
    background-color: transparent;
}
@media only screen and (min-width: 992px) and (max-width: 1000px) {
    .challenge-filter-content .new-tabs .newNavLink{
        font-size: 13px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .challenge-filter-content .new-tabs .newNavLink{
        width: 280px;
        margin-right: auto !important;
        margin-left: auto !important;
        margin-bottom: 8px !important;
    }
    .challenge-filter-content .custom-nav-tabs .nav-item a.nav-link{
        padding: 19px 10px;
    }
    header .nav-item a.nav-link .header-span {
        display: none;
    }
}
@media only screen and (max-width: 767px){
    .challenge-filter-content .new-tabs .newNavTabs{
        margin-top: 24px;
    }
    .challenge-filter-content .new-tabs .newNavLink{
        width: 280px;
        margin-right: auto !important;
        margin-left: auto !important;
        margin-bottom: 8px !important;
    }
}

/*********************************  End Challenges Filter Page  ********************************/

/*****************************  Srart My Groups  ************************/
#myGroups{
    margin-top: 24px;
}
#myGroups .add-quick-flip-form .grey-btn{

}
/***********************  end My Groups  *********************/

/***********************  Srart Mobile Notification Page  ************************/
.mob-notific-content{
    padding-top: 30px;
}
.mob-notific-content .scrollbar{
    height: 340px;
}
/***********************  end Mobile Notification Page  *********************/

/*Search Header Mobile*/
#search{
    display: none;
    position: absolute;
    width: calc(100% - 30px);
    margin: auto;
    right: 0;
    left: 0;
    z-index: 9;
    top: 7px;
    bottom: 7px;
}
#search input{
    width: 100%;
    height: 100%;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
}
/**********************/

/***********************  Start Footer Main Page  *********************/
.main-page-footer{
    border-top: 1px solid #D7E0E9;
    padding: 12.5px 0px;
}
.main-page-footer-left{
    font-size: 14px;
    font-family: Proxima-Nova-Bold;
    color: #AFB4BD;
    line-height: 17px;
}
.main-page-footer-right a{
    font-size: 14px;
    font-family: Proxima-Nova-Regular;
    line-height: 15px;
    color: #AFB4BD;
}
/***********************  End Footer Main Page  *********************/

/***********************  Start Main Footer  *********************/
.main-footer{
    background-color: #E3E5E9;
    border: none;
    padding: 19px 0;
}
/***********************  End Main Footer  *********************/

.release-flips-btn{
    width: 200px;
    padding: 10.5px 25px!important;
    box-shadow: none!important;
}

/***************************************************************************/
/****************************  START MEDIA QUERY  **************************/
/***************************************************************************/
@media only screen and (min-width: 1600px) {
    .happiness-lines-img-box:after {
        right: 0;
        bottom: 0;
    }
}
@media only screen and (min-width: 1200px) {
    .login-img-box-col{min-height: 100vh;}
    .favorites .multiple-filter-box .search-flips{width: 311px;}
    .mobile-tabs-add-new-box{display: none;}
}
@media only screen and (max-width: 1199px) {
    .main-page-tabs-content{padding: 0 25px;}
    .mob-app-logos img{height: 50px;}
    .get-app{width: 330px;}
    .desktop-tabs-add-new-box{display: none;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-search{width: 200px;}
    .profile-page .custom-nav-tabs .nav-item a.nav-link{padding: 19px 10px;}
    .your-card-upload-row {height: 500px;}
    .mobile-app-container{height: 570px;}
    .accordion-content-info .yellow-btn {
        padding: 4.5px 3px;
    }
    .view-challenge-item-box a.turquoise-border-btn{
        font-size: 14px;
    }
}
@media only screen and (min-width: 1121px) and (max-width: 1175px) {  .sb-mood-box span{font-size: 13px;}  }
@media only screen and (min-width: 992px) and (max-width: 1120px) {  .sb-mood-box span{font-size: 10px;}  }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .registration-content,.login-social{width: 100%;}
    .login-btn-text{width: calc(100% - 40px);}
    .happiness-development-main-box{
        padding-top: 120px;
        padding-bottom: 120px;
    }
}
@media only screen and (min-width: 576px){
    .tabs-new-msg-mobile{display: none}
}
@media only screen and (min-width: 576px) and (max-width: 1199px) {
    .multiple-filter-box .form-group:nth-child(1),.multiple-filter-box .form-group:nth-child(2),.multiple-filter-box .form-group:nth-child(3){
        width: 33.333333%;
        display: block;
        float: left;
        margin-right: 0;
        margin-bottom: 16px;
    }
    .multiple-filter-box select{
        width: 100%;
    }
    .multiple-filter-box .form-group:nth-child(1),.multiple-filter-box .form-group:nth-child(2){
        padding-right: 12px;
    }
    .multiple-filter-search-box{
        width: 33.333333%;
        padding-right: 12px;
        margin-right: 0!important;
    }
    .multiple-filter-box .search-flips{
        width: 100%;
    }
    .profile-page .multiple-filter-search-box, .searchResultContent .multiple-filter-search-box{
        width: 100%!important;
        float: none!important;
        padding-right: 0!important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .container.custom-container{max-width: 100%;}
    .header-search{width: 270px;}
    .chalanges-filter-box a{margin-right: 10px;}
    .nav-tabs-with-btn .nav-item{width: calc(100% / 4);text-align: center;}
    .profile-page .nav-tabs-with-btn .nav-item{width: calc(100% / 6);}
    .profile-page .custom-nav-tabs .nav-item a.nav-link{padding: 19px 3px;}
    .nav-tabs-with-btn .nav-item a.nav-link{padding: 19px 10px;}
    .quick-item-youtube-box iframe{height: 250px;}
    .challenge-active-tabs-container .custom-nav-tabs .nav-item a.nav-link{padding: 12px 10px;}
    .your-card-upload-row {height: 400px;}
    .mobile-app-container{height: 420px;}
    .mob-app-logos img{height: 45px;}
    .get-app {width: 100%;}
    .main-page-tabs-content{padding: 0 10px;}
    .benefits-content-box .benefit-box:nth-child(1){
        border-right: none;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #eef2f3;
    }
    .benefits-content-box .benefit-box:nth-child(2){padding-left: 0;}
    .main-challenges-box-tab{padding-right: 15px;}
    .main-challenges-box-tab .light-blue-btn{padding: 6.5px 3px;}
    .new-tabs .newNavLink img{height: 28px;}
    .new-tabs .newNavLink{height: 60px;}
    .sb-mood-box span {
        font-size: 11px;
    }
    .nav-item-not .dropdown-menu{
        right: 10px;
    }

}
@media only screen and (min-width: 992px){
    .mt-50{margin-top: 49px;}
    .challengesRightSideBar .leadersBox .leadersTitle{
        padding: 20px 13px;
    }
}
@media only screen and (max-width: 991px){
    .quick-flip-upload-desc{width: 100%}
    .today-activaty-msg-box{margin-top: 24px;}
    .preferences, .messaging-select{width: 100%;}
    .discussions-tab-container .custom-nav-tabs{margin-bottom: 0;}
    .happiness-development-title{width: 100%}
    .main-page-title h2{
        font-size: 28px;
        line-height: 1.2;
    }
    .happiness-development-item-title{
        font-size: 20px;
        line-height: 18px;
        margin-bottom: 15px;
    }
    .happiness-development-item-desc{
        font-size: 14px;
        line-height: 20px;
    }
    .view-challenge-item-box a.turquoise-border-btn{
        width: 260px;
        margin-bottom: 8px;
    }
    .verifyCodeBox{
        width: 100%;
    }
}
@media only screen and (min-width: 768px){
    .header-mobile,.mobile-chalanges-filter-box{display: none;}
}
@media only screen and (max-width: 767px) {
    .page-title-h1{
        font-size: 32px;
    }
    header.main-page-header{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 25;
    }
    header.main-page-header .header-mobile{
        position: static;
    }
    .header-desktop{display: none;}
    .registration-img-box-col{display: none;}
    .registration-content{margin-right: auto;margin-left: auto;}
    #sitebar{display: none}
    header{margin-bottom: 50px;}
    .container.custom-container{max-width: 100%;}
    .sb-followers > div, .sb-following > div{vertical-align: middle;}
    .chalanges-filter-box{display: none;}
    .custom-nav-tabs .nav-item{width: 50%;text-align: center;}
    .select-filter select{width: 100%;background-color: transparent;}
    .chalange-info{min-height: auto;}
    .my-chalanges-container .chalange-item-info{padding-left: 12px;}
    .mood-title{margin-top: 30px;}
    .add-quick-flip-form {margin-top: 24px;}
    .quick-item-youtube-box, .challenge-item-img-box{margin-top: 30px;}
    /*.custom-nav-tabs{margin-right: -15px; margin-left: -15px}*/
    .active-challenge-settings-box select.form-control{width: 100%;}
    .challenge-settings-btn-box a.turquoise-btn{width: 37%;}
    .challenge-settings-btn-box a.turquoise-border-btn{width: 60%; float: right;padding: 6.5px 10px;}
    .radio-border-top{padding-top: 10px;border-top: 1px solid #dfe1e4;}
    #shareQuickFlip .chalange-img-box {height: auto;}
    #shareQuickFlip .all-quick-desc {padding-right: 0;}
    .your-card-upload-row {height: 350px;}
    /* Start Main Page Styles*/
    .happiness-development-absDiv{position: relative;top: 0;left: 0;transform: translateX(0%);}
    .happiness-development-content .main-page-title{margin-left: 0;margin-top: 40px;}
    .happiness-lines-img-box:after{right: 0;}
    .happiness-development-main-box > .col-md-6{padding: 0;}
    .happiness-development-item-icon-box{left: 12px;}
    .happiness-development-item{padding-left: 95px;}
    .happiness-development-content .yellow-btn{margin-left: 0;}
    .happiness-development-title{margin: 0 auto 30px auto;}
    .happiness-container {margin: 45px 0;}
    .new-tabs .newNavLink:nth-child(2){margin-right: 0;margin-left: 0;}
    .new-tabs .newNavLink{width: 100%;margin-bottom: 10px!important;}
    .new-tabs .newNavTabs{height: auto;}
    .main-page-tabs-content:before, .main-page-tabs-content:after{display: none;}
    .main-page-tabs-container{padding-top: 45px;padding-bottom: 45px;}
    .main-page-social-container {margin-top: 45px;margin-bottom: 45px;}
    .hash-socials-box{margin-bottom: 30px;}
    .mob-app-img-box{padding-top: 45px;}
    .main-challenges-box-tab{border-right: none;}
    .main-challenges-box-tab{padding-right: 0;}
    .mobile-app-container{height: auto;overflow: auto;}
    .mob-app-img-box{height: 570px;overflow: hidden;margin-bottom: 30px;}
    .mob-app-content {margin-left: 0;margin-bottom: 45px;}
    .scroll-down-title{font-size: 58px;}
    .scroll-down-row{height: 450px;}
    .sb-profile-box{
        margin-right: -12px;
        margin-left: -12px;
    }
    .accordion-content-info .yellow-btn {
        padding: 4.5px 0px;
    }
    .sb-mood-box span{
        font-size: 13px;
    }
    /* End Main Page Styles*/
    .chatModalInfoBox .accordion-content-friends-images{
        text-align: left;
        margin-top: 8px;
        cursor: pointer;
    }
    .chatModalInfoBox .accordion-content-friends-images .turquoise-border-btn{
        float: right;
    }
    .up-profile-btn-box {
        margin-right: -15px;
        margin-left: -15px;
    }
    .my-messages-page .uplift-btn{
        width: 50%;
    }
    .custom-nav-tabs .nav-item:nth-child(1) a.nav-link{
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .custom-nav-tabs .nav-item:nth-child(2) a.nav-link{
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }



    .custom-nav-tabs{
        background-color: transparent;
        box-shadow: none;
    }
    .custom-nav-tabs .nav-item a.nav-link{
        color: #00c4cc!important;
        background-color: transparent;
        border-radius: 0;
        border: 1px solid #00c4cc;
    }
    .custom-nav-tabs .nav-item a.nav-link.active{
        color: #ffffff!important;
        background-color: #00c4cc!important;
    }


}
@media only screen and (max-width: 767px) and (min-width: 576px) {
    .nav-tabs-with-btn .nav-item{
        width: calc(100% / 4);
        text-align: center;
    }
    .nav-tabs-with-btn .nav-item a.nav-link{
        padding: 19px 10px;
    }
    .quick-item-youtube-box iframe{height: 250px;}
}
@media only screen and (max-width: 575px) {
    .page-title-h1{
        font-size: 28px;
    }
    .multiple-filter-box .form-group{width: 100%;margin-right: 0;margin-bottom: 8px;}
    .multiple-filter-box select, .multiple-filter-box .search-flips{width: 100%;}
    .quick-item-youtube-box iframe{height: 220px;}
    .quick-item-control{padding: 8px 0;}
    .all-flip-icon i{font-size: 22px;}
    .challenge-item-img-box{height: 200px;}
    #profile-followers .followers-name, #profile-following .followers-name, #profile-logs .followers-name{font-size: 18px;}
    #profile-followers .followers-since, #profile-following .followers-since, #profile-logs .followers-since{font-size: 12px;}
    #profile-following .grey-btn, #profile-logs .grey-btn{width: 100%;padding: 10px 3px;}
    .create-card-col-first{border-right: none;}
    .tabs-new-msg{display: none}
    .your-card-header span{font-size: 18px}
    .your-card-footer .turquoise-border-btn, .your-card-footer .turquoise-btn{min-width: 90px;padding-right: 10px;padding-left: 10px;}
    .your-card-footer .turquoise-border-btn{float: left;}
    /* Start Main Page Styles*/
    .scroll-down-subtitle{width: 100%;}
    .scroll-down-title {font-size: 48px;line-height: 54px;}
    .scroll-down-subtitle{font-size: 20px;}
    .main-page-title h2{font-size: 24px;}
    .happiness-development-item-title{font-size: 18px;line-height: 16px;margin-bottom: 10px;}
    .mob-app-img-box{height: 460px;}
    .main-page-footer-left, .main-page-footer-right{text-align: center;}
    /* End Main Page Styles*/
    .challenge-item-mean > .row .col-12:nth-child(2){
        text-align: left!important;
    }
    .view-challenge-item-box a.turquoise-border-btn{
        width: 100%;
    }
    .challenge-view-mean img {
        height: 22px;
    }
    .view-mean-info-link i{
        font-size: 22px;
    }
    .challenge-view-mean .mean-title, .challenge-view-mean .mean-subtitle {
        font-size: 18px;
    }
    .chat-box.scrollbar{
        height: 300px;
        padding-bottom: 60px;
    }
    .position-xs-static{
        position: static!important;
    }
    #Flip .flip-title{
        font-size: 18px;
    }
    .my-messages-page .uplift-btn{
        width: 100%;
    }
    .my-messages-page .tabs-new-msg-mobile .yellow-btn{
        width: 50%;
    }
    .challenge-filter-content .material-select{
        width: 100%;
    }
    .challenges-tab-container .material-select{
        width: 100%;
    }
    .custom-nav-tabs .nav-item a.nav-link {
        padding-top: 9px!important;
        padding-bottom: 9px!important;
    }
    .notFoundPage .content-title{
        width: 100%;
    }
    .search-group-box .multiple-filter-box .form-group,
    .search-group-box .multiple-filter-box .form-group .form-control,
    .search-group-box .multiple-filter-box .form-group .search-flips{
        width: 100%!important;
    }
}
@media only screen and (max-width: 450px) {
    header.main-page-header .main-mobile-menu .nav-item .nav-link {
        padding: 8px 5px;
    }
    header.main-page-header .main-mobile-menu .nav-item.main-page-header-login{
        margin-right: 5px!important;
    }
}
@media only screen and (max-width: 420px) {
    .registration-content,.login-social {width: 100%;}
    .login-btn-text{width: calc(100% - 40px);}
    .quick-item-youtube-box iframe{height: 160px;}
    .discussions-tab-container .custom-nav-tabs .nav-item a.nav-link{padding: 19px 10px;}
    #newDiscussion .quick-flip-upload-btn-box img{width: auto;}
    /* Start Main Page Styles*/
    .mob-app-img-box {height: 400px;}
    .main-page-tabs-content{padding: 0;}
    .benefits-content-box .benefit-box:nth-child(1){padding-right: 7px;}
    .benefits-content-box .benefit-box:nth-child(2){padding-left: 7px;}
    .get-app {width: 100%;}
    .mob-app-logos img {height: 43px;}
    .hash-socials-box a{margin-right: 5px;}
    .invitationTitle, a.viewInvitation{font-size: 14px;}
    /* End Main Page Styles*/
}
@media only screen and (max-width: 390px) {
    .main-mobile-menu .main-page-header-login, .main-mobile-menu .main-page-header-reg{width: 100%;margin-bottom: 8px;}
    .main-mobile-menu .main-page-header-login a, .main-mobile-menu .main-page-header-reg a{width: 100%;}
    .notFoundTitle h2 {font-size: 38px;}
    .notFoundPage .content-title{font-size: 18px;}
    .notFounfLogo {width: 200px;}
}

@media only screen and (max-width: 360px) {
    .challenge-active-tabs-container .custom-nav-tabs .nav-item a.nav-link{font-size: 13px;}
    #collapseInvitation .grey-btn{width: 100px;}
    #collapseInvitation .turquoise-border-btn {padding: 6.5px 10px;}
    #collapseInvitation a.turquoise-btn{padding: 7.5px 15px;}
}
@media only screen and (max-width: 335px) {
    .closed-header .col{padding: 0 10px;}
    .main-page-footer-right a {
        display: block;
        margin-top: 5px;
        width: 100%;
    }
}


/***************************************************************************/
/****************************  END MEDIA QUERY  ****************************/
/***************************************************************************/