/* 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;
}