/** ALLGEMEIN **/

html,
body,
* {
  font-family: "PT Sans";
  font-weight: 400;
  color: #333333;
}

dl,
ol,
ul {
  margin-bottom: 0 !important;
  margin-top: 0;
}

#mainArea {
  min-height: 500px;
}

table th {
  background-color: rgba(21, 123, 178, 1);
  text-align: left;
}

.block {
  width: 100%;
  display: block;
}

.inlineBlock {
  width: 40%;
  display: inline-block;
}

.flex {
  display: flex;
  align-items: stretch;
}

.floatLeft {
  float: left;
  position: relative;
}

.floatRight {
  float: right;
  position: relative;
}

.geolabmv.fullWidth {
  width: 100%;
  margin: 0px;
}

.geolabmv.right {
  text-align: right;
  margin: 0px;
  padding: 0px;
}
.geolabmv.middle {
  text-align: center;
  padding-left: 50px;
}
.geolabmv.left {
  padding: 0px;
  text-align: left;
  float: left;
  margin: 10px;
}

.center {
  text-align: center !important;
}
.tableDisplay {
  display: table;
}
.noPadding {
  padding: 0px !important;
}
.vAlign {
  display: inline !important;
  vertical-align: super !important;
}
.blueFont {
  color: rgb(21, 123, 178) !important;
}
.centered {
  padding-top: 0px !important;
  text-align: center;
  padding: 2.5%;
}
a.noUnderline {
  text-decoration: none !important;
}
.describingText {
  font-size: 0.9em;
}

.hiddenDataElement {
  display: none;
}

.dvz-link-title {
  color: #3d3dff !important;
  padding-left: 10px;
}

#skiplinkDiv {
  text-align: center;
  display: inline-block;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  border-radius: 3px;
  top: 0px;
  width: 100%;
  height: auto;
  background-color: rgb(21, 123, 178);
}
a#skiplink {
  color: #ffffff !important;
  font-size: 0.8em;
}
.accessKey {
  text-decoration: underline;
  color: #ffffff !important;
  font-variant: bold;
}

#body {
  width: 100%;
  min-height: calc(100% - 155px);
  height: auto;
  color: #333333;
  margin: 0px;
  background-color: rgba(231, 247, 253, 1);
}

#body h1,
#body h2 {
  color: #333333;
}
#body h1 {
  font-size: 2.5em;
  font-weight: 700;
}
#body .blueBanner h1 {
  font-size: 4em;
  font-weight: 700;
}
#body h2 {
  font-size: 1.8em;
  font-weight: 400;
}

#body p {
  text-align: justify;
  font-size: 1em;
  font-weight: 200;
}

#body input,
#body textarea,
#body select {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(164, 164, 164, 1);
  border-radius: 6px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 10px;
}

#body input:hover,
#body textarea:hover {
  border-color: #333333;
}

.sonstiges {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  font-size: 1.1em;
  max-width: 1170px;
}

.blueBanner p,
.blueBanner h1,
.blueBanner h2 {
  color: #ffffff !important;
}

.blueBanner h2 {
  padding-bottom: 15px;
}

.blueBanner {
  width: 100%;
  background-color: rgba(40, 125, 168, 1);
}
.blueBanner .sonstiges {
  width: 78%;
}

.whiteBanner {
  width: 100%;
  background-color: #ffffff;
}

/** HEAD **/

header {
  line-height: initial;
}

div.geolabmv button.ui-button {
  border-radius: 0px !important;
}

#geolabhead {
  color: rgb(21, 123, 178);
  border-bottom: 1px solid lightgrey;
}
#geolabhead img,
#sucheHeader img {
  display: inline !important;
}

#geolabLogoDiv {
  height: 70px;
  line-height: 70px;
}
#geolabLogo {
  height: 67px;
  line-height: 67px;
}

#headMenu li,
#footMenu li {
  float: left;
  list-style: none;
  text-align: center;
  background-color: #ffffff;
  line-height: 80px;
  height: 80px;
  margin-right: 30px;
  width: 120px;
}

