/*
-----------------------------------------------------------------
    CSS that can be customized to accomodate company branding
-----------------------------------------------------------------
*/

/* Banner Color */
.clientmdwas .headerBanner {
    border-top: #008aa2 solid 5px;
    background-color: white;
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.15);
    height:90px;
   
}

/* Banner Title Font and Font Size*/
/* Recommended default settings */
.clientmdwas .bannerTitle {
    font-family: Roboto, sans-serif;
    color: #008aa200;
    font-size: 20px; /* Recommended range 20-30px, depending on font family used */
}



 /* Keyframes für sanftes Einblenden */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }



.clientmdwas, .bannerTitleLink, .headerLogo img {
    animation: fadeIn 2s ease-out;
    
}


.appsGallery {
    margin-top:5rem;
}

#headerLogo {
    opacity:0;
    width:0px;
    visibility: hidden;
    
    
}

#bannerTex{
      width: 12rem;
}

#bannerText::before {
    content:"";
    opacity:1;
    position: absolute;
    margin-bottom:0px;
    width: 11rem;
    height: 3.2rem;
    background-image: url("webAppLogo.png");
    background-size: cover;
    z-index: 2;
    color:red;
    
}

.bannerTitleLink {
    height:60%;
}

.clientmdwas .bannerTitleLink {
    margin-left:0;
}

.appsGallery::before {

    font-size:0.75rem;
    margin-top:5rem;

    background:white;
    padding:10px 30px;
    border-radius:12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    letter-spacing:1px;
    
    
}




.appsGallery::before {

content: "🟢\2002\2002Voller\2002 Funktionsumfang\2002\2002🟠\2002\2002 Eingeschränkter\2002 Funktionsumfang";




    
}


.clientmdwas .bannerTitleLink {
    display: flex;
}

#gallery-diagnostics-button {
    background-color: #868686;
}

#gallery-manage-apps-button {
    background-color: #868686;
}

.clientmdwas .buttonRowContentCell {
    background-color: #868686;
}

.clientmdwas .breadCrumbIcon {
    background-color: #aaaaaa;
    padding-bottom: 4px;
}

/* Header Logo Size*/
/* Recommended default settings */
.clientmdwas .headerLogo {
    height: 1.2em;
    width: auto;
  }



.clientmdwas body {

    font-family: Roboto, sans-serif;
	background-color: #fff;
	background: #F2F2F2;
	background: -webkit-linear-gradient(90deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(242, 242, 242, 1) 100%);
	background: -moz-linear-gradient(90deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(242, 242, 242, 1) 100%);
	background: linear-gradient(90deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(242, 242, 242, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F2F2F2", endColorstr="#F2F2F2", GradientType=1);


}


:root {
	background: #0c0c0c00;
}


.galleryAppContainer,
.galleryFolderLabel {
	background: #00800000;
	border-radius: 0px;


}


.clientmdwas .galleryFolderLabel {

	line-height: 2.886em;
	font-weight: 300;
	font-size: 25px;
	margin-bottom: 1rem;
	margin-top: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* Grundzustand – alle Elemente, die den Effekt bekommen sollen */
.appCardImageSection,
.CardSection,
.appStatusOk,
.appCardImage {
	border-radius: 6px;
	border: none;

	box-shadow: rgba(50, 50, 93, 0.11) 0px 13px 27px -5px, rgba(0, 0, 0, 0.05) 0px 8px 16px -8px;
	transition: box-shadow 0.3s ease;
	/* weicher Übergang (Dauer anpassbar) */
}

/* Hover-Zustand für jedes Element einzeln */
.appCardImageSection:hover,
.CardSection:hover,
.appStatusOk:hover,
.appCardImage:hover {
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}


.clientmdwas .galleryAppContainer,
.clientmdwas .galleryFolderLabel {
	grid-gap: 45px;


}


.clientmdwas .appTitle {
	color: #585858;
	margin-bottom: 8px;
	margin-top: 19px;
}


.clientmdwas span.appVersion {
	color: #008AA2;
}

.clientmdwas div.appCardProperties {
	height: 205px;
}


.clientmdwas .galleryAppContainer {
	grid-template-rows: repeat(auto-fill, 350px);
}



.clientmdwas .appStatusOk {
    border-color: #fff;
    background-color:#fff;
}




#gallery-diagnostics-button {
    opacity:0;
}

#logoutButton, .undefined,  .headerBannerButtonRow {
    color:#696969;
    padding:15px 20px;
    background-color:#f000;
    border:none;
    opacity:1;
   

}







#logoutButton::before, .undefined::before,  .headerBannerButtonRow::before {
    content:"●";
    color:#3aff56;
    margin-right:15px;
    font-weight:bold;
    font-size:1.2rem;
}





.clientmdwas .buttonRowContentCell {
    background-color:#fff;
     border-radius:10rem;
    padding:6px 5px; 
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.clientmdwas, .galleryFolderLabel { 
    color:#8b8b8b ! important;
}



.clientmdwas, .galleryFolderLabel::before {   
color:#8b8b8b ! important;
}