@charset "utf-8";
/* CSS Document */
/* wir sind reisen  - 01.08.2019 */
@import "/css/styles_cms.css";

* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}

/* Grundstruktur  ---------------------- */
html {height:100%; background-color:#fff}
body { font-family: 'Roboto Slab', sans-serif; color:#000; height:100%; background-color:#fff;   font-size: 15px; margin: 0 0 0 0;}
#wrapper {position:relative; padding:20px;}
#header {position:relative; width:100%; height:100px; text-align:center}
#daten {border:1px solid #eee; width:calc(100% - 0px); min-height:400px; position:relative; padding:20px}
#formOuter {margin-top: 50px}

/* nav */
#navOuter {display: flex; position: absolute; background-color:#fff; transition: all .5s ease-in-out; width: calc(100% - 40px); z-index: 10}
#navOuter.closed {height: 20px; }
#navOuter.opened, #alleVeranstalter {height: auto;   background-color: #eee; -webkit-box-shadow: -2px 10px 8px -6px rgba(0,0,0,0.82); 
box-shadow: -2px 10px 8px -6px rgba(0,0,0,0.82);}
#navOuter.closed  div {display: none}
#navOuter.closed  div.navOpenerCloser {display: block}
.navOpenerCloser {margin-left:10px; margin-top: 10px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; cursor: pointer}
#navOuter.closed .navOpenerCloser.closed {background-image: url("/img/menu.svg")}
#navOuter.opened .navOpenerCloser.opened {background-image: url("/img/close.svg")}
#nav {margin-left: 20px; padding-top: 10px}
#navOuter ul li {list-style-type: none; margin-bottom: 10px; cursor: pointer; border-bottom: 1px solid transparent}
#navOuter ul li a {color: #000; text-decoration: none}
#navOuter ul li a:hover {border-bottom: 1px solid #000}
#navOuter h3 {margin-bottom: 10px}
.angeboteListe, .veranstalterListe {margin-left:10px; padding-left: 20px; padding-top: 10px; border-left: 1px solid #ccc}
.angeboteListe a, .veranstalterListe a {text-decoration: none; color: #000}

/* Divs*/
#alleAngebote, #alleVeranstalter {display: none; width: 100%; height: auto; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-top: 50px}
#alleAngebote h3, #alleVeranstalter h3 {margin-bottom: 10px}
#alleAngebote .angeboteListe, #alleVeranstalter .veranstalterListe {border-left: 0px;}
#resultdiv {position: absolute; width: 100%; padding: 30px; color: #fff; background-color: #e8bd2f; text-align: center; display: none; z-index: 1000}
#logoutDiv {position: absolute; top: -20px; right: 0px}
#loginForm {
    width: 500px;
    max-width: 100%;
    margin: 0px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.37);
    -moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.37);
    box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.37);
}
#loginForm input:focus, #loginForm input:hover{outline-style: none;box-shadow: none;border-color: transparent;}
#loginForm input:hover{outline-style: none;box-shadow: none;border-color: transparent;}
#loginForm input#veranstalter_email {height: 50px; border: 0px; border-bottom: 2px solid #ccc}
#loginForm input#veranstalter_email {background-image: url("/img/username.svg"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 50px; background-size: 20px; opacity: 0.6}
#loginForm input#veranstalter_email:focus, #loginForm input#veranstalter_email:hover {opacity: 0.9; border-bottom: 2px solid #e8bd2f}
#loginForm input#veranstalter_pwd {height: 50px; border: 0px; border-bottom: 2px solid #ccc}
#loginForm input#veranstalter_pwd {background-image: url("/img/lock.svg"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 50px; background-size: 15px; opacity: 0.6}
#loginForm input#veranstalter_pwd:focus, #loginForm input#veranstalter_pwd:hover {opacity: 0.9; border-bottom: 2px solid #e8bd2f}
#nouser, #noemail, #emailsent {width: 100%; background-image: url("/img/exclamation.svg"); background-repeat: no-repeat;  padding-left: 20px; background-size: 4px; display: none;}
.pwdForgotten {cursor:default}

