@import '@/styles/_support';

.comp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  @extend .fcc;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
}


.orange {
  color: $cOrange;
}


.modal {
  position: relative;
  @extend .bb;
  width: 63.333333rem;
  // height: 28.5rem;
  border-radius: .8333rem;
  background-color: #ffffff;
  padding: 4.5rem 3rem 2.5rem;
  border: .083333rem solid $cOrange;

  .title {
    font-size: 1.5rem ;
    color: $cOrange;
  }

  .content {
    width: 70%;
    margin: auto;
  }

  .desc {
    text-align: left;
    line-height: 2.2rem ;
    min-width: 7.5rem ;

    span {
      margin: 0 .166667rem ;
    }
  }
  
  .value {
    text-align: left;
    line-height: 2rem ;
  }

  hr {
    border-top: 1px solid #e4e4e5;
    width: 70%;
    margin: auto;
  }

  .download-btn {
    cursor: pointer;
    border: 1px solid $cOrange;
    border-radius: .416667rem;
    padding: .5rem;
    margin: 2rem auto;
    width: 35rem;

    img {
      max-height: 2.083333rem;
    }

    .btn-name {
      margin-left: 1.666667rem ;
    }
  }

  .flex-center {
    display: flex;
    justify-items: center;
    align-items: center;
  }

  .default-mt {
    margin-top: 3.2rem;
  }

  .half-mt {
    margin-top: 1rem;
  }

  .submit-btn {
    background: url("~@assets/images/vhis/vhis-btn.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 14rem;
    height: 2rem;
    line-height: 2rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-margin {
    margin-left: 2rem  !important;
  }
}

.flex-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.hide {
  display: none;
}

@media (max-width: 1200px) {
  .comp {
    position: fixed;
  }

  .modal {
    width: 70%;
    position: absolute;

    .content {
      width: 80%;
      margin: auto;
    }


    .download-btn{
      width: 80%;
    }

    .default-mt {
      margin-top: 2rem;
    }

    .half-mt {
      margin-top: 1rem;
    }

    hr {
      border-top: 1px solid #e4e4e5;
      width: 80%;
      margin: auto;
    }
  }


}


@media (max-width: 768px) {
  .modal {
    // height: 28.5rem;
    padding: 3rem 1.5rem;
    width: 80%;
    height: auto;

    .content {
      width: 90%;
      margin: auto;
    }

    .download-btn {
      margin: 1rem auto;
      width: 90%;
    }

    hr {
      border-top: 1px solid #e4e4e5;
      width: 90% ;
      margin: auto;
    }

    .default-mt {
      margin-top: 1.5rem ;
    }

    .download-btn{
      width: 100%;
    }

    .submit-btn {
      background-size: 100% 100% ;
      width: 10rem ;
    }

    .btn-margin {
      margin-left: 1.666667rem ;
    }
  }
}


@media (max-width: 400px) {
  .modal {
    // height: 28.5rem;
    padding: 3rem 1.5rem;
    width: 90%;
    height: auto;

    .content {
      width: 100%;
      margin: auto;
    }

    .download-btn {
      margin: 1rem auto;
      width: 100%;
    }

    hr {
      border-top: 1px solid #e4e4e5;
      width: 100% ;
      margin: auto;
    }

    .default-mt {
      margin-top: 1.5rem ;
    }


    .submit-btn {
      background-size: 100% 100% ;
      width: 10rem ;
    }

    .btn-margin {
      margin-left: 1.666667rem ;
    }
  }
}