#headMenu li a,
#footMenu li a {
  text-decoration: none;
  color: #333333;
  display: block;
  font-size: 1.4em;
  height: 82px;
}

#headMenu li.smallerLi {
  font-size: 1em;
  width: 150px;
}

#headMenu li a:hover,
#headMenu li a:active,
#headMenu li a.active {
  text-decoration: none;
  color: rgb(21, 123, 178);
  background-color: #ffffff;
  border-bottom: 4px solid rgb(21, 123, 178);
}

.indexBoxButton {
  text-transform: uppercase;
  font-weight: bold;
}
.suchBoxButton,
.indexBoxButton {
  width: 90%;
  font-size: 1.1em;
}

.primary,
.secondary,
.toggleAufklappDiv {
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  font-size: 1em;
  padding: 15px;
  display: table-cell;
  position: relative;
}

.primary {
  background-color: rgba(21, 123, 178, 1);
}

.secondary {
  background-color: rgba(107, 107, 107, 1);
}

.secondary.smallSecondary {
  padding: 5px;
}

.primary:hover,
#sucheHeader:hover,
.primary:focus-visible,
#sucheHeader:focus-visible,
.toggleAufklappDiv:hover {
  cursor: pointer;
  background-color: rgba(32, 63, 90, 1) !important;
  color: #ffffff !important;
}
.primary.delete:hover {
  cursor: pointer;
  background-color: rgba(255, 0, 0, 1) !important;
  color: #ffffff !important;
}
.secondary:hover,
.secondary:focus-visible {
  cursor: pointer;
  background-color: rgba(67, 67, 67, 1) !important;
  color: #ffffff !important;
}
.primary:focus-visible,
.secondary:focus-visible,
#sucheHeader:focus-visible {
  border: 2px solid black;
}

button#startSearchForTasks {
  top: 6px;
  left: -2px;
  height: 50px;
}
input#searchForTasks {
  padding: 10px;
  font-size: 1.2em;
  border: 0px;
  border-bottom: 1px solid grey;
}
input#searchForTasks:focus-visible {
  border-bottom: 2px solid rgba(21, 123, 178, 1);
}
.empty {
  color: rgb(107, 107, 107);
}
.rightBorder {
  display: inline-block;
  padding: 0;
  height: 50px;
  margin: 10px;
}

#geolab_anmelden {
  padding: 5px;
}

#geolab_suche {
  position: relative;
  top: -15px;
}

/** FOOTER **/

#geolabfoot {
  border-top: 1px solid lightgrey;
  height: 60px;
}

.footerLink {
  height: 40px;
  padding: 10px;
  display: table-cell;
  text-align: center;
}

#footMenu {
  border-top: 1px solid lightgrey;
  background-color: #fafafa;
}

#footMenu a {
  text-decoration: none;
  color: #203f5a;
  font-size: 0.9em;
  line-height: 40px;
}
#footMenu a:hover {
  text-decoration: underline !important;
}

/*** GUIDED TOUR POPUP ***/

#playVideo {
  cursor: pointer;
}
.popover {
  max-width: 45vw !important;
  width: 40%;
  max-height: 45vw !important;
  height: 40%;
  overflow: auto;
}

.popover-navigation .btn {
  color: #ffffff;
  border: none;
  border-radius: 3px;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  background-color: rgba(21, 123, 178, 1);
  font-size: 1em;
  padding: 15px;
  display: table-cell;
  position: relative;
  cursor: pointer;
}
.popover-navigation .btn.primary:hover {
  cursor: pointer;
  background-color: rgba(32, 63, 90, 1) !important;
  color: #ffffff !important;
}
.popover-navigation .btn.secondary:hover {
  cursor: pointer;
  background-color: rgba(67, 67, 67, 1) !important;
  color: #ffffff !important;
}
.popover-navigation .btn.disabled {
  background-color: #ffffff;
  color: #2b2d2f !important;
  border: 1px solid #2b2d2f !important;
}
.popover[class*="tour-"] .popover-navigation [data-role="end"] {
  float: none !important;
}

#closeX {
  float: right;
}

