@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  /* global colors */
  --primary: #124C8E;
  --secondary: #344750;
  --tertiary: #62677f;
  --backgroundcolor: #f2f3f7;
  /* sidebar menu colors */
  --navMenuBackground: #ffffff;
  --navMenuFont: #62677f;
  --navMenuIcon: #62677f;
  --navMenuSelected: #124C8E;
  --navMenuFontSelected: #ffffff;
  --navMenuIconSelected: #ffffff;
  /* primary button colors */
  --buttonPrimary: #124C8E;
  --buttonPrimaryHover: #124C8E;
  --buttonPrimaryFont: #ffffff;
  --buttonPrimaryFontHover: #ffffff;
  --buttonPrimaryIcon: #ffffff;
  --buttonPrimaryIconHover: #ffffff;
  --buttonPrimaryBorderWidth: 1px;
  --buttonPrimaryBorder: #124C8E;
  --buttonPrimaryBorderHover: #124C8E;
  /* secondary button colors */
  --buttonSecondary: #ffffff;
  --buttonSecondaryHover: #ffffff;
  --buttonSecondaryFont: #124C8E;
  --buttonSecondaryFontHover: #124C8E;
  --buttonSecondaryIcon: #124C8E;
  --buttonSecondaryIconHover: #124C8E;
  --buttonSecondaryBorderWidth: 1px;
  --buttonSecondaryBorder: #124C8E;
  --buttonSecondaryBorderHover: #124C8E;
}

html {
  font-size: 14px;
}

body {
  margin: 0;
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--backgroundcolor);
  font-size: 14px;
}

header {
  z-index: 11 !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.pointer {
  cursor: pointer
}

.rotate-anim {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 500ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 500ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* removed bootstrap */

[hidden] {
  display: none;
}

.MuiTypography-body1,
.MuiTypography-body2,
.MuiFormLabel-root,
.MuiInputBase-root,
.MuiTab-root,
.MuiDataGrid-columnHeaderTitle,
.MuiDataGrid-cell,
.MuiButton-root,
.MuiAlert-root,
.MuiIconButton-root,
.MuiDataGrid-overlay,
.MuiChip-root {
  font-size: 14px;
}

.MuiTooltip-tooltip {
  font-size: 13px;
  font-weight: 400;
  padding: 8px 10px;
  line-height: normal;
}

.MuiButton-root {
  font-weight: 400;
  min-width: auto;
}

.MuiInputBase-input::placeholder {
  color: #8d8989;
  opacity: 1 !important;
}

label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input::-webkit-input-placeholder {
  opacity: 1 !important;
}

.MuiDialogTitle-root h2 {
  font-size: 20px;
}

.MuiDialogActions-root {
  padding: 16px 24px;
}

.MuiDialogActions-root .MuiButton-label {
  font-weight: 500;
  font-size: 14px;
}

.MuiCircularProgress-colorPrimary {
  color: var(--primary);
}

.tooltip-content ul {
  list-style: none;
  margin-top: 0px;
  padding-left: 0px;
  margin-bottom: 0px;
}

/* XGrid Footer */
.MuiTablePagination-toolbar .MuiTablePagination-selectLabel,
.MuiTablePagination-toolbar .MuiTablePagination-select,
.MuiTablePagination-toolbar .MuiTablePagination-displayedRows {
  font-size: 14px;
}

.MuiTablePagination-root .MuiTablePagination-toolbar .MuiTablePagination-select {
  min-height: auto;
  padding: 0px;
}

/* Switch */
.switch .MuiSwitch-colorPrimary.Mui-checked {
  color: var(--primary);
}

.switch .MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
  background-color: var(--primary)
}

.switch .MuiSwitch-root .MuiSwitch-track {
  background-color: #c7c7c7;
  height: 12px;
  width: 40px;
}

.switch .MuiSwitch-root .MuiSwitch-thumb {
  width: 18px;
  height: 18px;
  box-shadow: 0.5px 0.866px 7px 0px rgba(0, 0, 0, 0.19);
}

/*Logo*/

.logo {
  position: absolute;
  z-index: 9;
  padding: 15px 30px 0px 30px;
  background-color: var(--navMenuBackground);
  width: 250px;
  height: auto;
  /* min-height: 52px;
  max-height: 52px; */
  display: block;
  text-align: center;
}

.logo img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-height: 40px;
  padding: 0px 0px 0px 0px;
  object-fit: contain;
  object-position: center;
}

.menu-drawer-close .logo {
  width: 250px;
  overflow: hidden;
  padding: 15px 8px 0px;
  display: none;
}

.menu-drawer-close:hover .logo {
  width: 250px;
  display: block;
  padding: 15px 30px 0px 30px;
}

/* .menu-drawer-close .MuiList-padding, .menu-drawer-close:hover .MuiList-padding{
  padding-top: 24px;
} */

.menu-drawer-close .drawerclose-logo {
  width: 24px;
  min-width: 24px;
  max-width: 40px;
  margin: 20px auto 20px;
  display: block;
  text-align: center;
}

.menu-drawer-close .drawerclose-logo img {
  width: 100%;
  object-fit: contain;
  min-height: 30px;
  max-height: 60px;
}

.menu-drawer-open .drawerclose-logo {
  display: none;
}

/*Top Bar*/

.MuiAppBar-colorPrimary {
  color: #fff;
  background-color: #fff;
  box-shadow: none;
  border-bottom: 1px solid #F4F4F7;
}

.menu-drawer-open {
  width: 280px;
  background-color: #fff;
}

.appbar-main .appbar-shift {
  margin-left: 145px;
  width: calc(100% - 280px);
  transition: 0.5s;
  padding: 0px 15px;
  box-shadow: 0px 4px 10px 0px rgba(17, 36, 111, 0.02);
  z-index: 999;
}

.MuiToolbar-regular {
  min-height: 52px;
}

.mui-fixed button,
.mui-fixed button:hover {
  width: 25px;
  height: 25px;
  color: #344750;
  margin-right: 0px;
}

.MuiToolbar-gutters {
  padding-left: 20px;
}

.MuiListItemIcon-root {
  min-width: 40px;
}

/* .menu-drawer-close  .dropdown-menu .MuiButtonBase-root .MuiListItemIcon-root{
  min-width: 30px;
} */

.menu-drawer-close .dropdown-menu .MuiButtonBase-root:first-child i {
  left: 16px !important;
}


.menu-drawer-close .dropdown-menu .MuiListItemIcon-root {
  min-width: 58px;
}

/*menu*/

.menu-drawer-open .sidemenu-basic {
  padding-top: 90px;
}

.menu-drawer-close .sidemenu-basic {
  padding-top: 15px;
}

.sidemenu-basic a {
  padding-left: 10px;
  margin: 1px auto;
  width: 90%;
  border-radius: 90px;
}

/* Start Sidemenu Main CSS */
.sidemenu-main {
  background-color: var(--navMenuBackground);
}

.sidemenu-main .sidemenu-logout {
  display: none;
}

.sidemenu-main a {
  margin: 3px auto;
  border-radius: 90px;
}

.sidemenu-main a span,
.sidemenu-main span {
  font-size: 13px;
  font-weight: 400;
  color: var(--navMenuFont);
  line-height: 18px;
  text-transform: uppercase;
}

.sidemenu-main a i,
.sidemenu-main i {
  font-size: 21px;
  position: absolute;
  top: 10px;
  left: 20px;
  color: var(--navMenuIcon);
}

.sidemenu-main a:hover i,
.sidemenu-main a.Mui-selected i,
.sidemenu-main a.active i {
  color: var(--navMenuIconSelected);
  left: 20px;
}

.sidemenu-main a.Mui-selected,
.sidemenu-main a:hover,
.sidemenu-main a.active {
  color: #fff;
  background-color: var(--navMenuSelected) !important;
  box-shadow: 0px 5px 7.2px 0.8px rgba(126, 149, 184, 0.1);
  border-radius: 90px;
  margin: 3px auto;
  text-shadow: -1px 1px 1px #33333357;
}

.sidemenu-main a.Mui-selected span,
.sidemenu-main a:hover span,
.sidemenu-main a.active span {
  color: var(--navMenuFontSelected);
  font-weight: 600;
  text-shadow: -1px 1px 1px #33333357;
}

.sidemenu-main svg {
  color: var(--tertiary);
  font-size: 18px;
  /* transform: rotate(-90deg); */
}

.menu-drawer-open .sidemenu-main {
  padding-top: 80px;
}

.sidemenu-main .sidemenu-main-menu {
  padding-left: 16px;
}

.menu-drawer-open .sidemenu-main .sidemenu-main-submenu {
  padding-left: 16px;
  width: 90%;
  margin: 3px auto
}

.menu-drawer-close .sidemenu-main .sidemenu-main-submenu {
  padding-left: 16px;
}

.menu-drawer-close:hover .sidemenu-main .sidemenu-main-submenu {
  padding-left: 20px;
}

.menu-drawer-open .sidemenu-main .MuiCollapse-container,
.menu-drawer-close .sidemenu-main .MuiCollapse-container {
  background-color: #f1f1f1;
}

.menu-drawer-close:hover .sidemenu-main a i,
.menu-drawer-close:hover .sidemenu-main i {
  left: 20px;
}

.menu-drawer-close .sidemenu-main a i,
.menu-drawer-close .sidemenu-main i {
  left: 18px;
}

.menu-drawer-close .sidemenu-main .count-large {
  display: none;
}

.menu-drawer-open .sidemenu-main .count-small {
  display: none !important;
}

.menu-drawer-close .sidemenu-main .count-small {
  display: block;
  min-width: 25px !important;
  height: 25px !important;
  margin-top: -22px;
  margin-left: 3px !important;
  position: absolute !important;
  right: 2px;
}

.menu-drawer-close:hover .sidemenu-main .count-small {
  display: none;
}

.menu-drawer-close:hover .sidemenu-main .count-large {
  display: flex;
}

/* End Sidemenu Main CSS */

.logout-menu a {
  padding-left: 50px;
  margin: 1px auto;
  width: 90%;
  border-radius: 90px;
  display: none;
}

.logout-menu a span,
.sidemenu-basic a span {
  font-size: 13px;
  font-weight: 400;
  color: var(--tertiary);
  line-height: 24px;
  text-transform: uppercase;
}

.logout-menu a i,
.sidemenu-basic a i {
  font-size: 21px;
  position: absolute;
  left: 15px;
  top: 10px;
  color: var(--tertiary);
}

.logout-menu a:hover i,
.sidemenu-basic a:hover i,
.logout-menu a.Mui-selected i,
.sidemenu-basic a.Mui-selected i {
  color: #fff;
}

.sidemenu-basic a:hover,
.sidemenu-basic a:focus,
.sidemenu-basic a:hover.Mui-selected,
.sidemenu-basic a.Mui-selected,
.logout-menu a.Mui-selected,
.logout-menu a:focus,
.logout-menu a:hover,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a.Mui-selected,
.dropdown-menu a:hover.Mui-selected {
  color: #fff;
  background-color: var(--primary);
  box-shadow: 0px 5px 7.2px 0.8px rgba(126, 149, 184, 0.1);
  border-radius: 90px;
  margin: 1px auto;
  width: 90%;
}

.sidemenu-basic a.Mui-selected span,
.sidemenu-basic a:hover span,
.logout-menu a.Mui-selected span,
.logout-menu a:hover span,
.dropdown-menu a:hover span,
.dropdown-menu a.Mui-selected span {
  color: #fff;
  font-weight: 600;
}

/*Dropdown menu*/

.dropdown-menu .MuiCollapse-wrapper {
  background-color: #fff;
}

