:root {
  /*color*/
  --c-main: #1a85ff;
  --c-mono-0: #ffffff;
  --c-mono-1: #fafbfb;
  --c-mono-2: #f6f6f7;
  --c-mono-3: #ecedef;
  --c-mono-4: #e1e2e5;
  --c-mono-5: #c5c7cd;
  --c-mono-6: #b7bac1;
  --c-mono-7: #abaeb7;
  --c-mono-8: #9da1ab;
  --c-mono-9: #8f939f;
  --c-mono-10: #818694;
  --c-mono-11: #737988;
  --c-mono-12: #656b7c;
  --c-mono-13: #5a6072;
  --c-mono-14: #4c5366;
  --c-mono-15: #40475c;
  --c-mono-16: #30384e;
  --c-mono-17: #222a42;
  --c-mono-18: #161f38;
  --c-mono-19: #161f38;
  --c-mono-20: #000000;
  --c-editor-bg: #4d4d4d;
  --c-gray-1: #f7f7f7;
  --c-gray-2: #dddddd;
  --c-gray-3: #bbbbbb;
  --c-gray-4: #757575;
  --c-gray-5: #333333;
  --c-gray-6: #242424;
  --c-black: #000;
  --c-bg: #fafcfc;
  --c-bg-2: #f5fbff;
  --c-navy: #142456;
  --c-blue: #1a85ff;
  --c-blue-l: #f0f7ff;
  --c-indigo: #6610f2;
  --c-purple: #6f42c1;
  --c-pink: #d63384;
  --c-red: #ff3b30;
  --c-orange: #fd7e14;
  --c-yellow: #ffc107;
  --c-green: #30db5b;
  --c-teal: #20c997;
  --c-cyan: #0dcaf0;
  --error-color: #ff3b30;
  /* Text */
  --c-text: #000000;
  --c-text-d: #000000;
  --c-text-sub: #757575;
  --f-weight-light: 300;
  --f-weight-reguler: 400;
  --f-weight-medium: 500;
  --f-weight-semibold: 600;
  --f-weight-bold: 700;
  /*btn*/
  --c-border: #dddddd;
  --btn-height: 48px;
  --btn-primary: #1a85ff;
  --btn-primary-hover: #298dff;
  --btn-secondary: #000000;
  --btn-secondary-hover: #f0f7ff;
  /*Pagging Margin*/
  --padding: 16px;
  /*  Effect  */
  --radius: 8px;
  --shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
}