@font-face {
  font-family: 'MFontR';
  src: url('/assets/Tajawal-Regular-C0G7EEKK.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'MFontB';
  src: url('/assets/Tajawal-Bold-BFK3sEuU.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* #region Global */
  --PrimaryColor: #1976d2;
  --BGColor: #f8f7fa;
  --TextColor: #000;
  /* #endregion */

  /* #region MSidebar */
  --MSideBarBGColor: #fff;
  --MSideBarItemHover: rgba(0, 0, 0, 0.05);
  --MSidebarItemsGroupHeader: rgba(0, 0, 0, 0.05);
  --MSidebarItemsGroupHeaderActive: rgba(0, 0, 0, 0.1);
  /* #endregion */

  /* #region MHeader */
  --MHeaderBGColor: rgba(255, 255, 255, 0.7);
  --MHeaderBTNHover: rgba(0, 0, 0, 0.05);
  /* #endregion */

  /* #region MButton */
  --MButtonBG: rgba(0, 0, 0, 0.1);
  /* #endregion */

  /* #region MGroup */
  --MGroupBG: rgba(255, 255, 255, 0.7);
  /* #endregion */

  /* #region MField */
  --MFieldBG: #fff;
  --MFieldLabelColor: rgba(0, 0, 0, 0.6);
  --MFieldBorder: rgba(0, 0, 0, 0.6);
  --MFieldDisabled: #777;
  /* #endregion */

  /* #region MImage */
  --MImageBG: rgba(0, 0, 0, 0.1);
  --MImageColor: #000;
  /* #endregion */

  /* #region RequestDetailsTable */
  --RequestDetailsTableColor1: rgba(0, 0, 0, 0.05);
  --RequestDetailsTableColor2: rgba(0, 0, 0, 0.1);
  --RequestDetailsTableColor3: rgba(0, 0, 0, 0.4);
  /* #endregion */

  /* #region MStepper */
  --MStepperheaderHoverBG: rgba(0, 0, 0, 0.05);
  --MStepperContentBG: rgba(0, 0, 0, 0.05);
  /* #endregion */
}

.DarkMode {
  /* #region Global */
  --PrimaryColor: #1976d2;
  --BGColor: #25293c;
  --TextColor: #fff;
  /* #endregion */

  /* #region MSidebar */
  --MSideBarBGColor: #2f3349;
  --MSideBarItemHover: rgba(255, 255, 255, 0.05);
  --MSidebarItemsGroupHeader: rgba(255, 255, 255, 0.05);
  --MSidebarItemsGroupHeaderActive: rgba(255, 255, 255, 0.1);
  /* #endregion */

  /* #region MHeader */
  --MHeaderBGColor: rgba(47, 51, 73, 0.7);
  --MHeaderBTNHover: rgba(255, 255, 255, 0.05);
  /* #endregion */

  /* #region MButton */
  --MButtonBG: rgba(255, 255, 255, 0.1);
  /* #endregion */

  /* #region MGroup */
  --MGroupBG: rgba(47, 51, 73, 0.7);
  /* #endregion */

  /* #region MField */
  --MFieldBG: #2f3349;
  --MFieldLabelColor: rgba(255, 255, 255, 0.6);
  --MFieldBorder: rgba(255, 255, 255, 0.6);
  --MFieldDisabled: #aaa;
  /* #endregion */

  /* #region MComboBox */
  --AttachmentBG: #25293c;
  --AttachmentBorder: #666;
  /* #endregion */

  /* #region MImage */
  --MImageBG: rgba(255, 255, 255, 0.1);
  --MImageColor: #fff;
  /* #endregion */

  /* #region RequestDetailsTable */
  --RequestDetailsTableColor1: rgba(255, 255, 255, 0.05);
  --RequestDetailsTableColor2: rgba(255, 255, 255, 0.1);
  --RequestDetailsTableColor3: rgba(255, 255, 255, 0.4);
  /* #endregion */

  /* #region MStepper */
  --MStepperheaderHoverBG: rgba(255, 255, 255, 0.05);
  --MStepperContentBG: rgba(255, 255, 255, 0.05);
  /* #endregion */
}

body {
  min-width: 100vw;
  min-height: 100vh;
  background: var(--BGColor);
  font-family: 'MFontR';
  font-size: 14px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* #region ScrollBar */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  width: 10px;
}

::-webkit-scrollbar:hover * {
  width: 10px;
}

::-webkit-scrollbar-track:hover {
  width: 10px;
}

/* #endregion */

/* #region Component */

.ComponentWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 85px 0 10px 0;
  color: var(--TextColor);
}

.ComponentButtons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

/* #endregion */

/* #region MButton */

.MButton {
  display: flex;
  background-color: var(--PrimaryColor);
  padding: 10px 30px;
  border-radius: 5px;
  font-family: 'MFontB';
  cursor: pointer;
  transition-duration: 0.3s;
  color: #fff;
  text-decoration: none;
  margin: 5px;
}

.MButton:hover {
  background-color: var(--MButtonBG);
  color: var(--PrimaryColor);
  fill: var(--PrimaryColor);
}

/* #endregion */

/* #region MGroup */

.MGroup {
  display: flex;
  background-color: var(--MGroupBG);
  border-radius: 5px;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  width: 100%;
  box-shadow: 0 2px 5px 1px #0000001a;
}

.ModalMGroup {
  margin: 10px 20px;
}

.MGroupTitle {
  display: flex;
  width: 100%;
  font-family: 'MFontB';
  font-size: 16px;
  justify-content: center;
  color: var(--TextColor);
  margin-bottom: 15px;
}

.MGroupButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px;
}

.MGroupSeperator {
  display: flex;
  width: calc(100% - 10px);
  justify-content: center;
  height: 1px;
  margin: 20px 0;
  background-color: #777;
}

/* #endregion */

/* #region MField */

.MField {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition-duration: 0.3s;
  z-index: 1;
  align-items: center;
  font-size: 16px;
  font-family: 'MFontR';
  margin: 15px 5px;
  min-height: 35px;
  flex: 1;
  min-width: 150px;
}

.MField label {
  display: flex;
  width: min-content;
  position: absolute;
  pointer-events: none;
  top: 7px;
  right: 5px;
  font-family: 'MFontR';
  font-size: 14px;
  color: var(--MFieldLabelColor);
  transition-duration: 0.3s;
  padding: 0 3px;
  z-index: 5;
  white-space: nowrap;
}

.MField label::before {
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  bottom: 3px;
  right: 0;
  background-color: var(--MFieldBG);
  z-index: -1;
  transition-duration: 0.3s;
}

.MField input,
.MField textarea {
  margin: 6px 8px;
  display: flex;
  width: 100%;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  outline: 0;
  font-family: 'MFontR';
  font-size: 15px;
  color: var(--TextColor);
}

.MFieldBG {
  display: flex;
  width: calc(100% - 4px);
  height: 100%;
  border-radius: 5px;
  background-color: var(--MFieldBG);
  border: 1px solid var(--MFieldBorder);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transition-duration: 0.3s;
}

.MFieldBTN {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  left: 7px;
  top: 4px;
  margin: 0;
  justify-content: center;
  align-items: center;
}

.MFieldBTN svg {
  display: flex;
  width: 60%;
  height: 60%;
  fill: #fff;
}

.MField input:focus~.MFieldBG,
.MField textarea:focus~.MFieldBG {
  border: 1px solid var(--PrimaryColor);
}

.MField input:valid:not(:focus)~.MFieldBG,
.MField textarea:valid:not(:focus)~.MFieldBG {
  border: 1px solid var(--TextColor);
}

.MField input:focus~label,
.MField textarea:focus~label {
  color: var(--PrimaryColor);
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}

.MField input:valid:not(:focus)~label,
.MField textarea:valid:not(:focus)~label {
  color: var(--TextColor);
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}

.MField input:read-only,
.MField textarea:read-only {
  color: var(--MFieldDisabled);
  cursor: default;
  line-height: 0.5;
}

.MField input:read-only~.MFieldBG,
.MField textarea:read-only~.MFieldBG {
  border: 1px dashed var(--MFieldDisabled);
}

.MField input:read-only~label,
.MField textarea:read-only~label {
  color: var(--MFieldDisabled);
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}

.MField input[DateType='Day'],
.MField input[DateType='Month'] {
  width: 20%;
  max-width: 30px;
  margin: 5px;
  text-align: center;
}

.MField input[DateType='Year'] {
  flex: 1;
  margin: 5px;
  text-align: right;
}

/* #endregion */

/* #region Attachments */

