@charset "utf-8";
/* CSS Document */
.btn-bnf-green {background-color: #7FCC33; color: white;}
.btn-bnf-blue  {background-color: #21596D; color: white;}
.btn-bnf-grey  {background-color: #dddddd; color: black;}
.btn-bnf-orange{background-color: #F78009; color: white; border: 10px solid white; border-radius: 10px;}

.bg-bnf-green  {background-color: #669933;}
.bg-bnf-blue   {background-color: #21596D;}
.bg-bnf-grey   {background-color: #dddddd;}
.bg-bnf-orange {background-color: #F78009;}

.text-bnf-green {color: #669933;}
.text-bnf-blue  {color: #21596D;}
.text-bnf-grey  {color: #dddddd;}
.text-bnf-orange{color: #F78009;}
.red-box {background-color: red;}

.orange-box {background-color: orange;}
.yellow-box {background-color: yellow;	}
.green-box {background-color: green;}
.blue-box {background-color: blue;}
.indigo-box {background-color: indigo;}
.purple-box {background-color: purple;}
.aqua-box {background-color: aqua;}
.teal-box {background-color: teal;}
.cadetblue-box {background-color: cadetblue;}
.lime-box{background-color: lime;}

#header {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7fcc33+0,ffffff+55 */
background: #7fcc33; /* Old browsers */
background: -moz-linear-gradient(left, #7fcc33 0%, #ffffff 55%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #7fcc33 0%,#ffffff 55%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #7fcc33 0%,#ffffff 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fcc33', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.green-grad {
background: #7fcc33; /* Old browsers */
background: -moz-linear-gradient(left, #7fcc33 0%, #ffffff 55%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #7fcc33 0%,#ffffff 55%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #7fcc33 0%,#ffffff 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fcc33', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.navbar-brand img{
max-height: 50px;
}

body {
font-size: .8rem;
}
table.table th {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 6px;
	font-weight: normal;
}

table.table td {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 6px;
	font-weight: normal;
}
table.table tfooter tr td {
	font-size: 6px;
	font-weight: bold;
}.main-1 {
	margin-top: 125px;
}
.browser-default {
	border: 1px solid #669933;
	border-radius: .25rem;
	padding: .25rem;	
}
select.browser-default{
	border: 1px solid #669933;
	border-radius: .25rem;
	padding: .25rem;	
	width: 95%;
}
.mybrowser-default{
	width: 95%;
	font-size: .9rem;
	border: 1px solid blue;
	border-radius: .25rem;
	padding: .25rem;	
}
.modal .modal-fluid, .modal .modal-frame {
max-width: 80vw;
}
#chart-labels {
	text-align: center;
}
#chart-labels li {
border-bottom: none;
padding-left: .5rem;
padding-right: .5rem;
display: inline-block;
text-align: center;
font-size: .6rem;
}
.chartimg {
	background-image: url(/images/MML-Circle.png);
	background-position: center;
	background-size: 25%;
	background-repeat: no-repeat;
}
#user_expense_category_li li:hover {
background-color: aqua;

}
#user_expense_category_li li.selected {
	background-color: #05F802;
}
#sticky_button{
	transform: rotate(-90deg);
	transform-origin: left top 0;
	display:block;
	position: fixed;
	top: 50vh;
	left: -10px;
	padding: 3px;
	font-size: .8rem;
	background-color: #72B034;
	color: #21596D;
	border-radius: 4px;
}
span.font-small {
font-size: .6rem;
}
.cta-card {
border: 10px solid #7FCC33;
border-radius: 5px;
background-color: white;
text-align: center;
}
.display-4 {
    font-size: 1.25rem;
}


#spendingtracker header {
	height: 25vh;
}
section#points {
	height: auto;
	width: 100%;
	background-image: url(../images/backgrounds/mml-tree-kakhi.jpg);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 25px;
}
section#wedont{
	height: auto;
	width: 100%;
	color: darkslategrey;
	padding-top: 25px;
	padding-bottom: 25px;
}
section#closing {
	height: auto;
	width: 100%;
	background-color: #F78009;
	color: white;
	padding-top: 25px;
	padding-bottom: 25px;

}
.testimonial {
font-size: 1.1rem;
}
/********************************* Small devices (landscape phones, 576px and up)*************************/
@media (min-width: 576px) {
.display-4 {
    font-size: 3.5rem;
}

}

/*********************************  Medium devices (tablets, 768px and up)************************/
@media (min-width: 768px) {
#chart-labels li {
border-bottom: 1px solid black;
padding-left: .5rem;
padding-right: .5rem;
margin-bottom: 10px;
display: block;
text-align: left;
font-size: .8rem;
}

.navbar-brand img {
max-height: 75px;
}
span.font-small {
font-size: 1rem;
}
table.table th {
	padding-top: .50rem;
	padding-bottom: .50rem;
	font-size: 10px;
	font-weight: Bold;
}
table.table td {
	padding-top: .50rem;
	padding-bottom: .50rem;
	font-size: 10px;
	font-weight: normal;
}
table.table tfooter tr td {
	font-size: 10px;
	font-weight: bold;
}
.display-4 {
    font-size: 3.5rem;
}
}
/********************************* Large devices (desktops, 992px and up)************************/
@media (min-width: 992px) {
	.navbar-brand  img {
	max-height: 100px;
	}
	.display-4 {
		font-size: 3.5rem;
	}
}

/********************************* Extra large devices (large desktops, 1200px and up***********************/
@media (min-width: 1200px) {
	table.table th {
		padding-top: .75rem;
		padding-bottom: .75rem;
		font-size: 12px;
		font-weight: Bold;
	}
	table.table td {
		padding-top: .75rem;
		padding-bottom: .75rem;
		font-size: 12px;
		font-weight: normal;
	}
	table.table tfooter tr td {
		font-size: 12px;
		font-weight: bold;
	}
	.display-4 {
		font-size: 3.5rem;
	}

}