:root {
  --spacer: 1rem;

  --font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-title: 5rem;
  --font-subtitle: 2.5rem;
  --font-default: 1rem;
  --font-small: 0.92rem;
  --font-extrasmall: 0.8rem;

  --font-weight: 500;
  --font-letterspacing: 0.45px;
  --font-color: #212529;
  --font-lineheight: 1.5;

  --heading-font-weight: 600;
  --heading-line-height: 1.2;
  --heading-margin-bottom: .5rem;
  --heading-h1-font-size: 4rem;
  --heading-h2-font-size: 2rem;
  --heading-h3-font-size: 1.75rem;
  --heading-h4-font-size: 1.5rem;
  --heading-h5-font-size: 1.25rem;
  --heading-h6-font-size: 1rem;

  --button-border-radius: 16px;
  --button-padding-horizontal: .75rem;
  --button-padding-vertical: .375rem;
  --button-line-height: 1.75;
  
  --color-primary: #6c4397;
  --color-primary100: #f3e7ff;
  --color-primary200: #b8adc3;
  --color-primary300: #907da4;
  --color-primary400: #8163a0;
  --color-primary500: #6c4397;
  --color-primary600: #5d2696;
  --color-primary700: #4f1190;
  --color-primary800: #3f0779;
  --color-primary900: #230245;
  --color-secondary: #687785;
  --color-secondary100: #f5f8fb;
  --color-secondary200: #ebf1f6;
  --color-secondary300: #e0e9f2;
  --color-secondary400: #d6e2ed;
  --color-secondary500: #ccdbe9;
  --color-secondary600: #b9c7d4;
  --color-secondary700: #a4b3c1;
  --color-secondary800: #8796a4;
  --color-secondary900: #687785;
  --color-success: #1aa170;
  --color-success100: #d1ece2;
  --color-success200: #a3d9c6;
  --color-success300: #76c7a9;
  --color-success400: #48b48d;
  --color-success500: #1aa170;
  --color-success600: #208d65;
  --color-success700: #207858;
  --color-success800: #1f684e;
  --color-success900: #1d5742;
  --color-danger: #D46C4F;
  --color-danger100: #e4d5d0;
  --color-danger200: #e5c4ba;
  --color-danger300: #e8b1a1;
  --color-danger400: #e49781;
  --color-danger500: #D46C4F;
  --color-danger600: #a9462a;
  --color-danger700: #883118;
  --color-danger800: #6b200b;
  --color-danger900: #551402;
  --color-warning: #F9E180;
  --color-warning100: #fff5da;
  --color-warning200: #ffebb5;
  --color-warning300: #fee091;
  --color-warning400: #fed66c;
  --color-warning500: #F9E180;
  --color-warning600: #dab042;
  --color-warning700: #b28f33;
  --color-warning800: #917428;
  --color-warning900: #6d5516;
  --color-info: #0dcaf0;
  --color-info100: #d2d2d3;
  --color-info200: #bbbcbc;
  --color-info300: #a5a6a7;
  --color-info400: #8e8f90;
  --color-info500: #0dcaf0;
  --color-info600: #616264;
  --color-info700: #4b4d4e;
  --color-info800: #343638;
  --color-info900: #1e2022;
  --color-gray: #b4b4b4;
  --color-gray100: #f4f4f4;
  --color-gray200: #e1e1e1;
  --color-gray300: #d2d2d2;
  --color-gray400: #c3c3c3;
  --color-gray500: #b4b4b4;
  --color-gray600: #949494;
  --color-gray700: #7b7b7b;
  --color-gray800: #585858;
  --color-gray900: #404040;
}

*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
body {
  overflow-x: hidden;
  font-family: var(--font-family);
  font-size: var(--font-default);
  margin: 0;
  text-align: left;

  font-weight: var(--font-weight);
  letter-spacing: var(--font-letterspacing);
  color: var(--font-color);
  line-height: var(--font-lineheight);
}

a {
  color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: var(--heading-margin-bottom); line-height: var(--heading-line-height); font-weight: var(--heading-font-weight); }
h1, .h1 { font-size: var(--heading-h1-font-size); }
h2, .h2 { font-size: var(--heading-h2-font-size); }
h3, .h3 { font-size: var(--heading-h3-font-size); }
h4, .h4 { font-size: var(--heading-h4-font-size); }
h5, .h5 { font-size: var(--heading-h5-font-size); }
h6, .h6 { font-size: var(--heading-h6-font-size); }

