:root {
  --mo-mobile-backdrop: rgba(61, 61, 61, 0.3);
}
.mobile-app .dataTables_scrollBody::-webkit-scrollbar{
  display: block;
}
/* Mobile app font style: Web font style -2 is mobile app font style */
.mobile-app .fontsize-label {
  font-size: calc(var(--mo-font-base) + 12px) !important;
}
.mobile-app .ma-fs-10{
  font-size: calc(var(--mo-font-base) + 10px) !important;
}
.mobile-app .ma-fs-11{
  font-size: calc(var(--mo-font-base) + 11px) !important;
}
.mobile-app .modal.fade .modal-dialog-centered.modal-dialog {
  transform: translate(0, 50px) !important;
}
.mobile-app .modal.show .modal-dialog-centered.modal-dialog {
  transform: none !important;
}
.mobile-app .modal-dialog-centered {
  align-items: flex-end;
}
.mobile-app .ma-align-items-start{
  align-items: start !important;
}
.mobile-app .custom-padding-mobile {
  padding: 0px 12px;
}
.mobile-app #empty-datatable-mobile {
  width: 100%;
  height: calc(100vh - 205px);
  display: none;
  justify-content: center;
  align-items: center;
}
.mobile-app .nodata-mobile {
  width: 130px;
  height: 130px;
  object-fit: contain;
}
.mobile-app .show.mobile-dropdown-backdrop::before,
.mobile-app .show.dropdown-toggle::before,
.mobile-app .bootstrap-timepicker-dropdown-backdrop.open::before,
.mobile-app .custom-dropdown-filter-accounts.active .select-role-wrappers::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1001;
  left: 0px;
  bottom: 0px;
  background-color: var(--mo-mobile-backdrop);
}
.mobile-app .mobile-dropdown-items,
.mobile-app .dropdown-menu{
  display: block !important;
  position: fixed !important;
  opacity: 0;
  width: 95% !important;
  visibility: hidden;
  transition: 0.4s ease;
  inset: auto 50% 10px 50% !important;
  transform: translate(-50%, 100%) !important;
}
.mobile-app .mobile-dropdown-items.show,
.mobile-app .dropdown-menu.show,
.mobile-app .bootstrap-timepicker-widget.dropdown-menu.open,
.mobile-app .custom-dropdown-filter-accounts.active .filter-container {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0%) !important;
}
.mobile-app .bootstrap-timepicker-widget.dropdown-menu{
  z-index: 1005 !important;
  padding: 25px 10px !important;
  max-width: 570px !important;
}
.mobile-app .mobile-button-fixed {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  background-color: var(--mo-white);
  padding: 0px 0px 0px 0px;
  display: flex;
  z-index: 102;
  justify-content: initial !important;
  gap: 0px !important;
}
.mobile-app .mobile-button-fixed .btn {
  border-radius: 0px;
  width: 100%;
}
.mobile-app .mobile-button-fixed .btn {
  padding: 12px 10px !important;
  font-weight: 600;
  border-radius: 0px !important;
  height: 50px !important;
  min-height: 50px !important;
}
.mobile-app .modal-button-mobileapp,
.mobile-app .modal-button-mobileapp-fixed {
  flex-wrap: nowrap !important;
}
.mobile-app .modal-button-mobileapp button,
.mobile-app .modal-button-mobileapp a,
.mobile-app .modal-button-mobileapp-fixed button {
  width: 50% !important;
}
.mobile-app .modal-button-mobileapp-fixed{
  padding: 0px 10px 0px 0px !important;
}
.mobile-app .modal-button-mobileapp-one button {
  width: 100%;
}
/* for time picker code start */
.mobile-app .mdtp__wrapper {
  top: unset;
  bottom: 10px;
  transform: none !important;
}
.mobile-app .mdtp__wrapper {
  width: 95%;
}
.mobile-app .mdtp__buttons {
  position: unset;
  width: 100%;
  display: flex;
}
.mobile-app .mdtp__button {
  width: 50% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-app .mdtimepicker.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}
.mobile-app .mdtimepicker {
  display: block !important;
  opacity: 1;
  visibility: visible;
}
.mobile-app .mdtimepicker.hidden .mdtp__wrapper {
  opacity: 0;
  visibility: hidden;
  display: block !important;
  transform: translateY(50%) !important;
}
.mobile-app .mdtimepicker .mdtp__wrapper {
  transition: 0.4s ease;
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0%) !important;
}
.mobile-app .mdtp__clock_holder .mdtp__clock {
  margin-bottom: 25px;
}
/* for time picker code end */
/* .mobile-app .select2-container .select2-dropdown{
  display: block !important;
  position: fixed !important; 
  width: 95% !important; 
  max-height: 70vh;
  transition: 0.4s ease; 
  left: 50% !important;  
  bottom: 10px;
  transform: translate(-50%, 100%) !important;
}
.mobile-app .select2-container.select2-container--open .select2-dropdown{  
  transform: translate(-50%, 0%) !important;  
} */
.mobile-app
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mo-gray-200);
  color: var(--mo-black);
}
/* .mobile-app .select2-container--default .select2-results>.select2-results__options {
   max-height: 60vh;
} */
.mobile-app
  .select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar,
