:root {
  /* Font Variables */
  --solo-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --solo-font-s: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --solo-h1: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Color Variables (initialize as required later) */
  --r-bg: initial;
  --r-tx: initial;
  --r-h1: initial;
  --r-lk: initial;
  --r-lk-h: initial;
  --r-br: initial;
  --r-br-b: initial;
  --r-bg-fr: initial;
  --r-tx-lk: initial;
  --r-tx-lk-h: initial;
  --r-bg-lk: initial;
  --r-bg-lk-h: initial;
  --r-tx-bt: initial;
  --r-tx-bt-h: initial;
  --r-bg-bt: initial;
  --r-bg-bt-h: initial;
  --solo-thead: initial;
  --solo-odd: initial;
  --solo-even: initial;
  --solo-odd-light: initial;
  --solo-even-light: initial;
  --solo-odd-dark: initial;
  --solo-even-dark: initial;
  --r-bg-dark: initial;
  --r-tx-dark: initial;
  --r-br-dark: initial;
  --r-bg-light: initial;
  --r-tx-light: initial;
  --r-br-light: initial;
  --r-header-bg: initial;
  --r-header-tx: initial;
  --r-menu-tx-h: initial;
  --r-menu-bg-h: initial;
  /* website width variables rem */
  --solo-rem2560: 160rem;
  --solo-rem1920: 120rem;
  --solo-rem1600: 100rem;
  --solo-rem1440: 90rem;
  --solo-rem1280: 80rem;
  --solo-rem1024: 64rem;
  --solo-rem800: 50rem;
  --solo-px2560: 2560px;
  --solo-px1920: 1920px;
  --solo-px1600: 1600px;
  --solo-px1440: 1440px;
  --solo-px1280: 1280px;
  --solo-px1024: 1024px;
  --solo-px800: 800px;
  /* website breakpoints variables */
  --solo-px1400: 87.5rem;
  --solo-px1200: 75rem;
  --solo-px992: 62rem;
  --solo-px768: 48rem;
  --solo-px600: 37.5rem;
  --solo-px576: 36rem;
  /* website genral variables */
  --solo-px420: 26.25rem;
  --solo-px320: 20rem;
  --solo-px64: 4rem;
  --solo-px50: 3.125rem;
  --solo-px48: 3rem;
  --solo-px40: 2.5rem;
  --solo-px38: 2.375rem;
  --solo-px36: 2.25rem;
  --solo-px34: 2.125rem;
  --solo-px32: 2rem;
  --solo-px28: 1.75rem;
  --solo-px26: 1.625rem;
  --solo-px24: 1.5rem;
  --solo-px22: 1.375rem;
  --solo-px20: 1.25rem;
  --solo-px18: 1.125rem;
  --solo-px17: 1.063rem;
  --solo-px16: 1rem;
  --solo-px15: 0.938rem;
  --solo-px14: 0.875rem;
  --solo-px13: 0.8125rem;
  --solo-px12: 0.75rem;
  --solo-px11: 0.688rem;
  --solo-px10: 0.625rem;
  --solo-px8: 0.5rem;
  --solo-px6: 0.375rem;
  --solo-px5: 0.313rem;
  --solo-px4: 0.25rem;
  --solo-px3: 0.188rem;
  --solo-px2: 0.125rem;
  --solo-px1: 0.063rem;
  --solo-px0: 0;
  --solo-gap: var(--solo-px16);
  /* Color Constants */
  --solo-transparent: transparent;
  --solo-ccc: #ccc;
  --solo-amber: #ffc107;
  --solo-aqua: #00ffff;
  --solo-blue: #2196f3;
  --solo-light-blue: #87ceeb;
  --solo-brown: #795548;
  --solo-cyan: #00bcd4;
  --solo-blue-gray: #607d8b;
  --solo-green: #4caf50;
  --solo-light-green: #8bc34a;
  --solo-indigo: #3f51b5;
  --solo-khaki: #b4aa50;
  --solo-lime: #cddc39;
  --solo-orange: #ff9800;
  --solo-deep-orange: #ff5722;
  --solo-pink: #e91e63;
  --solo-purple: #9c27b0;
  --solo-deep-purple: #673ab7;
  --solo-red: #f44336;
  --solo-sand: #fdf5e6;
  --solo-teal: #009688;
  --solo-yellow: #ffcd3a;
  --solo-white: #fff;
  --solo-black: #000;
  --solo-gray: #757575;
  --solo-light-gray: #f1f1f1;
  --solo-dark-gray: #3a3a3a;
  --solo-pale-red: #ffdddd;
  --solo-pale-green: #ddffdd;
  --solo-pale-yellow: #ffffcc;
  --solo-pale-blue: #ddffff;
  /* Social Media Colors */
  --solo-up: #25d366;
  --solo-sn: #fffc00;
  --solo-th: #ddffdd;
  --solo-tk: #ff0050;
  --solo-it: #ff4500;
  --solo-fb: #1877f2;
  --solo-tw: #1da1f2;
  --solo-pi: #bd081c;
  --solo-in: #0a66c2;
  --solo-st: #c32aa3;
  --solo-tb: #b2071d;
  --solo-dr: #0c76ab;
  --solo-md: #6364ff;
  --solo-ss: #f4b459;
  --solo-tl: #24a1de;
  --solo-em: #0c76ab;
  --solo-bs: #87ceeb;
  /* Shadow Colors */
  --solo-shadow: 0, 0, 0;
  --s-b: 0, 0, 0;
  --s-w: 255, 255, 255;
  --solo-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.15);
  --solo-box-shadow-dark: 0 2px 8px rgba(255, 255, 255, 0.1);
  /* Button Colors */
  --solo-button-color-s1: var(--solo-blue-gray);
  --solo-button-color-s2: var(--solo-light-gray);
  --solo-border-color-s1: var(--solo-indigo);
  --solo-border-color-s2: var(--solo-dark-gray);
  /* Event Colors */
  --solo-event: var(--solo-white);
  --solo-text-align-start: left;
  --solo-text-align-end: right;
  --solo-checkbox-bg: linear-gradient(180deg, #d1d1d1 0%, #a8a8a8 50%, #7f7f7f 100%);
  --solo-checkbox-checked-bg: linear-gradient(180deg, #bebebe 0%, #8c8c8c 50%, #5f5f5f 100%);
  --solo-checkbox-check-circle: radial-gradient(circle at 35% 35%, #ffffff 0%, #e6e6e6 40%, #bfbfbf 100%);
  --solo-checkbox-checked-circle: radial-gradient(circle at 40% 40%,  #bfffc9 0%, #38cc73 30%, #218e4a 70%, #18602e 100%);
  --solo-checkbox-disabled-bg: linear-gradient(180deg, #c0c0c0 0%, #9e9e9e 50%, #7c7c7c 100%);
  --solo-checkbox-disabled-circle: radial-gradient(circle at 40% 40%, #e3e3e3 0%, #c6c6c6 40%, #9f9f9f 100%);
  /* Icons */
  --solo-select-arrow-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
  --solo-arrow-right-icon: url("data:image/svg+xml,%5C%3Csvg class='stroke-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%5C%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%5C%3C/svg%3E");
  --solo-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

:root:dir(rtl) {
  --solo-text-align-start: right;
  --solo-text-align-end: left;
}