:root {
  --primaryLight: #009F9B;
  --primary: #008C88;
  --primaryDark: #007774;
  --gradient: linear-gradient(225deg, var(--primaryDark) 0%, var(--primaryLight) 100%);
  --gradientDarkToLight: linear-gradient(225deg, var(--primary) 0%, var(--night) 100%);
  --secondaryLight: #FFA814;
  --secondary: #F39900;
  --secondaryDark: #D08300;
  --dayLight: #EAF3F1;
  --day: #D8EFE9;
  --dayDark: #BBE2DA;
  --nightLight: #005552;
  --night: #003E3C;
  --nightDark: #002423;
  --membershipPrimary: #DE8500;
  --membershipPrimaryLight: #F39507;
  --grey20: #333333;
  --grey29: #4A4B4B;
  --grey45: #757575;
  --grey55: #8D8D8D;
  --grey70: #B3B3B3;
  --grey80: #CCCCCC;
  --grey90: #E6E6E6;
  --grey94: #F0F0F0;
  --grey96: #F6F6F6;
  --white: #FFF;
  --whiteLight: rgba(255, 255, 255, 0.8);
  --successBg: #E8F5E9;
  --successText: #1B5E20;
  --successIcon: #4CAF50;
  --warningBg: #FFFDE7;
  --warningText: #714A0F;
  --warningIcon: #F3B720;
  --errorBg: #FFEBEE;
  --errorText: #AD1103;
  --errorIcon: #F32039;
  --infoBg: var(--dayLight);
  --infoText: var(--night);
  --infoIcon: var(--primary);
  --svgIcon: #F89E00;
  --lightBg: #FFEBEE;
}

/* --svgIcon color code is added for boost-upsells page's icon*/
body {
  font-family: "Roboto", sans-serif;
  color: var(--grey20);
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  font-size: 16px;
  color: var(--primary);
}
a:hover {
  color: var(--primaryDark);
  text-decoration: none;
  cursor: pointer;
}
a:focus {
  outline: 0;
  box-shadow: none;
}

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: none;
}

button:focus {
  outline: 0;
  box-shadow: none;
}

p {
  font-size: 16px;
  line-height: 20px;
  word-break: break-word;
}

.box {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  background: var(--white);
  border-radius: 5px;
}

.btn {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}

a.button,
span.button {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}

.button {
  font-size: 16px;
  border-radius: 5px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border: 0;
}

button a:hover {
  text-decoration: none;
}

/** theme button **/
.theme-btn {
  background-color: var(--secondary);
  color: var(--white);
}
.theme-btn:hover {
  background-color: var(--secondaryDark);
  color: var(--white);
}

/** primary button **/
.primary-btn {
  background-color: var(--primary);
  color: var(--white);
}
.primary-btn:hover {
  background-color: var(--primaryDark);
  color: var(--white);
}

/** primary light button **/
.primary-light-btn {
  background-color: var(--primaryLight);
  color: var(--white);
}
.primary-light-btn:hover {
  background-color: var(--primary);
  color: var(--white);
}

/** outline button **/
.outline-btn {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.outline-btn:hover {
  color: var(--primaryDark);
  border: 1px solid var(--primaryDark);
}

.white-btn {
  background: var(--white);
  color: var(--primary);
  border: 1px solid var(--white);
}
.white-btn:hover {
  color: var(--primaryDark);
  border: 1px solid var(--white);
}

.disabled-btn {
  background-color: var(--grey80);
  color: var(--white);
}

/** membership button **/
.member-primary-btn {
  background: var(--membershipPrimary);
  color: var(--white);
}
.member-primary-btn:hover {
  color: var(--white);
}

/** flat button **/
.flat-btn {
  background-color: var(--white);
  color: var(--primary);
}
.flat-btn:hover {
  background-color: var(--white);
  color: var(--primaryDark);
}

/** flat button **/
.danger-flat-btn {
  background-color: inherit;
  color: var(--errorText);
}
.danger-flat-btn:hover {
  background-color: inherit;
  color: var(--errorText);
}

.scroll-bar {
  scrollbar-color: var(--primary);
  scrollbar-width: thin;
}
.scroll-bar::-webkit-scrollbar {
  width: 0;
}

.text-clip {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.secondary-font {
  font-family: "Montserrat", sans-serif;
}

.scroller {
  overflow-y: auto;
  scrollbar-color: var(--primary) transparent;
  scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
  width: 2px;
}
.scroller::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--dayLight);
  border-radius: 2px;
}
.scroller::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 2px;
}

a.disabled {
  pointer-events: none;
  opacity: 0.7;
}