.app {
  padding-bottom: 10vw;

  .page {
    padding-bottom: 100px;

    .fs {
      .fs {
        .fs-sticky {
          position: sticky;
          top: 14vw;
          .fs-tabs {
            padding: 10px 20px;
            background-color: #F0F0F0;
            z-index: 999;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;

            .fs-tab {
              display: block;
              padding: 10px;
              text-align: center;
              text-decoration: none;
              color: #33D469;
              border: 1px solid #33D469;
              border-radius: 14px;
              font-size: 3.5vw;
            }

            .fs-tab.fs-tab--active {
              color: #33D469;
              background-color: #fff;
            }
          }

          .search-bar {
            padding: 10px 20px;
            position: relative;
            background-color: #F0F0F0;

            .sheet-search {
              display: block;
              width: 100%;
              padding: .8rem 10% .8rem 10%;
              border: none;
              background: #fff;
              font-size: 0.75rem;
              border-radius: 10px;
              color: #282828;
            }

            &::before {
              content: '';
              position: absolute;
              left: 8%;
              top: 50%;
              transform: translateY(-50%);
              width: 13px;
              height: 13px;
              z-index: 2;
              background: url("/static/training/icons/search.svg") no-repeat center;
            }
          }
        }

        .fs-my-actions {
          margin: 0 20px;

          .base-btn {
            font-size: 4vw;
            margin-bottom: 20px;
          }
        }

        .fs-list {
          margin: 0 20px;

          display: flex;
          flex-direction: column;
          gap: 10px;
          list-style: none;

          .category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 15px 15px 0 rgba(0, 0, 0, 0.09), 0 33px 20px 0 rgba(0, 0, 0, 0.05), 0 59px 24px 0 rgba(0, 0, 0, 0.01), 0 92px 26px 0 rgba(0, 0, 0, 0);

            .category-link {
              max-width: 75%;
              font-size: 3.5vw;
              color: #282828;
              text-decoration: none;

              .fs-text {
                display: flex;
                flex-direction: column;
              }
            }

            .category-checkbox {
              .fs-add-btn {
                background-color: transparent;
                border: 0;
                outline: 0;
              }

              .fs-add-btn.disabled {
                svg {
                  g {
                    rect {
                      fill: #33D469;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


.fs-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: #282828;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.fs-toast.fs-toast--wide {
  width: 80vw;
  text-align: center;
}

.fs-toast.fs-toast--visible {
  opacity: 1;
}

.fs-my-counter {
  text-align: center;
  margin: 6px 0 10px;
  font-size: 4.5vw;
  opacity: 0.75;
}