/*
©2019, COMUNITATEA GIS DIN TIMISOARA
 *  Toate drepturile rezervate. All rights reserved.
 *  Sotware proprietar. Licenţa poate fi găsită în documetul licenta.docx;
 *  Proprietary software. The license can be found in licenta.docx;
 */
html, bhtml, body {
    /*width: 100%;
    //height: 100%;
    //border:dotted;
    //border-width:1px;*/
    margin:0%;
    overflow: auto;
}

* {
  box-sizing: border-box;
}

h2, span, b {
  font-family:Kanit;

}

.textfont {
  color:#f0f0f0;
  font-family: 'Roboto Slab', serif;
  margin:5px;
  text-shadow: 2px;
}

#testimonySelect, #interviuriScrollBar, #orasSelect {
  background-color: #413e3f;
  color:#ffffff;
  border-radius:1rem;
  padding:0.5rem;
  font-size:2vmin;
  margin:2rem;
}

.slidecontainer {
  width: 100%;
}

.rangeSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  width: 25vmin;
}

.rangeSlider:hover {
  opacity: 1;
}

.rangeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('../IMG/contrasticon.png');
  cursor: pointer;
}

.rangeSlider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: url('../IMG/contrasticon.png');
  cursor: pointer;
}
output {
  position: absolute;
  top: -32px;
  display: none;
  width: 50px;
  height: 24px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 3px;
  color: #777;
  font-size: 0.7vw;
  line-height: 24px;
  text-align: center;
}

input[type=range]:active + output {
  display: block;
  transform: translateX(-50%);
}
.slider {
  /*width: 600px;*/
  text-align: center;
  overflow: hidden;
}

.slides {
	display:none;
  /*display: flex;*/
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  OVERFLOW-Y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  /*width: 5px;
  height: 5px;*/
  width: 10vmin;
  height: 2vmin;
}
.slides::-webkit-scrollbar-thumb {
  background: #90a5c5;
  border-radius: 5px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 15vmin;
  height: 4vmin;
  margin-right: 2vmin;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8vmin;
}
@media screen and (max-width: 767px) {
  .slides > div{
	 width: 30vmin;
	height: 8vmin;
	font-size:4vmin;
  }
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
/*img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

.slider > a {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  background: #90a5c5;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

/* Don't need button navigation */
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

 ul{
     list-style:none;
     }
.olControlAttribution{
	top:97%;
	font-family:'Tw Cen MT';
    font-size:6vw;
    font-weight:300;
    color:#000000;
}
.redTyping{
	color: #ee2222;
}
.title{
	font-family: "palatino linotype", palatino, serif;
    font-size:2vmax;
	margin:0;
}
.par1{
	font-family: Kanit;
  font-weight:300;
  font-size:2vmin;
	margin-bottom:0.5rem;
}
#testimonySelect{
	font-family: Kanit;
  font-size:2vmin;
	margin:0;
}
@media screen and (max-width: 767px) {
	.par1{
		font-size: 4vmin;
	}
	#testimonySelect {
		font-size: 4vmin;
	}
  #interviuriScrollBar {
    font-size: 4vmin;
  }
}
.olImageLoadError {
    /* when OL encounters a 404, don't display the pink image */
    display: none !important;
}
.chestionar {
    margin: 0 auto;
    font-family: sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    border: 2px dashed #73849c;
}
.chestionarmic {
    margin: 0 auto;
    font-family: sans-serif;
    table-layout:fixed;
    padding:5%;
    border: 2px dashed #73849c;
}
.tabelintro {
    margin: 0 auto;
    font: normal 700 300% "Tw Cen MT", sans-serif;
    height:68%;
    width:80%;
    border-radius:5%;
    border: 2px dashed #73849c;
}
.list2
{
 text-indent:50px;
}
.list3
{
 text-indent:44px;
}

