/* Reset and Normalize ----------------------*/

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Normalize CSS */
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Nunito', 'Nunito Sans', Helvetica, Arial, sans-serif;
}


/* Typography ----------------------*/

/* Font Sizes */
.tw-fs-12 { font-size: 11px; line-height: 16px; }
.tw-fs-14 { font-size: 13px; line-height: 24px; }
.tw-fs-16 { font-size: 14px; line-height: 24px; }
.tw-fs-18 { font-size: 16px; line-height: 24px; }
.tw-fs-20 { font-size: 20px; line-height: 24px; }
.tw-fs-26 { font-size: 22px; line-height: 48px; }

@media screen and (min-width: 992px) {
  /* Font Sizes */
  .tw-fs-12 { font-size: 12px; line-height: 16px; }
  .tw-fs-14 { font-size: 14px; line-height: 24px; }
  .tw-fs-16 { font-size: 16px; line-height: 24px; }
  .tw-fs-18 { font-size: 18px; line-height: 24px; }
  .tw-fs-20 { font-size: 20px; line-height: 24px; }
  .tw-fs-26 { font-size: 22px; line-height: 48px; }
}

/* Font Weights */
.tw-fw-normal { font-weight: 400; }
.tw-fw-bold { font-weight: 700; }

/* Text Alignments */
.tw-text-left { text-align: left; }
.tw-text-center { text-align: center; }
.tw-text-right { text-align: right; }


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

.tw-m-0 {
  margin: 0;
}
.tw-mt-0 {
  margin-top: 0;
}
.tw-mb-4 {
  margin-bottom: 4px;
}
.tw-mb-8 {
  margin-bottom: 8px;
}
.tw-mb-16 {
  margin-bottom: 16px;
}
.tw-mb-24 {
  margin-bottom: 24px;
}
.tw-column-30 {
  width: 30%;
}

/* Margin */
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }

/* Padding */
.p-0 { padding: 0; }
.pt-1 { padding-top: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }


/* Display ----------------------*/

Display types
Visibility utilities

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }


/* Flexbox ----------------------*/

Flex container utilities
Flex item utilities

/* Flex Container */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }

/* Flex Items */
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }


.tw-flex {
  display: flex;
}
.tw-flex-column {
  flex-direction: column;
}
.tw-flex-center {
  justify-content: center;
  align-items: center;
}
.tw-text-center {
  text-align: center;
  justify-content: center;
}
.tw-text-neutral {
  color: var(--tw-color-5);
}



/* Grid ----------------------*/
Grid container utilities
Grid item utilities

/* Grid Container */
.d-grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Grid Items */
.grid-col-span-1 { grid-column: span 1; }
.grid-col-span-2 { grid-column: span 2; }



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

Background colors
Background images


/* Background Colors */
.bg-primary { background-color: #007bff; }
.bg-secondary { background-color: #6c757d; }



/* Borders ----------------------*/

/* Border Styles */
.border { border: 1px solid #dee2e6; }
.border-top { border-top: 1px solid #dee2e6; }
.border-bottom { border-bottom: 1px solid #dee2e6; }

/* Border Radius */
.rounded { border-radius: 0.25rem; }
.rounded-circle { border-radius: 50%; }


/* Positioning ----------------------*/

/* Position */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }

/* Z-index */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }


/* Sizing ----------------------*/

/* Width */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* Height */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

/* Miscellaneous ----------------------*/

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }


/* Cards ----------------------*/


.tw-card-outline-border {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--tw-color-7);
  border-radius: 16px;
  padding: 24px;
}


/* Horizontal Rules ----------------------*/

.tw-hr-1 {
  border-radius: 4px;
  height: 1px;
  background: var(--tw-color-7);
  display: block;
  width: 100%;
  border: none;
  margin: 8px 0;
}
.tw-hr-2 {
  border-radius: 4px;
  height: 2px;
  background: var(--tw-color-7);
  display: block;
  width: 100%;
  border: none;
  margin: 8px 0;
}



/* LAYOUT ----------------------*/
#main {
  max-width: 1440px;
  margin: auto;
  background-color: #F1F5F7;
  border-radius: 16px;
  overflow: hidden;
}
.page-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 24px;
  box-sizing: border-box;

  .left {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 32px;
  }
  .right {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 32px;
  }

  h1 {
    font-size: 32px;
    line-height: 1.2em;
    padding: 0;
    margin: 0;

  }
  .form-control {
    width: auto;
  }

}

