/* general */
@import url("https://fonts.cdnfonts.com/css/frutiger-lt-arabic");
@import url('https://fonts.cdnfonts.com/css/digital-numbers');
@import url('https://fonts.cdnfonts.com/css/ds-digital');

:root {
  font-family: "Frutiger LT Arabic", sans-serif;
  --mud-drawer-width-left: 35% !important;
  --mud-drawer-width-right: 35% !important;
  --mud-palette-table-striped: #ffffff !important;
  --mud-palette-primary: rgba(3, 109, 163, 1) !important;

  --background-img: url("../../imgs/Background-light.png");
  --log-out-bg: url("../../imgs/power-light-bg.png");
  --bg-prayer: url("../../imgs/home/pray-bg.png");
  --bg-prayer-active: url("../../imgs/home/prayer-active-bg.svg");
  --background-clr: rgb(237, 249, 255);
  --background-clr-50: rgb(237 249 255 / 50%);
  --card-linear-00: rgb(255 255 255 / 50%);
  --card-linear-100: rgb(255 255 255 / 20%);
  --card-border: rgb(255, 255, 255);
  --header-linear-00: rgb(255 255 255 / 90%);
  --header-linear-50: rgb(255, 255, 255);
  --blue-dark: rgb(8, 48, 106);
  --blue-dark-70: rgb(8 48 106 / 70%);
  --blue-dark-50: rgb(8 48 106 / 50%);
  --blue-dark-30: rgb(8 48 106 / 30%);
  --blue-navy: rgb(6, 78, 134);
  --blue-default: rgb(3, 109, 163);
  --blue-default-20: rgba(3, 109, 163, 0.2);
  --blue-default-50: rgba(3, 109, 163, 0.5);
  --blue-default-white: rgba(3, 109, 163);
  --blue-light: rgb(230, 242, 248);
  --white: rgb(255, 255, 255);
  --input-border: rgb(3 109 163 / 5%);
  --color-777: rgb(119, 119, 119);
  --color-999: rgb(153, 153, 153);
  --color-FFF: rgb(255, 255, 255);
  --shadow-color-20: rgb(6 78 134 / 20%);
  --shadow-color-30: rgb(6 78 134 /5%);
  --shadow-color-50: rgb(6 78 134 / 50%);
  --inactive-clr: rgba(176, 176, 176, 1);
  --Color-999999: #999999;
}

[data-theme="dark"] {
  --background-img: url("../../imgs/Background-dark.png");
  --log-out-bg: url("../../imgs/power-dark-bg.png");
  --bg-prayer: url("../../imgs/home/pray-dark-bg.png");
  --bg-prayer-active: url("../../imgs/home/prayer-active-dark-bg.svg");
  --background-clr: rgb(8, 48, 106);
  --background-clr-50: rgb(3, 109, 163);
  --card-linear-00: rgb(6 78 134 / 50%);
  --card-linear-100: rgb(6 78 134 / 20%);
  --card-border: rgb(6, 78, 134);
  --header-linear-00: rgb(6 78 134 / 90%);
  --header-linear-50: rgb(6, 78, 134);
  --blue-dark: rgb(230, 242, 248);
  --blue-dark-70: rgb(230, 242, 248);
  --blue-dark-50: rgb(230, 242, 248);
  --blue-dark-30: rgb(230 242 248 / 30%);
  --blue-navy: rgb(230, 242, 248);
  --blue-default: rgb(230, 242, 248);
  --blue-default-20: rgba(3, 109, 163, 0.2);
  --blue-default-50: rgba(3, 109, 163, 0.5);
  --blue-default-white: rgba(255, 255, 255);
  --blue-default-new: rgb(6, 78, 134);
  --blue-light: rgb(8, 48, 106);
  --white-dark: rgb(7 88 144);
  --white: rgb(6, 78, 134);
  --input-border: rgb(4 93 148);
  --color-777: rgb(153, 153, 153);
  --color-999: rgb(230, 242, 248);
  --color-FFF: rgb(255, 255, 255);
  --shadow-color-20: rgb(8 48 106 /20%);
  --shadow-color-30: rgb(8 48 106 /30%);
  --shadow-color-50: rgb(8 48 106 / 50%);
  --inactive-clr: rgb(176 176 176 / 25%);
}

html {
  font-family: "Frutiger LT Arabic", sans-serif;
  overflow-x: hidden;
}

/* dark - light - theme - switcher */
*{
  font-family: "Frutiger LT Arabic", sans-serif;
  outline: none;
}
body {
  font-family: "Frutiger LT Arabic", sans-serif;
  background-image: var(--background-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}
/* body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  z-index: -1;
}
body:has(.switch-parent .mud-checked)::after {
  display: none;
} */
html , body *{
  scrollbar-color: var(--blue-default) var(--white) !important;
  scrollbar-width: thin !important;
}

p{
  margin: 0px;
}

.custom-background {
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); */
  /* Ensure it covers the entire viewport */
  width: 95%;
  margin: 0 auto;
  padding-block: 32px !important;
}
.custom-background-height{
  width: 95%;
  margin: 0 auto;
  padding-block: 32px !important; 
}
.main-content {
  background: linear-gradient(
    180deg,
    var(--card-linear-00) 0%,
    var(--card-linear-100) 100%
  );
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.3rem 1.7rem;
  min-height: 500px;
}
.cursor-pointer {
  cursor: pointer;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: unset;
}
.position-relative {
  position: relative !important;
}
/* switch button */
.mud-icon-size-medium:not(.mud-checkbox-input + .mud-icon-size-medium) {
  font-size: 1rem;
}
.mud-switch-label-medium {
  font-size: 1rem !important;
  position: absolute;
  top: 6px;
  left: 0;
  opacity: 0;
}

.mud-switch-label-medium svg {
  background: linear-gradient(0deg, #c5c7cf 20%, #f8f9ff 100%);
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  fill: #ffffff !important;
}

:dir(rtl) .mud-switch-label-medium {
  left: 27px;
}

/* .mud-switch-span:has(.mud-checked) + .mud-switch-label-medium {
  font-size: 1rem !important;
  position: absolute;
  top: 6px;
  left: 20px;
} */

/* Override for LTR direction */
:dir(rtl) .mud-switch-span:has(.mud-checked) + .mud-switch-label-medium {
  left: 47px;
  /* Reset left for LTR */
}

.mud-switch-span:has(.mud-checked) + .mud-switch-label-medium svg {
  fill: #fff;
}

.mud-input > input.mud-input-root{
  color: var(--blue-default) !important;
  line-height: 16px !important;
  padding: 0px;
  height: unset;
  -webkit-box-shadow: 0 0 0 17px var(--white) inset !important;
}

.mud-input > input.mud-input-root::placeholder{
  color: var(--Color-999999);
  opacity: 0.5;
  unicode-bidi: plaintext;
}
.mud-input.mud-disabled > input.mud-input-root{
  -webkit-box-shadow: unset !important;
}
#switch0ixhyd5c,
.switch-parent {
  position: relative;
  margin-inline-end: 1rem;
}

.switch-light-icon {
  position: absolute;
  top: 3px;
  z-index: -1;
}

.switch-dark-icon {
  position: absolute;
  top: 3px;
  z-index: -1;
}

.mud-switch-span-medium.mud-switch-span {
  width: 60px;
  opacity: 0;
}

.mud-input-control:has(.mud-checked) + .switch-light-icon {
  display: none;
}

.mud-input-control:not(:has(.mud-checked)) + .switch-light-icon + .switch-dark-icon {
  display: none;
}

/* end switch button */
/* drawer style */
@media (max-width: 1199px) {
  :dir(rtl) .mud-drawer-open-responsive-md-left .mud-main-content {
    margin-left: unset;
    width: 61%;
    margin-right: 37.5%;
  }

  :dir(ltr) .mud-drawer-open-responsive-md-left .mud-main-content {
    margin-right: unset;
    width: 61%;
    margin-left: 37.5%;
  }
}

:dir(rtl) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open {
  left: unset;
  right: 2.5%;
}

:dir(ltr) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open {
  right: unset;
  left: 2.5%;
}

:dir(rtl) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left {
  right: auto;
  width: var(--mud-drawer-width, var(--mud-drawer-width-right));
}

:dir(ltr) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left {
  left: auto;
  width: var(--mud-drawer-width, var(--mud-drawer-width-left));
}

:dir(rtl) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial),
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial) {
  animation: mud-drawer-slide-in-right 225ms cubic-bezier(0, 0, 0.2, 1);
}

:dir(ltr) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial),
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial) {
  animation: mud-drawer-slide-in-left 225ms cubic-bezier(0, 0, 0.2, 1);
}

:dir(rtl) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--closed,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--closed {
  left: unset;
  right: calc(-1 * var(--mud-drawer-width, var(--mud-drawer-width-right)));
}

:dir(ltr) .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--closed,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--closed {
  right: unset;
  left: calc(-1 * var(--mud-drawer-width, var(--mud-drawer-width-left)));
}

/* side nav */
/* .mud-drawer {
  top: 145px !important;
} */

.mud-nav-link .mud-nav-link-text {
  margin-inline-start: unset;
}

/* header */
.mud-appbar.mud-appbar-fixed-top {
  position: absolute;
  width: 95%;
  height: auto;
  margin: 0 auto;
  margin-top: 24px !important; 
  border: 1px solid var(--card-border); 
  border-radius: 100px;
  background: linear-gradient(
    180deg,
    var(--header-linear-00) 0%,
    var(--header-linear-50) 50%,
    var(--header-linear-00) 100%
  );
  box-shadow: 0px 3px 6px 0px var(--input-border) !important;
}
#mudinputpes4c33r-helper-text {
  display: none;
}

.me-auto {
    /*display: none;*/
    color: rgba(252, 70, 30, 1);
    margin-right: inherit !important;
    font-size: var(--mud-typography-default-size);
    font-weight: var(--mud-typography-default-weight);
}

.select-parent, .lang-parent, .log-out-parent, .profile-info-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: 1rem;
}
.select-parent{
  gap: 4px;
}

.log-out-parent {
  gap: 30px;
  justify-content: space-between;
  background: var(--background-clr-50);
  margin-inline-end: unset;
  border-radius: 50px;
  padding-inline-end: 1rem;
  padding-inline-start: 0.5rem;
  height: 100%;
}
.lang-parent {
  border-inline-end: 1px solid var(--blue-light);
  border-inline-start: 1px solid var(--blue-light);
  padding-inline: 1rem;
  cursor: pointer;
}
.lang-parent span {
  color: var(--blue-default);
}
.profile-info-parent h5{
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
  /* margin-bottom: 0.5rem !important; */
}
.profile-info-parent h6 {
  font-size: 12px;
  font-weight: 400;
  color: var(--blue-default);  
}

/* .mud-input-adornment.mud-input-adornment-end.mud-select-input > svg {
  display: none;
} */
.select-arrow-parent {
  position: relative;
}
.select-arrow-parent svg {
  display: none !important;
}
.select-arrow-parent > svg {
  position: absolute;
  right: -10px;
  top: -4px;
}

/* .mud-list-item {
  text-align: center;
  padding: 0;
} */

.select-parent path,
.mud-appbar span,
.mud-appbar .mud-input > input.mud-input-root,
.mud-appbar div.mud-input-slot.mud-input-root,
.mud-appbar .select-arrow-parent > svg path {
  fill: var(--blue-default);
  color: var(--blue-default);
}

.mud-appbar .log-out-parent {
  background: var(--background-clr-50);
  margin-inline-end: unset;  
  border-radius: 50px;
  padding: 4px;
  padding-inline-end: 1rem;
  height: 62px;
}
.mud-appbar .log-out-parent img {  
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
}
.mud-appbar .log-out-icon-parent button{
  width: 32px;
  height: 32px;
  background-color: var(--white);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
}
.mud-appbar .log-out-icon-parent path{
  width: 20px;
  height: 20px;
  fill: var(--blue-default);
}

.mud-appbar .mud-toolbar-gutters {  
  padding-inline-start: 24px;
  padding-inline-end: 1px;
  padding-block: 1px;
  height: unset;
  min-height: fit-content;
  display: initial; 
}
.mud-appbar .navbar-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;  
}
.mud-appbar .navbar-wrapper .navbar-content{
  display: flex;
  align-items: center;
}
.responsive-lang-mode{
  display: flex;
  align-items: center;
  justify-content: center;  
}
.mud-appbar .mud-collapse-container{
  display: none;
}
@media (min-width: 600px) {
  .mud-appbar .mud-toolbar-appbar {
      height: unset;
  }
}
/* nav collapse button */
.mud-appbar .navbar-wrapper button.menu-btn{
  width: 62px;
  height: 62px;
  background-color: var(--background-clr);
}
.mud-appbar .navbar-wrapper button.menu-btn:hover,
.mud-appbar .navbar-wrapper button.menu-btn:focus{
  background-color: var(--background-clr) !important;
}
.mud-appbar .navbar-wrapper button.menu-btn svg{
  height: 20px;
  width: auto;
}
@media (min-width: 1199px) {
  .mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-icon-button-edge-start,
  .mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open {
    display: none;
  }
  :dir(rtl) .mud-drawer-open-responsive-md-left .mud-main-content {
    margin-inline: auto;
    width: 95%;
  }  
}

