﻿#pageCustomHeader
{
	margin: 0 auto;
	width: 900px;
	display: none;
	overflow: hidden;
	height: 60px;
	background-color: #ffffff;
}
#pageCustomMeniuMobile
{	
	/*position: fixed;
	top: 60px;
	left: 0;*/
	width: 100%;
	display: none;
	overflow: hidden;
	background-color: #ffffff;
	z-index: 2;
}

#divMeniuDesktop
{
	display: block;
}
#divMeniuMobile
{
	display: none;
}
@media only screen and (max-width: 900px)
{
	#pageCustomHeader
	{
		width: 100%;
	}
	#divMeniuDesktop
	{
		display: none;
	}
	#divMeniuMobile
	{
		display: block;
	}
}

#PageHeader {
	background-color: #2ea656;
	height: 40px;
	width: 100%;
	overflow: hidden;
	/*border-bottom: 3px solid #e1e3e6;*/
}
#HeaderTitle {
	float: left;
	width: calc(100% - 40px - 40px);
	font-size: 30px; 
	font-weight: bold; 
	padding-top: 1px; 
	text-align: center; 
	color: #ffffff;
}
#HeaderLeft
{
	float: left;
	width: 32px;
	height: 32px;
	overflow: hidden;
	padding: 4px;
}
#HeaderRight
{
	float: left;
	width: 32px;
	height: 32px;
	overflow: hidden;
	padding: 4px;
}

@media only screen and (max-width: 900px)
{
	#HeaderTitle
	{
		padding-top: 3px; 
		font-size: 26px; 
	}
}
@media only screen and (max-width: 400px)
{
	#HeaderTitle
	{
		padding-top: 5px; 
		font-size: 22px; 
	}
}

#PanelLimbi
{
	position: absolute;
	top: 40px;
	left: 0px;
	width: 32px;
	padding: 4px;
	border-radius: 0px;
	background-color: #2ea656;
	display: none;
}

#PanelPoza
{
	margin: 20px auto;
	width: 70%;
	min-width: 300px;
	height: 350px;
	overflow: hidden;
    border: 1px solid #e1e3e6;
    background-color: #FFFFFF;
    border-radius: 10px;
	background-image: url('/Images/FoodBackground2.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#PanelSelectie
{
  /*position: relative;
  top: 70px;
  left: calc(50% - 150px);
  z-index: 1;*/
  margin: 20px auto;
  width: 70%;
  min-width: 300px;
  /*height: 300px;*/
  overflow: hidden;
  border: 1px solid #e1e3e6;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 8px 0px 20px 0px;
  margin-bottom: 20px;
}

.randSelectie
{
	text-align: center;
	padding: 4px;
}

#PanelSelectieDiv1
{
	
}
#PanelSelectieDiv2, #PanelSelectieDiv4
{
	float: left;
	width: calc(100% - 8px);
}
#PanelSelectieDiv3
{
	float: left;
	width: calc(100% - 8px);
}

@media only screen and (min-width: 900px)
{
	#PanelSelectieDiv2
	{
		width: calc(45% - 8px);
		text-align: right !important;
	}
	#PanelSelectieDiv4
	{
		width: calc(45% - 8px);
		text-align: left !important;
	}
	#PanelSelectieDiv3
	{
		width: calc(10% - 8px);
		height: 41px;
		line-height: 38px;
	}
}

.butonSelectie
{
	font-size: 20px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #2ea656;
	border-radius: 10px;
	border: 1px solid #e1e3e6;
	padding: 8px 4px;
	width: 260px;
	cursor: pointer;
	outline: none;
}
.butonSelectie:hover {
	background-color: #097320;
}

#PageFooter
{
	overflow: hidden;
	width: 80%;
	min-width: 300px;
	font-size: 14px;
	margin: 40px auto;
}
#FooterLeft
{
	text-align: center;
	float: left;
	width: 33%;
}
#FooterCenter
{
	text-align: center;
	float: left;
	width: 33%;
}
#FooterRight
{
	text-align: center;
	float: left;
	width: 33%;
}

@media only screen and (max-width: 900px)
{
	#FooterLeft
	{
		width: 100%;
	}
	#FooterCenter
	{
		width: 100%;
	}
	#FooterRight
	{
		width: 100%;
	}
}

/* ---------------------------------- START MODALA LOCATIE ---------------------------------- */

#modalaLocatie {
  position: fixed;
  top: 50px;
  left: 10px;
  z-index: 3;
  width: calc(100% - 2px - 20px);
  max-height: calc(100% - 40px - 2px - 20px);
  overflow: hidden;
  border: 1px solid #e1e3e6;
  background-color: #FFFFFF;
  border-radius: 10px;
}

@media only screen and (min-width: 800px) {
	#modalaLocatie {
		left: calc(50% - 0px);
		margin-left: -389px;
		width: calc(800px - 2px - 20px);
	}
}

#locatieHeader {
	margin-top: 5px;
	margin-left: 5px;
	width: calc(100% - 10px);
	height: 30px;
	overflow: hidden;
}
#locatieContent {
	margin-top: 25px;
	margin-left: 5px;
	width: calc(100% - 10px);
	max-height: calc(100% - 35px - 75px - 25px);
	overflow: hidden hidden;
}
#locatieBottom {
	margin-top: 25px;
	padding-top: 10px;
	/*border-top: 1px solid #e1e3e6;*/
	margin-left: 5px;
	width: calc(100% - 10px);
	height: 40px;
	text-align: center;
}

#locatieHeaderImg {
	float: left;
	width: 30px;
}
#locatieHeaderTitle {
	float: left;
	font-size: 22px;
	font-weight: normal;
	margin-left: 4px;
}
#locatieHeaderClose {
	float: right;
	width: 30px;
}

#txtAdresa {
	font-size: 20px;
	padding: 5px;
	width: calc(100% - 10px - 2px - 34px);
	border: 1px solid #e1e3e6;
	border-radius: 5px;
}
#lblDistantaKm
{
	float: left;
	font-size: 14px;
	color: #737574;
	padding-left: 4px;
	width: 60px;
}

#btnSalveazaLocatie {
	font-size: 24px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #2ea656;
	border-radius: 10px;
	border: 1px solid #e1e3e6;
	padding: 4px;
	width: 250px;
	cursor: pointer;
	outline: none;
}
#btnSalveazaLocatie:hover {
	background-color: #097320;
}

.disableButon
{
	opacity: 0.5;
	background-color: #737574 !important;
	cursor: not-allowed !important;
}

/* ---------------------------------- END MODALA LOCATIE ---------------------------------- */

/* === ANTI-FOUC: corp ascuns pana se determina V1 sau V2 === */
body {
    opacity: 0;
}
body.ui-ready {
    opacity: 1;
    transition: opacity 0.2s ease;
}
