@import "typography.css";
@import "header.css";
@import "footer.css";
@import "icons.css";
@import "sidebar.css";
@import "navbar.css";
@import 'dynamic-form/dynamic-form.css';
@import 'dynamic-form/multiple-choice.css';
@import "login.css";
@import "overview.css";
@import "passwort-anlegen.css";
@import "abgelaufen.css";
@import "catalog-header.css";
@import "home.css";
@import "error-page.css";


:root {
  --h2-font-color: #00854A;
  --color-dark-grey-1: #4C4F54;
  --color-light-grey-1: #9AA0A2;
  --color-light-grey-2: #EEEFF1;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --accent-color-bmel: #215947;
  --accent-filter-bmel: invert(24%) sepia(61%) saturate(451%) hue-rotate(110deg) brightness(97%) contrast(86%);
  --white-filter: invert(99%) sepia(1%) saturate(6%) hue-rotate(340deg) brightness(102%) contrast(102%);
  --color-error-red: #A3002B;
  --main-color-ble: #66B692;
  --main-color-bmel: #69B63F;
  --accent-color-bmel: #215947;
  --accent-color-blue: #004B76;
  --light-color-green: #DAECE4;
  --main-color-orange: #F7BB3D;
  --color-white: #FFFFFF;

  --kolibri-color-primary: var(--accent-color-bmel);
  --kolibri-color-primary-variant: var(--accent-color-blue);
  --kolibri-color-danger: #b4003c;
  --kolibri-color-success: var(--main-color-bmel);
  --kolibri-font-family: "BundesSans Web";
}

@font-face {
    font-family: "BundesSans Web";
    src: url("./../fonts/BundesSans-Web-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "BundesSans Web";
    src: url("./../fonts/BundesSans-Web-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

html, body, * {
    font-family: var(--kolibri-font-family);
}


html,
body {
    font-size: 16px;
    height: 100%;
    color: var(--color-dark);
}

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

aside {
    height: 100%;
    width: 30%;
}

main {
    display: flex;
    height: auto;
    width: 100%;
    flex-grow: 1;
}

.ble-logo-small {
    width: 53px;
    height: 36px;
    background-image: url("../images/ble-logo-small.svg");
    background-repeat: no-repeat;
}

.main-container {
    height: 100%;
    width: 70%;
}

.w-100 {
    width: 100%;
    font-size: 16px;
}

:host(.btn-primary) {

    background-color: var(--accent-color-bmel);
    color: white;
    font-weight: 300;

}
.btn-primary:hover { background-color: var(--accent-color-blue) }

.alert-danger {
    color: white !important;
    background: var(--color-error-red) !important;
    font-size: 16px;
}

.alert-danger a {
    color: white !important;
    text-wrap: nowrap;
}

.alert-danger i {
    display: inline-block;
    margin-right: 4px;
}

.alert-success {
    color: var(--color-black) !important;
    background: var(--main-color-bmel) !important;
    font-size: 16px;
}

.alert-success a { text-wrap: nowrap; }

.alert-success i {
    display: inline-block;
    margin-right: 4px;
}

.alert-warning {
    color: var(--color-black) !important;
    background: #F9E03A !important;
    font-size: 16px;
}

.alert-warning a { text-wrap: nowrap; }

.alert-warning i {
    display: inline-block;
    margin-right: 4px;
}

.catalog-header{
    margin-top: 3.5rem;
}

.questionnaire-title {
  margin: 0.25rem 0;
  font-size: 1.5rem;
  line-height: 2em;
  font-weight: 700;
  padding: 0 !important;
}

.questionnaire-description {
  margin: 0.25rem 0 2rem;
  font-size: 1rem;
  line-height: 1.5em;
  font-weight: 400;
  padding: 0 !important;
}

.kol-toast-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

.container-wrap{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 2.125rem;
    padding-right: 2.125rem;
}

.notification-box-container {
  max-width: 400px;
  width: 100%;
  margin-top: 1rem;
}

.container-fluid {
    padding-top: 224px !important;
}

.login-main-p {
    padding-top: 201px !important
}