@import '~scss/variables';

.wrapper {
  padding: 20px;
}

.tabs {
  float: left;
  width: 200px;

  :global(.h6) {
    margin-bottom: 18px;
  }

  .tabItem {
    padding: 7px 10px;
    border-radius: 18px;
    border: solid 1px transparent;
    cursor: pointer;

    &.selected,
    &:hover {
      box-shadow: 0 4px 12px 0 rgba(36, 46, 66, 0.1);
      background-color: $bg-color;
      border-color: #ccd3db;
    }

    & + .tabItem {
      margin-top: 4px;
      font-weight: 500;
      color: $title-color;
    }
  }
}

.content {
  height: 500px;
  margin-left: 220px;
  box-shadow: 1px 0 0 0 #4a5974;
  overflow-y: auto;
}

.footer {
  padding: 12px 20px;
  background-color: $bg-color;
  text-align: right;
}
