/* easybrowse custom-css */

/**
@font-face { 
	font-family: MyIconFont; 
	src: url('./fonts/MyIconFont.woff'); 
} 

body {
	font-family: 'MyIconFont', sans-serif;
}

**/


/** Header Farbe **/

.app-header {
    background-color: #fff;
}

.app-header .top-bar-brand {
    background-color: #fff;
}

.app-header-dark .btn-account {
    color: #333;
}

.app-header-dark .header-nav .nav-link {
    color: #333;
}


/** Navigations-Icons **/
.nav-item {
    color: #333;
}

.app-header-dark .header-nav .nav-link:focus,
.app-header-dark .header-nav .nav-link:hover {
    color: #333;
}

svg.nav-icon path {
    fill: #333;
}

/** Schriftzug Farbe **/
.portalname {
    color: #333;
}

/** Logo Ausrichtung **/
.top-bar-brand {
    padding-left: 17px;
}

/** Breite in ContentTree **/
span.fancytree-title {
    width: 360px;
}

/** Hightlighting **/
.highlightresults em {
    background: #efeb3245;
    color: black;
}

/** Nur Wert des Metadatums in Ergebnisliste anzeigen **/
span.metadata-key {
    display: none;
}


/* Navigations-Icons */
body:not([data-skin="dark"]) .app-header-dark .header-nav .nav-link, 
body:not([data-skin="dark"]) .nav-item {
	color: #000;
}


body:not([data-skin="dark"]) svg.nav-icon path {
	fill: #000;
}


/* Dark mode */
body[data-skin="dark"] {
--bodybackground-dark: #252B31; /* thead Hintergrund */
--text-color-dark: #e6e6e6;
color: var(--text-color-dark);
}

body[data-skin="dark"] 
.top-bar-brand {
	background-color: #346cb0;
}


body[data-skin="dark"] .app-header,
body[data-skin="dark"] .app-header-dark {
	height: auto;
	background: linear-gradient(180deg, rgb(253, 196, 0) 6px, rgba(0,0,0,0) 6px);
}

body[data-skin="dark"] .main-logo { /* Logo in hell */
	filter:brightness(0) invert(1);
}

body[data-skin="dark"] .portalname {
	color: #e6e6e6;
}
	
    /** Navigations-Icons **/
body[data-skin="dark"] svg.nav-icon path {
	fill: #a8a8a8;
}

body[data-skin="dark"] .badge-subtle.badge-primary,
body[data-skin="dark"] .badge-light {
	color: #e6e6e6;
	background-color: rgba(255, 255, 255, 0.08);
}

body[data-skin="dark"] .custom-checkbox .custom-control-input:checked~.custom-control-label:after {
	filter: brightness(2.5) grayscale(1); 
}

body[data-skin="dark"] .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title {
	color: #e6e6e6;
}
	
body[data-skin="dark"] .app-header-dark,
body[data-skin="dark"] .modal-content {
    background-color: #1D2226;
}
	
body[data-skin="dark"] .app-header-dark .top-bar-brand,
body[data-skin="dark"] .top-bar {
	background-color: #1D2226;
}
	
body[data-skin="dark"] .app-header-dark .btn-account {
    color: #e6e6e6;
}
	
body[data-skin="dark"] .gutter.gutter-horizontal::before {
	background-color: var(--text-color-dark);
}

body[data-skin="dark"] .content-iframe-background {
	background-color: transparent;
	color: #e6e6e6;
}


/* Landing Pages und Dashboard */

#foldertemplate {
	background-color: #f8f8f8;
}

body[data-skin="dark"] #foldertemplate {
	background-color: transparent;
}

.easybrowse-custom-html .container {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	/* No outer margin */
	padding: 20px 0;
	/* Padding only on top and bottom */
	flex-wrap: wrap;
	/* Ensures responsiveness */
}

.easybrowse-custom-html .column {
	background-color: #fff;
	/* White background for content cards */
	color: #000;
	/* Ensuring text is always black */
	flex: 1;
	margin: 10px 10px 10px 0;
	/* No left margin */
	padding: 20px;
	/* Padding inside each column */
	border-radius: 5px;
	/* Rounded corners */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/* Subtle shadow for depth */
	min-width: 280px;
	/* Minimum width of each column */
	max-width: 30%;
	/* Maximum width to ensure they wrap on smaller screens */
}

/* Header Styles */
.easybrowse-custom-html h1 {
	text-align: center;
}

.easybrowse-custom-html h2,
.easybrowse-custom-html h3,
.easybrowse-custom-html h4,
.easybrowse-custom-html h5,
.easybrowse-custom-html h6 {
	text-align: left;
}


.easybrowse-custom-html h1,
.easybrowse-custom-html h2,
.easybrowse-custom-html h3,
.easybrowse-custom-html h4,
.easybrowse-custom-html h5,
.easybrowse-custom-html h6 {
	margin-top: 0;
	color: #1e69ff;
	/* Blue */
	padding-left: 0;
	/* No left padding for headers */
}

.easybrowse-custom-html a,
.easybrowse-custom-html a h1,
.easybrowse-custom-html a h2,
.easybrowse-custom-html a h3,
.easybrowse-custom-html a h4,
.easybrowse-custom-html a h5,
.easybrowse-custom-html a h6 {
	color: #1e69ff;
}

body[data-skin="dark"] .easybrowse-custom-html a:not(.column a),
body[data-skin="dark"] .easybrowse-custom-html h1,
body[data-skin="dark"] .easybrowse-custom-html h2,
body[data-skin="dark"] .easybrowse-custom-html h3,
body[data-skin="dark"] .easybrowse-custom-html h4,
body[data-skin="dark"] .easybrowse-custom-html h5,
body[data-skin="dark"] .easybrowse-custom-html h6 {
	color: #809bce;
}

/* Text and Paragraph Styles */
.easybrowse-custom-html p {
	text-align: left;
	padding-left: 0;
	/* No left padding for text */
}

/* Image Styles */
.easybrowse-custom-html img {
	max-width: 100%;
	/* Makes image responsive */
	height: auto;
	/* Maintain aspect ratio */
	margin-bottom: 10px;
	/* Space between image and heading */
	transition: transform 0.3s ease;
	/* Smooth transformation on hover */
}

.easybrowse-custom-html img:hover {
	transform: scale(1.05);
	/* Slightly increase size on hover */
}

/* Link Styles */
.easybrowse-custom-html a {
	text-decoration: none;
}

.easybrowse-custom-html a:hover,
.easybrowse-custom-html a:hover h1,
.easybrowse-custom-html a:hover h2,
.easybrowse-custom-html a:hover h3,
.easybrowse-custom-html a:hover h4,
.easybrowse-custom-html a:hover h5,
.easybrowse-custom-html a:hover h6 {
	color: #00D4FF;
	text-decoration: none;
}

/* Warning at sharing links */
.temp-share-warning-message-key { 
	font-weight: bold; 
}

/* Dark mode - Normal links outside of cards */
body[data-skin="dark"] .easybrowse-custom-html a:not(.column a):hover {
	color: #99eeff;
	text-decoration: none;
}