:root {
  /* ==========================================================================
     EXTENDED COLOR TOKEN SYSTEM
     ========================================================================== */

  /* --------------------------------------------------------------------------
     Semantic Colors - Status & Feedback
     -------------------------------------------------------------------------- */
  --color-error: #dc3545;
  --color-error-light: #ffc5c5;
  --color-error-background: #fbdede;
  --color-error-text: #ff4d4f;

  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-success-background: #d4edda;
  --color-success-text: #155724;

  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;
  --color-warning-background: #fff3cd;
  --color-warning-text: #856404;

  --color-info: #265aa7;
  --color-info-light: #d1ecf1;
  --color-info-background: #d1ecf1;
  --color-info-text: #0c5460;

  /* --------------------------------------------------------------------------
     Surface & Background Colors
     -------------------------------------------------------------------------- */
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f8f9fa;
  --color-surface-elevated: #ffffff;
  --color-surface-sunken: #f5f5f5;

  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.3);

  --color-background-disabled: #eeeeee;
  --color-background-hover: rgba(0, 0, 0, 0.04);
  --color-background-selected: rgba(0, 0, 0, 0.08);

  /* --------------------------------------------------------------------------
     Text Colors
     -------------------------------------------------------------------------- */
  --color-text-primary: #000000;
  --color-text-secondary: rgba(0, 0, 0, 0.7);
  --color-text-tertiary: rgba(0, 0, 0, 0.45);
  --color-text-disabled: rgba(0, 0, 0, 0.25);
  --color-text-inverse: #ffffff;

  /* --------------------------------------------------------------------------
     Border & Divider Colors
     -------------------------------------------------------------------------- */
  --color-border-primary: #d9d9d9;
  --color-border-secondary: #e9ecef;
  --color-border-strong: #c6c6c8;
  --color-border-disabled: #e9ecef;

  --color-divider: #dedede;
  --color-divider-strong: #adb5bd;

  /* --------------------------------------------------------------------------
     Additional Surface & Background Colors
     -------------------------------------------------------------------------- */
  --color-surface-dark: #21242a;
  --color-background-mobile: #f2f3f7;

  /* --------------------------------------------------------------------------
     Additional Border Colors
     -------------------------------------------------------------------------- */
  --color-border-inverse: #ffffff;
  --color-border-accent: #c1dfc6;

  /* --------------------------------------------------------------------------
     Shadow Colors
     -------------------------------------------------------------------------- */
  --color-shadow-light: rgba(170, 170, 170, 0.3);
  --color-error-shadow: rgba(199, 55, 55, 0.4);
  --color-warning-shadow: rgba(255, 244, 217, 0.4);
  --color-info-shadow: rgba(0, 0, 0, 0.1);

  /* --------------------------------------------------------------------------
     Primary Color Variants (transparency)
     -------------------------------------------------------------------------- */
  --color-primary-translucent: rgb(from var(--color-primary-1) r g b / 0.8);
  --color-primary-light: rgb(from var(--color-primary-1) r g b / 0.3);

  /* --------------------------------------------------------------------------
     Gradient Colors
     -------------------------------------------------------------------------- */
  --color-gradient-start: var(--color-primary-3);
  --color-gradient-end: var(--color-primary-1);
  --gradient-primary: linear-gradient(
    90deg,
    var(--color-gradient-start) 0%,
    var(--color-gradient-end) 100%
  );

  /* --------------------------------------------------------------------------
     Accent Colors
     -------------------------------------------------------------------------- */
  --color-accent-help-bg: #f6e5ac;
  --color-accent-help-bg-hover: #faf2d6;
  --color-accent-campaign: #e2007a;

  /* --------------------------------------------------------------------------
     Legacy tokens (kept for backwards compatibility)
     -------------------------------------------------------------------------- */
  --dashed-border-color: var(--color-border-primary);
  --card-border-color: var(--color-border-strong);
  --mandatory-info-color: var(--color-info);
  --background-white: var(--color-surface-sunken);
  --black-color: var(--color-text-primary);
  --light-gray-color: var(--color-text-secondary);
  --background-default-icon: #f9f9f9;
  --border-deny-button: var(--color-border-primary);
  --card-view-container-height: 675px;
  --component-link-color: var(--color-primary-1);
  --component-link-color-hover: var(--color-primary-1);
}
/* Fonts */
:root {
  font-size: var(--font-size-root, 16px);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-normal: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.4375rem;
}

