/*@font-face {
  font-family: Roboto;
  src: url(./curaPlugins/webannoations/styles/fonts/Roboto-Bold.woff);
  font-weight: bold;
  }

@font-face {
  font-family: Roboto;
  src: url(./curaPlugins/webannoations/styles/fonts/Roboto-Italic.woff);
  font-weight: italic;
}*/

/* Visibility of scrollbars:*/
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


 @font-face {
  font-family: Roboto;
  src: url(./fonts/Roboto-Regular.woff);
}

body {
    background-color:grey !important;
    font-size:0.8rem !important;
	line-height:1.5 !important;
	font-family:"Roboto", Helvetica, Arial, sans-serif
}

/* language button style override: */

#button-language-select {
	padding:0.15rem 0.5rem;
	border:1px solid #fff;
   background-color:#343a40 !important;
   font-size:1rem !important;
   color: #fff !important;
   outline:none !important;
   box-shadow:none !important;
   z-index:8888 !important;
	}
	

#dropdown-menu,
#dropdown-menu  a:link,
#dropdown-menu a:visited
  {
	border:0;
   background-color:#343a40 !important;
   font-size:1rem !important;
   color: rgba(255,255,255,.5)!important;
}

#button-language-select a:active,
#button-language-select a:hover,
#button-language-select a:focus {
	background-color: #343a40bb !important;
	box-shadow:none !important;
	transition:none !important;
	}

.dropdown-menu.show a:active,
.dropdown-menu.show a:hover {
	background-color:#343a40 !important;
 	font-size:1rem !important;
 	color: #fff !important;
}

.dropdown-menu.show {
	background-color:#343a40 !important;
	border:0;
	min-width:7rem !important;
	}	
	
.dropdown-menu a:link {
	color: rgba(255, 255, 255, 0.5) !important;
	background-color:#343a40 !important;
	}
.dropdown-menu a:visited, 
.dropdown-menu a:hover {
	color:#fff !important;
	background-color:#343a40 !important;
	}	

.btn-dark {
    border: none;
}

#card {    
			z-index:9100;
			top:0.5rem;
}

.card a:link,
.card a:visited {
  font-size:1rem !important;
   color: rgba(255,255,255,.6)!important;
}

.card a:active,
.card a:hover{
  font-size:1rem !important;
  color: rgba(255,255,255,1)!important;
}

#close-button {
font-size:1.5rem !important;
	line-height:0.8;
	color: #fff;
    background-color:#343a40; 
    border:0; display:block !important; 
    margin-top: -1.7rem; 
    margin-left:90%;
    height: 1.8rem;
    width: 1.8rem;
	z-index:9999 !important;
}

/* 
#close-button {
    background-color:#343a40; 
    border:0; display:block !important; 
    margin-top: -1.5rem; 
    margin-left:90%;
    height: 1.6rem;
    width: 1.6rem;
}
*/
#button_language {
    display:none;
	/*background-color: #343a40; 
    border:0; display:block !important; 
    margin-top: -1.5rem; 
    margin-left:80%;
    height: 1.5rem;
    width: 1.5rem; */
}

#button-language-select {
    visibility:hidden;
    background-color: rgba(0,0,0,.7)!important;
    border: none;
}

#annotationMarker{
	color:  #111111;
}


#input-title,
#input-artist
 {

    font-size:1rem !important; /* entspricht h6, wie alle anderen Überschriften */
	line-height:1.3 !important;
	color:white !important;
 }   
 
 #input-comment a:link, #input-copyright a:link, #input-prov a:link
 #input-detaila a:link,
#input-detailb a:link,
#input-detailc a:link,
#input-detaild a:link,
#input-detaile a:link,
#input-detailf a:link,
#input-detailg a:link,
#input-detailh a:link {
	font-size:0.8rem !important;
 }

#input-year,
#input-measures,
#input-technique,
#input-copyright {
    display:inline !important; /* um Jahr, Maße, Technik, Copyright auf einer Zeile zu haben */
 }   

.carousel-item img {
    max-height:35vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays */
 }   


/* Text-Inhalt von Akkordeon(Information) in Höhe limitieren um zu vermeiden, dass das Fenster größer als Bildschirmhöhe wird. Der Standard bei Bootstrap ist hier das kleinste Display, für alle anderen Displays siehe media-queries weiter unten:  */
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:33vh;
    overflow-y: scroll !important;
    margin-bottom:1.5rem !important;
}



/* scroll bars für Text-Inhalt von Akkordeon permanent sichtbar machen (funktioniert leider nicht in FF):  
.card-body::-webkit-scrollbar {
    -webkit-appearance: none !important;
}

.card-body::-webkit-scrollbar:vertical {
    width: 11px !important;
}

.card-body::-webkit-scrollbar:horizontal {
    height: 11px !important;
}

.card-body::-webkit-scrollbar-thumb {
    border-radius: 8px !important;         
    border: 2px solid #343a40 !important;  *//* should match background, can't be transparent */
 /*   background-color: rgba(255, 255, 255, .5) !important; 
} */



/* pagination für carousel, auf kleinen Displays deaktiviert (Rest siehe media-queries):  */
.pagination {
    display:none;
    text-align:center;
}
/* prev / next für carousel, auf großen Displays deaktiviert (Rest siehe media-queries):  */
.carousel-control-prev,
.carousel-control-next {
	top: 45%;
    display:block;
}

.filler {
    width: 100%;
    opacity: 0;
    grid-column: 1;
    grid-row: 1;
}

