:root {
  --header-0: #5474A8;
  --header-1: #78A6F0;
  --header-2: #A7C5F5;
  --header-3: #E9F1FD;
  --header-4: #F6F9FE;
  --customheader-1: #a38dc1;
  --customheader-2: #c2b3d6;
  --customheader-3: #e0d9ea;
  --customheader-4: #F2EFF6;
  --primary: #0B5ED7;
  --background-red: #FFB3B3;
  --background-green: #7FFFD4;
  --background-blue: #0DCAF0;
  --sidebar-button-grey: #D9D9D9;
  --background-grey: #FAFAFA;
  --background-nav-grey: #F3F3F3;
  --background-empty-cell: #FFFFFF;
  --background-disabled-column: #6E8199;
  --bs-text-bg-gray: #E9ECEF;
  --icon-size: 24px;
  --nav-header-size: 4.6em;
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background-color: var(--bs-text-bg-gray);
  border: 1px solid var(--sidebar-button-grey);
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: var(--sidebar-button-grey);
}

/* Removes number selection arrows of input fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox: Removes number selection arrows of input fields */
input[type=number] {
  -moz-appearance: textfield;
}

/* Fix: If disabled-attribute is set in 'a'-element, the 'title'-attribute (tooltip) won't work anymore. */
a.disabled {
  pointer-events: auto!important;
  color: gray!important;
}
  a.disabled:active {
    pointer-events: none!important;
  }

.loader {
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid var(--header-1);
  width: 80px;
  height: 80px;
  -webkit-animation: spin 1.5s linear infinite; /* Safari */
  animation: spin 1.5s linear infinite;
  z-index:1000;
}
  .loader.green {
    border-top: 12px solid #1FA97B;
  }

/* Dialog */

.dialog-background {
  z-index: 10;
  background-color: rgba(42,58,84,0.6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  padding-right: 1em;
  padding-left: 1em;
}
  .dialog-background > .dialog-window {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    display: flex;
    flex-flow: column;
    background-color: white;
    border-radius: 5px;
    min-width:40em;
  }


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.benchmarkRow > .selectable:hover {
  color: var(--primary);
  text-decoration: underline;
  cursor:pointer;
}

.centerItem {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.parentContainer {
  display: flex;
}
  .parentContainer > .leftContainer {
    flex: 0.8;
    padding-right:2em;
  }
  .parentContainer > .rightContainer {
    flex: 1.2;
  }

.grid {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(28em, 1fr));
}

.gridMedium {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(36em, 1fr));
}

.gridLarge {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(48em, 1fr));
}


.gridResponsive {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(auto-fill, minmax(36em, 1fr));
}

@media only screen and (min-width: 1400px) {
    .gridResponsive {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(auto-fill, minmax(40em, 1fr));
    }
}

@media only screen and (min-width: 1800px) {
    .gridResponsive {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(auto-fill, minmax(44em, 1fr));
    }
}

.bottomRightElement {
  position: fixed;
  bottom: 1em;
  right: 2em;
  z-index: 10;
}

@media screen and (min-width:120em) {
  .grid, .gridLarge > .cardWide {
    grid-column: span 2 / auto;
  }

  .grid, .gridLarge > .cardTall {
    grid-row: span 2 / auto;
  }
}

.clickItem {
  font-weight:normal!important;
  color: var(--primary);
  cursor: pointer;
}
  .clickItem:hover {
    text-decoration: underline;
  }

/* Header */
.itemHeader0 {
  background-color: var(--header-0);
}
  .itemHeader0 > td, .itemHeader0 > th {
    color: white;
  }

.itemHeader1 {
  background-color: var(--header-1);
}
  .itemHeader1 > td, .itemHeader1 > th {
    color: white;
  }

.itemHeader2 {
  background-color: var(--header-2);
}
.itemHeader3 {
  background-color: var(--header-3);
}
.itemHeader4 {
  background-color: var(--header-4);
}