.tabelcsv {
    margin: 0 auto;
    font-family: sans-serif;
    width:80%;
    table-layout:fixed;
}
.tabelpicker {
    margin: 0 auto;
    font-family: 'Tw Cen MT';
    width:80%;
    border-collapse: collapse;
    border: 2px dashed #73849c;
}
.inputmare {
    font-size:3vh;
    padding:1%;
    width:70%;
}
.buttonControls {
  font-size: 1vw;
}
.inputmic {
    font-size:3vh;
    padding:1%;
    width:30%;
}
.inputfmic {
    width:11%;
}
.inputfolie {
    font-size:2vh;
    width:7%;
}
.inputcontrols {
    font-size:1vh;
    padding:1%;
    width:20%;
}
.tdcsv{
    text-align:center;
 padding:5%;
}
.tdmare{
    text-align:center;
    padding:1.5%;
}
.tdmicmic{
    text-align:center;
    padding:0.5%;
}
.tdcsv{
    text-align:center;
    padding:5%;
}
.stilcentru {
   text-align:center;
   padding:1%;
}
.titluprincipal {
   font-family:'Tw Cen MT';
   font-size:4vw;
   font-weight:300;
   text-align:center;
    color:#ce4919;
    margin-top:0.5%;
    margin-bottom:0.5%;
}
.titlusecundarintro {
   font-family:'Tw Cen MT';
   font-size:3vw;
    margin-top:0%;
    margin-bottom:0%;
}
.titlusecundar {
   font-family:'Tw Cen MT';
   font-size:5vh;
}
.titlutertiar {
   font-family:'Tw Cen MT';
   font-size:3vh;
   color:#ce4919;
}
.titlutertiar2 {
   font-family:'Tw Cen MT';
   font-size:1.6vw;
   color:#ce4919;
}
.titluauxiliar {
   font-family:'Tw Cen MT';
   font-size:3vh;
   color:darkred;
}
.titluauxiliarnegru {
   font-family:'Tw Cen MT';
   font-size:2vh;
}
datalist {
    display: block;
    float:left;
}
#mainDiv{
    position:absolute;
    top:0%;
    left:0%;
    background:#000000;
    color:white;
    width:100%;
    height:100%;
}
#leftPanel{
        position:absolute;
        top: 0%;
        left: 0%;
		width:30%;
        align-content: left;
        text-align: left;
		z-index:20;
		background: #101820;
		height: 100%;
		border-right: 5px solid #ffffff;
		overflow:auto;
     }
#map{
    position:absolute;
    top: 0%;
    left: 30%;
	width:69%;
	height:100%;
    //align-content: left;
    }
