/*===================================================== */
/* Buttons auf Karten (Route Coloring, Map Gallery)     */
/*===================================================== */

div.map-buttons{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 128px;
  transition: 0.2s;
  z-index: 11;
  /*border: 1px solid red;*/
}

.map-button, .route-coloring-panel{
  display: block;
  position: absolute;
  width: 115px;
  right: 0px;
  padding: 3px;
  font-size: 10pt;
  color: var(--TourColor) !important;
  /*text-align: center;*/
  background-color: rgba(255, 255, 255, 0.8);
  transition: 0.2s, right 0.2s linear 0.3s;
  /*border: 1px solid red;*/
  z-index: 11;
  cursor: pointer;
  border-radius: 2px;
}

/* Properties depending of number of buttons/button position */
.map-button-route-coloring{display: none;}
.map-button-gallery{display: none;}
.route-coloring-panel{display: none;}
div.map-buttons-1{height:  38px;}
div.map-buttons-2{height:  83px;}
div.map-buttons-3{height: 128px;}
.map-button-1{bottom:  0px; display: block;}
.map-button-2{bottom: 45px; display: block;}
.map-button-3{bottom: 90px; display: block;}
.route-coloring-panel-1{bottom:  48px; display: block;}
.route-coloring-panel-2{bottom:  93px; display: block;}
.route-coloring-panel-3{bottom: 138px; display: block;}

.map-button{
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  cursor: pointer;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.map-button:Hover{
	-webkit-box-shadow: 0px 0px 4px 2px var(--TourColor);
	-moz-box-shadow: 0px 0px 4px 2px var(--TourColor);
	box-shadow: 0px 0px 4px 2px var(--TourColor);
	text-decoration: none;
}

div.mapButtonActive, div.mapButtonActive:Hover{
	-webkit-box-shadow: 0px 0px 4px 3px var(--TourColor);
	-moz-box-shadow: 0px 0px 4px 3px var(--TourColor);
	box-shadow: 0px 0px 4px 3px var(--TourColor);
        background-color: rgba(255, 255, 255, 1);
}

.map-button p{
  margin-right: 38px;
  width: 129px;
  /*display: none;*/
  opacity: 0;
  transition: 0.0s;
  transition-delay: 0s;
}

.map-button > img{
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 33px;
}

div#map-button-stage-rects p{
  margin-top: 8px;
}

div.map-buttons:hover{width: 210px; /*163px*/}
div.map-buttons:hover .map-button{width: 204px; /*157px*/}
div.map-buttons:hover .map-button p{/*display: block;*/ opacity: 1;  transition: 0.2s; transition-delay: 0.15s;}
div.map-buttons.active{width: 210px; /*163px*/}
div.map-buttons.active .map-button{width: 204px; /*157px*/}
div.map-buttons.active .map-button p{display: block; opacity: 1;  transition: 0.2s; transition-delay: 0.15s;}

/* ======================================================= Route Coloring */

/* Panel */

div.route-coloring-panel{
  right: 10px;
  width: 210px; /*163px;*/
  max-height: 0px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.0);
  padding: 0px;
  cursor: auto;
  z-index: 10;
}

div.route-coloring-panel.active{
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
}

