html {
	height: auto;
	margin: 0;
    padding: 0; 
}

body {
    font-family: 'Raleway', sans-serif;
	font-style: normal;
	font-variant: normal;
	background: white;
	color: black;
	background-color: white;
	margin: 0;
    padding: 0;
    min-height: 100%;
	}
a.logo h1, a.logo span.h1 {
	margin: 0px;
	color: white;
	font-size: 28px;
	font-weight: 900;
	}

a.logo h1.mdH1, a.logo span.h1.mdH1 {
	font-size: 28px;
}

a.logo h1.xsH1, a.logo span.h1.xsH1 {
	font-size: 28px;
}
	
a.logo h2, a.logo span.h2 {
	margin: 0px;
	font-size: 12px;
	font-weight: normal;
	opacity: 0.6;
}
a.logo h2.mdH2, a.logo span.h2.mdH2 {
	
	font-size: 12px;
}
a.logo h2.xsH2, a.logo span.h2.xsH2 {
	
	font-size: 14px;
}
a.logo {
	text-decoration: none;
}
h1 {
	margin: 0px;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 16px;
}
h1.mdH1 {
	font-size: 25px;
}
h1.xsH1 {
	font-size: 23px;
	margin-top: 10px;
}
h3 {
	font-size: 20px;
	font-weight: 600;
}
button, html, input, select, textarea {
	font-family: 'Raleway', sans-serif;
}
p {
	color: #666666;
	font-size: 15px;
	text-align: justify;
	margin: 0px;
	line-height: 25px;
}
ul {
	color: #666666;
}
table {
	color: #666666;
}
a {
	color: #5e9629;
}
.largeDisplay {
/* 	width: 960px; */
	width: 1000px;
}


.mdDisplay {
	width: 710px;
}

.xsDisplay {
	width: 320px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

#header {
	background-color: #5e9629;
}

#header a {
	color: white;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
}
#header a.logo {
	text-align: left;
}
.nav {
	margin-bottom: 10px;
}
.nav a {
	color: #666666;
	text-decoration: none;
	font-size: 14px;
}
.nav span {
	font-size: 14px;
}
/* #topBanner, #bottomBanner { */
/* 	height: 248px; */
/*     border: 1px solid #ddd; */
/*     margin-top: 30px; */
/*     margin-bottom: 30px; */
/*     background: #e9e9e9; */
/*     color: #666666; */
/* } */
#leaderboard-top, #leaderboard-bottom {
	margin-top: 30px;
	margin-bottom: 30px;
}
#m-square-1, #m-sticky {
	margin-top: 15px;
	margin-bottom: 15px;
}

/* .xsDisplay #topBanner, .xsDisplay #bottomBanner { */
/* 	height: 98px; */
/* } */

/* #leftBanner { */
/* 	border: 1px solid #ddd; */
/*     background: #e9e9e9; */
/*     color: #666666; */
/*     width: 160px; */
/*     height: 600px; */
/* } */

#footer {
	margin-bottom: 20px;
}

#footer_bottom {
	background: #333333;
	border-top: 2px solid #5e9629;
}


#footer_bottom .content {
	padding-top: 20px;
	padding-bottom: 20px;
}

#footer_bottom .content a {
	color: white;
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}

#footer_bottom .content .copy {
	color: #666;
    font-weight: bold;
    font-size: 14px;
}

#footer_bottom .content p {
	padding-right: 40px;
}

.selectCountry {
	cursor: pointer;
}

.selectCountry span {
	color: #ddd;
	margin-left: 5px;
	margin-right: 5px;
}

.alcoholForm {
	border: 2px solid #e0e0e0;
	background-color: #eeeeee;
	margin-top: 20px;
	font-size: 17px;
	color: #606060;
}

.sectionTitle {
	color: #5e9629;
	font-size: 18px;
	font-weight: 600;
}

