@import "typography.css";
@import "header.css";
@import "footer.css";
@import "icons.css";
@import "login.css";
@import "company-details.css";
@import "navbar.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-badge-green: #008000;
  --color-badge-red: #A3002B;
  --color-badge-orange: #F49F26;
  --color-badge-grey: #A4A4A3;
  --accent-color-bmel: #215947;
  --accent-filter-bmel: invert(24%) sepia(61%) saturate(451%) hue-rotate(110deg) brightness(53%) contrast(80%);
  --white-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  --color-error-red: #A3002B;
  --main-color-ble: #66B692;
  --main-color-bmel: #69B63F;
  --accent-color-blue: #004B76;
  --accent-color-blue-filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(1726%) hue-rotate(179deg) brightness(95%) contrast(103%);
  --light-color-green: #DAECE4;

  --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";
  --kolibri-border-radius: 2px;
  --color-secondary: white;

  --bs-dark: var(--color-black);
}

@font-face {
    font-family: "BundesSans Web";
    src: url("./../fonts/BundesSans-Web-Regular.ttf")format("truetype"),
         url("./../fonts/BundesSans-Web-Medium.ttf")format("truetype"),
         url("./../fonts/BundesSans-Web-Bold.ttf")format("truetype");
}

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

body {
    color: var(--color-black);
    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) }


.filter-form-container {
    background-color: var(--color-light-grey-2);
    padding: .5rem;
}

.container-selected-samples {
    color: var(--accent-color-bmel);
    font-weight: bold;
    padding-top: 1rem;
}

.table-dynamic-pagination-total-elements {
    color: var(--color-black);
}

.pt-5 {
    padding-top: 54px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.w-44 {
    width: 44px;
}

.description {
    margin-bottom: 24px;
}

#backButton {
    max-width: 44px;
}

.vb-multi-select-container {
    position: relative;
 }

.vb-multi-select-options {
    background-color: #ffffff;
    display: none;
    list-style-type: none;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.5rem;
    position: absolute;
    width: 100%;
    z-index: 1000;
}


.vb-multi-select-container.open > .vb-multi-select-options {
    display: block !important;
}

.vb-multi-select-container:not(:focus-within)  > .vb-multi-select-options{
    display: none !important;
}

kol-toast-container {
    position-area: top;
    z-index: 10000;
}

.accordion-container h2 {
    color: var(--color-black);
    margin-bottom: 16px !important;
}

.accordion-container kol-accordion { border-top: var(--color-light-grey-1) solid 1px }

.company-audit-details-section p:last-of-type {
    margin-bottom: 0;
}