.label-container {
  position: relative;
}

.process-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  row-gap: 10px;
  column-gap: 10px;
  margin-bottom: 5px;
}

.span-row {
  grid-column: 1/-1;
}

.span-row-2 {
  grid-column: span 2;
}

.span-col-2 {
  grid-row: span 2;
}

:root {
  /*Complementary colors*/
  --rmis-midnightnavy-complementary: #566293;
  --rmis-midnightnavy-light: #E7F3F7;
  --rmis-green-complementary: #20A02B;
  --rmis-green-complementary-rgb: 32, 160, 43;
  --rmis-blue-complementary: #4A90E2;
  --rmis-blue-complementary-rgb: 74, 144, 226;
  --rmis-red-complementary: #dc3545;
  --rmis-red-complementary-rgb: 220, 53, 69;
  --rmis-orange-complementary: #E67E22;
  --rmis-orange-complementary-rgb: 230, 126, 34;
  --rmis-yellow-complementary: #eeb363;
  --rmis-yellow-complementary-rgb: 238, 179, 99;
  /*Base colors*/
  --shadow-level-1: 0px 0px 2px rgba(0,0,0,0.080), 0px 2px 2px rgba(0,0,0,0.080);
  --shadow-level-2: 0px 4px 12px rgba(0,0,0,0.040);
  --shadow-level-3: 0px 2px 2px rgba(0,0,0,0.080), 0px 2px 2px rgba(0,0,0,0.080), 0px 4px 12px rgba(0,0,0,0.040);
  --shadow-level-4: 0px 22px 64px rgba(0,0,0,0.220);
  --rmis-red-200: rgb(238 186 184 / 41%);
  --rmis-gray: #262626;
  --rmis-white: #ffffff;
  --rmis-black: #000000;
  --rmis-base-100: #F4F5F9;
  --rmis-base-200: #E9EAED;
  --rmis-base-300: #E0E1E4;
  --rmis-base-400: #C9CACD;
  --rmis-base-500: #AFAFB2;
  --rmis-base-600: #8D8E90;
  --rmis-base-700: #707072;
  --rmis-base-800: #4F4F50;
  --rmis-base-900: #262526;
  /* Red */
  --rmis-red-theme: #A02520;
  --rmis-red: #A02520;
  --rmis-red-900: #B73231;
  --rmis-red-800: #C13D3D;
  --rmis-red-700: #CA4948;
  --rmis-red-600: #D35553;
  --rmis-red-500: #DC6060;
  --rmis-red-400: #E56C6C;
  --rmis-red-300: #EE7777;
  --rmis-red-200: #F78383;
  --rmis-red-100: #ffe6e6;
  /* Radzen overrides */
  --rz-dropdown-item-hover-background-color: var(--rmis-red-100) !important;
  --rz-dropdown-item-selected-background-color: var(--rmis-red-100) !important;
  --rz-dropdown-item-hover-color: var(--rmis-red-600) !important;
  --rz-dropdown-item-selected-color: var(--rmis-red-600) !important;
  --rz-accordion-content: #fbf4f4 !important;
  --rz-accordion-header: #e3e3e3 !important;
  /* Radzen overrides */
  --rz-rating-font-size: 45px !important;
  --rz-rating-selected-color: var(--rmis-red) !important;
}

/* Radzen checkboxes */
:root {
  --rz-checkbox-width: 1.85rem !important;
  --rz-checkbox-height: 1.85rem !important;
  --rz-checkbox-checked-icon-background-color: var(--rmis-base-900) !important;
  --rz-checkbox-checked-icon-border-radius: 60% !important;
  --rz-checkbox-checked-color: var(--rmis-white) !important;
  --rz-checkbox-border-radius: var(--rz-border-radius);
  --rz-checkbox-icon-width: 1.65rem !important;
  --rz-checkbox-icon-height: 1.65rem !important;
  --rz-checkbox-icon-font-size: 1.65rem !important;
}

/* Radzen Paginator */
:root {
  --rz-paginator-numeric-button-selected-background-color: var(--rmis-red-100) !important;
  --rz-paginator-numeric-button-selected-color: var(--rmis-red) !important;
  --rz-paginator-numeric-button-selected-border: var(--rmis-red) !important;
}

:root {
  --rz-slider-handle-hover-background-color: var(--rmis-red) !important;
  --rz-slider-handle-hover-border: 0.1rem solid var(--rmis-400) !important;
  --rz-slider-handle-border: 0.25rem solid var(--rmis-base-400) !important;
  --rz-slider-range-background-color: var(--rmis-red-900) !important;
  --rz-slider-horizontal-height: 0.25rem !important;
  --rz-grid-hover-color: var(--rmis-red-900) !important;
  --rz-grid-selected-color: var(--rmis-red-900) !important;
}

