:root {
  --emata-text-color: #242527;
  --emata-text-color-secondary: #6c757d;
  --emata-text-color-notes: #696b6c;
  --emata-text-color-tertiary: #ffffff;
  --emata-text-color-error: #d80537;
  --emata-text-color-warning: #fd7932;
  --emata-border-color: rgba(218, 219, 220, 1);
  --emata-system-attention-color: #1b71e9;

  --emate-font-family: "Inter", sans-serif;
  --emata-font-size: 15px;
  --emata-font-size-secondary: 14px;
  --emata-font-weight: 500;
  --emata-line-height: 24px;
  --emata-line-height-secondary: 18px;
  --emata-letter-spacing: 0%;
  --emata-letter-spacing: 0;

  --emata-input-border-color: #e9ecef;
  --emata-input-background-color: #ffffff;

  --emata-card-border-color: #9ca1a5;
  --emata-card-border-line-width: 1px;
  --emata-card-background-color: #fafbfb;
  --emata-card-border-radius: 8px;
  --emata-card-padding: 24px;

  --emata-color: #242527;

  --emata-background-color: #ecedee;
  --emata-background-color-secondary: #ffffff;
  --emata-background-color-tertiary: #f4f5f5;
  --emata-background-color-error: #d80537;

  --emata-small-popup-max-width: 400px;
  --emata-small-popup-min-height: 500px;
  --emata-medium-popup-max-width: 800px;
  --emata-medium-popup-min-height: 500px;
  --emata-large-popup-max-width: 1200px;
  --emata-large-popup-min-height: 500px;

  --emata-logo-small-width: 2.25rem;
  --emata-logo-small-height: 2.25rem;

  --emata-color-green: #27a669;

  /* Primary button variables */
  --emata-primary-btn-bg: #242527;
  --emata-primary-btn-hover-bg: #242527;
  --emata-primary-btn-disabled-bg: #dadbdc;
  --emata-primary-btn-text: #ffffff;
  --emata-primary-btn-hover-text: #ffffff;
  --emata-primary-btn-disabled-text: #9ca1a5;
  --emata-primary-btn-border: none;
  --emata-primary-btn-hover-border: none;
  --emata-primary-btn-disabled-border: none;

  /* Secondary button variables */
  --emata-secondary-btn-bg: #ffffff;
  --emata-secondary-btn-hover-bg: #dadbdc;
  --emata-secondary-btn-disabled-bg: #dadbdc;
  --emata-secondary-btn-text: #242527;
  --emata-secondary-btn-hover-text: #242527;
  --emata-secondary-btn-disabled-text: #9ca1a5;
  --emata-secondary-btn-border: 1px solid #dadbdc;
  --emata-secondary-btn-hover-border: none;
  --emata-secondary-btn-disabled-border: none;

  /* Subtle button variables */
  --emata-subtle-btn-bg: #ffffff;
  --emata-subtle-btn-hover-bg: #ffffff;
  --emata-subtle-btn-disabled-bg: #ffffff;
  --emata-subtle-btn-text: #242527;
  --emata-subtle-btn-hover-text: #242527;
  --emata-subtle-btn-disabled-text: #9ca1a5;
  --emata-subtle-btn-border: none;
  --emata-subtle-btn-hover-border: none;
  --emata-subtle-btn-disabled-border: none;

  /* Error colors */
  --emata-error-background: rgba(216, 5, 55, 1);
  --emata-error-highlight: rgba(255, 204, 205, 1);
  --emata-error-surface: rgba(253, 237, 238, 1);
  --emata-error-text: rgba(216, 5, 55, 1);
  --emata-error-border: rgba(216, 5, 55, 1);

  /* Warning colors */
  --emata-warning-background: rgba(253, 121, 50, 1);
  --emata-warning-highlight: rgba(255, 236, 226, 1);
  --emata-warning-surface: rgba(255, 249, 245, 1);
  --emata-warning-text: rgba(253, 121, 50, 1);
  --emata-warning-border: rgba(253, 121, 50, 1);

  /* Information colors */
  --emata-info-background: rgba(27, 113, 233, 1);
  /* --emata-info-highlight: 
  --emata-info-surface: */
  --emata-info-text: rgba(27, 113, 233, 1);
  --emata-info-border: rgba(27, 113, 233, 1);

  /* Success colors */
  --emata-confirmation-background: rgba(39, 166, 105, 1);
  /* --emata-confirmation-highlight: waiting design
  --emata-confirmation-surface: waiting design */
  --emata-confirmation-text: rgba(39, 166, 105, 1);
  --emata-confirmation-border: rgba(39, 166, 105, 1);

  /* General for input fields & select */
  --emata-fields-font-size: 0.9375rem;
  --emata-fields-placeholder: rgba(132, 138, 143, 1);
  --emata-fields-icon-color: rgba(36, 37, 39, 1);
  --emata-fields-label-color: rgba(36, 37, 39, 1);

  /* Input fields (including checkboxes) & select fields */
  --emata-fields-bg: rgba(255, 255, 255, 1);
  --emata-fields-text: rgba(36, 37, 39, 1);
  --emata-fields-border: rgba(218, 219, 220, 1);
  --emata-fields-hover-bg: rgba(250, 251, 251, 1);
  --emata-fields-hover-text: rgba(36, 37, 39, 1);
  --emata-fields-hover-border: rgba(156, 161, 165, 1);
  --emata-fields-disabled-bg: rgba(236, 237, 238, 1);
  --emata-fields-disabled-text: rgba(156, 161, 165, 1);
  --emata-fields-disabled-border: rgba(218, 219, 220, 1);

  /* non-editable section of an input field (example can be found in the Disposition Manager settings page) */
  --emata-fields-ned-bg: rgba(248, 248, 248, 1);
  --emata-fields-ned-text: rgba(105, 107, 108, 1);

  /* select section of an input field (example: phone number with country code selection) */
  --emata-fields-selector-color: rgba(132, 138, 143, 1);
  --emata-fields-selector-icon: rgba(36, 37, 39, 1);
  --emata-fields-disabled-selector-icon: rgba(156, 161, 165, 1);

  /* separators */
  --emata-separator-color: rgba(218, 219, 220, 1);
  --emata-separator-width: 1px;
  --emata-separator-style: solid;

  /* borders */
  --emata-border-width: 1px;
  --emata-border-style: solid;
  --emata-border-radius: 8px;

  /* Main backgrounds */
  --emata-page-bg: #ecedee;
  --emata-header-bg: #ffffff;
  --emata-footer-bg: #ecedee;

  /* Emata Filters/Tabs styles */
  /* all states */
  --emata-pills-font-size: 0.75rem;
  --emata-pills-side-padding: 1.25rem;
  --emata-pills-vertical-padding: 0.5rem;
  --emata-pills-gap: 0.25rem;

  /* normal state */
  --emata-pills-bg: rgba(255, 255, 255, 1);
  --emata-pills-color: var(--emata-text-color-secondary) !important;

  /* hover state */
  --emata-pills-hover-bg: rgba(218, 219, 220, 1);
  --emata-pills-hover-color: var(--emata-text-color) !important;

  /*disabled state */
  --emata-pills-disabled-bg: rgba(236, 237, 238, 1);
  --emata-pills-disabled-color: rgba(156, 161, 165, 1);
}

