/* Font mixins */

body {
  font-family: "aktiv-grotesk", "sans-serif";
}

/**
 * Font weights:
 * Helper font weight classes.
 */
.u-weight--light {
  font-weight: 200 !important;
}
.u-weight--regular {
  font-weight: 400 !important;
}
.u-weight--normal {
  font-weight: 500 !important;
}
.u-weight--semibold {
  font-weight: 600 !important;
}
.u-weight--bold {
  font-weight: 700 !important;
}
/**
* Apply specific foreground colours
*/
.u-colour--black {
  color: rgb(var(--colour-black, 33, 33, 33)) !important;
}

.c-registration-flow {
  margin-top: 7px;
}
.c-registration-flow__description {
  margin: 0 0 22px 0;
}

.c-registration-flow a {
  text-decoration: underline;
  cursor: pointer;
}
.c-registration-flow p {
  font-size: 16px;
  color: rgb(var(--colour-gray-4, 81, 81, 81));
  line-height: 22px;
  padding: 0 0 0 0;
  font-weight: 400;
}
.c-registration-flow h1 {
  font-size: 40px;
  line-height: 46px;
  margin-bottom: 12px;
  padding: 0 0 0 0;
  font-weight: 700;
}
.c-registration-flow h2 {
  font-size: 24px;
  line-height: 30px;
  color: rgb(var(--colour-black, 33, 33, 33));
  margin: 0 0 8px 0;
  padding: 0 0 0 0;
  font-weight: 700;
}
.o-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(var(--colour-black, 33, 33, 33));
  margin-bottom: 10px;
  line-height: 22px;
  font-size: 16px;
}
.o-label > span {
  color: rgb(var(--colour-gray-4, 81, 81, 81));
  font-size: 14px;
  font-weight: 400;
}
.o-label--big-label {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 700;
}
.o-label--error > span {
  color: rgb(var(--colour-error, 223, 27, 8));
}
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-size: 18px;
  text-align: center;
  padding: 12px 40px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  font-weight: 700;
}
.c-button:hover, .c-button:focus {
  text-decoration: none;
}
.c-button--outline {
  background-color: rgb(var(--colour-white, 255, 255, 255));
  color: rgb(var(--colour-black, 33, 33, 33));
  border: 1px solid rgba(0, 0, 0, 1); /* This will be overritten via the event brand styles */
}
.c-button--outline:hover, .c-button--outline:focus {
  background-color: rgba(0, 0, 0, 1); /* This will be overritten via the event brand styles */
  color: rgb(var(--colour-white, 255, 255, 255));
}
.c-steps {
  display: flex;
  align-items: center;
}
.c-steps__step {
  display: flex;
  align-items: center;
}
.c-steps__step > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 25px;
  font-size: 16px;
  border-radius: 50%;
  border: 1px solid rgb(var(--colour-gray-2, 223, 223, 223));
  color: rgb(var(--colour-black, 33, 33, 33));
  text-decoration: none;
  user-select: none;
  font-weight: 500;
  padding-top: 3px;
}
.c-steps__step:not(:last-child)::after {
  margin: 0 8px;
  display: block;
  content: "";
  width: 16px;
  height: 1px;
  background-color: rgb(var(--colour-gray-2, 223, 223, 223));
}
.c-steps__step--current > span {
  background-color: rgb(var(--colour-gray-2, 223, 223, 223));
}
.c-steps__step--complete > span {
  background-image: url("data:image/svg+xml,%3csvg%20width='13'%20height='9'%20viewBox='0%200%2013%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.81597%206.64205L11.0295%200.260633C11.1986%200.0868774%2011.397%200%2011.6246%200C11.8522%200%2012.0507%200.0868774%2012.22%200.260633C12.3892%200.434515%2012.4738%200.640747%2012.4738%200.879327C12.4738%201.11791%2012.3892%201.32414%2012.22%201.49802L5.41133%208.50518C5.24203%208.67894%205.04357%208.76582%204.81597%208.76582C4.58838%208.76582%204.38992%208.67894%204.22062%208.50518L1.03646%205.23497C0.867279%205.06109%200.785039%204.85486%200.789742%204.61628C0.794445%204.3777%200.881388%204.17147%201.05057%203.99758C1.21988%203.82383%201.42068%203.73695%201.65298%203.73695C1.88528%203.73695%202.08609%203.82383%202.2554%203.99758L4.81597%206.64205Z'%20fill='white'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11.648px 7.766px;
  border: none;
  fill: white;
  color: transparent;
}
.c-input {
  font-size: 16px;
  line-height: 22px;
  min-width: 100%;
  margin-bottom: 18px;
}
.c-input > div {
  position: relative;
}
.c-input input {
  border: 1px solid rgb(var(--colour-gray-3, 192, 192, 192));
  border-radius: 4px;
  box-sizing: border-box;
  font-family: "aktiv-grotesk", "sans-serif";
  font-size: 16px;
  line-height: 22px;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}
.c-input input::placeholder {
  color: rgb(var(--colour-gray-4, 81, 81, 81));
}
.c-input input:focus, .c-input input:focus-within, .c-input input:focus-visible {
  color: rgb(var(--colour-black, 33, 33, 33));
  border: 1px solid rgb(var(--colour-gray-3, 192, 192, 192));
  outline: none;
}
.c-input--error label > span {
  color: rgb(var(--colour-error, 223, 27, 8));
}
.c-input--error input {
  border: 1px solid rgb(var(--colour-error, 223, 27, 8));
}
.c-input--error input:focus-within {
  border: 1px solid rgb(var(--colour-error, 223, 27, 8));
}
.c-input--password > div > span {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 18px;
  bottom: 10.5px;
  right: 12px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.c-input--password.c-input--password--visible > div > span {
  background-image: url("data:image/svg+xml,%3csvg%20width='21'%20height='15'%20viewBox='0%200%2021%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.6797%2011.3544C11.8161%2011.3544%2012.782%2010.9567%2013.5774%2010.1612C14.3729%209.36577%2014.7706%208.39986%2014.7706%207.26349C14.7706%206.12713%2014.3729%205.16122%2013.5774%204.36577C12.782%203.57031%2011.8161%203.17259%2010.6797%203.17259C9.54332%203.17259%208.57741%203.57031%207.78196%204.36577C6.98651%205.16122%206.58878%206.12713%206.58878%207.26349C6.58878%208.39986%206.98651%209.36577%207.78196%2010.1612C8.57741%2010.9567%209.54332%2011.3544%2010.6797%2011.3544ZM10.6797%209.71804C9.99787%209.71804%209.41832%209.4794%208.94105%209.00213C8.46378%208.52486%208.22514%207.94531%208.22514%207.26349C8.22514%206.58168%208.46378%206.00213%208.94105%205.52486C9.41832%205.04759%209.99787%204.80895%2010.6797%204.80895C11.3615%204.80895%2011.9411%205.04759%2012.4183%205.52486C12.8956%206.00213%2013.1342%206.58168%2013.1342%207.26349C13.1342%207.94531%2012.8956%208.52486%2012.4183%209.00213C11.9411%209.4794%2011.3615%209.71804%2010.6797%209.71804ZM10.6797%2014.0817C8.46757%2014.0817%206.45241%2013.4643%204.63423%2012.2294C2.81605%2010.9946%201.49787%209.33925%200.679688%207.26349C1.49787%205.18774%202.81605%203.53243%204.63423%202.29759C6.45241%201.06274%208.46757%200.445312%2010.6797%200.445312C12.8918%200.445312%2014.907%201.06274%2016.7251%202.29759C18.5433%203.53243%2019.8615%205.18774%2020.6797%207.26349C19.8615%209.33925%2018.5433%2010.9946%2016.7251%2012.2294C14.907%2013.4643%2012.8918%2014.0817%2010.6797%2014.0817Z'%20fill='black'/%3e%3c/svg%3e");
}
.c-input--password.c-input--password--invisible > div > span {
  background-image: url("data:image/svg+xml,%3csvg%20width='21'%20height='19'%20viewBox='0%200%2021%2019'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.7706%2018.4219L13.9524%2014.6491C13.4221%2014.8158%2012.888%2014.9408%2012.3501%2015.0241C11.8123%2015.1075%2011.2554%2015.1491%2010.6797%2015.1491C8.39181%2015.1491%206.35393%2014.5166%204.56605%2013.2514C2.77817%2011.9863%201.48272%2010.3461%200.679688%208.33097C0.997869%207.52794%201.39938%206.78172%201.88423%206.09233C2.36908%205.40294%202.92211%204.78551%203.54332%204.24006L1.04332%201.6946L2.31605%200.421875L19.0433%2017.1491L17.7706%2018.4219ZM10.6797%2012.4219C10.8464%2012.4219%2011.0017%2012.4143%2011.1456%2012.3991C11.2895%2012.384%2011.4448%2012.3537%2011.6115%2012.3082L6.70241%207.39915C6.65696%207.56581%206.62666%207.72112%206.61151%207.86506C6.59635%208.009%206.58878%208.1643%206.58878%208.33097C6.58878%209.46733%206.98651%2010.4332%207.78196%2011.2287C8.57741%2012.0241%209.54332%2012.4219%2010.6797%2012.4219ZM17.3161%2012.831L14.4297%209.96733C14.5357%209.70975%2014.6191%209.44839%2014.6797%209.18324C14.7403%208.91809%2014.7706%208.634%2014.7706%208.33097C14.7706%207.1946%2014.3729%206.22869%2013.5774%205.43324C12.782%204.63778%2011.8161%204.24006%2010.6797%204.24006C10.3767%204.24006%2010.0926%204.27036%209.82742%204.33097C9.56226%204.39157%209.3009%204.48248%209.04332%204.60369L6.72514%202.28551C7.34635%202.02794%207.98272%201.83475%208.63423%201.70597C9.28575%201.57718%209.96757%201.51278%2010.6797%201.51278C12.9676%201.51278%2015.0054%202.14536%2016.7933%203.41051C18.5812%204.67566%2019.8767%206.31581%2020.6797%208.33097C20.3312%209.22491%2019.8729%2010.0545%2019.3047%2010.8196C18.7365%2011.5848%2018.0736%2012.2552%2017.3161%2012.831ZM13.1115%208.64915L10.3842%205.92188C10.8085%205.84612%2011.1986%205.88021%2011.5547%206.02415C11.9107%206.16809%2012.2176%206.37642%2012.4751%206.64915C12.7327%206.92188%2012.9183%207.23627%2013.032%207.59233C13.1456%207.94839%2013.1721%208.30066%2013.1115%208.64915Z'%20fill='%23212121'/%3e%3c/svg%3e");

}
.c-validation-text {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  color: rgb(var(--colour-error, 223, 27, 8));
  transition: color 0.3s ease-in-out;
}
.c-validation-text svg {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  align-self: flex-start;
}
.c-validation-text--valid {
  color: rgb(var(--colour-green, 37, 133, 90));
}
.c-validation-text--valid svg {
  width: 13px;
  height: 10px;
}
.c-error-panel {
  background-color: rgb(var(--colour-error--light, 254, 242, 241));
  padding: 14px 12px 20px;
  color: rgb(var(--colour-error, 223, 27, 8));
  border-radius: 4px;
  margin-top: 24px;
}
.c-error-panel > p:first-child {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 22px;
  color: rgb(var(--colour-error, 223, 27, 8));
}
.c-error-panel--transparent {
  background-color: transparent;
  padding: 14px 0 12px;
}
.c-dropdown {
  margin-bottom: 18px;
}
.c-dropdown__component {
  box-sizing: border-box !important;
  color: rgb(var(--colour-black, 33, 33, 33));
  border: 1px solid rgb(var(--colour-gray-3, 192, 192, 192)) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  line-height: 22px;
  flex-wrap: wrap;
}
.c-dropdown--error .c-dropdown__component {
  border: 1px solid rgb(var(--colour-error, 223, 27, 8)) !important;
}
.c-dropdown__component__handle {
  display: flex;
}
.c-dropdown__component__handle > svg {
  transition: all 0.3s ease-in;
}
.c-dropdown__component__handle > svg path {
  stroke: none !important;
}
.c-dropdown__component__handle--open > svg {
  transform: rotate(180deg);
}
.c-dropdown__component:focus, .c-dropdown__component:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
.c-dropdown__component input,
.c-dropdown__component span {
  margin: 0;
  font-size: 16px;
}
.c-dropdown__component input::placeholder,
.c-dropdown__component span::placeholder {
  color: rgb(var(--colour-gray-4, 81, 81, 81));
}
.c-dropdown__component .react-dropdown-select-dropdown {
  position: static;
  grid-column: 1/span 2;
  box-shadow: none;
  border: none;
  border-radius: 0;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.c-dropdown--open .c-dropdown__component .react-dropdown-select-dropdown, .c-nav__mobile--open .c-dropdown__component .react-dropdown-select-dropdown {
  max-height: 200px;
  box-sizing: content-box;
  width: 100%;
}
.c-dropdown--open .c-dropdown__component .react-dropdown-select-dropdown::-webkit-scrollbar, .c-nav__mobile--open .c-dropdown__component .react-dropdown-select-dropdown::-webkit-scrollbar {
  display: none;
}
.c-dropdown__component .react-dropdown-select-content {
  padding: 8px 0px 8px 10px;
}
.c-dropdown__component .react-dropdown-select-option {
  background: none;
  color: rgb(var(--colour-gray-4, 81, 81, 81));
  padding: 0;
  margin-right: 4px;
  line-height: 22px;
  font-size: 16px;
}
.c-dropdown__component .react-dropdown-select-option::after {
  content: ",";
}
.c-dropdown__component .react-dropdown-select-option:nth-last-child(2)::after {
  content: none;
}
.c-dropdown__component .react-dropdown-select-option:hover {
  opacity: 1 !important;
}
.c-dropdown__component .react-dropdown-select-option:hover > span {
  opacity: inherit;
}
.c-dropdown__component .react-dropdown-select-option-remove {
  display: none !important;
}
.c-dropdown__component .react-dropdown-select-dropdown-handle {
  margin: 0;
  padding: 0 10px;
  line-height: normal;
}
.c-dropdown__component .react-dropdown-select-item,
.c-dropdown__component .react-dropdown-select-no-data {
  padding: 10px;
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  color: rgb(var(--colour-black, 33, 33, 33));
  border: none;
  transition: background 0.3s ease-in-out;
}
.c-dropdown__component .react-dropdown-select-item:hover,
.c-dropdown__component .react-dropdown-select-no-data:hover {
  background: rgb(var(--colour-gray-1, 246, 246, 246)) !important;
}
.c-dropdown__component .react-dropdown-select-item-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(var(--colour-black, 33, 33, 33)) !important;
  background-color: rgb(var(--colour-white, 255, 255, 255)) !important;
  border-bottom: none !important;
}
.c-dropdown__component .react-dropdown-select-item-selected::after {
  content: "";
  width: 12px;
  height: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg%20width='13'%20height='9'%20viewBox='0%200%2013%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.81597%206.64205L11.0295%200.260633C11.1986%200.0868774%2011.397%200%2011.6246%200C11.8522%200%2012.0507%200.0868774%2012.22%200.260633C12.3892%200.434515%2012.4738%200.640747%2012.4738%200.879327C12.4738%201.11791%2012.3892%201.32414%2012.22%201.49802L5.41133%208.50518C5.24203%208.67894%205.04357%208.76582%204.81597%208.76582C4.58838%208.76582%204.38992%208.67894%204.22062%208.50518L1.03646%205.23497C0.867279%205.06109%200.785039%204.85486%200.789742%204.61628C0.794445%204.3777%200.881388%204.17147%201.05057%203.99758C1.21988%203.82383%201.42068%203.73695%201.65298%203.73695C1.88528%203.73695%202.08609%203.82383%202.2554%203.99758L4.81597%206.64205Z'%20fill='black'/%3e%3c/svg%3e");
  fill: rgb(var(--colour-black, 33, 33, 33));
}
.c-checkbox {
  margin-bottom: 18px;
  margin-top: 12px;
}
.c-checkbox__component {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.c-checkbox__component__icon {
  user-select: none;
  display: inline-block;
}
.c-checkbox__component__icon:hover rect {
  fill: rgb(var(--colour-gray-1, 246, 246, 246));
  transition: all 0.3s ease-in-out;
}
.c-checkbox--checked .c-checkbox__component__icon:hover rect {
  fill: rgb(var(--colour-black, 33, 33, 33));
}
.c-checkbox__component__icon-wrapper {
  height: 17px;
}
.c-checkbox__component__side-label {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 0;
  width: 100%;
}
.c-dialog {
  overflow-x: visible;
  outline: none;
}
.c-terms-conditions p {
  margin-top: 8px;
}
@media (min-width: 768px) {
  .c-dialog {
    position: relative;
  }
}
.c-dialog > .c-dialog__close {
  position: absolute;
  right: -18px;
  top: -18px;
}
@media (max-width: 768px) {
  .c-dialog > .c-dialog__close {
    display: none;
  }
}
.c-dialog__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 17px;
}
@media (max-width: 768px) {
  .c-dialog__nav .c-steps {
    grid-column: 2;
    justify-self: center;
  }
  .c-dialog__nav .c-dialog__close {
    grid-column: 3;
    justify-self: end;
  }
}
@media (min-width: 768px) {
  .c-dialog__nav {
    display: flex;
    justify-content: center;
  }
  .c-dialog__nav .c-dialog__close {
    display: none;
  }
}
.c-dialog__wrapper {
  background: rgb(var(--colour-white, 255, 255, 255));
  padding: 20px 24px 32px 24px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .c-dialog__wrapper {
    min-height: 100vh;
    padding: 20px 20px 32px 20px;
  }
}
@media (min-width: 768px) {
  .c-dialog__wrapper {
    width: 400px;
    border-radius: 8px;
  }
  .c-dialog__wrapper::-webkit-scrollbar {
    display: none;
  }
}
.c-dialog__close {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.c-dialog__close > svg > circle {
  fill: rgb(var(--colour-gray-2, 223, 223, 223));
  transition: fill 0.3s ease-in-out;
}
.c-dialog__close:hover > svg > circle {
  fill: rgb(var(--colour-gray-3, 192, 192, 192));
}
.c-dialog__controls {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
  justify-content: center;
}

.c-dialog__controls .c-button {
  box-sizing: border-box;
  width: 50%;
}
@media (min-width: 768px) {
  .c-dialog__controls .c-button {
    box-sizing: border-box;
    width: 170px;
  }
}
.c-dialog__bottom {
  text-align: center;
  margin-top: 20px;
}
.c-dialog__bottom p {
  padding: 0;
}
.c-dialog__bottom a {
  cursor: pointer;
}
.c-dialog__overlay {
  position: fixed;
  z-index: 1001;
  inset: 0px;
  background-color: rgba(var(--colour-black, 33, 33, 33), 0.6);
}
 
.c-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 445px;
  width: 100%;
}
.c-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgb(223, 223, 223);
  border-top-color: rgb(116, 51, 135);
  border-radius: 50%;
  animation: c-spinner__spin 0.8s linear infinite;
}
@keyframes c-spinner__spin {
  to {
    transform: rotate(360deg);
  }
}


@media (min-width: 768px) {
  .c-dialog__overlay {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.ReactModal__Body--open {
  overflow: hidden;
}
@media (max-width: 768px) {
  .ReactModal__Body--open {
    scrollbar-width: none;
    overflow-y: auto !important;
  }
}

html {
  scrollbar-width: none;
  overflow-y: auto;
}

  /*
  
    Specific styling for Toastify pop up notifications
  
  */

  
/* Added by Alex, to be tidied. */

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3D3D3D;
    --toastify-color-success: #FFF;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #ae2012;
    --toastify-color-transparent: hsla(0, 0%, 100%, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error)
}

  
.Toastify__toast {
  background-color: transparent !important;
  /* border-radius: 30% !important; */
  height: 40px !important;
  box-shadow: none !important;
}

.Toastify__toast-body {
  background-color: #272727;
  border-radius: 20px;
  padding: 10px !important;
}

.Toastify__close-button {
  display: none;
}

.Toastify__toast-container {
    z-index: var(--toastify-z-index);
    /*-webkit-transform: translateZ(var(--toastify-z-index));*/
    position: fixed;
    padding: 4px;
    width: var(--toastify-toast-width);
    box-sizing: border-box;
    color: #fff
}

.Toastify__toast-container--top-left {
    bottom: 32px;
    left: 1em
}

.Toastify__toast-container--top-center {
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--top-right {
    bottom: 32px;
    right: 1em
}

.Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em
}

.Toastify__toast-container--bottom-center {
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: 32px;
    right: 1em
}

@media only screen and (max-width:800px) {
    .Toastify__toast-container {
        width: 100vw;
        padding: 0 20px;
        left: 0;
        margin: 0
    }

    .Toastify__toast-container--top-center,
    .Toastify__toast-container--top-left,
    .Toastify__toast-container--top-right {
        bottom: 0;
        transform: translateX(0);
    }

    .Toastify__toast-container--bottom-center,
    .Toastify__toast-container--bottom-left,
    .Toastify__toast-container--bottom-right {
        bottom: 0;
        transform: translateX(0);
    }

    .Toastify__toast-container--rtl {
        right: 0;
        left: auto
    }
}

.Toastify__toast {
    position: relative;
    min-height: var(--toastify-toast-min-height);
    box-sizing: border-box;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-height: var(--toastify-toast-max-height);
    overflow: hidden;
    font-family: var(--toastify-font-family);
    cursor: default;
    direction: ltr;
    z-index: 0
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-body {
    margin: auto 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 6px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.Toastify__toast-body>div:last-child {
    word-break: break-word;
    -ms-flex: 1;
    flex: 1
}

.Toastify__toast-icon {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
    width: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flexbox;
    display: flex
}

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: .7s
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: .3s
}

.Toastify--animate-icon svg {
    fill: #FFF;
}

@media only screen and (max-width:480px) {
    .Toastify__toast {
        margin-bottom: 0;
        border-radius: 0
    }
}

.Toastify__toast--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast--colored.Toastify__toast--default,
.Toastify__toast--light {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast--colored.Toastify__toast--info {
    color: var(--toastify-text-color-info);
    background: var(--toastify-color-info);
    margin-bottom: 0;
}

.Toastify__toast--colored.Toastify__toast--success {
    color: var(--toastify-text-color-success);
    background: var(--toastify-color-success)
}

.Toastify__toast--colored.Toastify__toast--warning {
    color: var(--toastify-text-color-warning);
    background: var(--toastify-color-warning)
}

.Toastify__toast--colored.Toastify__toast--error {
    color: var(--toastify-text-color-error);
    background: var(--toastify-color-error)
}

.Toastify__progress-bar--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar--colored.Toastify__progress-bar--error,
.Toastify__progress-bar--colored.Toastify__progress-bar--info,
.Toastify__progress-bar--colored.Toastify__progress-bar--success,
.Toastify__progress-bar--colored.Toastify__progress-bar--warning {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    align-items: center;
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    display: none;
    cursor: pointer;
    transition: .3s ease;
    justify-content: center;
    opacity: .7;
    padding: 0;
    height: 20px;
    width: 20px;
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 20px;
    width: 20px;
}

.Toastify__close-button:focus,
.Toastify__close-button:hover {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: var(--toastify-z-index);
    opacity: .7;
    transform-origin: left
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    right: 0;
    left: auto;
    transform-origin: right
}

.Toastify__spinner {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 100%;
    border-color: var(--toastify-spinner-color-empty-area);
    border-right-color: var(--toastify-spinner-color);
    animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        transform: translate3d(10px, 0, 0)
    }

    90% {
        transform: translate3d(-5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        transform: translate3d(5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        transform: translate3d(0, 10px, 0)
    }

    90% {
        transform: translate3d(0, -5px, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        transform: translate3d(0, -10px, 0)
    }

    90% {
        transform: translate3d(0, 5px, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.Toastify__bounce-enter--bottom-left,
.Toastify__bounce-enter--top-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,
.Toastify__bounce-enter--top-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,
.Toastify__bounce-exit--top-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,
.Toastify__bounce-exit--top-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(110%, 0, 0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-110%, 0, 0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

.Toastify__slide-enter--bottom-left,
.Toastify__slide-enter--top-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,
.Toastify__slide-enter--top-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,
.Toastify__slide-exit--top-left {
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--bottom-right,
.Toastify__slide-exit--top-right {
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown
}

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

    to {
        transform: rotate(1turn)
    }
}