@mixin human-resourcce-theme() {
  app-human-resource {
    .human-list {
      background-color: $off-white;
      border-radius: 25px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: -2px 6px 9px #2f2c8333;
      main {
        h1 {
          span {
            color: $main-color;
            font-size: 20px;
          }
        }
      }

      header {
        button {
          border-radius: 10px;
          background-color: $main-color;
          color: $white-color;
          border: 1px solid $main-color;
          padding: 10px 40px;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.5s;
          &:hover {
            background-color: $main-blue;
            border: 1px solid $main-blue;
          }
        }
      }

      &__search {
        width: 40%;
        margin: 40px 0;
        position: relative;
        img {
          position: absolute;
          top: 10px;
        }
        input {
          width: 100%;
          padding: 10px 15px;
          border: 1px solid $white-color;
          background-color: $white-color;
          box-shadow: 0px 4px 12px #0000001a;
          border-radius: 19px;
          background-color: $white-color;
          outline: none;
          font-size: 15px;
        }
      }
    }

    .human-details {
      background-color: $off-white;
      border-radius: 25px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: -2px 6px 9px #2f2c8333;
      main {
        h1 {
          span {
            font-size: 25px;
            color: $main-color;
          }
        }
      }
      &__avatar {
        width: 40%;
        padding: 20px 0;
        @media (max-width: 767px) {
          width: 1005;
        }
        div {
          img {
            width: 50px;
          }
          p {
            color: $light-blue;
            font-size: 20px;
            font-size: 18px;
            margin-bottom: 5px;
          }
          span {
            color: #7b8793;
            font-size: 15px;
            display: block;
            margin-bottom: 5px;
          }
        }
        button {
          background-color: $light-blue;
          color: $white-color;
          border: 1px solid $light-blue;
          padding: 10px 20px;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.5s;
          &:hover {
            background-color: $main-blue;
          }
        }
      }

      .contract,
      .salary {
        padding: 20px 0;
        p {
          color: $main-color;
          margin-bottom: 10px;
          font-size: 15px;
        }
        h3 {
          color: #707070;
          font-size: 17px;
          text-decoration: underline;
        }
      }

      .teams {
        padding: 40px 0;
        &__team {
          background-color: $white-color;
          border-radius: 18px;
          padding: 40px 0;
          p {
            color: $main-color;
            padding-top: 20px;
          }
        }
      }

      .vacation-days {
        padding: 40px 0;
        p {
          color: $main-color;
          width: 20%;
          margin-bottom: 10px;
        }
        .spent {
          background-color: #e5c9d3;
          color: #e73232;
          padding: 10px 20px;
          border-radius: 5px;
        }

        .remaining {
          background-color: #0fbb3726;
          color: #0fbb37;
          padding: 10px 20px;
          border-radius: 5px;
        }

        h3 {
          color: #707070;
          margin: 10px 0;
          font-size: 18px;
          text-decoration: underline;
        }

        ul {
          list-style: none;
          li {
            color: $light-blue;
            width: 20%;
            margin-bottom: 10px;
          }
        }
      }

      .medical-insurance {
        padding: 40px 0;
        .card {
          background-color: #c4daed;
          padding: 20px;
          border-radius: 10px;
          .card-body {
            background-color: #0079c8;
            border-radius: 10px;
            color: $white-color;
            text-align: center;
            padding: 20px;
          }
        }
      }
    }
  }
}
