/* modal css */
.modal {
  position: fixed;
  /* top  : 70px; */
  z-index: 8999;
  height: 100% !important;
}

.modal.black {
  background: hsl(0deg 0% 0% / 57%);
}

.modal .close i {
  font-size: 1.5rem !important;
  color: var(--bs-gray-600);
}

.modal .close i:hover {
  outline: 1px solid var(--bs-gray-700);
  border-radius: 4px;
}

/* modal - con */
.modal:not(.side-modal, .modal_bottom) > .con {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
}

.modal.side-modal > .con {
  position: absolute;
  top: 0;
  left: 0;
  right: -100%;
}

.modal:not(.side-modal, .modal_bottom) > .con.animate {
  /* top: 10px; */
  top: 0px;
  transition: top 0.5s linear;
}

.modal.side-modal > .con.animate {
  right: 0px;
  transition: right 0.5s linear;
}

.modal > .con > .card {
  margin: auto;
  width: max-content;
  min-width: 600px;
  max-width: calc(100% - 30px);
  min-height: 250px;
}

.modal > .con > .card > .card-header {
  text-transform: capitalize;
  position: sticky;
  top: 0px;
  background: #f7f7f7;
  z-index: 1;
}

.modal > .con > .card > .card-header,
.modal > .con > .card > .card-footer {
  min-height: 40px;
}

.modal > .con > .card > .card-body:empty {
  background-image: url("../../../content/img/loading_1.gif");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.body.blur,
.menu.blur {
  filter: blur(4px);
}

@media only screen and (min-width: 237px) and (max-width: 800px) {
  .modal > .con > .card {
    /* min-width: calc(100% - 30px);
    max-width: calc(100% - 30px);
    margin: auto 15px; */
    min-width: calc(100%) !important;
    max-width: calc(100%) !important;
    margin: 0 !important;
  }
}

@media print {
  body {
    background: white !important;
  }

  .modal {
    position: relative !important;
    top: 0px;
    z-index: 8999;
    padding: 0 !important;
    /* outline: 1px solid grey; */
  }

  .modal > .container {
    min-width: 216mm !important;
    min-height: 295mm !important;
    /* outline: 1px solid red; */
  }

  .modal #res-modal {
    left: 0 !important;
    min-height: 295mm !important;
    /* outline: 1px solid green; */
  }

  .modal.black {
    background: white;
  }

  .modal > .con > .card,
  .modal > .con > .card > .card-body,
  .modal > .container,
  .modal #res-modal {
    padding: 0 !important;
    margin: 0 !important;
  }

  .modal .card {
    border-radius: 0px !important;
    border: none !important;
  }
}

/* modal_side_modal_css */
.modal.side-modal > .con {
  bottom: 0;
}

.modal.side-modal .card {
  margin-right: 0;
  margin-top: 0 !important;
  min-height: 100%;
  border-radius: 0;
  max-width: 600px;
}

.history_modal > .card-header,
.modal > .con > .card > .card-header {
  cursor: move;
  z-index: 10;
}

/* modal_bottom_css */

.modal.modal_bottom {
  top: 32%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  background: #ffffffb8;
  backdrop-filter: blur(10px);
  max-width: 1160px;
  border-radius: 21px 21px 0 0;
  box-shadow: 0px 0px 30px 0 #323232a6;
  height: auto !important;
  z-index: 10000;
}
.modal.modal_bottom > .con {
  bottom: 0;
}
.modal.modal_bottom > .con > .card {
  margin-top: 0 !important;
  min-width: 100%;
  min-height: 100%;
  background: transparent !important;
}
.modal.modal_bottom > .con > .card .card-header {
  background-color: transparent;
  backdrop-filter: blur(15px);
  cursor: default;
}

.modal.modal_bottom > .con .move-span {
  position: sticky;
  max-width: 200px;
  min-height: 6px;
  background: #b6b6b682;
  border-radius: 30px;
  top: 4px;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: -6px;
  cursor: n-resize;
  z-index: 100;
}

/* modal_table_btn_row_fix */
.modal .row.table_main .pagination,
.modal .row.table_main .tables-btn-con-row {
  z-index: 0 !important;
}