#onboarding-box {
  width: 380px;
  height: 510px;
  background: white;
  position: fixed;
  bottom: 0;
  z-index: 100;
  margin: 20px 20px 50px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  border-radius: 5px; }
  #onboarding-box ul {
    list-style: none;
    margin: 0; }
  #onboarding-box .onboarding-container {
    width: 100%;
    height: 100%; }
    #onboarding-box .onboarding-container .onboarding-items {
      height: calc(100% - 50px);
      width: 100%;
      display: flex;
      flex-direction: column; }
      #onboarding-box .onboarding-container .onboarding-items .onboarding-images,
      #onboarding-box .onboarding-container .onboarding-items .onboarding-texts {
        width: 100%; }
        #onboarding-box .onboarding-container .onboarding-items .onboarding-images ul,
        #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul {
          width: 100%;
          height: 100%;
          position: relative; }
          #onboarding-box .onboarding-container .onboarding-items .onboarding-images ul li,
          #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.2s ease-in-out; }
            #onboarding-box .onboarding-container .onboarding-items .onboarding-images ul li.active,
            #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li.active {
              opacity: 1; }
      #onboarding-box .onboarding-container .onboarding-items .onboarding-images {
        max-height: 240px;
        background: #eeeeee;
        flex-grow: 1; }
      #onboarding-box .onboarding-container .onboarding-items .onboarding-texts {
        min-height: 200px; }
        #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul {
          height: initial; }
          #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li {
            background: white;
            padding: 30px 30px 20px; }
            #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li .onboarding-title {
              font-size: 1.2rem;
              margin-bottom: 10px; }
            #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li .onboarding-description {
              font-size: 0.9rem; }
            #onboarding-box .onboarding-container .onboarding-items .onboarding-texts ul li.active {
              position: relative; }
    #onboarding-box .onboarding-container .onboarding-bottom {
      display: flex;
      flex-direction: row;
      height: 50px;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      padding-bottom: 20px; }
      #onboarding-box .onboarding-container .onboarding-bottom .onboarding-indicator {
        width: 62px;
        height: 100%;
        overflow-x: hidden;
        position: relative; }
        #onboarding-box .onboarding-container .onboarding-bottom .onboarding-indicator ul {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-right: 10px; }
          #onboarding-box .onboarding-container .onboarding-bottom .onboarding-indicator ul li {
            width: 7px;
            height: 7px;
            background: #e0e0e0;
            border-radius: 50%;
            margin-right: 5px;
            transition: all 0.2s ease-in-out; }
            #onboarding-box .onboarding-container .onboarding-bottom .onboarding-indicator ul li.active {
              width: 9px;
              height: 9px;
              background: #64b5f6; }
      #onboarding-box .onboarding-container .onboarding-bottom .onboarding-actions {
        display: flex;
        flex-direction: row;
        align-items: center; }
        #onboarding-box .onboarding-container .onboarding-bottom .onboarding-actions #onboarding-back {
          font-size: 0.9rem;
          color: rgba(0, 0, 0, 0.6);
          margin: 0 20px;
          cursor: pointer;
          user-select: none; }
        #onboarding-box .onboarding-container .onboarding-bottom .onboarding-actions #onboarding-continue {
          width: 130px;
          font-size: 0.9rem;
          padding: 5px 0;
          text-align: center;
          background: #2196f3;
          border-radius: 3px;
          color: white;
          cursor: pointer;
          user-select: none; }

/*# sourceMappingURL=onboarding.css.map */