.mobile-app .autocomplete-items.common-selection-mobile::-webkit-scrollbar {
  display: none;
}
.mobile-app .select2-container--open .select2-dropdown {
  padding: 10px !important;
  border-radius: 5px !important;
}
.mobile-app .select2-search.select2-search--dropdown {
  margin-bottom: 5px;
}
.mobile-app .select2-search .select2-search--dropdown .select2-search__field {
  border-color: var(--mo-black) !important;
}
.mobile-app .calendarPicakerMain #calendarHeader {
  display: none !important;
}
.mobile-app .calendarPicakerMain {
  min-width: 550px !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 9999 !important;
  border-radius: 15px;
  transform: translate(-50%, -50%);
}
.mobile-app .calendarPicakerMain.calender-active + .mobile-backdrop-calender,
.mobile-app.autocomplete-active-mobile .create-backdrop-mobile {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1001;
  left: 0px;
  bottom: 0px;
  background-color: var(--mo-mobile-backdrop);
}
.mobile-app .calendarPicakerMain .mobile-styling-gap {
  gap: 16px;
}
.mobile-app .calendarPicakerMain .month-of-year {
  min-width: 10ch !important;
}
.mobile-app .mobile-dropdown-settings:hover,
.mobile-app .mobile-dropdown-settings:focus,
.mobile-app .mobile-dropdown-settings:active {
  background: var(--mo-white) !important;
  border: 1px solid var(--card-border-color) !important;
  outline: 1px solid transparent !important;
  box-shadow: none !important;
}
.mobile-app .mobile-dropdown-backdrop .ripple-container {
  position: relative !important;
}
.mobile-app .mobile-dropdown-backdrop.dropdown-toggle::after {
  border-top: 0.4em solid;
  border-right: 0.4em solid rgba(0, 0, 0, 0);
  border-bottom: 0;
  border-left: 0.4em solid rgba(0, 0, 0, 0);
}
.mobile-app .common-selection-mobile {
  position: fixed;
  bottom: 10px;
  left: 50% !important;
  width: 95%;
  z-index: 1000;
  top: unset !important;
  transform: translatex(-50%) !important;
  max-height: 75vh;
  border-radius: 10px;
}
.mobile-app .offcanvas,
.mobile-app .offcanvas-backdrop {
  --mo-offcanvas-width: 100%;
  height: 100vh;
  left: unset !important;
  right: unset;
  bottom: unset;
  transform: translateY(100%) !important;
  transition: all 0.3s !important;
}
.mobile-app .offcanvas.show {
  transform: translateY(0px) !important;
}

.mobile-app .more-options-btn::after,
.mobile-app .importdropdown::after,
.mobile-app .viewStylingDropdown::after,
.mobile-app .mobile-backdrop::after,
.mobile-app .custom-backdrop-mobile::after {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: -20%;
  content: "";
  background-color: var(--mo-mobile-backdrop);
  width: 100vw;
  height: 120vh;
  z-index: 1000;
  transition: all 0.3s;
  visibility: hidden;
  opacity: 0;
}

.mobile-app .more-options-btn.show::after,
.mobile-app .show.importdropdown::after,
.mobile-app .show.viewStylingDropdown::after,
.mobile-app .show.mobile-backdrop::after,
.mobile-app .dropdown-menu.show + .custom-backdrop-mobile::after {
  bottom: 0px;
  visibility: visible;
  opacity: 1;
}
.mobile-app .isMobileItem {
  display: block;
}
.mobile-app .dropdown-menu {
  max-width: 100% !important ;
}
.mobile-app .searchFieldTable .form-control {
  border-radius: 30px !important;
}
.mobile-app .searchFieldTable .form-control::placeholder {
  font-size: 11px !important;
}
.mobile-app .profile-round {
  max-width: 28px;
  max-height: 28px;
  min-width: 28px;
  min-height: 28px;
  font-size: 14px;
}
.mobile-app .text-teritary {
  font-size: calc( var(--mo-font-base) + 17px);
}

