:root {
  --font-size: 10px;
  --font-family: 'Roboto', sans-serif;
  --font-family-headers: 'Poppins', sans-serif;
  --font-color: var(--black);
  --primary-color: #00f4bd;
  color: var(--font-color);
  font-size: var(--font-size);
  /* COLORS */

  /* https://m1.material.io/style/color.html#color-color-palette */
  --success: #388e3c;
  --success-hover: #2e7331;
  --black: #000;
  --white: #fff;
  --light: #f2f2f2;
  --metallic: #99abba;
  --gray: #9e9e9e;
  --gray-bg-color: #fcfcfc;

  --light-gray: #e0e0e0;
  --light-gray-20: #bdbdbd;
  --dark-gray: #757575;
  --dark-gray-20: #616161;

  --calendar-text-color: #7c86a2;

  --orange: #ff5722;
  --orange-darken-20: #f4511e;
  --orange-darken-40: #e64a19;

  --green: #4caf50;
  --green-darken-20: #43a047;
  --green-darken-40: #388e3c;

  --tag-green: #4caf50;
  --dark-green: #1b5e20;
  --light-green: #8bc34a;

  --pink: #e91e63;
  --pink-darken-20: #d81b60;
  --pink-darken-40: #c2185b;
  --pink-darken-80: #ad1457;

  --yellow: #ffc107;
  --yellow-darken-20: #ffb300;
  --yellow-darken-40: #ffa000;
  --yellow-darken-60: #ff8f00;
  --yellow-lighten: #ffca28;

  --purple: #673ab7;
  --purple-darken-20: #5e35b1;
  --purple-darken-40: #512da8;
  --purple-darken-80: #4527a0;

  --peach: #ff9800;
  --peach-dark: #fb8c00;

  --violet: #9c27b0;
  --dark-violet: #7b1fa2;

  --blue: #3f51b5;
  --light-blue: #2196f3;
  --dark-blue: #303f9f;
  --send-link-blue: #0091ff;

  --red: #f44336;
  --red-darken-20: #e53935;
  --red-darken-40: #d32f2f;

  --cyan: #00bcd4;
  --cyan-dark: #00acc1;

  --dark-theme-lighten-40: #777778;
  --dark-theme-lighten-50: #38383a;
  --dark-theme-lighten-60: #242526;
  --dark-theme-lighten-70: #1c1c1c;
  --dark-theme-lighten-80: #181818;

  /* ELEMENTS COLORS */

  --admin-navbar-back-color: #44d7b6;
  --navbar-border: rgba(216, 216, 216, 0.4);
  --navigation-buttons-color: #585960;
  --table-color: var(--font-color);
  --table-header-background-color: #d8d8d8;
  --table-header-background-color-dark: #38383a;
  --table-border: var(--table-header-background-color);
  --table-border-dark: #585454;
  --table-head-border: transparent;
  --tr-even-background: #f4f4f4;
  --tr-odd-background: var(--white);
  --table-item-background-color: #f4f4f4;
  --table-item-striped-background-color: var(--white);
  --notification-error: #ffeced;
  --dropzone-error: rgba(249, 66, 45, 0.4);
  --notification-success: #d2edcc;
  --notification-error-transparent: rgba(236, 140, 145, 0.8);
  --notification-success-transparent: rgba(172, 244, 155, 0.8);
  --notification-warning: #fff3cd;
  --notification-warning-transparent: rgba(255, 243, 205, 0.8);
  --border-danger: #f14668;
  --border-color: #ededed;
  --checkbox-border-color: #c9c9c9;
  --secondary-btn-color: #090909;
  --secondary-btn-border-color: var(--border-color);
  --secondary-btn-background-color: #eeeeee;
  --secondary-btn-background-color-hover: rgba(244, 244, 244, 0.7);
  --placeholder-background-color: #ededed;
  --darker-placeholder-background-color: #f5f5f5;
  --contact-search-background-color: var(--placeholder-background-color);
  --transparent-background: rgba(255, 255, 255, 0.16);
  --border-color-lighten-20: #f5f5f5;
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  --close-x-icon-path: polygon(
    20% 0%,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );
  --box-shadow-hover: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.12);
  --round-button-shadow: 9px 12px 19px 0 rgba(0, 0, 0, 0.2);
  --root-background-color: var(--white);
  --layout-background-color: var(--white);
  --block-background-color: var(--white);
  --navbar-item-background-hover: var(--border-color-lighten-20);
  --label-border-color: #979797;
  --input-border-color: var(--light-gray);
  --input-background-color: rgba(216, 216, 216, 0.2);
  --dropdown-hover-background: #ebebeb;
  --search-background: #eee;
  --webpage-form-shadow: 10px 20px 44px -9px rgba(0, 0, 0, 0.75);
  --webpage-divider-color: #5a5a4d;
  --contact-small-title-color: var(--gray);
  --select-multi-value-color: var(--light-gray);
  --dashboard-no-content-text: var(--font-color);
  --autofill-color: #f7f7f7;
  --icons-background: #f7f9fc;
  --shimmer-color: rgba(255, 255, 255, 0.2);
  --shimmer-shadow: 0 0 3px 30px rgba(255, 255, 255, 0.05);
  --dark-theme-shimmer-color: rgba(255, 255, 255, 0.05);
  --modal-background: rgba(10, 10, 10, 0.1);
  --calendar-border: var(--table-border);
  --header-height: 49px;
  --signup-input-background-color: #fff;
  --signup-input-text-color: #000;
  --signup-input-background-color-dark-theme: var(--input-background-color);
  --signup-input-text-color-dark-theme: #000;
  --signup-background-color: #fffbfe;

  --sms-action-btn-color: #4c4c4c;
  --sms-action-btn-background-color: #f7f7f7;
  --sms-action-btn-border-color: #c4c4c4;

  --sms-message-bubble-color: black;
  --sms-message-background-color: #f2f2f2;
  --sms-message-border-color: #f2f2f2;

  --sms-audio-color: #4c4c4c;
  --sms-audio-bg: #f2f2f2;

  --sms-main-bg: #e7e7e7;
  --sms-main-bg-white: white;
  /* --sms-main-outline: var(--primary-color); */
  --sms-main-outline: black;
  --sms-main-color: #363636;

  --dialer-main-btn-bg: #111941;
  --dialer-main-btn-color: white;

  --dialer-main-wrapper-border: #dedede;
  --dialer-main-numbers-bg: #121940;

  --sms-subscriptions-header-color: #80708f;
  --sms-subscriptions-text-color: black;
  --sms-subscriptions-text-bg: white;
  --sms-subscriptions-text-border: rgb(224, 220, 229);

  --sms-subscriptions-color: black;
  --sms-subscriptions-active-color: green;

  --sms-table-row-cell-color: #121940;
  --sms-table-row-cell-bg: white;

  --sms-conversations-list-color: #f0f0f0;
  --sms-conversations-list-bg: white;
  --sms-conversations-preview-active: #f9f8f8;
  --sms-conversations-preview-active-color: #121940;

  --sms-allocation-grey: #f2f2f2;
  --sms-allocation-dark-grey: #d8d8d8;
  --sms-allocation-white: white;

  --lead-assignments-badge-color: #333;

  --workflows-icon-color: #6d28d9;
  --workflows-title-color: #33475b;
  --workflows-btn-color: #33475b;
}

/* Fonts linked in _app.jsx
   * SCREEN SIZES
   * 1440px -
   * 1366px -
   * 1024px -
   * 991px -
   * 768px -
   * 425px -
   * 375px -
   * 320px -
   */