.font-title { font-size: var(--font-title); }
.font-subtitle { font-size: var(--font-subtitle); }
.font-default { font-size: var(--font-default); }
.font-small { font-size: var(--font-small); }
.font-extrasmall { font-size: var(--font-extrasmall); }

p { margin-top: 0; margin-bottom: calc(var(--spacer) * 1); }
ol, ul, dl { margin-top: 0; margin-bottom: calc(var(--spacer) * 1); }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
img { vertical-align: middle; border-style: none; }
table { border-collapse: collapse; }

caption {
  padding-top: calc(var(--spacer) * .75);
  padding-bottom: calc(var(--spacer) * .75);
  color: var(--color-gray300);
  text-align: left;
  caption-side: bottom;
}

th { text-align: inherit; }
label { display: inline-block; margin-bottom: calc(var(--spacer) * .5); }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
select { word-wrap: normal; }
[role="button"] { cursor: pointer; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

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

/* BUTTON */
.btn {
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  text-decoration: none;
  white-space: none;
  vertical-align: middle;
  user-select: none;
  /* background-color: var(--color-gray); */
  border: 1px solid transparent;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  font-size: var(--font-default);
  padding: 0.6875rem 2.25rem;
  line-height: 1.75;
  border-radius: 16px; 
}

/* Button sizes */
.btn-lg {
  font-size: 20px;
  padding: .75rem 1.25rem;
  line-height: 2;
  border-radius: .6rem; 
}

.btn-sm {
  font-size: var(--font-small);
  padding: .5rem 1rem;
  line-height: 1.5;
  border-radius: .6rem; 
}

.btn:not(:disabled).btn:hover {
  /*color: #fff;*/
  text-decoration: none;
}

.btn:not(:disabled).btn:focus,
.btn:not(:disabled).btn.focus {
  outline: 0;
}

.btn:disabled,
.btn.disabled {
  opacity: .65;
  box-shadow: none;
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
  border-color: transparent;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

/* btn-primary */
.btn-primary {
  color: #fff!important;
  background-color: var(--color-primary);
  border-color: transparent;
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--color-primary700);
  border-color: transparent;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: var(--color-primary700);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-primary200);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-primary700);
  border-color: transparent;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-primary300);
}

/* btn-secondary */
.btn-secondary {
  color: #fff;
  background-color: var(--color-secondary);
  border-color: transparent;
}

.btn-secondary:hover {
  color: #fff;
  background-color: var(--color-secondary600);
  border-color: transparent;
}

.btn-secondary:focus,
.btn-secondary.focus {
  color: #fff;
  background-color: var(--color-secondary600);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-secondary200);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  color: #fff;
  background-color: var(--color-secondary);
  border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-secondary600);
  border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-secondary300);
}

/* btn-success */
.btn-success {
  color: #fff;
  background-color: var(--color-success);
  border-color: transparent;
}

.btn-success:hover {
  color: #fff;
  background-color: var(--color-success600);
  border-color: transparent;
}

.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: var(--color-success600);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-success200);
}

.btn-success:disabled,
.btn-success.disabled {
  color: #fff;
  background-color: var(--color-success);
  border-color: transparent;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-success600);
  border-color: transparent;
}

.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-success300);
}

/* btn-dark */
.btn-dark {
  color: #fff;
  background-color: var(--color-gray900);
  border-color: transparent;
}

.btn-dark:hover {
  color: #fff;
  background-color: var(--color-gray900);
  border-color: transparent;
}

.btn-dark:focus,
.btn-dark.focus {
  color: #fff;
  background-color: var(--color-gray900);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-danger200);
}

.btn-dark:disabled,
.btn-dark.disabled {
  color: #fff;
  background-color: var(--color-gray700);
  border-color: transparent;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-gray900);
  border-color: transparent;
}

.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-gray900);
}

/* btn-danger */
.btn-danger {
  color: #fff;
  background-color: var(--color-danger);
  border-color: transparent;
}

.btn-danger:hover {
  color: #fff;
  background-color: var(--color-danger600);
  border-color: transparent;
}

.btn-danger:focus,
.btn-danger.focus {
  color: #fff;
  background-color: var(--color-danger600);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-danger200);
}

