/* modal */
.area {
   height: calc(100vh - 252px);
   padding: 20px 30px 20px 30px !important;
}

.modal {
   padding-right: 0 !important;
   overflow-y: hidden !important;
   min-width: 360px !important;
}

.modal .modal-footer {
   height: 60px !important;
   background-color: #FFF !important;
   border-radius: 0 0 6px 6px !important;
   padding: 16px !important;
   justify-content: center;

}

.modal .modal-header {
   height: 60px !important;
   background-color: #FFF !important;
}

.modal-header .close {
   padding-top: 20px !important;
}

.modal .modal-header .close i {
   font-size: 20px !important;
}

.modal-modal-dialog {
   margin-top: 50px;
}

@media only screen and (min-width: 576px) {
   .modal .modal-dialog {
      margin: 66px auto !important;
      display: flex;
      justify-content: center;
      width: auto;
      max-width: 100vw;
   }

   .modal .modal-content {
      max-height: calc(100vh - 132px) !important;
      width: 60vw !important;
   }
}

@media only screen and (min-width: 576px) and (max-width: 1023px) {
   .modal .modal-content {
      min-width: 60vw;
   }
}

@media only screen and (max-width: 575px) {
   .modal .modal-content {
      min-width: 80dvw;
   }
}