.separatorRow {
  height: 1em;
  background-color: transparent;
}

/* Header Custom Account */
a {
  text-decoration: none
}
.itemHeaderCustom1 {
  background-color: var(--customheader-1);
}
  .itemHeaderCustom1 > td {
    color: white;
  }

  .itemHeaderCustom1 > th {
    color: white;
  }

.itemHeaderCustom2 {
  background-color: var(--customheader-2);
}

.itemHeaderCustom3 {
  background-color: var(--customheader-3);
}

.itemHeaderCustom4 {
  background-color: var(--customheader-4);
}

a {
  text-decoration: none
}

tr.header th {
  background: var(--background-grey);
  color: black;
  vertical-align: top;
  z-index: 2;
  top: 0;
  position: sticky;
}

tr.headerBlue th {
  background: var(--header-1);
  color: white;
  vertical-align: top;
  z-index: 2;
  top: 0;
  position: sticky;
}

tr.headerWhite th {
  background: white;
  color: black;
  vertical-align: top;
  z-index: 2;
  top: 0;
  position: sticky;
}

table thead th.stickyColumn {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--background-grey);
}
table tbody th.stickyColumn {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--background-grey);
}

.table-header {
  position: sticky;
  left: 0;
  z-index: 3;
}

.bg-itemHeader-1 {
  background: var(--header-1) !important;
}

.bg-grey {
  background: var(--background-grey) !important;
}

td.separatorColumn {
  background-color: var(--header-1) !important;
  width: 0.2em;
  max-width: 0.2em;
}
th.separatorColumn {
  background-color: var(--header-1) !important;
  width: 0.2em;
  max-width: 0.2em;
}

td.separatorRow {
  background-color: var(--header-1) !important;
}

th.emptyBackgroundColor, td.emptyBackgroundColor {
  background-color: var(--background-empty-cell);
}

th.disabledCell, td.disabledCell {
  background-color: var(--background-disabled-column);
}

.file-input-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: white;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  padding: 5px;
}

  .file-input-zone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }


.warningItem {
  background-color: var(--background-red) !important;
}
td.warningItem {
  background-color: var(--background-red) !important;
}
th.warningItem {
  background-color: var(--background-red) !important;
}
tr.warningItem > td {
  background-color: var(--background-red) !important;
}

td.itemGreen {
  background-color: var(--background-green) !important;
}
th.itemGreen {
  background-color: var(--background-green) !important;
}

td.itemGrey {
  background-color: var(--background-empty-cell);
}
th.itemGrey {
  background-color: var(--background-empty-cell);
}

.detailItemHeader {
  background-color: var(--header-3);
}
  .detailItemHeader > td {
    font-weight: bold;
  }

.bgInfo {
  background-color: var(--background-blue);
}


.scrollable {
  overflow-y: hidden;
}

  .scrollable:hover {
    overflow-y: auto;
  }

.table-scroll {
  width:auto;
  z-index: 1;
  margin: auto;
  overflow-x:hidden;
  overflow-y: visible;
}

  .table-scroll table {
    width: 100%;
    margin: auto;
    border-spacing: 0;
  }

.table-wrap {
  position: relative;
}

.table-scroll thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  vertical-align: top;
}


/* safari and ios need the tfoot itself to be position:sticky also */
tr.darkFooterRow {
  bottom: 0;
  background-color: var(--header-0);
  color: white;
}

/* safari and ios need the tfoot itself to be position:sticky also */
tr.whiteFooterRow {
  bottom: 0;
  background-color: white;
  height: 1em;
}


/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.heightSmall {
  max-height: 18em
}

.heightMedium {
  max-height: 24em
}

.heightLarge {
  max-height: 38em
}



.btn-transition:focus, .btn-transition:hover {
  transform: translateY(-.1875rem);
}