:root {
  --rz-primary: #A02520 !important;
  --rz-dropdown-item-selected-color: var(--rmis-base-900) !important;
  --rz-dropdown-item-hover-color: var(--rmis-red-theme) !important;
  --rz-dropdown-item-selected-hover-background-color: var(--rmis-base-400) !important;
  --rz-dropdown-item-selected-hover-color: var(--rmis-base-600) !important;
  --rz-datepicker-calendar-hover-color: var(--rmis-base-600) !important;
  --rz-datepicker-calendar-hover-color: var(--rmis-red-theme) !important;
}

.label-container {
  position: relative;
}

.process-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  row-gap: 10px;
  column-gap: 10px;
  margin-bottom: 5px;
}

.span-row {
  grid-column: 1/-1;
}

.span-row-2 {
  grid-column: span 2;
}

.span-col-2 {
  grid-row: span 2;
}

:root {
  /*Complementary colors*/
  --rmis-midnightnavy-complementary: #566293;
  --rmis-midnightnavy-light: #E7F3F7;
  --rmis-green-complementary: #20A02B;
  --rmis-green-complementary-rgb: 32, 160, 43;
  --rmis-blue-complementary: #4A90E2;
  --rmis-blue-complementary-rgb: 74, 144, 226;
  --rmis-red-complementary: #dc3545;
  --rmis-red-complementary-rgb: 220, 53, 69;
  --rmis-orange-complementary: #E67E22;
  --rmis-orange-complementary-rgb: 230, 126, 34;
  --rmis-yellow-complementary: #eeb363;
  --rmis-yellow-complementary-rgb: 238, 179, 99;
  /*Base colors*/
  --shadow-level-1: 0px 0px 2px rgba(0,0,0,0.080), 0px 2px 2px rgba(0,0,0,0.080);
  --shadow-level-2: 0px 4px 12px rgba(0,0,0,0.040);
  --shadow-level-3: 0px 2px 2px rgba(0,0,0,0.080), 0px 2px 2px rgba(0,0,0,0.080), 0px 4px 12px rgba(0,0,0,0.040);
  --shadow-level-4: 0px 22px 64px rgba(0,0,0,0.220);
  --rmis-red-200: rgb(238 186 184 / 41%);
  --rmis-gray: #262626;
  --rmis-white: #ffffff;
  --rmis-black: #000000;
  --rmis-base-100: #F4F5F9;
  --rmis-base-200: #E9EAED;
  --rmis-base-300: #E0E1E4;
  --rmis-base-400: #C9CACD;
  --rmis-base-500: #AFAFB2;
  --rmis-base-600: #8D8E90;
  --rmis-base-700: #707072;
  --rmis-base-800: #4F4F50;
  --rmis-base-900: #262526;
  /* Red */
  --rmis-red-theme: #A02520;
  --rmis-red: #A02520;
  --rmis-red-900: #B73231;
  --rmis-red-800: #C13D3D;
  --rmis-red-700: #CA4948;
  --rmis-red-600: #D35553;
  --rmis-red-500: #DC6060;
  --rmis-red-400: #E56C6C;
  --rmis-red-300: #EE7777;
  --rmis-red-200: #F78383;
  --rmis-red-100: #ffe6e6;
  /* Radzen overrides */
  --rz-dropdown-item-hover-background-color: var(--rmis-red-100) !important;
  --rz-dropdown-item-selected-background-color: var(--rmis-red-100) !important;
  --rz-dropdown-item-hover-color: var(--rmis-red-600) !important;
  --rz-dropdown-item-selected-color: var(--rmis-red-600) !important;
  --rz-accordion-content: #fbf4f4 !important;
  --rz-accordion-header: #e3e3e3 !important;
  /* Radzen overrides */
  --rz-rating-font-size: 45px !important;
  --rz-rating-selected-color: var(--rmis-red) !important;
}

/* Radzen checkboxes */
:root {
  --rz-checkbox-width: 1.85rem !important;
  --rz-checkbox-height: 1.85rem !important;
  --rz-checkbox-checked-icon-background-color: var(--rmis-base-900) !important;
  --rz-checkbox-checked-icon-border-radius: 60% !important;
  --rz-checkbox-checked-color: var(--rmis-white) !important;
  --rz-checkbox-border-radius: var(--rz-border-radius);
  --rz-checkbox-icon-width: 1.65rem !important;
  --rz-checkbox-icon-height: 1.65rem !important;
  --rz-checkbox-icon-font-size: 1.65rem !important;
}

/* Radzen Paginator */
:root {
  --rz-paginator-numeric-button-selected-background-color: var(--rmis-red-100) !important;
  --rz-paginator-numeric-button-selected-color: var(--rmis-red) !important;
  --rz-paginator-numeric-button-selected-border: var(--rmis-red) !important;
}

