:root {
  /* Bg Colors */
  --bg-e0: #e0e0e0;
  --bg-f1: #f1f1f1;
  --bg-f5: #f5f5f5;
  --bg-ff: #fff;

  /* Dark Colors */
  --dark-1: #313131;
  --dark-2: #444444;
  --dark-3: #606060;

  /* Light Colors */
  --light-1: #e0e0e0;
  --light-2: #fcfcfc;
  --light-3: #f5f5f5;

  /* Primary Colors */
  --primary-main: var(--accent-color);
  --primary-lighter: #c1a3e1;
  --primary-darker: var(--accent-color2);

  /* Secondary Colors */
  --secondary-main: #0f0f14;
  --secondary-lighter: #9e9eb7;
  --secondary-darker: #000000;

  /* Others Colors */
  --green: #6a994e;
  --yellow: #ffc300;
  --red: #ff0905;
  --pen-red: #950000;
  --pen-yellow: #ff8800;
  --blood-red: #690000;
  --silver: #aeada9;
  --gray: #737373;

  /* System Colors */
  --system-red-1: #ff3b3b;
  --system-red-2: #ff5c5c;
  --system-red-3: #ff8080;
  --system-red-4: #ffe5e5;

  --system-green-0: #007f5f;
  --system-green-1: #06c270;
  --system-green-2: #57eba1;
  --system-green-3: #e3fff1;
  --system-green-4: #e3fff1;
  --system-green-5: #019d59;

  --system-orange-1: #f80;
  --system-orange-2: #fdac42;
  --system-orange-3: #fccc75;
  --system-orange-4: #fff8e5;

  --system-blue-0: #004a8d;
  --system-blue-1: #0063f7;
  --system-blue-2: #5b8def;
  --system-blue-3: #9dbff9;
  --system-blue-4: #e5f0ff;

  --system-purple-1: #60c;
  --system-purple-2: #ac5dd9;
  --system-purple-3: #dda5e9;
  --system-purple-4: #ffe5ff;

  --system-teal-1: #00cfde;
  --system-teal-2: #73dfe7;
  --system-teal-3: #a9eff2;
  --system-teal-4: #e5ffff;

  --system-yellow-1: #fc0;
  --system-yellow-2: #fddd48;
  --system-yellow-3: #fded72;
  --system-yellow-4: #fffee5;

  --system-light-0: #e4e4eb;

  --text-bg-dark-0: #1e1e1e;
  --text-bg-dark-4: #6f6f6f;

  --text-bg-light-0: #a4a4a4;
  --text-bg-light-3: #f5f5f5;
  --text-bg-light-4: #f5f5f5;

  /* Radius */
  --radius-4: 0.28rem;
  --radius-8: 0.57rem;
  --radius-12: 0.85rem;
  --radius-16: 1.14rem;
  --radius-24: 1.71rem;
  --radius-38: 2.57rem;
  --radius-57: 4rem;
  --radius-circle: 50%;
  --radius-30: 1.875rem;
  --radius-20: 1.42rem;

  /*shadow */
  --light-shadow-3:
    0px 0px 2px 0px rgba(40, 41, 61, 0.04),
    0px 4px 8px 0px rgba(96, 97, 112, 0.16);
  --light-shadow-2:
    0px 0px 1px 0px rgba(40, 41, 61, 0.04),
    0px 2px 4px 0px rgba(96, 97, 112, 0.16);

  /*gradient*/
}

/* Color Classes */
.color-bg-e0 {
  color: var(--bg-e0);
}

.color-bg-f1 {
  color: var(--bg-f1);
}

.color-bg-f5 {
  color: var(--bg-f5);
}

.color-bg-ff {
  color: var(--bg-ff);
}

.color-dark-1 {
  color: var(--dark-1);
}

.color-dark-2 {
  color: var(--dark-2);
}

.color-dark-3 {
  color: var(--dark-3);
}

.color-light-1 {
  color: var(--light-1);
}

.color-light-2 {
  color: var(--light-2);
}

.color-light-3 {
  color: var(--light-3);
}

.color-primary-main {
  color: var(--primary-main);
}

.color-primary-lighter {
  color: var(--primary-lighter);
}

.color-primary-darker {
  color: var(--primary-darker);
}

.color-secondary-main {
  color: var(--secondary-main);
}

.color-secondary-lighter {
  color: var(--secondary-lighter);
}

.color-secondary-darker {
  color: var(--secondary-darker);
}

.color-green {
  color: var(--green);
}

.color-yellow {
  color: var(--yellow);
}

.color-red {
  color: var(--red);
}

.color-pen-red {
  color: var(--pen-red);
}
.color-pen-yellow {
  color: var(--pen-yellow);
}

.color-blood-red {
  color: var(--blood-red);
}

.color-silver {
  color: var(--silver);
}

.color-gray {
  color: var(--gray);
}

.color-system-red-1 {
  color: var(--system-red-1);
}

.color-system-red-2 {
  color: var(--system-red-2);
}

.color-system-red-3 {
  color: var(--system-red-3);
}

.color-system-red-4 {
  color: var(--system-red-4);
}

.color-system-green-0 {
  color: var(--system-green-0);
}

.color-system-green-1 {
  color: var(--system-green-1);
}

.color-system-green-2 {
  color: var(--system-green-2);
}

.color-system-green-3 {
  color: var(--system-green-3);
}

.color-system-green-4 {
  color: var(--system-green-4);
}

.color-system-orange-1 {
  color: var(--system-orange-1);
}

.color-system-orange-2 {
  color: var(--system-orange-2);
}

.color-system-orange-3 {
  color: var(--system-orange-3);
}

.color-system-orange-4 {
  color: var(--system-orange-4);
}

.color-system-blue-0 {
  color: var(--system-blue-0);
}

.color-system-blue-1 {
  color: var(--system-blue-1);
}

.color-system-blue-2 {
  color: var(--system-blue-2);
}

.color-system-blue-3 {
  color: var(--system-blue-3);
}

.color-system-blue-4 {
  color: var(--system-blue-4);
}

.color-system-purple-1 {
  color: var(--system-purple-1);
}

.color-system-purple-2 {
  color: var(--system-purple-2);
}

.color-system-purple-3 {
  color: var(--system-purple-3);
}

.color-system-purple-4 {
  color: var(--system-purple-4);
}

.color-system-teal-1 {
  color: var(--system-teal-1);
}

.color-system-teal-2 {
  color: var(--system-teal-2);
}

.color-system-teal-3 {
  color: var(--system-teal-3);
}

.color-system-teal-4 {
  color: var(--system-teal-4);
}

.color-system-yellow-1 {
  color: var(--system-yellow-1);
}

.color-system-yellow-2 {
  color: var(--system-yellow-2);
}

.color-system-yellow-3 {
  color: var(--system-yellow-3);
}

.color-system-yellow-4 {
  color: var(--system-yellow-4);
}

.color-system-light-0 {
  color: var(--system-light-0);
}

.color-text-bg-dark-0 {
  color: var(--text-bg-dark-0);
}

.color-text-bg-dark-4 {
  color: var(--text-bg-dark-4);
}

.color-text-bg-light-0 {
  color: var(--text-bg-light-0);
}

.color-text-bg-light-3 {
  color: var(--text-bg-light-3);
}

.color-text-bg-light-4 {
  color: var(--text-bg-light-4);
}

.color-bg-e0 {
  color: var(--bg-e0);
}

.color-bg-f1 {
  color: var(--bg-f1);
}

.color-bg-f5 {
  color: var(--bg-f5);
}

.color-bg-ff {
  color: var(--bg-ff);
}

.color-dark-1 {
  color: var(--dark-1);
}

.color-dark-2 {
  color: var(--dark-2);
}

.color-dark-3 {
  color: var(--dark-3);
}

.color-light-1 {
  color: var(--light-1);
}

.color-light-2 {
  color: var(--light-2);
}

.color-light-3 {
  color: var(--light-3);
}

.color-primary-main {
  color: var(--primary-main);
}

.color-primary-lighter {
  color: var(--primary-lighter);
}

.color-primary-darker {
  color: var(--primary-darker);
}

.color-secondary-main {
  color: var(--secondary-main);
}

.color-secondary-lighter {
  color: var(--secondary-lighter);
}

.color-secondary-darker {
  color: var(--secondary-darker);
}

.color-green {
  color: var(--green);
}