.grid {
  display: flex;
  padding: 12px 12px 0 12px;
}

.grid-col {
  flex-grow: 1;
}

/* 2 columns by default, hide columns 2 & 3 */
.grid-col:nth-child(2), .grid-col:nth-child(3) {
  display: none;
}

/* 3 columns at medium size */
@media (min-width: 768px) {
  .grid-col:nth-child(2) {
    display: block;
  }

  /* show column 2 */
}
/* 4 columns at large size */
@media (min-width: 1080px) {
  .grid-col {
    min-width: 30%;
    max-width: 50%;
  }
  .grid-col:nth-child(3) {
    display: block;
  }

  /* show column 3 */
}


/* ICONS ----------------------*/

.icon-frame {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-rounded-frame {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-pink {
  background-color: var(--tw-ref-color-pink15);
  color: var(--tw-ref-color-pink65);
}
.icon-orange {
  background-color: var(--tw-ref-color-orange15);
  color: var(--tw-ref-color-orange65);
}
.icon-yellow {
  background-color: var(--tw-ref-color-yellow15);
  color: var(--tw-ref-color-yellow65);
}
.icon-green {
  background-color: var(--tw-ref-color-green15);
  color: var(--tw-ref-color-green65);
}
.icon-blue {
  background-color: var(--tw-ref-color-blue15);
  color: var(--tw-ref-color-blue65);
}
.icon-azure {
  background-color: var(--tw-ref-color-azure15);
  color: var(--tw-ref-color-azure65);
}
.icon-fuchsia {
  background-color: var(--tw-ref-color-fuchsia15);
  color: var(--tw-ref-color-fuchsia65);
}
.icon-rose {
  background-color: var(--tw-ref-color-rose15);
  color: var(--tw-ref-color-rose65);
}


.icon-missing-bg {
  background-color: var(--tw-ref-color-error15);
  color: var(--tw-ref-color-error50);
}
.icon-neutral-border {
  border: 1px solid var(--tw-ref-color-brand-neutral)
}

.icon-pink-bg {
  color: var(--tw-ref-color-pink15);
  background-color: var(--tw-ref-color-pink50);
}
.icon-orange-bg {
  color: var(--tw-ref-color-orange15);
  background-color: var(--tw-ref-color-orange50);
}
.icon-yellow-bg {
  color: var(--tw-ref-color-yellow15);
  background-color: var(--tw-ref-color-yellow65);
}
.icon-green-bg {
  color: var(--tw-ref-color-green15);
  background-color: var(--tw-ref-color-green50);
}
.icon-blue-bg {
  color: var(--tw-ref-color-blue15);
  background-color: var(--tw-ref-color-blue50);
}
.icon-azure-bg {
  color: var(--tw-ref-color-azure15);
  background-color: var(--tw-ref-color-azure50);
}
.icon-fuchsia-bg {
  color: var(--tw-ref-color-fuchsia15);
  background-color: var(--tw-ref-color-fuchsia50);
}
.icon-rose-bg {
  color: var(--tw-ref-color-rose15);
  background-color: var(--tw-ref-color-rose50);
}

/* WIDGETS ----------------------*/
.w-widget {
  background-color: white;
  border-radius: 16px;
  margin: 12px 12px 24px 12px;
  padding: 24px;

  .header {
    padding-bottom: 24px;
    h2 {
      font-weight: 700;
      font-size: 20px;
      padding: 0;
      margin: 0;
    }
  }
  .body {

    .row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      width: 100%;

      .column {
        display: flex;
        flex-direction: column;
        &.w-50 {
          width: 50%;
        }
      }

    }
    .big-number {
      font-size: 40px;
      font-family: 'Nunito';
      font-weight: 700;
    }
    .small-title {
      color: var(--tw-ref-color-brand-neutral);
    }

  }
  .footer {
    border-top: #F1F5F7 2px solid;
    a {
      width: 100%;
      display: flex;
      padding: 24px 0;
      margin-bottom: -24px;
      text-decoration: none;
      color: #809FB8;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: 2px;
      transition: all ease-out 350ms;
      &:hover {
        color: #2280BF;
      }
      [class^="wi-"],
      [class*=" wi-"] {
        margin-left: 32px;
        transition: all ease-out 350ms;
      }
      &:hover [class^="wi-"],
      &:hover [class*=" wi-"] {
        margin-left: 48px;
      }
    }
  }
}

.link-list .body {
    display: flex;
    flex-direction: column;
    gap: 16px;

    a.btn-icon {
    text-decoration: none;
    border: 1px solid var(--tw-ref-color-azure50);
    display: flex;
    border-radius: 16px;
    padding: 16px 24px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all ease-in 200ms;

    h3 {
      font-size: 16px;
      font-weight: 600;
      padding: 0;
      margin: 0;
    }

    &:hover {
      background-color: var(--tw-ref-color-azure50);
      color: white;
    }
  }
}


/* WIDGET: Calendar List ----------------------*/
.event-item {
  background-color: var(--tw-ref-color-pink15);
  padding: 16px 16px 16px 32px;
  position: relative;
  border-radius: 16px;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 24px;
  }
  &:after {
    content: "";
    display: block;
    width: 6px;
    height: calc(100% - 32px);
    border-radius: 4px;
    background-color: var(--tw-ref-color-pink50);
    position: absolute;
    left: 16px;
    top: 16px;
  }
  .event-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 4px;
  }
  .event-details {
    color: var(--tw-ref-color-pink65);
    font-size: 14px;
  }
}