.btn-danger:disabled,
.btn-danger.disabled {
  color: #fff;
  background-color: var(--color-danger);
  border-color: transparent;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-danger600);
  border-color: transparent;
}

.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-danger300);
}

/* btn-warning */
.btn-warning {
  color: #fff;
  background-color: var(--color-warning);
  border-color: transparent;
}

.btn-warning:hover {
  color: #fff;
  background-color: var(--color-warning600);
  border-color: transparent;
}

.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: var(--color-warning600);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-warning200);
}

.btn-warning:disabled,
.btn-warning.disabled {
  color: #fff;
  background-color: var(--color-warning);
  border-color: transparent;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-warning600);
  border-color: transparent;
}

.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-warning300);
}

/* btn-info */
.btn-info {
  color: #fff;
  background-color: var(--color-info);
  border-color: transparent;
}

.btn-info:hover {
  color: #fff;
  background-color: var(--color-info600);
  border-color: transparent;
}

.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: var(--color-info600);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem var(--color-info200);
}

.btn-info:disabled,
.btn-info.disabled {
  color: #fff;
  background-color: var(--color-info);
  border-color: transparent;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--color-info600);
  border-color: transparent;
}

.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-info300);
}

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

.btn-outline-inverted {
  color: #fff;
  background-color: transparent;
  border: 1px solid var(--color-gray600);
}

.btn-outline:not(:disabled).btn-outline:hover {
  /*color: #fff;*/
  background-color: var(--color-light200);
  /*border-color: transparent;*/
}

btn-outline:not(:disabled).btn-outline:focus,
btn-outline:not(:disabled).btn-outline.focus {
  /*color: #fff;*/
  background-color: var(--color-light200);
  /*border-color: transparent;*/
  /*box-shadow: 0 0 0 .2rem var(--color-secondary200);*/
}

.btn-outline:disabled,
.btn-outline.disabled {
  opacity: 0.7;
}

.btn-outline:not(:disabled):not(.disabled):active,
.btn-outline:not(:disabled):not(.disabled).active {
  opacity: 0.7;
}

.btn-outline:not(:disabled):not(.disabled).active:focus,
.btn-outline:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-secondary300);
}

/* btn-link */
.btn-link {
  background-color: transparent;
  border: 1px solid transparent;
}

.btn-link-inverted {
  color: #fff;
  background-color: transparent;
  border: 1px solid transparent;
}

.btn-link:not(:disabled).btn-link:hover {
  /*color: #fff;*/
  background-color: var(--color-light200);
  /*border-color: transparent;*/
}

btn-link:not(:disabled).btn-link:focus,
btn-link:not(:disabled).btn-link.focus {
  /*color: #fff;*/
  background-color: var(--color-light200);
  /*border-color: transparent;*/
  /*box-shadow: 0 0 0 .2rem var(--color-secondary200);*/
}

.btn-link:disabled,
.btn-link.disabled {
  opacity: 0.7;
}

.btn-link:not(:disabled):not(.disabled):active,
.btn-link:not(:disabled):not(.disabled).active {
  opacity: 0.7;
}

.btn-link:not(:disabled):not(.disabled).active:focus,
.btn-link:not(:disabled):not(.disabled):active:focus {
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--color-secondary300);
}

/* btn-block */

.btn-block {
  display: block;
  width: 100%;
}

/* BADGE */
.badge {
  color: #fff;
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}

.badge-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

.badge-primary { background-color: var(--color-primary); }
.badge-secondary { background-color: var(--color-secondary); }
.badge-success { background-color: var(--color-success); }
.badge-danger { background-color: var(--color-danger); }
.badge-warning { background-color: var(--color-warning); }
.badge-info { background-color: var(--color-info); }

input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }

/* TEXT */
.text-primary { color: var(--color-primary)!important; }
.text-secondary { color: var(--color-secondary)!important; }
.text-success { color: var(--color-success)!important; }
.text-danger { color: var(--color-danger)!important; }
.text-warning { color: var(--color-warning)!important; }
.text-info { color: var(--color-info)!important; }
.text-muted {color: var(--color-secondary800)!important;line-height: 0.8;font-weight: 400;}

