@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto';
/* ------------------ BASE COLOR THEME
    Test Color: #B22222
    Test Color 2: #00CED1
*/
body {
    font-family: 'Montserrat', Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.5;
    color: #0a0a0a;
    background-color: #B22222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', Helvetica, Roboto, Arial, sans-serif;
  color: #B22222;
}

h5.title-green{
	color: #7b9d3e;
	font-weight: normal;
	font-size: 22px;
	text-align: center;
}

.subhead{
	font-size: 19px;
}
.relative{
	position: relative;
}

.user-photo {
    border-radius: 50%;
	max-height: 50px;
	max-width: 50px;
}
.clean_wrapper{
	width: 1000px;
	margin: 0 auto;
}
.top_nav{
	background: #00CED1;
	width: 100%;
	text-align: right;
}

.top_nav ul{
	width: auto;
	margin: 0;
	padding: 0;
}

.top_nav ul li{
	display: inline-block;
	margin-left: 10px;
}

.top_nav ul li a{
	position: relative;
	font-family: 'Montserrat', Helvetica, Roboto, Arial, sans-serif;
	line-height: 50px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}
.top_nav ul li a:hover{
	color: rgba(255, 255, 255, 1);
}

.top_nav ul li a:before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    float: left;
    margin: 7px 5px 5px 0;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