/* WIDGET: Notes ----------------------*/
.note-item {
  background-color: var(--tw-ref-color-azure15);
  padding: 16px 16px 16px 32px;
  position: relative;
  border-radius: 16px;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 24px;
  }
  &:after {
    content: "";
    display: block;
    width: 6px;
    height: calc(100% - 32px);
    border-radius: 4px;
    background-color: var(--tw-ref-color-azure50);
    position: absolute;
    left: 16px;
    top: 16px;
  }
  .note-details {
    color: var(--tw-ref-color-azure65);
    font-size: 14px;
    margin-bottom: 12px;
  }
  .note-title {
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 8px;
  }
  .note-content {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 4px;
  }
}

/* WIDGET: Document List ----------------------*/
.document-list .body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.document-item {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--tw-ref-color-brand-neutral-light1);
  padding: 16px 0;
  text-decoration: none;
  transition: all ease-out 300ms;
  transform-origin: left;
  color: var(--tw-ref-color-azure50);

  &:hover {
    color: var(--tw-ref-color-azure65);
    transform: scale(1.025);
    transition: all ease-in-out 200ms;
  }
}
.document-name {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin: 0;
}
.document-list .footer {
  border: none;
}

/* WIDGET: Progress Tracker ----------------------*/

.progress-tracker .body {
  .completed {
    flex-wrap: wrap;
  }
  .incompleted {
    border-top: #F1F5F7 2px solid;
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    margin-bottom: 0;
    h3 {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
        margin: 0;
        margin-bottom: 8px;
        text-align: left;
        width: 100%;
    }
    .progress-list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      gap: 16px;
      padding: 8px 0;
    }
    .icon-frame {
      width: 40px;
      height: 40px;
    }
    h4 {
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        margin: 0;
  
    }
  }
}


/* WIDGET: Bonus ----------------------*/

.bonus .body {
  .flex-column {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      
      .status {
      padding: 8px 0;
      width: 70%;
      h3 {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
        margin: 0;
        margin-bottom: 8px;
        text-align: left;
      }
    }
  }
}

/* WIDGET: Color Cards ----------------------*/

