*,
*::before,
*::after {
  box-sizing: border-box;
  word-wrap: break-word;
}

.container {
  max-width: 100%;
  padding-bottom: 40px;
}

:root {
  --lightGrey: #2E2E2E;
  --whiteGrey: #949494;
  --failed: #F4AFAF;
  --pingoSalmon: #fd4a5c;
  --pingoMint: #74E0C1;
  --pingoGrey: #1C1C1C;
  --pingoSuccess: #AFF4C3;
  --pingoDark: #111111;
  --modalBackground: #121212;
  --modalBackgroundContrast: #1e1e1e;

  --rz-primary: var(--pingoMint);
  --rz-primary-lighter: var(--pingoMint);
  --rz-primary-light: var(--pingoMint);
  --rz-primary-dark: var(--pingoMint);
  --rz-primary-darker: var(--pingoMint);

  --rz-secondary: var(--pingoSalmon);
  --rz-secondary-lighter: var(--pingoSalmon);
  --rz-secondary-light: var(--pingoSalmon);
  --rz-secondary-dark: var(--pingoSalmon);
  --rz-secondary-darker: var(--pingoSalmon);

  --rz-card-border: white !important;

  --rz-grid-selected-background-color: var(--pingoMint);

  --rz-base-background-color: var(--rz-base-800);

  --rz-inputtext: var(--rz-primary);

  --rz-button-base-color: var(--rz-white);
  --rz-button-base-hover-color: var(--rz-white);
  --rz-button-base-background-color: var(--rz-secondary);
  /*--rz-button-disabled-opacity: 1 !important;*/
  
  --rz-button-color: var(--rz-white);
  --rz-button-hover-color: var(--rz-white);

  --rz-link-color: var(--rz-secondary);
  --rz-link-text-decoration: none;
  --rz-link-hover-color: var(--rz-secondary-dark);
  --rz-link-hover-text-decoration: underline;

  --rz-border-primary: var(--rz-border-width) solid var(--rz-primary);
  --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light);
  --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter);
  --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark);
  --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker);
  --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary);
  --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light);
  --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter);
  --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark);
  --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker);

  --rz-dropdown-trigger-icon-width: var(--rz-icon-size);
  --rz-dropdown-trigger-icon-height: var(--rz-icon-size);
  --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0;

  --rz-dropdown-horizontal-padding: 1rem;

  --rz-dropdown-items-margin: 0;
  --rz-dropdown-items-padding: 0;

  --rz-input-font-size: var(--pingo-font-size) !important;
  
  --rz-autocomplete-input-font-size: var(--pingo-font-size) !important;

  --rz-dropdown-item-padding: 0;
  --rz-dropdown-item-font-size: var(--rz-input-font-size);
  --rz-dropdown-item-hover-background-color: var(--rz-base-400);
  --rz-dropdown-item-selected-background-color: var(--rz-base-300);
  --rz-dropdown-item-selected-shadow: none;
  --rz-dropdown-item-hover-color: var(--rz-white);
  --rz-dropdown-item-selected-color: var(--rz-white);
  --rz-dropdown-item-selected-hover-background-color: var(--rz-base-300);
  --rz-dropdown-item-selected-hover-color: var(--rz-white);
  --rz-dropdown-item-transition: none;
  --rz-dropdown-item-disabled-opacity: .2;

  --rz-dropdown-filter-border: var(--rz-border-base-500);
  --rz-dropdown-filter-padding: 1rem 0 0.5rem;
  --rz-dropdown-open-background-color: var(--rz-base-600);
  --rz-dropdown-open-border: 2px solid var(--rz-primary);
  --rz-dropdown-panel-border: none;
  --rz-dropdown-panel-shadow: var(--rz-shadow-4);
  --rz-dropdown-chips-padding: 0.4375rem 0.9375rem 0.4375rem 0.4375rem;

  --rz-multiselect-checkbox-margin: 0 1rem 0 0;

  --rz-selectbar-color: white;
  --rz-selectbar-selected-color: black;
  
  --rz-column-header-color: var(--pingoMint) !important;
  --rz-column-header-font-size: var(--pingo-font-size) !important;

  --rz-grid-header-color: var(--pingoMint) !important;
  --rz-grid-header-font-size: var(--pingo-font-size) !important;
  --rz-grid-header-text-transform: none !important;

  /*--rz-tabs-padding: 5px !important;*/
  /*--rz-tabs-tab-padding: 5px !important;*/
  /*--rz-tabs-tab-padding-block: 5px !important;*/
  /*--rz-tabs-tab-padding-inline: 5px !important;*/

  /*--rz-tabs-padding: 0px !important;*/
  /*--rz-tabs-tab-line-height: 20px !important;*/
  /*--rz-tabs-tab-font-size: var(--pingo-font-size) !important;*/
  /*--rz-tabs-tab-padding: 0px !important;*/
  /*--rz-tabs-tab-padding-block: 5px !important;*/
  /*--rz-tabs-tab-padding-inline: 0px !important;*/

  --rz-panel-menu-padding-inline: 0px !important;
  --rz-panel-menu-padding-block: 0px !important;
  --rz-panel-menu-height: 0px !important;
  --rz-panel-menu-item-padding-inline: 0px !important;
  --rz-panel-menu-item-padding-block: 0px !important;
  --rz-panel-menu-item-line-height: var(--pingo-navmenu-height) !important;
  --rz-panel-menu-item-height: var(--pingo-navmenu-height) !important;

  --rz-tabview-title-font-size: var(--rz-tabs-tab-font-size) !important;
  --rz-tabview-title-line-height: var(--rz-tabs-tab-line-height) !important;

  --rz-text-button-font-size: var(--pingo-font-size) !important;

  --rz-button-text-font-size: var(--pingo-font-size) !important;
  --rz-button-text-line-height: 10px !important;

  /*--rz-dropdown-padding: 1px !important;*/
  /*--rz-dropdown-block-padding: 1px !important;*/
  /*--rz-dropdown-inline-padding: 1px !important;*/
  /*--rz-dropdown-panel-padding: 1px !important;*/
  /*--rz-dropdown-label-padding: 1px !important;*/
  /*--rz-dropdown-label-block-padding: 1px !important;*/
  /*--rz-dropdown-label-inline-padding: 1px !important;*/

  --rz-datalist-padding: 1px !important;
  --rz-grid-cell-padding: 1px !important;

  /*--rz-grid-group-header-padding: 1px;*/
  /*--rz-grid-group-header-item-padding: 1px;*/
  /*--rz-grid-group-header-item-padding-block: 1px;*/
  /*--rz-grid-group-header-item-padding-inline: 1px;*/
  /*--rz-grid-group-header-item-title-margin-inline: 1px;*/
  
  /*--rz-group-header-padding: 1px !important;*/
  /*--rz-group-header-drop-padding: 1px !important;*/
  
  --rz-density-compact-padding: 1px !important;
  --rz-column-picker-padding: 1px !important;
  --rz-cell-data-padding: 1px !important;
  
  --rz-grid-cell-line-height: 10px !important;
  --rz-grid-cell-font-size: var(--pingo-font-size) !important;

  --rz-body-font-size: var(--pingo-font-size);
  
  /*--rz-input-line-height: 10px;*/
  
  /*--rz-grid-group-header-gap: 0;*/

  --rz-pager-numeric-button-selected-color: white !important;
}

