/*@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;
}*/

 @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,
.button-language-select,
.dropdown-menu,
.dropdown-menu  a:link,
.dropdown-menu a:visited
  {
   background-color: rgba(0,0,0,.7)!important;
   font-size:1rem !important;
   color: rgba(255,255,255,.5)!important;
}
.button-language-select a:active,
.button-language-select a:hover,
.dropdown-menu  a:active,
.dropdown-menu a:hover {
	background-color:rgba(0,0,0,.7)!important;
 	font-size:1rem !important;
 	color: rgba(255,255,255,1)!important;
}





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

.card a:active,
.card a:hover{
  font-size:1rem !important;
  color: rgba(255,255,255,1)!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 {
    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;
}


#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{
	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:20vh; /* 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 {
    max-height:33vh;
    overflow-y: scroll !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;
}



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


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

/* 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: 576px) { 

#card {    margin-left: auto!important;
            margin-right: auto!important;
        }  
body {
    background-color:grey !important;
     } 
#input-comment {
    max-height:42vh; /* standard für kleine displays siehe oben */
}	

#button_language {
    display:block !important; 
}

#button-language-select {
    visibility:hidden !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: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) { 

#card {    margin-left: 15px!important;
            margin-right: auto!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 {
    max-height:35vh; /* standard für kleine displays siehe oben */
}	

#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: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) { 

#card {    margin-left: 15px!important;
            margin-right: auto!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 {
    max-height:35vh; /* standard für kleine displays siehe oben */
}	

#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) { 

#card {    margin-left: 15px!important;
            margin-right: auto!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 {
    max-height:45vh; /* standard für kleine displays siehe oben */
}	 

#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:58vh; /* 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;
}	 
}