: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://maketintsandshades.com/#ff9500,facc01,4cd964,5ac8fa,377bff,5856d6,fa2c55,fa3b31 */
  --success: #388e3c;
  --success-hover: #2e7331;
  --white: #fff;
  --light: #f2f2f2;
  --gray: #9b9b9b;
  --light-gray: rgba(216, 216, 216, 1);
  --dark-gray: #918e98;
  --dark-gray-20: #616161;
  --light-gray-20: hsl(0, 0%, 80%);
  --black: #000;
  /*  THEME COLORS
     *  https://encycolorpedia.com/ff4113
     */
  --orange: #ff4113;
  --gray-bg-color: #fcfcfc;
  --calendar-text-color: #7c86a2;
  --orange-darken-20: #f43607;
  --orange-darken-40: #e92900;
  --green: #00f4bd;
  --tag-green: #18b7b7;
  --green-darken-20: #00e5af;
  --green-darken-40: #00d7a2;
  --pink: #ff006f;
  --pink-darken-20: #f50067;
  --pink-darken-40: #ea0060;
  --pink-darken-80: #a50053;
  --yellow: #ffb900;
  --yellow-darken-20: #f0ac00;
  --yellow-darken-40: #e2a000;
  --yellow-darken-60: #bf9000;
  --yellow-lighten: #fbe514;
  --purple: #5300ff;
  --peach: #f39500;
  --peach-dark: #ff890d;
  --dark-green: #02be4d;
  --light-green: #61ee60;
  --violet: #d460e0;
  --dark-violet: #674ea7;
  --blue: #0075c2;
  --light-blue: #00c5e4;
  --dark-blue: #334364;
  --send-link-blue: #0091ff;
  --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;
  --purple-darken-20: #4a00f9;
  --purple-darken-40: #4000f2;
  --purple-darken-80: #18006c;
  --metallic: #99abba;

  --red: #f44336;
  --red-darken-20: #e53935;
  --red-darken-40: #d32f2f;
  /* 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 -
   */