.text-highlight-warning {
  background: linear-gradient(to bottom,rgba(245,202,153,.5),rgba(245,202,153,.5));
  background-position-x: left;
  background-position-y: 1em;
  background-attachment: scroll;
  background-size: 1em 0.2em;
  background-origin: padding-box;
  background-clip: border-box;
  background-repeat: repeat-x;
}

.text-justify {
    text-align: justify;
}

.z-index-4 {
  z-index: 4;
}

h-4 {
  height: 1rem; /* 16px */
}

.w-2 {
  width: 0.5rem; /* 8px */
}

.w-3 {
  width: 0.75rem; /* 12px */
}

.w-4 {
  width: 1rem; /* 16px */
}

.w-5 {
  width: 1.25rem; /* 20px */
}

.w-6 {
  width: 1.5rem; /* 24px */
}

.w-7 {
  width: 1.75rem; /* 28px */
}

.w-8 {
  width: 2rem; /* 32px */
}

.w-9 {
  width: 2.25rem; /* 36px */
}

.w-10 {
  width: 2.5rem; /* 40px */
}

.w-11 {
  width: 2.75rem; /* 44px */
}

.w-12 {
  width: 3rem; /* 48px */
}

.w-14 {
  width: 3.5rem; /* 56px */
}

.w-16 {
  width: 4rem; /* 64px */
}

.w-20 {
  width: 5rem; /* 80px */
}

.w-24 {
  width: 6rem; /* 96px */
}

.w-28 {
  width: 7rem; /* 112px */
}

.w-32 {
  width: 8rem; /* 128px */
}

.w-36 {
  width: 9rem; /* 144px */
}

.w-40 {
  width: 10rem; /* 160px */
}

.w-44 {
  width: 11rem; /* 176px */
}

.w-48 {
  width: 12rem; /* 192px */
}

.w-52 {
  width: 13rem; /* 208px */
}

.w-56 {
  width: 14rem; /* 224px */
}

.w-60 {
  width: 15rem; /* 240px */
}

.w-64 {
  width: 16rem; /* 256px */
}

.w-72 {
  width: 18rem; /* 288px */
}

.w-80 {
  width: 20rem; /* 320px */
}

.w-96 {
  width: 24rem; /* 384px */
}

.w-112 {
  width: 28rem;
}
.w-128 {
  width: 34rem;
}
.w-156 {
  width: 41rem;
}

.left-0 {
  left: 0 !important;
}
.left-72 {
  left: 18.5rem !important; /* 288px */
}
.left-112 {
  left: 28.5rem !important; /* 384px */
}
.left-120 {
  left: 30rem !important; /* 384px */
}

.z-index-1 {
  z-index: 1 !important;
}
.z-index-2 {
  z-index: 2 !important;
}
.z-index-3 {
  z-index: 3 !important;
}
.z-index-4 {
  z-index: 4 !important;
}

.swal2-title-dialog {
    text-align: start !important;
    padding: 0px 0px 0px 0px !important;
    margin: 0px !important;
}

.swal2-html-container-dialog {
    text-align: start !important;
    padding: 0px !important;
    margin: 16px 0px 0px 0px !important;
    font-size: 1em !important;
}

.swal2-actions-dialog {
    justify-content: end !important;
    margin: 16px 0px 0px 0px !important;
}

.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white !important;
    margin: 12px 12px 0px 12px !important;
}
.colored-toast .swal2-html-container {
    color: white !important;
    margin: 8px 12px 12px 12px !important;
}

.colored-toast .swal2-icon {
    color: white !important;
    border-color: white !important;
}
.colored-toast .swal2-x-mark-line-left {
    background-color: white !important;
}
.colored-toast .swal2-x-mark-line-right {
    background-color: white !important;
}

.rounded-pill-s {
  border-top-left-radius: 50rem !important;
  border-bottom-left-radius: 50rem !important;
}

.rounded-pill-e {
  border-top-right-radius: 50rem !important;
  border-bottom-right-radius: 50rem !important;
}

.cursor-pointer {
    cursor: pointer;
}

.icon-static {
  font-size: var(--icon-size);
}