@font-face {
  font-family: "MyPublicSans";
  src: url("fonts/PublicSans-VariableFont_wght.ttf") format(truetype);
}

@font-face {
  font-family: "Montserratku";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format(truetype);
}

@font-face {
  font-family: "IndieFlower";
  src: url("fonts/IndieFlower-Regular.ttf") format(truetype);
}

body {
  font-family: "MyPublicSans", "Montserratku", "Montserrat", Arial, Helvetica,
    sans-serif;
}

.modal .data {
  height: 100% !important;
  background-color: #fff;
  /* border: 6px dashed #0069D9; */
  border: 0.5px solid #ececec;
  border-radius: 10px;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal .data .img-con {
  object-fit: cover !important;
  object-position: center center;
  height: 75%;
  background-color: #fff;
}

.overflow-scroll {
  overflow-y: scroll !important;
}

.pointer:hover {
  cursor: pointer;
}

.modalCariByGambar .rowDataBarang .data:active {
  transform: scale(0.9);
}

.conGrafik {
  width: 100%;
  height: 33vh;
  position: relative;
}

.gradient-blue-bs {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #007bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-orange-bs {
  background: -webkit-linear-gradient(315deg, #ffc107 25%, #fd7e14);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.bg-blue-bs {
  background-color: #0069d9;
}

.bg-lightdanger {
  background-color: #fef2f2;
  background: #fef2f2;
}

.bg-aquamarine {
  background: aquamarine;
  background-color: aquamarine;
}

.border-danger {
  border: 0.3px solid #ee8282;
}

.bg-lightwarning {
  background-color: #fff6dc;
  background: #fff6dc;
}

.border-warning {
  border: 0.3px solid #e0a800;
}

.btn-orange-bs {
  background-color: #ffa500;
  transition: 0.3s;
}

.btn-orange-bs:hover {
  background-color: rgba(255, 165, 0, 0.9);
}

.btn-orange-bs:active {
  background-color: rgba(255, 165, 0, 0.6);
}

.judulContainerFilter {
  font-size: small !important;
}

.filterBox input,
.filterBox select {
  font-size: small !important;
  padding: 5px !important;
  height: max-content !important;
}

.filterBox p,
.filterBox .btn {
  font-size: smaller !important;
}

.filterBox .small-box .inner {
  padding: 4px !important;
}

p.dropdown-item {
  cursor: pointer;
}

button.typeChart {
  overflow: hidden;
}

.display-none {
  display: none;
}

.bg-newgrey {
  background: #ecf4ff !important;
  background-color: #ecf4ff !important;
}

.text-newgrey {
  color: #ecf4ff !important;
}

.text-newgrey2 {
  color: rgba(148, 163, 184, 1) !important;
}

.myrounded1em {
  border-radius: 1em;
}

.fs-2px,
.fs-2px * {
  font-size: 2px !important;
}

.fs-3px,
.fs-3px * {
  font-size: 3px !important;
}

.fs-4px,
.fs-4px * {
  font-size: 4px !important;
}

.fs-5px,
.fs-5px * {
  font-size: 5px !important;
}

.fs-6px,
.fs-6px * {
  font-size: 6px !important;
}

.fs-7px,
.fs-7px * {
  font-size: 7px !important;
}

.fs-8px,
.fs-8px * {
  font-size: 8px !important;
}

.fs-9px,
.fs-9px * {
  font-size: 9px !important;
}

.fs-10px,
.fs-10px * {
  font-size: 10px !important;
}

.fs-11px,
.fs-11px * {
  font-size: 11px !important;
}

.fs-12px,
.fs-12px * {
  font-size: 12px !important;
}

.fs-13px,
.fs-13px * {
  font-size: 13px !important;
}

.fs-14px,
.fs-14px * {
  font-size: 14px !important;
}

.fs-15px,
.fs-15px * {
  font-size: 15px !important;
}

.fs-16px,
.fs-16px * {
  font-size: 16px !important;
}

.fs-18px,
.fs-18px * {
  font-size: 18px !important;
}

.fs-20px,
.fs-20px * {
  font-size: 20px !important;
}

.fs-22px,
.fs-22px * {
  font-size: 22px !important;
}

.fs-24px,
.fs-24px * {
  font-size: 24px !important;
}

.fs-25px,
.fs-25px * {
  font-size: 25px !important;
}

.fs-26px,
.fs-26px * {
  font-size: 26px !important;
}

.fs-27px,
.fs-27px * {
  font-size: 27px !important;
}

.fs-28px,
.fs-28px * {
  font-size: 28px !important;
}

.fs-29px,
.fs-29px * {
  font-size: 29px !important;
}

.fs-30px,
.fs-30px * {
  font-size: 30px !important;
}

.fs-35px,
.fs-35px * {
  font-size: 35px !important;
}

.fs-40px,
.fs-40px * {
  font-size: 40px !important;
}

.fs-50px,
.fs-50px * {
  font-size: 50px !important;
}

.fs-60px,
.fs-60px * {
  font-size: 60px !important;
}

.fs-80px,
.fs-80px * {
  font-size: 80px !important;
}

.fs-075rem {
  font-size: 0.75rem !important;
}

.fs-smaller,
.fs-smaller * {
  font-size: smaller;
}

.textoverflow-ellipsis {
  text-overflow: ellipsis !important;
}

.bottom {
  bottom: 0 !important;
}

.conTitleResep {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.conTitleResep .boxTitleResep {
  position: absolute;
  width: 100%;
  bottom: 0 !important;
}

.breakWord {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.copyText,
.copyText:hover {
  cursor: pointer !important;
}

.input-bs {
  /* 
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px; */
  padding: 10px !important;
}

.input-bs:focus {
  box-shadow: none !important;
  border-color: #007bff !important;
}

.color-red {
  color: red;
}

.boxUploadMainLogo,
.boxUploadBig {
  width: 300px;
  height: 300px;
  /* aspect-ratio: 1 / 1; */
  border-radius: 20px;
  font-size: 40px;
  text-align: center;
  transition: 0.3s;
  /* overflow: hidden; */
}

.boxUploadFavicon,
.boxUploadMini {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  font-size: 35px;
  text-align: center;
  transition: 0.3s;
  /* overflow: hidden; */
}

.boxUploadLandscapeBig {
  width: 300px;
  height: 168.75px;
  /* aspect-ratio: 16 / 9; */
  border-radius: 20px;
  font-size: 40px;
  text-align: center;
  transition: 0.3s;
  /* overflow: hidden; */
}

.boxUploadMedium {
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  font-size: 40px;
  text-align: center;
  transition: 0.3s;
  /* overflow: hidden; */
}

.boxUploadLandscapeMedium {
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  font-size: 40px;
  text-align: center;
  transition: 0.3s;
  /* overflow: hidden; */
}

.onHoverShadowActive {
  transition: box-shadow .5s;
  box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.2) !important;
}

.onHoverShadowActive:hover {
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.2) !important;
  cursor: pointer;
}

.bouncing-click,
.bouncing-click-thin {
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.bouncing-click:active {
  transform: scale(0.9) !important;
}

.bouncing-click-thin:active {
  transform: scale(0.97) !important;
}

.boxColor,
.boxColor2,
.boxColorNew,
.boxColorPreview {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 10px;
  /* background-color: salmon; */
}

.boxColor.activatedboxcolor {
  box-shadow: 0 2px 6px #007bff !important;
  opacity: 1;
}

.boxColor2.activatedboxcolor {
  box-shadow: 0 2px 6px #42d392 !important;
  opacity: 1;
}

.boxColorNew.activatedboxcolor {
  box-shadow: 0 2px 6px #42d392 !important;
  opacity: 1;
}

.boxColor.themecolors-1 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #e75b1e 50%, #e7b739 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-2 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #4e342e 50%, #a1887f 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-3 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #d8a7a0 50%, #faf4e8 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-4 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #4caf50 50%, #ffc107 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-5 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #2a2a44ff 50%, #f4d03f 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-6 {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #ff7043 50%, #26c6da 50%);
  background-blend-mode: normal;
}

.boxColor.themecolors-1:hover {
  /* background: linear-gradient(45deg, #e75b1e 50%, #e7b739 100%) !important; */
  background: linear-gradient(135deg, #e75b1e 0%, #e7b739 100%);
  background-blend-mode: normal;
}

.boxColor.themecolors-2:hover {
  /* background: linear-gradient(45deg, #e75b1e 0%, #e7b739 100%) !importan10; */
  background: linear-gradient(135deg, #4e342e 0%, #a1887f 100%);
  background-blend-mode: normal;
}

.boxColor.themecolors-3:hover {
  /* background: linear-gradient(45deg, #e75b1e 0%, #e7b739 100%) !importan10; */
  background: linear-gradient(135deg, #d8a7a0 0%, #faf4e8 100%);
  background-blend-mode: normal;
}

.boxColor.themecolors-4:hover {
  /* background: linear-gradient(45deg, #e75b1e 0%, #e7b739 100%) !importan10; */
  background: linear-gradient(135deg, #4caf50 0%, #ffc107 100%);
  background-blend-mode: normal;
}

.boxColor.themecolors-5:hover {
  /* background: linear-gradient(45deg, #e75b1e 0%, #e7b739 100%) !importan10; */
  background: linear-gradient(135deg, #191924 0%, #f4d03f 100%);
  background-blend-mode: normal;
}

.boxColor.themecolors-6:hover {
  /* background: linear-gradient(45deg, #e75b1e 0%, #e7b739 100%) !importan10; */
  background: linear-gradient(135deg, #ff7043 0%, #26c6da 100%);
  background-blend-mode: normal;
}

.aspectratio1p1 {
  aspect-ratio: 1 / 1 !important;
  /* height: auto !important; */
}

.aspectratio4p3 {
  aspect-ratio: 4 / 3 !important;
  /* height: auto !important; */
}

.aspectratio16p9 {
  aspect-ratio: 16 / 9 !important;
  /* height: auto !important; */
}

.aspectratio16p4 {
  aspect-ratio: 16 / 4 !important;
}

.aspectratio16p5 {
  aspect-ratio: 16 / 5 !important;
}

.aspectratio16p6 {
  aspect-ratio: 16 / 6 !important;
}

.w-50px {
  width: 50px;
}

/* .w-350px {
  width: 350px !important;
} */

.conImgPreview {
  top: 50%;
  transform: translateY(-50%);
}

.min-h-fit-content {
  min-height: fit-content !important;
}

.min-w-fit-content {
  min-width: fit-content !important;
}

.h-fit-content {
  height: fit-content !important;
}

.w-fit-content {
  width: fit-content !important;
}

.column-gap-0 {
  column-gap: 0;
}

.column-gap-02 {
  column-gap: 0.2em;
}

.column-gap-05 {
  column-gap: 0.5em;
}

.column-gap-1 {
  column-gap: 1em;
}

.column-gap-2 {
  column-gap: 2em;
}

.column-gap-3 {
  column-gap: 3em;
}

.column-gap-4 {
  column-gap: 4em;
}

.column-gap-5 {
  column-gap: 5em;
}

.column-gap-6 {
  column-gap: 6em;
}

.row-gap-0 {
  row-gap: 0;
}

.row-gap-1 {
  row-gap: 1em;
}

.row-gap-2 {
  row-gap: 2em;
}

.row-gap-3 {
  row-gap: 3em;
}

.row-gap-4 {
  row-gap: 4em;
}

.row-gap-5 {
  row-gap: 5em;
}

.row-gap-6 {
  row-gap: 6em;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-grow-3 {
  flex-grow: 3;
}

.flex-grow-4 {
  flex-grow: 4;
}

.flex-grow-5 {
  flex-grow: 5;
}

.flex-grow-6 {
  flex-grow: 6;
}

.flex-grow-7 {
  flex-grow: 7;
}

.flex-grow-8 {
  flex-grow: 8;
}

.flex-grow-9 {
  flex-grow: 9;
}

.flex-grow-10 {
  flex-grow: 10;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.overflow-visible {
  overflow: auto !important;
}

.boxColor {
  --color-primary: #e75b1e;
  --color-secondary: #e7b739;
}

.boxColor.defaultGradient {
  background: linear-gradient(
    135deg,
    var(--color-primary) 50%,
    var(--color-secondary) 50%
  );
  background-blend-mode: normal;
}

.boxColor.smoothGradient {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  ) !important;
  background-blend-mode: normal;
}

.boxColor2, .boxColorNew, .boxColorPreview {
  --color-bg: var(--primary);
}

.boxColor2.changeBg,
.boxColorNew.changeBg,
.boxColorPreview {
  background: var(--color-bg);
}

.boxUploadImgSlideHeaders .deleteBox,
.boxUploadImgSlideHeaders .successBox {
  position: absolute;
  top: -3%;
  right: 0;
}

/* Width Styling */
.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-55 {
  width: 55%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}
/* ./Width Styling */

/* Height Styling */
.h-10 {
  height: 10%;
}

.h-15 {
  height: 15%;
}

.h-20 {
  height: 20%;
}

.h-30 {
  height: 30%;
}

.h-35 {
  height: 35%;
}

.h-40 {
  height: 40%;
}

.h-45 {
  height: 45%;
}

.h-50 {
  height: 50%;
}

.h-55 {
  height: 55%;
}

.h-60 {
  height: 60%;
}

.h-65 {
  height: 65%;
}

.h-70 {
  height: 70%;
}

.h-80 {
  height: 80%;
}

.h-85 {
  height: 85%;
}

.h-90 {
  height: 90%;
}

.h-95 {
  height: 95%;
}
/* ./Height Styling */

/* Width Styling */
.w-30px {
  width: 30px;
}

.w-40px {
  width: 40px;
}

.w-50px {
  width: 50px;
}

.w-20px {
  width: 20px;
}

.w-15px {
  width: 15px;
}

.w-10px {
  width: 10px;
}

.w-70px {
  width: 70px;
}

.w-60px {
  width: 60px;
}

.w-100px {
  width: 100px;
}

.w-120px {
  width: 120px;
}

.w-150px {
  width: 150px;
}

.w-180px {
  width: 180px;
}

.w-200px {
  width: 200px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}

.w-20vw {
  width: 20vw !important;
}

.w-30vw {
  width: 30vw !important;
}

.w-40vw {
  width: 40vw !important;
}

.w-50vw {
  width: 50vw !important;
}

.w-60vw {
  width: 60vw !important;
}

.w-70vw {
  width: 70vw !important;
}

.w-80vw {
  width: 80vw !important;
}

.w-90vw {
  width: 90vw !important;
}

.w-95vw {
  width: 95vw !important;
}

.w-100vw {
  width: 100vw !important;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-60 {
  width: 60% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

/* Height Styling */
.h-30px {
  height: 30px;
}

.h-40px {
  height: 40px;
}

.h-50px {
  height: 50px;
}

.h-20px {
  height: 20px;
}

.h-15px {
  height: 15px;
}

.h-10px {
  height: 10px;
}

.h-70px {
  height: 70px;
}

.h-60px {
  height: 60px;
}

.h-100px {
  height: 100px;
}

.h-150px {
  height: 150px;
}

.h-200px {
  height: 200px;
}

.h-250px {
  height: 250px;
}

.h-300px {
  height: 300px;
}

.h-350px {
  height: 350px;
}

.h-100vh {
  height: 100vh !important;
}

.h-85vh {
  height: 85vh !important;
}

.h-75vh {
  height: 75vh !important;
}

.h-60vh {
  height: 60vh !important;
}

.h-50vh {
  height: 50vh !important;
}

.h-25vh {
  height: 25vh !important;
}

.overlay-hover,
.overlay-active {
  transition: 0.5s;
}

.overlay-hover:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.overlay-active:active {
  background-color: rgba(0, 0, 0, 0.2);
}

.bgBlackTransparent {
  background: rgba(0, 0, 0, 0.5);
}


/* Z-index Styling */
.zindex-80 {
  z-index: 80;
}

.zindex-81 {
  z-index: 81;
}

.zindex-82 {
  z-index: 82;
}

.zindex-83 {
  z-index: 83;
}

.zindex-84 {
  z-index: 84;
}

.zindex-85 {
  z-index: 85;
}

.zindex-86 {
  z-index: 86;
}

.zindex-87 {
  z-index: 87;
}

.zindex-88 {
  z-index: 88;
}

.zindex-89 {
  z-index: 89;
}

.zindex-90 {
  z-index: 90;
}

.zindex-91 {
  z-index: 91;
}

.zindex-92 {
  z-index: 92;
}

.zindex-93 {
  z-index: 93;
}

.zindex-94 {
  z-index: 94;
}

.zindex-95 {
  z-index: 95;
}

.zindex-96 {
  z-index: 96;
}

.zindex-97 {
  z-index: 97;
}

.zindex-98 {
  z-index: 98;
}

.zindex-99 {
  z-index: 99;
}

.zindex-100 {
  z-index: 100;
}

.zindex-101 {
  z-index: 101;
}

.zindex-102 {
  z-index: 102;
}

.zindex-103 {
  z-index: 103;
}

.zindex-104 {
  z-index: 104;
}

.zindex-105 {
  z-index: 105;
}

.zindex-106 {
  z-index: 106;
}

.zindex-107 {
  z-index: 107;
}

.zindex-108 {
  z-index: 108;
}

.zindex-109 {
  z-index: 109;
}

.zindex-110 {
  z-index: 110;
}
/* ./Z-index Styling */

/* Border Radius or Rounded Styling */
.rounded-circle {
  border-radius: 50% !important;
}

.more-rounded {
  border-radius: 50px;
}

.rounded-3px {
  border-radius: 3px;
}

.rounded-8px {
  border-radius: 8px;
}

.rounded-5px {
  border-radius: 5px;
}

.rounded-10px {
  border-radius: 10px;
}

.rounded-11px {
  border-radius: 11px;
}

.rounded-12px {
  border-radius: 12px;
}

.rounded-13px {
  border-radius: 13px;
}

.rounded-14px {
  border-radius: 14px;
}

.rounded-15px {
  border-radius: 15px;
}

.rounded-16px {
  border-radius: 16px;
}

.rounded-17px {
  border-radius: 17px;
}

.rounded-18px {
  border-radius: 18px;
}

.rounded-19px {
  border-radius: 19px;
}

.rounded-20px {
  border-radius: 20px;
}

.rounded-21px {
  border-radius: 21px;
}

.rounded-22px {
  border-radius: 22px;
}

.rounded-23px {
  border-radius: 23px;
}

.rounded-24px {
  border-radius: 24px;
}

.rounded-25px {
  border-radius: 25px;
}

.rounded-30px {
  border-radius: 30px;
}

.rounded-40px {
  border-radius: 40px;
}

input[type=text], input[type=number], input[type=email], input[type=password], select, .select2-container--bootstrap4 .select2-selection, textarea {
  border-radius: 0.7em !important;
}

input[type=text], input[type=number], input[type=email], input[type=password], select, textarea {
  padding: 22px 18px 22px 18px;
}

input[type=text].justleftside, input[type=number].justleftside, input[type=email].justleftside, input[type=password].justleftside {
  border-radius: 0.7em 0 0 0.7em !important;
}

input[type=text].justrightside, input[type=number].justrightside, input[type=email].justrightside, input[type=password].justrightside {
  border-radius: 0 0.7em 0.7em 0 !important;
}

.rounded-justrightside {
  border-radius: 0 0.7em 0.7em 0 !important;
}

.rounded-justleftside {
  border-radius: 0.7em 0 0 0.7em !important;
}
/* ./ Border Radius or Rounded Styling */

.badge-orange-bs {
  background-color: #ffa500;
}

.myalertnote-warning {
  border-left: 5px solid var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 75%);
}

.text-amber {
  color: rgb(146, 64, 14);
}

.myalertnote-danger {
  border-left: 5px solid var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 75%);
}

.myalertnote-success {
  border-left: 5px solid var(--success);
  background: color-mix(in srgb, var(--success), transparent 75%);
}

.myalertnote-primary {
  border-left: 5px solid var(--primary);
  background: color-mix(in srgb, var(--primary), transparent 75%);
}

.myalertnote-info {
  border-left: 5px solid var(--info);
  background: color-mix(in srgb, var(--info), transparent 75%);
}

.myalertnote-secondary {
  border-left: 5px solid var(--secondary);
  background: color-mix(in srgb, var(--secondary), transparent 75%);
}

.myalertnote-light {
  border-left: 5px solid var(--light);
  background: color-mix(in srgb, var(--light), transparent 75%);
}

.myalertnote-dark {
  border-left: 5px solid var(--dark);
  background: color-mix(in srgb, var(--dark), transparent 75%);
}

.fw-semibold {
  font-weight: 600;
}

.fw-medium {
  font-weight: 500;
}

.bg-lightbody1 {
  background-color: #f8fafc;
  background: #f8fafc;
}

.text-lightbody1 {
  color: #f8fafc !important;
}


.bg-indigoku {
  background-color: #161380;
  color: white;
}

.bg-indigo {
  background-color: #312E81;
}

.bg-indigo-2 {
    background-color: rgb(129 140 248 / 0.2);
}


.border-indigo {
    border-color: rgb(129 140 248 / 0.3);
}

.bg-indigo-2:hover {
  background-color: rgb(129 140 248 / 0.4);
}

.bg-indigo-2:active {
  background-color: rgb(129 140 248 / 0.3);
}


.bg-midnight-executive-1 {
  background-color: #0F172A;
  background: #0F172A;
}

.bg-midnight-executive-2 {
  background-color: #1E293B;
  background: #1E293B;
}

.bg-sapphire-deep-1 {
  background-color: #1E3A8A;
  background: #1E3A8A;
}

.bg-sapphire-deep-2 {
  background-color: #2563EB;
  background: #2563EB;
}

.bg-space-cadet-blue-1 {
  background-color: #1D263B;
  background: #1D263B;
}

.bg-space-cadet-blue-2 {
  background-color: #3E5C76;
  background: #3E5C76;
}

.bg-nordic-ocean-1 {
  background-color: #111827;
  background: #111827;
}

.bg-nordic-ocean-2 {
  background-color: #374151;
  background: #374151;
}

.bg-cobalt-profesional-1 {
  background-color: #002D5E;
  background: #002D5E;
}

.bg-cobalt-profesional-2 {
  background-color: #0056B3;
  background: #0056B3;
}

.bg-slate-tech-1 {
  background-color: #020617;
  background: #020617;
}

.bg-slate-tech-2 {
  background-color: #1D4ED8;
  background: #1D4ED8;
}

.bg-royal-navy-gradient-1 {
  background-color: #001F3F;
  background: #001F3F;
}

.bg-royal-navy-gradient-2 {
  background-color: #0074D9;
  background: #0074D9;
}

.bg-dusk-horizon-1 {
  background-color: #334155;
  background: #334155;
}

.bg-dusk-horizon-2 {
  background-color: #64748B;
  background: #64748B;
}

.bg-depp-teal-blue-1 {
  background-color: #082F49;
  background: #082F49;
}

.bg-depp-teal-blue-2 {
  background-color: #0369A1;
  background: #0369A1;
}

.bg-indigo-night-1 {
  background-color: #312E81;
  background: #312E81;
}

.bg-indigo-night-2 {
  background-color: #4338CA;
  background: #4338CA;
}

.boxThemesPallete {
  transition: .4s;
  border: 3px solid;
  border-color: white;
}

.boxThemesPallete:hover {
  border-color: rgba(226, 232, 240, 1);
}

.boxThemesPallete.activatedBox {
  box-shadow: 0 2px 4px 0 rgb(160, 165, 171);
  border-color: var(--primary);
}

.palleteColorElement .bg1 {
  border-radius: 10px 0 0 10px;
}

.palleteColorElement .bg2 {
  border-radius: 0 10px 10px 0;
}

.mydnone {
  display: none;
}


.rotateR5 {
  transform: rotateZ(5deg);
}

.rotateR8 {
  transform: rotateZ(8deg);
}

.rotateR10 {
  transform: rotateZ(10deg);
}

.rotateR30 {
  transform: rotateZ(30deg);
}

.rotateR45 {
  transform: rotateZ(45deg);
}

.rotateL2 {
  transform: rotateZ(-2deg);
}

.rotateL3 {
  transform: rotateZ(-3deg);
}

.rotateL4 {
  transform: rotateZ(-4deg);
}

.rotateL5 {
  transform: rotateZ(-5deg);
}

.rotateL8 {
  transform: rotateZ(-8deg);
}

.rotateL10 {
  transform: rotateZ(-10deg);
}

.rotateL30 {
  transform: rotateZ(-30deg);
}

.rotateL135 {
  transform: rotateZ(-135deg);
}

.text-shadow-black {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-shadow-black-2 {
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.conPinPaperBox {
  position: relative;
}

.pinpaperbox {
  width: 350px;
  min-height: 300px;
  background-color: red;
  /* border-bottom-right-radius: 40px 50px; */
  border-left: 5px solid;
  transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  clip-path: polygon(0% -5%, 100% -5%, 100% 100%, 98% 98%, 96% 95%, 94% 98%, 90% 100%, 88% 98%, 84% 100%, 81% 97%, 77% 100%, 73% 96%, 70% 100%, 66% 97%, 62% 100%, 58% 96%, 54% 100%, 50% 97%, 46% 100%, 42% 96%, 38% 100%, 34% 97%, 30% 100%, 26% 96%, 22% 100%, 18% 97%, 14% 100%, 10% 96%, 6% 100%, 2% 97%, 0 100%);
}

.clipPinPaper {
  clip-path: polygon(0% -5%, 100% -5%, 100% 100%, 98% 98%, 96% 95%, 94% 98%, 90% 100%, 88% 98%, 84% 100%, 81% 97%, 77% 100%, 73% 96%, 70% 100%, 66% 97%, 62% 100%, 58% 96%, 54% 100%, 50% 97%, 46% 100%, 42% 96%, 38% 100%, 34% 97%, 30% 100%, 26% 96%, 22% 100%, 18% 97%, 14% 100%, 10% 96%, 6% 100%, 2% 97%, 0 100%);
}

.clipPinPaperSharper {
  clip-path: polygon(
    0% -6%, 100% -6%, 100% 100%,
    98% 94%, 96% 100%, 94% 92%, 92% 100%,
    90% 93%, 88% 100%, 86% 91%, 84% 100%,
    82% 92%, 80% 100%, 78% 90%, 76% 100%,
    74% 93%, 72% 100%, 70% 91%, 68% 100%,
    66% 92%, 64% 100%, 62% 90%, 60% 100%,
    58% 93%, 56% 100%, 54% 91%, 52% 100%,
    50% 92%, 48% 100%, 46% 90%, 44% 100%,
    42% 93%, 40% 100%, 38% 91%, 36% 100%,
    34% 92%, 32% 100%, 30% 90%, 28% 100%,
    26% 93%, 24% 100%, 22% 91%, 20% 100%,
    18% 92%, 16% 100%, 14% 90%, 12% 100%,
    10% 93%, 8% 100%, 6% 91%, 4% 100%,
    2% 92%, 0% 100%
  );
}

.pinpaperbox:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.pinpaperbox:active {
  transform: scale(1);
}

.pinpaperbox .conNail {
  position: absolute;
  left: 50%;
  top: -2%;
  transform: translateX(-50%);
}

.pinpaperbox .nailEl {
  width: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
  position: relative;
}

.pinpaperbox .nailEl .eyeNail {
  position: absolute;
  width: 10px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  background: rgba(255, 255, 255, .5);
}


/* Font Styling */
.ff-publicsans,
.ff-publicsans * {
  font-family: "MyPublicSans", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-montserrat,
.ff-montserrat * {
  font-family: "Montserratku", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-indieflower,
.ff-indieflower * {
  font-family: "IndieFlower", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.ff-inter, 
.ff-inter * {
  font-family: 'Inter', Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif !important;
}

.conDesignTableKodeMeja {
  padding: 10px;
  box-sizing: border-box;
  transition: 0.5s;
  border-radius: 15px;
  border: 2px solid transparent;
}

.conDesignTableKodeMeja.activated {
  background: color-mix(in srgb, var(--success), transparent 85%);
  border: 2px solid var(--success);
}

.designTable1 {
  aspect-ratio: 1 / 1;
  /* background-color: red; */
  position: relative;
}

.designTable1 .chair1 {
  position: absolute;
  width: 10px;
  height: 70%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable1 .chair2 {
  position: absolute;
  width: 70%;
  height: 10px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.designTable1 .chair3 {
  position: absolute;
  width: 10px;
  height: 70%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable1 .chair4 {
  position: absolute;
  width: 70%;
  height: 10px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.designTable1 .centertable {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.designTable2 {
  aspect-ratio: 16 / 9;
  /* background-color: red; */
  position: relative;
}

.designTable2 .chair1 {
  position: absolute;
  width: 10px;
  height: 70%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable2 .chair2 {
  position: absolute;
  width: 35%;
  height: 10px;
  top: 0;
  left: 10%;
}

.designTable2 .chair3 {
  position: absolute;
  width: 35%;
  height: 10px;
  top: 0;
  right: 10%;
}

.designTable2 .chair4 {
  position: absolute;
  width: 10px;
  height: 70%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.designTable2 .chair5 {
  position: absolute;
  width: 35%;
  height: 10px;
  bottom: 0;
  left: 10%;
}

.designTable2 .chair6 {
  position: absolute;
  width: 35%;
  height: 10px;
  bottom: 0;
  right: 10%;
}

.designTable2 .centertable {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.conDesignTable {
  padding: 10px;
  box-sizing: border-box;
  /* transition: 0.5s; */
  border-radius: 20px;
  border: 2px solid transparent;
}

.conDesignTable.activetable {
  background: color-mix(in srgb, var(--primary), transparent 85%);
  border: 2px solid var(--primary);
}

.conDesignBooked {
  background: color-mix(in srgb, var(--warning), transparent 85%);
  border: 2px solid var(--warning);
}

.bg-gradient-orange-yellow {
  background: -webkit-linear-gradient(315deg, var(--primary), var(--warning)) !important;
}

.mytext-white {
  color: white !important;
}

.nav-item, .nav-link {
  border-radius: 10px 30px 30px 10px !important;
}

.nav-link3d {
  box-shadow: 2px 2px 4px #32363c, -1px -1px 2px #181a1d !important;
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary), var(--dark) 60%));
  transition: .2s;
}

.nav-link3d:hover {
  box-shadow: 4px 4px 8px #78808a, -2px -2px 4px #15171a !important;
  transform: translateY(-5%);
}

.nav-link3d:active {
  box-shadow: inset 2px 2px 4px #32363c, -1px -1px 2px #1d1818 !important;
  transform: translateY(0%);
}

.nav-link3d.active {
  box-shadow: inset 2px 2px 4px #32363c, -1px -1px 2px #1d1818 !important;
  transform: translateY(0) !important;
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary), var(--dark) 90%));
}

.box-overlay {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 0;
  z-index: 1040;
}

.mymodal-alert {
  width: 40vw;
  height: auto;
  margin: 20vh auto;
  /* background-color: #1F283D; */
  /* border: 1px solid white; */
  border-radius: 1rem;
}

/* Margin Styling */
.mt-10vh {
  margin-top: 10vh !important;
}
/* ./ Margin Styling */

/* Padding Styling */
.pt-10vh {
  padding-top: 10vh !important;
}

.pb-20px {
  padding-bottom: 20px !important;
}
.pb-25px {
  padding-bottom: 25px !important;
}
.pb-30px {
  padding-bottom: 30px !important;
}
.pb-35px {
  padding-bottom: 35px !important;
}
.pb-40px {
  padding-bottom: 40px !important;
}
.pb-45px {
  padding-bottom: 45px !important;
}
.pb-50px {
  padding-bottom: 50px !important;
}
.pb-55px {
  padding-bottom: 55px !important;
}
.pb-60px {
  padding-bottom: 60px !important;
}
.pb-65px {
  padding-bottom: 65px !important;
}
.pb-70px {
  padding-bottom: 70px !important;
}
.pb-75px {
  padding-bottom: 75px !important;
}
.pb-80px {
  padding-bottom: 80px !important;
}
.pb-85px {
  padding-bottom: 85px !important;
}
.pb-90px {
  padding-bottom: 90px !important;
}

.pt-20px {
  padding-top: 20px !important;
}
.pt-25px {
  padding-top: 25px !important;
}
.pt-30px {
  padding-top: 30px !important;
}
.pt-35px {
  padding-top: 35px !important;
}
.pt-40px {
  padding-top: 40px !important;
}
.pt-45px {
  padding-top: 45px !important;
}
.pt-50px {
  padding-top: 50px !important;
}
.pt-55px {
  padding-top: 55px !important;
}
.pt-60px {
  padding-top: 60px !important;
}
.pt-65px {
  padding-top: 65px !important;
}
.pt-70px {
  padding-top: 70px !important;
}
.pt-75px {
  padding-top: 75px !important;
}
.pt-80px {
  padding-top: 80px !important;
}
.pt-85px {
  padding-top: 85px !important;
}
.pt-90px {
  padding-top: 90px !important;
}

/* ./ Padding Styling */

.border-1px {
  border-width: 1px !important;
}

.border-2px {
  border-width: 2px !important;
}

.border-3px {
  border-width: 3px !important;
}

.border-4px {
  border-width: 4px !important;
}

.border-5px {
  border-width: 5px !important;
}

.border-6px {
  border-width: 6px !important;
}

.border-7px {
  border-width: 7px !important;
}

.border-8px {
  border-width: 8px !important;
}

.border-9px {
  border-width: 9px !important;
}

.border-10px {
  border-width: 10px !important;
}

.text-shadow-white {
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 1);
}

/* Scrollbar style */
.scrollViewVertical {
  overflow-y: scroll;
  /* color: ; */
  overflow-x: hidden !important;
}

.scrollViewHorizontal {
  overflow-y: hidden !important;
  /* color: ; */
  overflow-x: scroll !important;
}

.scrollViewVerticalAuto {
  overflow-y: auti;
  /* color: ; */
  overflow-x: hidden !important;
}

.scrollViewHorizontalAuto {
  overflow-y: hidden !important;
  /* color: ; */
  overflow-x: auto !important;
}

.scrollView::-webkit-scrollbar,
.col-form-auth::-webkit-scrollbar {
  width: 3px !important;
  position: absolute;
  margin: 0 !important;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(143, 143, 143);
  border-radius: 10px;
}

.scrollDisplayNone::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollDisplayThin::-webkit-scrollbar {
  scrollbar-width: 1px !important;
}

.letter-spacing-1px {
  letter-spacing: 1px;
}

.letter-spacing-2px {
  letter-spacing: 2px;
}

.letter-spacing-3px {
  letter-spacing: 3px;
}

.letter-spacing-4px {
  letter-spacing: 4px;
}

.letter-spacing-5px {
  letter-spacing: 5px;
}

.border-whitesmoke {
  border-color: rgba(226, 232, 240, 1);
}

.notifCard .actionButtonNotifCard {
  opacity: 0;
  transform: translateY(50%);
  transition: .3s;
}

.notifCard:hover .actionButtonNotifCard {
  opacity: 1;
  transform: translateY(0);
}

.mytoastmodern {
  width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  position: relative;
}

.mytoastmodern .toastbody {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
}

.mytoastmodern .toastglow {
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: linear-gradient(90deg, var(--info), #6366f1);
  filter: blur(8px);
  opacity: 0.3;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0px;
  border-radius: 30px;
}

.glowingIndigo {
  /* box-shadow: rgba(22, 19, 128, 0.5) 0px 13px 27px -5px, rgba(22, 19, 128, 0.8) 0px 8px 16px -8px; */
  box-shadow: rgba(22, 19, 128, 0.3) 0px 8px 24px, rgba(22, 19, 128, 0.3) 0px 16px 56px, rgba(22, 19, 128, 0.3) 0px 24px 80px;
  animation: glowingShadowIndigo 1s cubic-bezier(0.42, 0, 0.58, 1.0) infinite alternate-reverse;
}

.textwrap {
  white-space: normal !important;
}

.myCounterBadge {
  position: absolute;
  top: -10%;
  right: -10%;
}

.myCounterBadge2 {
  position: absolute;
  top: 0%;
  right: 0%;
}

.bgcover {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.overlayBlackAbsolute {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
}

.bgattachmentfixed {
  background-attachment: fixed;
}

.mybgformlogin {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  transition: transform 0.2s ease-out;
  z-index: -1;
}

.mycontainerlogin {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
}

.mycontainerlogin button {
  transform: translateZ(20px) !important;
}

.border-box {
  box-sizing: border-box;
}

.text-coffee {
  color: #D4A373 !important;
}

/* Login Page */
/* .loginPage {
  --accent: #d4a373;
  --accent-hover: #bc8a5f;
  --glass: rgba(255, 255, 255, 0.1);
  --text-light: #f8f9fa;
} */
.loginPage {
  --accent: var(--primary);
  --accent-hover: color-mix(in srgb, var(--primary), transparent 30%);
  --glass: rgba(255, 255, 255, 0.1);
  --text-light: #f8f9fa;
}
/* Enhanced Inputs */
.loginPage .input-group {
    position: relative;
    transition: transform 0.3s;
}

.loginPage .input-group:focus-within {
  transform: scale(1.02);
}

.loginPage .input-group .icon-left {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  width: 20px;
  pointer-events: none;
}

/* Password Toggle Styling */
.loginPage .input-group .toggle-password {
  position: absolute;
  right: 20px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.4);
  width: 20px;
  cursor: pointer;
  transition: color 0.3s;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
}

.loginPage .input-group .toggle-password:hover {
  color: var(--accent);
}

.loginPage .input-group input {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px !important;
  color: white;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s;
}

.loginPage .input-group input:focus {
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(212, 163, 115, 0.15);
}

/* Glowing Button */
.loginPage .login-btn {
    width: 100%;
    padding: 18px;
    background: var(--accent);
    border: none;
    border-radius: 18px;
    color: #2b1d10;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.p-6 {
  padding: 25px 50px 25px 55px !important;
}

.pl-6 {
  padding-left: 50px !important;
}

.pr-6 {
  padding-right: 50px !important;
}

.pt-6 {
  padding-top: 25px !important;
}

.pb-6 {
  padding-bottom: 25px !important;
}

/* .loginPage .login-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
} */

/* .loginPage .login-btn:hover::after {
  left: 120%;
} */

.loginPage .login-btn i {
  transition: .3s ease-in-out;
}

.loginPage .login-btn:hover i {
  transform: translateX(5px);
}

.login-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 15px 30px rgba(212, 163, 115, 0.3);
    transform: translateY(-3px);
}


.input-bs3 {
  padding: 10px;
  box-shadow: none;
  background: transparent !important;
  border-color: #e75b1e;
}

.input-bs3:focus {
  border-color: transparent !important;
  box-shadow: inset 0 -2px #e75b1e;
}

.createTableLayoutPage .areaDragging {
  width: 100%;
  /* aspect-ratio: 4 / 3; */
  background-color: #f8f9fa;
  background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
                linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
                linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px 20px, 20px 0;
  position: relative;
  /* overflow: hidden; */
  /* border-radius: 24px 0 0 0; */
}

.disableSelectionText, 
.disableSelectionText * {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Sintaks Standar (Chrome, Firefox, Opera, Edge) */
}

/* Transition Styling*/
.transition3ms {
  transition: 0.3s ease !important;
}

.transition5ms {
  transition: 0.5s ease !important;
}
/* ./ Transition Styling */

.shadow-0 {
  box-shadow: none !important;
}

.border-dashed {
  border-style: dashed;
}

.onActiveBorderPrimary:active {
  border-color: var(--primary) !important;
}

/* Enhanced Inputs */
.input-group.myInputElegan {
  position: relative;
  transition: transform 0.3s;
}

.myInputElegan.input-group.scalezoom:focus-within {
  transform: scale(1.02);
}

.input-group.myInputElegan .icon-left {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  pointer-events: none;
}

.input-group.myInputElegan .icon-right {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  pointer-events: none;
}

.input-group.myInputElegan input {
  width: 100%;
  outline: none;
  transition: all 0.3s !important;
}

.onActiveBorderWarning:active {
  border-color: var(--warning) !important;
}

.onHoverBorderWarning:hover {
  border-color: var(--warning) !important;
}

.onFocusBorderPrimary:focus {
  border-color: var(--primary) !important;
}

.onFocusShadowPrimary:focus {
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary), transparent 50%) !important;
}

.my-stickytop {
  position: sticky !important;
  top: 15px !important;
}

.boxUploadFile {
  position: relative;
}

.boxUploadFile .previewImgContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@keyframes glowingShadowIndigo {
  0% {
    box-shadow: rgba(22, 19, 128, 0.3) 0px 8px 24px, rgba(22, 19, 128, 0.3) 0px 16px 56px, rgba(22, 19, 128, 0.3) 0px 24px 80px;
  }
  100% {
    box-shadow: rgba(22, 19, 128, 0.6) 0px 8px 24px, rgba(22, 19, 128, 0.6) 0px 16px 56px, rgba(22, 19, 128, 0.6) 0px 24px 80px;
  }
}