:root {
    /* 
    EDAG CI Farben als CSS-Variablen.
    Benutzung Bsp.:
         background-color: var(--edag-red); 
    */
    --edag-darkgrey: rgb(69, 85, 97);
    --edag-white: rgb(255,255,255);
    --edag-red: rgb(215,25,70);
    --edag-grey: rgb(148,156,163);
    --edag-lightgrey: rgb(228,229,230);
    --edag-brown: rgb(184,172,165);
    --edag-beige: rgb(216,207,201);

    /* Transparenz */
    --edag-darkgrey-tp: rgba(69, 85, 97,0.8);
    --edag-lightgrey-tp: rgba(228,229,230,0.5);
}

.custom-html {
    margin: 0;
    height: 100%;
    min-height: 100%;
}

.custom-body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-main-scrollhidden {
    overflow:hidden;
    -webkit-overflow-scrolling: touch;
    flex: auto;
}

.custom-main-scroll {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    flex: auto;
}

.custom-main {
    flex: auto;
}

.custom-footer {
    background-color:var(--edag-lightgrey);
    text-align: right;
}
/******* Anwendung der EDAG CI Farben *******/
.color-edag-darkgrey {
    color: var(--edag-darkgrey);
}

.color-edag-red {
    color: var(--edag-red);
}

.color-edag-grey {
    color: var(--edag-grey);
}

.color-edag-lightgrey {
    color: var(--edag-lightgrey);
}

.color-edag-brown {
    color: var(--edag-brown);
}

.color-edag-beige {
    color: var(--edag-beige);
}

.text-edag-darkgrey {
    color: var(--edag-darkgrey);
} 

.color-edag-white {
    color: white;
}

.btn-edag-red {
    background-color: var(--edag-red);
    color: white;
}

.btn-edag-darkgrey {
    background-color: var(--edag-darkgrey);
    color: white;
    margin-bottom: 0.5rem;
}

.hr-edag-lightgrey {
    width: 95%;
    height:0.01rem;
    background-color: var(--edag-lightgrey);
}

hr {
    background-color:var(--edag-darkgrey);
}

.font-bold {
    font-weight: bold;
}

/******* CSS-Klassen für base.html (werden auf jeder Seite gebraucht) *******/
body {
    background-color: var(--edag-lightgrey-tp);
    color: var(--edag-darkgrey);
}

.hidden {
    display: none !important;
}

.container.content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand-text {
    font-weight: 600;
    font-style: italic;
    font-size: 1em;
    text-align: center;
    padding-left:5px;
    /* vertical-align: middle; */
}

@media (max-width: 768px) { 
    .navbar-brand-text {
        text-align: none;
        vertical-align: middle;
    }
}

.btn-logout {
    /* remove complete default styling of <button> */
    background: none;
    color: var(--edag-darkgrey);
	border: none;
    padding: 0;
    padding-right: 2.5rem;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.custom-float {
    float:left;
}

.btn-logout:active {
    color: white;
}

/* navbar dropdown Animation */
@media (min-width: 992px) {
    .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
}
  
@keyframes slideIn {
    0% {
      transform: translateY(-1rem);
      opacity: 0;
    }
    100% {
      transform:translateY(0rem);
      opacity: 1;
    }
    0% {
      transform: translateY(-1rem);
      opacity: 0;
    }
}
  
@-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
    }
    0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
    }
}
  
.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.table {
    font-size:0.75rem;
    
}

h2 {
    margin-top:1rem;
    margin-left:3rem;
    color:var(--edag-darkgrey) 
}

/* div .form-group {
    width: auto; 
} */

a .btn .btn-dark .btn-sm {
    margin:0.1rem;
    font-size:7pt;
    float:left;
}

ul {
    align-items:flex-end;
}