/* BACKGROUND */
.bg-primary { background-color: var(--color-primary)!important; }
.bg-secondary { background-color: var(--color-secondary)!important; }
.bg-success { background-color: var(--color-success)!important; }
.bg-danger { background-color: var(--color-danger)!important; }
.bg-warning { background-color: var(--color-warning)!important; }
.bg-info { background-color: var(--color-info)!important; }
.bg-light { background-color: var(--color-gray100)!important; }
.bg-dark { background-color: var(--color-gray700)!important; }

/* MODAL*/
.xmodal-header{
 border-top-left-radius: var(--button-border-radius)!important;
 border-top-right-radius: var(--button-border-radius)!important; 
}

.xmodal-container{
  border-radius: var(--button-border-radius)!important;
}

/* BORDER-RADIUS */
.rounded { border-radius: var(--button-border-radius)!important; }
.rounded-sm { border-radius: .4rem!important; }
.rounded-lg { border-radius: .9rem!important; }
.rounded-circle { border-radius: 50%!important; }
.rounded-pill { border-radius: 50rem!important; }

/* PADDING */
.p-auto { padding: auto!important; }
.p-0 { padding: 0!important; }
.p-1 { padding: calc(var(--spacer) * .25)!important; }
.p-2 { padding: calc(var(--spacer) * .5)!important; }
.p-3 { padding: var(--spacer)!important; }
.p-4 { padding: calc(var(--spacer) * 1.5)!important; }
.p-5 { padding: calc(var(--spacer) * 3)!important; }
/* padding-top */
.pt-auto { padding-top: auto!important; }
.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: calc(var(--spacer) * .25)!important; }
.pt-2 { padding-top: calc(var(--spacer) * .5)!important; }
.pt-3 { padding-top: var(--spacer)!important; }
.pt-4 { padding-top: calc(var(--spacer) * 1.5)!important; }
.pt-5 { padding-top: calc(var(--spacer) * 3)!important; }
/* padding-bottom */
.pb-auto { padding-bottom: auto!important; }
.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: calc(var(--spacer) * .25)!important; }
.pb-2 { padding-bottom: calc(var(--spacer) * .5)!important; }
.pb-3 { padding-bottom: var(--spacer)!important; }
.pb-4 { padding-bottom: calc(var(--spacer) * 1.5)!important; }
.pb-5 { padding-bottom: calc(var(--spacer) * 3)!important; }
/* padding-left */
.pl-auto { padding-left: auto!important; }
.pl-0 { padding-left: 0!important; }
.pl-1 { padding-left: calc(var(--spacer) * .25)!important; }
.pl-2 { padding-left: calc(var(--spacer) * .5)!important; }
.pl-3 { padding-left: var(--spacer)!important; }
.pl-4 { padding-left: calc(var(--spacer) * 1.5)!important; }
.pl-5 { padding-left: calc(var(--spacer) * 3)!important; }
/* padding-right */
.pr-auto { padding-right: auto!important; }
.pr-0 { padding-right: 0!important; }
.pr-1 { padding-right: calc(var(--spacer) * .25)!important; }
.pr-2 { padding-right: calc(var(--spacer) * .5)!important; }
.pr-3 { padding-right: var(--spacer)!important; }
.pr-4 { padding-right: calc(var(--spacer) * 1.5)!important; }
.pr-5 { padding-right: calc(var(--spacer) * 3)!important; }
/* padding-x */
.px-auto { padding-left: auto!important; padding-right: auto!important; }
.px-0 { padding-left: 0!important; padding-right: 0!important; }
.px-1 { padding-left: calc(var(--spacer) * .25)!important; padding-right: calc(var(--spacer) * .25)!important; }
.px-2 { padding-left: calc(var(--spacer) * .5)!important; padding-right: calc(var(--spacer) * .5)!important; }
.px-3 { padding-left: var(--spacer)!important; padding-right: var(--spacer)!important; }
.px-4 { padding-left: calc(var(--spacer) * 1.5)!important; padding-right: calc(var(--spacer) * 1.5)!important; }
.px-5 { padding-left: calc(var(--spacer) * 3)!important; padding-right: calc(var(--spacer) * 3)!important; }
/* padding-y */
.py-auto { padding-top: auto!important; padding-bottom: auto!important; }
.py-0 { padding-top: 0!important; padding-bottom: 0!important; }
.py-1 { padding-top: calc(var(--spacer) * .25)!important; padding-bottom: calc(var(--spacer) * .25)!important; }
.py-2 { padding-top: calc(var(--spacer) * .5)!important; padding-bottom: calc(var(--spacer) * .5)!important; }
.py-3 { padding-top: var(--spacer)!important; padding-bottom: var(--spacer)!important; }
.py-4 { padding-top: calc(var(--spacer) * 1.5)!important; padding-bottom: calc(var(--spacer) * 1.5)!important; }
.py-5 { padding-top: calc(var(--spacer) * 3)!important; padding-bottom: calc(var(--spacer) * 3)!important; }

