/*******************************************************************************
AUTOR:      Tescari Luca
PROJEKT:    Fischereikarten Bestellung
Copyright:  ICS Management GmbH
VERSION:    1.0 von TELU am 13.07.2016
*******************************************************************************/

#test { position: absolute; top:0; right: 0; }

#cms_inhaltsbereich { width: auto !important; }

html, body { height: 100%; width: 100%; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; background: #ecf0f1; }
h1, h2 { font-weight: 300; }
input[type="button"] { margin: 0 10px; color: #ffffff; background: #2FA571; border: none; padding: 20px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
input[type="text"], input[type="email"],
select { margin: 0 10px; color: #2FA571; border: none; padding: 8px; border: 1px solid #2FA571; margin: 0 0 5px 0; }
option { padding: 8px; }
a {color: #f1c40f; }

#app-container { width: 1200px; height: 100%; background: #ffffff; margin: 0 auto; }

#landing-page { display: block; }

.bottom { margin-bottom: 50px; }
.active { color: #f1c40f; text-decoration: underline; }
.instruction { color: #424242; font-size: 18px; text-decoration: underline; margin-top: 30px; }
.warning { color:#BE750C; }

.page { padding: 0 50px 50px 50px; background: #fff; }
.page > .title-bar { height: 50px; width: calc(100% + 100px); margin-bottom: 50px; padding: 0 50px; background: #2FA571; box-sizing: border-box; margin-left: -50px; }
.page > .title-bar > span { line-height: 50px; color: #ffffff; width: 100%; text-align: center; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.page h1 { color: #0778A0; }
.page h2 { color: #0778A0; margin-bottom: 50px; }

.input-container { width: 100%; display: flex; }
.input-container > input { flex: 1; }

.around-container { width: 100%; }

.payment-method { border: 1px solid #2FA571; padding: 20px; max-width: 100px; cursor: pointer; }
.payment-method > img { max-width: 100px; }

#bill-complete { height: 175px; }
#bill-complete > .left { float: left; }
#bill-complete > .right { }
.bill-value { font-family: 'Anonymous Pro', monospace; }

#message { display: none; width: 350px; border: 1px solid; width: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 120px); background: #ffffff; }
#message > .title { width: 100%; padding: 7px 7px 7px 21px; box-sizing: border-box; }
#message > .title > span { color: #000000; margin-top: 10px; }
#message > .content { padding: 21px; }
#message > .content > p { margin: 0; padding: 0; }
#message > .content > .align { text-align: right; width: 100%; }
#message > .content > .align > input { padding: 10px; }

#message-restart { display: none; width: 350px; border: 1px solid; width: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 120px); background: #ffffff; }
#message-restart > .title { width: 100%; padding: 7px 7px 7px 21px; box-sizing: border-box; }
#message-restart > .title > span { color: #000000; margin-top: 10px; }
#message-restart > .content { padding: 21px; }
#message-restart > .content > p { margin: 0; padding: 0; }
#message-restart > .content > .align { text-align: right; width: 100%; }
#message-restart > .content > .align > input { padding: 10px; }

.ng-invalid-email { border-color: #EC644B !important; color: #FFFFFF !important; background-color: #D24D57; }

.message-error { border-color: #e74c3c !important; }
.message-warning { border-color: #f39c12 !important; }
.message-default { border-color: #2FA571 !important; }

.message-error > .title { background: #e74c3c !important; }
.message-warning > .title { background: #f39c12 !important; }
.message-default > .title { background: #2FA571 !important; }

.message-error input { background: #e74c3c !important; }
.message-warning input { background: #f39c12 !important; }
.message-default input { background: #2FA571 !important; }


#DatumAm { }
#DatumVonBis { }


/* Jquery Datepicker Skin ------------------------------------------------------ */
.ll-skin-melon {
	font-size: 90%;
}

.ll-skin-melon .ui-widget {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	background: #7f8c8d;
	border: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.ll-skin-melon .ui-datepicker {
	padding: 0;
}

.ll-skin-melon .ui-datepicker-header {
	border: none;
	background: transparent;
	font-weight: normal;
	font-size: 15px;
}

.ll-skin-melon .ui-datepicker-header .ui-state-hover {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-title {
	margin-top: .4em;
	margin-bottom: .3em;
	color: #e9f0f4;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev-hover,
.ll-skin-melon .ui-datepicker .ui-datepicker-next-hover,
.ll-skin-melon .ui-datepicker .ui-datepicker-next,
.ll-skin-melon .ui-datepicker .ui-datepicker-prev {
	top: .9em;
	border:none;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev-hover {
	left: 2px;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-next-hover {
	right: 2px;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-next span,
.ll-skin-melon .ui-datepicker .ui-datepicker-prev span {
	background-image: url("http://image.flaticon.com/icons/png/512/16/16049.png");
	background-position: -32px 0;
	margin-top: 0;
	top: 0;
	font-weight: normal;
}

.ll-skin-melon .ui-datepicker .ui-datepicker-prev span {
	background-position: -96px 0;
}

.ll-skin-melon .ui-datepicker table {
	margin: 0;
}

.ll-skin-melon .ui-datepicker th {
	padding: 1em 0;
	color: #ccc;
	font-size: 13px;
	font-weight: normal;
	border: none;
	border-top: 1px solid #464D4D;
}

.ll-skin-melon .ui-datepicker td {
	background: #2ecc71;
	border: none;
	padding: 0;
}

.ll-skin-melon td .ui-state-default {
	background: transparent;
	border: none;
	text-align: center;
	padding: .5em;
	margin: 0;
	font-weight: normal;
	color: #efefef;
	font-size: 16px;
}

.ll-skin-melon .ui-state-disabled  {
	opacity: 1;
}

.ll-skin-melon .ui-state-disabled .ui-state-default {
	color: #78D39E;
}

.ll-skin-melon td .ui-state-active,
.ll-skin-melon td .ui-state-hover {
	background: #7f8c8d;
}