.demoBildLink {
  width: 85%;
  display: inline;
}
.showVideo {
  cursor: pointer;
}
.tour {
  margin: 0 10px 0 10px !important;
  height: auto !important;
}
#guidedTourTable {
  border: 0px;
  margin-top: 0px;
}
#guidedTourTable td {
  width: auto;
}
#guidedTourTable .guidedTourVideo {
  background-color: rgba(231, 247, 253, 1);
  border: 0px;
  border-top: 1px solid grey;
  padding: 5px !important;
  width: 23%;
}
#guidedTourTable .dont {
  background-color: #ffffff;
  border: 0px;
  padding-left: 0 !important;
  border-top: 1px solid grey;
}
#guidedTourTable .buttons {
  vertical-align: bottom;
}

.popover[class*="tour-"].orphan {
  margin-top: 0;
  position: absolute;
}
#guidedTourTable .popover-navigation {
  padding-left: 0 !important;
}

/** UNTERSEITEN**/

/** INDEX **/

.flexboxIndex {
  display: grid;
  justify-content: space-between;
  grid-column-gap: 1em; /* horizontal gap between articles */
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "box11 box12 box13 box14"
    "box21 box22 box23 box24"
    "box31 box32 box33 box34"
    "box41 box42 box43 box44"
    "box51 box52 box53 box54";
}

/*.flexboxOverview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
}*/

.indexBox {
  text-align: center;
  display: contents;
}

.indexBoxFooter {
  padding: 10px;
  text-align: left;
}

.box1 {
  background-color: white;
  border-radius: 8px 8px 0 0;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: lightgrey;
  padding-bottom: 1.5em;
}
.box2,
.box3,
.box4 {
  background-color: white;
  border-radius: 0;
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: lightgrey;
}
.box5 {
  background-color: white;
  border-radius: 0 0 8px 8px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: lightgrey;
}

.box1,
.box2,
.box3 {
  padding-bottom: 1.5em;
}
.box3 img,
.suchBox img {
  margin: 0 auto;
}
.box4 {
  padding-bottom: 0.5em;
}

.indexBox:nth-child(1) .box1 {
  grid-area: box11;
}
.indexBox:nth-child(2) .box1 {
  grid-area: box12;
}
.indexBox:nth-child(3) .box1 {
  grid-area: box13;
}
.indexBox:nth-child(4) .box1 {
  grid-area: box14;
}
.indexBox:nth-child(1) .box2 {
  grid-area: box21;
}
.indexBox:nth-child(2) .box2 {
  grid-area: box22;
}
.indexBox:nth-child(3) .box2 {
  grid-area: box23;
}
.indexBox:nth-child(4) .box2 {
  grid-area: box24;
}
.indexBox:nth-child(1) .box3 {
  grid-area: box31;
}
.indexBox:nth-child(2) .box3 {
  grid-area: box32;
}
.indexBox:nth-child(3) .box3 {
  grid-area: box33;
}
.indexBox:nth-child(4) .box3 {
  grid-area: box34;
}
.indexBox:nth-child(1) .box4 {
  grid-area: box41;
}
.indexBox:nth-child(2) .box4 {
  grid-area: box42;
}
.indexBox:nth-child(3) .box4 {
  grid-area: box43;
}
.indexBox:nth-child(4) .box4 {
  grid-area: box44;
}
.indexBox:nth-child(1) .box5 {
  grid-area: box51;
}
.indexBox:nth-child(2) .box5 {
  grid-area: box52;
}
.indexBox:nth-child(3) .box5 {
  grid-area: box53;
}
.indexBox:nth-child(4) .box5 {
  grid-area: box54;
}
img.img {
  width: 280px;
}
img.icon {
  width: 20px;
  display: inline-block;
}
img.iconAufgabe {
  margin: 0 auto;
  height: 40px;
}
img.loginIcon {
  height: 31px;
}

.indexBox a {
  color: rgba(21, 123, 178, 1);
  padding: 10px;
  font-size: 1em;
}
.indexBox h2,
.kartenBox h2 {
  padding-top: 20px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  font-size: 1.7em !important;
}
.indexBox p.link {
  font-size: 0.9em !important;
  margin-left: 10px;
  margin-right: 10px;
}

