html {
	/* makes scrollbar always visible */
	overflow: -moz-scrollbars-vertical;
	overflow-y:scroll;
}

body {
	background-color: rgb(210, 233, 244);
	margin-top: 10px;
	margin-bottom: 30px;
	padding-right: 20px;
	padding-left: 20px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 20px;
}

#app {
	width: auto;
	margin-right: auto;
	margin-left: auto;
}

.alert-top {
  position: fixed;
  margin: 0 20px;
  z-index: 1050;
}

.popper {
    max-width: 220px;
    left: -60px !important;
    padding: 8px;
    line-height: 1.42857143;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    line-break: auto;
}

#container-right-graphs .popper select {
	margin-bottom: 5px;
}

.popper .btn {
	padding: 3px 6px;
	font-size: 11px;
}


/**********************************************
	UTILS
**********************************************/

.no-padding {
	padding: 0px;
}

.no-padding-right {
	padding-right: 0px;
}

.no-padding-left {
	padding-left: 0px;
}

input,
select {
	width: 100%;
}

input.has-error {
	border: solid 1px red;
	color: red;
}

span.has-error {
	color: red;
	font-size: 10px;
}

.full-width {
	width: 100%;
}

select {
	padding: 1px;
	height: 26px;
}

.no-margin	{ margin: 0px; }
.top5		{ margin-top: 5px; }
.top15		{ margin-top: 15px; }
.top30		{ margin-top: 30px; }
.right5		{ margin-right: 5px; }
.right20	{ margin-right: 20px; }
.bottom5	{ margin-bottom: 5px; }
.bottom15	{ margin-bottom: 15px; }
.bottom20	{ margin-bottom: 20px; }
.bottom30	{ margin-bottom: 30px; }

.inline		{ display: inline-block; }

/*.parent {
	overflow: hidden;
}

.parent > :first-child {
	float: right;
	width: 10px;
	margin-left: 5px;
}

.parent > :last-child {
	overflow: hidden;
}*/

.font11 {
	font-size: 11px;
}

.hline {
	height: 1px;
	background: #ddd;
	margin-top: 10px;
	margin-bottom: 10px;
}

.underline {
	height: 1px;
	background: #dcc2c2;
}

.fifth {
	width: 20%;
	float: left;
	padding-left: 5%;
}

.float-left { float: left !important; }
.float-right { float: right !important; }

.pointer {
	cursor: pointer;
}

.thick {
	font-weight: bold;
}

.hide {
	display: none;
}

a.black-pointer {
	cursor: pointer;
	color: #333;
}


a.black-pointer:hover {
	text-decoration: none;
}

.indent {
	padding-left: 15px;
}

.img-contain {
	width: 100%;
}

/**********************************************
	HEADER
**********************************************/

.title h1 {
	font-family: 'Roboto', sans-serif;
	color: white;
	text-shadow: 0 1px 0 #ccc,
		0 2px 0 #c9c9c9,
		0 3px 0 #bbb,
		0 4px 0 #b9b9b9,
		0 5px 0 #aaa,
		0 6px 1px rgba(0,0,0,.1),
		0 0 5px rgba(0,0,0,.1),
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.2),
		0 5px 10px rgba(0,0,0,.40),
		0 10px 10px rgba(0,0,0,.40),
		0 20px 20px rgba(0,0,0,.40);
}

.title h4 {
	color: #5b5b5b;
	font-weight: bolder;
}

#agforwardlogo {
	height: 100%;
	background-image:url('../img/agforward_lg-15.png');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.header {
	background-image:url('../img/bg.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-color: white;
	text-align: center;
	border-radius: 10px 10px 0 0;
	position: relative;
	padding: 10px 20px 50px 20px;
}

@media (max-width: 768px) {
	.header {
	background-image:url('../img/bg.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-color: white;
	text-align: center;
	border-radius: 10px 10px 0 0;
	position: relative;
	padding: 10px 20px 140px 20px;
}
}

.main {
	background-color: white;
	background-size: 100%;
	min-height: 100px;
	padding: 20px;
	/*overflow: hidden;*/
}

.btn-primary {
	background-color: #669933;
	border-color: #336633;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #87b52c;
	border-color: #336633;
}

.btn:focus {
	outline: 0;
}

.panel-group .panel+.panel {
	margin-top: 0px;
}

#agforward {
	float: left;
	text-align: left;
}

#agforward h3 {
	margin-top: 0px;
}

#agforward a {
	color: lightgrey;
	text-decoration: none;
}

#agforward a:hover {
	color: #c2c2c2;
}

.title h1 {
	font-size: 2.5em;
}

@media (min-width: 768px) {
	.title h1 {
		font-size: 4em;
	}
}

.title {
	margin-bottom: 30px;
}

.modelVersionContainer {
	height: 21px;
}

#modelVersion {
	float: right;
	text-align: right;
}

#modelVersion p,
#modelVersion select {
	display: inline;
	font-size: 10px;
    padding: 0;
    height: inherit;
    width: inherit;
}