/* Profile image styles */
.profile-image {
  height: 32px;
  width: 32px;
  object-fit: cover;
  object-position: center;
}

/* Emata primary and secondary buttons + success buttons*/
.emata-primary-button,
.emata-secondary-button,
.emata-success-button {
  height: 54px;
  width: auto;
  border-radius: var(--emata-border-radius);
  padding: 15px 24px !important;
}

.emata-primary-button,
.emata-primary-button-small {
  background-color: var(--emata-primary-btn-bg) !important;
  color: var(--emata-primary-btn-text) !important;
}

.emata-primary-button i {
  color: #ffffff;
}

.emata-secondary-button,
.emata-secondary-button-small {
  color: var(--emata-secondary-btn-text) !important;
  border: var(--emata-secondary-btn-border) !important;
}

.emata-success-button {
  background-color: var(--emata-confirmation-background) !important;
  color: var(--emata-primary-btn-text) !important;
}

.emata-primary-button.disabled,
.emata-secondary-button.disabled,
.emata-primary-button-small.disabled,
.emata-secondary-button-small.disabled {
  background-color: var(--emata-secondary-btn-disabled-bg) !important;
  color: var(--emata-secondary-btn-disabled-text) !important;
  border: none;
}

.emata-secondary-button:hover,
.emata-secondary-button-small:hover {
  background-color: var(--emata-secondary-btn-hover-bg) !important;
  color: var(--emata-secondary-btn-hover-text) !important;
  border: none;
}