/* MARGIN */
.m-auto { margin: auto!important; }
.m-0 { margin: 0!important; }
.m-1 { margin: calc(var(--spacer) * .25)!important; }
.m-2 { margin: calc(var(--spacer) * .5)!important; }
.m-3 { margin: var(--spacer)!important; }
.m-4 { margin: calc(var(--spacer) * 1.5)!important; }
.m-5 { margin: calc(var(--spacer) * 3)!important; }
/* margin-top */
.mt-auto { margin-top: auto!important; }
.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: calc(var(--spacer) * .25)!important; }
.mt-2 { margin-top: calc(var(--spacer) * .5)!important; }
.mt-3 { margin-top: var(--spacer)!important; }
.mt-4 { margin-top: calc(var(--spacer) * 1.5)!important; }
.mt-5 { margin-top: calc(var(--spacer) * 3)!important; }
/* margin-bottom */
.mb-auto { margin-bottom: auto!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: calc(var(--spacer) * .25)!important; }
.mb-2 { margin-bottom: calc(var(--spacer) * .5)!important; }
.mb-3 { margin-bottom: var(--spacer)!important; }
.mb-4 { margin-bottom: calc(var(--spacer) * 1.5)!important; }
.mb-5 { margin-bottom: calc(var(--spacer) * 3)!important; }
/* margin-left */
.ml-auto { margin-left: auto!important; }
.ml-0 { margin-left: 0!important; }
.ml-1 { margin-left: calc(var(--spacer) * .25)!important; }
.ml-2 { margin-left: calc(var(--spacer) * .5)!important; }
.ml-3 { margin-left: var(--spacer)!important; }
.ml-4 { margin-left: calc(var(--spacer) * 1.5)!important; }
.ml-5 { margin-left: calc(var(--spacer) * 3)!important; }
/* margin-right */
.mr-auto { margin-right: auto!important; }
.mr-0 { margin-right: 0!important; }
.mr-1 { margin-right: calc(var(--spacer) * .25)!important; }
.mr-2 { margin-right: calc(var(--spacer) * .5)!important; }
.mr-3 { margin-right: var(--spacer)!important; }
.mr-4 { margin-right: calc(var(--spacer) * 1.5)!important; }
.mr-5 { margin-right: calc(var(--spacer) * 3)!important; }
/* margin-x */
.mx-auto { margin-left: auto!important; margin-right: auto!important; }
.mx-0 { margin-left: 0!important; margin-right: 0!important; }
.mx-1 { margin-left: calc(var(--spacer) * .25)!important; margin-right: calc(var(--spacer) * .25)!important; }
.mx-2 { margin-left: calc(var(--spacer) * .5)!important; margin-right: calc(var(--spacer) * .5)!important; }
.mx-3 { margin-left: var(--spacer)!important; margin-right: var(--spacer)!important; }
.mx-4 { margin-left: calc(var(--spacer) * 1.5)!important; margin-right: calc(var(--spacer) * 1.5)!important; }
.mx-5 { margin-left: calc(var(--spacer) * 3)!important; margin-right: calc(var(--spacer) * 3)!important; }
/* margin-y */
.my-auto { margin-top: auto!important; margin-bottom: auto!important; }
.my-0 { margin-top: 0!important; margin-bottom: 0!important; }
.my-1 { margin-top: calc(var(--spacer) * .25)!important; margin-bottom: calc(var(--spacer) * .25)!important; }
.my-2 { margin-top: calc(var(--spacer) * .5)!important; margin-bottom: calc(var(--spacer) * .5)!important; }
.my-3 { margin-top: var(--spacer)!important; margin-bottom: var(--spacer)!important; }
.my-4 { margin-top: calc(var(--spacer) * 1.5)!important; margin-bottom: calc(var(--spacer) * 1.5)!important; }
.my-5 { margin-top: calc(var(--spacer) * 3)!important; margin-bottom: calc(var(--spacer) * 3)!important; }