#modelVersion p, {
	color: #999;
	text-align: left;
	padding-right: 50%;
}

.navbar {
	position: absolute;
	bottom: 0;
	margin-left: -20px;
	/* override Bootstrap */
	margin-bottom: 0px;
	border-radius: 0px;
	width: 100%;
	background-color:rgba(255, 255, 255, 0.8);
}

.navbar .navbar-nav {
	display: inline-block;
	float: none;
	vertical-align: top;
}

.navbar .navbar-collapse {
	text-align: center;
}

.menu-item {
	padding-left: 20px;
	padding-right: 20px;
}

router-link {
	color: #777;
	box-shadow: inset 0 -5px 0 0 transparent;
	position: relative;
    display: block;
    padding: 15px
}

.navbar-nav>li>a:hover {
	box-shadow: inset 0 -5px 0 0 lightgrey;
}

.router-link-active {
	box-shadow: inset 0 -5px 0 0 black;
	color: black;
}


/**********************************************
	DASHBOARD
**********************************************/

#tabs .nav-tab {
	padding: 3px 10px;
}

#tabs .nav-tab input {
	width: 95px;
}

.input-not-editable {
	border: 2px solid transparent;
	cursor: pointer;
}

.edit-icon {
	margin-left: 3px;
	width: 26px;
	height: 26px;
	overflow: hidden;
	float: right;
	cursor: pointer;
}

.add-icon {
	margin-top: 7px;
	padding-left: 3px;
	overflow: hidden;
	float: left;
	cursor: pointer;
}

.edit-icon > img {
	width: 26px;
}

.add-icon > img {
	width: 20px;
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

.cell {
	height: 30px;
}

#coefs div,
#debarks div {
	display: inline;
}

.top-cell {
	width: 35px;
	height: 30px;
	float: left;
}

#cork input {
	width: 35px;
}

#coefs input,
#debarks input {
	margin-right: 5px;
}
#menu-scenario-buttons button,
#main-buttons button,
#container-right-buttons button {
	font-size: 13px;
}

#menu-scenario-buttons,
#main-buttons,
#container-right-buttons,
#container-right-buttons {
	text-align: right;
	/*margin-top: 3px;*/
}

#menu-scenario-buttons button,
#menu-comparison-buttons button,
#main-buttons button,
#crop-area-modal button,
#container-right-buttons button {
	display: inline-block;
	float: none;
	padding: 3px 6px;
}

#menu-comparison-buttons,
#menu-scenario-buttons,
#container-right-title {
	height: 30px;
}
}

#container-right-graphs .panel-default {
	margin-top: 0px;
}

.container-right-graphs label {
	font-size: 11px;
}

.nav-tabs {
	border: none;
}

.modal-body label {
	display: inline-block;
	padding-right: 5px;
}

.accordion .panel-default {
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 1px solid #ddd;
}

.accordion.panel-group {
	margin: 0px;
}

.accordion .panel-heading {
	padding: 2px;
	font-weight: bold;
}

.accordion .panel-title,
#docs_index h4,
#docs_container h4 {
	font-weight: bold;
}

#docs_index h4 {
	cursor: pointer;
}

.module-add-graph div.popover.fade {
	cursor: default;
}

.accordion .panel-title > div {
	cursor: pointer;
}

.accordion .glyphicon {
	float: right;
    margin-top: 4px;
    margin-right: 6px;
    color: #ddd;
}

map {
	height: 100%;
}

#maps-container {
	padding: 5px;
	margin-bottom: 5px;
}

.map-container {
	height: 200px;
}

#maps-container .map-container p {
	padding-top: 80px;
	text-align: center;
}

#map-tabs .nav-tab {
	padding: 3px 10px;
	font-size: 11px;
}

#map-tabs .nav-tab:hover {
	cursor: pointer;
}

/*.icon {
	margin-left: 3px;
	width: 26px;
	height: 26px;
	overflow: hidden;
	float: right;
}

.icon > img {
	width: 26px;
}*/

.btn-toggle button {
	padding-top: 3px;
	padding-bottom: 3px;
}

.module-icon {
	width: 25px;
	height: 25px;
	overflow: hidden;
	margin-right: 5px;
    margin-left: 10px;
}

.module-add-graph {
	margin-right: 15px;
	float: right;
}

.module-add-graph-icon {
	width: 25px;
    height: 25px;
}

h3.module-title {
	font-weight: bold;
}

.border {
	border: 1px solid #ddd;
	border-radius: 4px 4px 0 0;
}

#left-container th {
	padding: 4px;
}

#left-container td {
	line-height: 20px;
	padding-top: 11px;
}

#left-container td,
#main-container p,
#main-container input,
#main-container select {
	font-size: 11px;
	margin: 0px;
}

#main-container input.checkbox {
	margin-top: 6px;
	width: auto;
}

#left-container p {
	padding-top: 3px;
}