.dropdown-menu {
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dropdown-menu i {
  font-size: 21px;
  position: absolute;
  left: 0px;
  top: 11px;
  color: var(--tertiary);
}

.dropdown-menu .MuiList-root a {
  margin: 1px auto;
  width: 90%;
  padding-left: 10px;
  border-radius: 90px;
}

.dropdown-menu .MuiList-root a i {
  left: 16px;
}

.dropdown-menu span {
  font-weight: 400;
  color: var(--tertiary);
  line-height: 24px;
  text-transform: uppercase;
}

.dropdown-menu .Mui-selected {
  padding-right: 16px;
  padding-left: 23px;
}

.dropdown-menu svg {
  color: var(--tertiary);
  font-size: 18px;
}

.menu-drawer-open .dropdown-menu .MuiList-root a {
  width: 90%;
  margin: 1px auto;
}

.menu-drawer-open .dropdown-menu .MuiList-root a:hover span {
  color: #fff;
  font-weight: 600;
}

.menu-drawer-open .dropdown-menu .MuiList-root a i {
  font-size: 21px;
  position: absolute;
  top: 10px;
  color: var(--tertiary);
}

.menu-drawer-open .dropdown-menu .MuiList-root a:hover i,
.menu-drawer-open .dropdown-menu .MuiList-root a.Mui-selected i,
.menu-drawer-close .dropdown-menu .MuiList-root a:hover i,
.menu-drawer-close .dropdown-menu .MuiList-root a.Mui-selected i {
  color: #fff;
}

.MuiListItem-root.Mui-selected,
.MuiListItem-root.Mui-selected:hover {
  background-color: transparent;
}

/*menu drawer close*/

.menu-drawer-close {
  width: 58px;
  z-index: 99;
  bottom: 0;
  float: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  background-color: #fff;
}

.menu-drawer-close:hover {
  width: 280px;
  z-index: 99;
}

.mui-fixed {
  width: calc(100% - 58px);
  z-index: 10;
}

.menu-drawer-close .dropdown-menu .MuiList-root a {
  padding-left: 0px;
}

.menu-drawer-close .dropdown-menu .MuiList-root a:hover i {
  color: #fff;
}

.menu-drawer-close .dropdown-menu .MuiList-root a i {
  left: 52px;
}

.drawer-open .content-wrapper-inner,
.drawer-open .content-wrapper {
  padding: 15px 20px 20px 20px;
}

.menu-drawer-close .sidemenu-basic a i {
  left: 12px !important;
}

.menu-drawer-close .dropdown-menu .MuiListItem-button i {
  left: 12px !important;
}

.menu-drawer-close:hover .dropdown-menu .MuiListItem-button .MuiListItemIcon-root i {
  left: 24px !important;
}

.menu-drawer-close:hover .dropdown-menu .MuiCollapse-container .MuiList-root a i {
  left: 12px !important;
}

.menu-drawer-open .dropdown-menu i {
  left: 28px;
}

/*menu vertical scroll*/

.MuiDrawer-root .MuiDrawer-paper::-webkit-scrollbar {
  display: none;
}

.MuiDrawer-root .MuiDrawer-paper {
  white-space: nowrap;
  height: 100%;
  overflow-y: auto;
  background-color: var(--navMenuBackground);
}

/*Top Profile*/

.username-tx {
  font-weight: 400;
  color: var(--primary);
  padding: 14px 30px 14px 10px;
  line-height: 32px;
  position: relative;
  cursor: pointer;
}

.username-tx:after {
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 8px;
  right: 0px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.logout-dropdown {
  position: relative;
  padding-left: 28px;
}

.setting-dropdown {
  right: 0px;
  left: inherit;
  width: auto;
}

.setting-dropdown .MuiPaper-root {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(226, 231, 237);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgb(0 0 0 / 2%);
}

.setting-dropdown .MuiPaper-root ul li a {
  font-size: 14px;
  color: var(--tertiary);
  line-height: 15px;
}

.setting-dropdown .MuiPaper-rootul li.Mui-selected,
.setting-dropdown .MuiPaper-root ul li:hover {
  background-color: #eef1f5;
}

.setting-dropdown .MuiPaper-root ul li a i {
  position: relative;
  top: 2px;
  padding-right: 8px;
}

.MuiAvatar-colorDefault {
  width: 32px;
  height: 32px;
  background-color: #d4d61f;
}


/*breadcrumb-nav*/

nav .breadcrumb-ul {
  width: auto;
  margin: 0px;
  padding: 0px 0px 20px;
  list-style: none;
}

nav .breadcrumb-ul li {
  display: inline-block;
  position: relative;
  padding: 0px 15px 0px 20px;
}

nav .breadcrumb-ul li a {
  font-weight: 400;
  color: var(--tertiary);
  display: inline-block;
  text-decoration: none;
}

nav .breadcrumb-ul li:first-child::before {
  content: '';
  display: block;
  background-color: #84cf6e;
  width: 8px;
  height: 8px;
  border-radius: 90px;
  position: absolute;
  left: 0px;
  top: 6px;
}

nav .breadcrumb-ul li a::before {
  content: "\6f";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: #8992b3;
  position: absolute;
  top: 3px;
  right: -8px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

nav .breadcrumb-ul li.disabled a {
  color: var(--primary);
  font-weight: 500;
}

nav .breadcrumb-ul li.disabled a::before {
  content: "";
  display: none;
}

/*Content Area*/

.drawer-close {
  padding: 0px 40px 0px 95px;
  width: calc(100% - 280px);
}

.drawer-open {
  padding: 0px 40px 0px 40px;
}

.contenter-main {
  padding: 0px;
  width: calc(100% - 280px);
}

.contenter-main .MuiBox-root {
  padding: 0px 0px 0px;
  margin: 0px 0px 10px;
}

.contenter-main .content-box {
  background-color: transparent;
  box-shadow: none;
}

.content-wrapper-inner {
  width: calc(100% - 0px);
  padding: 20px 40px 40px 95px;
  transition: 0.1s;
}

.content-wrapper-inner h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  margin: 0px;
  padding: 0px;
}

.content-wrapper-inner h5 {
  font-size: 20px;
  font-weight: 500;
  color: var(--primary);
  margin: 0px;
}

.content-wrapper-inner .address {
  font-style: normal;
  font-weight: 400;
  color: var(--secondary);
  line-height: 18px;
  padding-bottom: 8px;
  padding-top: 8px;
}

.white-bg {
  border-radius: 6px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2px 3px 4px 0 #e6e7eb;
  border: 1px solid #E2E8EF;
  padding: 30px 30px;
  margin-bottom: 30px;
}

.white-bg:after {
  content: '';
  display: block;
  clear: both;
  height: auto;
}

/*Table*/
.table-list {
  box-shadow: none;
  overflow: auto;
  background-color: transparent;
}

.table-list table thead tr th {
  background-color: #f5f5fd;
  border: none;
  color: #969fac;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  line-height: 18px;
  padding: .75rem !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.table-list table thead tr th svg {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.table-list table tbody {
  border-radius: 4px;
}

.table-list table tbody tr {
  background-color: #ffffff;
  margin: 0px 0px 0px 0px;
  border: 1px solid #e7ecf2;
  border-collapse: collapse;
  border-radius: 4px;
}

.table-list table tbody tr:hover {
  background-color: #f0f1f3;
}

.table-list table tbody tr td {
  background-color: #fff;
  width: auto;
  color: #7b8994;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0px;
  margin: 1px 0px 0px 0px;
  padding: .50rem .75rem !important;
  vertical-align: top;
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-list table tbody tr:last-child td {
  border-bottom: none;
}

.table-list table tbody tr td:last-child {
  overflow: inherit;
}

.table-checkbox .MuiButtonBase-root {
  padding: 0px;
}

/* Table action icons*/

.table-list table tbody tr td span i.dashboardicon-action {
  font-size: 16px;
  line-height: 9px;
}

.table-list table tbody tr td span i.dashboardicon-action:hover {
  color: #3f8cf4;
}

.table-list table tbody tr td .action-button {
  padding: 0 12px;
}

.table-list table tbody tr td .action-button:hover,
.table-list table tbody tr td .action-button:focus,
.table-list table tbody tr td .action-button:active {
  background-color: transparent;
}

/*table Highlight text in bold*/

.table-list table tbody tr td.link-bold,
.table-list table tbody tr td.link-bold a {
  text-decoration: none;
}

.table-list table tbody tr td.bold {
  font-weight: 600;
}

/*Action Dropdown*/

.action-dropdown {
  z-index: 9;
}

.action-dropdown ul {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(226, 231, 237);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.02);
  padding: 0px;
}

.action-dropdown ul li {
  color: var(--primary);
  line-height: 15px;
  padding: 8px 25px 8px 15px;
  font-size: 16px;
}

.action-dropdown ul li i {
  color: var(--primary);
  font-size: 20px;
}

.action-dropdown ul li:hover {
  background-color: #eef1f5;
}

.action-dropdown ul li.Mui-selected,
.action-dropdown ul li.Mui-selected:hover {
  background-color: #eef1f5;
}

.action-dropdown ul li .MuiListItemIcon-root {
  min-width: auto;
  padding-right: 10px;
}

.acton-butn a,
.acton-butn button {
  padding: 0px;
}

/*Buttons*/

.form-button-wrap {
  padding-top: 30px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn:hover,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn:hover {
  border: 1px solid var(--primary);
  padding: 12px;
  border-radius: 30px;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
  line-height: 0;
  margin-right: 8px;
  background-color: #fff;
  cursor: pointer;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary:hover {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  padding: 12px;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 0px;
  margin-right: 8px;
}

.add-butn {
  padding: 11px 20px;
  color: var(--buttonPrimaryFont);
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
  border-width: 1px;
  border-style: solid;
  border-radius: 90px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  cursor: pointer;
  text-shadow: -1px 1px 1px #33333357;
  line-height: 0;
  transition: all ease 0.2s;
}

.add-butn:hover,
.add-butn:focus,
.add-butn:active {
  color: var(--buttonPrimaryFontHover);
  background-color: var(--buttonPrimaryHover);
  border-color: var(--buttonPrimaryBorderHover);
  box-shadow: none;
}

.add-butn i {
  margin-right: 6px;
  color: var(--buttonPrimaryIcon);
}

.add-butn:hover i {
  color: var(--buttonPrimaryIconHover)
}

.header-link-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  line-height: normal !important;
  padding: 11px 20px !important;
}

.fiiter-white-butn {
  padding: 11px 20px;
  color: var(--buttonSecondaryFont);
  background-color: var(--buttonSecondary);
  border-color: var(--buttonSecondaryBorder);
  border-width: 1px;
  border-style: solid;
  border-radius: 90px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  position: relative;
  text-shadow: none;
  cursor: pointer;
  line-height: 0;
  transition: all ease 0.2s;
}

.fiiter-white-butn:hover,
.fiiter-white-butn:focus,
.fiiter-white-butn:active {
  color: var(--buttonSecondaryFontHover);
  background-color: var(--buttonSecondaryHover);
  border-color: var(--buttonSecondaryBorderHover);
  box-shadow: none;
}

.fiiter-white-butn i {
  margin-right: 6px;
  color: var(--buttonSecondaryIcon)
}

.fiiter-white-butn svg {
  font-size: 14px;
  color: var(--buttonSecondaryIcon)
}

.fiiter-white-butn:hover i,
.fiiter-white-butn:hover svg {
  color: var(--buttonSecondaryIconHover)
}

.MuiTouchRipple-root span {
  background-color: #fff;
}

.form-button {
  color: var(--buttonPrimaryFont) !important;
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
  border-width: 1px;
  border-style: solid;
  border-radius: 90px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  padding: 8px 40px;
  text-transform: none;
  cursor: pointer;
  margin: 0px auto;
  width: auto;
  display: inline-block;
  text-shadow: -1px 1px 1px #33333357;
  transition: all ease 0.2s;
}

.form-button:hover,
.form-button:focus,
.form-button:active {
  color: var(--buttonPrimaryFontHover);
  background-color: var(--buttonPrimaryHover);
  border-color: var(--buttonPrimaryBorderHover);
  box-shadow: none;
}

/* disabled buttons css */
.form-button.Mui-disabled {
  opacity: 0.7;
  color: var(--buttonPrimaryFont);
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
}

.add-butn.Mui-disabled {
  opacity: 0.7;
  color: var(--buttonPrimaryFont);
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
}

.add-butn.Mui-disabled i {
  color: var(--buttonPrimaryIcon);
}

.theme-butn.Mui-disabled {
  opacity: 0.7;
  color: var(--buttonPrimaryFont);
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
}

.fiiter-white-butn.Mui-disabled {
  opacity: 0.7;
  color: var(--buttonSecondaryFont);
  background-color: var(--buttonSecondary);
  border-color: var(--buttonSecondaryBorder);
}

.fiiter-white-butn.Mui-disabled i {
  color: var(--buttonSecondaryIcon);
}

.white-butn.Mui-disabled {
  opacity: 0.7;
  color: var(--buttonSecondaryFont);
  background-color: var(--buttonSecondary);
  border-color: var(--buttonSecondaryBorder);
}

.cancel-button {
  background-color: #fff;
  border-width: 0px;
  border-radius: 90px;
  color: var(--tertiary);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  padding: 8px 40px;
  margin: 0px 0px 0px;
  text-transform: none;
  cursor: pointer;
  transition: all ease 0.2s;
}

.cancel-button:hover,
.cancel-button:focus,
.cancel-button:active {
  background-color: #fff;
  box-shadow: none;
}

.cancel-button .MuiTouchRipple-root {
  display: none;
}

.prev {
  background-color: #fff;
  border-radius: 4px;
  padding: 5px 15px 5px 26px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.prev::before {
  content: "\6e";
  font-family: 'dashboard-icons';
  font-size: 9px;
  color: #b8bfc5;
  position: absolute;
  top: 9px;
  left: 8px;
  bottom: 0;
}

.next {
  background-color: #fff;
  border-radius: 4px;
  padding: 5px 26px 5px 15px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  position: relative;
  border: 1px solid #E2E8EF;
}

.next::before {
  content: "\6f";
  font-family: 'dashboard-icons';
  font-size: 9px;
  color: var(--tertiary);
  position: absolute;
  top: 9px;
  right: 8px;
  bottom: 0;
}

.MuiIconButton-root:hover {
  background-color: transparent;
}

.MuiPickersDay-daySelected:hover {
  background-color: #3f50b5 !important;
}

/*Filters Button and icon*/
h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--primary);
  padding: 0px;
  margin: 0px;
}

h2 span {
  position: relative;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  border-radius: 90px;
  padding: 0px 4px;
  display: inline-block;
  padding-right: 5px;
  color: var(--primary);
}

.filter-area {
  margin-bottom: 20px;
}

.filter-area h2 span::before {
  content: ':';
  font-size: 18px;
}

.white-butn {
  color: var(--buttonSecondaryFont);
  background-color: var(--buttonSecondary);
  border-color: var(--buttonSecondaryBorder);
  border-width: 1px;
  border-style: solid;
  border-radius: 90px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  padding: 18px 20px;
  display: block;
  line-height: 0;
  transition: all ease 0.2s;
}

.white-butn:hover,
.white-butn:focus,
.white-butn:active {
  color: var(--buttonSecondaryFontHover);
  background-color: var(--buttonSecondaryHover);
  border-color: var(--buttonSecondaryBorderHover);
  box-shadow: none;
}

.white-butn.active {
  color: var(--buttonSecondaryFontHover);
  background-color: var(--buttonSecondaryHover);
  border-color: var(--buttonSecondaryBorderHover);
}

.theme-butn {
  color: var(--buttonPrimaryFont);
  background-color: var(--buttonPrimary);
  border-color: var(--buttonPrimaryBorder);
  border-width: 1px;
  border-style: solid;
  border-radius: 90px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  padding: 18px 20px;
  display: block;
  line-height: 0;
  transition: all ease 0.2s;
}

.theme-butn:hover,
.theme-butn:focus,
.theme-butn:active {
  color: var(--buttonPrimaryFontHover);
  background-color: var(--buttonPrimaryHover);
  border-color: var(--buttonPrimaryBorderHover);
  box-shadow: none;
}

.theme-butn.active {
  color: var(--buttonPrimaryFontHover);
  background-color: var(--buttonPrimaryHover);
  border-color: var(--buttonPrimaryBorderHover);
}

.theme-butn-disabled {
  background-color: var(--buttonPrimary);
  border: 1px solid var(--buttonPrimaryBorder);
  border-radius: 90px;
  color: var(--buttonPrimaryFont);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  padding: 18px 20px;
  display: block;
  line-height: 0;
  transition: all ease 0.2s;
  opacity: 0.5;
}

.theme-butn-disabled:hover,
.theme-butn-disabled:focus,
.theme-butn-disabled:active {
  background-color: var(--buttonPrimary);
  border: 1px solid var(--buttonPrimaryBorder);
  color: var(--buttonPrimaryFont);
  box-shadow: none;
  opacity: 0.5;
}

/* add text button */
.add-text-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  padding: 0px;
  cursor: pointer;
}

.add-text-button:hover,
.add-text-button:focus,
.add-text-button:active {
  background-color: #fff;
  border: none;
  box-shadow: none !important;
}

.add-text-button :global .MuiTouchRipple-root {
  display: none;
}

/* remove text button */
.remove-text-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #f40d13;
  padding: 0px;
  cursor: pointer;
}

.remove-text-button:hover,
.remove-text-button:focus,
.remove-text-button:active {
  background-color: #fff;
  border: none;
  box-shadow: none !important;
}

.remove-text-button :global .MuiTouchRipple-root {
  display: none;
}

.MuiAlert-action button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  line-height: normal;
}

.MuiAlert-action button:hover,
.MuiAlert-action button:focus,
.MuiAlert-action button:active {
  background-color: #fff;
  border: none;
  box-shadow: none !important;
}

.MuiAlert-action button :global .MuiTouchRipple-root {
  display: none;
}

.reset {
  padding: 5px;
  /* position: relative;
  top: 5px;*/
}

.reset span i {
  font-family: 'dashboard-icons';
  font-weight: bold;
  padding: 0px;
  color: var(--tertiary);
}

.reset-icon {
  background: var(--buttonPrimary);
  color: var(--buttonPrimaryFont);
  border-radius: 90px;
  text-shadow: -1px 1px 1px #33333357;
}

.reset-icon span i {
  color: var(--buttonPrimaryIcon);
}

.reset-icon:hover {
  background-color: var(--buttonPrimaryHover);
  color: var(--buttonPrimaryFontHover);
}

.reset-icon:hover span i {
  color: var(--buttonPrimaryIconHover);
}

.delete {
  margin: 0 5px;
}

.delete span i {
  color: #f84848;
  font-size: 17px;
}

.select-box {
  width: 100%;
}

.select-box .MuiSelect-select em {
  font-style: normal;
}

.select-box label,
.select-box label.Mui-focused {
  font-size: 13px;
  color: var(--tertiary);
  letter-spacing: 0.5px;
  padding: 0px;
  z-index: 1;
  background-color: #fff;
  padding: 0px 4px;
}

.filter-area .select-box label {
  background: linear-gradient(0deg, #fff 0%, #fff 30%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
}

.select-box .MuiInput-formControl {
  margin-top: 0px;
}

.select-box .MuiInput-formControl:hover,
.select-box .MuiInput-formControl:focus,
.select-box .MuiInput-formControl:after,
.MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: none;
  border-radius: 90px;
}

.select-box .MuiInput-formControl::before {
  border-bottom: none;
}

.select-box .MuiSelect-select {
  width: 100%;
  min-width: 80px;
  color: var(--secondary);
  font-style: normal;
  border: 1px solid #cfcfcf;
  padding: 10px 40px 10px 20px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}

.select-box .MuiSelect-select:after {
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 12px;
  right: 16px;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.select-box svg {
  display: none;
}

.select-box i {
  color: var(--tertiary);
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 1;
}

.select-box .MuiInputLabel-shrink {
  transform: translate(17px, -7px) scale(1);
  transform-origin: top left;
}

/* Label with select */
.label-with-select .MuiInput-formControl {
  margin-top: 0px;
}

.label-with-select .MuiInput-formControl:hover,
.label-with-select .MuiInput-formControl:focus,
.label-with-select .MuiInput-formControl::before,
.label-with-select .MuiInput-formControl:after {
  border-bottom: none;
  border-radius: 90px;
}

.label-with-select .MuiSelect-select {
  border: 1px solid #cfcfcf;
  background-color: #fff;
  border-radius: 90px;
}

.label-with-select .MuiSelect-select:after {
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 12px;
  right: 16px;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.label-with-select .MuiInputLabel-shrink {
  transform: translate(37px, 12.5px) scale(1);
}

.label-with-select i {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 12px;
  line-height: 0;
  pointer-events: none;
  color: var(--tertiary);
}

.label-with-select label,
.label-with-select label.Mui-focused {
  color: var(--tertiary);
  z-index: 1;
  pointer-events: none;
}

.label-with-select svg {
  display: none;
}

.lws-pms-types .MuiSelect-select {
  padding: 10px 30px 10px 120px;
}

.action-code-select-input .MuiSelect-select {
  padding: 10px 30px 10px 130px;
}

.lws-subscribed .MuiSelect-select {
  padding: 10px 30px 10px 120px;
}

.lws-status .MuiSelect-select {
  padding: 10px 30px 10px 90px;
}

.lws-priority .MuiSelect-select {
  padding: 10px 30px 10px 94px;
}

.lws-read-status .MuiSelect-select {
  padding: 10px 30px 10px 124px;
}

.lws-parcel-status .MuiSelect-select {
  padding: 10px 30px 10px 132px;
}

.lws-method .MuiSelect-select {
  padding: 10px 30px 10px 98px;
}

.lws-level .MuiSelect-select {
  padding: 10px 30px 10px 80px;
}

.lws-payment-method .MuiSelect-select {
  padding: 10px 30px 10px 155px;
}

.MuiMenu-paper {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(226, 231, 237);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.02);
}

.MuiMenu-paper ul li {
  font-size: 14px;
  color: var(--tertiary);
  line-height: 15px;
}

.MuiMenu-paper ul li.Mui-selected,
.MuiMenu-paper ul li.Mui-selected:hover {
  background-color: #eef1f5;
  color: var(--secondary);
}

.MuiMenu-paper ul li:hover {
  background-color: #eef1f5;
}

/*Filter Date*/

.date-filter {
  position: relative;
}

.date-filter .MuiInput-formControl {
  color: var(--secondary);
  border: 1px solid #cfcfcf;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 90px;
  margin-top: 0px;
}

.date-filter .MuiInputBase-root input {
  margin: 0px;
  padding: 0px;
  appearance: unset;
}

.date-filter .MuiInputBase-root input[type="date"]::-webkit-calendar-picker-indicator {
  color: var(--tertiary);
  opacity: 0;
  cursor: pointer;
  background-color: #ff6337;
  z-index: 1;
  position: absolute;
  top: 12px;
  right: 16px;
}

.date-filter .MuiInputBase-root input[type="month"]::-webkit-calendar-picker-indicator {
  color: var(--tertiary);
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 12px;
  right: 16px;
}

.date-filter .MuiInputBase-root input::after {
  content: "\72";
  font-family: 'dashboard-icons';
  font-size: 14px;
  color: var(--tertiary);
  position: absolute;
  top: 10px;
  right: 16px;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

/* .date-filter .MuiInputBase-root button::after {
  content: "\72";
  font-family: 'dashboard-icons';
  font-size: 14px;
  color: var(--tertiary);
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.date-filter .MuiInputBase-root button svg {
  display: none;
} */

.date-filter .MuiInputBase-root::after,
.date-filter .MuiInputBase-root::before {
  border-bottom: none;
}

.date-filter label,
.date-filter label.MuiInputLabel-formControl {
  background-color: #fff;
  color: var(--tertiary);
  z-index: 1;
  padding: 0px;
  font-size: 13px;
  padding: 0px 4px;
}

.filter-area .date-filter label {
  background: linear-gradient(0deg, #fff 0%, #fff 30%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
}

.date-filter .MuiInputLabel-shrink {
  transform: translate(17px, -7px) scale(1);
}

.date-range-filter .MuiInputBase-root {
  min-width: 260px;
}

/*Filter checkbox*/

.checkbox-label {
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #E2E8EF;
  border-radius: 90px;
  box-shadow: none;
  text-decoration: none;
  margin: 0px;
  width: 100%;
}

.checkbox-label.active {
  background-color: #fff;
  border: 1px solid var(--primary);
  border-radius: 90px;
  box-shadow: none;

}

.checkbox-label span.MuiTypography-root {
  color: var(--tertiary);
  letter-spacing: 0.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkbox-label span {
  padding: 0px;
}

.checkbox-label.active span {
  color: var(--primary);
}

.checkbox-label .MuiIconButton-label span {
  border: none;
  background-color: #fff;
  box-shadow: none;
  width: 0px;
  height: 0px;
}

.checkbox-label .MuiIconButton-label svg {
  display: none;
}

.checkbox-label .MuiIconButton-label span::before {
  background-image: none;
  content: "";
  font-family: 'dashboard-icons';
  font-size: 12px;
  color: var(--tertiary);
  position: absolute;
  top: -8px;
  left: -8px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
  width: 0px;
  height: 0px;
}

.checkbox-label.active .Mui-checked .MuiIconButton-label span::before {
  color: #fff;
}

.checkbox-label button {
  padding: 0px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  background-color: transparent;
}

.checkbox-label button:focus,
.checkbox-label button:active,
.checkbox-label button:hover {
  background-color: transparent;
}

.checkbox-label button .MuiTouchRipple-root {
  display: none;
}


/*With Checkbox*/


.check-box-label {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 90px;
  margin: 0px 0px 0px;
  width: 100%;
}

.check-box-label .MuiButtonBase-root {
  padding: 0px;
  color: var(--tertiary);
}

.check-box-label .MuiButtonBase-root.Mui-checked {
  color: var(--primary);
}

.check-box-label .MuiTypography-root {
  color: var(--tertiary);
  font-weight: 400;
  padding-left: 6px;
  line-height: normal;
}

.check-box-label .MuiIconButton-label svg {
  padding: 0px;
  font-size: 20px
}

/* .check-box-label .MuiIconButton-label svg::before{
  content: '';
  display: block;
  clear: both;
  width: 15px;
  height: 15px;
  border: 1px solid #d1d7dd;
  position: absolute;
  left: 4px;
  top: -8px;
}

.check-box-label .MuiIconButton-label svg::before{
  content: '';
  display: block;
  clear: both;
  width: 18px;
  height: 18px;
  border: 1px solid #d1d7dd;
  position: absolute;
  left: 2px;
  top: -9px;
  border-radius: 2px;
}

.check-box-label .Mui-checked .MuiIconButton-label svg::before{
  content: "\4e";
  display: block;
  clear: both;
  width: 18px;
  height: 18px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  position: absolute;
  left: 2px;
  top: -9px;
  border-radius: 2px;
  color: #fff;
  line-height: 16px;
  font-size: 9px;
  font-family: 'dashboard-icons';
} */


/*Search Bar*/

.filter-input {
  position: relative;
}

.filter-input label {
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  top: -22px;
}

.filter-input .MuiInput-formControl {
  margin-top: 0px;
}

.filter-input .MuiInput-formControl:hover,
.filter-input .MuiInput-formControl:after,
.MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: none;
}

.filter-input .MuiInput-formControl::before {
  border-bottom: none;
}

.filter-input .MuiInput-formControl input {
  width: 100%;
  color: var(--secondary);
  border: 1px solid #E2E8EF;
  padding: 10px 15px 10px 40px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}

.filter-input label {
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  padding-left: 15px;
  position: absolute;
  top: -8px;
}

.filter-input i {
  position: absolute;
  top: 12px;
  left: 18px;
  color: var(--tertiary);
  font-size: 14px;
  z-index: 1;
}

.filter-input .MuiInputAdornment-positionEnd {
  margin-left: 0px;
}

.search-box-main {
  width: 130px;
  display: inline-block;
}

.search-box {
  position: relative;
  z-index: 8;
}

.search-box .MuiInput-formControl {
  margin-top: 0px;
  position: relative;
}

.search-box .MuiInput-formControl:hover,
.search-box .MuiInput-formControl:after,
.MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: none;
}

.search-box .MuiInput-formControl::before {
  border-bottom: none;
}

.search-box .MuiInput-formControl input {
  width: 78px;
  color: var(--secondary);
  border: 1px solid #cfcfcf;
  padding: 10px 15px 10px 36px;
  background-color: #fff;
  border-radius: 90px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-box .MuiInput-formControl::before {
  content: "\32";
  font-family: 'dashboard-icons';
  color: var(--tertiary);
  position: absolute;
  top: 12px;
  left: 16px;
  vertical-align: middle;
  pointer-events: none;
  z-index: 99;
}

.search-box .MuiInput-formControl input:focus {
  width: 140px;
  padding: 10px 15px 10px 40px;
  color: var(--secondary);
}

.search-box label,
.search-box label.MuiInputLabel-formControl {
  font-size: 13px;
  background-color: #fff;
  color: var(--tertiary);
  z-index: 1;
  letter-spacing: 0.5px;
  padding: 0px;
  background: #fff;
}

.filter-area .search-box label {
  background: linear-gradient(0deg, #fff 0%, #fff 30%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
}

.search-box .MuiInputLabel-shrink {
  transform: translate(12px, -7px) scale(1);
}

.search-box i {
  position: absolute;
  top: 12px;
  left: 18px;
  color: var(--tertiary);
  font-size: 14px;
  z-index: 1;
}

/*Popup*/

.MuiBackdrop-root {
  background-color: rgb(6, 2, 25, 0.8);
}

.slide-right .MuiDialog-paperWidthSm {
  max-width: 560px;
}

.slide-right .MuiDialog-paper {
  position: fixed;
  right: 0;
  top: 0;
  margin: 0px;
  width: 100%;
  height: 100vh;
  max-height: calc(100% - 0px);
  border-radius: 0;
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
  z-index: 15;
}

.dismiss {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

.MuiDialogTitle-root {
  color: var(--primary);
}

.MuiDialogContent-root,
.MuiDialogContent-root p {
  color: var(--tertiary);
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(100%);
  }

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

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }

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

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }

  100% {
    -webkit-transform: translateX(100%);
  }
}

/*Form Fields*/

.form-white-bg {
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 4px 0px rgba(0, 28, 61, 0.01);
  border: 1px solid #e2e5f0;
  padding: 45px;
  margin-bottom: 50px;
}

.form-field {
  margin-bottom: 30px;
}

.form-field::after {
  content: '';
  display: block;
  clear: both;
  height: auto;
}

.form-wrap h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  margin: 0px;
  line-height: normal;
}

.form-wrap h4 {
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary);
  margin: 0px;
  line-height: normal;
}

.form-wrap .MuiInputLabel-formControl {
  font-size: 13px;
  color: var(--tertiary);
  background-color: #fff;
  padding: 0px 4px;
}

/* .form-wrap .MuiFormControl-root {
  min-width: auto;
  margin-bottom: 10px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
} */

.form-wrap .MuiInputBase-root {
  padding: 12px 18px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-radius: 90px;
}

.form-wrap .MuiInputBase-root .MuiIconButton-root {
  padding: 0px;
}

.form-wrap .MuiAutocomplete-inputRoot span i.dashboardicon-down {
  font-size: 11px;
  color: var(--tertiary);
  padding: 6px 10px 0px 10px;
  border: none;
  margin: 0px;
}

.form-wrap .MuiAutocomplete-inputRoot span i.dashboardicon-close {
  font-size: 11px;
  color: var(--tertiary);
  padding: 6px 0px 0px 0px;
  border: none;
  margin: 0px;
}

.form-wrap .MuiAutocomplete-inputRoot span svg path {
  appearance: none;
}

.form-wrap .MuiInputLabel-formControl {
  transform: translate(12px, -7px) scale(1);
}

.form-wrap .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input {
  padding: 0px;
}

.textarea-main .MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(12px, -7px) scale(1);
}

