@media (max-width: 575.98px) {
  .modal-fullscreen {
    padding: 0 !important;
  }

  .modal-fullscreen .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .modal-fullscreen-sm {
    padding: 0 !important;
  }

  .modal-fullscreen-sm .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-sm .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-sm .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .modal-fullscreen-md {
    padding: 0 !important;
  }

  .modal-fullscreen-md .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-md .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-md .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 1199.98px) {
  .modal-fullscreen-lg {
    padding: 0 !important;
  }

  .modal-fullscreen-lg .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-lg .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-lg .modal-body {
    overflow-y: auto;
  }
}

.modal-fullscreen-xl {
  padding: 0 !important;
}

.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}

.splitter-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background: #535353;
  cursor: row-resize;
  z-index: 1;
}

.resize-div {
  height: 100%;
}

.gutter {
  background-color: #939393;
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-vertical {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
  cursor: row-resize;
}

.imagePreview {
  width: 210px;
  height: 86px;
  border: 1px dashed;
  background: #f2f2f2;
  cursor: pointer;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.previewBanner {
  width: 354px;
  height: 174px;
}

.infoImagePreview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  color: #777777;
}

.imgDel {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  margin: 0 auto;
  right: -30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.imgAdd {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.warp_addbanner {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  gap: 8px;
}