/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
.page-project{
  padding-bottom: 50px - $grid-gutter-width;
  .ged-card{
    min-height: 500px;
    max-height: 560px;
    background: $color-background;
    overflow: hidden;
    &.empty{
      background: $color-white;
    }
    .base-card__content{
      padding: 0;
      .breadcrumb{
        background-color: $color-white;
      }
      img{
        margin: auto;
      }
      p{
        span{
          font-weight: bold;
          color: $color-primary;
          text-transform: lowercase;
        }
      }
      .table-name{
        img{
          margin: 0 8px 0 0;
        }
      }
      .upload-area{
        display: flex;
        justify-content: center;
        .btn-primary{
          width: 121px;
          height: 33px;
          &:first-child{
            margin-right: 24px;
          }
        }
      }
    }
  }
  .table-spaced {
    .base-button-option {
      &__menu {
        ul li {
          .svg-icon {
            margin-right: 10px;
          }
          .base-valid-delete {
            .svg-icon {
              margin-right: 0;
            }
          }
        }
      }
    }
    .close-circle {
      cursor: pointer;
    }
    &__items--body--state, &__items--header--state {
      justify-content: center;

      .loader-blobs {
        .blob,
        .blob-center {
          height: 10px;
          width: 10px;
        }
      }
    }
    &__items--header--actions{
      min-width: 209px;
    }
    &__items--body--name, &__items--header--name{
      padding-right: $grid-gutter-width;
    }
  }

  .content-project {
    width: 100%;

    @include media-breakpoint-up(lg){
      margin-right: 20px;
      width: calc(100%/3 * 2 - 20px);
    }
    .base-card__content{
      img{
        margin: auto;
      }
      p{
        span{
          font-weight: bold;
          color: $color-primary;
        }
      }
    }

    .model-preview-slider{
      height: 338px;
      background: $bg-preview;
    }
    .loader-layout {
      margin-top: 0;
    }
  }
  .user-project{
    width: 100%;

    @include media-breakpoint-up(lg){
      margin-left: 20px;
      width: calc(100%/3 - 20px);
    }
  }

  .main-ifc{
    @include flexbox;
    @include flex-direction(column);

    @include media-breakpoint-up(md){
      height: 399px;
      @include flex-direction(row);
    }

    &__map-info-content{
      margin-bottom: 21px;
      width: 100%;
      box-shadow: 0 2px 10px 0 rgba($color-black,.07);

      @include media-breakpoint-up(md){
        margin: 0 21px 0 0;
        max-width: 327px;
      }
    }

    &__info-project{
      margin-right: 0;
      width: 100%;
      height: 338px;
    }
    &__navigation-project{
      padding: 16px 11px;
      height: 61px;
      @include flexbox;
      @include align-items(center);
      &__title{
        width: 75%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: $color-primary;
      }
    }

    &__map{
      margin: 0;
      width: 100%;
      height: 379px;
      position: relative;

      @include media-breakpoint-up(md){
        height: 100%;
      }

      .map-wrapper{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &__container {
          border: 2px dashed $primary;
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          &__step {
            text-align: center;

            .svg-icon {
              color: $primary;
            }

            &--first {
              p {
                color: $primary;
                margin-top: 30px;
                margin-bottom: 34px;
                font-size: 0.929rem;
              }
            }
            &--second {
              & > div  {
                display: flex;
                flex-direction: column;
                align-items: center;
              }

              .base-input-text-material {
                margin-top: 25px;
                margin-bottom: 25px;
              }
            }
          }
        }
        &__address-map {
          position: relative;
          height: 100%;
          width: 100%;

          &__input-container {
            position: absolute;
            bottom: 36px;
            width: 80%;
            left: 10%;
            background: $white;
            padding: 16px 20px;
            display: flex;
            align-items: flex-end;
            box-shadow: $box-shadow;

            .base-input-text-material {
              margin: 0;
              margin-right: 2px;
              width: calc(100% - 77px) !important;
              overflow: hidden;

              input {
                padding: 0;
                padding-top: 5px;
                @include font-size(12px);
                margin-top: 14px;
                width: 100% !important;

                &:focus,
                &:valid,
                &:disabled {
                  & ~ label {
                    top: 0;
                  }
                }
                &:disabled {
                  opacity: 0.5;
                }
              }
              label {
                @include font-size(12px);
              }
            }
            .btn {
              margin-left: 12px;
              width: 80px;
              min-width: auto;
              @include font-size(12px);
              font-weight: lighter;
            }
          }
        }
      }
      #base-map{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &__detail-content{
      width: 50%;
    }
  }
}