h2 {
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: 1.75rem;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--background-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ant-spin .ant-spin-dot-item {
  background-color: var(--color-primary-1);
}

.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
  border-color: var(--color-primary-1);
  background-color: var(--color-primary-1);
}

.ant-radio-wrapper:hover .ant-radio-inner {
  border-color: var(--color-primary-1);
}

.ant-input-affix-wrapper-focused,
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
  border: 1px solid var(--color-primary-3);
}

.app-loader-wrapper {
  display: flex;
  padding-top: 5rem;
  justify-content: center;
}

/** SecuChat customization */
.securechat_container {
  position: absolute;
  --sc-anonymous-panel-background: var(--color-surface-primary);
  --sc-anonymous-primary-color: var(--component-button-background);
  --sc-anonymous-float-button-background: var(--component-button-background);
  --sc-anonymous-button-border-radius: var(--component-button-border-radius);
  --sc-anonymous-button-height: var(--component-button-height);
  --sc-anonymous-color-white: var(--component-button-color, var(--color-background-primary));
  --sc-anonymous-button-box-shadow: none;
  --sc-anonymous-panel-strip-background: var(--component-button-background);

  & > .container > div:has(*) {
    transform: translateY(-60px);
  }
}

#progress-countdown foreignObject > div > div {
  background: conic-gradient(
    from 0deg,
    var(--color-primary-1) 0%,
    var(--color-primary-4) 100%
  ) !important;
}

#progress-countdown .ant-spin {
  color: var(--color-primary-1);
}

.success-icon {
  color: var(--color-primary-1);
}

.device-select-label svg {
  color: var(--color-primary-1);
}

.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: rgb(from var(--color-primary-4) r g b / 0.3);
}

.maintenance-notification-icon {
  color: var(--color-primary-1);
}

.hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 24px 0;
  padding: 0;
}

.notification-popup {
  .ant-notification-notice-description {
    margin-inline-start: -24px;
    margin-bottom: -35px;
    margin-right: -24px;
  }

  .ant-progress-bg {
    height: 3px !important;
  }
}

.progress-countdown-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  --ant-color-error: var(--color-text-primary);

  & .ant-progress-status-exception {
    --ant-color-error: var(--color-text-primary);
  }
}

.progress-countdown {
  margin-bottom: 60px;
  margin-top: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  --ant-color-error: var(--color-text-primary);

  & .ant-progress-status-exception {
    --ant-color-error: var(--color-text-primary);
  }

  .ant-progress.ant-progress-status-success
    .ant-progress-inner:not(.ant-progress-circle-gradient)
    .ant-progress-circle-path {
    stroke: var(--color-info);
  }

  .ant-progress-circle.ant-progress-status-success .ant-progress-text {
    color: var(--color-text-primary);
  }

  .progress-countdown-label {
    display: block;
    padding-top: 4px;
    margin-bottom: -4px;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-secondary);
  }
}

#progress-countdown .anticon-spin {
  animation: loadingCircle 2s infinite linear;
}

.progress-countdown-failed {
  margin-bottom: 160px;
  margin-top: 100px;

  .ant-progress.ant-progress-status-exception
    .ant-progress-inner:not(.ant-progress-circle-gradient)
    .ant-progress-circle-path {
    stroke: var(--color-info);
  }

  .ant-progress-circle.ant-progress-status-exception .ant-progress-text {
    color: var(--color-text-primary);
  }
}

.ant-notification,
.ant-notification-notice .ant-notification-notice-with-icon .ant-notification-notice-description {
  margin-inline-start: -24px;
}

.ant-modal-container .ant-collapse-content-box table {
  border: none;
}

.ant-modal-container .ant-collapse-content-box table img {
  width: 100%;
}

/* Verification code - START */

.code-digit-wrapper {
  display: flex;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  width: 100%;
}

.code-digit {
  font-family: var(--font-family-1-name);
  color: var(--color-primary-1);
  background: rgb(from var(--color-primary-1) r g b / 0.1);
  border-radius: 2px;
  border: 1px solid var(--color-border-primary);
  width: 30px;
  height: 40px;
  font-size: var(--font-size-normal);
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}

.code-digit:focus-visible {
  outline: none;
  border: 1px solid var(--color-primary-1);
}

.invalid-input {
  border-color: var(--color-error);
  background: rgb(from var(--color-error-background) r g b / 0.34);
}

.invalid-input-message {
  position: absolute;
  top: 58px;
  font-size: var(--font-size-xs);
  padding: 0;
  color: var(--color-error-text);
  background-color: rgb(from var(--color-error-light) r g b / 0.32);
}

