: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);
    --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 -
   */