/*
 *
 *
 * geschrieben von Beliar698ma
 *
 *
 */

.pagination-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 12px 0;
  padding: 0 12px;
  & button.previous-button {
    display: block;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background-color: #80cbc4;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border: none;
    transition: all ease-in-out 0.5s;
  }
  & button.next-button {
    display: block;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background-color: #80cbc4;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: none;
    transition: all ease-in-out 0.5s;
  }
  & button.previous-button:hover,
  button.next-button:hover {
    opacity: 0.5;
  }
  & .forjs {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    & .omitted {
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      color: #80cbc4;
      font-size: 24px;
      letter-spacing: 0.025rem;
      font-weight: bold;
    }
    & .omitted::after {
      position: absolute;
      content: '...';
      bottom: 35%;
      left: 0;
    }
    & .paginations {
      display: block;
      width: 40px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 50%;
      border: 2px solid #80cbc4;
      color: #80cbc4;
      padding: 0;
      margin: 0px 4px;
      text-align: center;
      transition: all ease-in-out 0.5s;
      cursor: pointer;
      & p {
        font-size: 20px;
        font-weight: bold;
        padding: 0;
        margin: 0;
        line-height: 2em;
        user-select: none;
      }
    }
    & .paginations.current {
      background-color: #80cbc4;
      color: #ffffff;
    }
    & .paginations:hover {
      background-color: #80cbc4;
      color: white;
    }
    & .paginations.current:hover {
      background-color: #80cbc4;
      color: #ffffff;
    }
  }
}

.content-area {
  width: 100%;
  padding: 8px 12px;
  margin: 0;
  margin-top: 12px;
  background-color: #ffffff;
  border: 1px dotted #c5c5c5;
  color: #2c2c2c;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
  & p {
    padding: 4px 0;
    margin: 4px 0;
  }
  & h3.content {
    display: inline-block;
    font-weight: bold;
    width: 100%;
    text-align: left;
    padding: 0;
    margin: 8px 0;
    font-size: 21px;
  }
}

@media screen and (max-width: 768px) {
  .pagination-container {
    margin: 8px 0;
    padding: 0 4px;
    & button.previous-button {
      width: 15px;
      height: 15px;
      margin-right: 4px;
    }
    & button.next-button {
      width: 15px;
      height: 15px;
      margin-left: 4px;
    }
    & .forjs {
      & .omitted {
        width: 27px;
        height: 27px;
        font-size: 14px;
      }
      & .omitted::after {
        position: absolute;
        content: '...';
        bottom: 20%;
        left: 0;
      }
      & .paginations {
        width: 27px;
        height: 27px;
        margin: 0px 1.25px;
        & p {
          font-size: 13.5px;
          line-height: 2em;
          letter-spacing: 0.015rem;
        }
      }
    }
  }

  .content-area {
    padding: 4px 8px;
    margin-top: 6px;
    & p {
      padding: 2px 0;
      margin: 2px 0;
    }
    & h3.content {
      margin: 4px 0;
      font-size: 18.5px;
    }
  }
}