/* Navbar Responsive */
.responsive-nav{
  padding-inline-end: 24px;
}
.responsive-nav .navbar-content{
  margin-top: 16px;
}
.responsive-nav .navbar-content .responsive-lang-mode .lang-parent{
  border-inline-start: none;
}
.responsive-nav .navbar-content .log-out-parent{
  background-color: transparent;
  padding: 0px;
}
.responsive-nav .mud-navmenu{
  margin-block: 50px 23px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.responsive-nav .mud-navmenu .mud-nav-link{  
  background: linear-gradient(180deg, var(--blue-navy) 0%, var(--blue-default) 100%);
  color: var(--white);
  border: 1px solid var(--blue-default);
  border-radius: 100px;
  box-shadow: 0 0 3px 0 rgba(3, 109, 163, 0.25);
}
/* .responsive-nav .mud-navmenu .mud-nav-link.active{
  background-color: var(--blue-default) !important;
} */
.responsive-nav .mud-navmenu .mud-nav-link .mud-nav-link-text{
  text-align: center;
}

@media (min-width: 960px) {
  :dir(ltr) .mud-drawer-open-responsive-md-left .mud-main-content {
    margin-left: auto;
  }
}

/* footer */

.top-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  padding: 0.5rem 3rem;
}

.footer-icons-parent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bottom-footer {
  text-align: center;
  margin: auto;
  background-color: var(--blue-default);
  padding: 0.5rem;
  display: block;
}

.bottom-footer p {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: center;
  margin: auto;
  display: block;
}

/* main-nav-menu */
.main-nav-menu {
  /* position: unset !important; */
  /* position: fixed; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 49px;
  top: 104px;
  width: 95%;
  min-height: 40px;
  margin: 0 auto;
  border-radius: 100px;
  /* position: fixed; */
  right: 0;
  left: 0;
  padding: 0 2rem;
  z-index: 1300;
}

.mud-navmenu {
  z-index: 1300;
}

.main-nav-menu .mud-nav-link .mud-nav-link-text {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 30.7px;
}
@media (max-width: 1380px) {
  .main-nav-menu .mud-nav-link .mud-nav-link-text {
    font-size: 13px;
  }
}

.main-nav-menu {
  background: linear-gradient(180deg, var(--blue-navy) 0%, var(--blue-default-white) 100%);
  color: var(--white);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled){
  color: var(--white);
  background-color: var(--blue-navy) !important;
}
/* .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: var(--blue-light);
  background-color: unset !important;
  transition: unset !important;
} */
.main-nav-menu a:hover {
  background-color: var(--blue-navy);
  color: var(--white);
}
@media (max-width: 1200px) {
  /* .mud-appbar.mud-appbar-fixed-top{
    margin-top: 0px !important;
  } */
  .custom-background {
    margin-block: 24px !important;
  }
  .mud-drawer {
    top: 100px !important;
  }
}

/* end main nav menu */
/* mud table */
.mud-table,
.mud-table-container {
  border-radius: 12px;
}

.mud-table-root {
  border-spacing: 0 2px;
  border-collapse: separate;
  margin-bottom: 20px;
}

.mud-table-root .mud-table-head {
  background-color: var(--blue-navy);
}

.mud-table-root .mud-table-head .mud-table-cell {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
  white-space: nowrap;
}
.mud-table-root .mud-table-head .mud-table-cell svg path {
  fill: var(--white);
}
.table-icons-div svg:not(.mud-checkbox-input + svg) {
  height: 16px;
  width: auto;
}
.table-icons-div div:nth-child(1) svg:not(.mud-checkbox-input + svg){
  width: 18px;
}
.table-icons-div svg:not(.mud-checkbox-input + svg) path{
  fill: var(--blue-default);
}
.table-icons-div div:nth-child(2) svg:not(.mud-checkbox-input + svg) path{
  fill: var(--blue-dark);
}
.table-icons-div .in-active svg:not(.mud-checkbox-input + svg) path{
  fill: var(--inactive-clr);
}
/* .mud-primary-text,
.mud-selected-item,
.mud-list-item {
  color: var(--blue-default) !important;
} */

.table-icons-div svg.danger,
.table-icons-div svg.danger path {
  fill: rgba(252, 70, 30, 1) !important;
}

.mud-table-root .mud-table-cell:first-child {
  border-end-start-radius: 12px;
  border-start-start-radius: 12px;
}

.mud-table-root .mud-table-cell:last-child {
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  width: 0px;
}
@media screen and (max-width: 600px) {
  .mud-table-root .mud-table-cell:last-child {
    width: auto;
  }
}
/* .mud-table-active tr:hover {
  background-color: rgba(0, 123, 255, 0.1); 
} */

.table-desc-icons-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-icons-div {
  display: flex;
  align-items: center;
  gap: 20px;
}

.table-data-title h6,
.table-desc-div span {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--blue-default);
}
:dir(rtl) .en-dir-cell-style{
  direction: ltr;
  text-align: end;
}
:dir(ltr) .en-dir-cell-style{
  text-align: start;
}
.mud-table-empty-row{
  text-align: center;
  padding-block: 52px;
  background-color: var(--white);
  color: #C5C7CF;
  font-size: 16px;
  font-weight: 400;
  border-radius: 16px;
}
.mud-table-empty-row > div{
  margin: 0px !important;
}

/* select group */

.select-parent-form,
.srch-parent-form {
  /*display: flex;*/
  align-items: center;
  /* gap: 5px; */
  flex: auto;
  width: 100%;
  position: relative;
}

.mud-input.mud-input-underline:before {
  display: none;
}

.grid-gap-wrapper{
  gap: 16px;
}
.select-parent-group {
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
  padding: 1rem;
  gap: 16px;
  border-radius: 16px;
  margin: 0px;
  width: 100%;
  margin-bottom: 2rem;
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 100%);
}
.select-parent-group.mud-grid-spacing-xs-6 > div{
  padding: 0px;
}
.select-parent-group:not(.add-edit-page .select-parent-group){
  border: 1px solid var(--card-border);
  box-shadow:unset;
}
[data-theme="dark"] .select-parent-group:not(.add-edit-page .select-parent-group) {
  border: 1px solid var(--blue-default-new);
  box-shadow: 0 0 1px 0 var(--blue-default); 

}
.add-templates .select-parent-group{
  border-radius: 0 !important;
}
.select-parent-group .mud-input-control {
  width: 100%;
}

/* .general-fields-wrapper .mud-input-root-text {
  padding: 0.3rem 0.5rem !important;
} */
.general-fields-wrapper .mud-input-text .mud-input-adornment-end {
  margin-inline: 8px;
}
.general-fields-wrapper .select-parent-group .mud-select .mud-select-input .mud-input-slot {
  color: var(--blue-default) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.mud-select.mud-autocomplete .mud-input.mud-input-filled {
  background-color: var(--white) !important;
  border-radius: 8px !important;
  padding: 0.3rem 0.5rem !important;
}
.mud-select.mud-autocomplete .mud-input>input.mud-input-root.mud-input-root-filled{
  padding: 0px;
  line-height: 16px;
  height: unset;
  border-radius: 0px !important;
}
.mud-select.mud-autocomplete .mud-input.mud-input-filled .mud-input-slot.mud-input-root {
  background-color: transparent !important;
}
.mud-select .mud-icon-root.mud-svg-icon:not(.mud-input-clear-button .mud-icon-root.mud-svg-icon) {
  width: 12px;
  height: 12px;
}
.mud-input-clear-button .mud-icon-root.mud-svg-icon {
  fill: var(--color-999) !important;
}
.add-edit-page .select-parent-group {
  /* border: unset; */
  background: unset;
  padding: 0px;
  /* margin-bottom: 1rem; */
  /* padding-top: 1rem; */
  width: 100%;
  box-shadow: unset !important;
  border: unset !important;
}
.add-edit-page .select-parent-group{
  padding: 0px;
}
.add-edit-page .select-parent-group:nth-of-type(1) {
  padding-top: 0;
  /* margin-bottom: -15px; */
}
.add-edit-page .select-parent-group.first-of-type{
  margin-bottom: 0 !important;
  grid-template-columns: 1fr 1fr 1fr;
}
.add-edit-page .select-parent-group.custom-grid-template{
  grid-template-columns: 1fr 1fr 1fr;
}
/* .master-accounts .select-parent-group:nth-of-type(1) > div {
  flex: unset;
  width: calc((100% / 3) - 13px);
} */
@media (max-width: 1280px) {
  .master-accounts .select-parent-group:nth-of-type(1) > div {
    width: 100%;
  }
}
/* .mud-input-control-helper-container{
  display: none;
} */
.mud-input-label{
  color: var(--blue-dark-70);
  text-align: start;
}
.select-parent-group .mud-input-label,
.uploader-container-overlay .mud-input-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--blue-dark-70);
  display: block;
  margin-inline: 0 auto;
  margin-bottom: 5px;
}

.select-parent-group > div {
  /* display: flex; */
  flex-direction: column;
  flex: auto;
  align-items: center;
  justify-content: center;
  /* width: 100%; */
  position: relative;
  height: 80%;
}
/* .main-content .select-parent-group > div {
  min-height: 92px;
} */

/* breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-top: 40px; */
  padding-top: 136px;
  margin-bottom: 16px;
}
.rols-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32.4px;
  color: var(--blue-dark);
}

.add-btn {
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: var(--blue-default);
  border: 2px solid var(--blue-default);
  background: var(--blue-light);
  border-radius: 32px;
  height: 40px;
  width: 200px;
  text-align: center;
  padding: 0;
  outline: none !important;
  padding-inline-start: 20px;
  font-family: "Frutiger LT Arabic", sans-serif;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.mud-dialog .mud-dialog-actions .add-btn{
min-width: 170px;
max-width: 170px;
}
.add-btn svg {
  position: absolute;
  top: -2px;
  inset-inline-start: -2px;
  z-index: 10;
  overflow: visible;
  background: var(--blue-default);
  color: var(--white) !important;
  width: 40px;
  height: 40px;
  border: 1px solid var(--blue-default);
  border-radius: 32px;
  padding: 13px;
}
.add-btn path {
  fill: var(--white) !important;
}

.select-parent-group .mud-input {
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background-color: var(--white);
  border: 0 !important;
  outline: 0 !important;
  border: 1px solid var(--input-border) !important;
  height: 40px;
  box-shadow: 4px -4px 8px 0px rgba(3, 109, 163, 0.05);
  font-family: "Frutiger LT Arabic", sans-serif;
}

:dir(rtl) .select-parent-group .select-arrow-parent > svg {
  right: -17px;
}

:dir(ltr) .select-parent-group .select-arrow-parent > svg {
  right: unset;
  left: -17px;
}

/* :dir(rtl) .mud-input.mud-input-text.mud-input-adorned-end.mud-input-underline.mud-shrink.mud-typography-input .mud-icon-root.mud-svg-icon {
  transform: rotate(90deg);
} */

:dir(ltr) .mud-input.mud-input-text.mud-input-adorned-end.mud-input-underline.mud-shrink.mud-typography-input .mud-icon-root.mud-svg-icon {
  transform: unset;
}

.select-parent-group .mud-input > input.mud-input-root::placeholder,
.select-parent-group .mud-input-control::placeholder,
.select-parent-group .mud-select .mud-select-input .mud-input-slot,
.mud-typography-h6 {
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 21px;
  color: var(--blue-dark) !important;
  opacity: 30%;
}
.select-parent-group .mud-select .mud-select-input .mud-input-slot{
  font-size: 1rem;
}
.select-parent-group .mud-select .mud-select-input .mud-input-slot {
    color: var(--blue-default) !important;
    opacity: 1;
    text-align: start;
}
body:has(.switch-parent .mud-checked) .mud-typography-h6 {
  color: #ffffff !important;
}
.add-user-btn-parent {
  justify-content: end !important;
  align-items: end !important;
  flex-direction: unset !important;
  margin-top: auto;
  margin-bottom: 0;
}

/* .add-user-btn-parent .mud-button-label {
  justify-content: start;
} */

/* .grid-inputs-group > div:last-child{
  align-self: end;
} */
.grid-inputs-group .add-btn{
  width: 225px;
  margin: 25px auto;
}
@media (max-width: 1200px) {
  .grid-inputs-group{   
    grid-template-columns: 1fr;
  }

  /* .add-user-btn-parent {
    display: block !important;
    margin-top: 1rem;
  } */
}

/* .mud-paper:not(.mud-popover.mud-popover-open),
.mud-paper:not(.mud-popover.mud-paper)
{
    height: 250px !important;
} */
/* .mud-popover.mud-popover-open.mud-popover-top-center.mud-popover-anchor-top-center.mud-popover-overflow-flip-onopen.mud-popover-relative-width.mud-paper.mud-elevation-8.overflow-y-auto{
  max-width: fit-content !important;
  top: unset !important;
  bottom: unset !important;
} */
/* .select-parent-form .mud-popover.mud-popover-open.mud-popover-top-center.mud-popover-anchor-top-center.mud-popover-overflow-flip-onopen.mud-popover-relative-width.mud-paper.mud-elevation-8.overflow-y-auto{
  max-width: fit-content !important;
  top: unset !important;
  bottom: unset !important;
} */
.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root,
.mud-typography-body1 {
  font-family: "Frutiger LT Arabic", sans-serif !important;
}
body .mud-popover .mud-list {
  background-color: var(--white) !important;
}
/* .mud-list-item-clickable:not(.mud-selected-item), .mud-list-item-clickable:not(.mud-selected-item) .mud-svg-icon{
  color: var(--color-999);
  fill: var(--color-999) !important;
} */
/* .mud-paper.mud-elevation-1.pa-4,
.mud-paper.mud-elevation-1{
    height: unset !important;
} */

.mud-paper .image-preview img {
  max-height: 190px;
  margin: 5px;
}

.image-preview {
  text-align: start;
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  z-index: 9999999;
}
/* btns */
.add-btn.success {
  background-color: var(--blue-default) !important;
  padding-inline-start: unset;
  padding-inline-end: unset;
  padding: 0.5rem 4rem;  
  color: var(--white) !important;
}

.add-btn.outline-success {
  background-color: var(--white) !important;
  padding-inline-start: unset;
  padding-inline-end: unset;
  padding: 0.5rem 4rem;  
  color: var(--blue-default) !important;
}

.add-btn.danger {
  background-color: var(--blue-light) !important;
  padding-inline-start: unset;
  padding-inline-end: unset;
  padding: 0.5rem 4rem;  
  color: var(--blue-default) !important;
}
.mud-card-actions {
  gap: 10px;
  justify-content: end;
}
.mud-button{
  --mud-typography-button-text-transform: capitalize;
}
button[disabled] {
  opacity: 0.3 !important;
  --mud-palette-action-disabled: var(--color-999) !important;
}

.btns-overlay {
  background: rgba(252, 70, 30, 1);
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100%;
  top: 0;
  padding: 1rem;
  text-align: center;
  border-radius: 16px;
  transition: 0.5s;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.absolute.mud-width-full.mud-height-full.overflow-hidden.z-10:hover .image-preview > .image-container > .btns-overlay {
  background: rgba(252, 70, 30, 1);
  opacity: 1 !important;
  display: flex !important;
}
.btns-overlay:hover {
  display: flex;
}
.image-preview > .image-container > img:hover + .btns-overlay {
  display: flex;
}
.image-preview > .image-container > div {
  min-height: 50px;
  width: -webkit-fill-available;
  text-align: center;
}
.image-preview > .image-container > div:hover + .btns-overlay {
  display: flex;
}
.image-preview > .image-container > .btns-overlay > button {
  position: unset !important;
}
.image-preview > .image-container > .btns-overlay > button:nth-of-type(1) {
  background-color: green !important;
}

/* start old dialog */
.modal-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--blue-dark);
}
.modal-body {  
  background-color: var(--background-clr) !important;
}
.modal-content {
  border-radius: 16px;
}
.modal-footer {
  justify-content: center;
}
.modal-body p {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--blue-dark);
}