.validation-rules {
  text-align: left;
  font-size: var(--font-size-sm);
  line-height: 1.0625rem;
  margin-top: -8px;
  margin-bottom: 20px;
  color: var(--color-text-secondary);
}

.validation-rules > * {
  margin: 3px 0;
}

.validation-rule span {
  margin-right: 8px;
}

li.slick-active::after {
  width: 100% !important;
}

:root {
  --color-background-primary: #fff;
  --color-background-secondary: #353535;
  --color-background-tetriary: #fff;
  --color-background-color: #fff;
  --color-background-image: none;
  --color-text-1: #000;
  --color-text-2: #000;
  --color-text-3: #000;
  --color-text-4: #000;
  --color-primary-1: #b12c1e;
  --color-primary-2: #852808;
  --color-primary-3: #fb7988;
  --color-primary-4: #fed2d7;
  --color-secondary-1: #eee9e0;
  --color-secondary-2: #eee9e0;
  --color-secondary-3: #eee9e0;
  --color-secondary-4: #eee9e0;
  --color-accent-1: #f91f39;
  --color-separator-1: #b12c1e;
  --color-separator-2: #b12c1e;
  --component-button-border-radius: 1px;
  --component-button-background: #b12c1e;
  --component-button-width: fit-content;
  --component-button-height: 36px;
  --component-button-font-weight: 400;
  --component-button-disabled-background: #E9F4FF;
  --component-button-disabled-color: #CDCBCA;
  --component-button-hover-background: #852808;
  --component-button-active-background: #b12c1e;
  --component-button-focus-background: #b12c1e;
  --component-secondary-btn-border-radius: 1px;
  --component-secondary-btn-border: 2px solid #b12c1e;
  --component-secondary-btn-background: transparent;
  --component-secondary-btn-width: fit-content;
  --component-secondary-btn-height: 36px;
  --component-secondary-btn-font-weight: 400;
  --component-secondary-btn-color: #b12c1e;
  --component-secondary-btn-disabled-background: #E9F4FF;
  --component-secondary-btn-disabled-color: #CDCBCA;
  --component-secondary-btn-disabled-border: 2px solid #CDCBCA;
  --component-secondary-btn-hover-color: #852808;
  --component-secondary-btn-hover-border: 2px solid #852808;
  --component-secondary-btn-active-color: #b12c1e;
  --component-secondary-btn-active-border: 3px solid #b12c1e;
  --component-secondary-btn-focus-color: #b12c1e;
  --component-secondary-btn-focus-border: 3px solid #b12c1e;
  --component-footer-background-color: transparent;
  --component-footer-color: #000;
  --component-footer-hover-color: #fb7988;
  --component-header-border-top: 10px solid #b12c1e;
  --component-background-image: none;
  --component-background-color: #fff;
  --component-checkbox-background-color-checked: #b12c1e;
  --component-checkbox-background-color-unchecked: #fed2d7;
  --component-checkbox-border-checked: 1px solid #b12c1e;
  --component-checkbox-border-unchecked: 1px solid #fed2d7;
  --component-logo-header: url(./img/8090e679e82434f329ed.svg);
  --component-logo-client-connection-background-image: url(./img/7b258e7d47895aadaf3e.svg);
  --component-title-font-size: 28px;
  --component-title-font-color: #000;
  --component-title-font-weight: 700;
  --component-title-font-family: AvenirNext-Demi;
  --component-input-height: 45px;
  --component-input-border-color: #0c0c0c;
  --component-input-disabled-background-color: #F5F5F5;
  --component-input-active-border-color: #0c0c0c;
  --component-input-hover-border-color: #0c0c0c;
  --component-input-focus-border-color: #0c0c0c;
  --component-input-error-border-color: #DA3549;
  --component-card-content-text-align: left;
  --component-card-width: 495px;
  --font-family-1-name: AvenirNext-Regular;
  --font-family-2-name: AvenirNext-Demi;
}
@font-face {
  font-family: AvenirNext-Regular;
  src: url(./fonts/b44e662f5c5af2631e7d.woff2);
}

@font-face {
  font-family: AvenirNext-Demi;
  src: url(./fonts/27289c15a7fa8565db3d.woff2);
}

.App.module.theme {
  .ant-form-item .login-input,
  .ant-form-item .ant-input-outlined:focus-within,
  .ant-form-item .ant-input-outlined:hover {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 2px;
  }

  .code-digit {
    background: var(--color-background-primary);
  }

  .proceed-option {
    font-size: 16px !important;
    line-height: 20px;
  }
}