.color-card {
  text-decoration: none;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: white;
  transition: all ease-out 300ms;
  .total {
    display: flex;
    gap: 24px;
  
    .info {
      font-weight: 700;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .title {
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 2px;
      }
      .number {
        font-size: 36px;
        font-family: 'Nunito';
      }
    }
  }
  .earning-list {

    .earning-item {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--tw-ref-color-blue50);
    }
    
  }
  &.bg-green:hover {
    background-color: var(--tw-ref-color-green65) !important;
  }
  &.bg-blue:hover {
    background-color: var(--tw-ref-color-blue65) !important;
  }
  &.bg-azure:hover {
    background-color: var(--tw-ref-color-azure65) !important;
  }
}

/* WIDGET: Circular Chart ----------------------*/

.circularChart {
  max-width: 240px;
  margin-bottom: 16px;
  margin-top: 8px;
}
.circularChart svg {
    overflow: visible;
}
.circularChart path.mainline {
  stroke-width: 6;
}
.circularChart path.baseline {
  stroke-width: 2;
  stroke: #f1f2f3;
}
.circularChart .ldBar-label {
  font-size: 40px;
  font-family: 'Nunito';
  font-weight: 700;
}
.circularChart .ldBar-label:after {
  content: "%";
  display: inline;
  font-size: 22px;
  position: absolute;
  top: 4px;
  left: 100%;
}

/* WIDGET: Curly Bar Chart ----------------------*/

.curly-bar {
  margin-bottom: 32px;
  .ldBar-label {
    margin-top: -20px;
    text-align: right;
    padding-right: 20px;
    color: var(--tw-ref-color-brand-neutral);
    font-weight: 600;
    &::after {
      content: " / 100%";
    }
  }
}

/* WIDGET: Applications ----------------------*/

.line-bar {
  min-width:100%; 
  height:auto !important; 
  stroke-linecap: round;
  width: auto !important;
  margin-left: -16px;
  margin-right: -16px;
  path.mainline {
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  path.baseline {
    stroke: white;
    stroke-width: 2.5;
  }
  .ldBar-label {
    margin-top: -8px;
    text-align: right;
    padding-right: 16px;
    color: var(--tw-ref-color-brand-neutral);
    font-weight: 600;
    font-size: 14px;
    &::after {
      content: " / 100%";
    }
  }
}
#app22.line-bar {
  path.mainline {
    stroke: var(--tw-ref-color-pink50);
  }
  .ldBar-label {
    color: var(--tw-ref-color-pink65);
  }
}
#app23.line-bar {
  path.mainline {
    stroke: var(--tw-ref-color-blue50);
  }
  .ldBar-label {
    color: var(--tw-ref-color-blue65);
  }
}
#app5.line-bar {
  path.mainline {
    stroke: var(--tw-ref-color-azure50);
  }
}
.w-widget.applications {
  a.inner-card {
    color: var(--tw-ref-color-black);
    display: block;
    padding: 16px;
    border-radius: 16px;
    text-decoration: none;
    margin-bottom: 16px;
    border: 2px solid transparent;
    &:hover {
      border: 2px solid var(--tw-ref-color-azure50);
    }
    h3 {
      font-size: 18px;
    }
  }
}

/* WIDGET: Staff Roster ----------------------*/
.staff-list {

  .staff-item {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--tw-ref-color-brand-neutral-light1)
  }
  .staff-item:last-child {
    border: none;
  }
}
/* WIDGET: Item List with icons ----------------------*/

.item-list-icons {
    width: 100%;
    border-top: #F1F5F7 2px solid;
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    margin-bottom: 0;
    h3 {
        font-size: 18px;
        line-height: 22px;
        font-weight: 700;
        margin: 0;
        margin-bottom: 8px;
        text-align: left;
        width: 100%;
    }
    .progress-list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      gap: 16px;
      padding: 8px 0;
    }
    .icon-frame {
      display: flex;
      width: 32px;
      height: 32px;
    }
    h4 {
        width: calc(100% - 48px);
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
        margin: 0;
  
    }
  }