#jaBox {
  border-radius: 5px 0 0 5px;
}
#neinBox {
  border-radius: 0 5px 5px 0;
}
.selectBox {
  border: 1px solid rgb(21, 123, 178);
  width: 50px;
  text-align: center;
  color: rgb(21, 123, 178);
  padding: 3px;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
}
.selectBox:hover,
.selectBox:focus-visible {
  background-color: rgba(32, 63, 90, 1) !important;
  color: #ffffff !important;
  border-color: rgba(32, 63, 90, 1) !important;
}
#feedbackForm {
  display: none;
}
#feedbackForm textarea {
  width: 100%;
  height: 15vh;
  margin-top: 10px;
  margin-bottom: 10px;
}
#feedbackFormular textarea {
  width: 50%;
  height: 15vh;
  margin-top: 10px;
  margin-bottom: 10px;
}
#feedbackFormular input[type="text"] {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 10px;
}
#email_konfirm {
  display: none;
}

/** KARTEN **/

.flexboxKarten {
  display: grid;
  justify-content: space-between;
  grid-column-gap: 1em; /* horizontal gap between articles */
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "box11 box12"
    "box21 box22"
    "box31 box32"
    "box41 box42"
    "box51 box52";
}

.kartenBox {
  text-align: center;
  display: contents;
}

.kartenBox:nth-child(1) .box1 {
  grid-area: box11;
}
.kartenBox:nth-child(2) .box1 {
  grid-area: box12;
}
.kartenBox:nth-child(1) .box2 {
  grid-area: box21;
}
.kartenBox:nth-child(2) .box2 {
  grid-area: box22;
}
.kartenBox:nth-child(1) .box3 {
  grid-area: box31;
}
.kartenBox:nth-child(2) .box3 {
  grid-area: box32;
}
.kartenBox:nth-child(1) .box4 {
  grid-area: box41;
}
.kartenBox:nth-child(2) .box4 {
  grid-area: box42;
}
.kartenBox:nth-child(1) .box5 {
  grid-area: box51;
}
.kartenBox:nth-child(2) .box5 {
  grid-area: box52;
}

/** SUCHFILTER **/

.oneCol {
  width: calc(100%- 30px);
}
.twoCol {
  width: calc(50% - 30px);
}
.threeCol {
  width: calc(33.3% - 30px);
}
.fourCol {
  width: calc(25% - 30px);
}
.fiveCol {
  width: calc(20% - 30px);
}

input[type="checkbox"],
input[type="radio"] {
  border-color: lightgrey;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}

#body .filterBox legend {
  padding-bottom: 0.5em;
  font-size: 1.3em;
  font-weight: 400;
}

.filterBox {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  margin: auto;
}

.filterBox label {
  display: inline-block;
  line-height: 1.2;
}

#sucheHeader {
  width: 100%;
  border-radius: 8px;
  background-color: rgba(21, 123, 178, 1);
  color: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.247058823529412);
  padding: 10px;
  margin-bottom: 10px;
}
#sucheHeader h1 {
  font-size: 1.8em;
  color: #ffffff;
  display: inline;
}

#sucheIcon {
  float: right;
  display: inline;
  padding: 5px;
}
#sucheIcon.open:before {
  content: url(images/open.png);
}
#sucheIcon.closed:before {
  content: url(images/closed.png);
}

#wandkartenSuchfilter {
  border-bottom: 1px solid lightgrey;
  padding-bottom: 15px;
}

/** SUCHERGEBNISSE **/

#sucheBody,
#feedbackQ {
  padding-top: 15px;
  padding-bottom: 3px;
}

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: auto;
}