.color-yellow {
  color: var(--yellow);
}

.color-red {
  color: var(--red);
}

.color-pen-red {
  color: var(--pen-red);
}

.color-blood-red {
  color: var(--blood-red);
}

.color-silver {
  color: var(--silver);
}

.color-gray {
  color: var(--gray);
}

.color-system-red-1 {
  color: var(--system-red-1);
}

.color-system-red-2 {
  color: var(--system-red-2);
}

.color-system-red-3 {
  color: var(--system-red-3);
}

.color-system-red-4 {
  color: var(--system-red-4);
}

.color-system-green-0 {
  color: var(--system-green-0);
}

.color-system-green-1 {
  color: var(--system-green-1);
}

.color-system-green-2 {
  color: var(--system-green-2);
}

.color-system-green-3 {
  color: var(--system-green-3);
}

.color-system-green-4 {
  color: var(--system-green-4);
}

.color-system-orange-1 {
  color: var(--system-orange-1);
}

.color-system-orange-2 {
  color: var(--system-orange-2);
}

.color-system-orange-3 {
  color: var(--system-orange-3);
}

.color-system-orange-4 {
  color: var(--system-orange-4);
}

.color-system-blue-0 {
  color: var(--system-blue-0);
}

.color-system-blue-1 {
  color: var(--system-blue-1);
}

.color-system-blue-2 {
  color: var(--system-blue-2);
}

.color-system-blue-3 {
  color: var(--system-blue-3);
}

.color-system-blue-4 {
  color: var(--system-blue-4);
}

.color-system-purple-1 {
  color: var(--system-purple-1);
}

.color-system-purple-2 {
  color: var(--system-purple-2);
}

.color-system-purple-3 {
  color: var(--system-purple-3);
}

.color-system-purple-4 {
  color: var(--system-purple-4);
}

.color-system-teal-1 {
  color: var(--system-teal-1);
}

.color-system-teal-2 {
  color: var(--system-teal-2);
}

.color-system-teal-3 {
  color: var(--system-teal-3);
}

.color-system-teal-4 {
  color: var(--system-teal-4);
}

.color-system-yellow-1 {
  color: var(--system-yellow-1);
}

.color-system-yellow-2 {
  color: var(--system-yellow-2);
}

.color-system-yellow-3 {
  color: var(--system-yellow-3);
}

.color-system-yellow-4 {
  color: var(--system-yellow-4);
}

.color-system-light-0 {
  color: var(--system-light-0);
}

.color-text-bg-dark-0 {
  color: var(--text-bg-dark-0);
}

.color-text-bg-dark-4 {
  color: var(--text-bg-dark-4);
}

.color-text-bg-light-0 {
  color: var(--text-bg-light-0);
}

.color-text-bg-light-3 {
  color: var(--text-bg-light-3);
}

.color-text-bg-light-4 {
  color: var(--text-bg-light-4);
}

/* Background Color Classes */
.bg-bg-e0 {
  background-color: var(--bg-e0);
}

.bg-bg-f1 {
  background-color: var(--bg-f1);
}

.bg-bg-f5 {
  background-color: var(--bg-f5);
}

.bg-bg-ff {
  background-color: var(--bg-ff);
}

.bg-dark-1 {
  background-color: var(--dark-1);
}

.bg-dark-2 {
  background-color: var(--dark-2);
}

.bg-dark-3 {
  background-color: var(--dark-3);
}

.bg-light-1 {
  background-color: var(--light-1);
}

.bg-light-2 {
  background-color: var(--light-2);
}

.bg-light-3 {
  background-color: var(--light-3);
}

.bg-primary-main {
  background-color: var(--primary-main);
}

.bg-primary-lighter {
  background-color: var(--primary-lighter);
}

.bg-primary-darker {
  background-color: var(--primary-darker);
}

.bg-secondary-main {
  background-color: var(--secondary-main);
}

.bg-secondary-lighter {
  background-color: var(--secondary-lighter);
}

.bg-secondary-darker {
  background-color: var(--secondary-darker);
}

