/* ---------------------- DMP CSS ------------------------- */

/* @font-face {
  font-family: "RailAlphabet";
  src: local("RailAlphabet-Regular"),
    url("./fonts/RailAlphabet2TEXTBETA-Regular.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "RailAlphabet";
  src: local("RailAlphabet-Bold"),
    url("./fonts/RailAlphabet2TEXTBETA-Medium.otf") format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "RailAlphabet";
  src: local("RailAlphabet-Bolder"),
    url("./fonts/RailAlphabet2TEXTBETA-Bold.otf") format("opentype");
  font-weight: 900;
} */

:root {
  --customPrimaryLightest: hsl(210, 88%, 98%);
  --customPrimaryLighter: hsl(210, 88%, 95%);
  --customPrimaryLight: hsl(210, 98%, 76%);
  --customPrimary: hsl(210, 92%, 42%);
  --customPrimaryDark: hsl(210, 94%, 32%);
  --customPrimaryDarker: hsl(210, 94%, 18%);
  --customPrimaryDarkest: hsl(210, 94%, 10%);
  /* Header */
  --customHeader: hsl(212, 78%, 32%);
  --customHeaderDarkest: hsl(216, 66%, 16%);
  --customHeaderDark: hsl(216, 66%, 20%);
  --customHeaderLight: hsl(216, 58%, 30%);
  --customHeaderLighter: hsl(216, 56%, 50%);
  --customHeaderLightest: hsl(216, 64%, 84%);
  /* Global */
  --mainBg: hsl(0, 0, 100%);
  --customModalDimmerBg: hsla(210, 14%, 42%, 92%);
  --customLink: var(--customPrimary);
  --customLinkHover: hsl(216, 62%, 32%);
  /* Colors */
  --customMoney: hsl(150, 84%, 40%);
  --customMoneyDark: hsl(150, 82%, 32%);
  --red94: hsl(0, 82%, 94%);
  --red60: hsl(0, 82%, 70%);
  --red50: hsl(0, 82%, 50%);
  --red40: hsl(0, 82%, 41%);
  --green94: hsl(112, 60%, 94%);
  --green60: hsl(112, 60%, 70%);
  --green50: hsl(112, 60%, 40%);
  --green40: hsl(112, 60%, 31%);
  --yellow94: hsl(46, 96%, 94%);
  --yellow60: hsl(46, 96%, 70%);
  --yellow50: hsl(46, 94%, 54%);
  --yellow40: hsl(46, 98%, 46%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  --grey20: hsl(200, 6%, 20%);
  --grey40: hsl(200, 6%, 40%);
  --grey60: hsl(200, 6%, 60%);
  --grey80: hsl(200, 6%, 80%);
  --grey90: hsl(200, 6%, 88%);
  --grey94: hsl(200, 6%, 95%);
  --grey98: hsl(200, 6%, 98%);
  --borderRadSmall: 2px;

  --font: Roboto;
  font-family: var(--font);
  font-size: 16px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mainBg);
  background: hsl(200, 6%, 90%);
}

