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

:root {
  --primary: #124C8E;
  --secondary: #344750;
  --tertiary: #676E8A;
  --backgroundcolor: #f2f3f7;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--backgroundcolor);
  /*#f2f3f7*/
  /*#F7F8FC*/
}

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;
}

/*Logo*/

.logo {
  position: absolute;
  z-index: 9;
  border-bottom: 1px solid #fff;
  padding: 15px 30px 0px 30px;
  background-color: #fff;
  width: 250px;
  height: auto;
  /* min-height: 52px;
  max-height: 52px; */
  display: block;
  text-align: center;
}

.logo img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  min-height: 52px;
  max-height: 70px;
  padding: 0px 0px 0px 0px;
  object-fit: scale-down;
  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: 24px auto 24px;
  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: 250px;
  background-color: #fff;
}

.appbar-main .appbar-shift {
  margin-left: 145px;
  width: calc(100% - 250px);
  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;
}

.page-title {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.5px;
  padding-left: 15px;
}

/*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 {
  margin: 0 4px;
}

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

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

.sidemenu-main a span,
.sidemenu-main span {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--tertiary);
  line-height: 24px;
  text-transform: uppercase;
}

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

.sidemenu-main a:hover i,
.sidemenu-main a.Mui-selected i,
.sidemenu-main a.active i {
  color: #fff;
  left: 20px;
}

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

.sidemenu-main a.Mui-selected span,
.sidemenu-main a:hover span,
.sidemenu-main a.active span {
  color: #fff;
  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: 90px;
}

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

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

.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: 13px;
}

.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-family: 'Roboto', sans-serif;
  font-size: 12px;
  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-family: 'Roboto', sans-serif;
  font-size: 12px;
  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: 250px;
  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 40px 40px 40px;
}

.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;
}

/*Top Profile*/

.username-tx {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  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;
}

.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 30px;
  list-style: none;
}

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

nav .breadcrumb-ul li a {
  font-size: 12px;
  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: 7px;
}

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

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

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

/*Content Area*/

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

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

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

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

.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: 18px;
  font-weight: 600;
  color: var(--primary);
  margin: 0px;
  padding: 0px;
}

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

.content-wrapper-inner .address {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  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;
  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;
  font-size: 13px;
  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;
  font-size: 14px;
  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 {
  font-size: 14px;
  color: var(--primary);
  line-height: 15px;
  padding: 8px 25px 8px 15px;
}

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

.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 {
  border: 1px solid var(--primary);
  padding: 6px 24px;
  border-radius: 30px;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
  font-size: 12px;
  line-height: 18px;
  margin-right: 8px;
}

.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: 6px 24px;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 18px;
  margin-right: 8px;
}

.add-butn {
  padding: 8px 20px 7px;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 90px;
  font-size: 13px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  cursor: pointer;
  text-shadow: -1px 1px 1px #33333357;
}

.add-butn:hover,
.add-butn:focus,
.add-butn:active {
  color: #fff;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}

.content-wrapper-inner .add-butn span i {
  font-size: 13px;
  padding: 3px 8px 0px 0px;
  line-height: 18px;
}

.content-wrapper-inner .add-butn span i.dashboardicon-mail {
  font-size: 16px;
  padding: 0 8px 0px 0px;
  line-height: 8px;
}

.fiiter-white-butn {
  padding: 7px 20px;
  background-color: #fff;
  border: 1px solid var(--primary);
  border-radius: 90px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); */
  box-shadow: none;
  line-height: 22px;
  position: relative;
  text-shadow: none;
  cursor: pointer;
}

.fiiter-white-butn:hover,
.fiiter-white-butn:focus,
.fiiter-white-butn:active {
  color: var(--primary);
  background-color: #fff;
  /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); */
  box-shadow: none;
}

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

.content-wrapper-inner .fiiter-white-butn span i {
  font-size: 16px;
  padding: 0px 6px 0px 0px;
  line-height: 8px;
}