.flexbox > .four {
  /*
    1/3  - 3 columns per row
    margin 10px - spacing between columns (top right)
  */
  box-sizing: border-box;
  margin: 0 15px 15px 0;
  width: calc(1 / 4 * 100% - (1 - 1 / 4) * 15px);
  padding: 10px;
  color: #fff;
}
/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > .four:nth-child(4n) {
  margin-right: 0;
}
/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > .four:nth-child(-n + 4) {
  margin-top: 0;
}
.flexbox > .three {
  /*
    1/3  - 3 columns per row
    margin 10px - spacing between columns (top right)
  */
  box-sizing: border-box;
  margin: 15px 15px 0 0;
  width: calc(1 / 3 * 100% - (1 - 1 / 3) * 15px);
  padding: 10px;
  color: #fff;
}
/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > .three:nth-child(3n) {
  margin-right: 0;
}
/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > .three:nth-child(-n + 3) {
  margin-top: 0;
}

.flexbox::after {
  content: "";
  flex: auto;
}

.suchBox {
  text-align: center;
  background-color: white;
  color: #333333;
  border-radius: 8px;
  border: 1px solid lightgrey;
}
.suchBox .header {
  width: 100%;
  border-radius: 8px 8px 0 0;
}
#body .suchBox .header p {
  text-align: center;
  font-size: 0.9em;
  padding: 10px;
}
.suchBox .header p,
.suchBox .header h6,
.suchBox .header h5 {
  color: #ffffff;
  margin: 0px;
  padding: 0px;
}
.suchBox .header h6 {
  font-size: 0.9em;
  font-weight: bold;
}
.suchBox .header h5 {
  font-size: 1.1em;
  font-weight: bold;
}
#body .suchBox h3 {
  font-weight: bold;
  color: #333333;
}
#body .suchBox span.boldDetails {
  font-size: 1em;
  font-weight: bold;
  display: block;
}
#body .suchBox span.boldTitle {
  font-size: 1.1em;
  font-weight: bold;
  display: block;
  padding-bottom: 0.1em;
}
.black {
  color: #333333;
}
.white {
  color: #ffffff;
}
.suchBox .header .headerContent {
  margin: 0px;
  padding: 10px;
  border-radius: 8px 8px 0 0;
}
#body .suchBox .bodyContent p {
  font-size: 0.9em;
  color: #333333;
}

.suchBoxFooter .right {
  padding: 10px 15px 5px 0;
  text-align: right;
  float: right;
  margin: 0px;
  font-size: 0.9em;
}
.suchBoxFooter .right .time {
  display: inline;
  vertical-align: super;
}
.suchBoxFooter .middle {
  text-align: center !important;
  clear: both;
}
.suchBoxFooter .left {
  padding: 10px 0 5px 15px;
  font-size: 0.9em;
  text-align: left;
  float: left;
  margin: 0px;
}

.suchBoxFooter img {
  display: inline !important;
  border: 0px;
  margin: 2px;
}

.bodyContent {
  text-align: center;
  padding: 10px 10px 0 10px;
}
.bodyContent p {
  font-size: 0.9em;
  text-align: center !important;
}
/** KARTEN **/

/** EINZELAUFGABE **/

div.aufgabe {
  position: absolute;
  right: 0px;
  width: 25%;
  background-color: white;
  border-radius: 8px;
  border: 1px solid lightgrey;
  height: calc(100% + 4px);
}

#aufgabenHeader {
  background-color: rgba(255, 153, 0, 1);
  margin: 0px;
  padding: 10px;
  border-radius: 8px 8px 0 0;
  color: #ffffff;
}
#aufgabenHeader h2,
#aufgabenHeader h3 {
  color: #ffffff;
  padding: 0px;
  margin-bottom: 0;
}
#aufgabenHeader h2 {
  font-size: 1.5em;
  font-weight: 700;
}
#aufgabenHeader h3 {
  font-size: 1.1em;
  font-weight: 400;
}

.aufgabenDiv {
  color: #333333;
  height: 100%;
  overflow: auto;
  padding: 10px 20px;
}
.aufgabenDiv p {
  color: #333333;
}

.aufgabenDiv p.werkzeuge,
#bearbeitenDiv p.werkzeuge {
  padding-top: 5px;
}

.aufgabenDiv h3 {
  padding: 10px 0 0 0;
  margin-bottom: 5px;
  color: #333333;
}
.aufgabenDiv h5,
#bearbeitenDiv h5 {
  font-size: 1em;
  font-weight: bold;
  color: #333333;
}