/* SECTIONS ----------------------*/
section.icons {
  background: #fafafa;
  padding: 60px 2rem;
  box-sizing: border-box;
  width: 100%;
}
section.icons .wrap {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 5px;
  display: block;
}
section.chart {
  padding: 0;
}
section.chart .wrap {
  margin: 0 auto;
  max-width: 660px;
}
.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}
.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
svg#keys {
  z-index: 1;
}
svg#spiral-chart {
  clip-path: circle(330px at center);
  z-index: 2;
}


/* PATHS ----------------------*/
.path-group {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: transparent;
  transition: all ease 450ms;
}
.path-group:hover  {
  cursor: pointer;
  transition: all ease 450ms;
}
/*
.path-group .s-t  {
  stroke-width: 4px;
  stroke: transparent;
  fill: none;
  transition: all ease 450ms;
}

.path-group:hover .s-t  {
  stroke-width: 4px;
  stroke: white;
  transition: all ease 450ms;
}
*/


/* STEPS ----------------------*/
[id^=step-] {
  .s-l {
    fill: #D9D9D9;
  }
  .s-d{
    fill: #CCCCCC;
  } 
}

#step-1.active {
  .s-l {
    fill: var(--tw-ref-color-pink50);
  }
  .s-d{
    fill: var(--tw-ref-color-pink65);
  } 
}
#step-2.active {
  .s-l {
    fill: var(--tw-ref-color-orange50);
  }
  .s-d{
    fill: var(--tw-ref-color-orange65);
  }
}
#step-3.active {
  .s-l {
    fill: var(--tw-ref-color-yellow50);
  }
  .s-d{
    fill: var(--tw-ref-color-yellow65);
  }
}
#step-4.active {
  .s-l {
    fill: var(--tw-ref-color-green50);
  }
  .s-d{
    fill: var(--tw-ref-color-green65);
  }
}
#step-5.active {
  .s-l {
    fill: var(--tw-ref-color-blue50);
  }
  .s-d{
    fill: var(--tw-ref-color-blue65);
  }
}
#step-6.active {
  .s-l {
    fill: var(--tw-ref-color-azure50);
  }
  .s-d{
    fill: var(--tw-ref-color-azure65);
  }
}
#step-7.active {
  .s-l {
    fill: var(--tw-ref-color-fuchsia50);
  }
  .s-d{
    fill: var(--tw-ref-color-fuchsia65);
  }
}







/* ICONS ----------------------*/
[id^=icon-] {
  transition: all ease 450ms;
}
[id^=icon-]:hover {
  cursor: pointer;
  transition: all ease 450ms;
}
[id^=icon-] .border .left {
  fill: white;
  stroke: #D9D9D9;
  stroke-width:12px;
}
[id^=icon-] .border .right {
  fill: white;
  stroke: #CCCCCC;
  stroke-width:12px;
}
[id^=icon-] .symbol {
  fill: #B2B2B2;
}
[id^=icon-].active {
  .symbol {
    fill: #000000;
  }
}

#icon-1.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-pink50);
    }
    .right {
      stroke: var(--tw-ref-color-pink65);
    }
  }
}
#icon-2.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-orange50);
    }
    .right {
      stroke: var(--tw-ref-color-orange65);
    }
  }
}
#icon-3.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-yellow50);
    }
    .right {
      stroke: var(--tw-ref-color-yellow65);
    }
  }
}
#icon-4.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-green50);
    }.right {
      stroke: var(--tw-ref-color-green65);
    }
  }
}
#icon-5.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-blue50);
    }.right {
      stroke: var(--tw-ref-color-blue65);
    }
  }
}
#icon-6.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-azure50);
    }
    .right {
      stroke: var(--tw-ref-color-azure65);
    }
  }
}
#icon-7.active {
  .border {
    .left {
      stroke: var(--tw-ref-color-fuchsia50);
    }
    .right {
      stroke: var(--tw-ref-color-fuchsia65);
    }
  }
}

