@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

@media all and (max-width:769px){
html {
  position: relative;
  min-height: 100%;
}
body {
	min-height:400px;
}

footer {
	line-height:50px;	
	background-color: #f5f5f5;
  margin-top:15px;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 100px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

h3, h4{
	font-weight:200;
	color: #569DCC;
}

#contentRow{
	min-height:600px;
}


/* Main CSS style
/* -------------------------------------------------- */

nav{
	position:fixed;
	z-index:1000;
	width:100%;
	background-color: white;
	color:rgb(86, 90, 92);
	font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:15px;
}

#connexion-area{
	display:none;
}

nav .main-menu > li{
	line-height:50px !important;
	height:50px  !important;
}

.menu-item{
	margin-right:5px;
	margin-top: 8px;
	padding-bottom: 8px;
}

.menu-item a{
	color: rgb(86, 90, 92);
	font-size:16px;
}

.menu-item > span{
	font-size:18px;
}

nav .main-menu > li:hover{
	background-color:rgb(250, 250, 250);
}

#menu-2{
	position:fixed;
	top:0px;
	z-index:1000;
	width:100%;
	box-shadow: 0 8px 6px -6px #aaa;
	padding-top:10px;
	padding-bottom:10px;
}
						
#menu-link li.active{
	border-bottom:0px dashed;
}

#menu-submenu{
	display:none;
	border-top:1px solid grey;
	padding-top:10px;
	padding-bottom:10px;
}

#menu-title{
	font-family: 'Indie Flower', cursive;
	font-size: larger;
	margin-top:5px;
}

#container{
	padding-top: 70px;
}

.bnr{
	padding: 10px 0px 10px 5px;
	border-radius: 5px;
}

.bnr-info{
	background-color: rgba(5, 147, 255, 0.21);
	color: rgb(12, 124, 194);
	border: 1px solid rgb(28, 115, 194);
}

.bnr-danger{
	background-color: #f2dede;
	color: rgb(154, 3, 12);
	border: 1px solid rgb(154, 3, 12);
}


.subTitle{
	text-align:left;
	line-height:50px;
	font-size:26px;
	font-weight:200;
	color: #569DCC;
}

#mobile-action{
	padding-top:12px;
	color: rgb(86, 90, 92);
}


#menu-submenu ul.active{
	list-style:none;
}

#menu-submenu ul.active li{
	display:block;
	margin-top:10px;
	margin-bottom:10px;
}

#menu-mobile ul > li{
	margin-top:10px
}

li.separator{
	border-top: 1px solid;
	border-color: rgb(170, 171, 173);
	margin-top: 10px;
	margin-right: 25px;
	opacity: 0.8;
}

.list-none{
	list-style: none;
}
				
.list-inline{
	margin:0px;
}


#list-alert {
	position:fixed;
	bottom:30px;
	right: 40px;
	z-index:500;
}

.fa{
	cursor:pointer;
}

.datepicker{
	z-index:5000 !important;
}

#main-loading{
	width:100%;
	line-height:50px !important;
	height:50px  !important;
	display:none;
}

#content-title{
	color: #569DCC;
	text-align:center;
}

#overlay-loading{
	position:absolute;
	min-height:500px;
	width:100%;
	z-index:1000;
	text-align:center;
	line-height:500px;
	background-color:white;
}

/* Ratings Stars
/* ------------------------------------------------- */
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

/* Recipe tile style
/* ------------------------------------------------- */

.recipe{
	margin-top:5px;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	position:relative;
	color:white;
	opacity: 1;
}

.recipe .legend{
	opacity:1;
	padding:5px;
	position:absolute;
	bottom:0px;
	width:100%;
	background-color:rgba(60,63,64,0.9);
	box-shadow: 0px 2px 12px #aaa;
}

.recipe h4{
	margin-left:5px;
	color: inherit;
}

.recipe .action-button a{
	color: #FFFFFF;
}

.recipe .action-button a:hover{
	color: #C2C2C2;
}