/* Klassen */
.w200px {width:200px; max-width:100%}
.w100pro {width:100%}
.mt3px {margin-top: 3px}
.mt20px {margin-top:20px}
.mt50px {margin-top:50px}
.pt4px {padding-top: 4px}
.pl10px {padding-left: 10px}
.hidden {width:0px; height:0px; position:fixed; top:-100000px}
.fl {float:left}
.fr {float:right}
.clearer {clear:both}
.tal {text-align:left}
.tac {text-align:center}
.full {width: 100%}
.half {width:50% !important; float:left}
.third {width:33% !important; float:left}
.twothird {width:66% !important; float:left}
.headline {font-weight:bold; font-family: 'Roboto', sans-serif; font-size:1.5em; text-transform:uppercase; border-bottom:1px solid #CCC; width:calc(100% - 0px); padding-bottom:10px}
.hinweis{font-size:0.8em; color: #999;  margin-top:5px; padding-right:25px}
.abstandoben {margin-top:50px}
.formfield {width:auto; position:relative; margin-bottom: 20px}
.formfield:after {
  content: "";
  display: table;
  clear: both;
}
.helper, .helper a{text-decoration: none; color: #e8bd2f}
.zeile {margin-top:20px; width:100%}
.zeile.zeile1 {margin-top:50px !important}
.right {float:left; width:calc(50% - 10px); padding-left:10px}
.left {float:left; width:calc(50% - 10px); padding-right:10px}
.values {margin-top:50px}
span.i, a.info {width: 15px; height: 15px; display: inline-block; background-image: url("/img/info.svg"); background-size: 15px auto; position: relative; top: 2px}
.vorschau {position:absolute; right: 80px; top:0px}
.vorschau img {width: 50px; height: auto}
.grid {display: grid}
.flex {display: flex}
.flexEnd {align-items: flex-end}
.deleteRecord {cursor: pointer}
.notloggedin {width: 100%; padding: 20px; text-align: center; display: flex; justify-content: center}
.noWhiteSpace {white-space: nowrap}
.w50pro {width: 50%}
/* Tags */
form {}
h1 {text-transform:uppercase; font-family: 'Roboto', sans-serif; font-weight:bold; border-bottom: 2px solid #ccc; padding-bottom: 10px}
label, .labellike { display: block; width: 100%; color:#000; margin-bottom:10px;}
.bold label {font-weight:bold; font-size:1.2em}
.formularteil {display: flex; flex-wrap: wrap; margin-top: 20px}
.formularteil.evenodd {width:calc(100% - 25px)}
.formularteil.evenodd .zeile:nth-child(even) {background-color:#eee}
input, select, button, .custom-combobox-input {
	width: calc(100% - 10px);
	padding: 10px 5px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #cfcfcf;
	display:inline-block; float:left; margin-right:10px;
}

textarea.raw {
	width: calc(100%);
	padding: 20px 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #cfcfcf;
	display:inline-block; float:left; margin-right:10px;
}

button, .buttonstyle {width: calc(50% - 10px); margin-top:10px; background-color:#e8bd2f; text-transform:uppercase; font-family: 'Roboto', sans-serif; font-weight:bold; border:1px solid #e8bd2f; color:#FFF; cursor: pointer}
.buttonstyle {width: auto; min-width: 200px}
.button100pro {width: calc(100% - 10px)}
button a, a button {color: #fff; text-decoration: none; display: block; width: 100%; height: 100%}
input:focus, input:hover, select:focus, select:hover{
	outline:0;
	border:1px solid #95D2DF;
	-webkit-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
	-moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
	box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
}
input[type="checkbox"] {width: 20px}
button.buttonclick {width: calc(100% - 10px) !important}



.pdf_top {float: right; right: 0px; position: relative; top: -20px; width: 900px; text-align: right}

input:-moz-read-only, input:-moz-read-only:focus, input:-moz-read-only:hover {background-color:#eee !important; -webkit-box-shadow: none !important; -moz-box-shadow:none !important; box-shadow:none !important}
input:read-only, input:read-only:focus, input:read-only:hover {background-color:#eee !important; -webkit-box-shadow: none !important; -moz-box-shadow:none !important; box-shadow:none !important}
input.pflicht, select.pflicht {}
.custom-combobox {width: calc(100% - 25px); height: 40px}
.custom-combobox > .ui-widget.ui-widget-content {height:40px; border: 1px solid red}
a.ui-button, .ui-button {border: 1px solid red; border-left:0px; width: 20px; background-color: #ccc}	
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }	
.ui-state-default {background: #fff !important}




/* Uploader */

.imageUpload {border-bottom: 1px solid #cfcfcf; width: calc(100% - 25px);}
.ax-uploader {position:relative; top:0px; width: 200px; height: 50px}
.uploadfinished {display:none; font-weight:bold; width:100%; cursor: pointer; height: 40px; margin-top: 20px}
.uploadfinished .text {float:left}
.uploadfinished .ok {float:right}
.uploadfinished .ok img {width:28px; height:28px}

.ax-main-container .ax-main-buttons {margin: 0px !important}
.ax-file-list, .ax-toolbar, .ax-details {width:0px !important; height:0px !important; overflow:hidden; opacity:0}
.ax-main-container .ax-file-list .ax-file-wrapper .ax-prev-container {border: 0px !important; border-radius: 0px !important}
.ax-main-container .ax-file-list .ax-file-wrapper .ax-progress-data {left: 0px !important}
.ax-main-container .ax-file-list .ax-file-wrapper {
    position: relative;
    margin: 0px;
    float: left;
    height: 50px !important; overflow: hidden;
    width: 195px;
    border-color: white;
    background-color: #ffffff;
    border-radius: 0px;
}
.ax-file-list {width:auto !important; height:auto !important; opacity:1}
.ax-uploader .ax-mask {border:0px solid var(--green-color) !important; height:50px !important}
.ax-main-container {font-family: 'Roboto Slab', sans-serif;}
.ax-main-container .ax-main-buttons .ax-browse-c {display:block}
.ax-main-container .ax-file-list .ax-file-wrapper .ax-prev-container.ax-no-preview {background-image: url(""); width: 0px; height: 0px; border: 0px}

.brillenwertepass:hover .ax-main-container .ax-main-buttons .ax-browse-c {display:block}
.ax-main-container .ax-main-buttons .ax-browse-c {
    background-color: var(--green-color);
    background: -webkit-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -moz-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -ms-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -o-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    border: 1px solid #fff;
}
.ax-main-container .ax-main-buttons .ax-browse-c:hover {
    background-color: var(--green-color);
    background: -webkit-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -moz-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -ms-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: -o-linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    background: linear-gradient(var(--green-color), var(--green-color) 50%, var(--green-color));
    border: 1px solid #fff;
}
.ax-main-container .ax-button {text-shadow: none; display:block; }
.ax-main-container .ax-button {text-transform: none !important; font-weight: normal !important; font-family: 'Roboto Slab', sans-serif; text-shadow: none !important}