:root {
  --rz-slider-handle-hover-background-color: var(--rmis-red) !important;
  --rz-slider-handle-hover-border: 0.1rem solid var(--rmis-400) !important;
  --rz-slider-handle-border: 0.25rem solid var(--rmis-base-400) !important;
  --rz-slider-range-background-color: var(--rmis-red-900) !important;
  --rz-slider-horizontal-height: 0.25rem !important;
  --rz-grid-hover-color: var(--rmis-red-900) !important;
  --rz-grid-selected-color: var(--rmis-red-900) !important;
}

:root {
  --rz-primary: #A02520 !important;
  --rz-dropdown-item-selected-color: var(--rmis-base-900) !important;
  --rz-dropdown-item-hover-color: var(--rmis-red-theme) !important;
  --rz-dropdown-item-selected-hover-background-color: var(--rmis-base-400) !important;
  --rz-dropdown-item-selected-hover-color: var(--rmis-base-600) !important;
  --rz-datepicker-calendar-hover-color: var(--rmis-base-600) !important;
  --rz-datepicker-calendar-hover-color: var(--rmis-red-theme) !important;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .fade-in {
    animation: fadeIn 1s ease-in-out;
  }
  @keyframes showCard {
    0% {
      opacity: 0;
      transform: translateY(1.25rem);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--rmis-base-100);
  z-index: 999;
  backdrop-filter: blur(0.95px);
  opacity: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.loading-spinner {
  height: 125px;
  width: 125px;
  background-color: var(--rmis-white);
  overflow: hidden;
  box-shadow: 0px 22px 64px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 3s infinite;
  z-index: 99999999;
  border: 1px solid var(--rmis-base-800);
  border-radius: 4px;
}
.loading-spinner img {
  margin-top: -8px;
}

.loading-text {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 20px;
  text-indent: 0px;
  text-align: center;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.9) translate(-50%, -50%);
    transform-origin: 0 0;
    pointer-events: none;
  }
  50% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
    transform-origin: 0 0;
    pointer-events: all;
  }
  100% {
    opacity: 0.8;
    transform: scale(0.9) translate(-50%, -50%);
    transform-origin: 0 0;
    pointer-events: none;
  }
}
input {
  width: 100%;
  background: var(--rmis-white);
  height: 38px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--rmis-base-400);
  text-indent: 15px;
  color: var(--rmis-base-800);
}

.error {
  border: 1px solid var(--rmis-red-complementary);
}

label {
  color: var(--rmis-base-900);
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.filler {
  flex: 1;
}

body {
  color: var(--rmis-base-900);
}

/*Scrollbars starts here */
:root {
  --scroll-bar-width: 5px;
  --scroll-bar-color: red;
  --scroll-bar-track: #f1f1f1;
  --scroll-bar-thumb: #888;
  --scroll-bar-hover: #555;
}

/* width */
::-webkit-scrollbar {
  width: var(--scroll-bar-width);
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scroll-bar-track);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scroll-bar-thumb);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-bar-hover);
}

.highlight {
  border: 1px solid red !important;
}
.highlight:before {
  content: "asdasd";
  display: block;
  position: relative;
  background: red;
  height: 45px;
  z-index: 9999999999999;
  width: 45px;
}

.rz-data-grid-data {
  overflow: auto;
  flex: 1;
  box-shadow: var(--rz-grid-data-border-shadow);
  font-family: Arial, Helvetica, sans-serif;
}

div.rz-fileupload-buttonbar .rz-fileupload-choose {
  width: 100%;
  text-align: center;
  color: var(--rmis-red);
  background-color: transparent;
  border: 1px solid var(--rmis-red);
}

/* Override hover */
div.rz-fileupload-buttonbar .rz-fileupload-choose:hover {
  color: var(--rmis-white);
  background-color: var(--rmis-red) !important;
}

div.rz-notification {
  z-index: 9999999;
  position: absolute;
  top: -0.2rem;
  right: 0.2rem;
}

.grid-wrapper {
  display: grid;
  grid-template-rows: minmax(65px, max-content) auto;
  gap: 11px;
  height: calc(100% - 25px);
  padding: 15px;
}
.grid-wrapper .grid-wrapper-heading .material-icons {
  font-size: 35px;
  width: 54px;
  text-align: center;
}

.grid-wrapper-actions {
  grid-template-rows: 65px 1fr minmax(30px, max-content);
}

.card {
  border: 1px solid red;
  border-color: var(--rmis-base-400);
  border-radius: 4px;
  background: var(--rmis-white);
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  overflow-x: hidden;
  justify-content: space-between;
}
.card h1, .card h2, .card h4, .card h5, .card h6 {
  margin: 0px;
}