.p-button {
	display: inline-block;
	position: relative;
	cursor: pointer;
	min-height: 56px;
	min-width: 100px;
	line-height: 56px;
	vertical-align: middle;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-grid-row-align: center;
	align-items: center;
	text-align: center;
	border-radius: 3px;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 0;
	padding: 0 6px;
	white-space: nowrap;
	font-weight: 500;
	font-size: 16px;
	font-style: inherit;
	font-variant: inherit;
	font-family: inherit;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1),
		background-color .4s cubic-bezier(.25, .8, .25, 1);
	transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1),
		background-color .4s cubic-bezier(.25, .8, .25, 1);	
	background: inherit;
	background-color: inherit;	
	border: none;
	border-radius: 5px;
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	font-style: normal;
	font-size: 16px;
	color: #FFFFFF;	
	margin-top: 10px;
}

.alcohol-input {
	padding: 0px 10px;
	height: 56px;
	line-height: 56px;
	border-radius: 8px;
	border: 1px solid #c9c9c9;
	background: white;
	margin-top: 10px;
}

.alcohol-input-invalid {	
	padding: 0px 10px;
	height: 56px;
	line-height: 56px;
	border-radius: 8px;
	border: 1px solid #f44336;
	background: white;
	margin-top: 10px;
}

md-select.alcohol-input {
	margin:0px;
	margin-top: 10px;
}

span.invalid {
	color: #f44336;
	font-weight: bold;
	margin-left: 5px;
}

.p-button-primary {
	background-color: rgb(104, 159, 56);
}
.p-button-delete {
	background-color: red;
}
.p-button-primary:hover {
	background-color: rgb(51, 105, 30);
}
.p-button-primary-inverted {
	border: solid 1px rgb(104, 159, 56);
	background-color: white;
	color: rgb(104, 159, 56);
}
.p-button-primary-inverted:hover {
	border: solid 1px rgb(51, 105, 30);
	color: rgb(51, 105, 30);
}
.p-button-secondary {
	color: #606060;
	background-color: rgb(238, 238, 238);
}
.p-button-secondary:hover {
	background-color: #c0c0c0;
}

.autocomplete {
	margin-top: 0px;
}

.line {
	border-top: 1px solid #c9c9c9;
	width: 100%;
	padding-bottom: 16px;
}

fieldset {
	border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 35px;
}

fieldset legend {
	 font-weight: 600;
	 padding-left: 10px;
	 padding-right: 10px;
}

fieldset legend h2 {
	font-size: 1em;
	font-weight: 600;
	margin: 0px;
}

fieldset a {
	font-weight: 600;
	padding-top: 15px;
	color: #0972da;
	text-decoration: none;
}

fieldset a.orange {
	color: #ff8000;
}

fieldset .button {
	color: white;
	background: #0972da;
	height: 45px;
	border-radius: 5px;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 20px;
	border-bottom: 2px solid #06539f;
	cursor: pointer;
}

.autocomplete .inputtext {
	height: 70px;
	border: 1px solid #666666;
	border-radius: 5px 0px 0px 5px;
	padding-left: 3%;
}

#header .autocomplete .inputtext {
	height: 35px;
}

.autocomplete #button {
	border: 1px solid #ff8000;
	color: white;
	font-weight: 600;
	border-radius: 0px 5px 5px 0px;
	background-image: linear-gradient(0deg, #ff8000 85%, white);	
	cursor: pointer;
}