.Attachments {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.Attachment {
  display: flex;
  width: 120px;
  border-radius: 5px;
  border: 1px solid var(--AttachmentBorder);
  background-color: var(--AttachmentBG);
  margin: 5px;
}

.AttachmentContainer {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.AttachmentImage {
  display: flex;
  width: 100%;
  height: 100px;
  border-radius: 5px;
  margin: 5px 5px 0 5px;
  justify-content: center;
  align-items: center;
  font-family: 'MFontB';
}

.AttachmentImage img {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.AttachmentButtons {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.AttachmentButtons .MButton {
  min-width: 0;
  width: 20px;
  height: 20px;
  margin: 5px 2.5px;
  padding: 5px;
}

.AttachmentButtons svg {
  display: flex;
  width: 100%;
  height: 100%;
  fill: #fff;
}

.AttachmentButtons .MButton:hover svg {
  fill: var(--PrimaryColor);
}

.AttachmentName {
  display: flex;
  width: 100%;
  margin: 0 5px 5px 5px;
  border-top: 1px solid var(--AttachmentBorder);
}

.AttachmentName input {
  display: flex;
  width: 100%;
  border: 0;
  outline: none;
  background-color: transparent;
  text-align: center;
  margin-top: 5px;
  font-family: 'MFontR';
  font-size: 14px;
  color: var(--TextColor);
}

input[type='file'] {
  display: none;
}

/* #endregion */

/* #region Modals */

/* ========== Modals ========== */

.ActiveModal {
  overflow: hidden;
}

.ModalContainer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 201;
  display: none;
  animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ModalContainer.out {
  transform: scale(1);
  animation: unfoldOut 0.5s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ModalContainer.out .ModalBackground .Modal {
  animation: zoomOut 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ModalContainer .ModalBackground {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}

.ModalContainer .ModalBackground .Modal {
  background-color: var(--BGColor);
  display: inline-block;
  border-radius: 4px;
  font-weight: 300;
  position: relative;
  width: 90vw;
  min-width: 250px;
  max-width: max-content;
  vertical-align: middle;
  overflow: auto;
  max-height: 95vh;
  padding: 0;
  margin-top: 10px;
  transform: scale(0);
  animation: zoomIn 0.3s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ModalHeaderRow {
  width: 100%;
  background-color: var(--Color2);
  border-bottom: 2px solid var(--TextColor);
  border-radius: 4px 4px 0 0;
}

.ModalHeaderTitle {
  font-family: MFontB;
  font-size: 16px;
  color: var(--TextColor);
  padding: 7px 0 10px 0;
}

.ModalHeaderCloseBTN {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.ModalHeaderCloseBTN svg {
  width: 20px;
  fill: var(--TextColor);
}

.ModalHeaderCloseBTN:active svg {
  fill: var(--PrimeryColor);
}

.ModalContent {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  overflow-y: auto;
  max-height: calc(90vh - 65px);
  padding: 10px 0;
}

.ModalContentGroup {
  width: calc(100% - 10px);
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
  border-radius: 4px;
  justify-content: center;
  position: relative;
}

.ModalContentGroupTitle {
  width: 100%;
  display: flex;
  font-family: MFontB;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #fff;
  border-radius: 4px 4px 0 0;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 7px 0;
  justify-content: center;
  margin-bottom: 8px;
}

.ModalContentGroupFields {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.ModalContentGroup input::placeholder {
  color: #666;
  opacity: 1;
}

.ModalContentGroup .MFieldInput,
.ModalContentGroup .MFieldValue {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #666;
}

.ModalContentGroupButtons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 5px 0;
  justify-content: center;
}

.ModalContentGroupButtons .MButton {
  flex: 1;
  max-width: 300px;
}

.ModalButtons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }

  50% {
    transform: scaleY(0.005) scaleX(1);
  }

  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }

  50% {
    transform: scaleY(0.005) scaleX(1);
  }

  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

/* ============= Essential Modals Style ============== */

#MessageModal {
  z-index: 300;
}

#MessageModal .TheMessage {
  font-family: MFontB;
  font-size: 16px;
  color: var(--TextColor);
  display: flex;
  margin: 20px 5px;
  width: 100%;
  justify-content: center;
  text-justify: inter-word;
  flex-wrap: wrap;
  text-align: center;
}

#ChooseModal {
  z-index: 200;
}

#ChooseModal .ChooseModalQuestion {
  font-family: MFontB;
  font-size: 16px;
  color: var(--TextColor);
  display: flex;
  margin: 20px 10px;
  width: fit-content;
  justify-content: center;
  text-justify: inter-word;
  flex-wrap: wrap;
  text-align: center;
}

#LoadingModal {
  z-index: 400;
}

#LoadingModal .LoadingText {
  font-family: MFontB;
  font-size: 16px;
  color: var(--TextColor);
  margin: 10px 5px;
  width: 100%;
}

/* #endregion */

.MlabelText {
  display: flex;
  width: min-content;
  white-space: nowrap;
  font-size: 17px;
  font-family: 'MFontB';
}

.MlabelNumber {
  display: flex;
  width: min-content;
  white-space: nowrap;
  font-size: 17px;
  font-family: 'MFontB';
  margin: 5px;
}

.RequestsMTable {
  width: 100%;
  border: 1px solid var(--RequestDetailsTableColor3);
  border-radius: 5px;
  margin: 5px 20px;
}

.RequestsMTable tr:nth-child(even) {
  background-color: var(--RequestDetailsTableColor1);
}

.RequestsMTable th {
  padding: 7px 10px;
  background-color: var(--RequestDetailsTableColor2);
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--RequestDetailsTableColor3);
  font-size: 14px;
}

.RequestsMTable td {
  padding: 5px 10px;
  min-width: 150px;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* #region Images Container  */

.ImagesContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: min-content;
  margin: 10px 0;
}

.ImagesContainer .InformationRequestImage {
  display: flex;
  border: 1px solid var(--MediumLightColor);
  border-radius: 5px;
  flex-wrap: wrap;
  width: min-content;
  padding: 5px;
  margin: 5px;
  height: min-content;
}

.ImagesContainer .InformationRequestImage .InformationRequestImageTitle {
  display: flex;
  width: 100%;
  padding: 5px 0 15px 0;
  justify-content: center;
  white-space: nowrap;
}

.ImagesContainer .InformationRequestImage .InformationRequestImagePreview {
  display: flex;
  width: 100%;
  border-radius: 5px;
  width: 120px;
  height: 120px;
  position: relative;
}

