/*
@font-face {
  font-family: 'OpenSans';
  src: url('/static/fonts/OpenSans/OpenSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url('/static/fonts/OpenSans/OpenSans-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
*/


p {
    margin:5px 0;
}
h1, h2, h3 {
    margin:10px 0px;
    font-size:1.1em;
}

h1 {
    margin:20px 0px 10px 0px;
    font-size:1.2em;
    font-weight:bold;
}
h2 {
    color: #444;
    font-size:1.1em;
    font-weight:bold;
}
h3 {
    font-size:1.0em;
    font-style: italic;
}

blockquote {
    margin-left:30px;
}

#popup {
    position:fixed;
    top:5%;
    left:5%;
    width:90%;
    height:90%;
    background-color:yellow;
}
#popup_karte {
   position: fixed;
    display: none;
    top: 0px;
    left: 0%;
    width: 100%;
    max-width: 360px;
    height: 100%;
    z-index: 10000;
    background-color:#f5f5f5;
    overflow: auto;
    border: 1px solid #ddd;
}


html, body {
    padding:0;
    margin:0;
    background-color:#f5f5f5;
    height:100%;
}

body{
    position:relative;
    background-color:#f5f5f5;
    font-family: 'Optima', sans-serif;
    height:100%;
}

a {
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

a:hover {
    color:inherit;
}
#popupbar {
    width:360px;
    position:fixed;
    top:0px;
    padding:15px 0 0 20px;
    border-right:1px solid #fff;
}

#statusbar, #marginaliabar, #popupbar {
    height:59px;
    z-index:100;
    background-color:#4b5a7e;
    color:white;
}

.statusflaeche, .statushoin {
    flex:0 0 48%;
    margin:1%;
    width:30%;
    cursor:pointer;
}

.statusflaeche {
    min-height:60px;
    border:1px solid #fff;
}

.statuseintrag {
    display:block;
    background-color:#f5f5f5;
    border-style: solid;
    border-color: #ddd;
    border-width:0 0 0 0;
    margin-bottom:1px;
    cursor:pointer;
    padding: 1px;
    text-align:center;
}

#logo {
    float:left;
    height:40px;
}

#marginalia {
    flex: 0 0 200px;
    background-color:#eee;s
}


.iconsidebar {
  position: absolute;
  transition: opacity 0.3s ease;
}

.iconsidebar.hidden {
  opacity: 0;
  pointer-events: none;
}

#head {
    display:flex;
    flex-direction:row;
    height:60px;
    background-color: #4b5a7e;
    z-index:100;
    border-bottom:1px solid #ccc;
    width:100%;
}

#headcontent {
    flex:1 1 100px;

    margin:0 auto;
    display:flex;
    flex-direction:row;
    height:59px;
    color:#000;
}

/*#main {
    margin:0 auto;
    background-color:#fff;
    border-left:1px solid #eee;
    border-right:1px solid #eee;

}*/

#optionenbox {
    left:10px;
}

#iconsidebar {
    display:none;
}

.main {
    background-color:#fff;
    min-height:100%;
}

#sidebar.offcanvas,
#sidebar .offcanvas-body {
  padding: 0 !important;
}
.offcanvas-backdrop {
  display: none !important;
}

@media (min-width: 1400px) {
  .sidebar-xxl-fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px !important;
    z-index: 1050;
    background-color: #fff;
    padding: 0;
    overflow-y: auto;
  }

  /* Cancel Bootstrap's offcanvas behavior at XL and above */
  .sidebar-xxl-fixed.offcanvas {
    transform: none !important;
    visibility: visible !important;
  }
  .sidebar-xxl-fixed.offcanvas.start {
      transform: none !important;
  }
  .sidebar-xxl-fixed .offcanvas-body {
    padding: 0;
    }

  main.main-xxl-offset {
    margin-left: 300px !important;
  }

  #buttonToggle {
    display: none;
  }

  #optionenbox {
    left:310px;
  }
}

#foot, #dsgvo {

    background-color:#666;
    color:#fff;
    padding:10px;
}
#foot{
    padding:10px 10px 20px 10px;
}

.item {
    margin:0px 5px 5px 0px;
    padding:2px 5px;
    background-color:#f9f9f9;
    border:1px solid #eee;
    border-radius:3px;
}