.zoom-container {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    grid-column: 1;
    grid-row: 1;
}
 
.full-res {
    height: auto;
    width: auto; /*58vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
    opacity: 0;
    transition: opacity ease-in;
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    max-width: 100%;
}

.img-container {
    display: grid !important;
    max-height: 58vh;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}


.pagination a{
    font-size: 1.5rem !important; /* falls über Unicode-Symbole gelöst  */
}


.button-language-select {
    display:none !important; 
}

#collapseTwo {
	max-height:58vh;
	/*margin-left:0.4rem !important;*/
	margin-right:0.3rem !important;
	/*margin-top:-1rem;*/
	margin-bottom:.5rem !important;
	}
	
#input-year {
	display:none;
	}	

/* Ausgleich für abgeschnittene Videos, hier Standard für unter 500px Breite:*/
.embed-responsive {
	min-height:48vh;
	}
/* breakpoints:  */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 500px) { 

/* Ausgleich fuer abgeschnittene Videos:*/
.embed-responsive {
	min-height:44vh;
	}

#card {     width:50%;
			margin-left: 1rem !important;
            margin-right: auto!important;
			z-index:9100;
        }  
body {
    background-color:grey !important;
     } 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:42vh; /* standard für kleine displays siehe oben */
    overflow-y: scroll !important;
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
.carousel-item img {
    max-height:50vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    

/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:none !important;
    text-align:center !important;
}
.carousel-control-prev,
.carousel-control-next {
    display:block !important;
}	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

/* Ausgleich fuer abgeschnittene Videos:*/
.embed-responsive {
	min-height:44vh;
	}

#card {    margin-left: 1rem !important;
           margin-right: auto!important;
           width:50% !important;
			max-width:50%;
        } 
	
body {
    background-color:grey !important;
     }  
#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
     }
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 
	   	 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:35vh; /* standard für kleine displays siehe oben */
	overflow-y: scroll !important;
	margin-bottom:1.5rem !important;
}	

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}

.carousel-item img {
    max-height:50vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    
	
/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:none !important;
    text-align:center !important;
}	
.carousel-control-prev,
.carousel-control-next {
    display:block !important;
}		    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* Ausgleich fuer abgeschnittene Videos, hier Standard fuer unter 500px Breite:*/
.embed-responsive {
	min-height:44vh;
	}


#card {    margin-left: 1rem !important;
            margin-right: auto!important;
            width:50% !important;
        } 
body {
    background-color:grey !important;
     }  

#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
     }  
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 
	 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:35vh; /* standard für kleine displays siehe oben */
	overflow-y: scroll !important;
	margin-bottom:1.5rem !important;
}	

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
.carousel-item img {
    max-height:35vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    

/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:block !important;
    text-align:center !important;
}
.carousel-control-prev,
.carousel-control-next {
    display:none !important;
}
}	

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

/* Ausgleich fuer abgeschnittene Videos, hier Standard fuer unter 500px Breite:*/
.embed-responsive {
	min-height:35vh;
	}


#card {    margin-left: 1rem !important;
            margin-right: auto!important;
			width:33% !important;
        } 
body {
    background-color:grey !important;
     }  
#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
     }  
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 	 
	 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:45vh; /* standard für kleine displays siehe oben */
    overflow-y: scroll !important;
	margin-bottom:1.5rem !important;
}	 

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
 	
/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:block !important;
    text-align:center !important;
}	
.carousel-control-prev,
.carousel-control-next {
    display:none !important;
}	 


a.btn.btn-dark.lmcspecial {
background-color:#b4282c;
margin-bottom:5px;
color:white;
text-align:center;
width:300px;
}


a.btn.btn-dark.lmcspecial:active {
background-color:white;
color:#b4282c;
}

a.btn.btn-dark.lmcspecial:hover {
background-color:#b4282c;
color:white;
}


/**iframe edit start*/
iframe {
    width: 100%;
    min-height: 300px;
}
/** end */
}
/**Language_Select nach links bei Landscape Ansicht*/

/*
@media screen (orientation: landscape) {
  .user .language {
    z-index: 1;
    position: absolute;
    left: 1rem;
    top: 1rem;
} */

.resp-sharing-button__link, .resp-sharing-button__icon {
    /* display: inline-block !important; */
}

.resp-sharing-button__link {
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
    /* margin: 0.3em */
}

.resp-sharing-button {
    border-radius: 5px;
    /* padding: 0.1em 0.1em; */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

.resp-sharing-button__icon svg {
    width: 2em;
    height: 2em;
    /* margin-left: 0.4em !important; */
    vertical-align: top
}

.resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
}

.resp-sharing-button__icon {
    stroke: rgba(255, 255, 255, .5);
    fill: none
}

.resp-sharing-button__icon:hover {
    stroke: rgba(255, 255, 255, 1) !important;
    fill: none
}

.resp-sharing-button--transparent {
    background-color: transparent;
}

.social_media_list {
    background-color: transparent;
    border: 0;
    list-style-type: none;
    text-align: left;
    margin-left: 1em;
    margin-right: 0.5em;
    padding: 0;
}

.social_media_list li {
    display: inline-block;
    width: 18%;
    height: auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.icon-popup {
    background-color: rgba(255, 255, 255, .5);
    z-index: 1;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../../../kumu/piktos/icon-popup-grau.svg);
    background-size: 24px 24px;
}

.icon-popup:hover {
    background: url(../../../kumu/piktos/icon-popup-weiss.svg);
    background-size: 24px 24px;
}