.aufgabenDiv ol {
  padding-left: 25px;
  color: #333333;
}
.aufgabenDiv input[type="text"],
.aufgabenDiv textarea {
  width: 100%;
  font-size: 1em;
  margin-top: 10px;
}

.aufgabenDiv textarea {
  height: 20vh;
}

.aufgabenDiv input[type="checkbox"] ~ label,
#bearbeitenDiv input[type="checkbox"] ~ label,
.aufgabenDiv input[type="radio"] ~ label,
#bearbeitenDiv input[type="radio"] ~ label {
  display: inline !important;
}

.aufgabenDiv label {
  margin-top: 10px;
}

.aufgabenBeschreibung {
  margin-bottom: 10px;
}

#aufgabenFooter {
  height: 50px;
  padding: 10px 0 0 0;
  width: 95% !important;
}

.aufgabe button {
  text-align: -moz-center;
  width: 100%;
}

.aufgabenTeilschrittInputs label,
#aufgabenSenden label {
  cursor: pointer;
  display: block !important;
}

p.divider {
  border-bottom: 1px solid lightgrey;
  padding: 10px 0 10px 0;
}

#endAufgabe {
  margin-bottom: 20px;
}
#endAufgabe::before {
  font-family: "Font Awesome\ 5 Free Solid" !important;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  right: 10px;
  font-size: 1em;
  color: #ffffff;
  content: "\f061";
}
#backAufgabe::before {
  font-family: "Font Awesome\ 5 Free Solid" !important;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 10px;
  font-size: 1em;
  color: #ffffff;
  content: "\f060";
}

#aufgabenSenden,
.aufklappDiv,
#deleteFileFromUpload {
  display: none;
}

.aufklappDiv {
  background-color: #e4f2fa;
  text-align: center;
  margin-top: 0px;
  padding: 10px;
}
.aufklappDiv p {
  text-align: center !important;
  margin-bottom: 10px;
}

.toggleAufklappDiv {
  text-align: left !important;
  text-indent: 35%;
  margin-top: 20px;
}
.toggleAufklappDiv::before {
  font-family: "Font Awesome\ 5 Free Solid" !important;
  font-size: 1em;
  color: #ffffff;
  margin-right: 5px;
}

.toggleAufklappDiv:not(.disabled)::after {
  font-family: "Font Awesome\ 5 Free Solid" !important;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  right: 20px;
  font-size: 1em;
  color: #ffffff;
  content: "\f078";
}

#aufgabeSpeichernButton {
  background-color: rgba(21, 123, 178, 1);
}
#aufgabeSpeichernButton::before {
  content: "\f0c7";
}

#aufgabeDruckenButton {
  background-color: rgba(53, 182, 180, 1);
}
#aufgabeDruckenButton::before {
  content: "\f02f";
}

#aufgabeTeilenButton {
  background-color: rgba(255, 153, 0, 1);
}
#aufgabeTeilenButton::before {
  content: "\f1e0";
}

#aufgabeItslearningButton {
  background-color: rgba(68, 64, 89, 1);
}

.aufgabenDiv button.disabled {
  background-color: rgba(107, 107, 107, 1) !important;
}

.aufklappDivButton {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.247058823529412);
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 3px;
  font-size: 1em;
  color: #333333;
  padding: 15px;
}

/* class applies to select element itself, not a wrapper element */
.select-css {
  display: block;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 10px 0 10px 0;
  border: 0;
  border-radius: 3px;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(107, 107, 107, 1);
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #6b6b6b 0%, #6b6b6b 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position:
    right 0.7em top 50%,
    0 0;
  /* icon size, then gradient */
  background-size:
    0.65em auto,
    100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}