/* Responsive layout - when the screen is less than 767px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 767px) {
  #mainDiv{
  }
  #leftPanel{
        position:absolute;
        top: 0%;
        left: 0%;
		height:30%;
		width:100%;
        align-content: left;
        text-align: left;
		z-index:20;
    border-right: 0px;
    border-bottom: 5px solid #ffffff;
     }
	#map{
		position:absolute;
		top: 30%;
		left: 0%;
		height:69%;
		width:100%;
		//align-content: left;
    }
}
#marturiiDiv{
	display:block;
	text-align:center;
     }
#arestatiDiv{
	display:none;
	text-align:center;
    }
#interviuriDiv{
	display:none;
	text-align:center;
    }
#emotiiDiv{
	display:none;
	text-align:center;
    }
#fotografiiDiv{
	display:none;
	text-align:center;
    }

#titleDiv{
	font-family: Kanit;
	height:5vmax;
	text-align:center;
	font-size: 2vw;
	line-height: 5vw;
  margin:0.5rem;
}
@media screen and (max-width: 1280px) and (min-width:767px) and (orientation:portrait) {
	#titleDiv{
		height:10vmax;
	}
}
@media screen and (max-width: 767px) {
	#titleDiv{
		font-size: 6vw;
		height: 8vmax;
	}
}

.image-centered{
    vertical-align: middle;
    margin-bottom: 0.25em;
}
#chaptersDiv{
	height:5vh;
	text-align:center;
  margin:1rem;
}
@media screen and (max-width: 767px) {
	#chaptersDiv{
		height:2.5vh;
	}
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
	#chaptersDiv{
		height:5vh;
	}
}
.chapter{
	display:block;
}
.chapterHidden,.chapter2{
	display:none;
}
#storyMap{
	  height:40vh;
    text-align: justify;
    padding: 1vw;
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape){
	#storyMap{
		height:55vh;
	}
}
#aboutDiv{
	height:10vh;
	text-align: center;
}
#layerSwitcherShow{
	position:absolute;
	z-index:200;
	top:0%;
	display:inline-block;
}
#layerSwitcher{
	position:absolute;
	z-index:200;
	background-color: #ffffff88;
	font-size:1.8vmin;
	top:0%;
	height:20%;
	overflow:auto;
	display:none;
}

@media screen and (max-width: 1280px) {
	#layerSwitcher{
		height:30%;
	}
}
@media screen and (max-width: 1280px) and (min-width:767px) and (orientation:portrait) {
	#layerSwitcher{
		height:18%;
	}
}

@media screen and (max-width: 767px) {
	#layerSwitcher{
		font-size:4vmin;
		height:40%;
	}
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape){
	#layerSwitcher{
		font-size:4vmin;
		height:60%;
	}
}
#timeSliderDiv{
	position:absolute;
	z-index:200;
	background-color: #ffffff88;
	font-size:1.8vmin;
	top:20%;
	height:5%;
	display:none;
}
@media screen and (max-width: 767px) {
	output{
		font-size: 4vmin;
	}
	#timeSliderDiv{
		top:40%;
	}
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
	output{
		font-size: 2vw;
	}
	#timeSliderDiv{
		top:60%;
	}
}
.ol-storymap{
	overflow:auto;
}

.ol-popup-content {
    color: #101820;
    text-align: center;
    opacity:1;
    position: absolute;
    background-color: #ffffff;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7));
    padding: 15px;
    border-radius: 10px;
    bottom: 12px;
    left: -50px;
    min-width: 200px;
}

.longerinput{
	width:100%;
}
.panelButton{
     height:9vh;
     }
.closebb{
    text-align:right;
    }
.butonSalvare {
background:    #af272f;
border:        1px solid #8A1E25;
border-radius: 15px;
box-shadow:    0 1px 8px 3px #999;
color:         #ffffff;
display:       inline-block;
padding:       2px 8px;
font-weight: bold;
font-size: 1.8 vmin;
text-align:    center;
text-shadow:   1px 1px 0 #000000;
}
.butonAscundere{
background:    #d9ead3;
background:    -webkit-linear-gradient(#d9ead3, #b6d7a8);
background:    linear-gradient(#ead3d3, #d7a8a8);
border:        1px solid #444;
border-radius: 15px;
box-shadow:    0 3px 0 0 #999;
color:         #761d1d;
display:       inline-block;
padding:       2px 8px;
font-family: "Calibri";
font-weight: bold;
font-size: 1.8 vmin;
text-align:    center;
text-shadow:   1px 1px 0 #f3f3f3;
}
@media screen and (max-width: 767px) {
	.butonSalvare,.butonAscundere{
		font-size: 1.5 vmin;
	}
}
.butonInvalidare {
background:   #ead3d9;
background:    -webkit-linear-gradient(#ead3d9, #d7a8b6);
background:    linear-gradient(#ead3d9, #d7a8b6);
border:        1px solid #444;
border-radius: 15px;
box-shadow:    0 3px 0 0 #999;
color:         #761d38;
display:       inline-block;
padding:       5px 15px;
font:          normal 700 18px/1 "Calibri", sans-serif;
text-align:    center;
text-shadow:   1px 1px 0 #f3f3f3;
}
.myButton {
	background-color:#413e3f;
	border-radius:20px;
	border:2px solid #7f7f7e;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Kanit;
	font-size:1.8vmin;
	padding:0.5vmax 1vmax;
	text-decoration:none;
  margin:0.25rem;
}

@media screen and (max-width: 767px) {
	.myButton{
		font-size:4vmin;
	}
}
.fixedWidth{
	width:20vw;
}
@media screen and (max-width: 767px) {
	.fixedWidth{
		width:40vw;
	}
}
.myButton:hover {
  color:#ffffff;
  text-shadow:0;
  background-color:#af272f;
  border-color:#ffffff;
}
.myButton:active {
	position:relative;
	top:1px;
}

.fixed {
    width: 65%;
    height:80%; /* the fixed width required */
    //float: left;
}

.fixed + div {
     margin-left: 65%;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}
.fixed2 {
    width: 35%;
height:80% /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 65%;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}