@import "../../../../assets/scss/variables";

.visits-management-view-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows:30px auto 48px;
  column-gap: 20px;
  grid-template-areas:
        "title fake-section-top"
        "info status"
        "buttons fake-section-bottom";
}

.fake-section {
  grid-area: fake-section;
}

.visits-management-view-title {
  grid-area: title;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &-code {
    display: flex;
    justify-content: flex-start;
    max-width: 515px;
    width: 100%;
    align-items: center;

    span {
      margin-right: 5px;;
    }

    .view-status {

    }

    p {
      font-size: $title;
      font-weight: $bold;
      color: $main-color;
      margin-right: 27px;

      .view-status {
        font-size: 9px;
        font-weight: $semi-bold
      }
    }
  }

  &-mynote {
    .popup-column {
      margin: 0 0 0 20px;
    }

    p {
      font-size: $subtext-size;
      font-weight: $regular;
      color: $input-border;
    }

    display: flex;
  }
}

.visits-management-view-info {
  .info {
    margin-bottom: 28px;

    .user-form {
      height: 100%;
    }
  }

  &-group {
    height: 126px;

    .btn-with-pop-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .popup-content {
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
        padding: 35px 35px 25px 35px;
        background: white;
        z-index: 50;
        width: 553px;
        height: 500px;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 30px;

        &-header {
          border-bottom: 1px solid #a2a2a2;
          margin-bottom: 20px;
          padding-bottom: 10px;
          p{
            font-size: 1.4rem;
            font-weight: $regular;
            color:$main-color;
            span{
              font-weight: $bold;
            }
          }
        }

        &-body {
          overflow-x: hidden;
          overflow-y: auto;
          display: flex;
          flex-direction: column;

          .person-in-group {
            display: flex;
            justify-content: space-between;
            padding:0 10px 8px 0;
            border-bottom: 1px dotted $inactive-color;

            .status-column {
              min-width: unset;
              width: 100px;
              margin-right: 50px;
            }

            p {
              font-weight: $regular;
              font-size: $info-size;
              color: $main-color;
            }

            &:not(:first-child) {
              padding-top: 8px;


            }
          }

          &::-webkit-scrollbar {
            width: 5px;
            height: 50% !important;
            transform: scaleY(0.5) !important;
          }

          /* Track */
          &::-webkit-scrollbar-track {
            background: #e9f0f9;
            border-radius: 10px;
          }

          /* Handle */
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
            //background-color: transparent;
            //border-top: 150px solid #1A73E8 /*or any height and color you want*/;
          }

          /* Handle on hover */
          &::-webkit-scrollbar-thumb:hover {
            background: transparent;
          }
        }
      }
    }
  }

  &-visitor {
    //height: 205px;
  }

  &-location {
    height: 96px;
  }

  &-host {
    height: 143px;

    .message-to-gate {
      overflow-y: auto;
      max-height: 70px;
      font-size: 15px;

      &::-webkit-scrollbar {
        width: 5px;
        height: 50% !important;
        transform: scaleY(0.5) !important;
      }

      /* Track */
      &::-webkit-scrollbar-track {
        background: #e9f0f9;
        border-radius: 10px;
      }

      /* Handle */
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
        //background-color: transparent;
        //border-top: 150px solid #1A73E8 /*or any height and color you want*/;
      }

      /* Handle on hover */
      &::-webkit-scrollbar-thumb:hover {
        background: transparent;
      }
    }
  }
}

.visits-management-view-buttons {
  display: flex;
  justify-content: flex-end;

  &-inner {
    display: flex;
    justify-content: space-between;
  }
}

.visits-management-view-status {
  grid-area: status;

  &-up {
    grid-area: up;

    &-inner {
      .button-column {
        width: 103px;
      }

      span {
        font-size: 16px;
        padding-left: 5px;

      }

      display: flex;
      flex-direction: column;
      height: 168px;
      justify-content: space-between;
    }
  }

  &-bottom {


    &-history {
      &-header {
        p {
          font-size: 14px;
          font-weight: $bold;
          color: $main-color;
          margin-right: 38px;
        }

        display: flex;
      }

      &-body {
        .visitcode {
          font-size: 16px;
          font-weight: $regular;
          color: $main-color;
        }

        .checks-container {
          .check {
            padding-right: 30px;

            &:first-child {
              .check-in {
                background-color: $success;

                p {
                  color: white;
                }

              }

              .check-out {
                background-color: $old;

                p {
                  color: $inactive-text;
                }

              }

            }

            display: flex;

            margin: 19px 0;

            &-box {
              p {
                font-size: 11px;
                font-weight: $semi-bold;
              }

              display: flex;
              justify-content: space-evenly;
              align-items: center;
              width: 100%;
              max-width: 153px;
              min-width: 85px;
              height: 30px;
              color: $alternate-text-color;
              background-color: transparent;
              border: 1px dotted $alternate-text-color;
            }

            &-in {
              margin-right: 75px;
            }
          }

          max-height: 350px;
          overflow-x: hidden;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 5px;
            height: 50% !important;
            transform: scaleY(0.5) !important;
          }

          /* Track */
          &::-webkit-scrollbar-track {
            background: #e9f0f9;
            border-radius: 10px;
          }

          /* Handle */
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
            //background-color: transparent;
            //border-top: 150px solid #1A73E8 /*or any height and color you want*/;
          }

          /* Handle on hover */
          &::-webkit-scrollbar-thumb:hover {
            background: transparent;
          }
        }

        display: flex;
        justify-content: space-around;
        flex-direction: column;
      }
    }
  }

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 222px auto;
  grid-template-areas:
          "up"
          "bottom";
  row-gap: -5px;

}


@media only screen and (max-width: 1600px) {
  .visits-management-view-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
     "title"
     "status"
      "info"
  "buttons";
  }
}