div.route-coloring-panel > div{
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
div.panel-separator{
  position: relative;
  width: calc(100% - 10px);
  left: 5px;
  height: 2px;
  background-color: rgba(220, 220, 220);
}

div.route-coloring-panel > div > p{
  color: black;
  margin-left: 5px;
  margin-bottom: 5px;
}

/* Marked Sections */

span.statSec-dist_unpaved_2,
span.statSec-scenic,
span.statSec-noMarking{
  display: inline-block;
  margin-right: 5px;
  height: 10px;
  width: 10px;
}
span.statSec-dist_unpaved_2{background-color: rgb(192, 133, 0);}
span.statSec-scenic{background-image: linear-gradient(to right, #70AD47 50%, #3A7811 50%);}

/* Overnight Stays */

table.overnight-stays{
  margin-left: 35px;
  margin-top: 5px;
  color: rgba(230, 230, 230);
  transition: 0.2s;
}
table.overnight-stays td{
  text-align: center;
}
table.overnight-stays svg{
  height: 1.15vw;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  fill: rgba(230, 230, 230);
  transition: 0.2s;
}
table.overnight-stays.active{color: rgba(180, 180, 180);}
table.overnight-stays.active svg{fill: #500;}
table.overnight-stays span{
  padding-left: 25px;
}

/* Radio Buttons and Check Boxes */

div.radio-buttons{
  max-height: 185px;
  overflow: auto;
}

div.radio-buttons p{
  margin-left: 5px;
  padding: 0.5px;
  cursor: pointer;
  color: rgba(180, 180, 180);
}
div.radio-buttons p span.bull{
  opacity: 0;
  transition: 0.2s;
  color: var(--TourColor);
}
div.radio-buttons p:Hover,
div.radio-buttons p.active,
div.radio-buttons p.active span.bull{
  opacity: 1;
  color: var(--TourColor);
}

/* Farb-Skala */

p.color-scale-u, p.color-scale-l{
  position: absolute;
  opacity: 0;
  transition: 0.2s;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  right: 32px; /*18px;*/
}
p.color-scale-u{top: 6px;}
p.color-scale-l{bottom: 4px;}

div.color-scale{
  position: absolute;
  top: 5px;
  right: 20px; /*6px;*/
  width: 10px;
  height: calc(100% - 7px);
  /*border: 1px solid red;*/
  background-image: url("../../graphics/home/RouteAppearance/scale-red.svg");
  background-size: 100% 100%;
  opacity: 0;
  transition: 0.2s;
}
div.scale-w_cldg{background-image: url("../../graphics/home/RouteAppearance/scale-w_cldg.svg");}
div.scale-w_prec{background-image: url("../../graphics/home/RouteAppearance/scale-w_prec.svg");}
div.scale-w_temp{background-image: url("../../graphics/home/RouteAppearance/scale-w_temp.svg");}
div.scale-w_wind{background-image: url("../../graphics/home/RouteAppearance/scale-w_wind.svg");}

/* ======================================================= Karten-Bildergalerie (Button und Circles) */

circle.imageCircle{
  cursor: pointer;
  r: 0.27%;
  fill: #AA000033;
  stroke: #AA0000;
  stroke-width: 0.1%;
  opacity: 1;
  transition: 0.2s;
}
circle.imageCircle:hover, circle.imgCircleActive{
  stroke: var(--TourColor);
  fill: #EEA90055;
  stroke-width: 0.25%;
}

circle.imageCircleInactive{
  r: 0%;
  stroke-width: 0%;
  opacity: 0;
}

path.connPath{
  stroke-width: 0.12px;
  fill: none;
  stroke: var(--TourColor);
  /*-webkit-filter: drop-shadow(0px 0.05px 0.07px #888);*/
}
path.connPathInactive{display: none;}

div.connArrw{
  width: 25px;
  height: 25px;
  position: absolute;
  top: -32px;
  border-radius: 2px;
  background-image: url('../../graphics/navigation/arrows/down.svg'), url('../../graphics/navigation/arrows/down.svg');
  background-color: white;
  background-size: 80%;
  background-position-x: 40%;
  background-position-y: 15%, 85%;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 3px 2px var(--TourColor);
  -moz-box-shadow: 0px 0px 3px 2px var(--TourColor);
  box-shadow: 0px 0px 3px 2px var(--TourColor);
}
div.connArrwInactive{display: none;}

/* ======================================================= Map Image Gallery */

div.mapGalleryWrapper{
  position: absolute;
  bottom: -100px;
  width: 100%;
  height: 100px;
  background-color: white;
  text-align: center;
  transition: 1s box-shadow;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  z-index: 2;
}
div.mapGalleryWrapperFixed{
  position: fixed;
  bottom: 0;
  z-index: 10000;
  /*transition: 0s;*/
}
div.mapGalleryWrapperActive{
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
}

div.mapGalleryArrow{
  position: absolute;
  top: 0px;
  height: 100px;
  width: 107px;
  color: var(--TourColor);
}
div.mapGalleryLeftArrow{
  left: 0px;
  background-image: linear-gradient(to right, white 40%, transparent);
  text-align: left;
  padding-left: 15px;
}
div.mapGalleryRightArrow{
  right: 0px;
  background-image: linear-gradient(to left, white 40%, transparent);
  text-align: right;
  padding-right: 15px;
}

div.mapGalleryArrow svg{
  margin-top: 40px;
  height: 20px;
  transition: 0.1s;
  color: #DDDDDD;
}
div.mapGalleryArrowActive{cursor: pointer;}
div.mapGalleryArrowActive svg{color: var(--TourColor);}
div.mapGalleryArrowActive:hover svg{
  margin-top: 35px;
  height: 30px;
}

div.mapGalleryCloseX{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 20px;
  padding-right: 5px;
  color: var(--TourColor);
  cursor: pointer;
}
div.mapGalleryCloseX svg{
  height: 10px;
  margin-top: 5px;
  transition: 0.1s;
}
div.mapGalleryCloseX:hover svg{
  height: 15px;
}

div.mapGalleryImage{
  display: block;
  position: absolute;
  width: 113px;
  height: 75px;
  margin: 4px;
  margin-top: 12.5px;
  background-color: #404040;
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
  transition: 0.2s;
  cursor: pointer;
}

div.mapGalleryImageActive{
  -webkit-box-shadow: 0px 0px 4px 3px var(--TourColor);
  -moz-box-shadow: 0px 0px 4px 3px var(--TourColor);
  box-shadow: 0px 0px 4px 3px var(--TourColor);
}
div.mapGalleryImage:hover{
  -webkit-box-shadow: 0px 0px 4px 4px var(--TourColor);
  -moz-box-shadow: 0px 0px 4px 4px var(--TourColor);
  box-shadow: 0px 0px 4px 4px var(--TourColor);
}

div.mapGalleryImage div{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

div.mapGalleryVideo{
  background-image: url('../../graphics/reports/video-tape-grey.svg'), url('../../graphics/reports/video-tape-grey.svg');
  background-size: auto 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

div.mapGalleryVideo div{
  position: absolute;
  width: 83px;
  height: 71px;
  left: 15px;
  top: 2px;
}

/*===================================================== */
/* Ein- und Ausschalten der Elemente                    */
/*===================================================== */

/* ======================================================= Nach Viewportbreite */

/* Ein-/ausblenden in Abhängigkeit der Viewpointbreite */
@media only screen and (max-width: 700px) {
	div.navi:not(.small){display: none;}
}
@media only screen and (min-width: 701px) {
	div.navi.small{display: none;}
}
@media only screen and (max-width: 1300px) {
	div.map-button-route-coloring{display: none;}
	div.route-coloring-panel{display: none;}
}