:root {
  --modal-height: 670px;
  --modal-bg: var(--clr-white);
  --modal-x-padding: var(--sp11);
  --modal-scroll-padding-right: var(--sp8);
  --modal-border-radius: var(--radius-xl);
  --right-p-if-scroll: calc(var(--modal-x-padding) + 5px);
}

.custom-modal-module {
  --section-body-clr: var(--clr-gray-dark);
}

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px 50px;
}

.custom-modal-overlay:not(.show) {
  display: none;
}

.custom-modal {
  width: 100%;
  max-width: 1140px;
  max-height: 100%;
  height: var(--modal-height);
  /* border-top-right-radius: var(--radius-xl); */
  display: flex;
  flex-direction: column;
  position: relative;
}

.custom-modal-header {
  display: flex;
  padding: var(--sp2) var(--sp7);
  border-top-right-radius: var(--modal-border-radius);
}

.modal-close-wrapper {
  position: absolute;
  right: -30px;
  top: 0;
}

.modal-close-wrapper .icon--close {
  --icon-hover: var(--icon);
  cursor: pointer;
}

.custom-modal-body {
  padding: 16px;
}

.custom-modal-title-wrap,
.custom-modal-icon {
  display: flex;
  align-items: center;
}

.custom-modal-icon+.custom-modal-title-wrap {
  padding-left: var(--sp7);
  margin-left: var(--sp6);
  border-left: 1px solid var(--border-color);
}

.modal-view-content {
  padding: var(--sp9) var(--modal-x-padding);
  padding-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--modal-bg);
}

.custom-modal-content-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.custom-modal-content {
  flex: 1;
  overflow: auto;
}

.custom-modal-footer {
  display: flex;
  padding: 20px 0;
}

.custom-modal-filter {
  margin-bottom: var(--sp3);
}

.custom-modal-title {
  text-align: left;
}

/* scroll */
.content-scrollable.custom-modal-module .modal-view-content {
  padding-right: var(--modal-scroll-padding-right);
}

.content-scrollable .custom-modal-filter,
.content-scrollable .custom-modal-footer {
  padding-right: var(--right-p-if-scroll);
}

.content-scrollable .custom-modal-content {
  padding-right: var(--modal-x-padding);
}

.custom-modal-module:not(.content-scrollable) .custom-modal-footer .scroll-btns {
  opacity: 0;
  pointer-events: none;
}

.content-scrollable .custom-modal-footer .scroll-btns {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 8px;
}

/* no-icon */
.custom-modal-header.no-icon {
  min-height: 90px;
  padding: 30px var(--modal-x-padding);
}

/* height auto modal */

.modal-auto-height {
  --modal-height: auto;
}

/* modal-popup-component ( old popup style change with new class )*/

.modal-popup-component .popup-inner-section {
  border-top-right-radius: var(--modal-border-radius);
  padding: 40px var(--modal-x-padding) 30px var(--modal-x-padding);
  position: relative;
  height: var(--modal-height);
}

.modal-popup-component .custom-modal-close-field {
  display: block;
}

.modal-popup-component .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0px !important;
}

/* table sticky */

.modal-popup-component .popup-table-wrap thead {
  position: sticky;
  top: 0;
}

.modal-popup-component .table-wrap .table-responsive,
.modal-popup-component:has(.table-wrap.is-active) .popup-content .mCSB_container {
  overflow: unset;
}

/* responsive */

@media only screen and (max-height: 800px) {
  .modal-popup-component {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}