:root {
  --appprimary: #27ae60;
  --black-2: 
rgba(0, 0, 0, 0.102);
  --black: 
rgba(0, 0, 0, 1);
  --blue-ribbon: 
rgba(0, 106, 254, 0.502);
  --azure-radiance-2: 
rgba(0, 122, 255, 0.102);
  --azure-radiance-3: 
rgba(0, 122, 255, 0.2);
  --azure-radiance: 
rgba(0, 122, 255, 1);
  --chateau-green: 
rgba(39, 174, 96, 0.102);
  --green-2: 
rgba(39, 174, 96, 1);
  --blue: 
rgba(47, 128, 237, 0.102);
  --blue-1: 
rgba(47, 128, 237, 1);
  --gray-1: 
rgba(51, 51, 51, 1);
  --gray-2: 
rgba(79, 79, 79, 1);
  --blue-3: 
rgba(86, 204, 242, 1);
  --gray-3: 
rgba(130, 130, 130, 1);
  --mountain-mist: 
rgba(146, 146, 146, 0.2);
  --gray-4: 
rgba(189, 189, 189, 1);
  --gray-5: 
rgba(224, 224, 224, 1);
  --red: 
rgba(235, 87, 87, 1);
  --catskill-white: 
rgba(239, 244, 248, 1);
  --orange: 
rgba(242, 153, 74, 1);
  --concrete: 
rgba(242, 242, 242, 0.2);
  --gray-6: 
rgba(242, 242, 242, 1);
  --tan-hide: 
rgba(243, 148, 81, 0.102);
  --appsecondary: 
rgba(243, 148, 81, 1);
  --wild-sand: 
rgba(243, 244, 246, 1);
  --white: 
rgba(255, 255, 255, 1);
--mountain-mist: #92929233;

  --azure-radiance: #007aff;
  --azure-radiance-2: #007aff1a;
  --black: #000000;
  --gray-1: #333333;
  --gray-3: #828282;
  --gray-4: #bdbdbd;
  --gray-5: #e0e0e0;
  --orange: #f2994a;
  --white: #ffffff;
  --neutralsecondary-3: #d7dbdb;
  --azure-radiance-promotion: #007aff1a;
  --black-haze: #f7f7f7;

  --font-size-xs: 11px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 24px;
  --font-size-xl2: 32px;

  --font-family-cabin: "Cabin", Helvetica;
  --font-family-sf_pro-bold: "SF Pro-Bold", Helvetica;
  --font-family-sf_pro-medium: "SF Pro-Medium", Helvetica;
  --font-family-sf_pro-regular: "SF Pro-Regular", Helvetica;
  --font-family-sf_pro-semibold: "SF Pro-Semibold", Helvetica;
}

.sfpro-medium-gray-14px {
  color: var(--gray-3);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-mine-shaft-16px {
  color: var(--gray-1);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-l);
  font-weight: 510;
  font-style: normal;
}
.sfpro-medium-mine-shaft-12px {
  color: var(--gray-1);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-s);
  font-weight: 510;
  font-style: normal;
}
.sfpro-normal-mine-shaft-14px {
  color: var(--gray-1);
  /*font-family: var(--font-family-sf_pro-semibold);*/
  font-size: var(--font-size-m);
  font-weight: 590;
  font-style: normal;
}
.sfpro-medium-mine-shaft-14px {
  color: var(--gray-1);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-white-14px {
  color: var(--white);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-azure-radiance-14px {
  color: var(--azure-radiance);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-gray-12px {
  color: var(--gray-3);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-s);
  font-weight: 510;
  font-style: normal;
}

/*---------*/

.sfpro-medium-concrete-14px {
  color: var(--gray-6);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}
.sfpro-medium-abbey-12px {
  color: var(--gray-2);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-s);
  font-weight: 500;
  font-style: normal;
}
.sfpro-medium-azure-radiance-16px {
  color: var(--azure-radiance);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-l);
  font-weight: 500;
  font-style: normal;
}
.sfpro-medium-tan-hide-14px {
  color: var(--appsecondary);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}

.sfpro-medium-blue-14px {
  color: var(--blue-1);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}
.sfpro-normal-white-32px {
  color: var(--white);
  /*font-family: var(--font-family-sf_pro-semibold);*/
  font-size: var(--font-size-xl2);
  font-weight: 400;
  font-style: normal;
}


.sfpro-medium-abbey-14px {
  color: var(--gray-2);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-mandy-14px {
  color: var(--red);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}

.sfpro-regular-normal-white-16px {
  color: var(--white);
  /*font-family: var(--font-family-sf_pro-regular);*/
  font-size: var(--font-size-l);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-mine-shaft-11px {
  color: var(--gray-1);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-style: normal;
}
.sfpro-medium-viking-14px {
  color: var(--blue-3);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}
.sfpro-regular-normal-viking-16px {
  color: var(--blue-3);
  /*font-family: var(--font-family-sf_pro-regular);*/
  font-size: var(--font-size-l);
  font-weight: 400;
  font-style: normal;
}


.sfpro-medium-chateau-green-14px {
  color: var(--green-2);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}

.sfpro-medium-abbey-16px {
  color: var(--gray-2);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-l);
  font-weight: 500;
  font-style: normal;
}
.sfpro-normal-azure-radiance-24px {
  color: var(--azure-radiance);
  /*font-family: var(--font-family-sf_pro-semibold);*/
  font-size: var(--font-size-xl);
  font-weight: 400;
  font-style: normal;
}
.sfpro-medium-wild-sand-14px {
  color: var(--wild-sand);
  /*font-family: var(--font-family-sf_pro-medium);*/
  font-size: var(--font-size-m);
  font-weight: 500;
  font-style: normal;
}


.sfpro-regular-normal-gray-12px {
  color: var(--gray-3);
  /*font-family: var(--font-family-sf_pro-regular);*/
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}