.bg-green {
  background-color: var(--green);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-red {
  background-color: var(--red);
}

.bg-pen-red {
  background-color: var(--pen-red);
}

.bg-blood-red {
  background-color: var(--blood-red);
}

.bg-silver {
  background-color: var(--silver);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-system-red-1 {
  background-color: var(--system-red-1);
}

.bg-system-red-2 {
  background-color: var(--system-red-2);
}

.bg-system-red-3 {
  background-color: var(--system-red-3);
}

.bg-system-red-4 {
  background-color: var(--system-red-4);
}

.bg-system-green-0 {
  background-color: var(--system-green-0);
}

.bg-system-green-1 {
  background-color: var(--system-green-1);
}

.bg-system-green-2 {
  background-color: var(--system-green-2);
}

.bg-system-green-3 {
  background-color: var(--system-green-3);
}

.bg-system-green-4 {
  background-color: var(--system-green-4);
}

.bg-system-orange-1 {
  background-color: var(--system-orange-1);
}

.bg-system-orange-2 {
  background-color: var(--system-orange-2);
}

.bg-system-orange-3 {
  background-color: var(--system-orange-3);
}

.bg-system-orange-4 {
  background-color: var(--system-orange-4);
}

.bg-system-blue-0 {
  background-color: var(--system-blue-0);
}

.bg-system-blue-1 {
  background-color: var(--system-blue-1);
}

.bg-system-blue-2 {
  background-color: var(--system-blue-2);
}

.bg-system-blue-3 {
  background-color: var(--system-blue-3);
}

.bg-system-blue-4 {
  background-color: var(--system-blue-4);
}

.bg-system-purple-1 {
  background-color: var(--system-purple-1);
}

.bg-system-purple-2 {
  background-color: var(--system-purple-2);
}

.bg-system-purple-3 {
  background-color: var(--system-purple-3);
}

.bg-system-purple-4 {
  background-color: var(--system-purple-4);
}

.bg-system-teal-1 {
  background-color: var(--system-teal-1);
}

.bg-system-teal-2 {
  background-color: var(--system-teal-2);
}

.bg-system-teal-3 {
  background-color: var(--system-teal-3);
}

.bg-system-teal-4 {
  background-color: var(--system-teal-4);
}

.bg-system-yellow-1 {
  background-color: var(--system-yellow-1);
}

.bg-system-yellow-2 {
  background-color: var(--system-yellow-2);
}

.bg-system-yellow-3 {
  background-color: var(--system-yellow-3);
}

.bg-system-yellow-4 {
  background-color: var(--system-yellow-4);
}

.bg-system-light-0 {
  background-color: var(--system-light-0);
}

.bg-text-bg-dark-0 {
  background-color: var(--text-bg-dark-0);
}

.bg-text-bg-dark-4 {
  background-color: var(--text-bg-dark-4);
}

.bg-text-bg-light-0 {
  background-color: var(--text-bg-light-0);
}

.bg-text-bg-light-3 {
  background-color: var(--text-bg-light-3);
}

.bg-text-bg-light-4 {
  background-color: var(--text-bg-light-4);
}

/* Border Color Classes */
.border-color-bg-e0 {
  border-color: var(--bg-e0);
}

.border-color-bg-f1 {
  border-color: var(--bg-f1);
}

.border-color-bg-f5 {
  border-color: var(--bg-f5);
}

.border-color-bg-ff {
  border-color: var(--bg-ff);
}

.border-color-dark-1 {
  border-color: var(--dark-1);
}

.border-color-dark-2 {
  border-color: var(--dark-2);
}

.border-color-dark-3 {
  border-color: var(--dark-3);
}

.border-color-light-1 {
  border-color: var(--light-1);
}

.border-color-light-2 {
  border-color: var(--light-2);
}

.border-color-light-3 {
  border-color: var(--light-3);
}

.border-color-primary-main {
  border-color: var(--primary-main);
}

.border-color-primary-lighter {
  border-color: var(--primary-lighter);
}

.border-color-primary-darker {
  border-color: var(--primary-darker);
}

.border-color-secondary-main {
  border-color: var(--secondary-main);
}

.border-color-secondary-lighter {
  border-color: var(--secondary-lighter);
}

.border-color-secondary-darker {
  border-color: var(--secondary-darker);
}

.border-color-green {
  border-color: var(--green);
}

.border-color-yellow {
  border-color: var(--yellow);
}

.border-color-red {
  border-color: var(--red);
}

.border-color-pen-red {
  border-color: var(--pen-red);
}

.border-color-blood-red {
  border-color: var(--blood-red);
}

.border-color-silver {
  border-color: var(--silver);
}

.border-color-gray {
  border-color: var(--gray);
}

.border-color-system-red-1 {
  border-color: var(--system-red-1);
}

.border-color-system-red-2 {
  border-color: var(--system-red-2);
}

.border-color-system-red-3 {
  border-color: var(--system-red-3);
}

.border-color-system-red-4 {
  border-color: var(--system-red-4);
}

.border-color-system-green-0 {
  border-color: var(--system-green-0);
}

.border-color-system-green-1 {
  border-color: var(--system-green-1);
}

.border-color-system-green-2 {
  border-color: var(--system-green-2);
}

.border-color-system-green-3 {
  border-color: var(--system-green-3);
}

.border-color-system-green-4 {
  border-color: var(--system-green-4);
}

.border-color-system-orange-1 {
  border-color: var(--system-orange-1);
}

.border-color-system-orange-2 {
  border-color: var(--system-orange-2);
}

.border-color-system-orange-3 {
  border-color: var(--system-orange-3);
}

.border-color-system-orange-4 {
  border-color: var(--system-orange-4);
}

.border-color-system-blue-0 {
  border-color: var(--system-blue-0);
}

.border-color-system-blue-1 {
  border-color: var(--system-blue-1);
}

.border-color-system-blue-2 {
  border-color: var(--system-blue-2);
}

.border-color-system-blue-3 {
  border-color: var(--system-blue-3);
}

.border-color-system-blue-4 {
  border-color: var(--system-blue-4);
}

.border-color-system-purple-1 {
  border-color: var(--system-purple-1);
}

.border-color-system-purple-2 {
  border-color: var(--system-purple-2);
}

.border-color-system-purple-3 {
  border-color: var(--system-purple-3);
}

.border-color-system-purple-4 {
  border-color: var(--system-purple-4);
}

.border-color-system-teal-1 {
  border-color: var(--system-teal-1);
}

.border-color-system-teal-2 {
  border-color: var(--system-teal-2);
}

.border-color-system-teal-3 {
  border-color: var(--system-teal-3);
}

.border-color-system-teal-4 {
  border-color: var(--system-teal-4);
}

.border-color-system-yellow-1 {
  border-color: var(--system-yellow-1);
}

.border-color-system-yellow-2 {
  border-color: var(--system-yellow-2);
}

.border-color-system-yellow-3 {
  border-color: var(--system-yellow-3);
}

.border-color-system-yellow-4 {
  border-color: var(--system-yellow-4);
}

.border-color-system-light-0 {
  border-color: var(--system-light-0);
}

.border-color-text-bg-dark-0 {
  border-color: var(--text-bg-dark-0);
}

.border-color-text-bg-dark-4 {
  border-color: var(--text-bg-dark-4);
}

.border-color-text-bg-light-0 {
  border-color: var(--text-bg-light-0);
}

.border-color-text-bg-light-3 {
  border-color: var(--text-bg-light-3);
}

.border-color-text-bg-light-4 {
  border-color: var(--text-bg-light-4);
}

/* Stroke Classes */
.stroke-bg-e0 {
  stroke: var(--bg-e0);
}

.stroke-bg-f1 {
  stroke: var(--bg-f1);
}

.stroke-bg-f5 {
  stroke: var(--bg-f5);
}

.stroke-bg-ff {
  stroke: var(--bg-ff);
}

.stroke-dark-1 {
  stroke: var(--dark-1);
}

.stroke-dark-2 {
  stroke: var(--dark-2);
}

.stroke-dark-3 {
  stroke: var(--dark-3);
}

.stroke-light-1 {
  stroke: var(--light-1);
}

.stroke-light-2 {
  stroke: var(--light-2);
}

.stroke-light-3 {
  stroke: var(--light-3);
}

.stroke-primary-main {
  stroke: var(--primary-main);
}

.stroke-primary-lighter {
  stroke: var(--primary-lighter);
}

.stroke-primary-darker {
  stroke: var(--primary-darker);
}

.stroke-secondary-main {
  stroke: var(--secondary-main);
}

.stroke-secondary-lighter {
  stroke: var(--secondary-lighter);
}

.stroke-secondary-darker {
  stroke: var(--secondary-darker);
}

.stroke-green {
  stroke: var(--green);
}

.stroke-yellow {
  stroke: var(--yellow);
}

.stroke-red {
  stroke: var(--red);
}

.stroke-pen-red {
  stroke: var(--pen-red);
}

.stroke-blood-red {
  stroke: var(--blood-red);
}

.stroke-silver {
  stroke: var(--silver);
}

.stroke-gray {
  stroke: var(--gray);
}

.stroke-system-red-1 {
  stroke: var(--system-red-1);
}

.stroke-system-red-2 {
  stroke: var(--system-red-2);
}

.stroke-system-red-3 {
  stroke: var(--system-red-3);
}

.stroke-system-red-4 {
  stroke: var(--system-red-4);
}

.stroke-system-green-0 {
  stroke: var(--system-green-0);
}

.stroke-system-green-1 {
  stroke: var(--system-green-1);
}

.stroke-system-green-2 {
  stroke: var(--system-green-2);
}

.stroke-system-green-3 {
  stroke: var(--system-green-3);
}

.stroke-system-green-4 {
  stroke: var(--system-green-4);
}

.stroke-system-orange-1 {
  stroke: var(--system-orange-1);
}

.stroke-system-orange-2 {
  stroke: var(--system-orange-2);
}

.stroke-system-orange-3 {
  stroke: var(--system-orange-3);
}

.stroke-system-orange-4 {
  stroke: var(--system-orange-4);
}

.stroke-system-blue-0 {
  stroke: var(--system-blue-0);
}

.stroke-system-blue-1 {
  stroke: var(--system-blue-1);
}

.stroke-system-blue-2 {
  stroke: var(--system-blue-2);
}

.stroke-system-blue-3 {
  stroke: var(--system-blue-3);
}

.stroke-system-blue-4 {
  stroke: var(--system-blue-4);
}

.stroke-system-purple-1 {
  stroke: var(--system-purple-1);
}

.stroke-system-purple-2 {
  stroke: var(--system-purple-2);
}

.stroke-system-purple-3 {
  stroke: var(--system-purple-3);
}

.stroke-system-purple-4 {
  stroke: var(--system-purple-4);
}

.stroke-system-teal-1 {
  stroke: var(--system-teal-1);
}

.stroke-system-teal-2 {
  stroke: var(--system-teal-2);
}

.stroke-system-teal-3 {
  stroke: var(--system-teal-3);
}

.stroke-system-teal-4 {
  stroke: var(--system-teal-4);
}

.stroke-system-yellow-1 {
  stroke: var(--system-yellow-1);
}

.stroke-system-yellow-2 {
  stroke: var(--system-yellow-2);
}

.stroke-system-yellow-3 {
  stroke: var(--system-yellow-3);
}

.stroke-system-yellow-4 {
  stroke: var(--system-yellow-4);
}

.stroke-system-light-0 {
  stroke: var(--system-light-0);
}

.stroke-text-bg-dark-0 {
  stroke: var(--text-bg-dark-0);
}

.stroke-text-bg-dark-4 {
  stroke: var(--text-bg-dark-4);
}

.stroke-text-bg-light-0 {
  stroke: var(--text-bg-light-0);
}

.stroke-text-bg-light-3 {
  stroke: var(--text-bg-light-3);
}

.stroke-text-bg-light-4 {
  stroke: var(--text-bg-light-4);
}

.stroke-bg-e0 {
  stroke: var(--bg-e0);
}

.stroke-bg-f1 {
  stroke: var(--bg-f1);
}

.stroke-bg-f5 {
  stroke: var(--bg-f5);
}

.stroke-bg-ff {
  stroke: var(--bg-ff);
}

.stroke-dark-1 {
  stroke: var(--dark-1);
}

.stroke-dark-2 {
  stroke: var(--dark-2);
}

.stroke-dark-3 {
  stroke: var(--dark-3);
}

.stroke-light-1 {
  stroke: var(--light-1);
}

.stroke-light-2 {
  stroke: var(--light-2);
}

.stroke-light-3 {
  stroke: var(--light-3);
}

.stroke-primary-main {
  stroke: var(--primary-main);
}

.stroke-primary-lighter {
  stroke: var(--primary-lighter);
}

.stroke-primary-darker {
  stroke: var(--primary-darker);
}

.stroke-secondary-main {
  stroke: var(--secondary-main);
}

.stroke-secondary-lighter {
  stroke: var(--secondary-lighter);
}

.stroke-secondary-darker {
  stroke: var(--secondary-darker);
}

.stroke-green {
  stroke: var(--green);
}

.stroke-yellow {
  stroke: var(--yellow);
}

.stroke-red {
  stroke: var(--red);
}

.stroke-pen-red {
  stroke: var(--pen-red);
}

.stroke-blood-red {
  stroke: var(--blood-red);
}

.stroke-silver {
  stroke: var(--silver);
}

.stroke-gray {
  stroke: var(--gray);
}

.stroke-system-red-1 {
  stroke: var(--system-red-1);
}

.stroke-system-red-2 {
  stroke: var(--system-red-2);
}

.stroke-system-red-3 {
  stroke: var(--system-red-3);
}

.stroke-system-red-4 {
  stroke: var(--system-red-4);
}

.stroke-system-green-0 {
  stroke: var(--system-green-0);
}

.stroke-system-green-1 {
  stroke: var(--system-green-1);
}

.stroke-system-green-2 {
  stroke: var(--system-green-2);
}

.stroke-system-green-3 {
  stroke: var(--system-green-3);
}

.stroke-system-green-4 {
  stroke: var(--system-green-4);
}

.stroke-system-orange-1 {
  stroke: var(--system-orange-1);
}

.stroke-system-orange-2 {
  stroke: var(--system-orange-2);
}

.stroke-system-orange-3 {
  stroke: var(--system-orange-3);
}

.stroke-system-orange-4 {
  stroke: var(--system-orange-4);
}

.stroke-system-blue-0 {
  stroke: var(--system-blue-0);
}

.stroke-system-blue-1 {
  stroke: var(--system-blue-1);
}

.stroke-system-blue-2 {
  stroke: var(--system-blue-2);
}

.stroke-system-blue-3 {
  stroke: var(--system-blue-3);
}

.stroke-system-blue-4 {
  stroke: var(--system-blue-4);
}

.stroke-system-purple-1 {
  stroke: var(--system-purple-1);
}

.stroke-system-purple-2 {
  stroke: var(--system-purple-2);
}

.stroke-system-purple-3 {
  stroke: var(--system-purple-3);
}

.stroke-system-purple-4 {
  stroke: var(--system-purple-4);
}

.stroke-system-teal-1 {
  stroke: var(--system-teal-1);
}

.stroke-system-teal-2 {
  stroke: var(--system-teal-2);
}

.stroke-system-teal-3 {
  stroke: var(--system-teal-3);
}

.stroke-system-teal-4 {
  stroke: var(--system-teal-4);
}

.stroke-system-yellow-1 {
  stroke: var(--system-yellow-1);
}

.stroke-system-yellow-2 {
  stroke: var(--system-yellow-2);
}

.stroke-system-yellow-3 {
  stroke: var(--system-yellow-3);
}

.stroke-system-yellow-4 {
  stroke: var(--system-yellow-4);
}

.stroke-system-light-0 {
  stroke: var(--system-light-0);
}

.stroke-text-bg-dark-0 {
  stroke: var(--text-bg-dark-0);
}

.stroke-text-bg-dark-4 {
  stroke: var(--text-bg-dark-4);
}

.stroke-text-bg-light-0 {
  stroke: var(--text-bg-light-0);
}

.stroke-text-bg-light-3 {
  stroke: var(--text-bg-light-3);
}

.stroke-text-bg-light-4 {
  stroke: var(--text-bg-light-4);
}

/*border radius*/
.b-radius-0 {
  border-radius: 0rem !important;
}

.b-radius-4 {
  border-radius: var(--b-radius-4);

  -webkit-border-radius: var(--radius-4) !important;
  -moz-border-radius: var(--radius-4) !important;
  -ms-border-radius: var(--radius-4) !important;
  -o-border-radius: var(--radius-4) !important;
}

.b-radius-8 {
  border-radius: var(--radius-8) !important;
  -webkit-border-radius: var(--radius-8) !important;
  -moz-border-radius: var(--radius-8) !important;
  -ms-border-radius: var(--radius-8) !important;
  -o-border-radius: var(--radius-8) !important;
}

.b-radius-12 {
  border-radius: var(--radius-12) !important;
  -webkit-border-radius: var(--radius-12) !important;
  -moz-border-radius: var(--radius-12) !important;
  -ms-border-radius: var(--radius-12) !important;
  -o-border-radius: var(--radius-12) !important;
}

.b-radius-16 {
  border-radius: var(--radius-16) !important;
  -webkit-border-radius: var(--radius-16) !important;
  -moz-border-radius: var(--radius-16) !important;
  -ms-border-radius: var(--radius-16) !important;
  -o-border-radius: var(--radius-16) !important;
}

.b-radius-24 {
  border-radius: var(--radius-24) !important;
  -webkit-border-radius: var(--radius-24) !important;
  -moz-border-radius: var(--radius-24) !important;
  -ms-border-radius: var(--radius-24) !important;
  -o-border-radius: var(--radius-24) !important;
}

.b-radius-38 {
  border-radius: var(--radius-38) !important;
  -webkit-border-radius: var(--radius-38) !important;
  -moz-border-radius: var(--radius-38) !important;
  -ms-border-radius: var(--radius-38) !important;
  -o-border-radius: var(--radius-38) !important;
}

.b-radius-57 {
  border-radius: var(--radius-57) !important;
  -webkit-border-radius: var(--radius-57) !important;
  -moz-border-radius: var(--radius-57) !important;
  -ms-border-radius: var(--radius-57) !important;
  -o-border-radius: var(--radius-57) !important;
}

.b-radius-circle {
  border-radius: 50% !important;
}

.b-radius-30 {
  border-radius: var(--radius-30);
}

.b-radius-20 {
  border-radius: var(--radius-20);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

* {
  scroll-margin-top: 5.57rem;
  scroll-behavior: smooth;

  @media (min-width: 760px) {
    scroll-margin-top: 6rem;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.57rem;
  margin-right: -0.57rem;
  --bs-gutter-x: 2.1429rem;
}

[class*="col-"] {
  padding-right: 0.57rem;
  padding-left: 0.57rem;
}

p {
  margin: 0;
}

a {
  outline: none !important;
}

.container {
  /* padding-right: 0.57rem !important;
    padding-left: 0.57rem !important; */
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  width: 100%;
  /* padding-right: 0.57rem !important;
    padding-left: 0.57rem !important; */
  margin-left: auto;
  margin-right: auto;
}

input,
select {
  outline: none !important;
}

.text-right,
.align-right {
  text-align: right;
}

.text-center,
.align-center {
  text-align: center;
}

.text-left,
.align-left {
  text-align: left;
}

.p-sticky {
  position: sticky;
  top: 5.7rem;
  align-self: flex-start;
}

*,
::after,
::before {
  box-sizing: border-box;
}

/* CSS Document */
html,
body {
  margin: 0rem;
  padding: 0rem;
  font:
    normal 1rem/1.8 "IranSite",
    "Arial";
  color: #666666;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.9;
}

:-moz-placeholder {
  color: inherit;
  opacity: 0.9;
}

::-moz-placeholder {
  color: inherit;
  opacity: 0.9;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 0.9;
}

:placeholder {
  color: inherit;
  opacity: 0.9;
}

a,
a:link {
  text-decoration: none;
  transition: color ease 300ms;
  -moz-transition: color ease 300ms;
  -webkit-transition: color ease 300ms;
  -o-transition: color ease 300ms;
  -ms-transition: color ease 300ms;
}

@media (max-width: 41.0714rem) {
  .mt-xs-reset {
    margin-top: 0rem !important;
  }

  .mr-xs-reset {
    margin-left: 0rem !important;
  }

  .mb-xs-reset {
    margin-bottom: 0rem !important;
  }

  .ml-xs-reset {
    margin-right: 0rem !important;
  }

  .ml-reset {
    margin: 0rem !important;
  }
}

@media (max-width: 54.7857rem) {
  .mt-sm-reset {
    margin-top: 0rem !important;
  }

  .mr-sm-reset {
    margin-left: 0rem !important;
  }

  .mb-sm-reset {
    margin-bottom: 0rem !important;
  }

  .ml-sm-reset {
    margin-right: 0rem !important;
  }

  .ml-reset {
    margin: 0rem !important;
  }
}

@media (max-width: 70.7857rem) {
  .mt-md-reset {
    margin-top: 0rem !important;
  }

  .mr-md-reset {
    margin-left: 0rem !important;
  }

  .mb-md-reset {
    margin-bottom: 0rem !important;
  }

  .ml-md-reset {
    margin-right: 0rem !important;
  }

  .ml-reset {
    margin: 0rem !important;
  }
}

@media (max-width: 85.6429rem) {
  .mt-lg-reset {
    margin-top: 0rem !important;
  }

  .mr-lg-reset {
    margin-left: 0rem !important;
  }

  .mb-lg-reset {
    margin-bottom: 0rem !important;
  }

  .ml-lg-reset {
    margin-right: 0rem !important;
  }

  .ml-reset {
    margin: 0rem !important;
  }
}

@media (max-width: 85.6429rem) {
  .full-lg-none.full-column-inner {
    margin-left: 0 !important;
    width: auto !important;
  }
}

@media (max-width: 70.7857rem) {
  .full-md-none.full-column-inner {
    margin-left: 0 !important;
    width: auto !important;
  }
}

@media (max-width: 54.7857rem) {
  .full-sm-none.full-column-inner {
    margin-left: 0 !important;
    width: auto !important;
  }
}

@media (max-width: 41.0714rem) {
  .full-xs-none.full-column-inner {
    margin-left: 0 !important;
    width: auto !important;
  }
}

/*left full ,right full*/
.dng-left-full,
.dng-right-full {
  max-width: none;
}

/*list*/
.list-style,
.list-style li {
  list-style: none !important;
}

.list-style {
  margin: 0 !important;
  padding: 0 !important;
}

/*Fixed Footer*/
.fixed_footer_bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  max-height: 100%;
}

.fixed_footer_bottom .fixed_footer.active {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
}

.fixed_footer_clone {
  background-color: #121212;
}

.dng-main.Boxed .rev_slider_wrapper.fullscreen-container {
  max-width: 100% !important;
  right: 0 !important;
}

@media only screen and (max-width: 70.7857rem) {
  .fixed_footer_bottom .fixed_footer.active {
    position: relative;
  }

  .fixed_footer_bottom,
  .fixed_footer_clone,
  .footer_box {
    height: auto !important;
    position: relative !important;
    max-height: inherit !important;
  }
}

/*color-white*/
.color-white,
.color-white p,
.color-white .Normal,
.color-white a,
.color-white a:link,
.color-white a:active,
.color-white a:visited,
.color-white a:hover,
.color-white h1,
.color-white h2,
.color-white h3,
.color-white h4,
.color-white h5,
.color-white h6 {
  color: #fff !important;
}

/*ilightbox-noscroll*/
body.ilightbox-noscroll {
  overflow: visible;
}

[data-parallax="parallax"] {
  visibility: hidden;
}

[data-parallax="parallax"].parallax-load {
  visibility: visible;
}

/*input*/
input[type="text"] {
  border-radius: 0;
}

/*icon*/
.fa,
.fas {
  font-weight: 900 !important;
}

.sico,
.icon-svg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

.sico svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: inherit;
  vertical-align: initial;
}

p > .sico,
p > .icon-svg,
li > .sico,
li > .icon-svg {
  vertical-align: middle;
  margin-bottom: 0.2em;
}

/*icon-svg*/

.icon-svg svg {
  width: 1em;
  height: 1em;
  stroke: currentColor !important;
  opacity: 0;
  vertical-align: sub;
  color: inherit;
}

.icon-svg svg * {
  color: inherit;
}

.icon-svg svg path,
.icon-svg svg polyline,
.icon-svg svg rect,
.icon-svg svg line {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.icon-svg.animated svg {
  opacity: 1;
}

/*btn*/
[class^="button-"],
[class*=" button-"] {
  position: relative;
  display: inline-block;
  font-size: 1.0714rem;
  font-weight: 600;
  line-height: 3.5714rem;
  height: 3.5714rem;
  padding: 0 1.7857rem;
  margin-left: 0.2143rem;
  margin-bottom: 0.2143rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-image: none;
  border: none;
  border-radius: 3.5714rem;
  -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
}

body [class*="btn-"]:hover {
}

[class*="btn-"]:focus {
  outline: 0;
  box-shadow: none;
}

body [class*="btn-"] {
  text-decoration: none !important;
}

/*social*/
[class*="social-"] {
  position: relative;
  display: inline-block;
}

/* section-no-padding */
.d-wrapper .section-no-padding.is-box .is-container {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* col-no-padding */
.row.col-no-padding {
  margin-right: 0;
  margin-left: 0;
}

.row.col-no-padding [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.is-container.no-space {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.layout-no-mt .is-container {
  margin-top: 0 !important;
}

.layout-no-mb .is-container {
  margin-bottom: 0 !important;
}

.layout-no-plr .is-container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/*border radius*/
.border-radius-0 {
  border-radius: 0rem !important;
}

.border-radius-3 {
  border-radius: 0.2143rem !important;
}

.border-radius-circle {
  border-radius: 50% !important;
}

/*border radius*/
.position-relative {
  position: relative !important;
}

.position-static {
  position: static !important;
}

.icon-cross {
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative;
}

.icon-cross::after,
.icon-cross::before {
  content: "";
  border-right: 0.1429rem solid currentColor;
  position: absolute;
  height: 94%;
  margin-top: 3%;
  right: 50%;
  border-radius: 0.2143rem;
  margin-right: -0.0714rem;
}

.icon-cross::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.icon-cross::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* */

/* Adjustment for Default & Foundation */
.d-wrapper .container > .row,
.d-wrapper .container > div > .row {
  padding-top: 0.7143rem;
  padding-bottom: 0.7143rem;
  margin-top: 0;
  margin-bottom: 0;
}

.d-wrapper .container-fluid > .row,
.d-wrapper .container-fluid > div > .row {
  padding-top: 0.7143rem;
  padding-bottom: 0.7143rem;
}

.d-wrapper a:hover {
  text-decoration: none;
}

.d-wrapper img {
  max-width: 100%;
}

@media all and (max-width: 73.1429rem) {
  .margin-left-1024-reset {
    margin-right: 0rem !important;
  }

  .margin-right-1024-reset {
    margin-left: 0rem !important;
  }
}

/* Container for All Sections */
.d-wrapper {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.d-wrapper > div {
  display: table;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  position: relative;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.d-wrapper .is-wrapper {
  position: relative;
}

.d-wrapper::after {
  content: "";
  clear: both;
  display: block;
  overflow: hidden;
}

.d-wrapper .d-placeholder {
  display: none;
}

/* Boxes */
.is-box {
  vertical-align: middle;
}

.is-boxes {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  position: relative;
}

.is-boxes:empty {
  min-height: 3.5714rem;
}

.is-overlay + .is-boxes > .is-box-centered:empty {
  height: 19.6429rem;
}

@media all and (max-width: 70.7857rem) {
  .is-overlay + .is-boxes:empty {
    min-height: 19.6429rem;
  }

  .is-overlay + .is-boxes > .is-box-centered:empty {
    height: 19.6429rem;
  }
}

.no-min-height {
  min-height: auto;
}

.is-box-centered {
  display: table-cell;
  width: 100%;
  position: relative;
  vertical-align: middle;
}

.is-stretch > div:not(.is-arrow-down) {
  position: relative;
  right: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  display: table;
}

.flexi-position {
  position: relative;
}

.is-stretch .flexi-position {
  position: absolute;
}

.is-section.is-stretch {
  min-height: 21.4286rem;
}

.is-section.layout-hidden-content {
  display: none !important;
}

@media all and (max-width: 70.7857rem) {
  .is-section:not(.is-box) {
    height: auto !important;
  }

  .is-boxes {
    height: 100% !important;
  }

  .is-box-img .is-boxes {
    height: 100% !important;
  }

  .is-box-centered {
    display: table-cell;
  }

  .is-box {
    display: table !important;
  }
}

.is-container {
  margin: 0 auto;
  padding: 0 1.0714rem;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.d-wrapper .is-boxed-layout .is-container {
  padding: 3.5714rem;
  background: #fff;
}

@media all and (max-width: 91.4286rem) {
  .d-wrapper .is-boxed-layout .is-container {
    padding: 2.1429rem;
  }
}

@media all and (max-width: 73.1429rem) {
  .d-wrapper .is-boxed-layout .is-container {
    padding: 2.1429rem;
  }
}

.d-wrapper .is-boxed-layout {
  background: #fff !important;
}

.d-wrapper .is-box .is-container {
  margin-top: 7.1429rem;
  margin-bottom: 7.1429rem;
}

.has-sidebar .d-wrapper .is-box .is-container {
  margin-top: 2.8571rem;
  margin-bottom: 2.8571rem;
}

.sidebar_pos_left .is-container,
.sidebar_pos_right .is-container {
  padding: 0;
}

.sidebar_pos_fixleft .sidebar_dynamic .is-container,
.sidebar_pos_fixright .sidebar_dynamic .is-container,
.sidebar_pos_fixleftfull .sidebar_dynamic .is-container,
.sidebar_pos_fixrightfull .sidebar_dynamic .is-container {
  padding: 0;
}

@media all and (max-width: 70.7857rem) {
  .d-wrapper .is-box .is-container {
    margin-top: 4.2857rem;
    margin-bottom: 4.2857rem;
  }

  .has-sidebar .d-wrapper .is-box .is-container {
    margin-top: 1.4286rem;
    margin-bottom: 1.4286rem;
  }
}

.is-overlay {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*z-index:1;*/
}

/*.is-boxes, .is-box-centered {z-index:1}*/
.is-overlay .is-overlay-bg {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 60%;
}

.is-overlay .is-overlay-bg.is-scale-animated.is-appeared {
  animation: is-scale 25s ease forwards;
  -ms-animation: is-scale 25s ease forwards;
  -webkit-animation: is-scale 25s ease forwards;
  -o-animation: is-scale 25s ease forwards;
  -moz-animation: is-scale 25s ease forwards;
}

@keyframes is-scale {
  from {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
  }

  to {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
}

.is-overlay .is-overlay-color {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  opacity: 0.05;
}

.is-overlay .is-overlay-content {
  position: absolute;
  right: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: inherit;
}

.is-overlay .is-overlay-content.content-selectable {
  z-index: 1;
}

.overlay-responsive .is-overlay-mobile-bg {
  display: none;
}

@media (max-width: 54.7857rem) {
  .overlay-responsive .is-overlay-bg {
    display: none;
  }

  .overlay-responsive .is-overlay-mobile-bg {
    display: block;
    position: absolute;
    right: 0rem;
    top: 0rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.is-overlay-Video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  right: 0;
}

.is-overlay-Video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-container {
  z-index: 1;
}

*/ .is-bg-grey,
.d-wrapper > div.is-bg-grey {
  background-color: #eeeff0;
}

.is-bg-dark,
.d-wrapper > div.is-bg-dark {
  background-color: #111;
}

.is-bg-light,
.d-wrapper > div.is-bg-light {
  background-color: #fff;
}

.d-wrapper > div.is-bg-none {
  background-color: transparent;
}

.is-light-text,
.is-light-text h1,
.is-light-text h2,
.is-light-text h3,
.is-light-text h4,
.is-light-text h5,
.is-light-text h6,
.is-light-text p,
.is-light-text li,
.is-light-text div,
.is-light-text span:not(.sico) {
  color: #fff;
}

.is-dark-text .is-light-text {
  color: #fff;
}

.is-content-top {
  vertical-align: top;
}

.is-content-bottom {
  vertical-align: bottom;
}

.is-container.is-content-left {
  margin-right: 7.1429rem;
}

.is-container.is-content-right {
  margin-left: 7.1429rem;
}

@media all and (max-width: 85.7143rem) {
  .is-container.is-content-left {
    margin-right: 4.2857rem;
  }

  .is-container.is-content-right {
    margin-left: 4.2857rem;
  }
}

@media all and (max-width: 70.7857rem) {
  .is-container.is-content-left {
    margin-right: auto;
  }

  .is-container.is-content-right {
    margin-left: auto;
  }
}

.is-content-top {
  vertical-align: top;
}

.is-content-bottom {
  vertical-align: bottom;
}

.is-content-top > .is-boxes > .is-container {
  align-self: flex-start;
}

.is-content-bottom > .is-boxes > .is-container {
  align-self: flex-end;
}

.is-align-right {
  text-align: left;
}

.is-align-center {
  text-align: center;
}

.is-align-left {
  text-align: right;
}

.is-align-justify {
  text-align: justify;
}

@media (max-width: 570.4271rem) {
  #Body .is-section-xs-50 {
    height: 50vh;
  }

  #Body .is-section-xs-auto {
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 760.57rem) {
  #Body .is-section-sm-50 {
    height: 50vh;
  }

  #Body .is-section-sm-auto {
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 990.1414rem) {
  #Body .is-section-md-50 {
    height: 50vh;
  }

  #Body .is-section-md-auto {
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 1190.7129rem) {
  #Body .is-section-lg-50 {
    height: 50vh;
  }

  #Body .is-section-lg-auto {
    height: auto;
    min-height: auto;
  }
}

.is-container.is-stretch-w {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0 !important;
  padding-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.is-container.is-stretch-h {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.is-container.is-stretch-w > div {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.is-container.is-stretch-w > div > div {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.is-container.is-stretch-h > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.is-container.is-fullheight {
  height: 100%;
}

.is-container.is-container-fluid {
  max-width: none;
  width: auto;
}

.bg-attachment-fixed,
.bg-attachment-fixed .is-overlay-bg {
  background-attachment: fixed !important;
}

/*ipad background attachment*/
@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (-webkit-min-device-pixel-ratio: 1) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 54.8571rem) and (max-device-width: 73.1429rem) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 59.5714rem) and (max-device-width: 79.4286rem) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 59.5714rem) and (max-device-width: 59.5714rem) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 79.4286rem) and (max-device-width: 79.4286rem) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 73.1429rem) and (max-device-width: 97.5714rem) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 73.1429rem) and (max-device-width: 73.1429rem) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

@media only screen and (min-device-width: 97.5714rem) and (max-device-width: 97.5714rem) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-attachment-fixed,
  .bg-attachment-fixed .is-overlay-bg {
    background-attachment: scroll !important;
  }
}

.is-hidden {
  display: none !important;
}

.gm-style {
  font-family: inherit !important;
}

/*.is-rounded-button-medium*/
.is-rounded-button-medium {
}

.is-rounded-button-medium a {
  display: inline-block;
  text-align: center;
  margin: 0 1.4286rem;
  border-radius: 35.7143rem;
  width: 5rem;
  height: 5rem;
  background-color: #aaa;
  overflow: hidden;
}

.is-rounded-button-medium a i {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  color: #ffffff;
  font-size: 2.1429rem;
  line-height: 5rem;
}

.is-rounded-button-medium a:first-child {
  margin: 0 0 0 1.4286rem;
}

.is-rounded-button-medium a:last-child {
  margin: 0 1.4286rem 0 0;
}

/*custom module loading*/
@-webkit-keyframes loading-rotate {
  0% {
    -webkit-transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes loading-rotate {
  0% {
    -moz-transform: rotate(0);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.custom-module .swiper-container.loading,
.custom-module .soon.loading {
  min-height: 7.1429rem;
  max-height: 50vh;
  position: relative;
}

.custom-module .swiper-container.loading > *,
.custom-module .soon.loading > * {
  visibility: hidden;
}

.custom-module .swiper-container.loading:after,
.custom-module .soon.loading:after {
  content: "";
  width: 2.8571rem;
  height: 2.8571rem;
  display: inline-block;
  border: 0.3571rem solid #e3e3e3;
  border-top-color: #555;
  border-right-color: #555;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 2.1429rem;
  right: 50%;
  margin-right: -1.4286rem;
  -webkit-animation: loading-rotate 0.7s infinite;
  -moz-animation: loading-rotate 0.7s infinite;
  animation: loading-rotate 0.7s infinite;
  z-index: 101;
}

.custom-module .soon {
  display: none;
}

.custom-module .number {
  color: currentColor;
}

#Body:not(.builder-editor-mode) .custom-module .ajaxform .from-error {
  display: none;
}

/*video*/
.html5-video {
  position: relative;
}

.html5-video video {
  width: 100%;
}

.html5-video .play-button {
  position: absolute;
  right: 50%;
  top: 50%;
  margin: -2.5714rem -2.5714rem 0 0;
  cursor: pointer;
}

/*tabs*/

.section-slider-bgcarousel .is-overlay,
.section-slider-bgcarousel .is-overlay-content.content-selectable,
.section-slider-bgcarousel .swiper-container,
.section-slider-bgcarousel .is-overlay {
  z-index: initial;
}

.section-carousel-bg .swiper-wrapper-overflow {
  height: 100%;
}

.section-carousel-bg .swiper-slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-carousel-bg .swiper-pagination {
  bottom: 2.1429rem;
  margin: 0;
  position: absolute;
}

.section-carousel-bg .swiper-wrapper-overflow {
  padding: 0;
}

@media only screen and (min-width: 992px) {
  .section-carousel-bg.swiper-container .swiper-button-next,
  .section-carousel-bg.swiper-container .swiper-button-prev {
    width: 3.2143rem;
    height: 3.2143rem;
    margin: -1.6429rem 0 0 !important;
  }

  .section-carousel-bg.swiper-container .swiper-button-next {
    left: 1.7857rem;
    right: auto;
  }

  .section-carousel-bg.swiper-container .swiper-button-prev {
    right: 1.7857rem;
  }

  .section-carousel-bg.swiper-container .swiper-button-next span,
  .section-carousel-bg.swiper-container .swiper-button-prev span {
    width: 2.1429rem;
    height: 2.1429rem;
    border-width: 0.1429rem;
    margin-top: -1.0714rem;
  }
}

/*menu img size*/
.gomenu a img {
  width: 1em;
  vertical-align: middle;
  margin-left: 0.3571rem;
  margin-bottom: 0.1429rem;
}

.AboutSection {
  margin-top: 2.2rem;
  position: relative;
  margin-bottom: 7.8rem;
}

.AboutSection .AboutContent .AboutText {
  row-gap: 2.8rem;
}

.AboutSection svg {
  max-width: 1.715rem;
  max-height: 1.715rem;
}

.AboutSection:before {
  content: "";
  width: 0.1%;
  height: 100%;
  position: absolute;
  bottom: 0rem;
  background: linear-gradient(0, #ffffff 0%, #303030 50.96%, #ffffff 100%);
  right: 50%;
}

.AboutSection .ContactContent .ContactText > div {
  padding: 0.5em 0;
}

.AboutSection .ContactContent .ContactText .Whatsapp a > span,
.AboutSection .ContactContent .ContactText .Etaa a > span {
  position: absolute;
  width: 100%;
  right: 0;
  text-align: end;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  color: var(--secondary-darker) !important;
}

.AboutSection .ContactContent .ContactText .Whatsapp a:hover span,
.AboutSection .ContactContent .ContactText .Etaa a:hover span {
  opacity: 1;
  pointer-events: auto;
}

.AboutSection .ContactContent .ContactText .Whatsapp a:hover bdi {
  opacity: 0;
  pointer-events: none;
}

.AboutSection .ContactContent .ContactText .Etaa a:hover strong {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .AboutSection:before {
    display: none;
  }
}

#dnn_content {
  min-height: 91dvh;
}

.footer-row .dngTextBox {
  width: 100%;
}

.footer-row .copyright-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.78rem 0;
}

.footer-row .copyright-row .design-by,
.footer-row .copyright-row a,
.footer-row .copyright-row a:link {
  font-size: 1rem;
  color: #fff;
}

.footer-row .copyright-row .copyright {
  font-size: 1rem;
  color: #fff;
}

.animated-circles-sec {
  width: 100%;
  height: 100dvh;
  background: #08011a;
  backdrop-filter: blur(7.5px);
  padding-top: 6rem;
}

.animated-circles-sec .holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.animated-circles-sec .holder .video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
}

.animated-circles-sec .holder .video:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #3e1a63;
  mix-blend-mode: overlay;
  opacity: 0.7;
}

.animated-circles-sec .holder .video video {
  height: 100%;
  object-fit: cover;
}

.animated-circles-sec .holder img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.animated-circles-sec .holder .circle-1,
.animated-circles-sec .holder .circle-2 {
  position: relative;
  width: 615px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(247, 240, 255, 0.5);
  box-shadow: 0px 0px 22px 1.5px #9b57d45c;
  border-radius: 50%;
}

.animated-circles-sec .holder .circle-1:before,
.animated-circles-sec .holder .circle-2:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0px 0px 22px 1.5px #9b57d45c;
  border-radius: 50%;
}

.animated-circles-sec .holder .circle-2:before {
  box-shadow: inset 0px 0px 150px 1.5px #09011a;
}

.animated-circles-sec .holder .circle-1 .item,
.animated-circles-sec .holder .circle-2 .item {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  top: 50%;
  left: 50%;
  -width: max-content;
  width: 8.2rem;
  aspect-ratio: 1;
  white-space: nowrap;
  z-index: 1;
}

.animated-circles-sec .holder .circle-1 .item strong,
.animated-circles-sec .holder .circle-2 .item strong {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.animated-circles-sec .holder .circle-1 .item strong span,
.animated-circles-sec .holder .circle-2 .item strong span {
  position: absolute;
  bottom: 110%;
}

.animated-circles-sec .holder .circle-1 {
  animation: spin 10s linear infinite;
  -webkit-animation: spin 20s linear infinite;
}

.animated-circles-sec .holder .circle-1 .item strong {
  animation: counterSpin 20s linear infinite;
}

.animated-circles-sec .holder .circle-1 .item:nth-child(1) {
  transform: translateY(-272%) translateX(95%);
}

.animated-circles-sec .holder .circle-1 .item:nth-child(2) {
  transform: translateY(-225%) translateX(-254%);
}

.animated-circles-sec .holder .circle-1 .item:nth-child(3) {
  transform: translateY(20%) translateX(-310%);
}

.animated-circles-sec .holder .circle-1 .item:nth-child(4) {
  transform: translateY(160%) translateX(115%);
}

.animated-circles-sec .holder .circle-2 {
  position: absolute;
  width: 352px;
  -webkit-animation: spin2 20s linear infinite;
}

.animated-circles-sec .holder .circle-2 .item strong {
  animation: counterSpin2 20s linear infinite;
  -webkit-animation: counterSpin2 20s linear infinite;
}

.animated-circles-sec .holder .circle-2 .item:nth-child(1) {
  transform: translateY(-172%) translateX(40%);
}

.animated-circles-sec .holder .circle-2 .item:nth-child(2) {
  transform: translateY(13%) translateX(-190%);
}

.animated-circles-sec .holder .circle-2 .item:nth-child(3) {
  transform: translateY(76%) translateX(40%);
}

@media (max-width: 768px) {
  .animated-circles-sec .holder .circle-1 .item strong,
  .animated-circles-sec .holder .circle-2 .item strong {
    font-size: 0.8rem;
  }

  .animated-circles-sec .holder .circle-1 .item svg,
  .animated-circles-sec .holder .circle-2 .item svg {
    max-width: 1.6rem;
  }

  .animated-circles-sec .holder .circle-1 {
    width: 375px;
  }

  .animated-circles-sec .holder .circle-1 .item:nth-child(1) {
    transform: translateY(-164%) translateX(65%);
  }

  .animated-circles-sec .holder .circle-1 .item:nth-child(2) {
    transform: translateY(-125%) translateX(-195%);
  }

  .animated-circles-sec .holder .circle-1 .item:nth-child(3) {
    transform: translateY(-15%) translateX(110%);
  }

  .animated-circles-sec .holder .circle-1 .item:nth-child(4) {
    transform: translateY(106%) translateX(-94%);
  }

  .animated-circles-sec .holder .circle-2 {
    width: 240px;
  }

  .animated-circles-sec .holder .circle-2 .item:nth-child(1) {
    transform: translateY(-125%) translateX(22%);
  }

  .animated-circles-sec .holder .circle-2 .item:nth-child(2) {
    transform: translateY(-80%) translateX(-148%);
  }

  .animated-circles-sec .holder .circle-2 .item:nth-child(3) {
    transform: translateY(41%) translateX(0%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@keyframes counterSpin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes spin2 {
  to {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}

@keyframes counterSpin2 {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

.sidebar_dynamic {
  padding: 0 !important;
  background: #fff;
}

.sidebar_dynamic.sidebar_dynamic_sytle01 .sidebar_sticky {
  width: 90% 273.734px !important;
  margin: auto;
}

.sidebar-menu {
  direction: ltr;
  height: calc(100dvh - 5.71rem) !important;
  overflow-y: auto;
  padding: 2rem 1rem;
}

.sidebar-menu * {
  direction: rtl;
}

.sidebar-menu::-webkit-scrollbar-track {
  border-radius: 1rem;
}

.sidebar-menu::-webkit-scrollbar {
  width: 0.3rem;
  background-color: var(--light-3);
}

.sidebar-menu::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background-color: var(--light-1);
}

.sidebar-menu .gomenu > ul > li > a {
  padding: 1.1rem !important;
  border-radius: 8px !important;
  color: currentColor !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-menu .gomenu > ul > li img {
  filter: grayscale(1);
}

.sidebar-menu .gomenu > ul > li:hover > a {
  background: none !important;
}

.sidebar-menu .gomenu > ul > li:hover img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.sidebar-menu .gomenu > ul > li.active > a,
.sidebar-menu .gomenu > ul > li.current > a {
  background-color: #f5f0fa !important;
}

.sidebar-menu .gomenu > ul > li.active img,
.sidebar-menu .gomenu > ul > li.current img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.sidebar-menu .gomenu > ul > li.active ul,
.sidebar-menu .gomenu > ul > li.current ul {
  display: block;
}

.sidebar-menu .gomenu > ul > li span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-menu .gomenu > ul > li > ul,
.sidebar-menu .gomenu > ul > li > ul li {
  padding: 0 !important;
}

.sidebar-menu .gomenu ul ul a {
  padding: 0.57rem 1.1rem !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-menu .gomenu ul ul a:before {
  content: "";
  width: 24px;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

.sidebar-menu .gomenu ul ul a:hover,
.sidebar-menu .gomenu ul ul li.subcurrent > a {
  color: currentColor !important;
}

.sidebar-menu .gomenu > ul > li.dir > a:after {
  content: "";
  border-top: 1px solid var(--secondary-main) !important;
  border-right: 1px solid var(--secondary-main) !important;
  width: 9px !important;
  height: 9px !important;
  transform: rotate(135deg) !important;
  -webkit-transform: rotate(135deg) !important;
  right: auto !important;
  left: 1rem !important;
  top: calc(50% - 4px) !important;
  margin: 0 !important;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform-origin: center;
}

.sidebar-menu .gomenu > ul > li.dir.active > a:after {
  transform: rotate(-45deg) !important;
  -webkit-transform: rotate(-45deg) !important;
  -moz-transform: rotate(-45deg) !important;
  -ms-transform: rotate(-45deg) !important;
  -o-transform: rotate(-45deg) !important;
}

.sidebar-menu .gomenu > ul > li > a::before {
  display: none !important;
}

.sidebar-menu .gomenu ul ul li.subcurrent > a:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22matrix(-0%201%201%200%200%200)%22%3E%3Cg%20transform%3D%22translate(7.25%205.25)%22%3E%3Cpath%20d%3D%22M4.21967.21967c.29289-.292893.76777-.292893%201.06066%200l4%204c.29289.29289.29289.76777%200%201.06066-.29289.29289-.76777.29289-1.06066%200L5.5%202.56066V12.75c0%20.4142-.33579.75-.75.75-.41421%200-.75-.3358-.75-.75V2.56066L1.28033%205.28033c-.292893.29289-.767767.29289-1.06066%200-.292893-.29289-.292893-.76777%200-1.06066l4-4z%22%20fill%3D%22%235B2D8B%22%20fill-opacity%3D%22.4%22/%3E%3Cpath%20d%3D%22M5.28033.21967c-.29289-.292893-.76777-.292893-1.06066%200l-4%204c-.292893.29289-.292893.76777%200%201.06066.292897.29289.76777.29289%201.06066%200L4.75254%201.77925%208.21967%205.28033c.29289.29289.76777.29289%201.06066%200%20.29289-.29289.29289-.76777%200-1.06066l-4-4z%22%20fill%3D%22%235B2D8B%22%20transform%3D%22matrix(-1%200%200%201%209.5%200)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  display: block;
}

.sidebar-menu .gomenu > ul > li > ul::before {
  display: none;
}

.sidebar-siblings-container {
  padding: 2rem 1rem;
}

@media only screen and (max-width: calc(1319px)) {
  .sidebar-menu-close {
    top: 4.8rem !important;
  }

  .sidebar-menu {
    height: 100% !important;
    padding: 1rem 0 !important;
  }

  .sidebar_dynamic.sidebar_dynamic_sytle01 .sidebar_sticky {
  }

  .sidebar_pos_fixleftfull .sidebar_sticky,
  .sidebar_pos_fixrightfull .sidebar_sticky,
  .sidebar_pos_left .sidebar_sticky,
  .sidebar_pos_right .sidebar_sticky {
    padding: 0 !important;
  }

  .sidebar_pos_left.sidebar_dynamic {
    left: -335px !important;
    right: auto !important;
    width: 24rem !important;
    margin: 0 !important;
  }

  .show-sidebar .sidebar_pos_left.sidebar_dynamic {
    left: 0 !important;
  }
}

.right-title-container {
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .sidebar-siblings-container {
    padding: 2rem 0rem;
  }
}

/***************** Start Fullpage Loading *******************/
.fullpage-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #08011a;
  z-index: 1000;
}

.loading-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 550px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
}

.loading-container:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #3e1a63;
  filter: blur(250px);
  border-radius: 50%;
}

.dot-ring {
  display: block;
  position: absolute;
  border: 5px dotted #82a4e6;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: rotate 4s infinite linear;
}

.dot-ring:nth-child(1) {
  width: 350px;
  animation-delay: -1s;
}

.dot-ring:nth-child(2) {
  width: 255px;
  animation-delay: 0s;
  border-color: var(--accent-color);
}

.dot-ring:nth-child(3) {
  width: 155px;
  animation-delay: 1s;
}

.center-dots {
  position: absolute;
  display: flex;
  justify-content: space-between;
  gap: 0.57rem;
}

.center-dots .dot {
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  animation: sequenced_jump 0.5s infinite;
  border-radius: 50%;
}

.center-dots .dot:nth-child(1) {
  animation-name: jump1;
}

.center-dots .dot:nth-child(2) {
  animation-name: jump2;
}

.center-dots .dot:nth-child(3) {
  animation-name: jump3;
}

.center-dots .dot:nth-child(4) {
  animation-name: jump4;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
    animation-timing-function: ease-in;
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes jump1 {
  0% {
    transform: translateY(0);
  }

  12.5% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes jump2 {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(0);
  }

  37.5% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes jump3 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0);
  }

  62.5% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes jump4 {
  0% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(0);
  }

  87.5% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

/***************** End Fullpage Loading *******************/
/***************** Start User State *******************/
.user-state-wrapper {
  min-height: 100%;
  margin-bottom: 2rem;
  padding: 1.3rem;
  border-radius: var(--radius-16);
  background: #ffffff;
  -webkit-border-radius: var(--radius-16);
  -moz-border-radius: var(--radius-16);
  -ms-border-radius: var(--radius-16);
  -o-border-radius: var(--radius-16);
}

.user-state-wrapper .warning-alert {
  display: flex;
  align-items: center;
  gap: 0.57rem;
  background: #fff8e6;
  border-radius: var(--radius-8);
  padding: 0.4rem 0.7rem;
}

.user-state-wrapper .warning-alert svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--accent-color3);
}

.user-state-wrapper .warning-alert .msg {
  color: var(--accent-color3);
}

.user-state-wrapper .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: solid 1px #e7e7e7;
  border-radius: var(--radius-8);
  padding: 2rem 1rem 1rem;
  margin-bottom: 0.57rem;
  gap: 0.57rem;
}

.user-state-wrapper .item .value {
  color: var(--accent-color);
}

/***************** End User State *******************/

.categorylist {
  table {
    border-collapse: collapse;
    width: 95%;
    margin: 1.5rem;

    td,
    th {
      border-left: 1px solid var(--Accent-Dark);
      border-bottom: 1px solid #cdcdcd;
      padding: 1rem;
      text-align: center;
    }

    td:last-child,
    th:last-child {
      border-left: unset;
    }
  }
}