#dsgvo {
    position:fixed;
    bottom:0px;
    width:100%;
}

#footcontent, #dsgvocontent {
    flex:0 1 1200px;
    margin:0 auto;
    color:#fff;
}

.block {
    background-color:#eee;
    border-radius:3px;

}

.link, .linkbutton {
    color:#1e4c94;

}
.linkbutton {
    display:inline-block;
    padding: 5px 10px;
    background-color:#ddd;
    border:1px solid #c7c7c7;
    border-radius:3px;
    margin:2px;
    font-size:0.9em;
    max-length:250px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


.label {
    font-size:0.9em;
    color:#666;
}

.bildartikel {
    display:block;
    float:right;
    margin:0 0 5px 5px;
    width: 40%;
}

.karte_menubar {
    position:fixed;
    text-align:center;
    top:60px;
    left:0;
    width:100%;
    height:30px;
    color:white;

}

.karte_menuitem {
    display:inline-block;
    padding:10px 5px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    margin-left:-1px;
    min-width:60px;
}

@media only screen and (max-width: 800px) {
  .bildartikel {
    width: 50%;
  }
}

@media only screen and (max-width: 500px) {
  .bildartikel {
    width: 100%;
  }
}

.rowborder {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: -1px;

}


.favorit {
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    margin-bottom:-1px;
    padding:2px 0;
}


.marker, .markernumber {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      margin: 0px;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);

    }

.markernumber {
      width: 25px;
      height: 25px;
    }


.marker .icon {
      position: absolute;
      top: 19px;
      left: 7px;
      transform: rotate(45deg) translate(-50%, -50%);
    font-size: 16px;
}
 .markernumber .icon {
      position: absolute;
      top: 17px;
      left:3px;
      width:25px;
      text-align:center;
      transform: rotate(45deg) translate(-50%, -50%);
    font-size: 14px;
}

.zahlring {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    padding-top: 24px;

    background: #fff;
    border: 7px solid red;
    color: #000;
    text-align: center;

    font: 22px Arial, sans-serif;
}
.zahlleiste {
    postion:relative;
    width: 12px;
    height: 100px;
    background: #fff;
    border: 2px solid #aaa;
}

.thermometer{
    display:block;
    position:absolute;
    left:0px;
    top:0px;
    width:15px;
    height:35px;
    background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #db3f02 50%, #db3f02 100%);
    border-radius:22px 22px 0 0;
    border:3px solid #4a1c03;
    border-bottom:none;
    box-shadow:inset 0 0 0 1px #fff;
    color:#4a1c03;

}

/* Thermometer Bulb */
.thermometer:before{
    content:' ';
    width:20px;
    height:20px;
    display:block;
    position:absolute;
    top:28px;
    left:-5px;
    z-index:-1; /* Place the bulb under the column */
    background:#db3f02;
    border-radius:32px;
    border:3px solid #4a1c03;
    box-shadow:inset 0 0 0 1px #fff;
}

/* This piece here connects the column with the bulb */
.thermometer:after{
    content:' ';
    width:7px;
    height:7px;
    display:block;
    position:absolute;
    top:28px;
    left:1px;
    background:#db3f02;
}

/* ------------------------------------------------------------ */

.catcolor {
    display:inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius:2px;
}

/* ------------------------------------------------------------ */
.numinp {
	color:#000;
}

/* -- background ---------------------------- */


.numinp_1,.numinp_2,.numsend {
	background-color:#fff;
}


.numinp {
	background-color:#f1f1f1;
}

.numinp_2 {
	background-color:#ddd;
}

.numinp_1, .numinp_2, .numsend {
 	display:block;
 	padding:5px;
 	text-align:center;
 	font-size:14px;
 	width:45px;
 }

 .numinp_2 {
     background-color:#eee;
 }


 /* carousel */

.scrollcontainer {
  position: relative;
  overflow: hidden;
}

.scrollbuttonleft, .scrollbuttonright {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border:1px solid #000;
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.scrollbuttonleft {
  left: 10px;
}
.scrollbuttonright {
  right: 10px;
}

.scrollbuttonleft:hover,.scrollbuttonright:hover {
  opacity: 1;
}

.scrollcontent::-webkit-scrollbar {
  display: none;
}