.emata-primary-button-small,
.emata-secondary-button-small {
  height: 36px;
  width: auto;
  padding: 6px 12px !important;
}

/* Emata input fields styles overrides */
.form-group {
  margin-bottom: 1.5rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select.form-select {
  height: 54px;
  background-color: var(--emata-fields-bg) !important;
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-fields-border);
  border-radius: var(--emata-border-radius);
  padding: 12px 18px;
  font-size: 15px !important;
  font-family: "Inter", sans-serif !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: var(--emata-fields-text) !important;
  outline: none !important;
  box-sizing: border-box;
}

.form-select.form-select-country-code {
  max-width: 87px;
}

input::placeholder,
select::placeholder {
  color: var(--emata-fields-placeholder);
  opacity: 1;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
select:hover {
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-fields-hover-border);
  background-color: var(--emata-fields-hover-bg) !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
  outline: 1px var(--emata-border-style) var(--emata-info-border) !important;
  box-shadow: none !important;
}

input.warning,
select.warning {
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-warning-border) !important;
  background-color: var(--emata-warning-surface) !important;
}

input.error,
select.error {
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-error-border) !important;
  background-color: var(--emata-error-surface) !important;
}

form-control:disabled,
input:disabled,
select:disabled,
input:read-only {
  background-color: var(--emata-fields-disabled-bg) !important;
  color: var(--emata-fields-disabled-text) !important;
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-fields-disabled-border);
}

input:read-only {
  cursor: not-allowed;
}

textarea.form-control {
  min-height: 96px !important;
}

.input-group-text.fixed-addon-width {
  background-color: var(--emata-fields-ned-bg);
  color: var(--emata-fields-ned-text) !important;
}

input[type="checkbox"] {
  min-width: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: var(--emata-border-width) var(--emata-border-style) var(--emata-fields-border);
  background-color: var(--emata-fields-bg) !important;
  cursor: pointer;
}

html body input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
  background-color: black !important;
  border-color: black !important;
}

input[type="checkbox"]#flexSwitchCheckDefault:checked {
  background-color: var(--emata-color-green) !important;
  border-color: var(--emata-color-green) !important;
}

.dropdown-toggle,
.custom-dropdown-toggle {
  height: 54px;
}

.emata-chevron {
  width: 20px;
  height: 20px;
  margin-left: 12px;
}

.password-container .toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.125rem 0.175rem;
  color: var(--emata-fields-icon-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-icon-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.2em;
}

.input-icon-container input {
  padding-right: 30px;
}

/* Emata separators styles */
hr {
  border: none !important;
  border-top: var(--emata-separator-width) var(--emata-separator-style) var(--emata-separator-color) !important;
}

/* Emata main backgrounds */
.page-header {
  background-color: var(--emata-header-bg);
}

.page-container {
  background-color: var(--emata-page-bg);
}

.page-footer {
  background-color: var(--emata-footer-bg);
}

/* Emata filters styles */
.filters-component {
  display: flex;
  flex-wrap: wrap;
  gap: var(--emata-pills-gap);
}

.filters-component .filter,
.rounded-pill {
  gap: var(--emata-pills-gap) !important;
  padding: var(--emata-pills-vertical-padding) var(--emata-pills-side-padding) !important;
}

.filters-component .filter .highlighted {
  background: linear-gradient(60.51deg, #30c0f0 3.81%, #7978d1 83.6%), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filters-component .filter.selected {
  background-color: var(--emata-color);
}

.filters-component .filter .name,
.rounded-pill {
  font-size: var(--emata-pills-font-size) !important;
}

.filters-component .filter:hover,
.filters-component .filter:focus,
.rounded-pill:hover,
.rounded-pill:focus {
  background-color: var(--emata-pills-hover-bg) !important;
}

.filters-component .filter:hover .name,
.filters-component .filter:focus .name,
.rounded-pill:focus,
.rounded-pill:hover {
  color: var(--emata-pills-hover-color) !important;
}

/* Disabled state */
.filters-component .filter.disabled {
  background-color: var(--emata-pills-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.filters-component .filter.disabled .name {
  color: var(--emata-pills-disabled-color);
}

/* Selected state override */
.filters-component .filter.selected {
  background-color: var(--emata-color);
}

.filters-component .filter.selected .name {
  color: var(--emata-text-color-tertiary) !important;
}

.material-icons {
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}