:root {
    --aqua-pearl: #5bc0de;
    --astral: #337ab7;
    --cultured-pearl: #f5f5f5;
    --radical-red: #f14d68;
    --storm-dust: #616161;
    --gray-text: #999999;
    --white: #ffffff;
    --logon-blue: #337ab7;
    --brownish-grey: #595959; 
    --orange: #e37d61l;
    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-family-poppins: "Poppins", Helvetica;
}
/*
:root {
    --aqua-pearl: #5bc0de;
    --astral: #337ab7;
    --cultured-pearl: #f5f5f5;
    --radical-red: #f14d68;
    --storm-dust: #616161;
    --gray-text: #999999;
    --white: #ffffff;
    --logon-blue: #337ab7;
    --brownish-grey: 616161;
    --orange: #e37d61l;
    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-family-poppins: "Poppins", Helvetica;
}*/


.poppins-normal-gray-text-18px {
    color: var(--gray-text);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 300;
}

.poppins-normal-gray-text-16px {
    color: var(--gray-text);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}



.poppins-normal-logon-blue {
    color: var(--logon-blue);
    font-family: var(--font-family-poppins);
    font-style: normal;
    font-weight: 300;
}

.poppins-normal-gray-text-20px {
    color: var(--gray-text);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 300;
}



.poppins-normal-astral-16px {
    color: var(--astral);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}


.poppins-normal-astral-14px {
    color: var(--astral);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    
}


.poppins-normal-storm-dust-16px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.poppins-light-white-16px {
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.poppins-bold-storm-dust-18px {
  color: var(--storm-dust);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}


.poppins-normal-storm-dust-18px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 300;
}


.poppins-normal-storm-dust-20px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 300;
}


.poppins-normal-storm-dust-24px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 300;
}

.poppins-normal-brownish-grey-20px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 300;
}

.poppins-bold-brownish-grey-16px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}

.poppins-normal-brownish-grey-16px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height:22px;
}


.poppins-normal-green-bold-16px {
    color: green;
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}




poppins-bold-brownish-grey-20px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
}

.poppins-normal-brownish-grey-24px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 300;
}

.poppins-normal-brownish-grey-18px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 300;
}

.poppins-bold-brownish-grey-18px {
    color: var(--brownish-grey);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}



.poppins-normal-aqua-pearl-20px {
    color: var(--aqua-pearl);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 300;
}


.poppins-normal-aqua-pearl-18px {
    color: var(--aqua-pearl);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-1);
    font-style: normal;
    font-weight: 300;
}


.poppins-bold-logon-blue-16px {
    color: var(--logon-blue);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}

.poppins-normal-logon-blue-16px {
    color: var(--logon-blue);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.poppins-normal-orange-18px {
    color: var(--orange);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-1);
    font-style: normal;
    font-weight: 300;
}



.poppins-bold-storm-dust-16px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
}

.poppins-normal-storm-dust-14px {
  color: var(--storm-dust);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}



.poppins-bold-storm-dust-14px {
    color: var(--storm-dust);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.poppins-light-astral-16px {
    color: var(--astral);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.poppins-normal-aqua-pearl-16px {
    color: var(--aqua-pearl);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.poppins-light-radical-red-16px {
    color: var(--radical-red);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.poppins-normal-white-18px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.border-2px-astral {
  border: 2px solid var(--astral);
}

.border-1px-white {
  border: 1px solid var(--white);
}

.border-2px-radical-red {
  border: 2px solid var(--radical-red);
}

.border-2px-brownish-grey {
  border: 2px solid var(--brownish-grey);
}

.border-2px-orange {
    border: 2px solid var(--orange);
}



.border-2px-cultured-pearl {
  border: 2px solid var(--cultured-pearl);
}

.border-2px-storm-dust {
    border: 2px solid var(--storm-dust);
}