/* upload file input */
.image-container {
  position: relative !important;
  /* width: 29%; */
  width: 265px;
  /* height: 107px; */
  right: 4%;
  left: 4%;
  height: 0%;
}
.image-container > img {
  width: 100%;
  height: 190px;
}
/*.uploader-container-overlay:after{
    position:absolute;
    content:'';
    width:100%;
    height:100%;
    background-color:rgba(252, 70, 30, 1);
    top:0;
    left:0;
    right:0;
    bottom:0;
}*/
.uploader-container-overlay {
  position: relative;
  /* overflow:hidden; */
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: auto !important;
  margin-block: 20px;
}
.uploader-container-overlay .mud-file-upload {
  flex-grow: unset !important;
  width: 100% !important;
}
.uploader-container-overlay .mud-list {
  width: 100% !important;
  /* background: var(--white); */
  padding: 1px 0;
  /* margin: auto; */
  /* margin-top: -16px; */
}
.uploader-container-overlay .mud-list .image-container {
  width: 100% !important;
  border-radius: 8px;
  background: var(--blue-light);
  height: 40px;
}
.file-upload-group,
.file-details {
  width: 100%;
}
.files-uploaded-container span {
  color: var(--blue-default);
  white-space: nowrap;
}
.files-uploaded-container .file-name span {
  display: inline-block;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploader-container-overlay .mud-list-item-clickable:not(.mud-selected-item),
.uploader-container-overlay .mud-list-item-clickable:focus:not(.mud-selected-item),
.uploader-container-overlay .mud-list-item-clickable:active,
.uploader-container-overlay .mud-list-item-clickable {
  background-color: #e6f2f8 !important;
  border-radius: 8px !important;
}
.uploader-container-overlay .mud-list-item-clickable {
  min-width: fit-content;
  max-width: fit-content;
}
.d-flex.flex-column.gap-3.uploader-container-overlay
  .mud-typography.mud-typography-h6 {
  margin-bottom: -4.2rem;
}
.uploader-container-overlay .mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root,
.uploader-container-overlay .mud-typography-body1 {
  font-family: "Frutiger LT Arabic", sans-serif !important;
  color: var(--blue-navy) !important;
}
.mud-input-control.mud-file-upload .mud-button-root.mud-button.mud-button-text.mud-ripple {
  height: 40px;
  min-width: 100%;
  justify-content: space-between;
  border-radius: 8px;
  padding: 11.1px;
  background-color: var(--blue-light);
  font-family: "Frutiger LT Arabic", sans-serif;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 21px;
  color: var(--blue-dark) !important;
  text-transform: unset;
  /* opacity: 0.4; */
}
.mud-input-control.mud-file-upload .mud-button-icon-end {
  margin: 0px;
}
.mud-input-control.mud-file-upload
  .mud-button-root.mud-button.mud-button-text.mud-ripple
  .mud-icon-root.mud-svg-icon {
  fill: var(--blue-dark);
}
@media (max-width: 600px) {
  .uploader-container-overlay {
    flex-direction: column !important;
  }
  .mud-input-control.mud-file-upload
    .mud-button-root.mud-button.mud-button-text.mud-ripple {
    min-width: 100%;
  }
}
.image-container:has(.files-uploaded-container) {
  right: unset;
  left: unset;
  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  .image-container:has(.files-uploaded-container) {
    min-width: 100%;
  }
}
@media (min-width: 1200px) {
  .image-container:has(.files-uploaded-container) {
    min-width: 66.5%;
  }
}
.files-uploaded-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.files-uploaded-container .mud-icon-root.mud-svg-icon {
  fill: rgba(252, 70, 30, 1) !important;
  width: 15px;
  height: auto;
}
.download-files-view-mode{
  display: flex;
  flex-direction: row !important;
  gap: 16px;
  margin: 0px;
  width: 100%;
}
.download-files-view-mode > *{
  flex: auto;
}
.files-uploaded-container-view-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  background-color: var(--blue-light);
  padding: 8px !important;
  border-radius: 8px;
  margin-top: auto;
  margin-bottom: 0;
  height: 40px;
}
.files-uploaded-container-view-content{
  padding: 0px !important;
}
@media (max-width: 1200px) {
  .files-uploaded-container-view-title {
    min-width: 100%;
  }
}
body:has(.switch-parent .mud-checked) .file-upload-icon svg {
  fill: var(--blue-dark) !important;
}
.file-upload-desc {
  color: var(--blue-dark) !important;
}

.mud-chip {
  position: absolute;
  top: 60px;
}

.modal-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin: unset;
}
/* :dir(rtl) .mud-table-pagination-toolbar .mud-tablepager-left {
  flex-direction: row !important;
  direction: ltr;
} */
.settings-page .mud-button-root.mud-button.mud-button-text.mud-button-text-default.mud-button-text-size-medium.mud-ripple,
.assign-roles-page .toggle-collapse {
  background: var(--blue-light);
  border-radius: 16px !important;
  padding: 3px;
  min-height: 40px;
}
.assign-roles-page .toggle-collapse {
  width: 100%;
  padding-inline-end: 1rem;
}
.assign-roles-page .toggle-collapse .toggle-collapse-title {
  display: flex;
  align-items: center;
}
.settings-page .mud-paper {
  background-color: transparent !important;
}
.settings-page .mud-button-label,
.assign-roles-page .toggle-collapse .mud-button-label {
  font-family: "Frutiger LT Arabic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--blue-navy);
  justify-content: start;
  text-transform: capitalize !important;
}
.assign-roles-page .toggle-collapse .mud-button-label {
  justify-content: space-between;
}
.settings-page .mud-button-label span,
.assign-roles-page .toggle-collapse .mud-button-label span:not(.mud-checkbox span) {
  background: var(--white);
  /* padding: 1rem; */
  border-radius: 100px;
  width: 34px;
  height: 34px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-end: 1rem;
  /* margin-inline-start: 1px; */
}
.settings-page .mud-button-label svg,
.assign-roles-page .toggle-collapse .mud-button-label svg {
  fill: var(--blue-navy) !important;
}
.settings-page .mud-button-label svg path,
.assign-roles-page
  .toggle-collapse
  .mud-button-label
  svg
  path:not(.mud-checkbox svg path) {
  fill: var(--blue-navy) !important;
}
.collapse-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 3rem;
}
.collapse-chiled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
  background: var(--white);
  border-radius: 16px;
  padding: 0.4rem 1rem;
  margin-bottom: 0.5rem;
}
[data-theme="dark"] .collapse-chiled {
background:  var(--white-dark);
}
.collapse-chiled > div {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--blue-navy);
}
.collapse-chiled-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.collapse-chiled-child .collapse-child-items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.collapse-chiled-child .collapse-child-items > div {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--blue-navy);
  background: var(--blue-light);
  border-radius: 16px;
  padding: 0.3rem 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.collapse-chiled-child svg{
  width: 16px;
}
.collapse-chiled-child path {
  fill: var(--blue-navy);
}
@media (max-width: 800px) { 
  :root {
    --mud-drawer-width-left: 100% !important;
    --mud-drawer-width-right: 100% !important;
  }  

  .top-footer .logo-img-footer svg {
    width: 90%;
  }    

  .collapse-container {
    display: block;
  }
}
.mud-dialog-title .mud-typography.mud-typography-h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--blue-dark) !important;
  opacity: 1 !important;
  width: 95%;
}
.mud-dialog {
  border-radius: 16px !important;
  /* background-color: rgb(243 251 255) !important; */
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%) !important; */
  border: 1px solid var(--white) !important;
  /* box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.05) !important; */
  max-width: 414px;
  /* max-width: fit-content; */
  min-height: fit-content;
  max-height: fit-content;
  font-family: "Frutiger LT Arabic", sans-serif !important;
  background: transparent;
  background-color: transparent;
}
.mud-dialog .social-media-fields{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
@media (max-width: 800px) {
  .collapse-chiled {
    flex-direction: column;
    text-align: center;
  }

  /* .mud-dialog {
    min-width: 100%;
    max-width: 100%;
    min-height: fit-content;
    max-height: fit-content;
  } */
}
.mud-dialog .mud-dialog-title{
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  border-bottom: 1px solid var(--input-border) !important;
}
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-actions {
  background-color: var(--white) !important;
}
.mud-dialog .mud-dialog-title .mud-button-close .mud-icon-root.mud-svg-icon{
  fill: var(--blue-dark);
  opacity: 25%;
}
:dir(rtl) .mud-dialog .mud-dialog-title .mud-button-close {
  right: unset;
  left: 8px;
}
:dir(ltr) .mud-dialog .mud-dialog-title .mud-button-close {
  left: unset;
  right: 8px;
}
:dir(rtl) .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
  transform-origin: top right;
}
:dir(rtl) .mud-input-label-inputcontrol {
  top: 0;
  left: unset;
  right: 0;
}
/* ltr */
:dir(ltr) .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
  transform-origin: top left;
}
:dir(ltr) .mud-input-label-inputcontrol {
  top: 0;
  left: 0;
  right: unset;
}
.mud-dialog .mud-input-label-inputcontrol {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  color: var(--blue-dark) !important;
  margin-bottom: 5px !important;
}
.mud-dialog .mud-dialog-title .mud-icon-button {
  color: unset !important;
}
.mud-dialog .mud-dialog-actions {
  padding: 15px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  border-top: 1px solid var(--input-border) !important;
}
.mud-dialog .mud-dialog-actions > :first-child {
  background-color: var(--blue-default) !important;
  border-radius: 32px;
  color: var(--white) !important;
  border: 1px solid var(--blue-default, rgba(3, 109, 163, 1)) !important;
  box-shadow: unset !important;
}
.mud-dialog .mud-dialog-actions > :last-child {
  background-color: var(--blue-light) !important;
  border-radius: 32px;
  color: var(--blue-default) !important;
  border: 1px solid var(--blue-default, rgba(3, 109, 163, 1)) !important;
}
.mud-dialog .mud-dialog-actions .mud-button {
  font-family: "Frutiger LT Arabic", sans-serif !important;
  padding: 0.37rem 3.7rem;
  margin-left: unset !important;
  margin-inline-start: unset !important;
  margin-inline-end: unset !important;
  font-weight: 700;
  font-size: 14px !important;
}

.mud-dialog .mud-dialog-content {
  padding: 32px;
  margin: 0px;
  border-radius: 0px;
  /* background: linear-gradient(
    180deg,
    var(--card-linear-00) 0%,
    var(--card-linear-100) 100%
  ); */
  background-color: var(--blue-light) !important;
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 100%);
  box-shadow: 0px 12px 24px 0px #0000000D !important;
}
.settings-dialog-page.mud-dialog .mud-dialog-content .files-type-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 600px) {
  .settings-dialog-page.mud-dialog .mud-dialog-content .files-type-fields {
    grid-template-columns: 1fr 1fr;
  }
  
}
.mud-dialog.attachment-dialog .mud-dialog-content
 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* flex-direction: column; */
    max-height: 300px;
    overflow: auto;
}
.mud-dialog .mud-dialog-content p{
  color: var(--blue-navy);
}
.mud-dialog .mud-input {
  border-radius: 8px !important;
  background-color: var(--white) !important;
  /* border: 1px solid var(--input-border) !important; */
  box-shadow: 4px 4px 8px 0px rgba(3, 109, 163, 0.05) inset !important;
  color: var(--blue-dark) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--input-border) !important;
  height: 40px;
}
.mud-dialog .mud-input input.mud-input-root{
  line-height: 15px !important;
}
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  color: var(--blue-default) !important;
}


.mud-elevation-25 {
  box-shadow: unset !important;
}
.logo-img svg {
  width: 167px; /* Desirgba(252, 70, 30, 1) size */
  height: auto; /* Maintain aspect ratio */
  display: block;
}
.logo-img path, .logo-img-footer path{
  fill: var(--blue-dark);
}
.logo-img path:nth-of-type(2), .logo-img-footer path:nth-of-type(2){
  fill: var(--blue-default);
}
.logo-img-footer svg {
  width: 105px; /* Desirgba(252, 70, 30, 1) size */
  height: auto; /* Maintain aspect ratio */
  display: block;
}
.twitter-parent svg path,
.linkedin-parent svg path {
  fill: var(--blue-navy);
}
/* @media (min-width: 1200px) { */
/* .logo-img svg{
transform: scale(1.3);
   
  } */