.content-wrapper-inner .fiiter-white-butn span i.dashboardicon-edit {
  font-size: 14px;
  padding: 0px 7px 0px 0px;
  line-height: 8px;
}

.content-wrapper-inner .fiiter-white-butn span i.dashboardicon-customer-list {
  font-size: 20px;
  padding: 0px 5px 0px 0px;
  line-height: 18px;
}

.content-wrapper-inner .add-butn span i.dashboardicon-add {
  font-size: 12px;
  line-height: 18px;
  padding: 3px 8px 0px 0px;
}

.content-wrapper-inner .fiiter-white-butn span i.dashboardicon-reverse {
  font-size: 14px;
  padding: 0px 7px 0px 0px;
  line-height: 8px;
}

.content-wrapper-inner .fiiter-white-butn .MuiButton-startIcon,
.MuiButton-startIcon {
  margin-right: 0px;
}

.form-button {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 90px;
  font-size: 14px;
  color: #fff !important;
  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;
}

.form-button.Mui-disabled {
  opacity: 0.75;
}

.form-button:hover,
.form-button:focus,
.form-button:active {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  box-shadow: none;
}

.MuiButton-contained.Mui-disabled {
  color: #fff;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  opacity: 0.5;
  width: auto;
  max-width: 100%;
}

.MuiButton-textPrimary {
  /* color: var(--primary); */
}

.cancel-button {
  background-color: #fff;
  border-width: 0px;
  border-radius: 90px;
  font-size: 14px;
  color: #9C9C9C;
  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;
}

.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;
  font-size: 13px;
  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;
  font-size: 13px;
  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*/
.filter-area h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary);
  padding: 0px;
  margin: 0px;
}

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

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

.filters-wrap .white-button {
  padding: 7px 15px;
  background-color: #fff;
  border: 1px solid #dbe2e9;
  border-radius: 90px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 13px;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  letter-spacing: .5px;
  box-shadow: none;
  text-decoration: none;
  margin-right: 10px;
}

.filters-wrap .white-button:hover,
.filters-wrap .white-button:focus,
.filters-wrap .white-button:active,
.filters-wrap .white-button.active {
  background-color: #fff;
  border: 1px solid #dbe2e9;
  color: var(--primary);
}

.filters-wrap .white-button span i {
  color: var(--primary);
  font-size: 16px;
  padding: 2px 10px 0px 0px;
}

.filters-wrap .white-button span i:hover {
  color: #125a9c;
}

.white-butn {
  background-color: #fff;
  border: 1px solid var(--primary);
  border-radius: 90px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: none;
  text-decoration: none;
  padding: 9px 20px;
  display: block;
}

.white-butn.Mui-disabled {
  border: 1px solid #dbe2e9;
}

.white-butn:hover,
.white-butn:focus,
.white-butn:active {
  background-color: #fff;
  border: 1px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}

.white-butn.active {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}

.white-butn span i {
  color: var(--primary);
  font-size: 10px;
  padding: 2px 0px 0px 0px;
}

.white-butn span i:hover {
  color: #125a9c;
}

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

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

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

.reset-icon span i {
  color: #fff;
}

.reset-icon:hover {
  background-color: var(--primary);
  color: #fff;
}

.delete {
  margin: 0 5px;
}

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

.active-inactive label,
.active-inactive label.Mui-focused {
  font-size: 16px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  position: absolute;
  left: 44px;
  top: 11px;
  z-index: 1;
}

.active-inactive .MuiInput-formControl {
  margin-top: 0px;
}

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

.active-inactive .MuiInput-formControl::before {
  border-bottom: none;
}

.active-inactive .MuiSelect-select {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 10px 40px 10px 90px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}

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

.active-inactive svg {
  display: none;
}

.active-inactive i {
  color: var(--tertiary);
  position: absolute;
  left: 20px;
  top: 12px;
  z-index: 1;
}

