/* stylelint-disable */
:root {
  /* Colors */
  --red: #e74a3e;
  --red-60: #d4371c;
  --green: #32c655;
  --black: #1a1a1a;
  --gray-70: #535739;
  --gray-80: #383c40;
  --gray-dark-1: #6a6b6c;
  --gray-base: #858688;
  --gray-light-1: #aeaeaf;
  --gray-light-2: #d7d7d8;
  --gray-light-3: #ebebec;
  --gray-light-4: #f3f4f5;
  --gray-light-5: #f7f7f7;
  --blue-light-1: #048fb9;
  --blue-dark-1: #005e7d;
  --white: #fff;
  --yellow-5: #fff7e3;


  /* Fonts */
  --bold: 'CiscoSans Bold';
  --bold-oblique: 'CiscoSans Bold Oblique';
  --extra-light: 'CiscoSans Extra Light';
  --extra-light-oblique: 'CiscoSans Extra Light Oblique';
  --heavy: 'CiscoSans Heavy';
  --heavy-oblique: 'CiscoSans Heavy Oblique';
  --light: 'CiscoSans Light';
  --light-oblique: 'CiscoSans Light Oblique';
  --regular: 'CiscoSans Regular';
  --regular-oblique: 'CiscoSans Regular Oblique';
  --thin: 'CiscoSans Thin';
  --thin-oblique: 'CiscoSans Thin Oblique';
}

/* Normalize */
html {
  height: 100%;
  font-size: 100%;
}

body {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--gray-dark-4);
  background: var(--gray-light-4);
  font-family: var(--light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: lighter;
  margin: 0;
  text-align: left;
}

a {
  text-decoration: none;
  color: inherit;
}

a:active,
a:hover {
  outline-width: 0;
}

table {
  border: none;
  border-collapse: collapse;
}

th {
  font-weight: lighter;
  font-size: 0.85rem;
}

button {
  cursor: pointer;
}

input[type=text]::-ms-clear,
input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

hr {
  height: 1px;
}