.textarea-main .MuiInputLabel-formControl {
  transform: translate(26px, 14px) scale(1);
}



.form-wrap .masked-phone-number .MuiInput-input,
.form-wrap .MuiInputBase-root input,
.form-wrap .MuiInputBase-root textarea {
  width: 100%;
  min-width: auto;
  font-weight: 500;
  text-align: left;
  color: var(--secondary);
  padding: 0px;
  background-color: #fff;
}

.form-wrap .MuiInputBase-root textarea {
  resize: none;
  min-height: 50px;
  max-height: 50px;
}

.form-wrap .MuiInputBase-root fieldset span {
  font-weight: 400;
  color: var(--tertiary);
  text-align: left;
}

.form-wrap .MuiInputBase-root fieldset {
  border: 1px solid #cfcfcf;
  outline: none;
  box-shadow: none;
}

.form-wrap .MuiInputBase-root fieldset:hover {
  border: 1px solid #2c29e7;
  position: relative;
  z-index: 999;
}

.form-wrap .MuiFormControl-root .Mui-disabled {
  opacity: 0.7;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #e2e8ef;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #9C9C9C;
}

/*select box */

.form-select-box .MuiFormControl-root {
  width: 100%;
}

.form-select-box .MuiSelect-root {
  margin: 0px;
  padding: 0px 8px 0px 0px;
  min-height: auto;
  font-weight: 500;
  text-align: left;
  color: var(--secondary);
  font-style: normal;
}

.form-select-box .MuiAutocomplete-root .MuiInputBase-root::after {
  content: "";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--primary);
  position: absolute;
  top: 13px;
  right: 15px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
  display: none;
}