.mobile-app .ma-mb-0{
  margin-bottom: 0px !important;
}
.mobile-app .ma-p-0 {
  padding: 0 !important;
}
.mobile-app .ma-m-0 {
  margin: 0 !important;
}
.mobile-app .ma-w-100 {
  width: 100% !important;
}
/* .mobile-app .dataTables_length,
.mobile-app .dataTables_info,
.mobile-app .dataTables_paginate {
  display: none !important;
} */
 .mobile-app .dataTables_length,
.mobile-app .dataTables_paginate  {
  display: none !important;
}
.mobile-app .dataTables_nodata div.dataTables_scrollBody,
.mobile-app .dataTables_empty,
.mobile-app .dataTables_scroll.dataTables_nodata {
  border: none !important;
} 
.mobile-app .isWebItem{
  display: none !important;
}
.mobile-app .ma-gap-0 {
  gap: 0px !important;
}
.mobile-app .mobile-filter-container .select-width .form-group {
  margin: 0 0 0 0 !important;
}
.mobile-app .mobile-filter-contamoduleContaineriner .select-width .form-group .form-select{
  padding: 8px 6px;
  cursor: pointer;
}
.mobile-app .mobile-filter-container .select-width {
  width: 50%;
  min-width: 150px;
}
.mobile-app .mobile-filter-container {
  gap: 10px;
  padding: 10px 0px;
}
.mobile-app .dataTables_scroll {
  border: none !important;
}
.isMobileItem {
  display: none;
}
.mobile-app .fs-12px{
  font-size: 10px !important;
}
.mobile-app .adminstrator-product-div{
  border: 1px solid transparent;
  background-color: var(--mo-gray-100);
}
.mobile-app .administrator-product-wrapper{
  gap: 10px;
  padding-top: 10px;
}
.mobile-app .administratorproductStyling{
  border-radius: 50%;
  min-width: 25px;
  min-height: 25px;
}
.mobile-app .checkbox-width {
  width: 14px;
  height: 14px;
  border: none;
}
.mobile-app .modal-backdrop.show {
  --mo-backdrop-zindex: 0 !important;
}
.mobile-app #moduleContainer{
  height: 100vh !important;
}
.mobile-app .tabs-gapping {
  border-bottom: 1px solid var(---border-grey-color) !important;
  border-top: 1px solid transparent!important;
  border-left: 1px solid transparent!important;
  border-right: 1px solid transparent!important;
}
.mobile-app .mobile-modal-footer{
  justify-content: center !important;  
}
.mobile-app .mobile-modal-footer .btn{
  width: 100%;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.mobile-app .cropme-slider,.mobile-app .cropme-rotation-slider{
  display: none !important;
}
.mobile-app .calendarPicakerMain{
  max-width: 570px !important;
}
.mobile-app button.year-generated,
.mobile-app button.month-of-year{
  font-size: calc(var(--mo-font-base) + 0.9125rem) !important;
  padding: 15px 10px !important;
}
.mobile-app .calendarPicakerMain .year-gap,
.mobile-app .calendarPicakerMain .month-gapping-calender{
  gap: 15px 4%;
}
.mobile-app .year-generated,
.mobile-app .month-of-year{
  min-width: 100% !important;
}
.mobile-app .calender-year-header,
.mobile-app .month-of-year-header{
  width: 22%;
}
.mobile-app .mobile-app-bulk {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  width: 100%;   
}
.mobile-app .bulk-delete {
  padding: 10px;
}
.mobile-app .mobile-app-bulk {
  overflow-x: scroll;
  text-wrap: nowrap;
}
.mobile-app .mobile-app-bulk::-webkit-scrollbar {
  display: none;
}
html[dir="rtl"] .mobile-app .mobile-dropdown-items.show,html[dir="rtl"] .mobile-app .dropdown-menu.show{
  transform: translate(50%,0%) !important;
}
html[dir='rtl'] .mobile-app .mobile-dropdown-items,html[dir='rtl'] .mobile-app .dropdown-menu{
  transform: translate(50%,100%) !important;
}
@media(max-width: 576px){
  .mobile-app .calendarPicakerMain {
    min-width: 95vw !important;
  }  
  .mobile-app button.year-generated,
  .mobile-app button.month-of-year{
    font-size: calc(var(--mo-font-base) + 0.875rem) !important;
    padding: 10px !important;
  }
}
@media(max-width: 400px){
  .mobile-app .calendarPicakerMain .year-gap,
  .mobile-app .calendarPicakerMain .month-gapping-calender{
    gap: 15px 5%;
  } 
  .mobile-app .calender-year-header,
  .mobile-app .month-of-year-header{
    width: 30%;
  }
}