/* Hover style */
.select-css:hover {
  border-color: #333333;
  cursor: pointer;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #333333 0%, #333333 100%);
}
/* focus-visible style */
.select-css:focus-visible {
  border-color: #333333;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #333333 0%, #333333 100%);
  /* It'd be nice to use -webkit-focus-visible-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focus-visiblering;
  color: #ffffff;
  outline: none;
}

option {
  background-color: #ffffff;
  color: #333333;
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
  font-size: 16px;
  font-family: sans-serif;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
  background-position:
    left 0.7em top 50%,
    0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

/* Disabled styles */
.select-css:disabled,
.select-css[aria-disabled="true"] {
  color: graytext;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.select-css:disabled:hover,
.select-css[aria-disabled="true"] {
  border-color: #aaa;
}

/* DARK MODE SELECT */
@media (prefers-color-scheme: dark) {
  /* CSS Code wenn Dark Mode aktiv */
  .select-css {
    color: #000000;
    background-color: #ffffff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
	for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
      linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
  }
  /* Hover style */
  .select-css:hover {
    border-color: #000000;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
	for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
      linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
  }
  /* focus-visible style */
  .select-css:focus-visible {
    border-color: #000000;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
	for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference*/
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
      linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
    color: #000000;
  }
}

/* CHECKBOXES */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container.small {
  font-size: 1em !important;
}

/* Hide the browser's default checkbox */
.filterBox input,
.customCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ffffff;
  border: 1px solid #333333;
  border-radius: 3px;
}

.filterBox input:focus-visible + label.container .checkmark,
.customCheckbox input:focus-visible + label.container .checkmark {
  border: 2px solid black;
}

/* On mouse-over, add a grey background color */
.container:hover .checkmark,
.filterBox input:focus-visible + label.container .checkmark,
.customCheckbox input:focus-visible + label.container .checkmark {
  background-color: #666666;
}
.container:hover .checkmark:after,
.filterBox input:focus-visible + label.container .checkmark:after,
.customCheckbox input:focus-visible + label.container .checkmark:after {
  display: block;
}

/* When the checkbox is checked, add a blue background */
.filterBox input:checked + label.container .checkmark,
.customCheckbox input:checked + label.container .checkmark {
  background-color: rgba(21, 123, 178, 1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.filterBox input:checked + label.container .checkmark:after,
.customCheckbox input:checked + label.container .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.filterBox .checkmark:after,
.customCheckbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* KARTE */

iframe#gaiamapFrame,
iframe#gaiamapFrameSmall {
  top: -4px;
  position: relative;
  left: 0px;
}

/* SONSTIGES anpassungen / Überschreiben des coporate designs */

.dvz-contenttype-pagetitle h1 {
  font-size: 2em !important;
}
.dvz-contenttype-paragraph h2 {
  font-size: 1.4em !important;
  margin-top: 20px;
}
.dvz-contenttype-paragraph h3 {
  font-size: 1.2em !important;
  color: #333333 !important;
  margin-top: 15px;
  font-weight: 400 !important;
}
.dvz-contenttype-paragraph h4 {
  font-size: 1.1em !important;
  color: #333333 !important;
  margin-top: 15px;
  font-weight: 400 !important;
}
.dvz-contenttype-paragraph p {
  color: #333333;
}
.dvz-contenttype-paragraph a {
  color: #3d3dff;
  text-decoration: underline !important;
}

/** Wandkartenverwaltung **/

#layerOverview,
#bgOverview {
  display: none;
}

.choose {
  margin-right: 10px;
}
.chooseSelected {
  background-color: rgba(40, 125, 168, 1) !important;
}

#onlyWMTS {
  display: none;
}

/** Verwaltung allgemein **/

#verwaltungBody .header {
  background-color: rgba(40, 125, 168, 1);
  color: #ffffff;
}

#verwaltungBody .verwaltungTitel {
  margin-top: 0px;
  word-break: break-all;
}

.dataTable .tdtitle {
  width: 30%;
  word-break: break-word;
}
.dataTable .tddesc {
  width: 30%;
  word-break: break-word;
}
.dataTable .tdclass {
  width: 15%;
  word-break: break-word;
}
.dataTable .tdedit {
  width: 15%;
}

/* Form/Bearbeitung */

a.linkbutton::before {
  content: "\e603";
  font-size: 0.667em;
  margin-top: -0.5em;
  position: absolute;
  right: 20px;
  top: 50%;
}