#left-container .row,
#right-container .row {
	margin-bottom: 5px;
}

#left-container {
	margin-right: -15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#right-container {
	margin-top: 15px;
	margin-bottom: 15px;
	/*height: 400px; /* TODO http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks */
}

#soil-carbon-select {
	width: 100%;
}

.tooltip-label {
	cursor: help;
}

.popper {
	cursor: default !important;
}

.chart {
	width: 100%;
	height: 300px;
}

.chart-edit {
	position: relative;
	top: -300px;
}

.chart-edit-icon {
	width: 26px;
	height: 26px;
	overflow: hidden;
	cursor: pointer;
}

.table {
	margin-bottom: 0px;
}

.btn-toggle-gritcode .btn-default {
	border-color: #adadad;
}

.popover {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 20px;
}

.calculator {
	width: 10px;
	cursor: pointer;
}

/**********************************************
	HOME
**********************************************/

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    text-align: center;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

#card-1 .container-img {
	background-image: url(../img/library.jpg);
}

#card-2 .container-img {
	background-image: url(../img/natural_grazing_cork_oak-lg.jpg);
}

#card-3 .container-img {
	background-image: url(../img/agforward_session.jpg);
}

.container-img {
	height: 250px;
	border-radius: 5px;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.container {
    padding: 2px 16px;
    width: 100%;
}

.container a {
	color: black;
}

.container a:hover {
	color: black;
	text-decoration: none;
}

/**********************************************
	DOCS
**********************************************/
.partners img {
	height: 100px;
}

#docs_index p {
	font-size: 8px;
	margin-bottom: 0px;
}

.docs-bullets {
	margin-bottom: 40px;
}

.bullet-label {
	font-size: 10px;
	margin-right: 10px;
}

.docs-bullets p {
	margin: 0px;
}
.docs-bullets div,
.docs-subtitles div {
	display: inline;
}

.docs-titles h5 {
	color: #F95738;
    text-transform: uppercase;
    font-weight: bolder;
    margin-bottom: 20px;
}

.levelTwo-title {
	font-size: 14px;
	text-transform: uppercase;
}

#docs_container h4 {
	margin-bottom: 30px;
}

#docs_container p {
	text-align: justify;
}

.bibliography {
	text-indent: -2em;
	padding-left: 2em;
}

/**********************************************
	FOOTER
**********************************************/

.footer {
	background-color: white;
	background-size: 100%;
	text-align: center;
	border-radius: 0 0 10px 10px;
	border-top: 1px solid #e7e7e7;
	height: 200px;
	font-size: 11px;
	padding-top: 30px;
}

.eu {
	color: #003399;
}

.agforwardLogo {
	margin-top: -30px;
}

/**********************************************
	D3 graphs
**********************************************/
.area {
	fill: steelblue;
	clip-path: url(#clip);
}


/**********************************************
	SPINNER https://codepen.io/MattIn4D/pen/LiKFC
**********************************************/


/* Absolute Center Spinner */
.loading {
	position: fixed;
	z-index: 999;
	height: 2em;
	width: 2em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* Transparent Overlay */
.loading:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
	/* hide "loading..." text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}

.loading:not(:required):after {
	content: '';
	display: block;
	font-size: 10px;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	-webkit-animation: spinner 1500ms infinite linear;
	-moz-animation: spinner 1500ms infinite linear;
	-ms-animation: spinner 1500ms infinite linear;
	-o-animation: spinner 1500ms infinite linear;
	animation: spinner 1500ms infinite linear;
	border-radius: 0.5em;
	-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
	box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-moz-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-o-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/**
 * GLOWING BUTTON http://basicuse.net/articles/pl/textile/html_css/how_to_create_flashing_glowing_button_using_animation_in_css3
 */
@-webkit-keyframes glowing {
  0% { background-color: #669933; -webkit-box-shadow: 0 0 3px #669933; }
  50% { background-color: #ccff99; -webkit-box-shadow: 0 0 10px #ccff99; }
  100% { background-color: #669933; -webkit-box-shadow: 0 0 3px #669933; }
}

@-moz-keyframes glowing {
  0% { background-color: #669933; -moz-box-shadow: 0 0 3px #669933; }
  50% { background-color: #ccff99; -moz-box-shadow: 0 0 10px #ccff99; }
  100% { background-color: #669933; -moz-box-shadow: 0 0 3px #669933; }
}

@-o-keyframes glowing {
  0% { background-color: #669933; box-shadow: 0 0 3px #669933; }
  50% { background-color: #99cc33; box-shadow: 0 0 10px #ccff99; }
  100% { background-color: #669933; box-shadow: 0 0 3px #669933; }
}

@keyframes glowing {
  0% { background-color: #669933; box-shadow: 0 0 3px #669933; }
  50% { background-color: #ccff99; box-shadow: 0 0 10px #ccff99; }
  100% { background-color: #669933; box-shadow: 0 0 3px #669933; }
}

.glow {
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}