.select-box {
  width: 100%;
}

.select-box .MuiSelect-select {
  padding: 10px 40px 10px 20px;
}

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

.select-box label,
.select-box label.Mui-focused {
  font-size: 16px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  position: absolute;
  left: 0px;
  top: -6px;
  padding: 0px 12px 0px 8px;
  z-index: 1;
  /* background: rgb(255, 255, 255); */
  background: linear-gradient(0deg, #fff 0%, #fff 50%, 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;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  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;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
}

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

.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(12px, 1.5px) scale(0.75);
  transform-origin: top left;
}

.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 .MuiInputBase-root {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 9px 20px 9px 20px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin-top: 0px;
}

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

.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::after {
  content: "\72";
  font-family: 'dashboard-icons';
  font-size: 14px;
  color: var(--tertiary);
  position: absolute;
  top: 12px;
  right: 15px;
  bottom: 0;
  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;
  padding: 0px 0px;
  font-size: 12px;
}

.form-wrap .date-filter label,
.form-wrap .date-filter label.Mui-focused {
  font-size: 12px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  position: absolute;
  left: 0px;
  top: -19px;
  z-index: 1;
  padding: 0px 12px 0px 4px;
  background-color: #fff;
}

.date-filter .MuiFormControl-root {
  width: 100%;
}

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

/*Filter checkbox*/

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

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

}

.checkbox-label span.MuiTypography-root {
  font-size: 13px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  padding-left: 3px;
  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;
  font-size: 13px;
  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: 6px 16px 6px;
  background-color: #fff;
  border: 1px solid #E2E8EF;
  border-radius: 90px;
  box-shadow: none;
  text-decoration: none;
  margin: 0px 0px 0px;
  width: 100%;
  display: block;
}

.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 {
  font-size: 13px;
  color: var(--tertiary);
  font-weight: 400;
  padding-left: 6px;
}

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

.check-box-label .MuiIconButton-label {
  position: relative;
  padding: 0px;
}

/* .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 {
  font-size: 16px;
  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%;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  line-height: 15px;
  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 {
  font-size: 13px;
  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: 110px;
  display: inline-block;
}

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

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

.search-box label.Mui-focused {
  color: var(--tertiary);
}

.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: 56px;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 10px 15px 10px 35px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*position: absolute;*/
  z-index: 9;
  /*top: 0px;*/
}

.search-box .MuiInput-formControl::before {
  content: "\32";
  font-family: 'dashboard-icons';
  font-size: 16px;
  color: var(--tertiary);
  position: absolute;
  top: 10px;
  left: 12px;
  bottom: 0;
  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 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;
  padding: 15px 40px 15px 40px;
  margin: 0px;
  width: 560px;
  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);
}

/*Subscribed*/

.sel-status label,
.sel-status label.Mui-focused {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  position: absolute;
  left: 30px;
  top: 10px;
  z-index: 1;
  background: transparent;
}

.sel-status .MuiSelect-select {
  width: 100%;
  min-width: auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 9px 40px 8px 100px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}

@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 {
  padding: 0px 0px 30px 0px;
}

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

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

.form-wrap h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  text-align: left;
  padding: 0px 0px 15px;
  margin: 0px;
}

.form-wrap h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  text-align: left;
  padding: 0px 0px 8px 5px;
  margin: 0px 0px;
  line-height: 18px;
}

.form-wrap .MuiInputLabel-formControl {
  font-size: 14px;
  font-weight: 400;
  color: var(--tertiary);
  text-align: left;
}

.form-wrap .MuiDialogContent-root {
  padding: 0px;
  overflow: inherit;
}

.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 .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(16px, 14px) scale(1);
}

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

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(18px, -10px) scale(0.90);
  padding-top: 4px;
}

.textarea-main .MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(28px, -10px) scale(0.90);
}

.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-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--secondary);
  padding: 0px;
  background-color: #fff;
}