.ImagesContainer .InformationRequestImage .InformationRequestImagePreview .InformationRequestImagePreviewOverlay {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition-duration: 0.3s;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.InformationRequestImagePreviewOverlay svg {
  width: 40px;
  height: 40px;
  display: flex;
}

.ImagesContainer .InformationRequestImage .InformationRequestImagePreview .InformationRequestImagePreviewOverlay:hover {
  opacity: 1;
}

.ImagesContainer .InformationRequestImage .InformationRequestImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* #endregion */

/* #region MStepper */

.MStepper {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.MStepperHeader {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 10px;
}

.MStepHeader {
  display: flex;
  width: min-content;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  transition-duration: 0.3s;
}

.MStepHeaderIcon {
  display: flex;
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  border-radius: 50%;
  border: 1px solid var(--TextColor);
  color: var(--TextColor);
  justify-content: center;
  align-items: center;
  font-family: 'MFontB';
  line-height: 0.3;
  transition-duration: 0.3s;
  margin-left: 5px;
}

.MStepHeaderTitle {
  font-family: 'MFontB';
  display: flex;
  white-space: nowrap;
  width: min-content;
  height: 100%;
  align-items: center;
  color: var(--TextColor);
  transition-duration: 0.3s;
}

.ActiveMStepHeader .MStepHeaderIcon {
  border: 1px solid var(--PrimaryColor);
  background-color: var(--PrimaryColor);
  color: #fff;
}

.ActiveMStepHeader .MStepHeaderTitle {
  color: var(--PrimaryColor);
}

.MStepHeader:hover {
  background-color: var(--MStepperheaderHoverBG);
}

.MStepperHeaderLine {
  display: flex;
  flex: 1;
  background-color: var(--TextColor);
  height: 1px;
}

.MStepperContent {
  display: flex;
  width: 100%;
  background-color: var(--MStepperContentBG);
  border-radius: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.MStepContent {
  display: flex;
  min-width: calc(100% - 20px);
  padding: 20px 10px;
  height: min-content;
  transition-duration: 0.3s;
  transform: translateX(0);
  justify-content: center;
}

.MStepContentWrapper {
  display: none;
  flex-wrap: wrap;
}

.ActiveMStepContent .MStepContentWrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* #endregion */

/* #region MImage */

.MImage {
  display: flex;
  width: 130px;
  max-width: 130px;
  border: 1px solid #aaa;
  border-radius: 5px;
  flex-wrap: wrap;
  width: min-content;
  margin: 5px;
}

.MImagePreview {
  display: flex;
  width: 120px;
  height: 120px;
  justify-content: center;
  align-items: center;
  margin: 5px;
  position: relative;
}

.MImagePreview img {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.MImage:not([noimage]) .MImagePreview:hover .MImageButtons {
  pointer-events: auto;
  opacity: 1;
}

.MImagePicker {
  display: flex;
  width: 100%;
}

.MImagePicker .MButton {
  width: 100%;
  padding: 7px;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 45px;
}

.MImageButtons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition-duration: 0.3s;
}

.MImageBTN {
  display: flex;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.MImageBTN svg {
  display: flex;
  width: 60%;
  height: 60%;
  fill: #fff;
  transition-duration: 0.3s;
}

.MImageBTN:hover svg {
  width: 70%;
  height: 70%;
}

.ShowMImage:hover svg {
  fill: var(--PrimaryColor)
}

.DeleteMImage:hover svg {
  fill: red
}

.MImage[required] .DeleteMImage {
  display: none;
}

/* #endregion */:root {
  --MSideBarBGColor: #fff;
  --MSideBarItemHover: rgba(25, 118, 210, 0.1);
  --MSidebarItemsGroupHeader: rgba(0, 0, 0, 0.05);
  --MSidebarItemsGroupHeaderActive: rgba(0, 0, 0, 0.05);
}

.DarkMode {
  --MSideBarBGColor: #2f3349;
  --MSideBarItemHover: rgba(25, 118, 210, 0.1);
  --MSidebarItemsGroupHeader: rgba(255, 255, 255, 0.05);
  --MSidebarItemsGroupHeaderActive: rgba(255, 255, 255, 0.05);
}

.MSidebar {
  display: flex;
  width: 250px;
  height: 100vh;
  transition-duration: 0.3s;
  overflow: hidden;
  position: absolute;
  box-shadow: -5px 0 5px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.MSidebar ::-webkit-scrollbar {
  width: 0;
}

.CollapsedMSidebar {
  transform: translateX(100%);
}

.MSidebarBody {
  display: flex;
  position: fixed;
  width: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.MSidebarWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  background-color: var(--MSideBarBGColor);
}

.MSidebarHeader {
  display: flex;
  width: calc(100% - 6px);
  margin: 10px 0;
  padding: 0 0 0 5px;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
}

.MSidebarHeaderIcon {
  display: flex;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0);
  padding: 5px 0 5px 5px;
  border-radius: 5px;
  margin-left: 0;
}

.MSidebarHeaderIcon svg {
  display: flex;
  width: 100%;
  height: 100%;
  fill: var(--TextColor);
}

.MSidebarHeaderContent {
  display: flex;
  width: calc(100% - 50px);
  flex-wrap: wrap;
  line-height: 1.6;
  overflow: hidden;
}

.MSidebarHeaderCompanyName {
  display: flex;
  width: 100%;
  color: var(--TextColor);
  line-height: 1.4;
  font-family: 'MFontB';
  font-size: 15px;
  white-space: nowrap;
}

.MSidebarHeaderSystemName {
  display: flex;
  width: 100%;
  color: var(--TextColor);
  font-family: 'MFontR';
  font-size: 14px;
  white-space: nowrap;
}

.MSidebarUserContent {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  transition-duration: 0.5s;
  overflow: hidden;
  margin-right: 15px;
}

.MSidebarUserName {
  font-family: 'MFontB';
  font-size: 14px;
  display: flex;
  color: #fff;
  white-space: nowrap;
  width: 100%;
}

.MSidebarUserTitle {
  font-family: 'MFontR';
  font-size: 13px;
  display: flex;
  color: #fff;
  white-space: nowrap;
  width: 100%;
}

.MSidebarUser {
  display: flex;
  flex-wrap: wrap;
  height: 53px;
  width: 100%;
  background-color: var(--PrimaryColor);
  margin: 5px 0;
  justify-content: center;
  align-items: center;
}

.MSidebarItemsGroup {
  display: flex;
  width: calc(100% - 14px);
  flex-wrap: wrap;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: 5px;
  background-color: var(--MSidebarItemsGroupHeader);
}

.MSidebarItemsGroupHeader {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 7.5px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  cursor: pointer;
  user-select: none;
  outline: 0;
}

.MSidebarItemsGroupHeaderIcon {
  display: flex;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.MSidebarItemsGroupHeaderIcon svg {
  display: flex;
  width: 100%;
  height: 100%;
  fill: var(--TextColor);
}

.MSidebarItemsGroupHeaderText {
  display: flex;
  width: min-content;
  color: var(--TextColor);
  font-family: 'MFontB';
  padding-right: 5px;
  white-space: nowrap;
  font-size: 15px;
  flex: 1;
}

.MSidebarItemsGroupHeaderArrow {
  display: flex;
  width: 15px;
  height: 15px;
  justify-content: center;
  align-items: center;
  transition-duration: 0.3s;
}

.MSidebarItemsGroupHeaderArrow svg {
  display: flex;
  width: 100%;
  height: 100%;
  fill: var(--TextColor);
}

.ActiveMSidebarItemsGroup .MSidebarItemsGroupHeader {
  background-color: var(--MSidebarItemsGroupHeader);
  border-radius: 5px 5px 0 0;
}

.ActiveMSidebarItemsGroup .MSidebarItemsGroupHeaderArrow {
  transform: rotate(90deg);
}

.ActiveMSidebarItemsGroup .MSidebarItemsGroupHeaderText {
  color: var(--TextColor);
}

.ActiveMSidebarItemsGroup .MSidebarItemsGroupHeaderIcon svg {
  fill: var(--TextColor);
}

.ActiveMSidebarItemsGroup .MSidebarItemsGroupHeaderArrow svg {
  fill: var(--TextColor);
}

.ActiveMSidebarItemsGroup .MSidebarItems {
  max-height: 100vh;
  transition: max-height 0.3s ease-in;
}

.MSidebarItems {
  display: flex;
  width: 100%;
  max-height: 0;
  flex-wrap: wrap;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.MSidebarContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: min-content;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px 0;
  align-items: center;
  min-height: calc(100% - 260px);
  max-height: calc(100% - 260px);
  justify-content: center;
  align-content: flex-start;
  padding: 5px 0;
}

.MSidebarItem {
  display: flex;
  width: calc(100% - 18px);
  padding: 2px;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition-duration: 0.3s;
  border-radius: 5px;
  margin-bottom: 6px;
}

.MSidebarItemIcon {
  display: flex;
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  background-color: rgba(255, 255, 255, 0);
  padding: 5px;
  border-radius: 5px;
  margin-left: 10px;
}

.MSidebarItemIcon svg {
  display: flex;
  width: 100%;
  height: 100%;
  fill: var(--TextColor);
  transition-duration: 0.3s;
}

.MSidebarItemText {
  display: flex;
  width: 100%;
  color: var(--TextColor);
  line-height: 1.4;
  font-family: 'MFontB';
  font-size: 15px;
  white-space: nowrap;
  transition-duration: 0.3s;
}

.MSidebarItemsGroup .MSidebarItems {
  justify-content: center;
}

.MSidebarItemsGroup .MSidebarItem {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 7px 10px;
  margin: 0 5px 7px 5px;
  transition-duration: 0.5s;
  cursor: pointer;
  outline: 0;
  user-select: none;
  text-decoration: none;
  position: relative;
  padding-right: 15px;
  box-sizing: border-box;
}

.MSidebarItemsGroup .MSidebarItem:first-child {
  margin-top: 10px;
}

.MSidebarItemsGroup .MSidebarItemIcon {
  display: flex;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition-duration: 0.3s;
  border: 2px solid var(--TextColor);
  padding: 0;
}

.MSidebarItemsGroup .MSidebarItemIcon svg {
  display: flex;
  width: 60%;
  height: 60%;
  fill: var(--TextColor);
  transition-duration: 0.3s;
}

.MSidebarItemsGroup .MSidebarItemText {
  display: flex;
  font-family: 'MFontR';
  color: var(--TextColor);
  font-size: 15px;
  align-items: center;
  margin: 0 8px;
  transition-duration: 0.3s;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.MSidebarItemsGroup .router-link-active .MSidebarItemIcon {
  border: 2px solid var(--PrimaryColor);
}

.MSidebarItemsGroup .router-link-active svg {
  fill: var(--PrimaryColor);
}

.MSidebarItemsGroup .router-link-active .MSidebarItemText {
  color: var(--PrimaryColor);
}

.MSidebarItem:hover {
  background-color: var(--MSideBarItemHover);
}

.MSidebarItem:hover .MSidebarItemIcon {
  border-color: var(--PrimaryColor);
}

.MSidebarItem:hover .MSidebarItemText {
  color: var(--PrimaryColor);
}

.MSidebarItem:hover svg {
  fill: var(--PrimaryColor);
}

.MSidebar .router-link-active {
  background-color: var(--PrimaryColor);
  box-shadow: 0px 0px 6px 0px rgba(25, 118, 210, 0.8);
}

.MSidebar .router-link-active .MSidebarItemIcon {
  border-color: #fff;
}

.MSidebar .router-link-active svg {
  fill: #fff;
}

.MSidebar .router-link-active .MSidebarItemText {
  color: #fff;
}

.MSidebarFooter {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 90px;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-bottom: 10px;
  align-items: flex-start;
  position: relative;
  justify-content: center;
}

.MSidebarFooter::before {
  display: flex;
  content: '';
  width: calc(100% - 30px);
  height: 1px;
  position: absolute;
  top: -5px;
  background-color: #ccc;
}

@media only screen and (max-width: 700px) {
  .MSidebar:not(.CollapseMSidebar) .MSidebarBody {
    width: 100%;
  }
}

.MHeader[data-v-b13fcac2] {
    display: flex;
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 15px;
    padding-top: 10px;
    width: calc(100% - 280px);
    transition-duration: 0.3s;
    z-index: 10;
}
.FullMHeader[data-v-b13fcac2] {
    width: calc(100% - 30px);
}
.MHeaderWrapper[data-v-b13fcac2] {
    display: flex;
    width: 100%;
    height: 60px;
    background-color: var(--MHeaderBGColor);
    box-shadow: 0 2px 5px 1px #0000001a;
    border-radius: 5px;
    align-items: center;
}
.MHeaderBTN[data-v-b13fcac2] {
    display: flex;
    width: 20px;
    padding: 10px 10px;
    border-radius: 5px;
    margin: 0 10px;
    cursor: pointer;
    transition-duration: 0.3s;
}
.MHeaderBTN svg[data-v-b13fcac2] {
    fill: var(--TextColor);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.MHeaderBTN[data-v-b13fcac2]:hover {
    background-color: var(--MHeaderBTNHover);
}
.MHeaderPageTitle[data-v-b13fcac2] {
    display: flex;
    flex: 1;
    white-space: nowrap;
    justify-content: center;
    color: var(--TextColor);
    font-size: 16px;
    font-family: 'MFontB';
}
@media only screen and (max-width: 700px) {
.MHeader[data-v-b13fcac2]:not(.FullMHeader) {
        width: calc(100% - 30px);
}
}

.MainWrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  align-items: center;
}
.MainContent {
  display: flex;
  flex: 1;
  height: 100%;
  max-height: 100vh;
  transition-duration: 0.3s;
  margin: 0 250px 0 0;
  padding: 0 15px;
  border-radius: 5px;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.FullMainContent {
  margin: 0;
}
.ViewsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0 0 10px 0;
}
.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
@media only screen and (max-width: 700px) {
.MainContent {
    margin: 0;
}
}

/* =========== MTable =========== */

/* Light Mode Colors */
:root {
  --MTablePrimaryColor: #1976d2;
  --MTableBG: #fff;
  --MTableFilterInputBG: rgba(0, 0, 0, 0.1);
  --MTableFilterInputHoverBG: rgba(0, 0, 0, 0.2);
  --MTableRowHighlight: rgba(0, 0, 0, 0.1);
  --MTableOptionsBG: rgba(0, 0, 0, 0.05);
  --MTableTextColor: #000;
  --MTableLines: #aaa;
  --MTableFilterBTNHoverBG: rgba(0, 0, 0, 0.1);
  --MTablePageBTNHoverBG: rgba(0, 0, 0, 0.1);
  --MTableDataRowHover: rgba(0, 0, 0, 0.1);
  --MTableSubArrayBG: rgba(0, 0, 0, 0.1);
  --MTableSummaryBG: rgba(0, 0, 0, 0.05);
  --MTableComboBG: #fff;
  --MTableComboItemBG: rgba(0, 0, 0, 0.1);
  --MTableComboItemBGHover: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Colors */
.DarkMode {
  --MTablePrimaryColor: #1976d2;
  --MTableBG: #2f3349;
  --MTableFilterInputBG: rgba(255, 255, 255, 0.1);
  --MTableFilterInputHoverBG: rgba(255, 255, 255, 0.2);
  --MTableRowHighlight: rgba(255, 255, 255, 0.1);
  --MTableOptionsBG: rgba(255, 255, 255, 0.05);
  --MTableTextColor: #fff;
  --MTableLines: #888;
  --MTableFilterBTNHoverBG: rgba(255, 255, 255, 0.1);
  --MTablePageBTNHoverBG: rgba(255, 255, 255, 0.1);
  --MTableDataRowHover: rgba(255, 255, 255, 0.1);
  --MTableSubArrayBG: rgba(255, 255, 255, 0.1);
  --MTableSummaryBG: rgba(255, 255, 255, 0.05);
  --MTableComboBG: #2f3349;
  --MTableComboItemBG: rgba(255, 255, 255, 0.1);
  --MTableComboItemBGHover: rgba(255, 255, 255, 0.2);
}
.MTable {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}
.MTable ::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.MTable ::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.MTable ::-webkit-scrollbar-thumb {
  background: #888;
}
.MTable ::-webkit-scrollbar-thumb:hover {
  background: #555;
  width: 10px;
}
.MTable ::-webkit-scrollbar:hover * {
  width: 10px;
}
.MTable ::-webkit-scrollbar-track:hover {
  width: 10px;
}
.MTableOptions {
  display: none;
  position: fixed;
  min-width: 150px;
  max-width: 250px;
  width: min-content;
  height: min-content;
  z-index: 10;
  flex-wrap: wrap;
  background-color: var(--MTableOptionsBG);
  border-radius: 3px;
  padding: 10px;
  backdrop-filter: blur(5px);
  border: 1px solid #999;
}
.MTableOption {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  cursor: pointer;
}
.MTableOption:not(:last-child) {
  border-bottom: 1px solid #777;
  padding-bottom: 10px;
}
.MTableOption:not(:first-child) {
  padding-top: 10px;
}
.MTableOptionIcon {
  display: flex;
  width: 25px;
  height: 25px;
  margin: 0 10px;
}
.MTableOptionIcon svg {
  fill: var(--MTableTextColor);
  transition-duration: 0.3s;
}
.MTableOptionName {
  display: flex;
  align-items: center;
  color: var(--MTableTextColor);
  font-family: 'MFontR';
}
.MTableOption:hover .MTableOptionName {
  color: var(--MTablePrimaryColor);
}
.MTableOption:hover .MTableOptionIcon svg {
  fill: var(--MTablePrimaryColor);
}
.MTableWrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
  border-radius: 5px;
  position: relative;
  background-color: var(--MTableBG);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.MGroup .MTableWrapper {
  border: 1px solid #777;
}
.MTableBackground {
  width: 100%;
  height: 5px;
}
.MTableTableContainer {
  overflow-y: hidden;
  overflow-x: auto;
  width: calc(100% - 0.1px);
}
.MTable .MTableContent {
  width: 100%;
  min-width: fit-content;
  display: flex;
  flex-wrap: wrap;
}
.MTable .MTableRow {
  display: flex;
  width: 100%;
}
.MTable .MTableCell {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.MTable .MTableCell div {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.MTable .MTableHeaderContainer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.MTable .MTableBodyContainer {
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
.MTableData {
  display: flex;
  width: max-content;
  max-width: 100%;
  justify-content: center;
}
.MTableCellImage {
  display: flex;
  width: 60px !important;
  height: 60px !important;
  border-radius: 5px;
  position: relative;
}
.MTableCellImageZoom {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition-duration: 0.3s;
}
.MTableCellImage:hover .MTableCellImageZoom {
  opacity: 1;
}
.MTableCellImageZoom svg {
  display: flex;
  width: 20px;
  height: 20px;
  fill: #fff;
  cursor: pointer;
  transition-duration: 0.3s;
}
.MTableCellImageZoom svg:hover {
  fill: var(--MTablePrimaryColor);
}
.MTableCellImage img {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}
.MTable .MTableHeaderRow {
  font-family: MFontB;
  font-size: 15px;
  color: var(--MTableTextColor);
  text-align: center;
  border-bottom: 2px solid var(--MTableLines);
}
.MTable .MTableHeaderRow .MTableCell {
  padding: 10px 0;
}
.MTable .MTableHeaderRow .MTableHeader {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;
}
.MTable .MTableSortArrow {
  display: flex;
  width: 0;
  height: 0;
  border-bottom: 10px solid var(--MTableTextColor);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transform: rotate(0);
  margin: 0 5px;
}
.MTableFilterRow {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--MTableLines);
}
.MTableFilterRow .MTableCell {
  margin: 5px 0;
  padding: 0;
}
.MTableFilterContent {
  display: flex;
  width: 100%;
  background-color: var(--MTableFilterInputBG);
  text-align: center;
  border-radius: 5px;
  margin: 0 2.5px;
  align-items: center;
  position: relative;
  transition-duration: 0.3s;
}
.MTableFilterRow .MTableCell:first-child .MTableFilterContent {
  margin-right: 5px;
}
.MTableFilterRow .MTableCell:last-child .MTableFilterContent {
  margin-left: 5px;
}
.MTableFilterRow .MTableCell:hover .MTableFilterContent {
  background-color: var(--MTableFilterInputHoverBG);
}
.MTableFilterRow input {
  font-family: MFontR;
  font-size: 15px;
  color: var(--MTableTextColor);
  width: 100%;
  margin: 5px 0;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  outline: none;
  padding: 3px 5px;
  z-index: 5;
}
.MTableFilterBTN,
.MTableClearBTN {
  display: none;
  width: 25px;
  height: 25px;
  background-color: var(--MTablePrimaryColor);
  border-radius: 5px;
  min-width: 25px;
  max-width: 25px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition-duration: 0.3s;
  margin-left: 6px;
}
.MTableFilterIcon {
  fill: #fff;
  display: flex;
  width: 60%;
  height: 60%;
}
.MTableFilterBTN:hover,
.MTableClearBTN:hover {
  background-color: var(--MTableFilterBTNHoverBG);
}
.MTableFilterBTN:hover .MTableFilterIcon,
.MTableClearBTN:hover .MTableFilterIcon {
  fill: var(--MTablePrimaryColor);
}
.MTableDataRow {
  padding: 5px 0;
}
.MTableDataRow:hover {
  background-color: var(--MTableDataRowHover);
}
.MTableDataRow:not(:last-child) {
  border-bottom: 1px solid var(--MTableLines);
}
.MTableDataRow .MTableCell {
  font-family: MFontR;
  font-size: 14px;
  color: var(--MTableTextColor);
  text-align: center;
  padding-top: 9px;
  padding-bottom: 7px;
}
.MTableDataSubArray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.MTableDataSubArrayItem {
  display: flex;
  padding: 5px 10px;
  background-color: var(--MTableSubArrayBG);
  border-radius: 5px;
  margin: 2px;
}
.MTableRowOptions {
  display: flex;
  width: 35px;
  min-width: 35px;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
}
.MTableRowOptionsPadding {
  display: flex;
  width: 35px;
  min-width: 35px;
}
.MTableOptionsIcon {
  display: flex;
  width: 27px;
  height: 27px;
  fill: #fff;
  background-color: var(--MTablePrimaryColor);
  border-radius: 5px;
  transition-duration: 0.3s;
  justify-content: center;
  align-items: center;
}
.MTableOptionsIcon:hover {
  color: var(--MTablePrimaryColor);
  fill: var(--MTablePrimaryColor);
  background-color: var(--MTablePageBTNHoverBG);
}
.MTableOptionsIcon svg {
  display: flex;
  width: 18px;
}
.MTableTotalsRow {
  border-top: 2px solid var(--MTableLines);
}
.MTableFooterContainer {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 0.1px);
}
.MTableTotalsRow .MTableCell {
  font-family: MFontR;
  font-size: 16px;
  color: var(--MTableTextColor);
  text-align: center;
  padding-top: 12px;
  padding-bottom: 10px;
}
.MTableExtension {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}
.MTableSummary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  width: min-content;
  background-color: var(--MTableSummaryBG);
  padding: 10px;
  border-radius: 5px;
}
.MTableExtensionSpace {
  display: flex;
  flex: 1;
}
.MTablePageButtons {
  width: min-content;
  display: flex;
  justify-content: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 280px;
}
.MTablePageButton {
  font-family: MFontR;
  font-size: 16px;
  color: var(--MTableTextColor);
  fill: var(--MTableTextColor);
  border-radius: 4px;
  display: flex;
  width: 30px;
  height: 30px;
  margin: 5px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition-duration: 0.3s;
}
.MTablePageButton:hover {
  color: var(--MTablePrimaryColor);
  fill: var(--MTablePrimaryColor);
  background-color: var(--MTablePageBTNHoverBG);
}
.ActiveMTablePageButton,
.MTablePageButton:active {
  background-color: var(--MTablePrimaryColor);
  color: #fff;
  border-color: var(--MTablePrimaryColor);
}
.MTablePageButton:active svg {
  fill: var(--MTablePrimaryColor);
}
.MTableNoData {
  display: flex;
  width: 100%;
  height: 60px;
  color: var(--MTableTextColor);
  font-size: 16px;
  justify-content: center;
  align-items: center;
  font-family: 'MFontB';
}
.MTableLoader {
  display: none;
  position: absolute;
  height: 2px;
  right: 0;
  width: 100%;
}
.MTableLoader::after {
  content: '';
  position: absolute;
  height: 3px;
  top: -0.5px;
  left: -80%;
  z-index: 3;
  background: var(--MTablePrimaryColor);
  animation: MTableLoading 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

/* #region Combo */
.MTableFilterCombo {
  display: none;
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  height: min-content;
  max-height: 200px;
  background-color: var(--MTableComboBG);
  border-radius: 5px;
  overflow-y: auto !important;
  border: 1px solid #777;
}
.MTableFilterComboItems {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--MTableComboBG);
  border-radius: 5px;
  flex-wrap: wrap;
}
.MTableFilterComboItem {
  display: flex;
  width: 100%;
  height: min-content;
  background-color: var(--MTableComboBG);
  border-radius: 5px;
  justify-content: center;
  background-color: var(--MTableComboItemBG);
  transition-duration: 0.3s;
  margin: 3px 5px;
  padding: 7px 5px;
  cursor: pointer;
}
.MTableFilterComboItem:hover:not(.SelectedMTableFilterComboItem) {
  background-color: var(--MTableComboItemBGHover);
}
.SelectedMTableFilterComboItem {
  background-color: var(--MTablePrimaryColor);
  box-shadow: 0px 0px 6px 0px rgba(25, 118, 210, 0.8);
}
.MTableFilterComboItem:first-child {
  margin-top: 6px;
}
.MTableFilterComboItem:last-child {
  margin-bottom: 6px;
}

/* #endregion */

/* #region Date */
.MTableFilterDate {
  width: 20px !important;
  height: 20px !important;
  margin: 0 0 0 5px !important;
  padding: 0 !important;
  color: #fff !important;
}
.MTableFilterDate::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
}

/* #endregion */
@keyframes MTableLoading {
0% {
    right: -35%;
    left: 100%;
}
80%,
  100% {
    right: 100%;
    left: -160%;
}
}

/* Light Mode Colors */
:root {
  --MPromptsLoading: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Colors */
.DarkMode {
  --MPromptsLoading: rgba(0, 0, 0, 0.2);
}
.MPrompts {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  justify-content: center;
  align-items: center;
}
.MPromptsBackground {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.MPromptsWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  background-color: var(--BGColor);
  min-width: 300px;
  max-width: 80vw;
  min-height: 100px;
  max-height: 80vh;
  border-radius: 5px;
  flex-wrap: wrap;
  position: relative;
}
.MPromptsHeader {
  display: flex;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px 5px 0 0;
  justify-content: center;
  position: relative;
}
.MPromptsTitle {
  font-family: 'MFontB';
  font-size: 15px;
  color: var(--TextColor);
  padding: 7px 0 10px 0;
}
.MPromptsCloseBTN {
  display: flex;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.MPromptsCloseBTN svg {
  display: flex;
  width: 17px;
  fill: var(--TextColor);
  transition-duration: 0.3s;
}
.MPromptsCloseBTN:hover svg {
  fill: var(--PrimaryColor);
}
.MPromptsContent {
  display: flex;
  width: 100%;
  padding: 5px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}
.MPromptsContentWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.MPromptMessage {
  display: flex;
  width: 100%;
  font-size: 15px;
  font-family: 'MFontB';
  justify-content: center;
  margin: 20px 10px 20px 10px;
  color: var(--TextColor);
}
.MPromptChooseBoxYesBTN,
.MPromptChooseBoxNoBTN {
  min-width: 50px;
  justify-content: center;
}
.MPromptChooseBoxNoBTN {
  background-color: red;
}
.MPromptChooseBoxNoBTN:hover {
  background-color: rgba(255, 0, 0, 0.2);
  color: red;
}
#MPromptLoading {
  z-index: 400;
}
.MPromptLoader {
  width: 35px;
  height: 35px;
  border: 5px solid var(--MPromptsLoading);
  border-top-color: var(--PrimaryColor);
  border-radius: 50%;
  animation: MPromptLoadingSpin 1s linear infinite;
  margin: 15px 0;
}
.MPromptLoadingText {
  display: flex;
  font-family: MFontB;
  color: var(--TextColor);
  margin: 10px 5px;
  width: 100%;
  font-size: 16px;
  justify-content: center;
}
.MPromptsActive {
  display: flex;
}
.MPromptsActive .MPromptsWrapper {
  animation: ShowModal 0.25s ease;
}
.MPromptsLeaving .MPromptsWrapper {
  animation: HideModal 0.25s ease;
}
@keyframes ShowPrompt {
0% {
    opacity: 0;
    transform: scale(0.8, 0.8);
}
65.5% {
    transform: scale(1.03, 1.03);
}
100% {
    opacity: 1;
    transform: scale(1, 1);
}
}
@keyframes HidePrompt {
0% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
}
100% {
    opacity: 0;
    transform: translateY(35px) scale(0.97, 0.97);
}
}
@keyframes MPromptLoadingSpin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

/* Light Mode Colors */
:root {
  --MDateBG: #fff;
  --MDateLabelColor: rgba(0, 0, 0, 0.6);
  --MDateBorder: rgba(0, 0, 0, 0.6);
  --MDateDisabled: #666;
  --MDatePickerBG: #fff;
  --MDateSVG: #666;
  --MDatePickerBTNColor: #fff;
  --MDatePickerBTNHover: rgba(25, 118, 210, 0.2);
  --MDatePickerShadow: rgba(0, 0, 0, 0.1);
  --MDatePickerSVG: rgba(0, 0, 0, 0.3);
  --MDatePickerSVGHover: rgba(0, 0, 0, 1);
  --MDatePickerFullDateBG: rgba(255, 255, 255, 0.15);
  --MDatePickerFullDateHover: rgba(255, 255, 255, 0.3);
  --MDatePickerDaysNameColor: #666;
  --MDatePickerRangeShadow: rgba(25, 118, 210, 0.2);
  --MDatePickerDayHover: rgba(25, 118, 210, 0.2);
  --MDatePickerDayShadow: rgba(25, 118, 210, 0.7);
}

/* Dark Mode Colors */
.DarkMode {
  --MDateBG: #2f3349;
  --MDateLabelColor: rgba(255, 255, 255, 0.6);
  --MDateBorder: rgba(255, 255, 255, 0.6);
  --MDateDisabled: #aaa;
  --MDatePickerBG: #2f3349;
  --MDateSVG: #aaa;
  --MDatePickerBTNColor: #fff;
  --MDatePickerBTNHover: rgba(25, 118, 210, 0.2);
  --MDatePickerShadow: rgba(0, 0, 0, 0.1);
  --MDatePickerSVG: rgba(255, 255, 255, 0.3);
  --MDatePickerSVGHover: rgba(255, 255, 255, 1);
  --MDatePickerFullDateBG: rgba(255, 255, 255, 0.15);
  --MDatePickerFullDateHover: rgba(255, 255, 255, 0.3);
  --MDatePickerDaysNameColor: #999;
  --MDatePickerRangeShadow: rgba(25, 118, 210, 0.2);
  --MDatePickerDayHover: rgba(25, 118, 210, 0.2);
  --MDatePickerDayShadow: rgba(25, 118, 210, 0.7);
}
.MDate {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition-duration: 0.3s;
  align-items: center;
  font-size: 16px;
  font-family: 'MFontR';
  margin: 15px 5px;
  min-height: 35px;
  flex: 1;
  min-width: min-content;
  box-sizing: border-box;
  flex-wrap: nowrap;
  padding: 5px;
  justify-content: space-between;
}
.MDateValues {
  display: flex;
  min-width: min-content;
  align-items: center;
}
.MDate label {
  display: flex;
  width: min-content;
  position: absolute;
  pointer-events: none;
  top: 7px;
  right: 5px;
  font-family: 'MFontR';
  font-size: 14px;
  color: var(--MDateLabelColor);
  transition-duration: 0.3s;
  padding: 0 3px;
  z-index: 5;
  white-space: nowrap;
}
.MDate label::before {
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  bottom: 3px;
  right: 0;
  background-color: var(--MDateBG);
  z-index: -1;
  transition-duration: 0.3s;
  pointer-events: none;
}
.MDate .MDateInput {
  display: flex;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-family: 'MFontR';
  font-size: 15px;
  z-index: 5;
  color: var(--TextColor);
}
.MDateBG {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: var(--MDateBG);
  border: 1px solid var(--MDateBorder);
  position: absolute;
  top: 0;
  right: 0;
  transition-duration: 0.3s;
  box-sizing: border-box;
}
.MDateSeperator {
  display: flex;
  opacity: 0;
  color: var(--TextColor);
  font-family: 'MFontB';
  font-size: 16px;
  flex: 1;
  justify-content: center;
  padding: 0 5px;
  z-index: 5;
}
.MDateInputSeperator {
  display: flex;
  opacity: 0;
  color: var(--TextColor);
  flex: 1;
  justify-content: center;
  padding: 0 1px;
  z-index: 5;
}
.MDate[focus] .MDateSeperator,
.MDate[focus] .MDateInputSeperator {
  opacity: 1;
}
.MDate[valid] .MDateSeperator,
.MDate[valid] .MDateInputSeperator {
  opacity: 1;
}
.MDate[focus] .MDateBG {
  border: 1px solid var(--PrimaryColor);
}
.MDate[valid]:not([focus]) .MDateBG {
  border: 1px solid var(--TextColor);
}
.MDate[focus] label {
  color: var(--PrimaryColor);
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}
.MDate[valid]:not([focus]) label {
  color: var(--TextColor);
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}
.MDate[disabled] .MDateInput {
  color: var(--MDateDisabled);
  cursor: default;
  line-height: 0.5;
}
.MDate[disabled] .MDateBG {
  border: 1px dashed var(--MDateDisabled) !important;
}
.MDate[disabled] label {
  color: var(--MDateDisabled) !important;
  top: -13px;
  font-size: 13px;
  font-family: 'MFontR';
}
.MDate[disabled] .MDateInputSeperator {
  color: var(--MDateDisabled);
}
.MDate .MDateInput[DateType="Day"],
.MDate .MDateInput[DateType="Month"] {
  width: 20px;
  text-align: center;
}
.MDate .MDateInput[DateType="Year"] {
  width: 35px;
  text-align: right;
}
.MDateClearBTN {
  display: flex;
  left: 40px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  min-width: 20px;
  max-width: 20px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  z-index: 5;
}
.MDateClearBTN svg {
  fill: var(--MDateSVG);
  display: flex;
  width: 60%;
  height: 60%;
  transition-duration: 0.3s;
}
.MDateClearBTN:hover svg {
  fill: var(--PrimaryColor);
}
.MDatePickerBTN {
  display: flex;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  background-color: var(--PrimaryColor);
  border-radius: 5px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition-duration: 0.3s;
  padding-right: 1px;
  margin-right: 5px;
  z-index: 5;
}
.MDatePickerBTN svg {
  display: flex;
  width: 65%;
  height: 65%;
  fill: var(--MDatePickerBTNColor);
  transition-duration: 0.3s;
}
.MDatePickerBTN:hover {
  background-color: var(--MDatePickerBTNHover);
}
.MDatePickerBTN:hover svg {
  fill: var(--PrimaryColor);
}
.MDatePicker {
  display: none;
  position: fixed;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
  background-color: var(--MDatePickerBG);
  box-shadow: 0 2px 5px 1px var(--MDatePickerShadow);
  border-radius: 5px;
  z-index: 7;
  outline: none;
  width: min-content;
  top: -41px;
  left: 10px;
}
.MDatePickerHeader {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 5px 5px 0 0;
  position: relative;
  justify-content: center;
  align-items: center;
}
.MDatePickerYear {
  display: flex;
  width: 100px;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 3px;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 3px;
}
.MDatePickerYearValue {
  display: flex;
  font-family: 'MFontB';
  font-size: 20px;
  color: var(--TextColor);
  outline: 0;
  width: 45px;
  background-color: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}
.MDatePickerMonth {
  display: flex;
  width: 70px;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 3px;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 0;
}
.MDatePickerMonthValue {
  display: flex;
  font-family: 'MFontB';
  font-size: 20px;
  color: var(--TextColor);
  outline: 0;
  width: 20px;
  background-color: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}
.MDatePickerMonthNext,
.MDatePickerMonthPrevious,
.MDatePickerYearNext,
.MDatePickerYearPrevious {
  display: flex;
  height: 20px;
  width: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;

  user-select: none;
}
.MDatePickerMonthNext svg,
.MDatePickerMonthPrevious svg,
.MDatePickerYearNext svg,
.MDatePickerYearPrevious svg {
  display: flex;
  height: 85%;
  width: 85%;
  fill: var(--MDatePickerSVG);
  transition-duration: 0.3s;
}
.MDatePickerMonthNext,
.MDatePickerYearNext {
  transform: rotate(180deg);
}
.MDatePickerMonthNext svg:hover,
.MDatePickerMonthPrevious svg:hover,
.MDatePickerYearNext svg:hover,
.MDatePickerYearPrevious svg:hover {
  fill: var(--MDatePickerSVGHover);
}
.MDatePickerFullDate {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 40px;
  background-color: var(--PrimaryColor);
  font-family: 'MFontB';
  font-size: 18px;
}
.MDatePickerFullDateValue {
  display: flex;
  background-color: var(--MDatePickerFullDateBG);
  padding: 3px 10px;
  margin: 0 5px;
  border-radius: 5px;
  transition-duration: 0.3s;
  cursor: pointer;
  font-family: 'MFontB';
  font-size: 16px;
  letter-spacing: 1px;
}
.MDatePickerFullDateValue:hover {
  background-color: var(--MDatePickerFullDateHover);
}
.MDatePickerContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 5px;
}
.MDatePickerDaysTable {
  width: 100%;
  border-spacing: 0 3px;
  border-collapse: separate;
}
.MDatePicker td,
.MDatePicker th {
  padding: 0;
}
.MDatePickerDaysNames {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}
.MDatePickerDaysName {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  color: var(--MDatePickerDaysNameColor);
  font-family: 'MFontB';
  font-size: 13px;
}
.MDatePickerDays {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.MDateRangeShadow {
  background-color: var(--MDatePickerRangeShadow);
}
.MDateRangeShadow:first-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.MDateRangeShadow:last-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.MDateRangeStart {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.MDateRangeEnd {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.MDatePickerDay {
  display: flex;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  transition-duration: 0.3s;
  cursor: pointer;
  font-size: 14px;
}
.MDatePickerDay:hover {
  color: var(--PrimaryColor);
}
.MDatePickerDay[Selected] {
  background-color: var(--PrimaryColor);
  color: #fff;
  box-shadow: 0px 0px 6px 0px var(--MDatePickerDayShadow);
}

/* Light Mode Colors */
:root {
  --MCheckBoxLabelHover: rgba(0, 0, 0, 0.1);
  --MCheckBoxLabelDisabledBG: rgba(0, 0, 0, 0.1);
  --MCheckBoxLabelDisabledBorder: rgba(0, 0, 0, 0.2);
  --MCheckBoxLabelDisabledText: rgba(0, 0, 0, 0.6);
  --MCheckBoxLabelDisabledBGChecked: rgba(0, 0, 0, 0.3);
}

/* Dark Mode Colors */
.DarkMode {
  --MCheckBoxLabelHover: rgba(255, 255, 255, 0.1);
  --MCheckBoxLabelDisabledBG: rgba(255, 255, 255, 0.1);
  --MCheckBoxLabelDisabledBorder: rgba(255, 255, 255, 0.2);
  --MCheckBoxLabelDisabledText: rgba(255, 255, 255, 0.5);
  --MCheckBoxLabelDisabledBGChecked: rgba(255, 255, 255, 0.5);
}
.MModal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  justify-content: center;
  align-items: center;
}
.MModalBackground {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.MModalWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  background-color: var(--BGColor);
  min-width: 300px;
  max-width: 80vw;
  min-height: 170px;
  max-height: 80vh;
  border-radius: 5px;
  flex-wrap: wrap;
}
.MModalHeader {
  display: flex;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px 5px 0 0;
  justify-content: center;
  position: relative;
}
.MModalTitle {
  font-family: 'MFontB';
  font-size: 15px;
  color: var(--TextColor);
  padding: 7px 0 10px 0;
}
.MModalCloseBTN {
  display: flex;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.MModalCloseBTN svg {
  display: flex;
  width: 17px;
  fill: var(--TextColor);
  transition-duration: 0.3s;
}
.MModalCloseBTN:hover svg {
  fill: var(--PrimaryColor);
}
.MModalContent {
  display: flex;
  width: 100%;
  padding: 5px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}
.MModalContentWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.MModalFooter {
  display: flex;
  height: 10px;
  width: 100%;
}
.MModalActive {
  display: flex;
}
.MModalActive .MModalWrapper {
  animation: ShowModal 0.25s ease;
}
.MModalLeaving .MModalWrapper {
  animation: HideModal 0.25s ease;
}
@keyframes ShowModal {
0% {
    opacity: 0;
    transform: scale(0.8, 0.8);
}
65.5% {
    transform: scale(1.03, 1.03);
}
100% {
    opacity: 1;
    transform: scale(1, 1);
}
}
@keyframes HideModal {
0% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
}
100% {
    opacity: 0;
    transform: translateY(35px) scale(0.97, 0.97);
}
}

/* Light Mode Colors */
:root {
  --MComboBoxBG: #fff;
  --MComboBoxLabelColor: rgba(0, 0, 0, 0.6);
  --MComboBoxBorder: rgba(0, 0, 0, 0.6);
  --MComboBoxSVG: #666;
  --MComboBoxItemsBG: #fff;
  --MComboBoxItemsBorder: rgba(0, 0, 0, 0.6);
  --MComboBoxItemBG: rgba(0, 0, 0, 0.05);
  --MComboBoxFilled: rgba(0, 0, 0, 1);
  --MComboBoxDisabled: #777;
  --MComboBoxScroll: rgba(0, 0, 0, 0.3);
  --MComboBoxScrollHover: rgba(0, 0, 0, 0.6);
  --MComboBoxItemsSearchInputBG: rgba(0, 0, 0, 0.1);
  --MComboBoxItemsSearchInputPH: #666;
  --MComboBoxChevronBG: rgba(0, 0, 0, 0.05);
  --MComboBoxChevronBorder: #666;
  --MComboBoxItemBGHover: rgba(25, 118, 210, 0.1);
}

/* Dark Mode Colors */
.DarkMode {
  --MComboBoxBG: #2f3349;
  --MComboBoxLabelColor: rgba(255, 255, 255, 0.6);
  --MComboBoxBorder: rgba(255, 255, 255, 0.6);
  --MComboBoxSVG: #aaa;
  --MComboBoxItemsBG: #2f3349;
  --MComboBoxItemsBorder: rgba(255, 255, 255, 0.6);
  --MComboBoxItemBG: rgba(255, 255, 255, 0.05);
  --MComboBoxFilled: rgba(255, 255, 255, 1);
  --MComboBoxDisabled: #aaa;
  --MComboBoxScroll: rgba(255, 255, 255, 0.3);
  --MComboBoxScrollHover: rgba(255, 255, 255, 0.6);
  --MComboBoxItemsSearchInputBG: rgba(255, 255, 255, 0.1);
  --MComboBoxItemsSearchInputPH: #aaa;
  --MComboBoxChevronBG: rgba(255, 255, 255, 0.05);
  --MComboBoxChevronBorder: #aaa;
  --MComboBoxItemBGHover: rgba(25, 118, 210, 0.1);
}

/*rtl:begin:ignore*/
.MComboBox {
  display: flex;
  position: relative;
  max-height: 40px;
  height: 37px;
  margin: 15px 5px;
  min-width: 150px;
  flex: 1;
}
.MComboBox ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.MComboBox ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 1);
}
.MComboBox ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}
.MComboBox ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
  width: 10px;
}
.MComboBox ::-webkit-scrollbar:hover * {
  width: 10px;
}
.MComboBox ::-webkit-scrollbar-track:hover {
  width: 10px;
}
.MComboBoxValueContainer {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition-duration: 0.3s;
  width: 100%;
  height: 100%;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}
.MComboBoxBG {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: var(--MComboBoxBG);
  border: 1px solid var(--MComboBoxBorder);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transition-duration: 0.3s;
  box-sizing: border-box;
}
.MComboBox label {
  display: flex;
  width: min-content;
  position: absolute;
  pointer-events: none;
  top: calc(50% - 0.7em);
  right: 5px;
  font-family: 'MFontR';
  font-size: 14px;
  color: var(--MComboBoxLabelColor);
  transition-duration: 0.3s;
  padding: 0 3px;
  z-index: 5;
  white-space: nowrap;
}
.MComboBox label::before {
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  bottom: 5px;
  right: 0;
  background-color: var(--MComboBoxBG);
  z-index: -1;
  transition-duration: 0.3s;
}
.MComboBoxValueInput {
  margin: 6px 8px;
  display: flex;
  width: calc(100% - 48px);
  height: calc(100% - 12px);
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  outline: 0;
  font-family: 'MFontR';
  font-size: 15px;
  color: var(--TextColor);
}
.MComboBoxClearBTN {
  display: flex;
  position: absolute;
  left: 40px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  min-width: 20px;
  max-width: 20px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.MComboBoxClearBTN svg {
  fill: var(--MComboBoxSVG);
  display: flex;
  width: 60%;
  height: 60%;
  transition-duration: 0.3s;
}
.MComboBoxClearBTN:hover svg {
  fill: var(--PrimaryColor);
}
.MComboBoxChevron {
  width: 15px;
  display: flex;
  padding: 11px 8px;
  transform: rotate(0);
  transition-duration: 0.3s;
  border-right: 1px solid var(--MComboBoxChevronBorder);
  background-color: var(--MComboBoxChevronBG);
}
.MComboBoxChevron svg {
  fill: var(--MComboBoxSVG);
  width: 100%;
  transition-duration: 0.3s;
}
.MComboBoxDropDown {
  position: fixed;
  display: flex;
  background-color: var(--MComboBoxItemsBG);
  border: 1px solid var(--PrimaryColor);
  border-radius: 5px;
  width: 100%;
  overflow-y: auto;
  z-index: 100;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
}
.MComboBoxItemsSearch {
  display: flex;
  justify-content: center;
  width: 100%;
}
.MComboBoxItemsSearchInput {
  display: flex;
  width: 100%;
  margin: 7px;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--MComboBoxItemsSearchInputBG);
  border: 0;
  color: var(--TextColor);
  outline: none;
  font-family: 'MFontR';
}
.MComboBoxItemsSearchInput::placeholder {
  color: var(--MComboBoxItemsSearchInputPH);
}
.MComboBoxItems {
  display: flex;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  transition-duration: 0.3s;
  flex-wrap: wrap;
}
.MComboBoxItem {
  font-family: 'MFontR';
  font-size: 14px;
  color: var(--TextColor);
  width: 100%;
  padding: 2px 10px;
  outline: none;
  user-select: none;
  cursor: pointer;
  min-height: 30px;
  transition-duration: 0.3s;
  align-items: center;
  margin: 0 7px 7px 7px;
  border-radius: 5px;
  background-color: var(--MComboBoxItemBG);
}
.MComboBoxItem:hover {
  background-color: var(--MComboBoxItemBGHover);
  color: var(--PrimaryColor);
}
.MComboBoxItem[selected] {
  background-color: var(--PrimaryColor);
  color: #fff;
  box-shadow: 0px 0px 6px 0px rgba(25, 118, 210, 0.8);
}
.MComboBoxItemHighlight {
  color: var(--PrimaryColor) !important;
}
.MComboBoxValueInput:focus~.MComboBoxBG {
  border: 1px solid var(--PrimaryColor);
}
.MComboBox[valid] .MComboBoxValueInput:not(:focus)~.MComboBoxBG {
  border: 1px solid var(--MComboBoxFilled);
}
.MComboBoxValueInput:focus~label {
  color: var(--PrimaryColor);
  top: -11.5px;
  font-size: 13px;
  font-family: 'MFontR';
}
.MComboBox[valid] .MComboBoxValueInput:not(:focus)~label {
  color: var(--MComboBoxFilled);
  top: -11.5px;
  font-size: 13px;
  font-family: 'MFontR';
}
.MComboBoxValueInput:focus~.MComboBoxChevron {
  border-color: var(--PrimaryColor);
}
.MComboBoxValueInput:focus~.MComboBoxChevron svg {
  fill: var(--PrimaryColor);
}
.MComboBox[valid] .MComboBoxValueInput:not(:focus)~.MComboBoxChevron {
  border-color: var(--MComboBoxFilled);
}
.MComboBox[valid] .MComboBoxValueInput:not(:focus)~.MComboBoxChevron svg {
  fill: var(--MComboBoxFilled);
}
.MComboBox[MCBDisabled] {
  pointer-events: none;
}
.MComboBox[MCBDisabled] .MComboBoxValueInput {
  color: var(--MComboBoxDisabled) !important;
}
.MComboBox[MCBDisabled] label {
  color: var(--MComboBoxDisabled) !important;
}
.MComboBox[MCBDisabled] .MComboBoxChevron {
  border-right-style: dashed;
}
.MComboBox[MCBDisabled] .MComboBoxChevron {
  border-color: var(--MComboBoxDisabled) !important;
}
.MComboBox[MCBDisabled] .MComboBoxChevron svg {
  fill: var(--MComboBoxDisabled) !important;
}
.MComboBox[MCBDisabled] .MComboBoxBG {
  border: 1px dashed var(--MComboBoxDisabled) !important;
}

/*rtl:end:ignore*/

/* Light Mode Colors */
:root {
  --MRadioButtonShadow: rgba(25, 118, 210, 0.4);
  --MRadioButtonSelected: rgba(0, 0, 0, 1);
  --MRadioButtonNonSelected: rgba(0, 0, 0, 0.6);
  --MRadioButtonDisabled: #777;
}

/* Dark Mode Colors */
.DarkMode {
  --MRadioButtonShadow: rgba(25, 118, 210, 0.4);
  --MRadioButtonSelected: rgba(255, 255, 255, 1);
  --MRadioButtonNonSelected: rgba(255, 255, 255, 0.6);
  --MRadioButtonDisabled: #aaa;
}
.MRadioButton {
  display: flex;
  user-select: none;
}
.MRadioButtonItem {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
  margin: 5px;
}
.MRadioButtonItem input {
  display: none;
}
.MRadioButtonRadio {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 10px;
  border: 1px solid var(--MRadioButtonNonSelected);
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0px 0px 0px 3px transparent;
  transition-duration: 0.3s;
}
.MRadioButtonRadioCircle {
  display: flex;
  width: 0;
  height: 0;
  border-radius: 50%;
  transition-duration: 0.3s;
  background-color: var(--PrimaryColor);
}
.MRadioButtonText {
  display: flex;
  transition: 0.3s;
  font-family: 'MFontR';
  color: var(--MRadioButtonNonSelected);
}

/* On Check */
.MRadioButtonItem input:checked~.MRadioButtonRadio .MRadioButtonRadioCircle {
  animation: MRadioButtonSelectCircle 0.5s ease-in-out 1 forwards;
}
.MRadioButtonItem input:checked~.MRadioButtonRadio {
  animation: MRadioButtonSelectBorder 0.5s ease-in-out 1 forwards;
}

/* On Hover */
.MRadioButtonItem:hover .MRadioButtonText {
  color: var(--PrimaryColor);
}
.MRadioButtonItem:hover .MRadioButtonRadio {
  border-color: var(--PrimaryColor);
}

/* On Check Not Hover */
.MRadioButtonItem:not(:hover) input:checked~.MRadioButtonRadio {
  border-color: var(--MRadioButtonSelected);
}
.MRadioButtonItem:not(:hover) input:checked~.MRadioButtonText {
  color: var(--MRadioButtonSelected);
}

/* On Disabling */
.MRadioButtonItem:has(input:disabled) {
  cursor: default !important;
}
.MRadioButtonItem input:disabled~.MRadioButtonRadio {
  border-color: var(--MRadioButtonDisabled) !important;
  border-style: dashed;
}
.MRadioButtonItem input:disabled~.MRadioButtonRadio .MRadioButtonRadioCircle {
  background-color: var(--MRadioButtonDisabled) !important;
}
.MRadioButtonItem input:disabled~.MRadioButtonText {
  color: var(--MRadioButtonDisabled) !important;
}
@keyframes MRadioButtonSelectCircle {
0% {
    width: 0;
    height: 0;
}
40% {
    width: 10px;
    height: 10px;
}
65% {
    width: 6px;
    height: 6px;
}
100% {
    width: 8px;
    height: 8px;
}
}
@keyframes MRadioButtonSelectBorder {
0% {
    box-shadow: 0px 0px 0px 3px transparent;
}
65% {
    box-shadow: 0px 0px 0px 3px var(--MRadioButtonShadow);
}
100% {
    box-shadow: 0px 0px 0px 3px transparent;
}
}

/* Light Mode Colors */
:root {
  --LabelHover: rgba(0, 0, 0, 0.1);
  --LabelDisabledBG: rgba(0, 0, 0, 0.1);
  --LabelDisabledBorder: rgba(0, 0, 0, 0.2);
  --LabelDisabledText: rgba(0, 0, 0, 0.6);
  --LabelDisabledBGChecked: rgba(0, 0, 0, 0.3);
}

/* Dark Mode Colors */
.DarkMode {
  --LabelHover: rgba(255, 255, 255, 0.1);
  --LabelDisabledBG: rgba(255, 255, 255, 0.1);
  --LabelDisabledBorder: rgba(255, 255, 255, 0.2);
  --LabelDisabledText: rgba(255, 255, 255, 0.5);
  --LabelDisabledBGChecked: rgba(255, 255, 255, 0.5);
}
.MCheckBox {
  user-select: none;
  width: min-content;
}
.MCheckBox input {
  display: none;
}
.MCheckBox label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.MCheckBox label .MCheckBoxMarkBox {
  Box-sizing: border-Box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1px solid var(--TextColor);
  border-radius: 2px;
  transition: 250ms cubic-bezier(.4, .0, .23, 1);
  position: relative;
}
.MCheckBox input:not(:disabled)+label .MCheckBoxMarkBox {
  background: var(--LabelHover);
}
.MCheckBox input:checked+label .MCheckBoxMarkBox {
  border: 9px solid var(--PrimaryColor);
}
.MCheckBox input:checked+label .MCheckBoxMark {
  position: absolute;
  top: -2.2px;
  left: -5.7px;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  animation: CheckAnimation 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
}
.MCheckBox .MCheckBoxText {
  font-family: 'MFontR';
  font-size: 15px;
  margin: 2px 10px;
  color: var(--TextColor);
}
.MCheckBox input:disabled {
  pointer-events: none;
}
.MCheckBox input:disabled+label {
  cursor: default;
}
.MCheckBox input:disabled+label .MCheckBoxText {
  color: var(--LabelDisabledText);
}
.MCheckBox input:disabled:not(:checked)+label .MCheckBoxMarkBox {
  background-color: var(--LabelDisabledBG);
  border-color: var(--LabelDisabledBorder);
}
.MCheckBox input:disabled:checked+label .MCheckBoxMarkBox {
  border-color: var(--LabelDisabledBGChecked);
}
@keyframes CheckAnimation {
0% {
    width: 0;
    height: 0;
    border-color: #fff;
    transform: translate3d(0, 0, 0) rotate(45deg);
}
33% {
    width: 4px;
    height: 0;
    transform: translate3d(0, 0, 0) rotate(45deg);
}
100% {
    width: 4px;
    height: 8px;
    border-color: #fff;
    transform: translate3d(0, -8px, 0) rotate(45deg);
}
}