/* Typography */
@font-face {
  font-family: 'CiscoSans Bold';
  src: url('../fonts/CiscoSansTTBold.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Bold Oblique';
  src: url('../fonts/CiscoSansTTBoldOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Extra Light';
  src: url('../fonts/CiscoSansTTExtraLight.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Extra Light Oblique';
  src: url('../fonts/CiscoSansTTExtraLightOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Heavy';
  src: url('../fonts/CiscoSansTTHeavy.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Heavy Oblique';
  src: url('../fonts/CiscoSansTTHeavyOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Light';
  src: url('../fonts/CiscoSansTTLight.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Light Oblique';
  src: url('../fonts/CiscoSansTTLightOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Regular';
  src: url('../fonts/CiscoSansTTRegular.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Regular Oblique';
  src: url('../fonts/CiscoSansTTRegularOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Thin';
  src: url('../fonts/CiscoSansTTThin.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CiscoSans Thin Oblique';
  src: url('../fonts/CiscoSansTTThinOblique.woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* Primitives */
.link,
.link:hover,
.link:visited {
  color: var(--blue-light-1);
}

.text-color {
  color: var(--blue-dark-1);
}

.body-small {
  font-size: 0.75rem;
  font-family: var(--regular);
}

.body-smallest {
  font-size: 0.625rem;
  padding: 0.188rem 0;
  font-family: var(--regular);
}

.ft-reg {
  font-family: var(--regular);
}

.font-16px {
  font-size: 1rem;
}

.font-20px {
  font-size: 1.25rem;
}

/*
.title {
  font-size: 5rem;
  color: var(--gray-dark-1);
  font-family: var(--thin);
} */

h1 {
  font-size: 4rem;
  font-family: var(--thin);
}

h2 {
  font-size: 3rem;
  font-family: var(--extra-light);
}

h3 {
  font-size: 1.625rem;
  font-family: var(--extra-light);
}

h4 {
  font-size: 1.6rem;
  font-family: var(--light);
}

h5 {
  font-size: 1.4rem;
  font-family: var(--light);
}

h6 {
  font-size: 1.25rem;
  font-family: var(--regular);
}

/* Colors */
.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.black {
  color: var(--black);
}

.gray-70 {
  color: var(--gray-70);
}

.gray-80 {
  color: var(--gray-80);
}

.gray-dark-1 {
  color: var(--gray-dark-1);
}

.gray-base {
  color: var(--gray-base);
}

.gray-light-1 {
  color: var(--gray-light-1);
}

.gray-light-2 {
  color: var(--gray-light-2);
}

.gray-light-3 {
  color: var(--gray-light-3);
}

.gray-light-4 {
  color: var(--gray-light-4);
}

.white {
  color: var(--white);
}

.bg-gray-light-1 {
  background-color: var(--gray-light-1);
}

.bg-gray-light-4 {
  background-color: var(--gray-light-4);
}

.bg-gray-light-5 {
  background-color: var(--gray-light-5);
}

.bg-white {
  background-color: var(--white);
}

.bg-yellow-5 {
  background-color: var(--yellow-5);
}

.bg-red-60 {
  background-color: var(--red-60);
}

/* Core */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.top-z-index {
  z-index: 9999;
}

.flex {
  display: flex;
}

.i-flex {
  display: inline-flex;
}

.block {
  display: block;
}

.i-block {
  display: inline-block;
}

.align-item-baseline {
  align-items: baseline;
}

.align-item-center {
  align-items: center;
}

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

.align-item-start {
  align-items: flex-start;
}

.align-stretch {
  align-self: stretch;
}

.justify-content-sa {
  justify-content: space-around;
}

.justify-content-bw {
  justify-content: space-between;
}

.justify-content-ce {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-se {
  justify-content: space-evenly;
}

.flex-033 {
  flex: 0 0 33.333333%;
}

.flex1 {
  flex: 1 1 auto;
}

.flex0 {
  flex: 0 0 auto;
}

.flex-shrink0 {
  flex-shrink: 0;
}

.flex-grow0 {
  flex-grow: 0;
}

.flex-grow1 {
  flex-grow: 1;
}

.flex-basis0 {
  flex-basis: 0;
}

.flex-wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
}

.gar-min-content {
  grid-auto-rows: min-content;
}

.gar-max-content {
  grid-auto-rows: max-content;
}

.gac-min-content {
  grid-auto-columns: min-content;
}

.gac-max-content {
  grid-auto-columns: max-content;
}

.sticky {
  position: sticky;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.widthmaxc {
  width: max-content;
}

.width100 {
  width: 100%;
}

.width0 {
  width: 0;
}

.width-1r {
  width: 1rem;
}

.width-2r {
  width: 2rem;
}

.width-15r {
  width: 15rem;
}

.width-15vw {
  width: 15vw;
}

.width-50 {
  width: 50%;
}

.width-75 {
  width: 75%;
}

.width-25 {
  width: 25%;
}

.height0 {
  height: 0;
}

.height100 {
  height: 100%;
}

.height-1rem {
  height: 1rem;
}

.height-1-5rem {
  height: 1.5rem;
}

.height-2rem {
  height: 2rem;
}

.maxheight-20 {
  max-height: 20rem;
}

.maxheight-18 {
  max-height: 18rem;
}

.zindexneg1 {
  z-index: -1;
}

.zindex1 {
  z-index: 1;
}

.zindex2 {
  z-index: 2;
}

.zindex3 {
  z-index: 3;
}

.zindex4 {
  z-index: 4;
}

.zindex5 {
  z-index: 5;
}

.zindex6 {
  z-index: 6;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.pad-0 {
  padding: 0;
}

.pad-04r {
  padding: 0.4rem;
}

.pad-025r {
  padding: 0.25rem;
}

.pad-05r {
  padding: 0.5rem;
}

.pad-075r {
  padding: 0.75rem;
}

.pad-1r {
  padding: 1rem;
}

.pad-1-5r {
  padding: 1.5rem;
}

.pad-2r {
  padding: 2rem;
}

.pad-3r {
  padding: 3rem;
}

.pad-top-0 {
  padding-top: 0;
}

.pad-left-0 {
  padding-left: 0;
}

.pad-right-0 {
  padding-right: 0;
}

.pad-top-1r {
  padding-top: 1rem;
}

.pad-top-1-5r {
  padding-top: 1.5rem;
}

.pad-top-05r {
  padding-top: 0.5rem;
}

.pad-bottom-0 {
  padding-bottom: 0;
}

.pad-bottom-05r {
  padding-bottom: 0.5rem;
}

/* padding top and bottom */
.pad-tb-05r {
  padding: 0.5rem 0;
}

.pad-right-05r {
  padding-right: 0.5rem;
}

.pad-right-1r {
  padding-right: 1rem;
}

.pad-right-2r {
  padding-right: 2rem;
}

.pad-right-3r {
  padding-right: 3rem;
}

.pad-bottom-1r {
  padding-bottom: 1rem;
}

.pad-bottom-1-5r {
  padding-bottom: 1.5rem;
}

.pad-left-05r {
  padding-left: 0.5rem;
}

.pad-left-1r {
  padding-left: 1rem;
}

.pad-left-1-05r {
  padding-left: 1.5rem;
}

.pad-left-2r {
  padding-left: 2rem;
}

.pad-left-3r {
  padding-left: 3rem;
}

.pad-03r {
  padding: 0.3rem;
}

.mar-left-neg-05r {
  margin-left: -0.5rem;
}

.mar-right-neg-05r {
  margin-right: -0.5rem;
}

.mar-top-neg-05r {
  margin-top: -0.5rem;
}

.mar-left-auto {
  margin-left: auto;
}

.mar-left-05r {
  margin-left: 0.5rem;
}

.mar-left-1-05r {
  margin-left: 1.5rem;
}

.mar-left-2r {
  margin-left: 2rem;
}

.mar-left-02r {
  margin-left: 0.2rem;
}

.mar-top-rev-01r {
  margin-top: -0.1rem;
}

.mar-right-05r {
  margin-right: 0.5rem;
}

.mar-right-01r {
  margin-right: 0.1rem;
}

.mar-right-02r {
  margin-right: 0.2rem;
}

.mar-right-0 {
  margin-right: 0;
}

.mar-right-auto {
  margin-right: auto;
}

.mar-left-0 {
  margin-right: 0;
}

.mar-right-025r {
  margin-right: 0.5rem;
}

.mar-bottom-05r {
  margin-bottom: 0.5rem;
}

.mar-top-1r {
  margin-top: 1rem;
}

.mar-top-1-5r {
  margin-top: 1.5rem;
}

.mar-top-0 {
  margin-top: 0;
}

.mar-top-05r {
  margin-top: 0.5rem;
}

.mar-top-025r {
  margin-top: 0.25rem;
}

.mar-top-03r {
  margin-top: 0.3rem;
}

.mar-top-3r {
  margin-top: 3rem;
}

.mar-top-2-025r {
  margin-top: 2.25rem;
}

.mar-left-1r {
  margin-left: 1rem;
}

.mar-right-1r {
  margin-right: 1rem;
}

.mar-bottom-1r {
  margin-bottom: 1rem;
}

.mar-0-auto {
  margin: 0 auto;
}

.mar-0 {
  margin: 0;
}

.mar-05r {
  margin: 0.5rem;
}

.mar-1r {
  margin: 1rem;
}

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

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

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

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.italics {
  font-style: italic;
}

.bdr-bottom {
  border-bottom: 1px solid var(--gray-light-2);
}

.bdr-bottom-gray-4 {
  border-bottom: 1px solid var(--gray-light-4);
}

.bdr-bottom-gray-3 {
  border-bottom: 1px solid var(--gray-light-3);
}

.bdr-top {
  border-top: 1px solid var(--gray-light-2);
}

.bdr-right {
  border-right: 1px solid #ddd;
}

.va-top {
  vertical-align: top;
}

.user-select {
  user-select: none;
}

.ft-sz-14 {
  font-size: 0.875rem;
}

.ft-sz-16 {
  font-size: 1rem;
}

.ft-sz-12 {
  font-size: 0.75rem;
}

.ft-sz-10 {
  font-size: 0.625rem;
}

.ft-sz-20 {
  font-size: 1.25rem;
}

.ft-sz-24 {
  font-size: 1.5rem;
}

.ft-sz-32 {
  font-size: 2rem;
}

.ff-regular {
  font-family: var(--regular);
}

.ff-bold {
  font-family: var(--bold);
}

.bold {
  font-weight: bold;
}

.lh1 {
  line-height: 1;
}

.lh1_5 {
  line-height: 1.5;
}

.lh2 {
  line-height: 2;
}

.pen {
  pointer-events: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.bdr-rad4 {
  border-radius: 0.25rem;
}

.bdr-rad8 {
  border-radius: 0.5rem;
}

.bdr-rad-1r {
  border-radius: 1rem;
}

.bdr-none {
  border: none;
}

.bdr-transparent {
  border: 0.0625rem solid transparent;
}

.bdr-gray {
  border: 0.0625rem solid var(--gray-light-2);
}

.bdr-primary {
  border: 0.0625rem solid var(--primary-base);
}

.bdr-info {
  border: 0.0625rem solid var(--info-base);
}

.bdr-success {
  border: 0.0625rem solid var(--success-base);
}

.bdr-warning {
  border: 0.0625rem solid var(--warning-base);
}

.bdr-danger {
  border: 0.0625rem solid var(--danger-base);
}

.shadow {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.box-shadow-none-onfocus:focus {
  box-shadow: none;
}

.outline-none {
  outline: none;
}

.trans-trans03 {
  transition: transform 0.3s ease-in;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.display-none {
  display: none;
}

.display-inline {
  display: inline-flex;
}

.space-pre {
  white-space: pre;
}

.opacity0 {
  opacity: 0;
}

.opacity1 {
  opacity: 1;
}

.opacity05 {
  filter: opacity(0.5);
}

.opacity02 {
  filter: opacity(0.2);
}

.zi-neg-9999 {
  z-index: -9999;
}

.top0 {
  top: 0;
}

.bottom0 {
  bottom: 0;
}

.left0 {
  left: 0;
}

.right0 {
  right: 0;
}

.right1 {
  right: 1rem;
}

.top50 {
  top: 50%;
}

.top100 {
  top: 100%;
}

.left50 {
  left: 50%;
}

.left-7r {
  left: 7rem;
}

/* modal transition effects */
.slideup-appear {
  animation: slideup 3s;
  animation-delay: 5s;
}

.appear-appear {
  opacity: 0.01;
}

.appear-appear.appear-appear-active {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.translate110 {
  transform: translateX(110%);
}

.bg-transparent {
  background: transparent;
}

.ft-wt-bold {
  font-weight: bold;
}

.cur-default {
  cursor: default;
}

.cur-pointer {
  cursor: pointer;
}

.cur-not-allowed {
  cursor: not-allowed;
}

.bdr-blue {
  border: 0.0625rem solid var(--blue);
}

.bdr-mint {
  border: 0.0625rem solid var(--mint);
}

.bdr-green {
  border: 0.0625rem solid var(--green);
}

.bdr-yellow {
  border: 0.0625rem solid var(--yellow);
}

.bdr-red {
  border: 0.0625rem solid var(--red);
}

.overlay {
  background: rgba(0, 0, 0, 0.4);
}

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

.color-F0677E {
  background: #f0677e;
}

.color-643ABD {
  background: #643abd;
}

.color-00A3B5 {
  background: #00a3b5;
}

.color-CED2ED {
  background: #ced2ed;
}

.color-FFC14F {
  background: #ffc14f;
}

.color-9B0000 {
  background: #9b0000;
}

.color-D87213 {
  background: #d87213;
}

.color-E39421 {
  background: #e39421;
}

.color-9AC383 {
  background: #9ac383;
}

.color-007D6C {
  background: #007d6c;
}

.color-F72616 {
  background: #f72616;
}

.color-FFAC38 {
  background: #ffac38;
}

.color-1DC452 {
  background: #1dc452;
}

.color-737678 {
  background: #737678;
}

.color-008558 {
  background: #008558;
}

.border-color-F0677E {
  border-color: #f0677e;
}

.border-color-643ABD {
  border-color: #643abd;
}

.border-color-00A3B5 {
  border-color: #00a3b5;
}

.border-color-CED2ED {
  border-color: #ced2ed;
}

.border-color-FFC14F {
  border-color: #ffc14f;
}

.border-color-9B0000 {
  border-color: #9b0000;
}

.border-color-D87213 {
  border-color: #d87213;
}

.border-color-E39421 {
  border-color: #e39421;
}

.border-color-9AC383 {
  border-color: #9ac383;
}

.border-color-007D6C {
  border-color: #007d6c;
}

.border-color-F72616 {
  border-color: #f72616;
}

.border-color-FFAC38 {
  border-color: #ffac38;
}

.border-color-1DC452 {
  border-color: #1dc452;
}

.border-color-737678 {
  border-color: #737678;
}

.height200 {
  height: 200px;
}

.border-radius-025r {
  border-radius: 0.25rem;
}

.width-8r {
  max-width: 8rem;
}

.width-14r {
  max-width: 14rem;
}

.overflow-wrap-break-word {
  overflow-wrap: break-word;
}
/* stylelint-enable */