@import '~scss/variables';

.body {
  padding: 0;
  overflow: hidden;
  max-height: none;
}

.content {
  min-height: 476px;
  max-height: calc(100vh - 222px);
  padding: 20px;
  overflow-y: auto;
}

.footer {
  height: 60px;
  padding: 14px 20px;
  background-color: $bg-color;
  border-top: 1px solid $border-color;
  text-align: right;
}

.typeWrapper {
  width: 651px;
  height: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  text-align: center;

  :global {
    .h3 {
      line-height: 1.33;
      padding-top: 80px;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
    }
  }

  & > p {
    margin-bottom: 40px;
    color: #79879c;
  }
}

.type {
  position: relative;
  padding: 20px 20px 20px 24px;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px $light-color03;
  text-align: left;
  cursor: pointer;
  z-index: 1;
  transition: all $trans-speed ease-in-out;

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.08);
  }

  img {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    padding: 2px;
  }

  & + .type {
    margin-top: 8px;
  }
}

.text {
  display: inline-block;
  vertical-align: middle;
  width: 553px;
  margin-left: 20px;

  :global .h6 {
    line-height: 1.43;
  }

  & > p {
    color: $dark-grey;
  }
}

.bottomImage {
  position: absolute;
  right: 30px;
  bottom: 28px;
}