/* CALLOUTS ----------------------*/
.callout {
  opacity: 0;
  /*display: none;*/
  position: absolute !important;
  transform: translate(-50%, calc(-100% - 30px));
  z-index: 99;

  top: -9999px;

  padding: 1rem 1.5rem;
  width: 280px;
  background: white;
  position: relative;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  border-width: 2px;
  border-style: solid;
  border-color: #ccc;

  transition: opacity 300ms;
  
}

.callout-content {
  display: flex;
  align-items: center;
}
.callout-number {
  font-size: 38px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  text-align: center;
  margin-right: 1rem;
  border-right: #ccc 2px solid;
  height: 100%;
  padding: 30px 20px 30px 0;
  color: #ccc;
}
.callout-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}
.callout-text {
  font-size: 14px;
  line-height: 20px;
}
.callout-text p:first-child {
  margin-top: 0;
}
.callout-text p:last-child {
  margin-bottom: 0;
  margin: 0;
}

.svg-triangle {
  position: absolute;
  transform: translateX(-50%);
  top: calc(100% - 1px);
  left: 50%;
}
.svg-triangle .t-line {
  stroke: #ccc;
  stroke-width: 2px;
  fill: none;
}
.svg-triangle .t-fill {
  fill: white;
  stroke: none;
}

#step1-ca.active {
  background-color: var(--tw-ref-color-pink15);
  border-color: var(--tw-ref-color-pink50);
  
  .callout-number {
    color: var(--tw-ref-color-pink65);
    border-color: var(--tw-ref-color-pink50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-pink50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-pink15);
  }
}

#step2-ca.active {
  background-color: var(--tw-ref-color-orange15);
  border-color: var(--tw-ref-color-orange50);
  .callout-number {
    color: var(--tw-ref-color-orange65);
    border-color: var(--tw-ref-color-orange50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-orange50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-orange15);
  }
}

#step3-ca.active {
  background-color: var(--tw-ref-color-yellow15);
  border-color: var(--tw-ref-color-yellow50);
  .callout-number {
    color: var(--tw-ref-color-yellow65);
    border-color: var(--tw-ref-color-yellow50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-yellow50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-yellow15);
  }
}

#step4-ca.active {
  background-color: var(--tw-ref-color-green15);
  border-color: var(--tw-ref-color-green50);
  .callout-number {
    color: var(--tw-ref-color-green65);
    border-color: var(--tw-ref-color-green50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-green50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-green15);
  }
}

#step5-ca.active {
  background-color: var(--tw-ref-color-blue15);
  border-color: var(--tw-ref-color-blue50);
  .callout-number {
    color: var(--tw-ref-color-blue65);
    border-color: var(--tw-ref-color-blue50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-blue50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-blue15);
  }
}

#step6-ca.active {
  background-color: var(--tw-ref-color-azure15);
  border-color: var(--tw-ref-color-azure50);
  .callout-number {
    color: var(--tw-ref-color-azure65);
    border-color: var(--tw-ref-color-azure50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-azure50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-azure15);
  }
}

#step7-ca.active {
  background-color: var(--tw-ref-color-fuchsia15);
  border-color: var(--tw-ref-color-fuchsia50);
  .callout-number {
    color: var(--tw-ref-color-fuchsia65);
    border-color: var(--tw-ref-color-fuchsia50);
  }
  .svg-triangle .t-line {
    stroke: var(--tw-ref-color-fuchsia50);
  }
  .svg-triangle .t-fill {
    fill: var(--tw-ref-color-fuchsia15);
  }
}


/* MILESTONES ----------------------*/
#milestone-1 {
  position: absolute;
  top: 524px;
  left: 285px;
  z-index: 3;
  width: 90px;
  height: 90px;
}
#milestone1-ca.active {
  background-color: white;
  border-color: black;
  .callout-number {
    color: black;
    border-color: black;
  }
  .svg-triangle .t-line {
    stroke: black;
  }
  .svg-triangle .t-fill {
    fill: white;
  }
}


/* ANIMATION ----------------------*/