.autocomplete .alcohol-input {
	background: url("../resources/image/lupa.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	background-color: white;
	background-position: right;
	background-origin: content-box;
}

.sex .m .p-button-primary {
	background-image: url("../resources/image/sex_male_white.png");
	background-repeat: no-repeat;
	background-position-x: 20px;
	background-position-y: center;
}

.sex .m .pl.p-button-primary {
	background-position-x: 10px;
}

.sex .m .p-button-secondary {
	background-image: url("../resources/image/sex_male_green.png");
	background-repeat: no-repeat;
	background-position-x: 20px;
	background-position-y: center;
}

.sex .m .pl.p-button-secondary {
	background-position-x: 10px;
}

.sex .f .p-button-primary {
	background-image: url("../resources/image/sex_female_white.png");
	background-repeat: no-repeat;
	background-position-x: 20px;
	background-position-y: center;
}

.sex .f .p-button-secondary {
	background-image: url("../resources/image/sex_female_green.png");
	background-repeat: no-repeat;
	background-position-x: 20px;
	background-position-y: center;
}

.choices {
	border: 1px solid #c9c9c9;
	border-top: none;
	border-radius: 0px 0px 8px 8px;
	background: white;
	z-index: 10;
	max-height: 205px;
    overflow: auto;
    min-height: 67px;
}

.choices .choice {
	height: 35px;
	padding-left: 10px;
	font-weight: 600;
	color: #606060;
	cursor: pointer;
	min-height: 35px;
}

.choices .choice:HOVER {
	color: #5e9629;
}

.topDrink {
	border: 1px solid #c9c9c9;
	border-radius: 8px;
}

.topDrink .thumb {
	max-height: 80px;
	margin-top: 10px;
}

.topDrink span {
	min-height: 40px;
	text-align: center;
}

.topDrink .p-button-primary {
	min-height: 40px;
	line-height: 40px;
	font-weight: 600;
}

.alcohols .alcohol {
	background-color: white;
	border: 1px solid #c9c9c9;
	margin-bottom: 8px;
	margin-top: 16px;
}

.alcohols .alcohol .p-button-primary{
	min-height: 40px;
	line-height: 40px;
	margin-top: 0px;
}

.alcohols .alcohol .p-button-secondary {
	min-height: 40px;
	line-height: 40px;
	margin-top: 0px;
}

.resultPart {
	background-color: white;
	border: 1px solid #c9c9c9;
	margin-top: 16px;
}

.resultPart span {
	text-align: center;
	font-size: 15px;
}

.resultPart .top {
	font-size: 30px;
	font-weight: 600;
	color: black;
}

.alcohol-input.sort1 {
	margin-top: 0px;
	border-radius: 8px 0px 0px 8px;
	border-right: none;
	cursor: pointer;
}

.alcohol-input.sort1.primary, .alcohol-input.sort2.primary {
	background-color: #5e9629;
	color: white;
}

.alcohol-input.sort2 {
	margin-top: 0px;
	border-radius: 0px 8px 8px 0px;
	cursor: pointer;
}

.drinks .drink {
	background-color: white;
	color: #5e9629;
	text-align: center;
}

.drinks .drink a {
	text-decoration: none;
	min-height: 96px;
}

.drinks .drink img {
	max-height: 80px;
	margin-top: 10px;
}

#header .mobileMenu a {
	border-bottom: 1px solid white;
	padding: 8px;
	margin-top: 0px;
	font-size: 19px;
}

.arrow {
	color: #5e9629;
	cursor: pointer;
}

.detailImg {
	background-color: white;
	width: 100%;
	min-height: 180px;
	cursor: pointer;
}

.catList .p-button {
	min-width: auto;
}

img.controll {
	cursor: pointer;
}

.flagAutocomplete {
	height: 15px;
	cursor: pointer;
	opacity: 0.6;
}

.flagAutocomplete.flagActive {
	opacity: 1;
}

span.example {
	color: #666666;
	text-align: center;
}

a.video {
	text-decoration: none;
}

a.video span {
	color: #ff8000;
	font-weight: 600;
	padding-left: 3%;
}

.tableResults {
	padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: 600;
    padding-left: 0px;
    padding-right: 0px;
/*     max-height: 700px !important; */
/*     overflow: auto; */
    padding-bottom: 20px;
}

.tableResults .item {
	margin-top: 10px;
	margin-bottom: 10px;
}

.tableResults .item .value {
	color: black;
}

.tableResults .item .unit {
	color: #0972da;
}

.tableResults .item .unit a {
	text-decoration: none;
}