.recipe .action-button{
	font-size:22px;
	text-align:right;
	padding-right: 5px;
}


.recipe .action-button.reverse-color a{
	color: #97c5e7;
}

.recipe .action-button.reverse-color a:hover{
	color: #C2C2C2;
}

.recipe .action-button .fa-heart{
	color:#FFB6C1;
}

#modal-details .details{
	min-height:150px;

}

#modal-details .picture{
	text-align:center;
	line-height:150px;
}

#search-result{
	position:absolute;
	background-color:white;
	border: 1px solid #2196E4;
	border-radius:5px;
	z-index:100;
	margin-top:10px;
	margin-right:15px;
	width:90%;
}

#search-result:before{
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: -8px;
	width: 14px;
	height: 14px;
	background:white;
	border-color: #73a7f0;
	border-width: 1px;
	border-style: solid none none solid;
	z-index:-10;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}

#search-result ul{
	max-height:300px;
	overflow:scroll;
	list-style:none;
	text-align:left;
	margin-top:0px;
	margin-bottom:0px;
	padding-left:0px;
}

#search-result li{
	padding-top: 5px;
	padding-left:10px;
	padding-bottom: 5px;
}

#search-result li:first-child{
	border-radius:5px 5px 0px 0px;
}

#search-result li:last-child{
	border-radius:0px 0px 5px 5px;
}

#search-result li:not(:last-child){
	border-bottom:1px solid #2196E4;
}

#search-result .result:hover{
	background-color: rgb(248, 248, 248);
	cursor:pointer;
}

div.section{
	text-align:center;
}

div.section h3{
	padding-bottom:4px;
	border-bottom: 2px solid #2196E4;
}

div.section h3.active{
	background-color: #91C0DF;
	border-radius: 5px 5px 0px 0px;
}

div.section h3:hover{
	cursor:pointer;
}

#dashboard{
	height:550px;
	padding-top:5px;
}

#modal-planning .modal-title{
	text-align: left;
}

#recipes{
	overflow:scroll;
	height:550px;
}

.ui-state-hover{
	border:2px solid #ddd;
}

.recipe-selected{
	opacity:1;
}

/* Register page theme
/* ------------------------------------------------- */
#bloc-registration{
	height:600px;
	vertical-align:center;
}

#bloc-register{
	border-right:2px solid;
	border-color: rgb(170, 170, 170);
}

/* Planning
/*-------------------------------------------------- */
#planning table{
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

#header tbody td{
	width:150px;
}

#planning thead td{
	text-align:center
}

#planning tbody td{
	width:150px;
	height:150px;
	border:1px solid;
	text-align:center
}

.menu{
	opacity:0.5;
}

#planning .action-button a:hover{
	color: #C2C2C2;
}

#planning .action-button a{
	color: rgb(86, 90, 92);
}

#planning .action-button{
	color: #C2C2C2;
	font-size:22px;
	text-align:right;
}

.btn-print{
	display:none;
}

.glyphicon{
	font-size:20px;
}

.glyphicon:hover{
	font-weight:bold;
	cursor:pointer;
}

/*------Shopping List ----------*/
#shoppingList .row > div{
	padding-top:10px;
	padding-bottom:10px;
}

.article{
	padding: 15px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgba(108, 196, 255, 0.46);
	border-radius: 0.3em;
	color: rgb(86, 90, 92);
}

.article:hover {
	background-color: rgb(86, 90, 92);
	color: rgb(255, 255, 255);
}

.article-category{
	float: right;
	border: 1px solid lightgrey;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.article-category:hover{
	color: white;
}

#shoppingList i{
	margin-top:10px;
	margin-bottom:10px;
}

#shoppingList i{
	font-size:18px;
}

#shoppingList label{
	font-size:14;
}
	
#shoppingList .actions{
	text-align:right;
}

#basketList .basket{
	display:none;
}

#basketList .article{
	display:none;
}
/*-------------------------*/
}