@keyframes stretch {
  from {
    transform: scale(.9);
  }
  to {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#keys  {
  animation-name: stretch;
  animation-duration: 600ms;
  animation-timing-function: ease-in;
  animation-delay: 1000ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
#spiral-chart {
  animation-name: stretch;
  animation-duration: 1200ms;
  animation-timing-function: ease-in;
  animation-delay: 200ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

#spiral-chart {
  #step-1 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-2 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 300ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-3 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 400ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-4 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-5 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 600ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-6 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 700ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #step-7 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 800ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
}

#keys {
  #icon-1 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1000ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-2 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1100ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-3 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-4 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1300ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-5 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1400ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-6 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1500ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
  #icon-7 {
    animation-name: fadeIn;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
    animation-delay: 1600ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
  }
}

#milestone-1 {
  animation-name: fadeIn;
  animation-duration: 400ms;
  animation-timing-function: ease-in;
  animation-delay: 1700ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}


/* FORMS ----------------------*/
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.form-icon {
  position: relative;
  i {
     position: absolute;
     top: 50%;
     color: #333;
     transform: translateY(-50%);
     pointer-events: none;
  }
  i~.form-control {
     appearance: none;
  }
  .left {
     left: 16px;
  }
  .right {
     right: 16px;
  }
  .left~.form-control {
     padding-left: 55px;
  }
  .right~.form-control {
     padding-right: 55px;
     &.is-valid,
     &.is-invalid {
        padding-right: 95px;
        background-position: center right calc(55px);
     }
  }
}

.inner-card {
  padding: 16px;
  border-radius: 16px;
}





/* PROGRESS TRACKER ----------------------*/

.progress-tracker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .w-widget {
    position: relative;
    padding: 10px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
    text-align: center;
    z-index: 1;

    
    margin: 12px;
    width: 100%;
    flex-grow: 1;
    max-width: 480px;
    background-color: #ddd;
    position: relative;
    z-index: 2;
    &:first-child {
      margin-top: 24px;
    }
    &:last-child {
      margin-bottom: 24px;
    }
    &:nth-child(odd) .bracket-left:before {
        position: absolute;
        top: 50%;
        left: -20%;
        height: 16px;
        width: 20%;
        background-color: var(--tw-ref-color-azure50);
        display: block;
        content: "";
        border-radius: 16px 0 0 0;
        z-index: 0;
    }
    &:nth-child(odd) .bracket-left:after {
        position: absolute;
        top: 50%;
        left: -20%;
        height: calc(50% + 12px);
        width: 16px;
        background-color: var(--tw-ref-color-azure50);
        display: block;
        content: "";
        border-radius: 16px 0 0 0;
        z-index: 0;
    }
    &:nth-child(even) .bracket-left:after {
      position: absolute;
      bottom: 50%;
      left: -20%;
      height: calc(50% + 12px);
      width: 16px;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 0 0 0;
      z-index: 0;
    }
    &:nth-child(even) .bracket-left:before {
      position: absolute;
      top: 50%;
      left: -20%;
      height: 16px;
      width: 20%;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 0 0 16px;
      z-index: 0;
    }
    &:nth-child(even) .bracket-right:before {
      position: absolute;
      top: 50%;
      right: -20%;
      height: 16px;
      width: 20%;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 16px 0 0;
      z-index: 0;
    }
    &:nth-child(even) .bracket-right:after {
      position: absolute;
      top: 50%;
      right: -20%;
      height: calc(50% + 12px);
      width: 16px;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 16px 0 0;
      z-index: 0;
    }
    &:nth-child(odd) .bracket-right:before {
      position: absolute;
      top: 50%;
      right: -20%;
      height: 16px;
      width: 20%;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 0 16px 0;
      z-index: 0;
    }
    &:nth-child(odd) .bracket-right:after {
      position: absolute;
      bottom: 50%;
      right: -20%;
      height: calc(50% + 12px);
      width: 16px;
      background-color: var(--tw-ref-color-azure50);
      display: block;
      content: "";
      border-radius: 0 0 0 0;
      z-index: 0;
    }

  }
  .w-widget.completed { 
    background-color: #4caf50;
  }
  .w-widget.active { 
    background-color: #2196f3;
  }

}