a.linkbutton {
  text-align: center;
  background: #e7f7fd none repeat scroll 0 0;
  color: #203f5a;
  font-size: 1.125em;
  font-weight: 600;
  margin-top: 10px;
  padding: 5px;
  position: relative;
  width: 100%;
  padding: 5px;
  display: inline-block;
  margin: 0px;
}
a.linkbutton:hover {
  background-color: #203f5a;
  color: #ffffff;
  text-decoration: none;
}

div.inputline {
  width: 100%;
  padding-top: 5px;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

div.inputline label {
  width: 25%;
}

#bearbeitenDiv input[type="text"],
#bearbeitenDiv select {
  width: 95%;
  font-size: 1em;
  padding: 5px;
}
#bearbeitenDiv textarea {
  width: 95%;
  font-size: 1em;
  padding: 5px;
}

#bearbeitenDiv input[type="text"].dateNumber {
  width: 60%;
}
#bearbeitenDiv input[type="text"].sortNumber {
  width: 5%;
}
input.rightAlign {
  text-align: right;
}
#bearbeitenDiv .bigText {
  width: 85%;
}
#bearbeitenDiv .alleSchritttexte input {
  width: 100%;
}

input.newInputField {
  margin-bottom: 5px;
}

#bearbeitenDiv td:first-child {
  padding-left: 7px !important;
}

.inputDesc {
  width: 20%;
  display: inline-block;
}

th.sortNumber,
td.sortNumber {
  width: 15%;
}

div.inputline div {
  width: 70%;
}

p.editCheckbox {
  display: block;
  width: 70%;
}

#bearbeitenDiv ol {
  padding-left: 20px;
  color: #333333;
  margin-top: 10px;
  margin-bottom: 10px;
}

#bearbeitenDiv button.primary.smallPrimary {
  margin-top: 10px;
  padding: 10px;
}

#bearbeitenDiv h1,
#bearbeitenDiv h2,
#bearbeitenDiv h3,
#bearbeitenDiv h4,
#bearbeitenDiv h5,
#bearbeitenDiv h6,
#bearbeitenDiv h7,
#listenDiv h1,
#listenDiv h2,
#listenDiv h3,
#listenDiv h4,
#listenDiv h5,
#listenDiv h6,
#listenDiv h7 {
  margin-top: 20px;
  width: 100%;
  color: #333333;
}

#bearbeitenDiv h4,
#listenDiv h4 {
  font-size: 1.2em;
  text-transform: none;
  font-weight: 400;
  border-bottom: 0px;
  padding-bottom: 7px;
  position: relative;
}

#bearbeitenDiv h3,
#listenDiv h3 {
  font-weight: 500;
  border-bottom: 2px solid #333333;
  padding-bottom: 7px;
  font-size: 1.3em;
}

#bearbeitenDiv h2,
#listenDiv h2 {
  border-bottom: 3px solid #333333;
  font-size: 1.6em;
  line-height: 1em;
  padding-bottom: 7px;
  position: relative;
  font-weight: 600;
}

/* jquery dialog */

.ui-dialog {
  max-width: 75% !important;
  max-height: 75% !important;
  z-index: 999999999 !important;
}
.ui-dialog .ui-dialog-content {
  max-height: 60%;
}

.ui-dialog-titlebar,
.ui-button {
  background-color: rgba(21, 123, 178, 1);
  color: #ffffff !important;
  font-size: 1.4em;
}

.ui-dialog-titlebar {
  padding: 0.4em 1em 0.4em 1em;
}

.ui-dialog-title {
  color: #ffffff;
}

.ui-button-icon-only::before {
  text-indent: 0px;
  font-size: 0.5em !important;
  color: #333333 !important;
  background-color: #ffffff !important;
}

.ui-dialog dt {
  margin-top: 10px;
  font-weight: bold;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 0.3em;
  width: 20px;
  margin: 0;
  padding: 1px;
  height: 20px;
}

#dialog {
  width: 25vw;
  padding: 10px;
}
#dialog input[type="text"],
#dialogLink input[type="text"] {
  width: 100%;
  font-size: 1.2em;
  padding: 5px;
}

#nofilterresult {
    flex-grow: 1;
    text-align: center;
}