/* .logo-img-footer svg{
transform: scale(1.3);
  } */
/* .mud-toolbar-gutters {
    padding-right: 48px !important;
    padding-left: 0 !important;
  } */

/* :dir(ltr) .mud-toolbar-gutters {
    padding-left: 48px !important;
    padding-right: 0 !important;
  } */
/* } */
.mud-elevation-1 {
  box-shadow: unset !important;
}
hr:not([size]) {
  height: 1px;
  background-color: var(--input-border) !important;
  box-shadow: 0px 1px 0px 0px rgba(6, 78, 134, 0.1);
  opacity: 1 !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}
.settings-page hr:last-child,
.assign-roles-page .mud-stepper-content hr:last-child {
  display: none;
}
.settings-page hr:first-child {
  display: block;
}
.settings-page .mud-divider.mud-divider-fullwidth {
  display: none;
}

.mud-table {
  background-color: transparent !important;
}
.mud-table-cell {
  border-bottom: unset !important;
}
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
  background-color: var(--white);
}
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) {
  background-color: var(--input-border);
}
.mud-table-pagination-toolbar {
  border-top: unset !important;
  position: relative;  
  height: auto;
}
/* .mud-table-pagination-toolbar > div:nth-child(1){
  order: 2;
}
.mud-table-pagination-toolbar > div:nth-child(2){
  order: 1;
} */
body[dir="rtl"] .mud-table-pagination-toolbar .mud-tablepager-right{
  flex-direction: row !important;
}
.mud-table-pagination-actions{
  margin: 0px;
  position: absolute;
  inset-inline-end: 0px;
  /* transform: translateX(-50%); */
  display: flex;
  gap: 5px;
}
/* body[dir="rtl"] .mud-table-pagination-actions{
  transform: translateX(50%);
} */
.mud-table-pagination-information, .mud-table-page-number-information {
  color: var(--blue-navy);
}
.mud-table-pagination-spacer{
  display: none;
}
.mud-table-pagination-display .mud-select {
  width: 50px;
}
.mud-table-pagination-display .mud-input-control {
  margin: 0px !important;
}
.mud-table-pagination-display .mud-input {
  padding-block: 0.3rem !important;
  background-color: var(--white) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 8px !important;
  box-shadow: inset 4px 4px 8px 0px rgba(3, 109, 163, 0.05);
}
.mud-table-pagination-display .mud-select .mud-input-root,
.mud-table-pagination-display .mud-select .mud-input-adornment.mud-input-adornment-end.mud-select-input {
  padding: 0px !important;
}
.mud-table-pagination-display .mud-select .mud-input-adornment.mud-input-adornment-end.mud-select-input > svg {
  display: block;
}
.mud-icon-root.mud-svg-icon.mud-secondary-text.mud-icon-size-medium.mud-input-adornment-icon {
  display: block;
  transform: unset !important;
}
.mud-table-pagination-actions > * {
  color: var(--blue-default) !important;
  background-color: var(--white);
  border: 1px solid var(--blue-light);
  border-radius: 8px;  
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 17.7px !important;
  box-shadow: unset !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:focus {
  background-color: var(--blue-navy) !important;
}
.mud-button-filled.mud-button-filled-primary {
  background-color: var(--blue-navy) !important;
  color: #ffffff !important;
}
.mud-pagination {
  gap: 3px;
}
.mud-toolbar .mud-input > input.mud-input-root,
.mud-appbar .mud-input > input.mud-input-root{
  width: 225px !important;
}

.mud-input .mud-icon-root.mud-svg-icon:not(.mud-appbar .mud-icon-root.mud-svg-icon, .mud-input-clear-button .mud-icon-root.mud-svg-icon, .mud-table-pagination-select .mud-icon-root.mud-svg-icon, .mud-input-numeric-spin .mud-icon-root.mud-svg-icon) path{
  fill: var(--blue-default);
}
/* .mud-button:hover {
  background-color: revert-layer !important;
} */
.mud-list {
  /* bottom: -328px; */
  /* top: unset !important; */
  border-radius: 8px;
}
.mud-popover.mud-popover-open.mud-popover-top-center.mud-popover-anchor-top-center.mud-popover-overflow-flip-onopen.mud-popover-relative-width.mud-paper.mud-elevation-8.overflow-y-auto,
.mud-popover .mud-paper {
  /* overflow-y: unset !important; */
  background-color: var(--white) !important;
  border-radius: 8px;
  /* box-shadow: unset !important; */
  /* margin-top: 2rem; */
  /* margin-top: 10px; */
}
.mud-typography-h6 {
  font-family: "Frutiger LT Arabic", sans-serif !important;
}
.mud-paper.mud-paper-outlined.relative.rounded-lg.border-2.border-dashed.pa-4.mt-4.mud-width-full.mud-height-full {
  color: currentColor;
  width: 95%;
  border: unset !important;
  height: 1lh !important;
  margin: 0;
  display: block;
  padding: 6px 0 7px;
  min-width: 0;
  background: #ffffff;
  position: relative;
  box-sizing: content-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer !important;
  margin-bottom: 1rem;
}
.mud-paper.mud-paper-outlined.relative.rounded-lg.border-2.border-dashed.pa-4.mt-4.mud-width-full.mud-height-full
  .mud-typography-h6 {
  color: var(--blue-dark) !important;
  opacity: 0.4;
}
.absolute.mud-width-full.mud-height-full.overflow-hidden.z-10 {
  cursor: pointer;
}
.mud-button-filled.mud-button-filled-primary:focus,
.add-edit-page .mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary {
  /* color: currentColor; */
  width: 66.39%;
  /* border: unset !important; */
  /* height: 1lh !important; */
  /* margin: 0; */
  /* display: block; */
  padding: 10px;
  /* min-width: 0; */
  /* position: relative; */
  /* box-sizing: content-box; */
  /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
  cursor: pointer !important;
  margin-bottom: 1rem;  
  color: var(--blue-navy) !important;
  direction: ltr;
  box-shadow: unset;
  border-radius: 8px;
  justify-content: space-between;
  font-family: "Frutiger LT Arabic", sans-serif;
  background-color: #e6f2f8 !important;
}
.mud-button-filled,
.mud-button-filled:hover {
  box-shadow: none;
}
.mud-pagination-item.mud-pagination-item-selected
  .mud-button-filled.mud-button-filled-primary:focus,
.mud-pagination-item.mud-pagination-item-selected
  .mud-button-filled.mud-button-filled-primary:hover,
.mud-pagination-item.mud-pagination-item-selected
  .mud-button-filled.mud-button-filled-primary {
  margin-bottom: unset;
  width: auto;
}
:dir(rtl) .mud-pagination .mud-pagination-item svg {
  transform: rotate(180deg);
}
:dir(ltr) .mud-pagination .mud-pagination-item svg {
  transform: rotate(0deg);
}
@media (max-width: 1200px) {
  .add-edit-page .mud-button-filled.mud-button-filled-primary:hover,
  .mud-button-filled.mud-button-filled-primary:focus,
  .add-edit-page .mud-button-filled.mud-button-filled-primary:hover,
  .mud-button-filled.mud-button-filled-primary:not(.mud-pagination-item-selected .mud-button-filled-primary) {
    /* color: currentColor; */
    width: 100%;
  }
}

.mud-list-item-icon:has(svg) {
  min-width: unset !important;
}

/* body:has(.switch-parent .mud-checked)
  .mud-navmenu.mud-navmenu-default
  .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: var(--blue-navy) !important;
} */
.mud-pagination-item.mud-pagination-item-selected .add-edit-page .mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:focus,
.add-edit-page .mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary {
  background: var(--blue-navy) !important;
  background-color: var(--blue-navy) !important;
  color: var(--white) !important;
}
.mud-pagination .mud-pagination-item .mud-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.mud-select.mud-autocomplete .mud-input-label-filled {
  transform: translate(0px, -24px) scale(0.75) !important;
}
.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
  margin-block: 10px;
}
:dir(rtl) .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
  right: unset !important;
  left: 14px !important;
}
:dir(ltr) .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
  left: unset !important;
  right: 14px !important;
}
body:has(.switch-parent .mud-checked) .mud-dialog-title .mud-typography.mud-typography-h6 {
  color: var(--blue-default) !important;
}
/* body:has(.switch-parent .mud-checked) .mud-dialog .mud-dialog-title .mud-button:hover {
  background-color: var(--blue-dark) !important;
} */
/* body:has(.switch-parent .mud-checked) .mud-dialog {
  background-color: var(--blue-dark) !important;
} */
body:has(.switch-parent .mud-checked) .mud-dialog .mud-input-label-inputcontrol {
  color: #ffffff !important;
}
.mud-dialog .mud-input-label-inputcontrol {
  transform: translate(0px, -15px);
}
body:has(.switch-parent .mud-checked) .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
body:has(.switch-parent .mud-checked) .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  transform: translate(0, -8.5px) scale(1);
  color: #ffffff !important;
}
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  transform: translate(0, -8.5px) scale(1);
}
body:has(.switch-parent .mud-checked) .mud-input-numeric-spin .mud-icon-root.mud-svg-icon:not(.mud-appbar .mud-icon-root.mud-svg-icon) {
  fill: var(--blue-dark);
}
.mud-select{
  width: 100%;
}
.mud-select .mud-select-input {
  border-radius: 8px !important;
  /* padding: 0.3rem 0.5rem !important; */
  /* padding-inline: 0.5rem !important; */
}
.mud-icon-button-edge-end{
  margin-inline-end: 0px;
}
.mud-input-adornment-end{
  margin-inline-start: 0px;
}
body:has(.switch-parent .mud-checked) .mud-select .mud-select-input .mud-icon-root.mud-svg-icon:not(.mud-appbar .mud-icon-root.mud-svg-icon) {
  fill: var(--blue-dark);
}

.files-content-container {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  padding: 0.5rem;
  background-color: var(--blue-light);  
  border-radius: 8px;
  /* cursor: pointer; */
  width: 100%;
  height: 40px;
}
.files-content-desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-img {
  width: 35px;
  height: auto;
  fill: var(--blue-dark) !important;
}
.download-icon {
  padding: 0 !important;
}
.download-icon svg {
  fill: var(--blue-dark) !important;
  margin: 3px;
}
.files-inner-content {
  display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
}
.files-size {
  color: rgb(178 176 204) !important;
}

/* .mud-list-item{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
 } */
.mud-popover.mud-popover-open.mud-popover-top-center.mud-popover-anchor-bottom-center.mud-popover-overflow-flip-onopen.mud-popover-relative-width.mud-paper.mud-elevation-8.overflow-y-auto {
  width: 100%;
  /* margin-top: -20px; */
  border-radius: 8px;
}
.mud-input.mud-input-filled.mud-input-underline:after {
  left: 8px;
  right: 8px;
  border-radius: 50px;
}
.mud-input.mud-input-underline:after {
  border-bottom: 2px solid var(--blue-default) !important;
  left: 4px;
  right: 4px;
  border-radius: 50px;
}
.skippable-one + button {
  display: none !important;
}
.mud-popover .mud-list {
  max-height: 145px !important;
}

/* Assign Roles Page */
/* stepper */
.mud-paper-stepper {
  --mud-palette-surface: transparent !important;
}
.mud-stepper.mud-stepper__horizontal .mud-stepper-nav {
  padding-bottom: 0;
  border-bottom-color: var(--input-border);
  box-shadow: 0px 1px 0px 0px rgba(6, 78, 134, 0.1);
  overflow: hidden;
}
.mud-stepper .mud-stepper-nav .mud-step {
  display: none;
}
.mud-stepper.mud-stepper__horizontal .mud-stepper-nav-connector {
  margin: 0px;
  flex: 1;
}

