:root
{
}

.clsImageCropUI .modal-container
{
  width: 100%;
  height: 100%;
}

.clsImageCropUI .cropCanvasWrapper
{
  position: relative;
  width: 100%;
  padding: 0px;
}

.clsImageCropUI .cropCanvasWrapper canvas.background, .clsImageCropUI .cropCanvasWrapper canvas.draw
{
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: calc(80vh);
}

.clsImageCropUI .cropCanvasWrapper canvas.background
{
  position: relative;
  z-index: 9000;
  /* bg-green-400 */
}

.clsImageCropUI .cropCanvasWrapper canvas.draw
{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 9999;
}

.clsImageCropUI .controls
{
  height: 18vh;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0px;
}

/* #region Image modal if modal does not exist*/

html:has(.modal:not(.hidden))
{
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body:has(.modal:not(.hidden)) > footer
{
  display: none !important;
}

.modal
{
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

@media (min-width: 768px)
{
  .modal
{
    inset: 0px;
  }
}

.modal
{
  height: calc(100%);
  max-height: calc(100%);
  width: calc(100%);
  max-width: calc(100%);
  vertical-align: middle !important;
}

.modal .modal-wrapper
{
  position: relative;
  z-index: 9100;
  height: calc(100%);
  max-height: calc(100%);
  width: calc(100%);
  max-width: calc(100%);
}

.modal .modal-wrapper .modal-container
{
  position: relative;
  z-index: 9200;
  height: 2.5rem;
  padding: 1rem;
  height: calc(100%);
  max-height: calc(100%);
  min-height: calc(100%);
  width: calc(100%);
  max-width: calc(100%);
  background-color: rgba(0, 0, 0, 0.781);
}

/* .modal-content  */

.modal .modal-wrapper .modal-container img
{
  z-index: 9300;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1.5rem !important;
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  --tw-shadow-color: #000 !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
  height: auto;
  max-height: calc(100%);
  width: auto;
  max-width: calc(100%);
}

/* #endregion modal */

/* modal mod for canvas */

.modal .modal-wrapper .modal-container:has(.modal .modal-wrapper .modal-container .clsImageCropUI)
{
  margin: 0px !important;
  padding: 0px !important;
  z-index: 0 !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}