/* Allgemein */
div.sideWrapper{position: sticky;top:7em;display: flex;} /* align-items: center;padding-left:0; padding-right: 0; */ 
div.mapWrapper{height: 100%;top: 1em;}
.leaflet-top, .leaflet-bottom{z-index: 400 !important;}
.fas.fa-backspace {padding-right: 1em;}
div.routeToAdress{background: #f8f9fa;padding: .5em;border-radius: .5em;cursor: pointer;}

/* Bilder und Carousel */
.carousel {background: #FFF;}
.carousel-image {
  display: block;
  object-fit: cover;
  height: 300px;
  min-width: 150px; /* set min-width, allow images to set cell width */
  max-width: 100%;
  margin-right: 50px;
  top: 50%; /* vertically center */
  transform: translateY(-50%)
}
.carousel.is-fullscreen .carousel-image {height: auto;max-height: 100%;}
.fa.fa-circle{ animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  }
@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}
/* runde buttons */
.interaction {border: 1px solid teal;width: 60px;height: 60px;border-radius: 50%;margin: 1.5em;text-align: center;}
.interaction:hover {background-color: teal; color:white; cursor: pointer;}
.clickable_obj {color: teal;}
.clickable_obj:hover {color: white;}
.aligner {display: flex;align-items: center;justify-content: center;height: 100%;text-align: center;}
.btndescription{text-transform: uppercase;display: inline-block;color: teal; font-size:13px;}

/* iPhone 11 */
@media only screen and (device-width: 414px) and (device-height:896px) {
  div#showRatingFullscreen{bottom: 20px;} /* da brauchen wir mehr abstand für den Bewerten Button */
}

/* Rechte Seite */
.interactPxProfil {display:block;border: 1px solid;color: teal;padding: 10px 15px;margin-bottom:.5em;cursor:pointer;border-radius: 5px;}
.interactPxProfil:hover {border: 1px solid teal;background: teal;color: white !important;text-decoration: none;}
.shareButton{display: block;text-align: center;color: white;padding: 10px 15px;margin-bottom: 1em;border-radius: .25em;cursor:pointer;}
.shareButton:hover{text-decoration: none;color:white;}
.highlightLink{border: 1px solid teal;background: teal;color: white;padding: 10px 15px;margin-bottom:.5em;cursor:pointer;border-radius: 5px;}
.btnListEl{display: inline-flex;color: teal;margin-right:.5em;}
.buttonList{list-style-type: none;padding-left: 0;margin: 0;}
.highlightLink:hover{text-decoration: none;color: white;}
div.card.profil{width:100%;}
div.card.profil:hover{box-shadow: 0 0 10px rgba(0,0,0,.1);cursor:pointer;transition: box-shadow .3s;}
.card-body {font-weight: 300;font-size: 1.1em;}
ul.zulList {font-size: 15px;list-style-type: none;padding-left: 0;margin: 0;}
li.zulListEl {display: inline-flex;color: teal;padding: 5px;margin: 2px 5px;border: 1px solid teal;font-weight: 500;border-radius: 15px;background: #e4efef;}
.empty-stars:before, .full-stars:before{font-size: 2.5em;} /* eigene sterne */
text#modalLinkText{color: #007bff;}
text#modalLinkText:hover{color: #0056b3;text-decoration: underline}
/* modal style */
div.inlineLogin {cursor: pointer;border: 1px solid teal;text-align: center;color: white;background: teal;padding: 5px;line-height: 50px;border-radius: 2px;}

td{font-size: 16px;} /* tabelle */
th{font-weight: 500;font-size: 0.9em;}
.list-group-item.active{background-color: teal;border-color: teal;}
div#scrollDiv::-webkit-scrollbar{display: none;}
div#scrollDiv:hover::-webkit-scrollbar {display: inline;width: 5px;background-color: #F5F5F5;}
div#scrollDiv:hover::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #e4e2e2;border-radius:5px;}
div#scrollDiv:hover::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
div.ol-attribution.ol-unselectable.ol-control.ol-uncollapsible{display:none}

div#showRatingFullscreen {opacity: 1;position: fixed;bottom: 0px;background: teal;border-top: 1px solid lightgray;padding: 1em;width: 100%;z-index: 5000;display: none;}
.overall_rating_comment{border-radius: .2em;align-items: center;float: left;display: flex;-webkit-box-pack: left;justify-content: center;font-weight: bold;font-size: 14px;height: 30px;width: 30px;background-color: rgb(190, 234, 15);color: white;}
.overall_rating{-webkit-box-align: center;align-items: center;display: flex;-webkit-box-pack: center;justify-content: center;font-weight: bold;font-size: 34px;height: 112px;width: 115px;border-radius: .2em;box-shadow: 0px 5px 11px 1px lightgrey;color:white;}
.overall_rating.category{align-items: center;float: left;display: flex;-webkit-box-pack: left;justify-content: center;font-weight: bold;font-size: 11px;height: 25px;width: 25px;border-radius: .2em;box-shadow: 0px 5px 11px 1px lightgrey;color: white;}
.raitingBeschreibung{font-size:12px;margin-left:10px;}
/* span#avgratingCard{float: right;} */

div.editButton{border: 1px solid teal;color: teal;padding: 10px;margin: 10px;cursor: pointer;border-radius: 5px;text-align: center;}
div.editButton:hover{background: teal;color: white;}
div.editButton:hover>i.fas.fa-pencil-alt{color:white;}
div.editButton>a{color:teal;text-decoration: none;}
div.editButton:hover>a{color:white;}

span.or{color: grey;position: absolute;left: 50%;writing-mode: vertical-rl;text-orientation: upright;top: 25%;text-align: center;}
.badge.badge-light {background-color: teal;color: white;}
.blink {animation: blinker 2.0s cubic-bezier(.5, 0, 1, 1) infinite alternate;}

nav#history{margin-top: 15px;}

.card-profil{height:100%; width:100%}

.imageTeaser{background: #f5f5f5;border: 2px solid;
              font-weight: bold;color: darkgrey;border-style: dashed;text-align: center;vertical-align: middle;line-height: 200px;
            } /* width: 200px;height: 200px; */
.imageTeaser:hover{background: #e6e6e6; cursor: pointer;}
.flickity-page-dots{bottom:-35px !important;}


div.mapwrapper{height: 275px;}
.mobileTrennlinie{
  padding: 0;
  height: 10px;
  background: #f5f5f5;
  height: 20px;
  margin: 1em 0em;
}

/* 4 Buttons auf Handy */
.row.middle{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}
.dot {
   padding: .5em;
   border-radius: 2em;
   width: 50px;
   height: 50px;
   margin: 1em 1.35em 0em 1.35em;
   display: inline-block;
   background-color: #f8f9fa;
   border: 1px solid teal;
   text-align: center;
}
.dot:hover{
   background: teal;
}
.dot>a:hover{
   color: white !important;
}
.dot>a{
   font-size: 1.3em;
   padding-top: .3em;
   color:teal !important;
}
.textDot {
   width: 50px;
   margin: 0em 1.35em;
   display: inline-block;
   text-align: center;
}
.textDot>text{
   font-size: .7em;
   color: teal;
   text-transform: uppercase;
}

/* Ganz kleine Geräte, bswp. iPhone 5*/
@media only screen and (max-device-width: 320px) {
  /* div.mapwrapper{height: 250px;} */
}

/* erster wichtiger breakpoint */
@media only screen and (max-device-width: 1199px) and (min-device-width: 321px) {
  .interactPx{padding: 10px 5px;margin:0;}
  div.suchergButtons{text-align:center;font-size: .9em;padding: 0;}
  /* div.mapwrapper{height: 250px;} */
  div.sideWrapper{display: grid;align-items: normal;top: 7em;}
  div.card.profil:hover{box-shadow: none;}
}

/* ab dieser HÖHE ODER BREITE: 
    -> Zeige cards untereinander, indem die ursprüngliche linke card ausgeblendet wird
       und die gleiche card oben drüber gebaut wird
*/
@media only screen and (max-device-height: 500px), (max-device-width: 992px) {
  div#mapcol {display: none;}
  .card.profil{height:auto; width: 100%;}
  .card-body {font-size: 1em;}
  ul.zulList {font-size: 13px;}
  li.zulListEl {display: inline-block;padding: 5px;margin: 2px 0px;}
  div#showRatingFullscreen{display: inline;}
  nav#history{margin-top: 0px;}
  div.praxenWrapper { padding-top: 5em; }
}

/* Breakpoint für kleinen - zwischengrößen bei der Bewertungscard */
@media only screen and (min-device-width: 320px) and (max-device-width: 390px) {
  .card-body {padding: 10px;}
  span#avgratingCard{float: left;display: contents;}
  div#standardBew{width:100%;}
  .raitingBeschreibung{font-size:10px;}
  .list-group-item{padding: .75em;}
  .table td, .table th{padding: .75rem 0rem 0rem 0rem;}
  li.zulListEl{float:right;}
  span#plusWrapper{background: none;border: 0}
}

/* Sehr schmale Geräte */
@media only screen and (max-device-width: 350px) {
   .dot{margin:1em .5em 0em .5em}
   .textDot{margin:1em .5em 0em .5em}
}

@media only screen and (max-device-width: 767px) {
  div.card.profil:hover {
    box-shadow: none;
  }
}