.form-wrap .MuiInputBase-root textarea {
  resize: none;
  /* height: 30px; */
  min-height: 26px;
  max-height: 26px;
  padding: 0px 12px 12px;
}

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

.form-wrap .MuiInputBase-root fieldset {
  border: 1px solid #E2E8EF;
  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.6;
}

.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;
  min-height: auto;
  font-size: 14px;
  font-weight: 400;
  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 .MuiInputBase-root::after {
  content: "\41";
  font-family: 'dashboard-icons';
  font-size: 11px;
  color: var(--tertiary);
  position: absolute;
  top: 13px;
  right: 14px;
  bottom: 0;
  vertical-align: middle;
  text-align: center;
  pointer-events: none;
} */

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

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

/*choose-file*/

.form-wrap .choose-file {
  width: 100%;
  min-height: 85px;
  font-size: 14px;
  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;
}

/*Form Checkbox*/

.form-checkbox {
  margin-bottom: 15px;
  margin-left: 5px;
}

.form-checkbox span.MuiFormControlLabel-label {
  font-size: 13px;
  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-size: 13px;
  font-weight: 400;
  opacity: 1;
  /* Firefox */
}

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

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #000;
  font-size: 13px;
  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;
  font-size: 13px;
  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;
  font-size: 13px;
  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 {
  z-index: 1;
  font-size: 13px;
  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 {
  width: 100%;
  min-width: auto;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--secondary);
  padding: 0px;
  background-color: #fff;
  border: 1px solid #e2e8ef;
  padding: 12px 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 {
  margin-left: 14px;
  margin-right: 14px;
  color: #f44336 !important;
}

.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-size: 14px;
  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, .datagridpro .MuiDataGrid-pinnedColumnHeaders {
  background-color: #eff1f8;
  margin: 0 0 3px;
  border-bottom: 0 !important;
  box-shadow: none;
}

.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;
  font-size: 1.125rem;
}

.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;
  font-size: 13px;
  color: var(--tertiary);
  /* line-height: 40px !important; */
}

.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);
}

.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;
}

.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%;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 0px 0px 0px 15px;
  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: 8px 42px 8px 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: 10px;
  right: 12px;
  bottom: 0;
  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);
}