/*.rz-pager .rz-pager-pages..rz-selected .rz-state-active{*/
/*  color: white !important;*/
/*}*/

/*::deep .rz-pager-pages .rz-state-active a {*/
/*  color: white !important; !* Example: White text color for the active page number *!*/
/*}*/

.rz-state-disabled {
  opacity: 1 !important; /* Set your desired opacity value here */
  /* You can also add other styles if needed, like cursor: not-allowed; */
}

html,
body,
input,
select {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  line-height: 19px;
  letter-spacing: 0.5px;
  color: white;
  scroll-behavior: smooth;
  background-color: var(--pingoDark);
}

/* EFFECTS UTILITY */
.lazy-load {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition: all 300ms ease-out;
}

.lazy-load.lazy {
  opacity: 0;
  visibility: hidden;
}

/* FONTS */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0px;
  color: white;
}

h1 {
  font-size: 3em; /* 48px */
  line-height: 56px;
}

h2 {
  font-size: 2.5em; /* 40px */
  line-height: 48px;
}

h3 {
  font-size: 1.75em; /* 28px */
  line-height: 40px;
}

h4 {
  font-size: 1.5em; /* 24px */
  line-height: 32px;
}

h5 {
  font-size: 1.25em; /* 20px */
  line-height: 28px;
}

h6 {
  font-size: 1em; /* 16px */
  line-height: 24px;
}

/* Utility font classes */