::-webkit-scrollbar-thumb {
  background: hsl(200, 6%, 76%);
  border: 0px solid hsl(200, 6%, 90%);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(200, 6%, 64%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* Mobile screens */

@media all and (max-width: 768px) {
  .hideOnMobile {
    display: none !important;
  }
}

/* Tablet screens */

@media all and (min-width: 768px) and (max-width: 991px) {
  .hideOnTablet {
    display: none !important;
  }
}

/* Computer screens */

@media all and (min-width: 992px) {
  .hideOnComputer {
    display: none !important;
  }
}

html {
  height: 100% !important;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font) !important;
  /* color: var(--black) !important; */
  background: var(--mainBg) !important;
  height: 100vh !important;
  margin: 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

a[data-button="true"]:hover {
  color: inherit
}

/* @media only screen and (max-width: 1000px) {
  body {
    min-width: 1000px !important;
    overflow: auto !important;
  }
} */

/* h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600 !important;
} */

.dropdown:focus-visible,
button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible,
.ant-pagination-item:focus,
.ant-pagination-item:hover {
  z-index: 1;
  outline: solid 3px var(--yellow50) !important;
  /* outline-offset: 3px; */
  border-radius: var(--borderRadSmall) !important;
}

.customLink:focus,
.customBtnLink:focus {
  outline: solid 3px transparent !important;
  color: var(--black) !important;
  background: var(--yellow50) !important;
  box-shadow: 0 -3px var(--yellow50), 0 4px var(--black) !important;
  text-decoration: none !important;
  position: relative;
}

.fMarkdown {
  padding: 1em 0;
}

.fMarkdown a,
.customLink {
  font-weight: 600 !important;
  color: var(--customLink) !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.12em;
}

.fMarkdown a:hover,
.customLink:hover {
  color: var(--customLinkHover) !important;
  text-decoration: underline;
  text-decoration-thickness: max(3px, 0.1875rem, 0.12em)
}

.customBtnLink {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--customLink) !important;
  cursor: pointer;
  text-decoration: underline !important;
  text-decoration-thickness: max(1px, 0.0625rem) !important;
  text-underline-offset: 0.12em !important;
}

.customBtnLink:hover {
  color: var(--customLinkHover) !important;
  text-decoration: underline !important;
  text-decoration-thickness: max(3px, 0.1875rem, 0.12em) !important;
}

.cursorPointer {
  cursor: pointer !important;
}

.activeLInk {
  color: var(--customPrimaryDark) !important;
  font: 15px;
  font-weight: 500;
}

.dmpBrand {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--customPrimaryLight) !important;
  padding-left: 0px !important;
  margin-left: 5px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  /* margin-right: 1em !important; */
  padding-right: 0px !important;
  border-radius: 0px !important;
}

/* --------------- Skip-to-main-content------------------------- */
.skip-to-main-content-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.12em;
  font-size: 14px;
  font-size: .875rem;
  display: block;
  padding: 10px 15px;
  color: var(--black);
  background: var(--yellow50);
}

.skip-to-main-content-link:hover {
  color: var(--black);
  text-decoration-thickness: max(3px, 0.1875rem, 0.12em)
}

.skip-to-main-content-link:focus,
.skip-to-main-content-link:active {
  outline: none !important;
  position: static;
  text-align: left;
  width: 100%;
  height: auto;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  white-space: inherit;
}

/* --------------- DMP Navigation Bar ------------------------- */

.dmpNav {
  padding: 12px !important;
}

.menu .dropdown.ui.dmpDropdown,
.menu .dropdown.ui.dmpDropdown {
  padding: 10px 5px 10px 12px !important;
  border-radius: 5px;
  color: rgb(228, 228, 228) !important;
  border: 1px solid var(--customHeaderLight);
  background-color: var(--customHeaderDark) !important;
}