.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 {
  padding: 0px;
  margin: 0px 8px 0px 8px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root.action-butn:first-child {
  margin: 0px 8px 0px 0px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i {
  font-size: 18px;
  line-height: 14px;
  position: relative;
  top: inherit;
  left: inherit;
  color: var(--primary);
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.md-size {
  font-size: 21px;
  line-height: 14px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-add-payment-1 {
  font-size: 21px;
  line-height: 14px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-add-payment,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-history {
  font-size: 25px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-send-invite,
.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-add-subscribe-new {
  font-size: 22px;
}

.MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell a i {
  font-size: 16px;
  line-height: 13px;
  padding-top: 0px;
  /* margin: 0px 5px; */
  display: block;
}



/* .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-view {
  font-size: 17px;
  color: #11B666;
  border: 1px solid #EFF1F8;
  width: 33px;
  height: 33px;
  border-radius: 90px;
  text-align: center;
  line-height: 38px;
} */

/* .MuiDataGrid-root .MuiDataGrid-main .MuiDataGrid-row .MuiDataGrid-cell .MuiIconButton-root i.dashboardicon-edit {
  font-size: 14px;
  color: #E86D29;
  border: 1px solid #EFF1F8;
  width: 33px;
  height: 33px;
  border-radius: 90px;
  text-align: center;
  line-height: 36px;
} */

.MuiDataGrid-root .MuiDataGrid-columnHeaderTitle {
  font-size: 12px;
  color: #8B8B8B;
  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);
}

/*Radio Button*/

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

.radio-butn .MuiFormControl-root .MuiFormLabel-root {
  width: 100%;
  display: block;
  transform: translate(5px, 0px) scale(1);
  padding: 16px 0px 0px 0px;
  font-size: 14px;
  font-weight: 400;
  color: var(--tertiary);
  text-align: left;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root {
  width: 100%;
  display: block;
  padding: 34px 0px 0px 0px;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root {
  display: inline-block;
  margin-left: 0px;
}

.radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root .MuiTypography-root {
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  text-transform: capitalize;
  color: var(--secondary);
}

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

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

/*Setting*/
.setting-tx {
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--tertiary);
  font-size: 14px;
  font-weight: 400;
}

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

.setting-tx span {
  color: var(--tertiary);
  font-size: 14px;
  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;
}

.info-tx {
  margin-bottom: 15px;
}

.sel-pms-type label,
.sel-pms-type label.Mui-focused {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  color: var(--tertiary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.5px;
  position: absolute;
  left: 30px;
  top: 12px;
  z-index: 1;
  background: transparent;
}

.sel-pms-type .MuiSelect-select {
  width: 100%;
  min-width: auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  font-style: normal;
  line-height: 15px;
  border: 1px solid #E2E8EF;
  padding: 9px 40px 9px 124px;
  height: auto;
  background-color: #fff;
  border-radius: 90px;
  transition: all 0.3s;
  appearance: none;
  outline: none;
}


/*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-size: 13px;
  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;
}

.import-properties .MuiDialogTitle-root {
  padding: 15px 0px 30px;
  margin: 0px;
}

.import-properties .MuiDialogContent-root {
  padding: 0px 0px 15px;
  margin: 0px;
}

.import-properties .MuiDialogContent-root .MuiTypography-root {
  font-size: 14px;
  font-weight: 400;
  color: #696969;
  font-style: normal;
  line-height: 22px;
  margin: 0px;
}

.download-butn,
.download-butn:hover,
.download-butn:focus,
.download-butn:active {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 90px;
  color: #1db06d;
  font-size: 14px;
  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-size: 14px;
  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: #fff;
  border: 1px solid var(--primary);
  border-radius: 90px;
  font-size: 13px;
  color: var(--primary) !important;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: none;
}

.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 .MuiAutocomplete-option {
  font-size: 13px;
  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-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  line-height: 36px;
  background-color: #eef1f5;
  border-top: 1px solid #E2E8EF;
  border-bottom: 1px solid #E2E8EF;
}

.global_property .MuiInputBase-input {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  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(0.75);
  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 {
  font-size: 14px;
  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;
}


/*Property detail Note Radio button*/

.chec-radio {
  margin: 0px 0px 30px 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;
  font-size: 12px;
  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-size: 14px;
  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 .Mui-checked {
  /* color: #fff;
  border:1px solid #000;
  display: block; */
  /* width: 100%;
  height: 100%;
  position: re;
  border-radius: 0;
  left: 0px;
  z-index: 2; */
  /* border-radius: 4px; */
}

/* .chec-radio label.radio-inline svg{
  display: none;
} */
.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: 30px;
  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: 3px;
}

/*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);
  font-size: 14px;
  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;
}

.copy-butn {
  padding: 8px 30px;
  margin-top: 18px;
  margin-bottom: 0px
}

.copy-butn:hover,
.copy-butn:focus {
  box-shadow: none;
}

.detail_page_wrap .detail_label {
  font-family: 'Roboto';
  color: var(--tertiary);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 20px;
}

.detail_page_wrap .detail_info {
  font-family: 'Roboto';
  font-style: normal;
  color: var(--secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-transform: capitalize;
  padding-top: 5px;
}

.web_link {
  padding-top: 20px;
}

.web_link p {
  color: var(--tertiary);
  font-size: 14px;
  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-size: 16px;
  font-weight: 600;
}

.detail_page_wrap .detail_status {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  color: #11B666;
  font-size: 18px;
  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;
  font-size: 13px;
  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;
  font-size: 13px;
  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;
  font-size: 13px;
  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 {
  padding: 0px 0px 15px 5px;
  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-size: 14px;
  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-size: 13px;
  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;
}

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

.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;
}

/*Chart Graph*/
.chart-bg {
  width: 100%;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
  border-radius: 6px;
  padding: 30px;
}

.chart-payment-modes-main {
  width: 100%;
  padding-top: 30px;
}

#pie_chart_div {
  position: relative !important;
}

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

/*Add Company infor*/
.add-company {
  position: relative;
}

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

.infor-wrap .MuiIconButton-label i {
  color: var(--tertiary);
}

.dashboardicon-information {
  font-size: 14px;
}

.dashboardicon-information {
  font-size: 26px;
  color: #65d32df2;
  top: -6px;
  left: 15px;
  position: absolute;
}

.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: 3px;
  background-color: #F2F3F7;
  position: absolute;
  bottom: 15px;
  left: 0px;
  z-index: -1;
}

.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
}

/* 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-size: 14px;
  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-size: 13px;
  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-size: 13px;
  font-weight: 400;
  padding: 0px 15px;
}

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

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

.calender-input.form-wrap .MuiFormControl-root {
  width: 100%;
}

.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;
}

.sidemenu-main .sidemenu-main-menu:hover {
  background-color: var(--backgroundcolor);
}

.sidemenu-main .sidemenu-main-menu .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-main-menu .sidemenu-count {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-shadow: none;
}

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


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

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

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

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

  /* .select-box{
    margin-bottom: 15px;
  } */
  .form-white-bg {
    padding: 30px;
  }

  .select-dropdown .MuiChip-root {
    max-width: 35%;
  }
}

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

  .select-box label,
  .select-box label.Mui-focused {
    font-size: 14px;
  }

  .detail_page_wrap .detail_info {
    font-size: 14px;
  }

  .global_property {
    width: 200px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root {
    margin-bottom: 15px;
  }
}

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

  .select-dropdown .MuiChip-root {
    max-width: 32%;
  }
}

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

@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;
  }

  .form-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0px;
    display: inline-block;
  }

  /*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;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root {
    margin-bottom: 15px;
  }

  .add-company:before {
    display: none;
  }

  .sticy-tabs {
    top: 73px;
  }

}

@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;
  }

  .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: 30px 10px 10px 10px;
  }

  .slide-right .MuiDialog-paper {
    width: 100%;
    padding: 15px 20px 20px;
  }

  .form-wrap .MuiFormControl-root {
    width: 100%;
    margin-bottom: 0px;
  }

  .form-checkbox {
    margin-bottom: 5px;
    margin-left: 5px;
  }

  .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;
  }

  .chart-graph-list {
    left: 0px !important;
  }

  .chart-bg .chart-graph {
    left: 0px !important;
  }

  .form-wrap {
    width: 100%;
    padding: 10px 0px 0px;
  }

  nav .breadcrumb-ul {
    padding: 0px 0px 10px;
  }

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

  .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;
  }

  .date-filter,
  .select-box {
    margin-top: 8px;
  }

  .active-inactive {
    width: 100%;
  }

  .fiiter-white-butn {
    width: 100%;
  }

  .tab-style-button {
    margin: 0px;
  }

  .loader-svg {
    width: 100%;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root {
    margin-bottom: 15px;
  }

  .form-white-bg {
    padding: 15px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .staff .MuiFormControlLabel-label {
    font-size: 12px;
    padding-left: 14px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .admin .MuiFormControlLabel-label {
    font-size: 12px;
    padding-left: 14px;
  }

  .radio-butn .MuiFormControl-root .MuiFormGroup-root.chec-radio .private .MuiFormControlLabel-label {
    font-size: 12px;
    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;
  }

  .filters-wrap .white-button {
    padding: 4px 12px;
    font-size: 11px;
  }

  .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;
  }

}