.button.moreResults {
	background: #ff8000;
	color: white;
	height: 45px;
	border-radius: 5px;
	cursor: pointer;
	border-bottom: 2px solid #dc7510;
}

.unitBox, .unitBox2 {
	border: 1px solid #ddd;
	border-radius: 5px;
	font-weight: 600;
	font-size: 19px;
	width: 100%;
}

.unitBox input, .unitBox2 input, .unitBox2 .inputValue2 {
	border: none;
	margin: 15px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 0px;
	padding-bottom: 10px;
	height: 34px;
}

.unitBox .unitTitle, .unitBox2 .unitTitle {
	padding: 15px;
	padding-top: 10px;
	color: #0972da;
}

.unitBox .vector, .unitBox2 .vector {
	color: #0972da;
	transform: rotate(-90deg);	
	margin-top: -22px;
	margin-right: 10px;
}

.unitBox .vector.active, .unitBox2 .vector.active {
	color: #0972da;
	transform: rotate(90deg);	
	margin-top: 22px;
	margin-right: 10px;
}

.unitBoxItem {
	padding-top: 5px;
	color: #0972da;
	cursor: pointer;
/* 	height: 24px; */
	display: block;
}

#search, #search1, #search2 {
	border: 1px solid #ddd;
	border-radius: 5px;
	height: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 10px;
}

#unitBoxWrapper.active {
	border: 1px solid #ddd;
	border-radius: 5px;
}

.unitBox.active, .unitBox2.active {
	border: none;
}

md-progress-circular svg path { stroke: #5e9629; }

.bestSearchUnits a {
	text-decoration: none;
}

span.unitGroup {
	color: #ff8000;
	font-size: 21px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
}

#value, #value1, #value2 {
	font-weight: 600;
}

.changeUnits {
	text-decoration: underline;
	color: #ff8000;
	cursor: pointer;
}

.changeUnits img {
	margin-right: 10px;
}

img.mobileMenu {
	cursor: pointer;
}

.menu a {
	margin-top: 10px;
}
.area {
	border: 1px solid #ddd;
	border-radius: 5px;
	margin-top: 35px;
}
.categoryItem a.categoryTitle {
	color: #ff8000;
	font-weight: 600;
	text-decoration: none;
}
.categoryItem span {
	font-weight: 600;
}
.categoryItem a.mainUnit {
	color: #0972da;
}
.categoryItem {
	border: 1px solid #ddd;
    border-radius: 5px;
    padding: 2%;
    height: 100px;
    margin-bottom: 15px;
}
#contactForm input {
	border: 1px solid rgb(221, 221, 221);
	border-radius: 5px;
	height: 40px;
	padding-left: 2%;
}
#contactForm textarea {
	border: 1px solid rgb(221, 221, 221);
	border-radius: 5px;
	padding: 2%;
}
#contactForm span {
	font-weight: 600;
	margin-bottom: 10px;
}
.validation-msg {
	color: red;
	padding-left: 2%;
}

.md-success-toast-theme .md-toast-content {
	background: green;
}

.md-error-toast-theme .md-toast-content {
	background: red;
}

.listUnitsL {
	max-height: 223px;
	overflow: auto; 
}

.listUnitsM {
	max-height: 223px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch; 
}
.listUnitsS {
	height: auto; 
}
img.flag {
	border-radius: 30px;
	height: 30px;
	width: 30px;
}
.xsDisplay .autocomplete {
	margin-top: 0px;
}

.flex-gt-sm-97, .layout-row > .flex-gt-sm-97 {
	max-width: 97%;
	max-height: 100%;
}

#skyscraper-1 {
	max-width: 160px;
}

.paging-number {
	width: 24px;
	height: 24px;
	margin-left:8px;
	border-radius: 50%;	
	background-color: #ececec;   
	font-size: 12px;
    color: rgba(0,0,0,.54);
    text-decoration: none;
}
.paging-number-selected {	
	background-color: rgba(38, 50, 56, 1) !important;
	color:#B0BEC5 !important;
}

.pointer {
	cursor: pointer;
}