.navSearch .ui.input input {
  padding: 0.56em 1em;
  border-radius: var(--borderRadSmall);
  border: 1px solid var(--customHeader);
  font-size: 1rem;
  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item.searchItem {
  padding: 0.5em 0em !important;
  margin-left: 0px !important;
}

.item .icon.navIcon {
  font-size: 1rem !important;
  color: #ffffff;
}

.loginBtn {
  padding: 7px 25px !important;
  border-radius: 20px !important;
  font-size: 1rem !important;
  background: var(--customPrimary) !important;
  color: #ffffff !important;
}

/* Buttons */
.customBtn1Primary {
  font-weight: 600 !important;
  border: 1px solid var(--customPrimary) !important;
  padding: 10px 18px !important;
  border-radius: var(--borderRadSmall) !important;
  color: var(--white) !important;
  background: var(--customPrimary) !important;
  transition: .2s !important;
}

.customBtn1Primary:hover {
  border: 1px solid var(--customLinkHover) !important;
  background: var(--customLinkHover) !important;
}

.customBtn1Secondary {
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  padding: 10px 14px !important;
  border-radius: var(--borderRadSmall) !important;
  color: var(--customPrimary) !important;
  background: transparent !important;
  transition: .2s !important;
}

.customBtn1SecondaryRed {
  font-weight: 600 !important;
  border: 1px solid var(--red50) !important;
  padding: 10px 14px !important;
  border-radius: var(--borderRadSmall) !important;
  color: var(--red50) !important;
  background: transparent !important;
  transition: .2s !important;
}

.customBtn1Secondary:hover {
  color: var(--customLinkHover) !important;
  text-decoration: underline !important;
  /* border: 1px solid var(--customLinkHover) !important; */
}

.buyBtn {
  border: 1px solid var(--customPrimary) !important;
  padding: 10px 10px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background-color: var(--customPrimary) !important;
}

.buyBtn:hover {
  border: 1px solid var(--customPrimaryDark) !important;
  padding: 10px 10px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background-color: var(--customPrimaryDark) !important;
}

/* ---------------------- Input classes -------------------  */

.customInput input {
  border-radius: var(--borderRadSmall) !important;
}

.customInput input:focus {
  border: 1px solid var(--customPrimary) !important;
}

.customTextArea {
  border-radius: var(--borderRadSmall) !important;
}

.customTextArea:focus {
  border: 1px solid var(--customPrimary) !important;
}

/* -----------------------Background CSS----------------- */

.bgTransparent {
  background: hsla(0, 0%, 0%, 0) !important;
}

.bgPrimaryGradient {
  background: var(--customPrimaryDarker);
  /* background: radial-gradient(circle at center bottom, var(--customPrimaryDark) 0%, var(--customPrimaryDarker) 100%); */
  /* background: url('/images/Primary_Gradient.svg') var(--customPrimaryDark); */
  background-position: top;
  background-size: cover;
}

.bgWhite {
  background: var(--white) !important;
}

.bgPrimary {
  background: var(--customPrimary) !important;
}

.bgPrimaryLight {
  background: var(--customPrimaryLight) !important;
}

.bgPrimaryLighter {
  background: var(--customPrimaryLighter) !important;
}

.bgPrimaryLightest {
  background: var(--customPrimaryLightest) !important;
}

.bgPrimaryDark {
  background: var(--customPrimaryDark) !important;
}

.bgPrimaryDarker {
  background: var(--customPrimaryDarker) !important;
}

.bgPrimaryDarkest {
  background: var(--customPrimaryDarkest) !important;
}

.bgGrey20 {
  background: var(--grey20) !important;
}

.bgGrey40 {
  background: var(--grey40) !important;
}

.bgGrey60 {
  background: var(--grey60) !important;
}

.bgGrey80 {
  background: var(--grey80) !important;
}

.bgGrey90 {
  background: var(--grey90) !important;
}

.bgGrey94 {
  background: var(--grey94) !important;
}

.bgGrey98 {
  background: var(--grey98) !important;
}

.bgRed94 {
  background: var(--red94) !important;
}

.bgRed60 {
  background: var(--red60) !important;
}

.bgRed50 {
  background: var(--red50) !important;
}

.bgRed40 {
  background: var(--red40) !important;
}

.bgGreen94 {
  background: var(--green94) !important;
}

.bgGreen60 {
  background: var(--green60) !important;
}

.bgGreen50 {
  background: var(--green50) !important;
}

.bgGreen40 {
  background: var(--green40) !important;
}

.bgYellow94 {
  background: var(--yellow94) !important;
}

.bgYellow60 {
  background: var(--yellow60) !important;
}

.bgYellow50 {
  background: var(--yellow50) !important;
}

.bgYellow40 {
  background: var(--yellow40) !important;
}

.bgEvenChildGrey>div:nth-child(even) {
  background: var(--grey94) !important;
}

/* -----------------------Color CSS----------------- */

.colPrimary {
  color: var(--customPrimary) !important;
}

.colPrimaryLight {
  color: var(--customPrimaryLight) !important;
}

.colPrimaryLighter {
  color: var(--customPrimaryLighter) !important;
}

.colPrimaryLightest {
  color: var(--customPrimaryLightest) !important;
}

.colPrimaryDark {
  color: var(--customPrimaryDark) !important;
}

.colPrimaryDarker {
  color: var(--customPrimaryDarker) !important;
}

.colPrimaryDarkest {
  color: var(--customPrimaryDarkest) !important;
}

.colMoney {
  color: var(--customMoney) !important;
}

.colWhite {
  color: #ffffff !important;
}

.colBlack {
  color: var(--black) !important;
}

.colGrey20 {
  color: var(--grey20) !important;
}

.colGrey40 {
  color: var(--grey40) !important;
}

.colGrey60 {
  color: var(--grey60) !important;
}

.colGrey80 {
  color: var(--grey80) !important;
}

.colRed60 {
  color: var(--red60) !important;
}

.colRed50 {
  color: var(--red50) !important;
}

.colRed40 {
  color: var(--red40) !important;
}

.colGreen60 {
  color: var(--green60) !important;
}

.colGreen50 {
  color: var(--green50) !important;
}

.colGreen40 {
  color: var(--green40) !important;
}

/* -----------------------Text CSS----------------- */

p {
  font-size: 1rem;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.breakLongText {
  word-break: break-all !important;
}

.textBold {
  font-weight: 600 !important;
  line-height: normal !important;
}

.textBolder {
  font-weight: 900 !important;
  line-height: normal !important;
}

.textThin {
  font-weight: 200 !important;
  /* line-height: normal !important; */
}

.textSmaller {
  font-size: 0.8rem !important;
  line-height: normal !important;
}

.textSmall {
  font-size: 0.9rem !important;
  line-height: normal !important;
}

.textNormal {
  font-size: 1rem !important;
  line-height: normal !important;
}

.textMedium {
  font-size: 1.5rem !important;
  line-height: normal !important;
}

.textBig {
  font-size: 2rem !important;
  line-height: normal !important;
}

.textBigger {
  font-size: 3rem !important;
  line-height: normal !important;
}

.textBiggest {
  font-size: 4rem !important;
  line-height: normal !important;
}

.contentLabel {
  font-size: 0.9rem !important;
  line-height: normal !important;
  font-weight: 500;
}

.contentSmall {
  font-size: 0.9rem !important;
  white-space: pre-wrap;
  line-height: 1;
  margin-bottom: 10px;
}

.contentNormal {
  font-size: 1rem !important;
  white-space: pre-wrap;
  line-height: 1;
  margin-bottom: 10px;
}

.contentMedium {
  font-size: 1.5rem !important;
  white-space: pre-wrap;
  line-height: 1.5;
  margin-bottom: 10px;
}

.contentBig {
  font-size: 2rem !important;
  white-space: pre-wrap;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* -----------------------Flex CSS----------------- */

.flex {
  display: flex !important;
}

.flexDirectionRow {
  flex-direction: row !important;
}

.flexDirectionColumn {
  flex-direction: column !important;
}

.flexJustifyEnd {
  justify-content: flex-end !important;
}

.flexJustifyCenter {
  justify-content: center !important;
}

.flexJustifySpaceBetween {
  justify-content: space-between !important;
}

.flexJustifySpaceAround {
  justify-content: space-around !important;
}

.flexAlignCenter {
  align-items: center;
}

.flexAlignRight {
  align-items: flex-end;
}

/* -----------------------Error CSS----------------- */

.errorText {
  color: var(--red50);
  font-size: 1rem;
  margin: 4px 2px;
  line-height: normal;
}

.validationInfoText {
  color: var(--grey40);
  font-size: 0.9rem;
  margin: 5px 0px 8px 0px;
  line-height: normal;
}

.infoText {
  color: var(--grey40);
  font-size: 0.9rem;
  margin: 5px 0px 8px 0px;
  line-height: normal;
}

.separator {
  color: var(--grey80);
  padding: 0 5px;
}

/* -----------------------Card CSS----------------- */

.fCard {
  /* cursor: pointer !important; */
  box-shadow: none !important;
  border: transparent 1px solid !important;
  background: var(--grey94) !important;
}

/* .fCard:hover {
  transition: 0.1s ease-in-out;
  box-shadow: 0 2px 4px 0px hsl(0deg, 0%, 0%, 10%) !important;
  border: var(--customPrimaryLight) 1px solid !important;
  transform: translateY(-1px);
} */
.fCard.active {
  border: var(--customPrimary) 1px solid !important;
  background: var(--customPrimaryLightest) !important;
}


.noShadow {
  box-shadow: none !important;
}

.stickToBottom {
  position: absolute;
  bottom: 20px;
  width: 100%;
}

/* -----------------------Label CSS----------------- */
.customLabel1 {
  padding: 10px 12px !important;
  color: var(--customPrimary) !important;
  border: 1px solid var(--customPrimary) !important;
  background: var(--white) !important;
}

.customLabel2 {
  padding: 10px 12px !important;
  color: var(--customPrimary) !important;
  border: 1px solid var(--customPrimary) !important;
  background: transparent !important;
}

/* -----------------------Dimensions CSS----------------- */

.min80vh {
  min-height: 80vh;
}

.min90vh {
  min-height: 90vh;
}

.min98vh {
  min-height: 98vh;
}

.min100vh {
  min-height: 100vh;
}

.max80vh {
  max-height: 80vh;
}

.max90vh {
  max-height: 90vh;
}

.max98vh {
  max-height: 98vh;
}

.max100vh {
  max-height: 100vh;
}

/* -----------------------Disabled Field CSS----------------- */

/* input[readOnly], */
.ui.disabled.dropdown,
textarea[readOnly] {
  background: #f7f7f7 !important;
}

/* -----------------------Semantic CSS----------------- */

.ui.inverted.dimmer {
  background-color: var(--customModalDimmerBg) !important;
}

.ui.selection.active.dropdown,
.ui.selection.active.dropdown .menu {
  border-color: var(--customPrimary) !important;
}

.ui.selection.dropdown:focus {
  border-color: var(--customPrimary) !important;
}

.ui.breadcrumb a {
  color: var(--customPrimary) !important;
}

.ui.steps .step.active .title {
  color: var(--customPrimary) !important;
}

.ui.form textarea:focus,
.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.input.focus>input,
.ui.input>input:focus {
  border-color: var(--customPrimary) !important;
}

.ui.form textarea::placeholder,
.ui.form input:not([type])::placeholder,
.ui.form input[type="date"]::placeholder,
.ui.form input[type="datetime-local"]::placeholder,
.ui.form input[type="email"]::placeholder,
.ui.form input[type="file"]::placeholder,
.ui.form input[type="number"]::placeholder,
.ui.form input[type="password"]::placeholder,
.ui.form input[type="search"]::placeholder,
.ui.form input[type="tel"]::placeholder,
.ui.form input[type="text"]::placeholder,
.ui.form input[type="time"]::placeholder,
.ui.form input[type="url"]::placeholder,
.ui.input.focus>input::placeholder,
.ui.default.dropdown:not(.button)>.text,
.ui.dropdown:not(.button)>.default.text,
.ui.input>input::placeholder {
  color: var(--grey40) !important;
}

/* Disabled dropdown */
.ui.form .disabled.field,
.ui.form .disabled.fields .field,
.ui.form .field :disabled,
.ui.form .field.disabled>label,
.ui.form .fields.disabled>label,
.ui.disabled.dropdown,
.ui.dropdown .menu>.disabled.item {
  opacity: 1 !important;
}

/* margin after a field */
.ui.form>.field {
  margin: 0 0 2em !important;
}

.ui.form>.fields {
  margin: 0 -0.5em 2em !important;
}

.ui.form .inline.fields {
  margin: 0 0 2em !important;
}

/* .ui.form .field > label {
  margin: 0 !important;
} */

.ui.styled.accordion .title {
  padding: 0.24em 1em !important;
}

.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title {
  color: rgba(0, 0, 0, 1) !important;
}

.tab-wrapped {
  overflow: auto;
  position: relative;
  min-height: 2.62em !important;
}

.overflow-hidden {
  overflow: hidden;
  position: relative;
}

.overflow-auto {
  overflow: auto;
  position: relative;
}

.ui.segments,
.ui.segment {
  box-shadow: none !important;
  /* border-radius: 0.2rem !important; */
}

/* .tabMenu .segment {
    padding: 6px 8px !important;
  } */
.ui.tabular.menu .item {
  padding: 0.6em 1em !important;
}

.ui.tabular.menu .active.item {
  /* color: var(--grey20) !important; */
  font-weight: 500 !important;
}

.ui.menu .active.item {
  font-weight: 700 !important;
}


.ui.form .field.error input:not([type]),
.ui.form .field.error input[type=date],
.ui.form .field.error input[type=datetime-local],
.ui.form .field.error input[type=email],
.ui.form .field.error input[type=file],
.ui.form .field.error input[type=number],
.ui.form .field.error input[type=password],
.ui.form .field.error input[type=search],
.ui.form .field.error input[type=tel],
.ui.form .field.error input[type=text],
.ui.form .field.error input[type=time],
.ui.form .field.error input[type=url],
.ui.form .field.error select,
.ui.form .field.error textarea,
.ui.form .fields.error .field input:not([type]),
.ui.form .fields.error .field input[type=date],
.ui.form .fields.error .field input[type=datetime-local],
.ui.form .fields.error .field input[type=email],
.ui.form .fields.error .field input[type=file],
.ui.form .fields.error .field input[type=number],
.ui.form .fields.error .field input[type=password],
.ui.form .fields.error .field input[type=search],
.ui.form .fields.error .field input[type=tel],
.ui.form .fields.error .field input[type=text],
.ui.form .fields.error .field input[type=time],
.ui.form .fields.error .field input[type=url],
.ui.form .fields.error .field select,
.ui.form .fields.error .field textarea {
  background: #ffffff !important;
}

/* ---------------------- Radio styles ------------------ */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid var(--black) !important;
}

.ui.checkbox input:checked~.box:before,
.ui.checkbox input:checked~label:before {
  border: 2px solid var(--black) !important;
}

.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  top: 2px !important;
  left: 2px !important;
  width: 25px !important;
  height: 24px !important;
  border-radius: 500rem !important;
  transform: scale(.5) !important;
  background-color: rgba(0, 0, 0, .87) !important;
}

/* ---------------------- Checkbox styles ------------------ */
.ui.checkbox .box:before,
.ui.checkbox label:before {
  top: 0 !important;
  left: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--black) !important;
}

