.onboarding-box{
  border: rem-calc(1) solid;
  border-color: $color-mystic;
  border-radius: 4px;
  padding: rem-calc(20);

  &.panel {
    background-color: $color-white;
    position: relative;
    margin-bottom: rem-calc(10);

    .panel-body{

      p{
        font-size: $font-size-xx-small;
        color: $color-pale-sky;
        font-weight: 400;
      }

      hr{
        margin: rem-calc(20) 0;
        color: $color-athens-gray;
      }
    }
  }

  .panel-heading {
    margin: 0;

    .panel-title {
      margin: 0;


      a[role=button] {
        font-size: $font-size-base;
        color: $color-outer-space;
        font-weight: 600;
        display: block;
        text-decoration: none;
        @extend .clearfix;
      }

      .icon-placeholder{
        @extend .flex-container;
        @extend .align-middle;
        @extend .align-center;

        width: rem-calc(30);
        height: rem-calc(30);
        margin-right: rem-calc(10);
        border: 1px solid $color-athens-gray;
        border-radius: 4px;

        i{
          color: $color-cerulean;
          font-size: rem-calc(22);
        }
      }

      .round-check{
        margin-left: auto;
        font-size: rem-calc(24);
        display: none;

        &.active{
          display: block;
        }

        i{
          color: $color-green-haze;
        }
      }
    }
  }

  .panel-collapse{
    margin-top: rem-calc(10);
  }

  &-completed{
    .panel-heading {
      .panel-title a,
      .panel-title .icon-placeholder i{
        color: $color-gray-chateau;
      }

      .panel-title .round-check{
        display: block;
      }
    }
  }
}

.onboarding-box-illustration {
  background-color: $color-pattens-blue;
  border-color: $color-french-pass;
  background-image: url(../images/onboarding_box_background.svg);
  background-repeat: no-repeat;
  background-position: center left;
  padding-top: rem-calc(10);
  padding-bottom: rem-calc(10);
  position: relative;

  h4{
    font-weight: 600;

    .quick-start-icon{
      max-width: rem-calc(42);
      max-height: rem-calc(49);
      margin-right: rem-calc(15);

      img{
        max-width: rem-calc(42);
        max-height: rem-calc(49);
      }
    }
  }
}