.fw-700 {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.fw-400 {
  font-weight: 400;
}

.fw-300 {
  font-weight: 300;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}


.full-width {
  width: 99.4vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* LINKS */

a {
  color: var(--pingoSalmon);
}

a:hover {
  color: white;
}

/* NAVIGATION */

.header-nav-container {
  height: 100px;
  background: var(--pingoGrey) !important;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.nav-link {
  font-family: 'Raleway', sans-serif;
  -webkit-transition: color 0.5s, font-size 0.5s;
  transition: color 0.5s, font-size 0.5s;
  font-size: 16px;
  text-transform: none;
  font-weight: 600;
  color: white !important;
}

.nav-link.active {
  color: var(--pingoMint) !important;
}

.nav-link:hover {
  color: var(--pingoMint) !important;
}

.nav-item {
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* CONTAINERS */

.container-box {
  background: var(--pingoGrey);
  border: 0;
  border-radius: 1px;
  padding: 1.5rem;
  margin-bottom: 16px;
}

/* FORM CONTROLS */

.combo-box {
  height: 46px;
}

.combo-box button, .combo-box .combo-input-box {
  /*height: 46px;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

.combo-box button {
  height: 30px;
  float: right;
  border: 1px solid #FD4A5C;
  align-items: center;
  justify-content: space-around;
  width: 130px;
}

.combo-box .combo-input-box {
  overflow: hidden;
}

.combo-box input {
  border: 0;
  width: 100%;
  padding: 0 3px;
  height: 30px;
}

.combo-input-box input {
  background-color: var(--lightGrey);
  border-radius: 2px;
  padding-left: 10px;
  padding: 5px;
}


.dropdown {
  background: var(--lightGrey);
  border-left: 0.5px solid white;
  color: var(--whiteGrey);
  border: 0;
  height: 50px;
  padding: 5px;
  width: 100%;
}


.search-input-box input, td input {
  background-color: var(--lightGrey);
  border-radius: 2px;
  padding-left: 10px;
  padding: 5px;
  border: 0;
  height: 30px;
  width: 100%;
}

.search-input-box textarea {
  background-color: var(--lightGrey);
  border-radius: 2px;
  padding-left: 10px;
  padding: 5px;
  border: 0;
  height: 46px;
}

/* MODAL */

.modal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  overflow-y: hidden !important;
  z-index: 900 !important;
}

.modal-backdrop {
  z-index: 850 !important;
}


.close-btn {
  border-radius: 50%;
  border: white;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: var(--modalBackground) !important;
  border-radius: 0px !important;
  color: white !important;
}

.modal-content .container-box {
  background: var(--pingoGrey) !important;
  color: white !important;
}

.modal-dialog {
  overflow-y: initial !important;
}

.modal-body {
  height: 80vh;
  overflow-y: auto;
}

.modal-body::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}


.modal-body::-webkit-scrollbar-track {
  background-color: #fd4a5c;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #949494;
  border-radius: 2pt;
  outline: 1px solid slategrey;
}

.modal-body-relative-height {
  height: auto !important;
}

.modal-body-med-height {
  height: 80vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-75 {
  height: 75vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-70 {
  height: 70vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-60 {
  height: 60vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-50 {
  height: 50vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-40 {
  height: 40vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-30 {
  height: 30vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-25 {
  height: 25vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-20 {
  height: 20vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-15 {
  height: 15vh !important;
  overflow-y: auto !important;
}

.modal-body-med-height-10 {
  height: 10vh !important;
  overflow-y: auto !important;
}


/* TABLES */
tbody tr td {
  background: var(--pingoDark);
  border-bottom: 0.5px solid var(--lightGrey);
  vertical-align: middle;
}

td.td-flex-button {
  display: flex;
  justify-content: space-around;
}

td button {
  width: 130px;
  height: 41px;
}

td .dropdown {
  height: 41px;
}


.table-quantity-rect {
  background: var(--lightGrey);
  border-width: 0px 0px;
  border-style: solid;
  border-color: var(--lightGrey);
}

.table-quantity-rect > p {
  color: var(--whiteGrey);
}

.header-line {
  height: 1px;
  background: white;
}

.table-item-line {
  border: 0.6px solid white;
}

.rz-dropdown-panel {
    z-index: 100000000!important;
}

.rz-popup {
    z-index: 100000000!important;
}

.driver-temp-move-label {
    margin-bottom: 0.5rem;
}

.input-container,
.dropdown-container,
.dropdown-menu {
  background: var(--pingoGrey);
  border-radius: 1px;
}

a.dropdown-item {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 600;
  color: white;
}

a.dropdown-item:hover {
  color: var(--pingoMint);
  background-color: transparent;
}

a.dropdown-item:focus {
  color: var(--pingoMint);
  background-color: transparent;
}

.tags p {
  display: inline-block;
  transition: all 300ms ease-out;
  backface-visibility: hidden;
  position: relative;
  position: relative;
  padding: 4px 16px;
  margin-bottom: 5px;
  border-radius: 14px;
}

/* COLOURS */

.pingo-whitegrey {
  color: var(--whiteGrey) !important;
}

.pingo-lightgrey {
  color: var(--lightGrey) !important;
}

.pingo-mint-colour {
  color: var(--pingoMint) !important;
}

.pingo-salmon-colour {
  color: var(--pingoSalmon) !important;
}

.pingo-grey {
  color: var(--pingoGrey) !important;
}

.pingo-dark {
  color: var(--pingoDark) !important;
}

.pingo-colour-success {
  color: var(--pingoSuccess);
}

.pingo-colour-failed {
  color: var(--failed);
}

.pingo-colour-bg-success {
  background-color: var(--pingoSuccess);
}

.pingo-colour-bg-failed {
  background-color: var(--failed);
}

.pingo-bg-whitegrey {
  background-color: var(--whiteGrey) !important;
}

.pingo-bg-lightgrey {
  background-color: var(--lightGrey) !important;
}

.pingo-bg-mint-colour {
  background-color: var(--pingoMint) !important;
}

.pingo-bg-salmon-colour {
  background-color: var(--pingoSalmon) !important;
}

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

.pingo-bg-dark {
  background-color: var(--pingoDark) !important;
}

/* BUTTONS */

.pingo-btn {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  color: white;
  overflow: hidden;
  text-decoration: none;
  /*position: relative;*/
  transition: 0.2s transform ease-in-out;
  will-change: auto transform;
  z-index: 0;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-around;
}

.pingo-btn::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0) rotate(10deg);
  transform-origin: top left;
  /*        transition: 0.2s transform ease-out;*/
  will-change: auto transform;
  z-index: -1;
}

.pingo-btn:hover::after {
  transform: translate(0, 0);
}

.pingo-btn:hover {
  transform: scale(1.05);
  will-change: auto transform;
}

.pingo-salmon-btn {
  background: var(--pingoSalmon);
  background-color: var(--pingoSalmon);
}

.pingo-mint-btn {
  background: var(--pingoMint);
  background-color: var(--pingoMint);
}

.pingo-grey-btn {
  background: var(--lightGrey);
  background-color: var(--lightGrey);
}

/*
.pingo-mint-btn::after,
.pingo-salmon-btn::after {
    background-color: white;
}*/
/*    .pingo-grey-btn::after {
        background-color: white;
    }*/

.pingo-salmon-btn:hover {
  color: var(--pingoSalmon);
}

.pingo-mint-btn:hover {
  color: var(--pingoMint);
  background-color: white;
}

.pingo-grey-btn:hover {
  color: var(--lightGrey);
  background-color: white;
}

/* BUTTON SIZES */
.pingo-xs-btn {
  border-radius: 1px;
  padding: 10px 15px 10px 15px;
}

.pingo-sm-btn {
  border-radius: 1px;
  padding: 10px 28px 10px 28px;
}

.pingo-md-btn {
  border-radius: 1px;
  padding: 11px 38px 11px 38px;
}

.pingo-lg-btn {
  border-radius: 1px;
  padding: 16px 40px 16px 40px;
}

/* LOADER */

.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: loader1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: loader2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: loader2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: loader3 0.6s infinite;
}

@keyframes loader1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes loader3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes loader2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}


.item-dropdown {
  padding: 5px;
  height: 46px;
  border: 0;
  width: 100%;
  min-width: 300px;
  background: #424242;
  color: #949494;
}

.vehicleinput {
  padding: 5px;
  height: 30px;
  border: 0;
  width: 100%;
  min-width: 300px;
  background: #424242;
  color: #949494;
}

.pagination {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 8px;
  padding: 20px;
}

.pagination-item {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #424242;
  width: 30px;
  height: 30px;
  margin-top: 10px;
  color: #949494;
  font-weight: bold;
  font-size: var(--pingo-font-size);
  text-align: center;
}

.pagination-item:hover {
  width: 35px;
  height: 35px;
  background: #74E0C1;
  color: #424242;
}

.pagination-active {
  width: 35px;
  height: 35px;
  background: #74E0C1;
  color: #424242;
}

.arrow {
  border: solid #949494;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.badge-circle {
  background-color: #fd4a5c !important;
  border-radius: 30px;
  font-size: 1.2em;
  width: 50px;
  height: 50px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  padding-top: 15px;
}

.badge-circle:hover {
  transform: scale(1.1) !important;
}

.pingo-checkbox {
  width: 21px !important;
  height: 21px !important;
  transform: scale(1) !important;
}

.pingo-loader {
  color: #fd4a5c
}

.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  /*width: 450px;*/
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  transition: .2s;
  cursor: pointer;
}

.choose-file-button {
  flex-shrink: 0;
  /* background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);*/
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
  width: 20rem;
}

.file-message {
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-selected {
  font-size: small;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 25px;
}

.file-input {
  opacity: 0;
  width: 100%;
  /* height: 200px; */
  /* position: absolute; */
  /* background-color: yellow; */
  /* top: 0; */
  position: absolute;
  left: 0;
  cursor: pointer;
}

.file-drop-area-drag-drop {
  border: 4px dashed rgba(255, 255, 255, 0.4);
  border-color: #fd4a5c !important
}

.btn-close-modal {
  background-color: #FD4A5C !important;
  border: 0px !important;
}

.form-label {
  font-size: 13px !important;
  vertical-align: center;
}

label {
  font-size: 13px !important;
}

.pingo-default-height {
  height: 30px !important;
}

.pingo-label-height {
  height: 20px !important;
}

.pingo-input-height {
  height: 50px !important;
}

.blazored-typeahead {
  border: 0px !important;
}

.blazored-typeahead__active-item {
  color: white;
}

.blazored-typeahead__result {
  color: black;
}

.offcanvas-body {
  color: black !important;
}

.offcanvas-header {
  color: black !important;
}

#offcanvasNotificationsLabel {
  color: black !important;
}

.navbar-collapse {
  z-index: 100;
  opacity: 0.9;
}

.navbar-nav .dropdown-menu {
  z-index: 101;
  position: relative;
}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .text_disabled {
    background: var(--lightGrey);
    border-left: 0.5px solid white;
    color: var(--whiteGrey);
    border: 0;
    height: 50px;
    padding: 5px;
    width: 100%;
  }
}

.pingo-radzenformfield-for-column {
  width: 100%;
  font-size: var(--pingo-font-size) !important;
}

.pingo-radzenrow-for-columns {
  width: 100%;
  padding: 0;
  margin: 0;
}

.pingo-radzenstack-for-radzencheckbox {
  width: 100%;
  height: 34px;
  padding-left: 15px;
  padding-right: 15px;
}

.rz-selectbar .rz-btn {
  font-size: var(--pingo-font-size) !important; /* You might need !important to override default styles */
}

.rz-button-text {
  font-size: var(--pingo-font-size) !important;
}

.rz-button-text-only {
  font-size: var(--pingo-font-size) !important;
}

.rz-button-md {
  font-size: var(--pingo-font-size) !important;
}

.pingo-tab-button-height .rz-tabs {
  height: 20px !important;
}

/*.rz-dropdown-label .rz-inputtext .rz-dropdown {*/
/*  font-size: var(--pingo-font-size) !important;*/
/*  padding: 0 !important;*/
/*  margin: 0 !important;*/
/*}*/

/*.rz-grid-table td, .rz-grid-table th {*/
/*  font-size: var(--pingo-font-size) !important;*/
/*  margin: 0 !important;*/
/*  padding: 1px !important;*/
/*  line-height: 10px !important;*/
/*}*/

.rz-datatable-emptymessage {
  padding-left: 10px !important;
}

.rz-autocomplete-input {
  padding-block: var(--rz-input-padding-block);
  padding-inline: var(--rz-input-padding-inline);
  background-color: transparent;
  color: var(--rz-input-value-color);
  font-family: inherit;
  font-size: var(--pingo-font-size) !important;
  box-shadow: var(--rz-input-shadow);
  border: none;
  height: var(--rz-input-height);
  line-height: var(--rz-input-line-height);
  width: 100%;
  transition: var(--rz-input-transition);

  &:focus {
    outline: none;
  } !important;

  &:disabled {
    @extend %input-disabled;
    border: none;
  }
}