.form-select-box .MuiInputBase-root::after {
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 13px;
  right: 15px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.form-select-box .MuiSelect-root em {
  font-style: normal;
}

.form-select-box .MuiInputBase-root {
  line-height: 18px;
  padding: 12px 18px;
  border-radius: 30px;
}

.form-select-box .MuiInputBase-root svg {
  display: none;
}

.form-wrap .MuiAutocomplete-inputRoot span svg:after,
.form-select-box .MuiInputBase-root span svg:after {
  content: "\46";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 17px;
  right: 16px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

.form-select-box .MuiInputBase-root svg {
  display: none;
}

.form-select-box .MuiInputLabel-formControl {
  transform: translate(16px, -6px) scale(1) !important;
  background-color: #fff;
  padding: 0px 8px 0px 3px;
  z-index: 9;
  font-size: 13px;
  color: var(--tertiary);
}

.form-select-box .MuiSelect-select:focus {
  background-color: #fff;
}

.MuiAutocomplete-popper {
  display: block;
  position: relative;
  top: 0px
}

/*choose-file*/

.form-wrap .choose-file {
  width: 100%;
  min-height: 85px;
  font-weight: 600;
  text-align: center;
  background-color: #fff;
  border: 2px dashed #E2E8EF;
  border-radius: 4px;
  box-shadow: none;
}

.form-wrap .choose-file:hover,
.form-wrap .choose-file:focus,
.form-wrapm .choose-file:active {
  background-color: #fff;
  border: 2px dashed #e2e8ef;
}

.form-wrap .choose-file span span {
  width: auto;
  color: var(--tertiary);
  float: left;
  margin-right: 3px;
  word-break: break-all;
}

/*Form Checkbox*/

.form-checkbox span.MuiFormControlLabel-label {
  font-weight: 400;
  color: var(--tertiary);
  text-align: left;
  letter-spacing: 0.5px;
}

.form-checkbox .MuiCheckbox-root {
  color: var(--tertiary);
}

.form-checkbox span.Mui-checked {
  color: var(--primary);
}

.form-checkbox .MuiIconButton-label span {
  background-image: none;
  background-color: #fff;
  box-shadow: none;
  border: 1px solid var(--tertiary);
  border-radius: 2px;
  width: 18px;
  height: 18px;
}

.form-checkbox .Mui-checked .MuiIconButton-label span {
  background-image: none;
  background-color: var(--primary);
  box-shadow: none;
  border: 1px solid var(--primary);
  border-radius: 2px;
  width: 18px;
  height: 18px;
}

.form-checkbox .Mui-checked .MuiIconButton-label span::before {
  height: 16px;
  background-position: 0px 0px;
  width: 16px;
}

/*Placeholder*/

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  font-weight: 400;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #000;
  font-weight: 400;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #000;
  font-weight: 400;
}

/*Login Soical Button */

.google-button {
  background: url("./images/google-icon.png");
  background-repeat: no-repeat;
  background-position: 12px 10px;
  padding: 9px 20px 9px 40px;
  background-color: #fff;
  border: 1px solid #dbe2e9;
  border-radius: 90px;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  margin: 0px;
  float: right;
}

.google-button:hover,
.google-button:focus,
.google-button:active,
.google-button.active {
  background-color: #fff;
  border: 1px solid #dbe2e9;
  color: #125a9c;
  box-shadow: none;
}

.facebook-button {
  background: url("./images/fb-icon.png");
  background-repeat: no-repeat;
  background-position: 18px 11px;
  padding: 9px 20px 9px 40px;
  background-color: #fff;
  border: 1px solid #dbe2e9;
  border-radius: 90px;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  margin: 0px;
  float: right;
}

.facebook-button:hover,
.facebook-button:focus,
.facebook-button:active,
.facebook-button.active {
  background-color: #fff;
  border: 1px solid #dbe2e9;
  color: #125a9c;
  box-shadow: none;
}

/* .logo, .desktop-top-bar {
  display: inline-flex;
} */

.mb-logo,
.mobile-top-bar {
  display: none;
}

.masked-phone-number {
  position: relative;
}

.masked-phone-number label {
  font-size: 13px;
  z-index: 1;
  font-weight: 400;
  color: var(--tertiary);
  text-align: left;
  position: absolute;
  left: 10px;
  top: -8px;
  background-color: #fff;
  padding: 0px 8px;
}

.masked-phone-number label span {
  color: #ff6337;
}

.masked-phone-number input {
  font: inherit;
  width: 100%;
  min-width: auto;
  font-weight: 500;
  text-align: left;
  color: var(--secondary);
  padding: 0px;
  background-color: #fff;
  border: 1px solid #cfcfcf;
  padding: 9px 18px;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-radius: 90px;
  outline: none;
}

.masked-phone-number input:focus {
  border: 2px solid #9C9C9C;
}

.MuiFormHelperText-root.Mui-error {
  font-size: 13px;
  color: #f44336 !important;
  line-height: normal;
  word-break: break-word;
}

.masked-error {
  border-color: #f44336 !important;
}

.masked-error:hover {
  border-color: #e2e8ef !important;
}

.masked-error:focus {
  border: 2px solid #9C9C9C !important;
}

.masked-phone-number .masked-astrik {
  color: #f44336;
}

.masked-phone-number .astrik {
  font-weight: 400;
  color: var(--tertiary);
}

/* asterisk '*' color */
.error-asterisk {
  color: #f44336 !important;
  padding-left: 3px;
}

.asterisk {
  color: var(--tertiary) !important;
  padding-left: 3px;
}

/* DataGridPro */
.datagridpro .MuiDataGrid-columnHeader:focus-within,
.datagridpro .MuiDataGrid-cell:focus-within {
  outline: none !important;
}

.datagridpro .MuiCheckbox-root {
  color: var(--tertiary);
}

.datagridpro .MuiCheckbox-root.Mui-checked {
  color: var(--primary);
}

.datagridpro .MuiCheckbox-root:hover,
.datagridpro .MuiDataGrid-columnHeaders .MuiIconButton-root:hover,
.datagridpro .MuiDataGrid-detailPanel {
  background-color: transparent;
}

.datagridpro .MuiDataGrid-detailPanel .MuiDataGrid-root .MuiDataGrid-cell {
  background-color: #f1f1f1;
}

.datagridpro .MuiDataGrid-columnHeaders {
  background-color: #dfe0e4;
  margin: 0 0 3px;
  border-bottom: 0 !important;
  box-shadow: none;
}

.datagridpro .MuiDataGrid-pinnedColumnHeaders {
  background-color: #dfe0e4;
  margin: 0;
  border-bottom: 0 !important;
  box-shadow: none;
}

.datagridpro .MuiDataGrid-columnHeadersInner {
  background-color: #dfe0e4;
}

/* .datagridpro .MuiDataGrid-pinnedColumnHeaders .MuiDataGrid-iconSeparator {
  display: none;
} */

.datagridpro .MuiDataGrid-pinnedColumns {
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.datagridpro .MuiDataGrid-root {
  border-width: 0px;
}

.datagridpro .MuiDataGrid-columnHeaderTitleContainerContent {
  padding: 0 6px;
}

.datagridpro .MuiIconButton-sizeSmall {
  padding: 3px;
}

.datagridpro .MuiDataGrid-columnHeader--dragging {
  background-color: #eff1f8 !important;
}

.table-bottom-margin {
  margin-bottom: 30px !important;
}

/*XGrid*/

.MuiDataGrid-columnsContainer {
  background-color: #EFF1F8;
  margin: 0px 0px 3px 0px;
  border-bottom: 0px !important;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row {
  background-color: #FFFFFF !important;
  border: 1px solid #e9e9e9;
  /* margin-top: 3px; */
  /* min-height: auto !important; */
  /* max-height: none !important; */
  width: 100%;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell:focus {
  outline: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiButtonBase-root:focus {
  outline: none;
}

.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within,
.MuiDataGrid-root .MuiDataGrid-cell:focus-within {
  outline: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-columnHeaderWrapper .MuiDataGrid-columnHeader:focus {
  outline: none;
}

.MuiDataGrid-root {
  border-top: 0px solid rgba(224, 224, 224, 1);
  border-bottom: 0px solid rgba(224, 224, 224, 1);
  border-left: 0px solid rgba(224, 224, 224, 1);
  border-right: 0px solid rgba(224, 224, 224, 1);
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell {
  border-bottom: 0px solid rgba(224, 224, 224, 1);
  min-height: auto !important;
  max-height: none !important;
  /* padding-top: 5px; */
  /* padding-bottom: 5px; */
  font-weight: 400;
  color: var(--tertiary);
  /* line-height: 40px !important; */
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell.MuiDataGrid-cell--withRenderer div {
  text-overflow: ellipsis;
  overflow: hidden;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .tasktype {
  text-decoration: none;
  color: var(--primary);
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a .MuiBadge-badge {
  background-color: var(--primary);
  top: 4px;
  right: 4px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a svg {
  color: var(--primary);
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .status-open {
  color: #1286ff;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .status-final {
  color: #12c168;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .status-draft {
  color: #fd9f11;
}


.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button:hover {
  text-decoration: none;
  color: var(--primary);
  background-color: transparent;
  text-align: left;
  padding: 4px
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-windowContainer,
.MuiDataGrid-main .MuiDataGrid-windowContainer .MuiDataGrid-window .MuiDataGrid-dataContainer,
.MuiDataGrid-viewport {
  min-height: 80px !important;
  height: auto !important;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root {
  width: 100%;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 0px 0px 0px 16px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root .MuiSelect-select.MuiSelect-select {
  padding: 4px 40px 4px 0px;
  width: 110px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root .MuiSelect-select.MuiSelect-select:after {
  border-bottom: 0px solid var(--primary);
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 10px;
  color: var(--tertiary);
  position: absolute;
  top: 6px;
  right: 16px;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root svg {
  display: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root:after,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .table-selectbox .MuiInputBase-root:before {
  border-bottom: 0px solid var(--primary);
}

/* CKEditor */
.CKEditor .MuiInputLabel-shrink {
  transform: translate(0, 1.5px) scale(1);
  margin-bottom: 8px;
}

.contenter-main .MuiBox-root:after {
  content: '';
  display: block;
  height: auto;
  clear: both;
}


.table-min-height .MuiDataGrid-windowContainer,
.table-min-height .MuiDataGrid-main .MuiDataGrid-windowContainer .MuiDataGrid-window .MuiDataGrid-dataContainer,
.table-min-height .MuiDataGrid-viewport {
  min-height: 340px !important;
}

.MuiDataGrid-windowContainer:after {
  content: '';
  display: block;
  height: auto;
  clear: both;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root.action-butn,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a {
  padding: 0px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i {
  font-size: 20px;
  position: relative;
  top: inherit;
  left: inherit;
  color: var(--primary);
  margin-right: 8px;
  display: flex;
  line-height: 0;
}


.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-information {
  font-size: 20px;
  color: #65d32df2;
  display: flex;
  cursor: pointer;
  margin-left: 4px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root svg {
  margin-right: 8px;
  font-size: 20px;
}

.MuiDataGrid-root .MuiDataGrid-columnHeaderTitle {
  color: rgba(0, 0, 0, .6);
  font-weight: 400;
}

.MuiDataGrid-root .MuiDataGrid-columnHeader .MuiDataGrid-columnSeparato:last-child {
  display: none;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-windowContainer .MuiDataGrid-window {
  position: relative !important;
  padding: 0px 0px 0px;
  margin-bottom: 60px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-windowContainer .MuiDataGrid-window .MuiDataGrid-viewport {
  max-height: inherit !important;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-windowContainer .MuiDataGrid-window .MuiDataGrid-viewport .MuiDataGrid-renderingZone {
  max-height: inherit !important;
}

.datagridpro .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-virtualScroller::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 8px;
  width: 8px;
}

.datagridpro .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .2);
}

/*Icons Color Manage*/
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-view {
  color: #4674ED;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-personal-information {
  color: #F4B42C;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-send-invite {
  color: #8C56FE;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-compose-message {
  color: #C051F0;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-document {
  color: #038bff;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-add-parcel {
  color: #F15F5C;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-history {
  color: #4674ED;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-add-charges-1 {
  color: #F4B42C;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-add-payment-1 {
  color: #6CCB58;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-edit {
  color: #FF7E27;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-personal-info {
  color: #4674ED;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-delete {
  color: #F15F5C;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-change-password {
  color: #00b5a4;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-add-document-1 {
  color: #000;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-attributes {
  color: #6CCB58;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-customer-list {
  color: #4674ED;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-publish {
  color: #8C56FE;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-reset {
  color: #ff9900;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-archive-icon {
  color: #009a08;
  font-size: 20px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-rename-icon {
  color: #1b00ff;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i.dashboardicon-restore-icon {
  color: #ff9103;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row.payment-pending-row {
  background-color: #FFF4E5 !important;
}


/*Radio Button*/

.radio-butn {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.radio-butn .MuiInputLabel-formControl {
  transform: translate(0px, -18px) scale(1);
  padding: 0px;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root {
  width: 100%;
  flex-direction: row;
  align-items: center;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root .MuiTypography-root {
  font-weight: 400;
  color: var(--secondary);
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root .MuiButtonBase-root {
  color: var(--tertiary);
  padding: 0px 8px;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root .MuiButtonBase-root.Mui-checked {
  color: var(--primary);
}

.radio-butn .MuiFormGroup-root .MuiIconButton-label svg {
  font-size: 18px;
}

/*Setting*/
.setting-tx {
  color: var(--tertiary);
  font-weight: 400;
}

.setting-tx:after {
  content: '';
  display: block;
  height: auto;
  clear: both;
}

.setting-tx span {
  color: var(--tertiary);
  font-weight: 400;
}

.setting-tx p {
  float: left;
  line-height: 6px;
  padding: 0px 6px 0px 0px;
}

.setting-tx .MuiSwitch-root .MuiSwitch-track {
  background-color: #c7c7c7;
  height: 12px;
  width: 40px;
}

.setting-tx .MuiSwitch-root .MuiSwitch-thumb {
  width: 18px;
  height: 18px;
  box-shadow: 0.5px 0.866px 7px 0px rgba(0, 0, 0, 0.19);
}

.setting-tx .MuiSwitch-colorSecondary.Mui-checked+.MuiSwitch-track {
  background-color: #bfe2c1;
  border: 1px solid #b7d4ba;
}

.setting-tx .MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
  background-color: #bfe2c1;
  border: 1px solid #b7d4ba;
}

.setting-tx .MuiSwitch-track {
  background-color: #c7c7c7;
}

.setting-tx .MuiSwitch-root span {
  color: #fff;
}

.setting-tx .Mui-checked span {
  color: #60c263;
}

.setting-tx .MuiFormControl-root {
  margin-bottom: 0px;
}

.setting_social_icon {
  text-align: center;
  line-height: 42px;
  float: left;
  margin-right: 15px;
  width: 32px;
  height: 32px;
  background-color: #fff;
  border-radius: 90px;
  box-shadow: 0.5px 0.866px 7px 0px rgba(0, 0, 0, 0.19);
}

.dialog-main .MuiDialog-paper {
  padding: 15px 15px 30px;
}

/*Dialog Box*/
.dialog-close {
  float: right;
  padding: 0px;
}

/*Message comment box*/
.drawer-open .comment-main,
.drawer-open .message-main {
  /* width: calc(100% - 250px); */
  /* position: fixed;
  bottom: 0px;
  left: 250px; */
  width: 100%;
  /* background-color: #fff;
  padding: 30px 0px; */
  z-index: 1;
}

.drawer-close .comment-main,
.drawer-close .message-main {
  width: calc(100% - 52px);
  /* position: fixed;
  bottom: 0px;
  left: 52px; */
  /* background-color: #fff;
  padding: 30px 0px; */
  z-index: 1;
}

.content-wrapper-inner form .date-range .e-input-group {
  width: 100%;
  font-weight: 500;
  color: var(--primary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF !important;
  padding: 3px 15px 3px 15px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin-top: 15px;
}

.download-butn,
.download-butn:hover,
.download-butn:focus,
.download-butn:active {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 90px;
  color: #1db06d;
  font-weight: 500;
  text-align: center;
  outline: none;
  text-decoration: none;
  box-shadow: none;
  padding: 0px 0px 15px;
  margin: 0px;
}

.download-butn i {
  font-size: 20px;
  padding-right: 12px;
  position: relative;
  top: 2px;
}

.download-butn .MuiTouchRipple-root {
  display: none;
}

.dry-run-checkbox label {
  align-items: flex-start;
  padding-bottom: 30px;
}

.dry-run-checkbox label .MuiTypography-root {
  padding-top: 10px;
}

.import-properties .upload-butn,
.import-properties .upload-butn:hover,
.import-properties .upload-butn:focus,
.import-properties .upload-butn:active {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 90px;
  color: #268ec4;
  font-weight: 500;
  text-align: center;
  outline: none;
  text-decoration: none;
  box-shadow: none;
  padding: 0px 0px 0px;
  margin: 0px;
}

.import-properties .upload-butn i {
  font-size: 20px;
  padding-right: 12px;
  padding-top: 4px;
}

.import-properties .upload-butn .MuiTouchRipple-root {
  display: none;
}

.secondary-mailbox-folders .MuiListItem-root {
  background-color: #f2f3f7;
  margin-bottom: 2px;
  border-radius: 4px;
  padding: 3px 15px;
  width: 48%;
  display: inline-block;
  margin: 1% 1%;
}

.secondary-mailbox-folders .MuiListItem-root .MuiListItemText-root p {
  color: #0d3f67;
  font-weight: 600;
}

.secondary-mailbox-folders .MuiListItem-root .MuiListItemText-root {
  display: flex;
  justify-content: space-between;
}

.accordion .MuiPaper-root {
  box-shadow: none;
  border: 0px;
  border-radius: 4px;
  background-color: #EFF1F8;
  margin: 2px 0px;
}

.accordion .MuiPaper-root:before {
  content: '';
  background-color: transparent;
}

.accordion .MuiPaper-root:after {
  content: '';
  height: auto;
  display: block;
  clear: both;
}

.accordion .MuiPaper-root h6.MuiTypography-root {
  color: var(--secondary);
  font-weight: 500;
}

.accordion .MuiPaper-root .MuiExpansionPanelDetails-root {
  display: block;
}

.accordion .MuiPaper-root .MuiTypography-root {
  color: #696969;
}


/*Upload Logo*/

.upload-logo {
  width: auto;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.upload-logo img {
  width: auto;
  height: auto;
  max-width: 255px;
  max-height: 108px;
  object-fit: contain;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #DFE1EA;
  margin-right: 16px;
  margin-bottom: 4px;
}

.upload-logo .MuiButtonBase-root {
  background-color: var(--buttonSecondary);
  border: 1px solid var(--buttonSecondaryBorder);
  border-radius: 90px;
  color: var(--buttonSecondaryFont) !important;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: none;
}

.upload-logo .MuiButtonBase-root:hover {
  background-color: var(--buttonSecondaryHover);
  border-color: var(--buttonSecondaryBorderHover);
  color: var(--buttonSecondaryFontHover);
}

.upload-logo .MuiFormHelperText-root {
  color: #e77837;
  font-weight: 500;
  padding: 12px 0px 0px 0px;
}

.upload-logo svg {
  color: #f84848;
  margin: 0px 0px 0px 12px;
  top: 5px;
  position: relative;
}

.global_property {
  width: auto;
  margin-right: 16px;
}

.global_property .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root {
  border: 1px solid #E2E8EF;
  background-color: var(--backgroundcolor);
  border-radius: 90px;
  padding: 0px 65px 0px 40px;
  box-shadow: none;
}

.global_property .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root::before {
  content: "\38";
  font-family: "dashboard-icons";
  font-size: 18px;
  color: var(--tertiary);
  position: absolute;
  top: 8px;
  left: 16px;
  vertical-align: middle;
  pointer-events: none;
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox {
  background-color: #fff;
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .autocomplete-custom {
  display: flex;
  justify-content: space-between;
  line-height: 1.3;
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .MuiAutocomplete-option {
  font-size: 14px;
  color: var(--tertiary);
  line-height: 15px;
  padding: 6px 16px 6px 16px;
  margin: 0px;
  background-color: transparent;
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiButtonBase-root {
  color: var(--tertiary);
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiButtonBase-root.Mui-checked {
  color: var(--primary);
}

.MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .MuiAutocomplete-option:hover {
  background-color: #eef1f5;
}

.MuiAutocomplete-groupLabel {
  font-weight: 500;
  color: var(--secondary);
  line-height: 36px;
  font-size: 14px;
  background-color: #eef1f5;
  border-top: 1px solid #E2E8EF;
  border-bottom: 1px solid #E2E8EF;
}

.MuiAutocomplete-noOptions {
  font-size: 13px;
}

.global_property .MuiInputBase-input {
  font-weight: 600;
  color: var(--secondary);
  padding: 10px 4px !important;
  text-overflow: ellipsis;
  width: auto;
  white-space: nowrap;
  display: block;
}

.global_property .mui-fixed button,
.global_property .mui-fixed button:hover {
  width: 25px;
  height: auto;
}

.global_property .MuiIconButton-label i {
  font-size: 13px;
  position: relative;
  top: 0px;
  right: 5px;
  left: 0px;
}

.global_property .MuiAutocomplete-endAdornment {
  top: calc(50% - 11px);
  right: 12px;
  position: absolute;
}

.global_property .MuiInputLabel-shrink {
  transform: translate(12px, 12px) scale(1);
  transform-origin: top left;
  background-color: #fff;
  padding: 0px 12px 0px 5px;
}

/*Tab style Button*/

.tab-style-button {
  width: 100%;
  margin: 0px 0px 30px;
  padding: 0px;
  border-bottom: 1px solid #dfe1eb;
}

.tab-style-button .white-butn {
  margin: 0px;
  background-color: transparent;
  border: 0px;
  color: #7e8c9d;
  font-weight: 500;
  border-radius: 0px;
  border-bottom: 3px solid transparent;
}

.tab-style-button .white-butn:hover {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 3px solid var(--primary);
}

.tab-style-button .white-butn.active {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 3px solid var(--primary);
}


/*End Impersonate*/
.pinkBg {
  background-color: #fff !important;
  background-image: linear-gradient(90deg, var(--primary), var(--primary));
  margin: 0px;
  padding: 6px 10px;
}

.pinkBg svg {
  color: #fff;
  width: 16px;
}

.pinkBg-border {
  border: 2px solid var(--primary);
  position: relative;
  text-align: center;
  margin: -30px 0 0 -30px;
  border-radius: 90px;
  z-index: 1
}

.intro-banner-vdo-play-btn {
  position: relative;
  top: 0%;
  left: 0%;
  text-align: center;
  margin: 0px 0 0 30px;
  border-radius: 100px;
  z-index: 1
}

.intro-banner-vdo-play-btn i {
  line-height: 56px;
  font-size: 0px
}

.intro-banner-vdo-play-btn .ripple {
  position: absolute;
  width: 65px;
  height: 65px;
  z-index: -1;
  left: 38%;
  top: 38%;
  opacity: 0;
  margin: -28px 0 0 -28px;
  border-radius: 100px;
  animation: ripple 1.8s infinite;
}

@-webkit-keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.intro-banner-vdo-play-btn .ripple:nth-child(2) {
  animation-delay: .3s;
  -webkit-animation-delay: .3s
}

.intro-banner-vdo-play-btn .ripple:nth-child(3) {
  animation-delay: .6s;
  -webkit-animation-delay: .6s
}

.mail-frame {
  min-height: 450px;
  border: 0px;
}

.flex-center {
  display: flex;
  align-items: center;
}

.raw-html-container pre {
  white-space: pre-wrap;
}

/*Property detail Note Radio button*/

.chec-radio {
  margin: 0px 0px 0px 50px;
  width: 100%;
  display: block;
}

.chec-radio .pz {
  display: inline-block;
  margin-right: 8px;
}

.chec-radio .radio-inline {
  cursor: pointer;
  /* background: #e7e7e7; */
  padding: 0px 20px;
  text-align: center;
  text-transform: uppercase;
  color: #333;
  position: relative;
  height: 40px;
  float: left;
  margin: 0;
  border-radius: 4px;
  display: flex !important;
  align-items: center;
}

.chec-radio .staff label.radio-inline {
  background: #DFEBF3;
}

.chec-radio .admin label.radio-inline {
  background: #F3EED3;
}

.chec-radio .private label.radio-inline {
  background: #E8E8E8;
}

.chec-radio .radio-inline .MuiFormControlLabel-label {
  font-weight: 500;
  letter-spacing: 0.5px;
  padding-left: 20px;
}

.chec-radio label.radio-inline .MuiButtonBase-root {
  width: 0px;
  padding: 0px;
}

.chec-radio label.radio-inline input[type="radio"]:checked+div:before {
  margin-right: 5px;
}

/*company detail removed add website */
.content-wrapper-inner .detail_wrap_full .detail_page_wrap {
  width: 100%;
}

.detail_wrap_full .detail_img {
  width: 0px;
}

/*Company Details and property details top area*/

.detail_wrap {
  display: flex;
}

.sub_div {
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  float: left;
}

.sub_div::before {
  content: "";
  display: block;
  height: 11px;
  width: 11px;
  border: 2px solid #7AEDB5;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 4px;
}

/*Multipal color before circle icon Start*/

.details_pms::before {
  border: 2px solid #ED9CE0 !important;
}

.details_property::before {
  border: 2px solid #93A1EA !important;
}

.details_staff::before {
  border: 2px solid #D8EA93 !important;
}

.property_available_units::before {
  border: 2px solid #ed9c9c !important;
}

.property_workorder::before {
  border: 2px solid #ED9CE0 !important;
}

.property_guest_card::before {
  border: 2px solid #93A1EA !important;
}

.property_tenant::before {
  border: 2px solid #D8EA93 !important;
}

.property_staff::before {
  border: 2px solid #FD6086 !important;
}

.property_subscription_end::before {
  border: 2px solid #0DF0FF !important;
}

/*circle icon End*/

/* company details */
.detail_wrap .detail_page_wrap {
  width: calc(100% - 88px);
  float: left;
  /* padding: 0px 30px; */
}

.detail_img {
  width: 88px;
  float: right;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}

.detail_img .view-website {
  height: calc(100% - 0px);
  width: 88px;
  display: block;
  text-align: center;
}

.detail_img .view-website i {
  cursor: pointer;
  color: #2C1DDF;
  font-size: 21px;
  width: 100%;
}

.detail_img .detail_add_website,
.detail_img .view-website button {
  height: calc(100% - 30px);
  color: var(--primary);
  line-height: 18px;
  background-color: #DFE2EE;
  border-radius: 0px;
  display: block;
  width: 100%;
  box-shadow: 2px 3px 4px 0 #e6e7eb;
  border: 1px solid #E2E8EF;
}

.detail_add_website:hover {
  background-color: #DFE2EE;
}

.detail_page_wrap .detail_label {
  color: var(--tertiary);
  font-style: normal;
  font-weight: 400;
  /* text-transform: capitalize; */
  line-height: 20px;
}

.detail_page_wrap .detail_info {
  font-style: normal;
  color: var(--secondary);
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
}

.web_link {
  padding-top: 20px;
}

.web_link p {
  color: var(--tertiary);
  font-weight: 400;
}

.detail_info a {
  color: var(--primary);
  text-decoration: none;
  padding-left: 3px;
  line-height: 18px;
}

.detail_info a i {
  font-size: 16px;
  padding-right: 10px;
  vertical-align: text-top;
}

.download-main {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid #e3e3e3;
}

.detail_test_color {
  color: #FF8B4A;
  font-weight: 600;
}

.detail_page_wrap .detail_status {
  font-style: normal;
  font-weight: 700;
  color: #11B666;
  text-transform: capitalize;
  line-height: 19px;
}

.detail_page_wrap .detail_label_status {
  float: left;
}

.detail_page_wrap .status_icon {
  float: right;
  margin-left: 28px;
}

.status_icon i {
  color: #11B666;
  width: 24px;
  height: 24px;
  font-size: 20px;
}

.sync_property {
  float: right;
  margin-left: 24px;
}

/* x-grid column menu show-all and hide-all made hidden */

.MuiGridPanelFooter-root {
  display: none;
}

/*Upload*/
.upload-file-main {
  border: 1px solid #E2E8EF;
  padding: 0px;
  border-radius: 4px;
}

.upload-file::file-selector-button {
  border: 0px solid #555555;
  color: #fff;
  letter-spacing: 0.5px;
  padding: 12px;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--primary);
  margin-right: 15px;
}

.upload-file::file-selector-button:hover {
  background-color: var(--primary);
}

.upload-file::-webkit-file-upload-button {
  border: 0px solid #555555;
  color: #fff;
  letter-spacing: 0.5px;
  padding: 12px;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--primary);
  margin-right: 15px;
}

.upload-file::-webkit-file-upload-button:hover {
  background-color: var(--primary);
}

/*CheckBox*/

ul.chec-radio {
  margin: 0px;
  list-style: none;
  padding: 0px;
}

ul.chec-radio::after {
  content: '';
  display: block;
  clear: both;
  height: auto;
}

ul.chec-radio li.pz {
  display: inline-block;
  margin-right: 15px;
  position: relative;
}

.chec-radio label.radio-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  display: block;
  position: absolute;
  top: 9px;
  left: 18px;
  z-index: 9;
}

.chec-radio label.radio-inline input[type="checkbox"]:checked+div {
  color: #333;
  background-color: #fff;
  font-weight: 500;
}

.chec-radio .radio-inline .clab {
  cursor: pointer;
  background: #fff;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
  position: relative;
  float: left;
  margin: 0;
  margin-bottom: 5px;
  padding: 10px 42px 10px 52px;
  border-radius: 90px;
  border: 1px solid #cbced9;
  letter-spacing: 1px;
}

.chec-radio label.radio-inline input[type="checkbox"]:checked+div:before {
  margin-right: 5px;
}


/* payment gateway */
/* CheckBox */
ul.chec-radio {
  margin: 0px;
  list-style: none;
  padding: 0px;
}

ul.chec-radio p {
  margin: 0px;
  color: var(--tertiary);
}

ul.chec-radio::after {
  content: '';
  display: block;
  clear: both;
  height: auto;
}

ul.chec-radio li.pz {
  display: inline-block;
  margin-right: 15px;
  position: relative;

}

.radio-inline label {
  display: block;
  position: relative;
  margin: 8px 0px 8px;
  cursor: pointer;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #ccc;
  padding: 12px 12px 12px 12px;
  border-radius: 90px;
}

/* Hide the browser's default checkbox */
.radio-inline label .MuiButtonBase-root .MuiIconButton-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.radio-inline label .MuiButtonBase-root .MuiIconButton-label span {
  position: absolute;
  top: -4px;
  left: 0px;
  height: 24px;
  width: 24px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 90px;
}

.radio-inline label .MuiTypography-root {
  font-weight: 400;
  padding: 0px 15px 0px 15px;
}

/* When the checkbox is checked, add a blue background */
.radio-inline label .MuiButtonBase-root.Mui-checked .MuiIconButton-label span {
  background-color: var(--primary);
  border-radius: 90px;
  border: 1px solid var(--primary);
  padding: 3px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.radio-inline label .MuiButtonBase-root.Mui-checked .MuiIconButton-label span:before {
  content: "";
  width: 16px;
  height: 16px;
}

/*import loader*/
.loader-svg {
  position: relative;
  width: auto;
  display: inline-block;
}

.loader-svg .MuiCircularProgress-root {
  position: absolute;
  left: 45%;
  top: 20%;
  transform: translate(-45%, -20%);
}

/* snackbar */
.MuiSnackbarContent-message {
  width: 95%;
  margin-right: 35px;
  font-size: 14px;
}

.MuiSnackbarContent-message span {
  align-items: center;
}

.MuiSnackbarContent-action {
  position: absolute;
  top: 2px;
  right: 20px;
}

.MuiCircularProgress-root {
  z-index: 9;
}

/*Date range picker color change*/

.e-date-range-wrapper .e-input-group-icon.e-icons:hover:before {
  color: var(--primary);
}

.e-date-range-wrapper .e-input-group-icon.e-icons.e-active:before {
  color: var(--primary);
}

.e-calendar .e-content td.e-focused-date.e-today span.e-day {
  background: #eee;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.e-daterangepicker.e-popup .e-presets .e-list-parent .e-list-item.e-active {
  color: var(--primary);
}

.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
  color: #eee;
  background: var(--primary);
}

.e-daterangepicker.e-popup .e-calendar-container .e-left-container .e-calendar .e-content td.e-today span.e-day {
  background: #eee;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.e-daterangepicker.e-popup .e-calendar-container .e-calendar .e-content td.e-selected span.e-day {
  color: #eee;
  background: var(--primary);
}

.e-daterangepicker.e-popup .e-footer .e-btn.e-flat.e-primary,
.e-css.e-btn.e-flat.e-primary {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary);
}

.e-date-range-container .e-calendar-container .e-calendar .e-content td.e-today span.e-day {
  background: none;
  border: 1px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
}

.e-float-input.e-input-group input .e-float-input.e-input-group.e-control-wrapper input,
.e-float-input input,
.e-float-input.e-control-wrapper input.e-daterangepicker::selection {
  background: #dcdbee;
  color: #676684;
}

.e-daterangepicker.e-popup .e-date-range-container .e-calendar-container .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day {
  border: 1px solid var(--primary);
}

.e-daterangepicker.e-popup .e-date-range-container .e-calendar-container .e-calendar .e-content.e-month .e-today.e-range-hover span {
  background-color: #eee;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.contenter-main .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before {
  background: transparent;
}

.contenter-main .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
  background: transparent;
}

.content-wrapper-inner .form-field .date-range .e-daterangepicker:focus {
  color: var(--primary);
}

.content-wrapper-inner .form-field .date-range .e-float-input .e-float-text {
  color: var(--tertiary) !important;
  top: -2px;
  left: 7px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
  padding: 0px 8px 0px 4px;
  transform: translate3d(0, -6px, 0) scale(0.92) !important;
  width: auto !important;
  display: table;
}

.content-wrapper-inner .form-field .date-range .e-input-focus .e-float-text {
  color: var(--tertiary) !important;
}

/*Global search and property*/
.global-for-tb-mb {
  display: none;
}

.am5-modal {
  z-index: 9 !important;
}

/*Add Company infor*/
.infor-wrap {
  width: 100%;
  padding: 0px;
  margin: 24px 0px 0px;
}

.infor-wrap .MuiIconButton-label i {
  color: var(--tertiary);
  line-height: 0;
  font-size: 20px;
}

.dashboardicon-information {
  font-size: 20px;
  color: #65d32df2;
  display: flex;
  cursor: pointer;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.action-butns span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
  white-space: nowrap;
  text-align: left;
}

/*File Previewer*/
.file-previewer {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.file-previewer h6 {
  width: auto;
  display: inline;
  font-size: 14px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-previewer .img-preview img {
  object-fit: cover;
  width: 100% !important;
  height: 70px !important;
  border: 3px solid #ccc;
  cursor: pointer;
}

.file-previewer .file-previewer-icon {
  margin: 0px;
  padding: 0px;
  min-width: 40px;
}

.file-previewer .file-previewer-butn,
.file-previewer .file-previewer-butn:hover {
  margin-bottom: 0px;
  font-weight: 500;
  background-color: transparent;
}

.full-img-view {
  width: auto;
  height: 400px;
  position: relative;
  overflow: auto;
}

.img-preview .current-image img {
  border: 3px solid #000;
}

.full-img-view .MuiGrid-justify-xs-center {
  height: 100%;
}

/* width */
.full-img-view::-webkit-scrollbar {
  width: 0px;
  height: 5px;
}

/* Track */
.full-img-view::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.full-img-view::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
}

/* Handle on hover */
.full-img-view::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.full-img-view img {
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
}

/* Custom Tabs */
.custom-tabs-box {
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 3px 4px 0px rgb(0 28 61 / 1%);
  border: 1px solid #e2e5f0;
  padding: 0px;
  margin-bottom: 30px;
}

.custom-tabs {
  position: relative;
}

.sticy-tabs {
  position: sticky;
  top: 53px;
  background: #fff;
  z-index: 10;
}

.custom-tabs .MuiTabs-indicator {
  display: none
}

.custom-tabs .MuiTabs-scroller {
  padding-bottom: 16px;
}

.custom-tabs:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #F2F3F7;
  position: absolute;
  bottom: 15px;
  left: 0px;
}

.custom-tabs .tabs-label.Mui-selected {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 2px solid var(--primary) !important;
  position: relative;
  min-width: auto;
  min-height: auto;
  overflow: visible;
  padding: 0px;
  z-index: 9;
}

.custom-tabs .tabs-label.Mui-selected:after {
  content: '';
  position: absolute;
  bottom: -11px;
  border: 10px solid transparent;
  border-top: 10px solid var(--primary);
  border-bottom: 0px solid var(--primary);
  left: 50%;
  transform: translateX(-50%);
}

.custom-tabs .tabs-label.MuiTab-root {
  padding: 20px 50px 20px;
  border-bottom: 2px solid transparent;
  min-width: auto;
  margin-right: 5px;
}

.custom-tabs .tabs-label.MuiTab-root:hover {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 2px solid var(--primary);
  opacity: 1;
  z-index: 9;
  overflow: visible;
}

.custom-tabs .tabs-label.MuiTab-root:hover:after {
  content: '';
  position: absolute;
  bottom: -11px;
  border: 10px solid transparent;
  border-top: 10px solid var(--primary);
  border-bottom: 0px solid var(--primary);
  left: 50%;
  transform: translateX(-50%);
}

.custom-tabs .tabs-label {
  color: var(--secondary);
}

.custom-tab-content {
  padding: 30px 45px;
}

.custom-tabs .MuiTabScrollButton-root {
  width: 12px;
}

.tabs-filter label {
  background: #fff !important
}

/* Vertical Custom Tabs */
.vertical-custom-tabs {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical {
  margin-top: 16px;
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical a {
  color: var(--secondary);
  text-align: left;
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical a.Mui-selected {
  color: var(--primary);
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical a.Mui-selected::before {
  content: '';
  position: absolute;
  left: 0px;
  height: 100%;
  width: 3px;
  background-color: var(--primary);
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical .MuiTab-root {
  min-height: auto;
  padding: 8px 24px;
}

.vertical-custom-tabs .MuiTabs-flexContainerVertical .MuiTab-root .MuiTab-wrapper {
  align-items: flex-start;
}

.vertical-custom-tab-wrapper {
  border-left: 2px solid #F2F3F7;
  min-height: 100vh;
}

.vertical-custom-tab-wrapper .custom-tabs:before {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #F2F3F7;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* Amcharts CSS */
.am5-modal-content {
  box-shadow: none !important;
  border: 1px solid #cfcfcf;
}

/* calender dialog  */
.calender-dialog .MuiPaper-root {
  max-width: 550px;
  padding: 27px;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .MuiButton-contained {
  background-color: #fff;
  box-shadow: none;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .MuiButton-contained:hover {
  background-color: #eef1f5;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .MuiButton-contained .MuiButton-label {
  font-weight: 600;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .MuiButton-contained.MuiButton-containedPrimary {
  background-color: var(--primary);
}

.calender-dialog .MuiPaper-root .MuiGrid-root .calender-dialog-clear .MuiButton-label {
  color: #9C9C9C;
  font-weight: 500;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .clear-bg .MuiButton-label {
  color: #000;
  font-weight: 500;
}


.calender-dialog .MuiPaper-root .MuiGrid-root .calender-dialog-clear:hover {
  background-color: #fff;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .dialog-done {
  border: 1px solid var(--primary);
  border-radius: 90px;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .dialog-done:hover {
  background-color: var(--primary);
}

.calender-dialog .MuiPaper-root .MuiGrid-root .dialog-done:hover .MuiButton-label {
  color: #fff;
}

.calender-dialog .MuiPaper-root .MuiGrid-root .dialog-done .MuiButton-label {
  color: var(--primary);
  font-weight: 400;
  padding: 0px 15px;
}

.calender-dialog .calender-footer {
  margin-top: 15px;
}

.calender-icon.MuiIconButton-root {
  padding-right: 0px;
  color: var(--tertiary);
}

.autocomplete-dropdown {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.autocomplete-dropdown .MuiButtonBase-root {
  padding-top: 0px;
  padding-bottom: 0px;
}

.select-dropdown .MuiInputBase-root {
  padding: 12px 18px !important;
  color: var(--secondary);
}

.select-dropdown .MuiInputBase-root input {
  width: 0;
  min-width: 30px;
}

.select-dropdown .MuiChip-root {
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #eef1f5;
  color: var(--secondary);
}

/* Error ouline  */

/* date-filter error  */

.date-error .MuiInput-root {
  border-color: #f44336 !important;
}

.date-error .MuiInput-root:hover {
  border-color: #e2e8ef !important;
}

.date-error .MuiInput-root.Mui-focused {
  border: 2px solid #9C9C9C !important;
}

/* select error  */

.select-error fieldset {
  border-color: #f44336 !important;
}

.select-error:hover .MuiOutlinedInput-notchedOutline {
  border-color: #e2e8ef !important;
}

.select-error.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #9C9C9C !important;
}


/* sidebar count  */

.sidemenu-main .sidemenu-main-menu {
  padding-right: 14px;
  width: 90%;
  margin: 3px auto;
}

.menu-drawer-close:hover .sidemenu-main .sidemenu-main-menu {
  width: 90%;
}

.menu-drawer-close:hover .sidemenu-main .sidemenu-main-submenu {
  width: 90%;
  margin: 3px auto;
}

.menu-drawer-close .sidemenu-main .sidemenu-main-menu {
  width: 100%;
}

.sidemenu-main .sidemenu-main-menu:hover {
  background-color: transparent;
}

.sidemenu-main .count-div {
  background-color: #FF606D;
  width: auto;
  min-width: 28px;
  max-width: 60px;
  padding: 0px 4px;
  height: 28px;
  border-radius: 90px;
  position: relative;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidemenu-main .sidemenu-count {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: none;
}

.desktop-hamburger {
  margin-right: 24px !important;
}

/* action hover button css start */

.action-hover {
  position: absolute;
  left: 110px;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 6px 8px;
  /* border: 1px solid var(--primary); */
  display: flex;
  align-items: center;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* show column css start */

.show-column-wrap {
  padding: 20px;
}

.MuiPaper-root:has(.x-grid-column-panel) {
  max-height: 100%;
}

.x-grid-column-panel {
  width: 100%;
}

/* show column css end */

.notification-icon,
.notification-icon:hover {
  position: relative;
  padding: 0px 36px 0px 0px;
  background-color: transparent;
  border: 0px;
}

.notification-container {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  font-weight: bold;
}

.notification-icon {
  position: relative;
}

.shake-icon {
  animation: shake 0.5s ease-in-out infinite;

}

@keyframes shake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-15deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(15deg);
  }
}

.notification-icon i {
  color: #000;
  font-size: 20px;
}

.notification-list {
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.notification-list li {
  display: block;
  background-color: #fff;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 15px;
  position: relative;
}

.notification-list h2 {
  font-size: 16px;
  color: var(--primary);
  display: block;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.notification-list p {
  font-size: 14px;
  color: var(--secondary);
  display: block;
  width: 100%;
  padding: 5px 0px 8px;
  margin: 0px;
}

.notification-list .notification-time {
  font-size: 12px;
  color: var(--tertiary);
}

/* Button Color */
.colorarea-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.colorarea-main label {
  color: var(--tertiary);
  padding: 0px 12px 0px 0px;
  margin: 0px;
}

.border-switch {
  display: flex;
  justify-content: flex-start;
}

.border-switch h4 {
  line-height: 40px;
}

/* assign menu css start */
.assign-menu h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  padding: 15px 0px 8px 20px;
  position: relative;
}

.assign-menu h2:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  position: absolute;
  background-color: var(--primary);
  border-radius: 20px;
  left: 0px;
  top: 22px;
}

.assign-menu .MuiTypography-root {
  font-size: 14px;
  color: var(--tertiary);
}

.assign-menu .MuiFormControlLabel-root {
  margin-left: 10px;
}

/* assign menu css end */

/* dialog box details css start */

.dialog-top-details {
  background-color: #f7f7f7;
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 38px;
  border: 1px solid #E2E8EF;
}

.top-details-label {
  color: var(--secondary);
}

.top-details-info {
  color: var(--secondary);
  font-weight: 600;
  padding-top: 5px;
}

/* dialog box details css end */

.mui-fixed .notification-main button {
  width: auto;
  height: auto;
  padding: 10px 8px;
  position: relative;
}


.mui-fixed .recent-message button {
  width: auto;
  height: auto;
  padding: 10px 8px;
  position: relative;
}


/* whats new css start */

.whats-and-notification {
  display: flex;
}

.whats-new-main {
  padding-right: 26px;
  position: relative;
}

.whats-new-main:after {
  content: '';
  width: 1px;
  height: 52px;
  background-color: #ced4ef;
  position: absolute;
  right: 0px;
  top: -4px;
}

.whats-new-main i {
  color: #000;
  font-size: 20px;
}

.mui-fixed .whats-new-main button {
  width: auto;
  height: auto;
  padding: 10px 8px;
  position: relative;
}

.client-side-wrapper {
  padding: 40px;
}

.confirmbox-main .MuiDialogActions-root .form-button {
  margin: 0px;
  border-radius: 90px;
  letter-spacing: 0.5px;
  padding: 8px 40px;
  text-transform: none;
  transition: all ease 0.2s;
}

.confirmbox-main .MuiDialogActions-root .form-button:hover {
  color: var(--buttonPrimaryFontHover);
  background-color: var(--buttonPrimaryHover);
}

.confirmbox-main .MuiDialogActions-root .cancel-button {
  color: var(--tertiary);
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 40px;
  text-transform: none;
  transition: all ease 0.2s;
}

.confirmbox-main .MuiDialogActions-root .cancel-button:hover {
  background-color: #fff;
  box-shadow: none;
}

.confirmbox-main .MuiDialogContent-root {
  margin-bottom: 24px;
}

.confirmbox-main .MuiDialogContent-root p {
  margin: 0px;
}

.contact-error:has(.Mui-error) {
  border: 1px solid #f44336;
}

/* Multi select filter css (Tushar) */
.filter-multi-select .MuiFormControl-root label {
  font-size: 14px;
  color: var(--tertiary);
  background: linear-gradient(0deg, #fff 0%, #fff 20%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
}

.filter-multi-select .select-dropdown .MuiInputBase-root {
  background-color: #fff;
  padding: 13px 18px !important;
}

.filter-multi-select {
  min-width: 300px;
}

.filter-multi-select .select-dropdown .MuiInputBase-root .multi-select-label:first-child:after {
  content: ',';
  font-size: 15px;
}

.filter-multi-select .multi-select-label {
  margin-right: 5px;
}

.filter-multi-select .select-dropdown .MuiInputBase-root .MuiAutocomplete-endAdornment .MuiAutocomplete-clearIndicator .dashboardicon-reset {
  padding-top: 4px;
}

.filter-multi-select .select-dropdown .MuiInputBase-root.MuiOutlinedInput-root {
  padding-right: 30px !important;
}

.multi-select-main-label label {
  background: #fff !important
}


/* whats new css end */
@media only screen and (max-width:959px) {
  .menu-drawer-open .sidemenu-main {
    padding: 0px;
  }

  .sidemenu-main .sidemenu-logout {
    display: flex;
    width: 90%;
    margin: 3px auto;
  }

  .content-wrapper-inner {
    padding: 20px 20px 20px 20px;
  }

  .whats-new-main:after {
    height: 73px;
    top: -14px;
  }


  .whats-new-main:before {
    height: 73px;
    top: -14px;
  }

  .mui-fixed .whats-new-main button {
    right: 0px;
  }

  .mui-fixed .notification-main button {
    right: 0px;
  }



  .whats-and-notification {
    position: absolute;
    right: 70px;
  }

  .notification-main {
    padding-right: 20px;
    padding-left: 20px;
  }

  .mb-appbar-main header {
    width: 100%;
    padding: 10px 10px
  }

  .dialog-filter-mb,
  .dialog-filter-mb .search-box,
  .dialog-filter-mb input {
    width: 100% !important;
  }
}

@media only screen and (max-width:1440px) {
  .form-white-bg {
    padding: 30px;
  }
}

@media only screen and (max-width: 1366px) {
  .global_property {
    width: 200px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1152px) {

  /* .whats-new-main, .notification-main {
    padding-right: 16px;
    padding-left: 16px;
  }
  .logout-dropdown {
    padding-left: 18px;
  }
}

@media only screen and (max-width: 1152px) {
  .custom-tabs .tabs-label.MuiTab-root {
    padding: 18px 30px;
  }
}

@media only screen and (max-width: 1024px) {
  .custom-tabs .tabs-label.MuiTab-root {
    padding: 15px 20px;
  }
  .action-dropdown ul li {
    font-size: 14px;
  }

  .action-dropdown ul li i {
    font-size: 18px;
  }
}

@media only screen and (min-width: 913px) {

  .detail_img .detail_add_website,
  .detail_img .view-website button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}

@media only screen and (max-width: 912px) {

  .detail_img .detail_add_website,
  .detail_img .view-website button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .MuiSnackbarContent-message {
    width: 90%;
  }

  /*Side bar & logo*/
  .appbar-main .appbar-shift {
    margin-left: 0px;
    /* width: calc(100% - 0px); */
    transition: 0.5s;
    padding: 10px 10px;
  }

  .mb-appbar-main header {
    width: 100%;
    padding: 10px 10px
  }

  .mb-appbar-main:after {
    content: '';
    display: block;
    clear: both;
    height: auto;
  }

  .mb-logo {
    display: block;
  }

  .mb-logo img {
    max-height: 45px;
  }

  .mb-appbar-main {
    position: relative;
  }

  .mui-fixed button {
    position: absolute;
    right: 25px;
  }

  .logout-dropdown .makeStyles-sectionDesktop-15 {
    display: block;
  }

  .mb-menu-close {
    position: fixed;
    right: 14px;
    top: 14px;
    width: auto;
  }

  .mb-menu-close i {
    color: #fff;
    font-size: 14px;
  }

  .username-tx {
    padding: 10px 10px 10px;
  }

  .menu-drawer-open a.mb-profile-pic {
    border-radius: 0px;
  }

  .menu-drawer-open a .MuiIconButton-label {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .menu-drawer-open .sidemenu-basic {
    padding: 0px;
  }

  .setting-tx .MuiSwitch-root {
    float: right;
  }

  .detail_add_website {
    width: 100%;
    height: auto !important;
    padding: 15px 15px;
  }

  .detail_wrap {
    display: block;
  }

  .detail_wrap .detail_page_wrap {
    width: 100%;
    float: left;
    display: block;
    margin: 0;
    padding: 30px;
  }

  .detail_img {
    width: 100%;
    float: left;
    display: block;
    margin: 0;
  }

  .detail_img .view-website {
    width: 100%;
  }

  .global_property {
    width: auto;
    /* margin: 0px 15px 12px 0px; */
    display: inline-block;
  }

  .username-tx:after {
    display: none;
  }

  .logout-menu a {
    display: block;
  }

  .content-wrapper-inner {
    width: 100%;
  }

  .drawer-open .content-wrapper-inner,
  .drawer-open .content-wrapper {
    padding: 20px 40px 40px 40px;
  }

  /*Global search and property*/
  /* .global-for-tb-mb {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 20px 0px;
  } */

  .sticy-tabs {
    top: 73px;
  }

}

@media only screen and (max-width: 960px) and (min-width: 600px) {
  .appbar-main .appbar-shift {
    margin-left: 0px;
    width: calc(100% - 0px);
    transition: 0.5s;
    padding: 10px 10px;
  }
}

/* Listing Resposnive*/
@media only screen and (max-width: 960px) and (min-width: 320px) {
  .filter-area {
    margin: 15px 5px 0px;
  }

  .mb-select-filter .MuiInputBase-root {
    width: 100%;
    background-color: var(--buttonSecondary);
    border: 1px solid #E2E8EF;
    padding: 5px 15px;
    font-weight: 500;
    border-radius: 90px
  }

  .mb-select-filter .MuiInputBase-root:before {
    border-bottom: 0px;
  }

  .mb-select-filter .MuiFormControl-root {
    width: calc(100% - 138px);
    display: inline-block;
  }

  .mb-select-filter .MuiTextField-root {
    width: 97%;
  }

  .mb-select-filter .MuiInputBase-root button {
    padding: 0px;
  }

  .mb-select-filter .reset {
    padding: 9px 10px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .mb-select-filter .reset-icon.reset {
    background-color: var(--buttonPrimary);
    border: 1px solid var(--buttonPrimary);
  }

  .sort-button {
    width: 90px;
    display: inline-block;
    padding: 8px 0px;
    margin-left: 10px;
  }

  .no-rows {
    padding: 20px 0px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
  }

  .mb-popup-filter .select-box label,
  .mb-popup-filter .date-filter label {
    background: linear-gradient(0deg, #fff 0%, #fff 30%, #fff 50%, #fff 100%);
  }

  .mb-filter-popup-main .MuiDialogActions-spacing {
    padding: 0px;
  }

  .mb-filter-popup-action {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }

  .mb-filter-popup-action .theme-butn-disabled,
  .mb-filter-popup-action .theme-butn {
    width: 33.3% !important;
    border-radius: 0px;
    padding: 15px 0px;
    width: auto;
    display: inline-block;
  }

  .mb-filter-popup-action .cancel-butn {
    width: 33.3% !important;
    background-color: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 15px 0px;
    width: auto;
    display: inline-block;
    font-size: 14px;
    color: var(--tertiary);
    box-shadow: none;
  }

  .mb-filter-popup-action .reset-butn {
    width: 33.3% !important;
    background-color: #F9F9FB;
    border: 0px;
    border-right: 1px solid #E2E8EF;
    border-radius: 0px;
    padding: 15px 0px;
    width: auto;
    display: inline-block;
    font-size: 14px;
    color: var(--tertiary);
    box-shadow: none;
  }

  .mb-filter-popup-action .close-button {
    width: 100% !important;
    border-right: 0px solid #E2E8EF;
  }

  .mb-filter-popup-action .reset-butn i {
    background-color: var(--primary);
    border-radius: 90px;
    padding: 10px 8px 6px 10px;
    margin-right: 8px;
    color: #fff;
    line-height: 24px;
    display: inline;
  }

  /* Sort Popup */
  .mobile-popup-sort-applied .MuiListItemText-root span {
    font-weight: 600;
    color: #000;
  }

  .mobile-popup-sort {
    width: 32px;
    height: 32px;
    border-radius: 90px;
    background-color: #F0F1F6;
    position: relative;
  }

  .mobile-popup-sort::after {
    content: "\42";
    display: inline-block;
    font-family: "dashboard-icons" !important;
    font-size: 14px;
    color: #B5BBBF;
    position: absolute;
    right: 4px;
    top: 7px;
  }

  .mobile-popup-sort::before {
    content: "\36";
    display: inline-block;
    font-family: "dashboard-icons" !important;
    font-size: 14px;
    color: #B5BBBF;
    position: absolute;
    top: 6px;
    left: 5px;
  }

  .mobile-popup-sort-asc button,
  .mobile-popup-sort-desc button {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 99;
  }

  .mobile-popup-sort-asc button i {
    color: #000;
    font-size: 14px;
    position: absolute;
    top: 9px;
    left: 5px;
    z-index: 9;
  }

  .mobile-popup-sort-desc button i {
    color: #000;
    font-size: 14px;
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 9;
  }

  .up-down-both {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .mobile-sort {
    display: inline-block;
  }

  .mobile-sort button {
    display: inline-block;
    padding: 18px 0px 18px 18px;
    position: relative;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
    text-shadow: none;
  }

  .mobile-sort button:focus {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
  }

  .mobile-sort button::after {
    content: "\42";
    display: inline-block;
    font-family: "dashboard-icons" !important;
    font-size: 12px;
    color: #b7b6b6;
    position: absolute;
    left: 22px;
    top: 18px;
  }

  .mobile-sort button::before {
    content: "\36";
    display: inline-block;
    font-family: "dashboard-icons" !important;
    font-size: 12px;
    color: #b7b6b6;
    position: absolute;
    top: 16px;
    left: 13px;
  }

  .mobile-sort-desc button::after {
    color: var(--buttonPrimary);
  }

  .mobile-sort-asc button::before {
    color: var(--buttonPrimary);
  }

  .mobile-sort-desc button,
  .mobile-sort-asc button {
    color: var(--buttonPrimary);
  }

  .mb-workorder-listing-main {
    height: 100%;
  }

  .mb-card-status-open {
    height: 100%;
  }

  .mb-workorder-listing-main .MuiCard-root {
    box-shadow: 3px 6px 6px rgba(39, 66, 107, 0.04);
    height: 100%;
  }

  .mb-card-status-closed .MuiPaper-root {
    background-color: #F8F8F9;
  }
}


@media only screen and (max-width: 600px) and (min-width: 320px) {
  .menu-drawer-close:hover {
    width: 0px !important;
  }

  .menu-drawer-open {
    width: 82%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    transition: ease-out;
  }

  .menu-drawer-open .sidemenu-basic {
    padding: 0px;
  }

  .menu-drawer-close {
    width: 0px;
  }

  .mui-fixed {
    width: calc(100% - 0px);
  }

  .logo,
  .desktop-top-bar {
    display: none;
  }

  .mobile-top-bar {
    display: inline-flex;
    padding: 0px;
  }

  .mb-appbar-main .MuiToolbar-root {
    display: flex;
    justify-content: space-between;
  }

  .white-bg {
    padding: 15px 20px !important;
  }

  .contenter-main {
    width: calc(100% - 0px);
  }

  .content-wrapper-inner {
    width: 100%;
    padding: 20px 20px 20px 20px;
    transition: 0.1s;
  }

  .appbar-main .appbar-shift {
    margin-left: 0px;
    width: calc(100% - 0px);
    transition: 0.5s;
    padding: 10px 10px;
  }

  .mb-appbar-main header {
    width: 100%;
    padding: 10px 10px
  }

  .mb-appbar-main:after {
    content: '';
    display: block;
    clear: both;
    height: auto;
  }

  .drawer-open .content-wrapper-inner,
  .drawer-open .content-wrapper {
    padding: 15px 10px 10px 10px;
  }

  .form-wrap .MuiFormControl-root {
    width: 100%;
    margin-bottom: 0px;
  }

  .form-checkbox .MuiFormControlLabel-root {
    margin: 0px;
  }

  .MuiMenuItem-root {
    min-height: 36px;
  }

  .filter-input {
    width: 100%;
  }

  .filter-input .MuiInput-formControl {
    width: 100%;
  }

  .mb-menu-close {
    position: fixed;
    right: 14px;
    top: 14px;
    width: auto;
  }

  .mb-menu-close i {
    color: #fff;
    font-size: 14px;
  }

  .username-tx {
    padding: 10px 10px 10px;
  }

  .menu-drawer-open a.mb-profile-pic {
    border-radius: 0px;
  }

  .menu-drawer-open a .MuiIconButton-label {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .sidemenu-basic {
    padding-top: 20px;
  }

  .google-button {
    background-image: none;
    width: 100%;
    display: block;
  }

  .google-button span {
    position: relative;
    width: 100%;
    display: block;
  }

  .google-button span:before {
    content: '';
    display: block;
    clear: both;
    background: url("./images/google-icon.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    padding-left: 118px;
  }

  .facebook-button {
    background-image: none;
    width: 100%;
    display: block;
  }

  .facebook-button span {
    position: relative;
    width: 100%;
    display: block;
  }

  .facebook-button span:before {
    content: '';
    display: block;
    clear: both;
    background: url("./images/fb-icon.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 9px;
    height: 19px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    padding-left: 118px;
  }

  .mb-form-wrap .mb-form-button>div {
    margin: 0px;
  }

  .mb-form-wrap .mb-form-button button {
    width: 100%;
  }

  .form-wrap .setting-tx label {
    width: 100%;
    margin: 0px;
  }

  .form-wrap .setting-tx label .MuiFormControl-root {
    width: 60%;
  }

  .global_property {
    width: 100%;
    margin: 0px 0px 12px;
    display: inline-block;
  }

  .username-tx:after {
    display: none;
  }

  .logout-menu a {
    display: block;
  }

  .intro-banner-vdo-play-btn {
    position: absolute;
    right: 60px;
    top: 8px;
    left: inherit;
  }

  .sync_property {
    margin: 15px 0px 0px;
    float: left;
  }

  .MuiSnackbarContent-action {
    right: 2px;
  }

  .mb-appbar-main {
    position: relative;
  }

  .form-wrap {
    width: 100%;
    padding: 10px 0px 0px;
  }

  .chart-graph-list {
    left: 0px !important;
  }

  .chart-bg .chart-graph {
    left: 0px !important;
  }

  nav .breadcrumb-ul {
    padding: 0px 10px 10px;
  }

  /*Global search and property*/
  .global-for-tb-mb {
    display: block;
    margin-top: 40px;
  }

  .search-box-main,
  .search-box,
  .search-box .MuiInput-formControl input,
  .search-box .MuiInput-formControl input:focus {
    width: 100%;
    position: relative;
  }

  .checkbox-label {
    display: grid;
  }

  .checkbox-label button {
    text-align: center;
  }

  .fiiter-white-butn {
    width: 100%;
  }

  .tab-style-button {
    margin: 0px;
  }

  .loader-svg {
    width: 100%;
  }

  .form-white-bg {
    padding: 15px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .staff .MuiFormControlLabel-label {
    padding-left: 14px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .admin .MuiFormControlLabel-label {
    padding-left: 14px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .private .MuiFormControlLabel-label {
    padding-left: 14px;
  }

  .chec-radio .staff label.radio-inline {
    padding: 0px 1px;
    background: none;
  }

  .chec-radio .admin label.radio-inline {
    padding: 0px 5px;
    background: none;
  }

  .chec-radio .private label.radio-inline {
    padding: 0px 5px;
    background: none;
  }

  .pz .MuiSvgIcon-root {
    width: 20px;
    height: 20px;
  }

  .upload-logo img {
    width: 100%;
    max-width: 100%;
    object-fit: scale-down;
    margin-right: 0px;
  }

  .custom-tab-content {
    padding: 15px 20px;
  }

  .custom-tabs .MuiTabScrollButton-root {
    max-height: 55px;
    margin: 0px 10px;
  }

  .calender-dialog .MuiPaper-root {
    padding: 27px 10px;
  }

  .full-img-view {
    height: 200px;
  }

  .full-img-view img {
    width: 100% !important;
    height: 100% !important;
  }

  .file-previewer h6 {
    display: inline-block;
  }

  .img-preview,
  .mb-file-previewer-icon {
    display: none;
  }

  .MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .MuiAutocomplete-option {
    min-height: auto;
  }

  .action-hover {
    overflow: scroll !important;
    max-width: 120px;
  }

  .MuiDialogTitle-root h2 {
    font-size: 16px;
  }

  .whats-new-main:after {
    display: none;
  }

  .whats-new-main:before {
    display: none;
  }

  .notification-main {
    padding-right: 18px;
    padding-left: 0px;
    padding-top: 4px;
  }

  .recent-message {
    padding-right: 18px;
    padding-left: 0px;
    padding-top: 4px;
  }

  .whats-and-notification {
    right: 48px;
  }

  .whats-and-notification i {
    font-size: 16px;
  }

  .client-side-wrapper {
    padding: 20px;
  }

  .mb-logo,
  .mobile-top-bar {
    display: block;
  }

  .global_property .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root {
    border: 1px solid #E2E8EF;
    background-color: #fff;
    width: 96%;
    margin: 0px auto;
  }

  .mb-filter-popup-action .reset-butn i {
    padding: 6px 5px 3px 7px;
    margin-right: 6px;

  }

  .filter-multi-select {
    min-width: 100%;
  }
}

/* Header: global filter, logo, notification icon tablet issue fixed css (Tushar) */
@media only screen and (max-width: 959px) and (min-width: 601px) {
  .global-for-tb-mb {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 20px 8px;
  }

  .global_property {
    width: 100%;
  }

  .select-box {
    width: 100%;
  }

  .global_property .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root {
    border: 1px solid #E2E8EF;
    background-color: #fff;
    padding: 1px 65px 1px 40px;
  }

  .appbar-main .appbar-shift {
    margin-left: 0px;
    width: calc(100% - 0px);
    transition: 0.5s;
    padding: 10px 10px;
  }

  .mb-appbar-main .MuiToolbar-root {
    display: flex;
    justify-content: space-between;
  }

  .mb-logo,
  .mobile-top-bar {
    display: block;
  }

  .whats-and-notification {
    right: 48px;
  }

  .whats-new-main {
    padding-right: 18px;
    padding-left: 0px;
    padding-top: 4px;
  }

  .recent-message {
    padding-right: 18px;
    padding-left: 0px;
    padding-top: 4px;
  }

  .whats-new-main:after {
    display: none;
  }

  .menu-drawer-open a.mb-profile-pic {
    border-radius: 0px;
  }

  .menu-drawer-open a .MuiIconButton-label {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .username-tx {
    padding: 10px 10px 10px;
  }

  .username-tx:after {
    display: none;
  }

  .menu-drawer-open {
    width: 40%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    transition: ease-out;
  }

  .mb-menu-close {
    position: fixed;
    right: 14px;
    top: 14px;
    width: auto;
  }

  .mb-menu-close i {
    color: #fff;
    font-size: 14px;
  }
}


/* FOR FONTS & SPACING */
/* large laptops */
@media only screen and (min-width: 1660px) and (max-width: 1919px) {
  body {
    font-size: 16px;
  }

  .MuiTypography-body1,
  .MuiTypography-body2,
  .MuiFormLabel-root,
  .MuiInputBase-root,
  .MuiTab-root,
  .MuiDataGrid-columnHeaderTitle,
  .MuiDataGrid-cell,
  .MuiButton-root,
  .MuiAlert-root,
  .MuiIconButton-root,
  .MuiTablePagination-selectLabel,
  .MuiDataGrid-overlay,
  .MuiChip-root,
  .masked-phone-number input {
    font-size: 16px;
  }

  .MuiFormHelperText-root.Mui-error {
    font-size: 15px;
  }

  .MuiTooltip-tooltip {
    font-size: 15px;
  }

  .MuiSnackbarContent-message {
    font-size: 16px;
  }

  .MuiDialogTitle-root h2 {
    font-size: 22px;
  }

  .MuiDialogActions-root .MuiButton-label {
    font-size: 16px;
  }

  .MuiMenu-paper ul li {
    font-size: 16px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i {
    font-size: 24px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root svg {
    font-size: 24px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn:hover,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn:hover {
    font-size: 14px;
    padding: 14px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary:hover {
    font-size: 14px;
    padding: 14px;
  }

  .sidemenu-main a span,
  .sidemenu-main span {
    font-size: 15px;
  }

  .logout-menu a span,
  .sidemenu-basic a span {
    font-size: 15px;
  }

  .setting-dropdown .MuiPaper-root ul li a {
    font-size: 16px;
  }

  .content-wrapper-inner h3 {
    font-size: 22px;
  }

  .content-wrapper-inner h5 {
    font-size: 22px;
  }

  h2 {
    font-size: 22px;
  }

  h2 span {
    font-size: 22px;
  }

  .form-wrap h3 {
    font-size: 20px;
  }

  .file-previewer h6 {
    font-size: 16px;
  }

  .label-with-select .MuiInputLabel-shrink {
    transform: translate(40px, 14.5px) scale(1);
  }

  .label-with-select i {
    top: 14px;
  }

  .label-with-select .MuiSelect-select:after {
    top: 14px;
  }

  .lws-pms-types .MuiSelect-select {
    padding: 12px 30px 12px 135px;
  }

  .lws-subscribed .MuiSelect-select {
    padding: 12px 30px 12px 135px;
  }

  .action-code-select-input .MuiSelect-select {
    padding: 12px 30px 12px 150px;
  }

  .lws-status .MuiSelect-select {
    padding: 12px 30px 12px 100px;
  }

  .lws-priority .MuiSelect-select {
    padding: 12px 30px 12px 104px;
  }

  .lws-read-status .MuiSelect-select {
    padding: 12px 30px 12px 140px;
  }

  .lws-parcel-status .MuiSelect-select {
    padding: 12px 30px 12px 148px;
  }

  .lws-method .MuiSelect-select {
    padding: 12px 30px 12px 108px;
  }

  .lws-level .MuiSelect-select {
    padding: 12px 30px 12px 90px;
  }

  .select-box .MuiInputLabel-shrink {
    transform: translate(17px, -6px) scale(1);
  }

  .filter-area .select-box .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 20%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .search-box .MuiInputLabel-shrink {
    transform: translate(12px, -8px) scale(1);
  }

  .filter-area .search-box .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 20%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .date-filter .MuiInputLabel-shrink {
    transform: translate(17px, -8px) scale(1);
  }

  .filter-area .date-filter .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 20%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .form-wrap .MuiInputLabel-formControl {
    transform: translate(12px, -8px) scale(1);
    font-size: 15px;
  }

  .form-select-box .MuiInputLabel-formControl {
    font-size: 15px;
  }

  .textarea-main .MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(12px, -8px) scale(1);
  }

  .sidemenu-main a span,
  .sidemenu-main span {
    line-height: 24px;
  }

  .drawer-open .content-wrapper-inner,
  .drawer-open .content-wrapper {
    padding: 15px 40px 40px 40px;
  }

  .white-bg {
    padding: 30px;
  }

  .sub_div {
    padding-left: 30px;
  }

  .detail_page_wrap .detail_info {
    padding-top: 5px;
  }

  .select-box label,
  .select-box label.Mui-focused {
    font-size: 14px;
  }

  .search-box label,
  .search-box label.MuiInputLabel-formControl {
    font-size: 14px;
  }

  .date-filter label,
  .date-filter label.MuiInputLabel-formControl {
    font-size: 14px;
  }

  .custom-tabs .tabs-label.MuiTab-root {
    padding: 20px 40px;
  }

  .search-box .MuiInput-formControl input {
    padding: 12px 15px 12px 36px;
  }

  .date-filter .MuiInput-formControl {
    padding: 12px 20px;
  }

  .check-box-label {
    padding: 11.5px 16px;
  }

  .add-butn {
    padding: 13.5px 20px;
  }

  .fiiter-white-butn {
    padding: 13.5px 20px;
  }

  .fiiter-white-butn svg {
    font-size: 16px;
  }

  .white-butn {
    padding: 21.5px 20px
  }

  .theme-butn {
    padding: 21.5px 20px
  }

  .select-box .MuiSelect-select {
    padding: 12px 40px 12px 20px;
  }

  .MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .MuiAutocomplete-option {
    font-size: 16px;
  }

  .MuiAutocomplete-groupLabel {
    font-size: 16px;
  }

  .global_property .MuiInputBase-input {
    padding: 12px 4px !important;
  }

  nav .breadcrumb-ul li:first-child::before {
    top: 8px;
  }

  nav .breadcrumb-ul li a::before {
    top: 5px;
  }

  .radio-butn .MuiFormGroup-root .MuiIconButton-label svg {
    font-size: 20px;
  }

  .dashboardicon-information {
    font-size: 22px;
  }

  .infor-wrap .MuiIconButton-label i {
    font-size: 22px;
  }

  .masked-phone-number label {
    font-size: 15px;
    top: -10px;
  }

  .radio-butn .MuiInputLabel-formControl {
    transform: translate(0px, -20px) scale(1);
  }

  .date-range-filter .MuiInputBase-root {
    min-width: 280px;
  }

  .daterange-wrapper i.dashboardicon-reset {
    top: 14px;
  }

  .daterange-wrapper i.dashboardicon-calendar-1 {
    top: 14px;
  }
}

/* desktops */
@media only screen and (min-width: 1920px) {
  body {
    font-size: 17px;
  }

  .MuiTypography-body1,
  .MuiTypography-body2,
  .MuiFormLabel-root,
  .MuiInputBase-root,
  .MuiTab-root,
  .MuiDataGrid-columnHeaderTitle,
  .MuiDataGrid-cell,
  .MuiButton-root,
  .MuiAlert-root,
  .MuiIconButton-root,
  .MuiTablePagination-selectLabel,
  .MuiDataGrid-overlay,
  .MuiChip-root,
  .masked-phone-number input {
    font-size: 17px;
  }

  .MuiFormHelperText-root.Mui-error {
    font-size: 16px;
  }

  .MuiTooltip-tooltip {
    font-size: 16px;
  }

  .MuiSnackbarContent-message {
    font-size: 17px;
  }

  .MuiDialogTitle-root h2 {
    font-size: 24px;
  }

  .MuiDialogActions-root .MuiButton-label {
    font-size: 17px;
  }

  .MuiMenu-paper ul li {
    font-size: 17px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell i {
    font-size: 24px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root svg {
    font-size: 24px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn:hover,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a.view-butn:hover {
    font-size: 15px;
    padding: 14px;
  }

  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary,
  .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell button.view-butn-primary:hover {
    font-size: 15px;
    padding: 14px;
  }

  /* .MuiToolbar-gutters {
    padding-left: 50px;
  } */

  .sidemenu-main a span,
  .sidemenu-main span {
    font-size: 17px;
  }

  .logout-menu a span,
  .sidemenu-basic a span {
    font-size: 17px;
  }

  .setting-dropdown .MuiPaper-root ul li a {
    font-size: 17px;
  }

  .content-wrapper-inner h3 {
    font-size: 24px;
  }

  .content-wrapper-inner h5 {
    font-size: 24px;
  }

  h2 {
    font-size: 24px;
  }

  h2 span {
    font-size: 24px;
  }

  .form-wrap h3 {
    font-size: 22px;
  }

  .file-previewer h6 {
    font-size: 18px;
  }

  .label-with-select .MuiInputLabel-shrink {
    transform: translate(40px, 14.5px) scale(1);
  }

  .label-with-select i {
    top: 14px;
  }

  .label-with-select .MuiSelect-select:after {
    top: 14px;
  }

  .lws-pms-types .MuiSelect-select {
    padding: 12px 30px 12px 148px;
  }

  .action-code-select-input .MuiSelect-select {
    padding: 12px 30px 12px 158px;
  }

  .lws-subscribed .MuiSelect-select {
    padding: 12px 30px 12px 148px;
  }

  .lws-status .MuiSelect-select {
    padding: 12px 30px 12px 110px;
  }

  .lws-priority .MuiSelect-select {
    padding: 12px 30px 12px 114px;
  }

  .lws-read-status .MuiSelect-select {
    padding: 12px 30px 12px 154px;
  }

  .lws-parcel-status .MuiSelect-select {
    padding: 12px 30px 12px 164px;
  }

  .lws-method .MuiSelect-select {
    padding: 12px 30px 12px 118px;
  }

  .lws-level .MuiSelect-select {
    padding: 12px 30px 12px 100px;
  }

  .select-box .MuiInputLabel-shrink {
    transform: translate(17px, -9px) scale(1);
  }

  .filter-area .select-box .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 10%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .search-box .MuiInputLabel-shrink {
    transform: translate(12px, -9px) scale(1);
  }

  .filter-area .search-box .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 10%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .date-filter .MuiInputLabel-shrink {
    transform: translate(17px, -9px) scale(1);
  }

  .filter-area .date-filter .MuiInputLabel-shrink {
    background: linear-gradient(0deg, #fff 0%, #fff 10%, var(--backgroundcolor) 50%, var(--backgroundcolor) 100%);
  }

  .form-wrap .MuiInputLabel-formControl {
    transform: translate(12px, -9px) scale(1);
    font-size: 16px;
  }

  .form-select-box .MuiInputLabel-formControl {
    font-size: 16px;
  }

  .textarea-main .MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(12px, -9px) scale(1);
  }

  .sidemenu-main a span,
  .sidemenu-main span {
    line-height: 24px;
  }

  .drawer-open .content-wrapper-inner,
  .drawer-open .content-wrapper {
    padding: 15px 40px 40px 40px;
  }

  .white-bg {
    padding: 30px;
  }

  .sub_div {
    padding-left: 30px;
  }

  .detail_page_wrap .detail_info {
    padding-top: 5px;
  }

  .select-box label,
  .select-box label.Mui-focused {
    font-size: 15px;
  }

  .search-box label,
  .search-box label.MuiInputLabel-formControl {
    font-size: 15px;
  }

  .date-filter label,
  .date-filter label.MuiInputLabel-formControl {
    font-size: 15px;
  }

  .menu-drawer-open {
    width: 305px;
  }

  .appbar-main .appbar-shift {
    width: calc(100% - 305px);
  }

  .appbar-main .appbar-shift.mui-fixed .MuiToolbar-gutters {
    padding-left: 20px;
  }

  .appbar-main .mui-fixed .MuiToolbar-gutters {
    padding-left: 50px;
  }

  .contenter-main {
    padding: 0px;
    width: calc(100% - 280px);
  }

  .custom-tabs .tabs-label.MuiTab-root {
    padding: 20px 35px;
  }

  .search-box .MuiInput-formControl input {
    padding: 12px 15px 12px 36px;
  }

  .date-filter .MuiInput-formControl {
    padding: 12px 20px;
  }

  .check-box-label {
    padding: 12px 16px;
  }

  .add-butn {
    padding: 13.5px 20px;
  }

  .fiiter-white-butn {
    padding: 13.5px 20px;
  }

  .fiiter-white-butn svg {
    font-size: 17px;
  }

  .white-butn {
    padding: 22px 20px
  }

  .theme-butn {
    padding: 22px 20px
  }

  .select-box .MuiSelect-select {
    padding: 12px 40px 12px 20px;
  }

  .MuiAutocomplete-popper .MuiAutocomplete-paper .MuiAutocomplete-listbox .MuiAutocomplete-option {
    font-size: 17px;
  }

  .MuiAutocomplete-groupLabel {
    font-size: 17px;
  }

  .global_property .MuiInputBase-input {
    padding: 12px 4px !important;
  }

  nav .breadcrumb-ul li:first-child::before {
    top: 9px;
  }

  nav .breadcrumb-ul li a::before {
    top: 6px;
  }

  .radio-butn .MuiFormGroup-root .MuiIconButton-label svg {
    font-size: 21px;
  }

  .dashboardicon-information {
    font-size: 23px;
  }

  .infor-wrap .MuiIconButton-label i {
    font-size: 23px;
  }

  .masked-phone-number label {
    font-size: 16px;
    top: -11px;
  }

  .radio-butn .MuiInputLabel-formControl {
    transform: translate(0px, -21px) scale(1);
  }

  .date-range-filter .MuiInputBase-root {
    min-width: 300px;
  }

  .daterange-wrapper i.dashboardicon-reset {
    top: 15px;
  }

  .daterange-wrapper i.dashboardicon-calendar-1 {
    top: 15px;
  }
}