.ui.checkbox .box:after,
.ui.checkbox label:after {
  font-size: 1rem !important;
  top: 3px !important;
  left: -1px !important;
  width: 24px !important;
  height: 18px !important;
  text-align: center !important;
}

.ui.checkbox .box,
.ui.checkbox label {
  padding: 2px 0 0 2em !important;
  font-size: 1.2rem !important;
}

/* -----------------------React Date Picker CSS----------------- */

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  background: var(--customPrimary) !important;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected,
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background: var(--customPrimaryLight) !important;
}

.react-datepicker__triangle {
  left: 0px !important;
  transform: translate(110px, 0px) !important;
}

.react-datepicker-wrapper {
  width: 100% !important;
}

.react-dp-custom {
  width: 100% !important;
  padding-left: 32px !important;
}

.react-datepicker__close-icon::after {
  background-color: transparent !important;
  color: #4d4d4d !important;
  border-radius: 8px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.react-datepicker-popper {
  z-index: 1000 !important;
}

/* -----------------------Leaflet Map CSS----------------- */

.map-pin-active {
  filter: hue-rotate(136deg) brightness(01.2) !important;
}

.map-pin-inactive {
  filter: grayscale(1) brightness(1.2) !important;
}

/* -----------------------File Upload CSS----------------- */

.customFileInput {
  border: 1px dashed var(--grey60);
  display: inline-block;
  padding: 4px 12px;
  width: 100%;
}

.customLinkUpload {
  display: inline;
}

.customFileInput>.fileInput,
.customLinkUpload>.fileInput {
  display: none;
}

/* -----------------------iFrame CSS----------------- */

.iframeStyle {
  border: 0px solid var(--grey80);
}


/* ---------------------- Spacing classes -------------------  */

.w-100 {
  width: 100% !important;
}

.m-auto {
  margin: auto !important;
}

.m-0 {
  margin: 0px !important;
}

.m-1 {
  margin: 1rem !important;
}

.m-5px {
  margin: 5px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mr-1 {
  margin-right: 1rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-5px {
  margin-top: 5px !important;
}

.mt-10px {
  margin-top: 10px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-5px {
  margin-bottom: 5px !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.my-5px {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.my-1 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-2 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.my-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

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

.mx-5px {
  margin-left: 5px;
  margin-right: 5px;
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.ml-5px {
  margin-left: 5px !important;
}

.ml-1 {
  margin-left: 1rem !important;
}

.mr-5px {
  margin-right: 5px !important;
}

.mt-5px {
  margin-top: 5px !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.mt-5 {
  margin-top: 5rem;
}

.mt-n8 {
  margin-top: -8rem !important;
}

.ml-2 {
  margin-left: 2rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}

.mr-0 {
  margin-right: 0px;
}

.mNeg-5px {
  margin-top: -5px;
}

.mNeg-2 {
  margin-left: -2rem !important;
  margin-right: -2rem !important;
}

.p-0 {
  padding: 0px !important;
}

.p-5px {
  padding: 5px !important;
}

.p-1 {
  padding: 1rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.pl-1 {
  padding-left: 1rem !important;
}

.pl-2 {
  padding-left: 2rem !important;
}

.pl-3 {
  padding-left: 3rem !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pt-5px {
  padding-top: 5px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.py-4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.pt-1 {
  padding-top: 1rem !important;
}

.pt-2 {
  padding-top: 2rem !important;
}

.pt-3 {
  padding-top: 3rem !important;
}

.py-5px {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-2 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-5px {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.pr-3 {
  padding-right: 3rem !important;
}

.px-4 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.px-5 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.py-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.pb-5px {
  padding-bottom: 5px !important;
}

.pr-5px {
  padding-right: 5px !important;
}

.pr-1 {
  padding-right: 1rem !important;
}

.pr-2 {
  padding-right: 2rem !important;
}

.pr-3 {
  padding-right: 3rem !important;
}

/* ---------------------- Border classes -------------------  */

.border-y {
  border-top: 0.5px solid #d8d8d8 !important;
  border-bottom: 0.5px solid #d8d8d8 !important;
}

.border-x {
  border-left: 0.5px solid #d8d8d8 !important;
  border-right: 0.5px solid #d8d8d8 !important;
}

.border-0 {
  border: 0px !important;
}

.border-r {
  border-right: 1px solid var(--grey80) !important;
}

.border-l {
  border-left: 1px solid var(--grey80) !important;
}

.border-t {
  border-top: 1px solid var(--grey80) !important;
}

.border-b {
  border-bottom: 1px solid var(--grey80) !important;
}

.border-1 {
  border: 1px solid var(--grey80) !important;
}

.borderPrimary-r {
  border-right: 2px solid var(--customPrimary) !important;
}

.borderPrimary-l {
  border-left: 2px solid var(--customPrimary) !important;
}

.borderPrimary-t {
  border-top: 2px solid var(--customPrimary) !important;
}

.borderPrimary-b {
  border-bottom: 2px solid var(--customPrimary) !important;
}

.borderPrimary-1 {
  border: 2px solid var(--customPrimary) !important;
}

.border-dotted {
  border: 2px dashed #cccccc !important;
}

.border-rad-0 {
  border-radius: 0px !important;
}

.border-rad {
  border-radius: var(--borderRadSmall) !important;
}

.boxShadow-0 {
  box-shadow: none !important;
}

.bgShadow-0 {
  box-shadow: none !important;
}

.textItalic {
  font-style: italic;
}

.v-align {
  vertical-align: middle !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.float-right {
  float: right;
}

.ui.menu {
  font-weight: 400;
}

/* ---------------------- Markdown styles ------------------ */
.fMarkdown table {
  width: 100% !important;
  border-collapse: collapse !;
}

.fMarkdown th,
.fMarkdown td {
  border: 1px solid var(--black) !important;
  padding: 5px !important;
}

/*# sourceMappingURL=main-84781932.7988e39d009aa0b6210c.css.map*/