/* DISPLAY */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* POSITION */
.position-static { position: static!important; }
.position-relative { position: relative!important; }
.position-absolute { position: absolute!important; }
.position-fixed { position: fixed!important; }
.position-sticky { position: sticky!important; }

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

/* FLEX */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-fill { flex: 1 1 auto !important; }

.flex-basis-auto { flex-basis: auto!important; }
.flex-basis-0 { flex-basis: 0!important; }
.flex-basis-100 { flex-basis: 100%!important; }

.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-2 { flex-grow: 2 !important; }
.flex-grow-3 { flex-grow: 3 !important; }
.flex-grow-4 { flex-grow: 4 !important; }
.flex-grow-5 { flex-grow: 5 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* ALIGN */
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* JUSTIFY */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

/* GRID */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.row-cols-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.row-cols-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.row-cols-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.row-cols-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.row-cols-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
.row-cols-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
.col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col,.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

 @media (min-width: 576px) {
  .container, .container-sm { max-width: 540px; }
  .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .row-cols-sm-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .row-cols-sm-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .row-cols-sm-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .row-cols-sm-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .row-cols-sm-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
  .row-cols-sm-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md { max-width: 720px; }
  .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .row-cols-md-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .row-cols-md-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .row-cols-md-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .row-cols-md-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .row-cols-md-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
  .row-cols-md-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

  .d-md-inline {
      display: inline!important;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg { max-width: 960px; }
  .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .row-cols-lg-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .row-cols-lg-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .row-cols-lg-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .row-cols-lg-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .row-cols-lg-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
  .row-cols-lg-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; }
  .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .row-cols-xl-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .row-cols-xl-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .row-cols-xl-3 > * { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .row-cols-xl-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .row-cols-xl-5 > * { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; }
  .row-cols-xl-6 > * { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/* SIZING */
.w-25 { width: 25%!important; }
.w-50 { width: 50%!important; }
.w-75 { width: 75%!important; }
.w-100 { width: 100%!important; }
.h-25 { height: 25%!important; }
.h-50 { height: 50%!important; }
.h-75 { height: 75%!important; }
.h-100 { height: 100%!important; }
.mw-100 { max-width: 100%!important; }
.mh-100 { max-height: 100%!important; }

/* BORDERS */
.border { border: 1px solid var(--color-gray) !important; }
.border-top { border-top: 1px solid var(--color-gray) !important; }
.border-right { border-right: 1px solid var(--color-gray) !important; }
.border-bottom { border-bottom: 1px solid var(--color-gray) !important; }
.border-left { border-left: 1px solid var(--color-gray) !important; }

.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }

/* INPUT GROUP */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.form-control {
  display: block;
  width: 100%;
  background-clip: padding-box;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray900);
  background-color: #fff;
  border: 1px solid var(--color-gray200);
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control::placeholder {
  color: var(--color-gray700);
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: var(--color-gray100);
  opacity: 1;
}

.form-control:focus {
  border-color: var(--color-primary300);
  outline: 0;
  box-shadow: 0 0 0 0.15rem var(--color-primary100);
}

.input-group-text {
  border: 1px solid var(--color-gray200);
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group > .form-control:focus {
  z-index: 3;
}

.input-group-prepend, .input-group-append {
  display: flex;
}

.input-group-text {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
}

/* TEXT */
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.small, small { font-size: 80%; font-weight: 400; }
.mark, mark { padding: .2em; background-color: var(--color-info200); }

.font-weight-light { font-weight: 300!important; }
.font-weight-normal { font-weight: 400!important; }
.font-weight-semi-bold { font-weight: 600!important; }
.font-weight-bold { font-weight: 700!important; }
.font-italic { font-style: italic!important; }

/* SPINNER */
@keyframes spinner-border { to { transform: rotate(360deg); } }
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: .2em solid var(--color-gray600); border-right-color: transparent; border-radius: 50%; -webkit-animation: spinner-border .75s linear infinite; animation: spinner-border .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .1em;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.form-check-input {
  margin-top: .3rem;
}

.form-check-label {
  margin-bottom: 0;
}

/* DIVIDER */
.divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--color-gray200);
}

.input-group-text {
  border: 1px solid var(--color-gray200);
}

/* form elements indents */
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}