.custom-connector span {
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  color: var(--blue-dark-70);
  display: block;
  text-align: start;
  margin-inline-start: 4px;
}
.custom-connector:has(.connector-active) span {
  color: var(--blue-default);
}
/* .mud-stepper-nav-connector:first-child .custom-connector hr{
  border-start-start-radius: 16px !important;
  border-end-start-radius: 16px !important;
}
.mud-stepper-nav-connector:last-child .custom-connector hr{
  border-end-end-radius: 16px !important;
  border-start-end-radius: 16px !important;
} */
.custom-connector hr {
  height: 16px;
  padding: 4px;
  background: rgb(3 109 163 / 5%);
  /* background: var(--blue-default-50); */
  border: none;
  opacity: 1;
  box-shadow: none;
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}
.custom-connector hr:nth-of-type(1) {
  background: var(--blue-light) !important;
}
.mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(1) hr {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(3) hr {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.add-edit-domain .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(2) hr {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
/* en */
:dir(ltr) .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(1) hr {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
:dir(ltr) .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(3) hr {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
:dir(ltr) .add-edit-domain .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(2) hr {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
/* roles page */
.assign-roles-page-only .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(3) hr {
  border-top-right-radius: unset ;
  border-bottom-right-radius: unset ;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
.assign-roles-page-only .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(1) hr {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.assign-roles-page-only .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(4) hr {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
:dir(ltr) .assign-roles-page-only .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(1) hr {
  border-top-right-radius: unset ;
  border-bottom-right-radius: unset ;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
:dir(ltr) .assign-roles-page-only .mud-stepper-nav  div.mud-stepper-nav-connector:nth-of-type(4) hr {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.custom-connector hr:after {
  content: "";
  width: auto;
  height: 8px;
  display: inline-block;
  border-radius: 16px;
  position: absolute;
  top: 50%;
  inset-inline: 4px;
  transform: translateY(-50%);
  z-index: 2;
}
.custom-connector .connector-default:after {
  /* background-color: rgb(3 109 163 / 20%); */
  background-color: var(--blue-default-20);
}
.custom-connector .connector-active:after {
  /* background-color: rgb(3, 109, 163); */
  background-color: var(--blue-default);
}
.custom-connector .connector-completed:after {
  background-color: rgb(3 109 163 / 50%);
}
.mud-stepper .mud-stepper-content {
  padding: 32px 0px 0px !important;
  min-height: 300px;
  align-items: start;
}
.stepper-btn {
  width: 120px !important;
  padding: 13px 46px !important;
}

/* checkbox component */
.mud-input-control-boolean-input .mud-icon-button{
  border-radius: 0px;
  padding: 0px;
  margin-inline-end: 0px !important;
}
.mud-input-control-boolean-input .mud-checkbox,
.mud-input-control-boolean-input .mud-radio {
  gap: 8px;
}
.checkbox-container-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.mud-collapse-container .checkbox-container-horizontal {
  margin-inline-start: 8px;
}
.mud-checkbox .mud-icon-root.mud-svg-icon {
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 1px solid rgb(3 109 163 / 20%);
  border-radius: 4px;
  box-shadow: inset 4px 4px 8px 0 rgb(3 109 163 / 5%);
  background-color: var(--color-FFF) !important;
  fill: transparent !important;
}
.mud-checkbox:has(.mud-checkbox-true) .mud-icon-root.mud-svg-icon {
  background-color: var(--blue-default) !important;
}
.mud-checkbox .mud-icon-root.mud-svg-icon path {
  fill: transparent !important;
}
.mud-checkbox:has(.mud-checkbox-true) .mud-icon-root.mud-svg-icon path{
  fill: var(--white) !important;
}
.mud-checkbox p,
.mud-radio span.mud-typography-body1 {
  color: var(--blue-dark-70);
}
.mud-checkbox:has(.mud-checkbox-true) p,
.mud-radio:has(.mud-checked) span.mud-typography-body1 {
  color: var(--blue-dark);
}
.circle-checkbox .mud-input-control>.mud-input-control-input-container,
.circle-checkbox .mud-checkbox{
  display: unset;
}
.circle-checkbox .mud-checkbox{
  margin: 0px;
}
.circle-checkbox .mud-icon-button{
  padding: 0px;
}
.circle-checkbox .mud-checkbox .mud-icon-root.mud-svg-icon{
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  border: 1px solid var(--blue-default);
  box-shadow: none;
}

/* radiobox component */
.select-parent-group:has(label) .mud-radio-group {
  padding-top: 8px;
}
.mud-radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.radio-container-horizontal .mud-radio-group{
  flex-direction: row;
}
.mud-radio-content-placement-end.mud-radio-with-content{
  margin-inline: 0px;
}
.mud-radio .mud-icon-root.mud-svg-icon {
  font-size: 1.5rem;
}
.mud-radio-content-placement-end.mud-radio-with-content {
  margin-right: 0px;
}
.mud-icon-button:hover {
  background-color: transparent !important;
}
.mud-radio.mud-disabled, .mud-radio .mud-disabled:focus-visible, .mud-radio .mud-disabled:active{
  opacity: 0.5;
}

/* item list checkbox */
.mud-primary-hover{
  background-color: var(--background-clr-50) !important;
}
.mud-list-item-clickable {
  background-color: var(--white);
}
.mud-list-item-clickable:hover {
  background-color: var(--input-border) !important;
}
.mud-list-item{
  gap: 8px;
}
.mud-list-item.mud-selected-item{
  background-color: transparent !important;
}
.mud-list-item.mud-selected-item:hover{
  background-color: var(--input-border) !important;
}
.mud-list-item .mud-list-item-icon svg{
  width: 24px;
  height: 24px;
  fill: var(--blue-default);
}
.mud-list-item .mud-list-item-text p{
  color: var(--blue-default);
  font-family: "Frutiger LT Arabic", sans-serif;
}
/* Application Page - Profile Page - Add User Page */
.mud-input.mud-disabled,
.mud-select .mud-input.mud-input-filled.mud-disabled{
  background-color: rgba(3, 109, 163, 0.1) !important;
  border: 1px solid var(--input-border);
}
.user-info-container > div:first-child{
  padding: 0px;
  /* padding-inline-end: 32px; */
}
.user-info-container.mud-grid-spacing-xs-8{
  width: 100%;
  margin: 0px;
  gap: 19px;
}
.profile-page .profile-actions {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.profile-page .profile-actions .add-btn{
  min-width: 275px;
}
.upload-img-wrapper{
  background-color: var(--blue-light) !important;
  padding: 0px !important;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  /* max-height: 42vh; */
  /* max-height: 420px; */
}
.application-add .upload-img-wrapper{
  background-color: var(--blue-light) !important;
  padding: 20px !important;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  max-height: unset;
}
.upload-img-container{
  padding: 20px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background-color: transparent;
  position: relative;
  width: 100%;
}
.upload-img-container .mud-input-control.mud-file-upload .mud-button-root.mud-button.mud-button-text.mud-ripple{
  justify-content: center;
}
.upload-img-container .img-preview{
  border: none;
  /* width: 160px;
  height: 160px; */
  object-fit: fill;
  border-radius: 16px;
}
.upload-img-container .img-preview.bordered{
  /* border: 4px solid white; */
  /* width: 100%;
  height: 100%; */
  width: 255px;
  height: 160px;
  object-fit: fill;
}
/* .profile-page .upload-img-container{
  gap: 48px;
} */
.profile-page .upload-img-container .img-preview,
.users-page .upload-img-container .img-preview
{
  width: 270px;
  height: 270px;
  border-radius: 50%;
}
.upload-img-container .mud-input-control.mud-file-upload .mud-button-root.mud-button.mud-button-text.mud-ripple{
  padding-inline: 20px;
  color: var(--blue-default) !important;
  border: 2px solid var(--blue-default);
  border-radius: 32px;
  /* height: 30px; */
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  /* width: 125px; */
  /* background-color: rgba(0,0,0,0.5) !important; */
}
/* .upload-img-container .mud-input-control.mud-file-upload .mud-button-root.mud-button.mud-button-text.mud-ripple:hover{
  background-color: rgba(0,0,0,0.8) !important;
} */
.upload-img-container .mud-input-control.mud-file-upload .mud-button-root.mud-button.mud-button-text.mud-ripple span{
  font-weight: 700;
}
.profile-dialog{
  gap: 16px;
  margin-bottom: 0px;
  background-color: transparent;
}
.profile-dialog > div{
  padding: 0px !important;
}
@media screen and (max-width: 960px) {
  .user-info-container > div:first-child{
    padding-inline-end: 0px;
  }
}
@media screen and (min-width: 960px) and ( max-width: 1280px) {
  .users-page .mud-radio-group {
    gap: 8px;
  }
  .users-page .mud-input-control-boolean-input .mud-radio{
    gap: 2px;
  } 
  .users-page .mud-radio span.mud-typography-body1{
    font-size: 14px;
  }
  .profile-page .upload-img-container .img-preview,
  .users-page .upload-img-container .img-preview
  {
    width: 225px;
    height: 225px;
  }
}
@media screen and (max-width: 600px) {
  .profile-page .upload-img-container .img-preview,
  .users-page .upload-img-container .img-preview
  {
    width: 200px;
    height: 200px;
  }
}
/* Authentication Page */
.custom-background:has(.authentication-page){
  min-height: unset;
  padding: 0px;
  margin-block: 0px !important;
}
.authentication-page{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 86vh;
}
.authentication-page .main-content{
  width: 414px;
  padding: 1rem;
  min-height: 390px;
  /* max-height: 390px; */
}
.authentication-page .form-head-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.authentication-page .form-head-container h4{
  color: var(--blue-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}
.authentication-page .form-head-container .form-setting{
  display: flex;
  align-items: center;
}
.authentication-page .form-head-container .form-setting .switch-parent{
  margin-inline-end: 0px;
  width: 65px;
  z-index: 1;
}
.authentication-page .form-head-container .form-setting .lang-parent{
  border-inline-start: none;
  padding-inline-start: 0px;
  cursor: pointer;
}
.authentication-page .form-body-container{
  display: flex;
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 100%);
  padding: 32px;
  margin-block: 13px 23px;
  flex-direction: column;
  gap: 1rem;
  min-height: 260px;
  /* max-height: 285px; */
  justify-content: space-around;
  align-items: center;
}
.authentication-page .select-parent-group > div {
  flex: none;
  width: 100%;
}
.authentication-page .text-input-with-icon div.mud-input-slot.mud-input-root.mud-input-root-text:not(.mud-select-input){
  display: none !important;
}
.authentication-page .form-body-container .mud-icon-button-edge-end{
  margin: 0px;
  padding: 8px;
}
.authentication-page .form-body-container .mud-icon-button-edge-end svg{
  font-size: 1.125rem;
}
.authentication-page .form-body-container .add-btn{
  min-width: 100%;
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
}
.authentication-page .form-foot-container p{
  font-family: "Frutiger LT Arabic", sans-serif;
  color: var(--blue-dark) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
}
.authentication-page .form-foot-container a{
  color: var(--blue-default) !important;
}

/* Home Page */
/* Tabs Component */
.mud-tab{
  text-transform: unset !important;
}
.mud-tabs-tabbar{
  background-color: transparent;
}
.mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper{
  gap: 24px;
  width: max-content;
  position: inherit;
  display: flex;
  transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1);
  flex-wrap: wrap;
  justify-content: center;
}
.mud-tab, .mud-tab:hover{
  background-color: var(--white);
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 6px 16px;
  border-radius: 100px;
  gap: 10px;
  min-width: unset !important;
  width: auto;
  min-height: 42px;
}
.mud-tab.mud-tab-active, .mud-tab.mud-tab-active:hover{
  background-color: var(--blue-dark);
  color: var(--blue-light);  
}
.home-page .mud-tabs .mud-badge {
  height: 21px !important;
  line-height: 2.5 !important;
}
.mud-tab-badge{
  margin: 0px;
}
.mud-badge, .mud-badge-root, .mud-badge-root .mud-badge-wrapper{
  position: unset;
}
.mud-badge-root .mud-badge-wrapper{
  display: inline-flex;
}
.mud-badge-root .mud-badge-wrapper.mud-badge-top.right{
  align-items: center;
  justify-content: end;  
}
.mud-badge.mud-badge-top.right{
  inset: unset;
  background-color: var(--blue-dark) !important;
  color: var(--white) !important;
}
.mud-tab.mud-tab-active .mud-badge.mud-badge-top.right{
  background-color: var(--blue-light) !important;
  color: var(--blue-dark) !important;
}
.mud-tabs-tabbar-content {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  position: relative;
  white-space: preserve-spaces;
  overflow: hidden;
  display: flex;
  word-break: inherit;
  /* margin-bottom: 24px; */
}
.mud-tabs-scroll-button{
  align-content: center;
  display: none;
}

.system-management-container{
  position: relative;
  margin-block: 24px 16px;
}
.system-management-container .overlay-container{
  height: 160px;
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 100%);
  padding: 8px 16px;
  border: 1px solid var(--white);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.system-management-container .overlay-container .overlay-title{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}
.system-management-container .overlay-container .overlay-title .mud-tooltip-root:not(:first-child){
  max-width: calc(100% - 20px);
}
.system-management-container .overlay-container .overlay-title h4{
  text-overflow: ellipsis;
  overflow: hidden;
}
.system-management-container .overlay-container .mud-icon-button{
  padding: 0px;
  border-radius: 0px;
}
.home-page h3, .home-page h4{
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
}
.home-page h3{
  font-size: 16px;
  line-height: 150%;  
}
.system-management-container .overlay-container path{
  fill: var(--blue-default);  
}
.system-management-container .overlay-container .overlay-title path{
  opacity: 20%;
}
.system-management-container .overlay-container .overlay-title:has(.pinned) path{
  opacity: 100%;
}
.system-management-container .img-container{
  width: calc(100% - 64px);
  position: absolute;
  top: 37px;
  inset-inline: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
body[dir="rtl"] .system-management-container .img-container{
  transform: translateX(50%);
}
.system-management-container .img-container img{
  width: 100%;
  height: 160px;
  object-fit: fill;
  border-radius: 16px;
}
.system-management-container .img-container span{
  position: absolute;
  bottom: 2px;
  inset-inline-end: 2px;
  background: rgba(8, 48, 106, 0.5);
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  border-radius: 24px;
  display: inline-block;
  padding: 3px 8px;
  white-space: nowrap;
}
.personal-icon{
  background: rgba(6, 78, 134, 1);
  width: 21px;
  height: 21px;
  border-radius: 50px;
  padding: 5px;
}
.home-main-sections{
  margin-top: 24px;
}
/* Weather Section */
.home-section-overlay, .weather-today-main{
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 100%);
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  height: 100%;
  /* height: 222px; */
}
.weather-info-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.weather-info-container .weather-today-main{  
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.weather-info-container .weather-today-main img{
  width: 70px;
  height: auto;
}
.weather-info-container .weather-state{
  text-align: center;
}
[data-theme="dark"] .weather-today-main{
  background: white;
}
.weather-info-container .weather-state p{
  color: rgb(8, 48, 106);
  font-size: 48px;
  font-weight: 800;
  line-height: 64px;
}
[data-theme="dark"] .weather-info-container .weather-state p{
  color: rgb(3, 109, 163);
}
.weather-info-container .weather-state sup{
  font-size: 21px;
  font-weight: 400;
  top: 0px;
  vertical-align: super;
}
.weather-info-container .weather-state span{
  color: rgba(8 48 106 / 50%);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.weather-info-container .weather-today-details{
  display: flex;  
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.weather-info-container .weather-today-extra-info{
  display: flex;
  align-items: end;
  gap: 5px;
}
.weather-info-container .weather-today-extra-info .weather-icon{
  background: var(--blue-light);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.weather-info-container .weather-today-extra-info .weather-icon svg{
  width: 22px;
  height: 26px;
}
.weather-info-container .weather-today-extra-info .weather-icon path{
  fill: var(--blue-navy);
}
.weather-info-container .weather-today-extra-info .weather-text p{
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 0px;
}
.weather-info-container .weather-today-extra-info .weather-text p span{
  font-size: 10px;
  font-weight: 400;
}
.weather-info-container .weather-today-extra-info .weather-text > span{
  color: rgba(8, 48, 106, 0.5);
  font-size: 10px;
  font-weight: 400;  
}
[data-theme="dark"] .weather-info-container .weather-today-extra-info .weather-text span{
  color: rgba(230, 242, 248, 0.5);
}
/* Calendar */
.calendar-convert-container{
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.calendar-convert-container *{
  overflow: visible;
}
.calendar-convert-container .calendar-details{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.calendar-convert-container .calendar-details h4:first-child{
  margin-bottom: 8px;
}
.calendar-convert-container .calendar-details h4:last-child{
  margin-top: 4px;
}
.home-section-overlay .mud-toggle-group{
  background-color: var(--white) !important;
  border: 1px solid var(--white) !important;
  border-radius: 16px !important;
  display: inline-flex;
  width: min-content;
}
.home-section-overlay .mud-toggle-group .mud-button-filled.mud-button-filled-primary{  
  margin: 0px;
  width: auto;
  border: none;
}
.home-section-overlay .mud-toggle-group .mud-button{
  padding: 2px 12px;
  border-radius: 16px !important;
  justify-content: center;
  align-items: center;
  height: 28px;
  /* line-height: unset; */
}
.home-section-overlay .mud-toggle-group .mud-button:hover{
  background-color: transparent;
}
.home-section-overlay .mud-toggle-group-horizontal:not(.mud-toggle-group-rtl)>.mud-toggle-item:not(:first-child).mud-toggle-item-delimiter{
  border: none !important;
}
.home-section-overlay .mud-toggle-group .mud-button .mud-button-label{
  color: var(--blue-navy);
  font-size: 12px;
  opacity: 50%;
}
.home-section-overlay .mud-toggle-group .mud-toggle-item-selected .mud-button-label{
  color: var(--white) !important;
  opacity: 100%;
}
.calendar-convert-container .calendar-details .calendar-view{
  background-color: var(--white);
  padding: 6px 8px;
  border: 1px solid white;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .calendar-convert-container .calendar-details .calendar-view{
  border: 1px solid rgba(8, 48, 106, 0.5);
}
.calendar-convert-container .calendar-details .calendar-view span{
  color: var(--Color-999999);
  font-size: 10px;
}
[data-theme="dark"] .calendar-convert-container .calendar-details .calendar-view span{
  color: var(--Color-999999);
}
.home-section-overlay .add-btn.success{
  padding: 2px 18px;
  height: 32px;
  width: auto;
  min-width: 150px;
}
.home-section-overlay .add-btn.success .mud-button-label{
  white-space: nowrap;
}
.calendar-convert-container .mud-picker .mud-paper{
  --mud-palette-surface: none !important;
}
.calendar-convert-container .mud-picker-container .mud-toolbar{
  display: none;
}
.calendar-convert-container .mud-picker-content{
  min-height: auto;
  align-items: center;
}
.calendar-convert-container .mud-picker-calendar-header-switch{
  background-color: var(--white);
  padding: 0px 4px;
  border-radius: 8px;
  /* width: 91%;   */
  margin: auto;
  margin-bottom: 6px;
  gap: 8px;
}
.calendar-convert-container .mud-picker-calendar-header-switch>.mud-icon-button{
  margin: 0px;
  padding: 0px;
  width: 26px;
  height: 26px;
  background-color: var(--background-clr-50);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-convert-container .mud-picker-calendar-header-switch .mud-icon-root.mud-svg-icon{
  fill: var(--blue-navy) !important;
}
.calendar-convert-container .mud-picker-calendar-header-switch .mud-picker-calendar-header-transition{
  height: 28px;
}
.calendar-convert-container .mud-picker-calendar-header-switch p{
  color: var(--blue-navy);
  background-color: var(--background-clr-50);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;  
}
.calendar-convert-container .mud-picker-calendar-header-day{
  /* justify-content: space-between; */
  gap: 6px;
  margin-top: 7px;  
}
.calendar-convert-container .mud-picker-calendar-header-day .mud-day-label{
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 8px;
  font-size: 9px;
  line-height: 15px;
  padding: 2px;
  margin: 0px;
  width: 35px;
  height: 23px;
  font-family: "Frutiger LT Arabic", sans-serif;
}
.calendar-convert-container .mud-picker-calendar-transition{
  margin-top: 6px;
  min-height: 143px;
}
.calendar-convert-container .mud-picker-calendar{
  gap: 1px 6px;
  /* overflow: auto !important; */
  /* max-height: 100%; */
}
.calendar-convert-container .mud-picker-calendar .mud-day{
  background-color: var(--white);
  color: var(--color-999);
  border-radius: 8px;
  margin: 0px;
  width: 39px;
  height: 23px;
}
.calendar-convert-container .mud-picker-calendar .mud-day.mud-selected:hover{
  background-color: rgb(6, 78, 134) !important;
}
.calendar-convert-container .mud-picker-calendar .mud-day p{
  font-size: 12px;
  font-weight: 400;
}
.calendar-convert-container .mud-picker-month-container .mud-picker-month{
  height: auto;
  padding-block: 7px;
}
.calendar-convert-container .mud-picker-month-container .mud-picker-month:hover,
.calendar-convert-container .mud-picker-year-container .mud-picker-year:hover{
  background-color: var(--background-clr);
}
.calendar-convert-container .mud-picker-month-container .mud-picker-month .mud-picker-month-selected,
.calendar-convert-container .mud-picker-year-container .mud-picker-year .mud-picker-year-selected,
.calendar-convert-container .mud-picker-month-container .mud-picker-month:has(.mud-picker-month-selected),
.calendar-convert-container .mud-picker-year-container .mud-picker-year:has(.mud-picker-year-selected){
  font-family: "Frutiger LT Arabic", sans-serif;
  font-size: 16px;
  color: var(--blue-default) !important;
  background-color: var(--background-clr);
}
.calendar-convert-container .mud-picker-year-container{
  height: 200px;
  overflow-y: auto;
}
.home-main-sections .mud-ripple::after{
  display: none !important;
}
button.mud-day.first-of-month {
  position: relative;
  cursor: pointer;
  overflow: unset !important;
  background-color: var(--blue-light) !important;
}
button.mud-day.first-of-month::after {
  content:'بداية الشهر';
  position: absolute;
  bottom: 142%; 
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--blue-navy);
  color: var(--blue-light);
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 10;
  display: unset !important;
  width: unset !important;
  height: unset !important;
  top: unset !important;
  background-image: unset !important;
  font-family: "Frutiger LT Arabic", sans-serif !important;
}
:dir(ltr) button.mud-day.first-of-month::after {
 content: 'start of the month';
 text-transform: capitalize;
}
button.mud-day.first-of-month::before {
  content: '';
  position: absolute;
  bottom: 90%;
  left: 32%;
  transform: scale(1.5);
  border-width: 6px;
  border-style: solid;
  border-color: var(--blue-navy) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 10;
  border-radius: 100%;
}
button.mud-day.first-of-month:hover::after,
button.mud-day.first-of-month:hover::before {
  opacity: 1;
  visibility: visible;
}
/* Payer Time Section */
.prayer-time-container{
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 20%), var(--bg-prayer) no-repeat 100% / contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body[dir="ltr"] .prayer-time-container{
  background: linear-gradient(180deg, var(--card-linear-00) 0%, var(--card-linear-100) 20%), url("../../imgs/home/pray-dark-bg-en.png") no-repeat 100% / contain;
}
body[dir="rtl"] .prayer-time-container{
  background-position:  0%;
}
.home-section-overlay p{
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  font-family: 'Frutiger LT Arabic';
}
.prayer-time-container p, .currency-convert-container p:not(.currency-convert-container .currency-convert-result p){
  opacity: 70%;
}
.prayer-time-container .prayer-times{
  background-color: var(--card-linear-00);  
  border: 1px solid var(--white);
  border-radius: 16px;
  display: flex;
  justify-content: space-around;
  max-height: 100px;
}
.prayer-time-container .prayer-details{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-inline: 4px;
  min-width: calc(100% / 5);
  border-inline-end: 1px solid #F4F3F7;
  margin-block: 20px;
}
[data-theme="dark"] .prayer-time-container .prayer-details{
  border-inline-end: 1px solid rgba(3, 109, 163, 1);
}
.prayer-time-container .prayer-details:last-child{
  border-inline-end: none;
}
.prayer-time-container .prayer-details h5{
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;  
}
.prayer-time-container .prayer-details h4{
  color: var(--blue-dark);
}
.prayer-time-container .prayer-details .prayer-rest-time p{
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  opacity: 50%;
}
.prayer-time-container .prayer-details .prayer-rest-time{
  display: none;
}
.prayer-time-container .prayer-details.active{
  min-height: 113px;
  gap: 2px;
  margin-block: 0px;  
  background: var(--bg-prayer-active), linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-default) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 16px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}
.prayer-time-container .prayer-details.active h5, .prayer-time-container .prayer-details.active h4, .prayer-time-container .prayer-details.active p{
  color: var(--blue-light);
}
.prayer-time-container .prayer-details.active  .prayer-rest-time{
  display: block;
}
@media screen and (max-width: 1400px) {
  .prayer-time-container .prayer-times{
    margin-bottom: 16px;
  }
}
/* Clock Section */
.clock-container h4{
  margin-bottom: 16px;
}
.clock-container .analog-digital-clock{
  display: flex;
  justify-content: space-between;
  align-items: center;  
  gap: 16px;
}
.clock-container .digital-clock{
  display: flex;
  flex-direction: column; 
  margin-top: 5px; 
}
.clock-container .digital-clock h2{
  font-family: 'DS-Digital' !important;
  color: var(--blue-dark);
  font-size: 64px;
  font-weight: 700;
  /* line-height: 64px; */
    margin-top: -6px;
    max-height: 65px;
}
.clock-container .digital-clock p{
  font-size: 14px;
}
/* :dir(ltr) .clock-container .digital-clock p{
  line-break: anywhere;
  text-wrap-style:balance;
} */
.clock-container .analog-clock{
  min-width: 100px;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../imgs/home/clock-bg.png);
  background-size: cover;  
  border-radius: 50%;
  box-shadow: 6px 6px 16px 0 var(--blue-light), -6px -6px 16px 0 var(--white), inset 6px 6px 16px 0 var(--blue-light), inset -6px -6px 16px 0 var(--white);
  position: relative;
}
[data-theme="dark"] .clock-container .analog-clock{
  background: url(../../imgs/home/clock-dark-bg.png);
  background-size: cover;  
}
.clock-container .analog-clock:before{
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--blue-default);
  border-radius: 50%;
  border: 1px solid var(--blue-light);
  z-index: 1000;
}
.clock-container .analog-clock .hour,
.clock-container .analog-clock .min,
.clock-container .analog-clock .sec{
  position: absolute
}
.clock-container .analog-clock .hour, .hr{
  width: 57px;
  height: 57px;
}
.clock-container .analog-clock .min, .mn{
  width: 57px;
  height: 77px;
}
.clock-container .analog-clock .sec, .se{
  width: 57px;
  height: 87px;
}
.clock-container .analog-clock .hr, .mn, .se{
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
}
.clock-container .analog-clock .hr:before{
  content: '';
  position: absolute;
  width: 3px;
  height: 30px;
  background: var(--blue-navy);
  border-radius: 16px 16px 0 0;
  z-index: 10;
  opacity: 80%;
}
.clock-container .analog-clock .mn:before{
  content: '';
  position: absolute;
  width: 3px;
  height: 40px;
  background: var(--blue-navy);
  border-radius: 16px 16px 0 0;
  z-index: 11;
  opacity: 80%;
}
.clock-container .analog-clock .se:before{
  content: '';
  position: absolute;
  width: 1px;
  height: 42px;
  background: var(--blue-default);
  z-index: 8;
  border-radius: 16px 16px 0 0;
  opacity: 80%;
}
[data-theme="dark"] .clock-container .analog-clock .hr:before,
[data-theme="dark"] .clock-container .analog-clock .mn:before,
[data-theme="dark"] .clock-container .analog-clock .se:before{
  opacity: 50%;
}
/* Calculator Section */
.calculator-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  /* padding: 10px; */
}
.calculator-container .mud-grid-item-xs-2{
  max-width: calc(100% / 12* 2.4);
  flex-basis: calc(100% / 12* 2.4);
}
.calculator-title {
  display: flex;
  align-items: center;
  gap: 16px;  
}
.calculator-container .mud-input{
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background-color: var(--white);  
  border: 0 !important;
  outline: 0 !important;
  border: 1px solid var(--input-border) !important;
  box-shadow: 4px 4px 8px 0px rgba(3, 109, 163, 0.05) inset;  
}
.calculator-container .mud-input > input.mud-input-root{
  color: var(--blue-dark-30) !important;
  font-family: 'Digital Numbers', sans-serif !important;
  direction: ltr;
  text-align: right;
}
/* :dir(rtl) .calculator-container .mud-input > input.mud-input-root{
  direction: ltr;
  text-align: right;
} */
:dir(ltr) .calculator-container .mud-input > input.mud-input-root{
  direction: unset;
  text-align: unset;
}
.home-section-overlay .mud-input.mud-input-underline:after{
  display: none;
}
.calculator-container .mud-button{
  background-color: var(--white);
  color: var(--blue-dark);
  height: 34.5px;
  min-width: unset;
  border: 1px solid var(--white);
  border-radius: 16px;
  box-shadow: inset 4px 4px 8px 0px rgba(3, 109, 163, 0.05), inset -4px -4px 8px 0px rgba(255, 255, 255, 1), 0 3px 6px rgba(6, 78, 134, 0.07);
}
[data-theme="dark"] .calculator-container .mud-button{  
  border: 1px solid rgba(8, 48, 106, 0.1);
  box-shadow: inset 4px 4px 8px 0px rgba(8, 48, 106, 0.35), inset -4px -4px 8px 0px rgba(8, 48, 106, 0.2), 0 3px 6px rgba(8, 48, 106, 0.3);
}
.calculator-container .mud-button.numbers{  
  border: 1px solid rgba(3, 109, 163, 0.05);
  box-shadow: inset 4px 4px 8px 0px rgba(3, 109, 163, 0.05), 0 3px 6px rgba(6, 78, 134, 0.07);
}
[data-theme="dark"] .calculator-container .mud-button.numbers{
  background-color: rgba(3, 109, 163, 1);
  border: 1px solid rgba(8, 48, 106, 0.05);
  box-shadow: inset 4px 4px 8px 0px rgba(8, 48, 106, 0.2), 0 3px 6px rgba(8, 48, 106, 0.2);
}
.calculator-container .mud-button:hover{
  background-color: var(--white);
}
.calculator-container .mud-button .mud-button-label{
  font-size: 16px;
  font-weight: normal;
}
.calculator-container .mud-button path{
  fill: var(--blue-dark);
}
/* Currency Section */
.currency-convert-container, .currency-convert-container form{
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 16px !important;
  height: 100%;
}
.currency-convert-container .currency-convert-result p{
  color: var(--blue-dark-70);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
.currency-convert-container .currency-converter{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.currency-convert-container .currency-converter .currency-text-group{
  display: flex;
  gap: 1px;
  width: 50%;
}
.currency-convert-container .currency-converter .currency-text-group .mud-input-control{
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0px;
  border-end-start-radius: 100px;
  border-start-start-radius: 100px;
}
.currency-convert-container .currency-converter .currency-text-group input{
  padding: 0px;
  margin: 6px 12px 7px;
  padding-inline-end: 0 !important;
}
.currency-convert-container .currency-converter .currency-text-group .mud-button-root{
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0px;
  border-start-end-radius: 100px;
  border-end-end-radius: 100px;
}
.currency-convert-container .currency-converter .currency-text-group .mud-input-numeric-spin button{
  display: none;
}
[data-theme="dark"] .currency-convert-container .currency-converter .currency-text-group .mud-input-control,
[data-theme="dark"] .currency-convert-container .currency-converter .currency-text-group .mud-button-root{
  border: 1px solid rgba(8, 48, 106, 0.5);
}
.currency-convert-container .currency-converter .currency-text-group .mud-button-label{
  color: var(--color-999);
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.currency-convert-container .currency-converter .currency-text-group .mud-button-root svg{
  width: 11px;
  height: 18px;
}
.currency-convert-container .currency-converter .currency-text-group .mud-button-root path{
  fill: var(--color-999);
}
.currency-convert-container .currency-convert-result{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.currency-convert-container .currency-convert-result p{
  color: var(--blue-dark);
}
.currency-convert-container .currency-convert-result .outline-success{
  background-color: var(--white) !important;
  color: var(--blue-default) !important;
  border: 1px solid var(--blue-default) !important;
  border-radius: 100px;
  padding: 2px 8px;
  width: auto;
  min-width: 80px;
}
.currency-convert-container .currency-convert-result .mud-button path{
  fill: var(--blue-default);
}
@media (max-width: 1024px) {
  .home-main-sections .mud-grid-item-md-6{
    max-width: calc(100% / 12* 12);
    flex-basis: calc(100% / 12* 12);
  }
}
/* @media (min-width: 1280px) {
  .home-main-sections .mud-grid-item-lg-4,
  .home-main-sections .mud-grid-item-lg-3{
    max-width: calc(100% / 12* 6);
    flex-basis: calc(100% / 12* 6);
  }
} */
@media (min-width: 1280px) {
  .home-main-sections .mud-grid-item-lg-3{
    max-width: calc(100% / 12* 3);
    flex-basis: calc(100% / 12* 3);
  }
  .home-main-sections .mud-grid-item-lg-4{
    max-width: calc(100% / 12* 4.5);
    flex-basis: calc(100% / 12* 4.5);
  }  
}
@media screen and (max-width: 575px) {
  .calendar-convert-container,
  .currency-convert-container .currency-converter{
    flex-direction: column;
  }
  .currency-convert-container .currency-converter{
    align-items: self-start;
  }
  .currency-convert-container .currency-converter .currency-text-group,
  .currency-convert-container .currency-converter .add-btn.success{
    width: 100%;
  }
}

/* SNACKBAR */
.mud-snackbar {
  border-radius: 8px;
  align-items: start;
}
.mud-snackbar .mud-snackbar-icon {
  display: none;
}
.mud-snackbar .mud-button-root {
  color: #5e6778;
}
.mud-snackbar .mud-snackbar-content-message {
  position: relative;
  padding-inline-start: 16px;
}
.mud-snackbar .mud-snackbar-content-message::before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0px;
  inset-inline-start: -8px;
  border-radius: 8px;
}
.mud-snackbar .mud-snackbar-content-message h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.4px;
}
.mud-snackbar .mud-snackbar-content-message p {
  color: #5e6778;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
}

/* Tooltip */
.mud-tooltip.mud-tooltip-default{
  background: var(--white);
  color: var(--blue-navy);
  border: 1px solid var(--blue-navy);
}
/* .mud-tooltip.mud-tooltip-bottom-center:not([data-mudpopover-flip]),
.mud-tooltip.mud-tooltip-top-center:not([data-mudpopover-flip]),
.mud-tooltip.mud-tooltip-bottom-center[data-mudpopover-flip],
.mud-tooltip.mud-tooltip-top-center[data-mudpopover-flip]{
  transform: translateY(0px);
}
@media screen and (max-width: 1200px) {
  .mud-tooltip.mud-tooltip-bottom-center:not([data-mudpopover-flip]),
  .mud-tooltip.mud-tooltip-top-center:not([data-mudpopover-flip]),
  .mud-tooltip.mud-tooltip-bottom-center[data-mudpopover-flip],
  .mud-tooltip.mud-tooltip-top-center[data-mudpopover-flip]{
    transform: translateY(-25px);
  }
} */

/* ANIMATIONS */
.zoom-animation {
  animation: backdrop-zoom-in-out 0.5s linear;
  transition: animation 0.5s linear;
}
@keyframes backdrop-zoom-in-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}
/* new sama */
.set-line{
  margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.mud-card-actions {
  padding:0;
}
/* :dir(ltr) .name-lang-placement{
  display: flex;
} */

:dir(ltr) .name-lang-placement-2 {
  order: -1;
}

:dir(ltr) .name-lang-placement-1 {
  order: 0;
}
/* .mud-input-control.mud-file-upload{
  position: absolute;
  bottom: -40px;
} */
.add-templates .mud-input-control.mud-file-upload{
  position: unset;
}
.application-add .third-step-uploader .mud-input-control.mud-file-upload{
  position: unset;
}
@media (min-width: 960px) {
  /* .upload-img-wrapper {
      flex-grow: 0;
      max-width: calc(95% / 12 * 4);
      flex-basis: calc(100% / 12 * 4);
      margin: 0 auto;
      margin-inline-start: 20px;
  } */
  .upload-img-wrapper {
    flex-grow: 0;
    max-width: calc(93% / 12 * 4);
    flex-basis: calc(100% / 12 * 4);
    margin: 0 auto;
    /* margin-inline-start: 32px; */
    margin-right: auto;
    margin-left: 0;
}
:dir(ltr) .upload-img-wrapper {
    margin-left: auto;
    margin-right: 0;
}
}
.mud-tooltip-root.mud-tooltip-inline {
  display: flex;
}
.mud-table-hover.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd):hover {
  background-color: var(--white);
}
.mud-table-hover.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd):nth-of-type(odd):hover {
  background-color: var(--white); 
}
.application-add .mud-stepper .mud-stepper-content {
  margin-bottom: 1.7rem;
}
.mud-stepper-nav {
  padding-bottom: 32px;
  border-bottom-color: #ffffff;
  box-shadow: 0px 1px 0px 0px rgba(6, 78, 134, 0.2);
  overflow: hidden;
}
.border-b {
  border-bottom-width: 1px !important;
}

.mud-card-header{
  display: none !important;
}
.mud-paper {
  background-color: transparent !important;
  text-align: center;
}
.unautherized-page{
  width: 66.66%;
  margin-inline: auto;
  margin-top: 8.5rem;
  background-color: var(--color-FFF) !important;
}
[data-theme="light"] .unautherized-page {
  background-color: transparent !important;
}
.unautherized-page .error-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.unautherized-page .error-content .mud-image {
  width: 50%;
  height: 50%;
  display: inline-block;
  padding: 0 22px 22px;
}
.unautherized-page .error-content h2 {
  font-family: 'Frutiger LT Arabic', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
  color: #08306a;
}
.unautherized-page .error-content .mud-typography-subtitle1 {
  font-family: 'Frutiger LT Arabic', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 21px;
  color: #036da3;
  margin-block: 10px 8px;
}
.unautherized-page .error-content .mud-typography-body2 {
  font-family: 'Frutiger LT Arabic', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #5e6778;
}
.unautherized-page .error-content a {
  font-family: 'Frutiger LT Arabic', sans-serif;
  color: #036da3 !important;
}
@media screen and (max-width: 960px) {
  .unautherized-page{
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .unautherized-page .error-content .mud-image {
    width: 90%;
    height: 90%;
  }
  
}
.mud-toggle-group-horizontal.mud-toggle-group-rtl>.mud-toggle-item:not(:last-child).mud-toggle-item-delimiter, .mud-toggle-group-horizontal.mud-toggle-group-rtl>:not(:last-child) .mud-toggle-item.mud-toggle-item-delimiter {
  border-left-style: unset !important;
}
:dir(ltr) .table-icons-div > div:not(:nth-child(4), :has(.mud-input-control-boolean-input)),
:dir(ltr) .srch-parent-form span,
:dir(ltr) .collapse-chiled-child svg,
:dir(ltr) .overlay-icons button:not(.info-icon) span{
  transform: rotateY(180deg) !important;
}
.close-icon{
  position: absolute;
  left: 2.5%;
  top: 7px;
  color: var(--color-999);
  font-size: 1.25rem;
  width: 24px;
  height: 24px;
  display: inline-block;
  cursor: pointer;
}
:dir(ltr) .close-icon{
  left: unset;
  right: 2.5%;
}
.mud-input-number-control.mud-input-showspin{
  position: relative;
}
.close-icon.min-value{
    font-size: 14px;
    left: 9%;
    top: 35px;
    /* background-color: rgb(3, 109, 163); */
    width: unset;
    /* height: 29px; */
    border-radius: 4px;
    color: var(--blue-dark-70);
}
.attachment-app-btn{
  height: auto !important;
  display: flex;
  justify-content: end !important;
  align-items: end !important;
}
/* [theme="dark"] .close-icon.min-value{
  top: 37px;
} */
:dir(ltr) .close-icon.min-value{
  left: unset;
  right: 9%;
}
.json-icon-class{
  width: 25px;
}
[data-theme="dark"] .json-icon-class{
  filter: brightness(0) invert(1);
}
.img-preview {
  margin-top: unset;
  max-width: 100%;
  max-height: 270px;
}
.authentication-page .form-foot-container a{
  transition: all 0.2s ease-in-out;
  text-decoration: none !important;
}
.authentication-page .form-foot-container a:hover {
  border-bottom: 1.5px solid var(--blue-default);
}

.first-day-of-month {
    background-color: #e0f7fa !important;
    border: 2px solid #0288d1;
    border-radius: 50%;
}
.grid-child{
  width: 100% !important;
  padding: 0px !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr 1fr;
}
.mud-table-page-number-information{
  display: none !important;
}
.mud-table-pagination-information{
  direction: rtl;
}
:dir(ltr) .mud-table-pagination-information{
  direction: ltr;
}
.mud-table-pagination-caption{
  padding: 0 !important;
  padding-inline-end: 10px !important;
}
.auth-dialog .mud-switch-base {
  padding: 9px;
}
.auth-dialog .mud-switch-span-medium.mud-switch-span{
  opacity: 1 !important;
}
.auth-dialog .mud-input-control.mud-input-control-boolean-input.custom-switch{
    margin-inline-start: 5px;
    width: unset !important;
    /* margin-inline-end: -30px; */
}
.auth-dialog .mud-input-control.mud-input-control-boolean-input.custom-switch .mud-switch,
.auth-dialog label{
    margin: 0px !important;
}
.auth-dialog .mud-dialog-title,
.auth-dialog-verf .mud-dialog-title,
.change-pass-dialog-pg .mud-dialog-title{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.auth-dialog-verf .select-parent-group > div {
  display: unset;
  padding: 10px;
}
.auth-dialog .mud-switch-button .mud-switch-thumb-medium{
  background-color: var(--color-FFF);
}
.change-pass-dialog-pg .select-parent-group{
  background: unset;
  border: unset !important;
  box-shadow: unset !important;
}
.fotter-web-icon svg{
  width: 13px;
  height: 13px;
}
.main-content:not(.main-content.add-edit-page)> form .select-parent-group {
  margin-bottom: 16px !important;
}
/* .mud-grid-spacing-xs-6 {
  width: calc(100% + 16px) !important;
}
:dir(ltr) .mud-grid-spacing-xs-6 {
  width: calc(100% + 32px) !important;
} */
@media (min-width: 1280px) and (max-width: 1400px) {
  .calendar-convert-container{
  gap: 0px;
  }
  .mud-picker-static
 {
    transform: scalex(0.85);
    transform-origin: left;
    margin-inline-start: -40px;
}
:dir(ltr) .mud-picker-static
 {
    transform-origin: right;
    /* margin-inline-start: -8px; */
}
/* .clock-container .digital-clock h2
 {
    font-family: 'DS-Digital' !important;
    color: var(--blue-dark);
    font-size: 60px;
    font-weight: 700;
    margin-top: -10px;
    max-height: 60px;
}
.clock-container .digital-clock p {
    font-size: 14px;
    width: 100%;
    display: block;
    white-space: pre-line;
    line-height: 1.6;
} */
.clock-container .analog-clock {
    transform: scale(0.9);
    margin-inline-start: -30px;
    margin-block-end: 50px;
}
}
.border-b{
  padding-bottom: 32px;
  border-bottom-color: var(--white);
  box-shadow: 0px 1px 0px 0px rgba(6, 78, 134, 0.2);
  overflow: hidden;
  border-radius: 0;
}
.table-top-space{
  margin-top: 16px;
}
.add-templates .uploader-container-overlay .mud-icon-button {
  padding: 12px 15px;
}
.mud-radio.mud-disabled *{
  color: var(--blue-dark) !important;
}
.application-add .table-top-space .mud-button{
  min-width: unset !important;
  padding: 0px !important;
}
.twiter-icon-resize{
    width:13px !important;
    height:18px !important
}
/* .mud-nav-link:focus,
.mud-nav-link:focus-visible,
.mud-nav-link:focus-within,
.mud-nav-link:focus-visible-within,
.mud-nav-link:focus-within-visible, 
.mud-nav-link:active,
.mud-nav-link:active-visible,
.mud-nav-link:active-within,
.mud-nav-link:active-visible-within,
.mud-nav-link:target,
.mud-nav-link:target-visible,
.mud-nav-link:target-within,
.mud-nav-link:target-visible-within,
.mud-nav-link:target-within-visible
.mud-nav-link:visited,
.mud-nav-link:visited-visible,
.mud-nav-link:visited-within,
.mud-nav-link:visited-visible-within,
.mud-nav-link:visited-within-visible,
a::file-selector-button,
a::-webkit-file-upload-button,
a::-moz-focus-inner,
a::-moz-focusring,
a::-webkit-focus-outer
 {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}
a:focus-visible {
  outline: none;
  background: unset !important;
  background-color: unset !important;
}
@media (hover: hover) and (pointer: fine) {
  .mud-nav-link:hover:not(.mud-nav-link-disabled) {
      cursor: pointer;
      text-decoration: none;
      background-color: unset !important;
  }
} */
.mud-nav-link:focus:not(.mud-nav-link-disabled) {
  background-color: unset !important;
}
@media (hover: hover) and (pointer: fine) {
  .mud-nav-link:hover:not(.mud-nav-link-disabled) {
      cursor: pointer;
      text-decoration: none;
      background-color: unset !important;
  }
}
/* .add-edit-page .pt-4,
.add-edit-page .gap-x-8{
  padding-top: 32px !important;
} */
.time-am-pm{
  font-family: "Frutiger LT Arabic", sans-serif !important;
  font-size: 34px !important;
  margin: 0 5px;
}
:dir(ltr) .time-am-pm{
  font-family:  'DS-Digital' !important;
}
.mud-main-content{
  padding-top: 0px !important;
}
.mud-layout {
  height: unset !important;
  width: unset !important;
  position: unset !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
}
/* body:has(.home-page) .main-footer,
body:has(.authentication-page) .main-footer,
body:has(.add-templates) .main-footer
{
  position: fixed;
  bottom: 0;
  width: 100%
} */
/* @media (max-width: 1440px) {
  body:has(.home-page) .main-footer{
    position: unset;
    bottom: 0;
    width: 100%
  }
}
@media (max-width: 1600px) {
  body:has(.add-templates) .main-footer{
    position: unset;
    bottom: 0;
    width: 100%
  }
} */
body:has(.home-page) .breadcrumbs{
  padding-top: 35px !important;
}
body:has(.visible-tabs) .breadcrumbs{
  padding-top: 120px !important;
}
body:has(.visible-tabs) .main-footer
{
  position: unset;
}
.mud-tooltip-root.mud-tooltip-inline button[disabled] {
  opacity: .5 !important;
}
.calendar-details  .mud-button {
  width: 100% !important;
}
.calendar-details .mud-toggle-group{
  width: unset !important;
  justify-content: center;
  align-items: center;
}
.settings-dialog-page.mud-dialog .mud-dialog-title .mud-button-close {
  display: none ;
}
.settings-dialog-page.mud-dialog .mud-dialog-title{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.settings-dialog-page.mud-dialog .mud-dialog-title .mud-button{
  width: unset;
  min-width: unset;
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
}
.collapse-chiled-child div span{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .srch-parent-form .mud-input-slot.mud-input-root.mud-input-root-text:nth-child(2){
  display: flex !important;
  align-items: center !important;
  justify-content: end !important;
  padding-inline: 0 !important;
  max-width: 41px;
    text-align: end;
    margin-left: 0;
    margin-right: auto;
} */
.text-input-with-icon div.mud-input-slot.mud-input-root.mud-input-root-text:not(.mud-select-input){
  display: flex !important;
  align-items: center !important;
  justify-content: end !important;
  padding-inline: 0 !important;
  max-width: 41px;
  text-align: end;
  margin-left: 0;
  margin-right: auto;
}
:dir(ltr) .text-input-with-icon div.mud-input-slot.mud-input-root.mud-input-root-text:not(.mud-select-input){
  margin-left: auto;
  margin-right: 0;
}
.add-edit-page.application-add .select-parent-group,
.user-info-container.mud-grid-spacing-xs-8 .select-parent-group {
  /* padding: 1rem; */
  margin-bottom: unset;
}
.add-edit-page.profile-page .select-parent-group:nth-of-type(1){
margin-bottom: 1rem;
}
.clock-container .digital-clock h2 {
    font-family: 'DS-Digital', "Frutiger LT Arabic", sans-serif !important;
}
/* .mud-dialog-content div.mud-input-slot.mud-input-root.mud-input-root-text.mud-input-root-adorned-end{
  display: block !important;
  margin-inline-end: 5px;
  text-align: end;
} */
/* .add-edit-domain .mud-icon-button {
  padding:0px;
  margin-inline-end: 12px;
} */
.add-edit-domain .select-parent-group.step-two {
  margin-bottom: unset;
  margin-block: 2rem;
}
.add-edit-domain .checkbox-container-horizontal{
  margin-top: 5px;
}
.mud-dialog-title,
.mud-dialog-title .mud-typography.mud-typography-h6 {
  color: var(--blue-default) !important;
}
.toast-container {
  width: -webkit-auto !important;
  width: -moz-auto !important;
  width: auto !important;
}
.overlay-icons{
    display: flex;
    align-items: start;
    /* gap: 8px; */
    justify-content: end;
    /* overflow: hidden; */
    width: auto;
}
.overlay-icons .info-icon svg{
  width: 24px !important;
  height: 24px !important;
  margin-inline-end: 8px;
}
:dir(ltr) .overlay-icons .info-icon svg{
  margin-inline-end: unset;
}
.profile-dialog .mud-switch-span .mud-switch-track {
  width: 35px !important;
  height: 15px !important;
}
.application-add .mud-file-upload .mud-button-label > div{
  color: rgb(182 192 211) !important;
  /* -webkit-text-fill-color: var(--blue-default) !important; */
}
body[data-theme="dark"] .application-add .mud-file-upload .mud-button-label > div{
  color: rgb(80 125 167) !important;
  /* -webkit-text-fill-color: var(--blue-default) !important; */
}
.add-templates .mud-file-upload .mud-button-label > div{
  color: rgb(182 192 211) !important;
  /* -webkit-text-fill-color: var(--blue-default) !important; */
}
body[data-theme="dark"] .add-templates .mud-file-upload .mud-button-label > div{
  color: rgb(80 125 167) !important;
  /* -webkit-text-fill-color: var(--blue-default) !important; */
}
.social-media-fields label{
  text-transform: capitalize;
  margin-bottom: 5px;
}
.users-page .select-parent-group .mud-input-control{
  width: auto;
}
.users-page .mud-stepper-content .checkbox-container-horizontal{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 50px;
}
.select-parent-group-login .srch-parent-form div.mud-input-slot.mud-input-root.mud-input-root-text:not(.mud-select-input){
  display: none !important;
}
.mud-snackbar .mud-snackbar-content-action>button{
  color: #5e6778 !important;
}
.mud-snackbar .mud-snackbar-content-action>button svg {
  fill: var(--blue-default) !important;
}
.mud-icon-root.mud-svg-icon {
    fill: var(--blue-default) !important;
}
.mud-list-item.mud-list-item-clickable .mud-icon-root.mud-svg-icon{
  fill: currentColor !important; 
  
}
.mud-list-item.mud-list-item-clickable.selected-item .mud-icon-root.mud-svg-icon{
  fill: var(--blue-default) !important; 
  
}
/* .mud-picker-calendar .mud-ripple{
  overflow: hidden !important;
} */
/* .mud-tabs .mud-tab-pager {
  background-color: transparent !important;
  box-shadow: none !important;
}
.mud-tabs .mud-tab-pager {
  border: none !important;
  outline: none !important;
}
:deep(.mud-tabs .mud-tab-pager) {
  background-color: transparent !important;
}
.mud-tabs-scroll-button,
.mud-tabs-scroll-button button {
  padding: 0 !important;
  margin: 0 !important;
  width: 7px !important;
  height: 7px !important;
}
.mud-tabs-scroll-button button{
  width: 10px !important;
  height: 10px !important;
}
.mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper{
  display: unset !important;
} */
.mud-picker-calendar {
  justify-content: end !important;
}
.mud-picker-calendar-header-day {
  justify-content: space-between !important;
}
.mud-table-cell .mud-checkbox {
  margin-inline: 0 !important;
}
body:has(.authentication-page) {
overflow: hidden !important;
}

.mud-progress-linear {
    display: none !important;
}
.phone-number-input .mud-input > input.mud-input-root{
  direction: ltr;
  text-align: right;
}
:dir(ltr) .phone-number-input .mud-input > input.mud-input-root{
  direction: ltr;
  text-align: left;
}
.table-data-title{
  min-width: 100px;
}
.mud-primary-text {
    color: inherit !important;
    --mud-ripple-color: inherit !important;
}
.selected-item{
  color: var(--blue-default) !important ;
}
.selected-item svg,
.selected-item .mud-icon-root.mud-svg-icon{
  fill: var(--blue-default) !important ;
}
body:dir(rtl) .rotate-icon{
  transform: rotate(180deg);
}
@media (max-width: 1199px) {
  .mud-appbar .navbar-wrapper .navbar-content,
  .main-nav-menu{
    display: none !important;
  }
  .mud-appbar.mud-appbar-fixed-top{
    background: var(--white);
    transition: border-radius 0.3s ease;
  }
  /* .mud-appbar.mud-appbar-fixed-top:has(.mud-collapse-entered){
    border-radius: 16px;
  } */
  .mud-appbar.mud-appbar-fixed-top.appbar-expanded {
    border-radius: 16px;
  }
  .hidden-tabs{
    height: 8px;
  }
  .breadcrumbs{
    padding-top: 90px;
  }
  .navbar-content .responsive-lang-mode{
    margin-block: 16px 25px;
  }   
  .mud-appbar .mud-collapse-container{
    display: flex;
    flex-direction: column;
  }
}
/* inputs */
.flexible-width,
.grid-gap-wrapper .select-parent-group:not(:first-of-type){
  margin-top: 16px;
}

/* Two Factor Auth */
.qr-code-container{
  margin-block: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.qr-code-container img{
  width: 200px;
}

/* grid (responsive) inputs */
@media screen and (min-width: 1281px) {
  .select-parent-group .mud-grid-item-sm-6{
    /* max-width: calc(100% / 12 * 3.889); */
    min-width: calc(100% / 12 * 3.889);
    flex-basis: calc(100% / 12 * 3.889);
  }
  .flexible-width .mud-grid-item-sm-6, .first-of-type .mud-grid-item-sm-6{
    max-width: calc(100% / 12 * 3.889);
    min-width: calc(100% / 12 * 3);
    flex-basis: calc(100% / 12 * 3);
  }
  .select-parent-group .mud-grid-item-lg-3{
    min-width: calc(100% / 12 * 2.875);
    flex-basis: calc(100% / 12 * 2.875);
  }
  .box-inputs-filter .mud-grid-item-sm-6{
    min-width: calc(100% / 12 * 3.8);
    flex-basis: calc(100% / 12 * 3.8);
  }
}
@media screen and (max-width: 1280px) {
  .select-parent-group .mud-grid-item-sm-6{
    max-width: calc(100% / 12 * 5.9);
    min-width: calc(100% / 12 * 5.0);
    flex: 1;
  }
  .add-user-btn-parent {
    max-width: 100% !important;
  }
}
@media screen and (max-width: 1000px) {
  .select-parent-group .mud-grid-item-sm-6{
    max-width: calc(100% / 12 * 5.875);
    min-width: calc(100% / 12 * 5.0);
    flex: 1;
  }
}
@media screen and (max-width: 800px) {
  .select-parent-group .mud-grid-item-sm-6{
    min-width: calc(100% / 12 * 12);
  }
}