.top_nav ul li:hover a:before {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.top_nav ul li a.nm_comunity:before {
    background: url("/Content/Images/nm_comunity.png") no-repeat;
    background-size: auto 25px;
    background-position: right center;
}
.top_nav ul li a.nm_billing:before {
    background: url("/Content/Images/nm_billing.png") no-repeat;
    background-size: auto 25px;
    background-position: right center;
}
.top_nav ul li a.nm_bca:before {
    background: url("/Content/Images/nm_bca.png") no-repeat;
    background-size: auto 20px;
    background-position: right center;
}
.top_nav ul li a.nm_dig_journal:before {
    background: url("/Content/Images/nm_dig_journal.png") no-repeat;
    background-position: right center;
}
.top_nav ul li a.nm_dig_manual:before {
    background: url("/Content/Images/nm_dig_manual.png") no-repeat;
    background-size: auto 35px;
    background-position: right center;
}
.top_nav ul li a.nm_franchise:before {
    background: url("/Content/Images/nm_franchise.png") no-repeat;
    background-size: auto 35px;
    background-position: right center;
}


header{
	background: #B22222;
	position: relative;
	margin-bottom: 20px;
}

.logo{
	float: left;
	margin: 20px 55px 0px 55px;
    width: 225px;
}

.name, .name a{
	color: white;
	display: inline-block;
	float: right;
	line-height: 50px;
	margin-left: 10px;
}

.name, .name a:hover{
	color: white;
}

.header-rght{
	text-align: right;
	padding-top: 25px;
}

.hamburger{
  background:none;
  position:absolute;
  top:0;
  left:0;
  line-height:80px;
  color:#fff;
  border:0;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:999;
}
.cross, .cross-right{
  background:none;
  position:absolute;
  top:0px;
  left:0;
  color:#fff;
  border:0;
  font-size:90px;
  line-height:100px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}

.menu{
	z-index:10000000; 
	font-size: 14px; 
	width:300px; background:rgba(255, 255, 255, 0.85);  
	position:absolute; top: 100px; left: 0;
	padding: 20px 30px;   
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.menu-right{
	top: 100px; right: 0;
}
.menu h3{
	    font-size: 17px;
	    color: #B22222;
	    line-height: 25px;
	    margin-top: 15px;
	    font-weight: bold; 
	}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:0;}
.menu li:hover{display: block;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#030303;}
.menu ul li a:hover {  color: #7b9d3e; text-decoration:none;}
.menu a{text-decoration:none; color:#030303;}
.menu a:hover {text-decoration: none; color: #00CED1;}

.user_menu{
	position: absolute;
	height: auto;
	top: 75px;
	right: 0;
	min-width: 200px;
	background: rgba(255, 255, 255, 0.5);
	z-index: 100000;
	display: none;
	padding: 15px;
}

.user:hover .user_menu{
	display: block;
}

.user_menu ul{
	margin: 0; padding: 0; list-style-type: none; list-style-image: none; text-align: left;
	
}

.user_menu ul a, .user_menu ul a:visited{text-size: 15px; color: #030303;}
.user_menu ul a:hover{color: #B22222;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}



footer{
	background: #B22222;
	position: relative;
	font-size: 10pt;
	line-height: 25px;
	color: #fff;
	height: 50px;
}

.dash_footer {
    text-align: center;
    padding: 50px;
}

 main{min-height: 500px; padding: 50px 0;}
.mbg1{background: url(/Content/Images/main_bg1.jpg) no-repeat center top; background-size: cover}
.mbg2{background: url(/Content/Images/main_bg2.jpg) no-repeat center top; background-size: cover}
.mbg3{background: url(/Content/Images/main_bg3.jpg) no-repeat center bottom; background-size: 1050px; min-height: 300px;}
.mbg4{background: url(/Content/Images/main_bg4.jpg) no-repeat center top; background-size: cover}
.mbg5{background: url(/Content/Images/main_bg5.jpg) no-repeat center top; background-size: cover}

.dashHistory {
    min-height: 600px;
    padding: 50px 0;
}

.loadingOverlay{
    position: fixed;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
} 

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    width: 5em;
    height: 5em;
    border: 0em solid;
    border-radius: 2.5em;
    background: #4b7d41;
    background: -moz-linear-gradient(left, #4b7d41 0%, #4b7d41 50%, #90278c 51%, #90278c 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #4b7d41), color-stop(50%, #4b7d41), color-stop(51%, #90278c), color-stop(100%, #90278c));
    background: -webkit-linear-gradient(left, #4b7d41 0%, #4b7d41 50%, #90278c 51%, #90278c 100%);
    background: -o-linear-gradient(left, #4b7d41 0%, #4b7d41 50%, #90278c 51%, #90278c 100%);
    background: -ms-linear-gradient(left, #4b7d41 0%, #4b7d41 50%, #90278c 51%, #90278c 100%);
    background: linear-gradient(to right, #4b7d41 0%, #4b7d41 50%, #90278c 51%, #90278c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b7d41', endColorstr='#90278c', GradientType=1 );
    animation: spin 1s ease infinite;
}

main.journ-page{

}

label {
  font-size:12px;
  font-weight: normal;
  line-height: 17px;
  color: #4e4e4e;
}

select {
  font-size: 13px;;
  color: #4e4e4e;
}

.dash_icons{
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	color: #030303;
}

.dash_icons a{
	color: #030303;
	font-size: 10px;
	line-height: 30px;
}

.dash_icons a:hover{
	color: #B22222;
}

.dash_icons a:hover img{
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

.dash_widget{
	background-color: rgba(255, 255, 255, 0.6);
	padding: 15px;
	text-align: center;
	font-size: 15px;
    margin-top: 15px;
}

.dash_widget h5{
	font-size: 19px;
	text-transform: uppercase;
	font-weight: bold;
    border-bottom: 1px solid #B22222;
}
.dash_widget p{
	margin: 0;
	color: #030303;
}
p.title{
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	color: #B22222;
	margin: 25px 0 7px 0;
    text-align: center;
}

.dash_widget p.title span{
	font-size: 12px; margin: 0 10px; color: #030303;
}
.dash_widget input.weight_in{
	width: 100px;
	}

.update_weight{
	margin-top: 20px;
	padding: 10px 0;
}
img.updateStatus{
	width: 120px;
	height: auto;
	margin-left: 10px;
}
img.updateWeight{
	width: 120px;
	height: auto;
	margin-left: 10px;
}
img.add{
	width: 35px;
	height: auto;
}
.current_date{background:  #fff; display: inline-block; padding: 10px 25px; color: #010101; font-size: 18px;}

.dash_program{
	text-align: left;
}

.dash_widget img:hover{
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

.dash_widget img.notactive{
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(1000%);
}


[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
  font-size: 13px;
  color: #4e4e4e;}

input#datepicker {
	width: 50%;
	float: left;
}
  
.journ-heading{
	background: url(/Content/Images/journal_bg.png) no-repeat center top;
	background-size: cover;
	color: white;
	min-height: 250px;
	padding: 55px;
}

.journ-slogan{
	text-align: center;
	padding: 50px 0;
}

.journ_date{
	text-align: center;
	font-size: 20px;
	margin: 40px 0;
}
.journ_date span{
	margin: 0 20px;
	padding: 10px 25px;
	background: rgba(255, 255, 255, 0.60);
}

.journ_date img:hover{
	-webkit-filter: invert(.8);
    filter: invert(.8);
}

.journ-day{
	position: relative;
	text-align: right;
	padding-right: 60px;
	font-size: 20px;
}
.journ-day p{
	margin: 5px 0;
}

.tri_big{
	position: absolute;
	right: -40px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 80px 60px 0;
	border-color: transparent #B22222 transparent transparent;
	line-height: 0px;
	_border-color: #000000 #B22222 #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.tri_sml{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 15px 10px 0;
	border-color: transparent #B22222 transparent transparent;
	line-height: 0px;
	_border-color: #000000 #B22222 #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.journ-morning, journ-lunch, journ-dinner{
	border: solid 1px #eee;
	padding: 10px;
	margin: 5px auto;
}

.journ-morning h4, .journ-lunch h4, .journ-dinner h4, h4.journ{
	font-weight: bold;
	color: #B22222;
	text-transform: uppercase;
	line-height: 25px;
	position: relative;
}
h4.journ{
	margin: 20px 0;
}

.arrow-left:before {
    content: '\25ba';
    margin-right: 10px;
    font-size: 75%;
  }

	
.journ-button{
	font-weight: bold;
	color: #B22222;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 25px;
	text-align: right;
}	
.journ-button:hover{
	color: #7b9d3e;
}	

table .button{
    margin: 5px;
}

.journ-morning{
	background: url(/Content/Images/journal_bg1.jpg) no-repeat left center;
}
.journ-lunch{
	background: url(/Content/Images/journal_bg2.jpg) no-repeat right center;
}
.journ-dinner{
	background: url(/Content/Images/journal_bg3.jpg) no-repeat left center;
}

.journ-tween{
	background: #e4e2e2;
	margin: 5px 0;
	line-height: 40px;
}
.journ-total{
	text-align:  right;
	padding: 25px 0;
}
.inline{
	float: left;
}
.jounr_pad{
	padding: 10px 20px;
}
.journ-stats{
	background: #9bc94a; /* Old browsers */
	background: -moz-linear-gradient(top, #9bc94a 0%, #9bc94a 50%, #8abc44 51%, #8abc44 25%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9bc94a 0%,#9bc94a 50%,#8abc44 51%,#8abc44 25%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9bc94a 0%,#9bc94a 50%,#8abc44 51%,#8abc44 25%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc94a', endColorstr='#8abc44',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
	color: white;
	line-height: 50px;
	height: auto;
	text-align: center;
}

.journ-footer{
	position: relative;
	background: url(/Content/Images/journal_footer_bg.png) no-repeat left top;
	height: auto;
	padding-bottom: 75px;
}
.padbot{
	padding-bottom: 75px;
}


.login-page-wrapper {
 	background: url(/Content/Images/journal_bg.png) no-repeat center top;
	background-size: cover;
    min-height: 500px;
}

.coach-login-page-wrapper {
 	background: url(/Content/Images/journal_5.jpg) no-repeat center top;
	background-size: cover;
    min-height: 500px;
}


.login-page-switch{
	position: absolute;
	top: 10px;
	right: 100px;
	text-align: right;
	font-size: 14px;
	color: #fff;
}

.login-page-switch a{
	color: rgba(255, 255, 255, 0.75);
}
.login-page-switch a:hover{
	color: rgba(255, 255, 255, 1);
}
.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
  text-align: center;
}

.login-page img{
	text-align: center;
	margin: 50px auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #fff;
  background: rgba(255, 255, 255, 0.75);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #7b9d3e;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #B22222;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #7b9d3e;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}


.button {
	background-color: #B22222 !important;
}
.button:hover {
	background-color: #00CED1 !important;
}


// Small screens
@media only screen {
} /* Define mobile styles */

@media only screen and (max-width: 40em) { 
	
	.hamburger,.cross, .cross-right{left: 10px;}
	
	.top_nav ul li{
	margin-left: 5px;
}

.top_nav ul li a{
	line-height: 20px;
	font-size: 10px;
}
.top_nav ul li a:before {
    width: 25px;
    height: 25px;
    margin: 2px 5px 2px 0;
}

.top_nav ul li a.nm_comunity:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_billing:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_bca:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_dig_journal:before {
    background-size: auto 17px;
}
.top_nav ul li a.nm_dig_manual:before {
    background-size: auto 17px;
}
.top_nav ul li a.nm_franchise:before {
    background-size: auto 17px;
}
.top_nav{text-align: left;}

	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 1046px) { 
	
	.hamburger,.cross, .cross-right{left: 10px;}
	
	
.top_nav ul li{
	display: block;
	float: left;
}	
	.top_nav ul li{
	margin-left: 5px;
}

.top_nav ul li a{
	line-height: 20px;
	font-size: 10px;
}
.top_nav ul li a:before {
    width: 25px;
    height: 25px;
    margin: 2px 5px 2px 0;
}

.top_nav ul li a.nm_comunity:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_billing:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_bca:before {
    background-size: auto 15px;
}
.top_nav ul li a.nm_dig_journal:before {
    background-size: auto 17px;
}
.top_nav ul li a.nm_dig_manual:before {
    background-size: auto 17px;
}
.top_nav ul li a.nm_franchise:before {
    background-size: auto 17px;
}

	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) {} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */