html,
body {
   font-size: 16px;
   font-family: "Open Sans", sans-serif;
   background-color: var(--ecm-body-color);
   color: var(--ecm-fontcolor);
   /* color: rgba(0, 0, 0, 0.65) */
}

.font-color {
   color: var(--ecm-fontcolor);
}

.ecm-color-primary {
   color: var(--ecm-hppanel-colorprimary);
}

.ecm-color-secondary {
   color: var(--ecm-hppanel-colorsecondary);
}

.ecm-bg-primary {
   background-color: var(--ecm-hppanel-colorprimary);
}

.w-max-content {
   width: max-content !important;
}

/* Make sure logo fits on login page */
.logo img {
   max-width: 100%;
   padding: 5px;
}

/* Moved personabar behind sidemenu */
.personaBarContainer.personalBarContainer {
   position: fixed;
   z-index: 1025;
}

:root {
   /* Body */
   --ecm-body-color: #FFFFFF;
   --ecm-fontcolor: #343A40;
   /* Userpanel */
   --ecm-userpanel-backgroundcolor: #FFFFFF;
   --ecm-userpanel-fontcolor: #343A40;
   --ecm-userpanel-bordercolor: #B0B0B0;
   /* Navigation */
   --ecm-nav-backgroundcolor: #FFFFFF;
   --ecm-nav-bordercolor: #B0B0B0;
   /* Navigation root items*/
   --ecm-nav-rootfontcolor: #343A40;
   --ecm-nav-rootfontweight: normal;
   --ecm-nav-roothoverfontcolor: #FFFFFF;
   --ecm-nav-roothoverbackgroundcolor: #509138;
   /* Navigation sub items*/
   --ecm-nav-subfontcolor: #343A40;
   --ecm-nav-subfontweight: normal;
   --ecm-nav-subhoverfontcolor: #FFFFFF;
   --ecm-nav-subhoverbackgroundcolor: #509138;
   /* Homepage panels */
   --ecm-hppanel-fontcolor: #343A40;
   --ecm-hppanel-backgroundcolor: #FFFFFF;
   --ecm-hppanel-bordercolor: #B0B0B0;
   --ecm-hppanel-borderradius: 0px;
   --ecm-hppanel-iconbackgroundcolor: #509138;
   --ecm-hppanel-iconborderradius: 10px;
   --ecm-hppanel-colorprimary: #F3971A;
   --ecm-hppanel-colorsecondary: #DDDDDD;
   /* App */
   --ecm-app-colornavigation: #343A40;
   --ecm-app-colorprimary: #509138;
   --ecm-app-colorsecondary: #F3971A;
   /* Misc */
   --content-height: calc(100vh - 97px - 40px); /* full height, minus the header/userpanel and the title/breadcrumb */
}

/* dynamic styling for userpanel + nav */
.ECM_Navbar {
   border-bottom: 1px solid var(--bs-border-color);
   z-index: 1030;
   /* TODO: remove eventually, temporary styling for backwards compatibility */
   background-color: var(--ecm-userpanel-backgroundcolor);
   color: var(--ecm-userpanel-fontcolor);
   border-bottom: var(--ecm-nav-bordercolor) 1px solid;
}
.offcanvas .ECM_Navbar {
   background-color: var(--ecm-nav-backgroundcolor);
}

#sideNavbar {
   border-color: var(--ecm-nav-bordercolor);
}

#sideNavbar a {
   text-decoration: none;
}

#sideNavbar .nav-item {
   font-weight: 500;
}

#sideNavbar .nav-link,
#sideNavbar .dropdown-menu .dropdown-item-text,
#sideNavbar .dropdown-menu .dropdown-item {
   color: var(--ecm-fontcolor);
}

#sideNavbar .nav .nav-item:hover,
#sideNavbar .nav-item .nav-link:hover,
#sideNavbar .dropdown-menu .dropdown-item-text:hover,
#sideNavbar .dropdown-menu .dropdown-item:hover {
   background-color: color-mix(in srgb, var(--ecm-fontcolor) 5%, transparent)
}
#sideNavbar .nav-link.active,
#sideNavbar .dropdown-menu .dropdown-item.active,
#sideNavbar .dropdown-menu .dropdown-item-text.active {
   font-weight: bold;
}

#sideNavbar .nav .dropdown-menu .dropdown-menu {
   left: 5rem;
}

/* fix for missing initial position */
.DnnModule {
   position: relative;
}

/* dynamic styling for homepage panels */
.ecm-panel {
   color: inherit;
}

.ecm-panel > div {
   border-radius: var(--ecm-hppanel-borderradius) !important;
   border-color: var(--ecm-hppanel-bordercolor) !important;
   background-color: var(--ecm-hppanel-backgroundcolor) !important;
}

.ecm-panel-icon {
   border-radius: var(--ecm-hppanel-iconborderradius) !important;
   background-color: var(--ecm-hppanel-iconbackgroundcolor) !important;
}
.ecm-panel-icon svg {
   stroke-width: 0;
}

.ecm-panel-icon svg .primary {
   fill: var(--ecm-hppanel-colorprimary) !important;
}

.ecm-panel-icon svg .secondary {
   fill: var(--ecm-hppanel-colorsecondary) !important;
}


/* link decoration TODO: need to find better solution */
.content a:not(.btn),
.content a:not(.btn):visited,
.content a:not(.btn):hover,
.content a:not(.btn):active {
   color: inherit;
}

.pointer:not(.disabled):not([disabled]) {
   cursor: pointer !important;
}

/*Userpanel fix for language flag height*/
input[type="image"].Pom_Language,
.Pom_Language img {
   height: 1rem;
}

/* Navigation section (wrapping the branding at the top, menu in the middle, and footer at the bottom) */
.nav-box-shadow {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09);
}

.personabar-visible #sideNavbar.show {
   margin-left: 80px;
}

.navbar-brand {
   height: 90px;
}

.navbar-brand img {
   max-height: 80px;
   max-width: 330px;
}

/* generic disable class */
.disabled {
   filter: grayscale(100%)!important;
   opacity: 50% !important;
}

.disabled:active {
   pointer-events: none !important;
}

/* scrollbars */
* {
   scrollbar-width: thin;
   /*scrollbar-color: var(--ecm-nav-bordercolor) var(--ecm-nav-backgroundcolor);*/
}

@media only screen and (max-width: 899px) {
   .gender, .username, .idextern, .company, .function {
      display: none !important;
   }
}

/* Make sure the DNN menu actually does go over the navbar when actively using it */
body:not(:has(.ECM_Navbar .offcanvas.show)) .personaBarContainer {
   z-index: 1031;
}

/* Fix for line height on fa-lg; (og line-height: .05em ¡not rem!) */
.fa-lg {
   line-height: 1;
}

/* Fix iframes height extra-menu-items */
.ecm-embedded-iframe {
   width: 100%;
   height: 80vh;
   border: none;
}