@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;800;900&display=swap");
/* font-family: 'Roboto', sans-serif; */

:root {
  --black--: #000;
  --white--: #fff;
  --prime--: #524ae3;
  --blackPrime--: #0f172a;
  --grayPrime--: #cfcfcf;
  --inputBorder--: #cbd5e1;
  --btnPrime--: #524ae3;
  --pink--: #cb198e;
  --lightOrangeColor: #8A82FB;
}

/* Start Default CSS */
body {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--black--);
  font-family: "Poppins",Roboto, Helvetica, Arial, sans-serif !important;
  background: #fafafa !important;
}
button {
  cursor: pointer !important;
}

/* For Webkit based browsers (Chrome, Safari) */

a {
  text-decoration: none;
}

li {
  list-style: none;
}

ul {
  margin-bottom: 0;
  padding-left: 0;
}

/* End Default CSS */

/* Start Theme Text Color */
.primeColor {
  color: var(--prime--) !important;
}
.textPink {
  color: var(--pink--) !important;
}
.bgDark {
  background-color: #0a1e29 !important;
}
.bgPink {
  background-color: var(--pink--) !important;
}

.primeBlackColor {
  color: var(--blackPrime--) !important;
}

/* End Theme Text Color */

/* Default Custom Dynamic CSS */

.themeFont {
  font-size: 14px;
  font-weight: 500;
  color: var(--blackPrime--);
}

.boxCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text-error {
  font-size: 14px;
  color: red;
}
.text-red {
  font-size: 14px;
  color: red;
}
.bg-secondary {
  opacity: 0.6 !important;
}
.textPinktheme {
  color: #e424a7 !important;
}
.image {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  height: auto;
  opacity: 1;
  width: 38%;
}

.image,
.middle {
  transition: 0.5s ease;
}

.middle {
  left: 50%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 28% !important;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container:hover .image {
  cursor: -webkit-grab;
  cursor: grab;
  opacity: 0.6;
}

.container:hover .middle {
  opacity: 1;
}
.w-85 {
  width: 85%;
}

.deg90 {
  color: #9d9d9d;
  cursor: pointer;
  rotate: 90deg;
}

.row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.onLine {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: green;
  bottom: -4px;
  right: 3px;
  border: 3px solid #ffff;
  position: absolute;
  display: block;
}
.offLine {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  bottom: -4px;
  right: 3px;
  border: 3px solid #ffff;
  /* position: absolute; */
  display: block;
}

/* .mainHostInfo {
  position: sticky;
  top: 62px;
  width: 100%;
  z-index: 111;
  background-color: #fff;

}

/* // extra add inti dashboard // */
.icon-lg {
  height: 64px;
  width: 64px;
}

.icon-lg i {
  font-size: 1.8rem;
  top: 31%;
}
.icon-shape {
  background-position: 50%;
  border-radius: 0.5rem;
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
}
.icon-shape-small {
  background-position: 50%;
  border-radius: 0.5rem;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
}
.icon-shape-small i {
  margin-left: 12px;
}

.icon-shape i {
  color: #fff;
  opacity: 0.8;
  position: relative;
  top: 0px;
}
.shadow-dark {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
    0 7px 10px -5px rgba(64, 64, 64, 0.4) !important;
}

.bg-gradient-primary {
  background-image: linear-gradient(195deg, #ec407a, #d81b60);
}

.bg-gradient-secondary {
  background-image: linear-gradient(195deg, #747b8a, #495361);
}

.bg-gradient-success {
  background-image: linear-gradient(195deg, #66bb6a, #43a047);
}

.bg-gradient-info {
  background-image: linear-gradient(195deg, #49a3f1, #1a73e8);
}

.bg-gradient-warning {
  background-image: linear-gradient(195deg, #ffa726, #fb8c00);
}

.bg-gradient-danger {
  background-image: linear-gradient(195deg, #ef5350, #e53935);
}

.bg-gradient-light {
  background-image: linear-gradient(195deg, #ebeff4, #ced4da);
}

.bg-gradient-dark {
  background-image: linear-gradient(195deg, #42424a, #191919);
}

.bg-gradient-orang {
  background-image: linear-gradient(195deg, #ef5350, #e53935);
}

.bg-gradient-pink {
  background-image: linear-gradient(195deg, #ffa726, #fb8c00);
}

.bg-gradient-faded-primary {
  background-image: radial-gradient(
    370px circle at 80% 50%,
    rgba(233, 30, 99, 0.6) 0,
    #c1134e 100%
  );
}
/* // extra add inti dashboard // */

.loader-new {
  width: 50px;
  height: 50px;
}

.loader-new .loading {
  width: 60px;
  height: 60px;
  position: relative;
}

.loader-new .d1,
.d2 {
  border: 5px solid #997cfa;
  border-radius: 50px;
}

.loader-new .loading .d1 {
  width: 55px;
  height: 55px;
  position: absolute;
  border-left-color: transparent;
  animation: load161 1s linear infinite;
}

.loader-new .loading .d2 {
  width: 40px;
  height: 40px;
  border-top-color: transparent;
  border-right-color: transparent;
  margin: 7.5px;
  animation: load2812 1.5s linear infinite;
}

@keyframes load161 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load2812 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@500,600,700,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* font-family: 'Nunito Sans', sans-serif; */

:root {
  --black--: #000;
  --white--: #fff;
  --prime--: #524ae3;
  --blackPrime--: #0f172a;
  --grayPrime--: #404040;
  --inputBorder--: #cbd5e1;
  --btnPrime--: #524ae3;
  --gray--: #656565;
  --pink--: #cb198e;
  --lightOrangeColor: #8a82fb;
}

/* ========================================= Navbar Page CSS ========================== */
/* .boxNav{
  cursor: pointer;
  margin: 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 1px;
  position: static;
  transition: 0.3s;
 z-index: 11;
} */

.mainNavbar {
  position: -webkit-sticky;
  position: sticky;
  margin-right: 0px !important;
  transition: 0.3s !important;
  z-index: 111;
  top: 0;
  background-color: #fafafa;
}

.mainNavbar .logo-show-nav {
  display: none;
}

.boxNav {
  cursor: pointer;
  padding: 9px 12px;
}

.navBar {
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  background-color: white;
  font-size: 18px;
  /* margin: 0 10px; */
  /* border-bottom: 1px solid #ececec; */

  padding: 10px 0px;
  /* background: #2188e1; */
  box-shadow: 0px 2px 8px rgb(47 43 61 / 0.12);
  border-radius: 5px;
  margin-top: 10px;
}

.mainContainer {
  height: 100vh;
  overflow: hidden;
}

.containerRight {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.mainAdmin {
  margin-top: 10px;
  transition: 0.3s;
  height: calc(100vh - 95px);
  /* height: 90.6vh; */
  background: #fafafa;
  /* border-radius: 1rem 1rem 0rem 0rem; */
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
  display: flex;
  justify-content: flex-end;
}

/* ========================================= Sidebar Page CSS ========================== */

/* Side Menu Toggle JS CSS */
.webSidebar {
  width: 270px;
}

.mobSidebar {
  width: 83px;
}

.sideBar.mobSidebar .sideBarLogo span {
  display: none;
}

.navToggle {
  position: relative;
  cursor: pointer;
}

.navToggle i {
  color: var(--lightOrangeColor) !important;
}

.sideBar.mobSidebar .mainMenu li a > div > span,
.sideBar.mobSidebar .mainMenu > li > a > i,
.sideBar.mobSidebar .subMenu li a span {
  display: none;
}

.sideBar.mobSidebar .mainMenu li a {
  justify-content: flex-start;
  padding-left: 15px;
}

.sideBar.mobSidebar .mainMenu li a i {
  margin: 0;
}

.sideBar.mobSidebar .subMenu li a {
  padding-left: 22px;
}

.webSidebar .navigation p {
  display: flex;
  /* margin-left: 19px !important;
  padding-left: 0px !important; */
}

.mobSidebar .navigation p {
  margin: 0px !important;
  padding: 0px !important;
  text-align: center;
}

/* End Side Menu Toggle JS CSS */

.sideBarLogo img {
  border-radius: 20px;
  margin-right: 10px !important;
}

.mobSidebar .sideBarLogo img {
  margin-right: 0px !important;
}

.rotate90 {
  transform: rotate(90deg);
  transition: 0.3s;
}

.mainSidebar {
  position: relative;
}

.navigation::-webkit-scrollbar-thumb {
  background: #8a82fb !important;
  border-radius: 1px !important;
}

.navigation::-webkit-scrollbar {
  width: 6px !important;
}

textarea::-webkit-scrollbar-thumb {
  background: #8a82fb !important;
  border-radius: 1px !important;
}

textarea::-webkit-scrollbar {
  width: 5px !important;
}

.table-custom::-webkit-scrollbar-thumb {
  background: #8a82fb !important;
  border-radius: 1px !important;
}

.sideMenuBg {
  position: absolute;
  top: 10px;
  right: 0px;
  fill: #f1f5f9;
}

.toggleIconNav {
  position: absolute;
  right: -13px;
  top: 50px;
  overflow: visible !important;
  transition: 0.3s;
  z-index: 2000;
}

.toggleIcon {
  transition: transform 0.3s;
}

.rotated {
  transform: rotate(90deg);
  transition: 0.3s;
}

.sideBar {
  height: 100vh;
  /* background-color: var(--white--) !important; */
  background-color: white;
  color: var(--gray--) !important;
  transition: 0.3s;
  /* overflow: hidden; */
}

.abb {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

.sideBarLogo {
  /* border-bottom: 1px solid #ececec; */
  padding: 16px;
}

.navigation {
  padding: 0px 10px;
  max-height: 90vh;
  margin-top: 10px;
  overflow-y: scroll !important;
}

.mainMenu > li {
  padding-bottom: 5px;
}

.mainMenu li a {
  color: var(--grayPrime--);
  font-size: 15px;
  font-weight: 400;
  padding: 9px 20px;
  /* border-radius: 6px; */
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  display: flex;
  justify-content: space-between;
  transition: 0.1s;
  align-items: center;
  margin-bottom: 5px;
}

.mainMenu li > a svg path {
  transition: 0.3s;
}

.mainMenu li > a:hover,
.mainMenu .activeMenu {
  /* color: #997cfa; */
  /* color: #997cfa; */
  /* border-left: 2px solid var(--lightOrangeColor) !important; */
  transition: 0.1;
}

.mainMenu .activeMenu,
.mainMenu li > a:hover {
  /* border-left: 2px solid #997cfa !important; */
  /* border-left: 2px solid var(--lightOrangeColor) !important; */
  /* transition: 0.1; */
  background-color: rgba(217, 208, 245, 0.34);
  border-radius: 5px;
  /* color: #fff; */
  /* box-shadow: 0px 2px 6px rgb(115 103 240 / 0.3); */
  /* background: linear-gradient(270deg, rgba(115, 103, 240, 0.7) 0%, #7367F0 100%) !important; */
}
.activeMenu {
  border-radius: 5px !important;
  color: #fff !important;
  box-shadow: 0px 2px 6px rgb(115 103 240 / 0.3);
  background: linear-gradient(
    270deg,
    rgba(115, 103, 240, 0.7) 0%,
    #7367f0 100%
  ) !important;
}

.mainMenu li > a:hover svg path,
.mainMenu .activeMenu svg path,
.mainMenu li > a:hover svg defs linearGradient stop {
  /* color: var(--lightOrangeColor); */
  /* color: #fff; */
  /* fill: #997cfa; */
  stop-color: #997cfa;
}

.mainMenu li > a:active svg path,
.mainMenu .activeMenu svg path,
.mainMenu .activeMenu svg defs linearGradient stop {
  /* color: var(--lightOrangeColor); */
  /* color: #997cfa; */
  /* fill: #997cfa; */
  /* stop-color: #997cfa; */
}

.mainMenu li > a:hover img,
.mainMenu .activeMenu img {
  /* color: var(--lightOrangeColor); */
}

.mainMenu li a i {
  margin-right: 10px;
  transition: 0.3s;
  height: 20px;
  width: 20px;
}

.multiSelectContainer {
  position: relative;
  text-align: left;
  width: 100%;
  /* border: 1px solid #997cfa; */
  margin-top: 10px;
}

.viewbutton {
  display: flex;
  align-items: center;
  /* padding-left: 15px; */
  column-gap: 10px;
  /* padding-right: 15px; */
  border-radius: 10px;
  border: none;
  outline: none;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #8a82fb;
}

.chart-container {
  background: #8a82fb;
  padding: 20px;
  /* Adjust as needed */
  border-radius: 10px;
  /* Optional */
  display: inline-block;
  /* Ensure the background only applies to the chart */
}

.mainMenu li a img {
  margin-right: 22px;
  transition: 0.3s;
  width: 24px;
  height: 24px;
}

.mainMenu li a svg {
  margin-right: 10px;
  transition: 0.3s;
  /* width: 17px;
  height: 17px; */
}

.content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

.subMenu li a {
  justify-content: flex-start;
  padding-left: 30px;
}

.subMenu li a i {
  font-size: 6px;
}

/* ================================== Admin CSS =================================== */
/* 
.mainAdmin {
  margin-left: 230px;
  margin-top: 10px;
  margin-right: 10px;
  height: 100vh;
  background-color: var(--white--);
  transition: 0.3s;
} */

/* .mobAdmin {
  margin-left: 85px;
} */

/* Mobile Size */
@media screen and (max-width: 425px) {
  .pageCenterMob {
    display: flex;
    justify-content: center;
  }

  .pageSm {
    margin-top: 8px;
  }

  .smBTN {
    font-size: 12px;
    width: 47%;
    padding: 0%;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 425px) {
  .fake-host-page .searching-box {
    width: 100%;
  }
}

/* ==================================  CSS  =================================== */
.card {
  word-wrap: break-word;
  background-clip: border-box;
  /* background-color: #fff; */
  border: 1px solid transparent;
  border-radius: 0.3rem;
  /* box-shadow: 0 0.76rem 1.52rem rgba(18, 38, 63, 0.03); */
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  min-width: 0;
  position: relative;
  width: 100%;
  border-top: none;
  /* box-shadow: 0px 14px 40px -2px lightgray; */
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
}
.card1 {
  word-wrap: break-word;
  background-clip: border-box;
  background-color: white;
  /* border: 1px solid transparent; */
  border-radius: 5px;
  /* box-shadow: 0 0.76rem 1.52rem rgba(18, 38, 63, 0.03); */
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  min-width: 0;
  position: relative;
  width: 100%;
  border-top: none;
  box-shadow: 0px 14px 40px -2px lightgray;
  padding: 0;
}

.cardHeader {
  border-bottom: 1px solid #eee;
}
.cadrFooter {
  border-top: 1px solid #eee;
}
/* ========================= Loader css==================== */

.mainLoaderBox {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #00000070;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-img-icon svg {
  position: absolute;
  top: 32%;
  right: 30%;
  color: #c9c9c9;
  border-radius: 50%;
  opacity: 1;
  width: 40px;
  height: 40px;
  padding: 5px;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #ffffff;
  float: left;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  animation-delay: 0.2s;
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }

  35% {
    transform: scale3D(0, 0, 1);
  }
}

@media screen and (max-width: 320px) {
  .category-btn .btn-icon {
    padding: 3px 6px !important;
  }

  .category-btn button > i {
    font-size: 12px !important;
  }
}

/* ==================== Admin Profile css ================= */

.adminProfileBox {
  margin: 10px 0;
}

.dashBoxData {
  border: 1px solid #997cfa;
  border-radius: 20px;
  /* box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
  0 7px 10px -5px rgba(64, 64, 64, 0.4) !important; */
}

.dashBoxData .icon {
  z-index: 0 !important;
}

.adminProfileImg {
  padding: 30px;
}

.adminImg {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

/*======================== Dashboard css ====================  */

.dashIconBox {
  /* background-color: #e9e9e9; */
  /* padding: 25px; */
  font-size: 50px;
}

.dashBox {
  position: relative;
  font-family: "Nunito Sans", sans-serif;
}

.icon {
  z-index: 111;
}

.icon-data1 {
  background-color: #c0ebfe;
  color: #008ecd;
}

.icon-data2 {
  background-color: #d4dbfd;
  color: #4860df;
}

.icon-data3 {
  background-color: #ffdbe6;
  color: #e75448;
}

.icon-data4 {
  background-color: #d6ffd0;
  color: #4ca040;
}

.dashboard .dashboardHeader .title h4 {
  /* margin-left: 10px; */
}

.dashDataBox {
  border-radius: 15px;
  box-shadow:
    0 4px 20px 0 rgba(0, 0, 0, 0.14),
    0 7px 10px -5px rgba(64, 64, 64, 0.4) !important;
}

.lineCss {
  opacity: 0.1;
  width: 85%;
  margin: 0 auto;
}

.chart1 {
  border-radius: 15px;
  box-shadow:
    0 4px 20px 0 rgba(0, 0, 0, 0.14),
    0 7px 10px -5px rgba(64, 64, 64, 0.4) !important;
}

.chartHeader {
  box-shadow: 0px 10px 10px -15px #111;
}

/*  fake host dialogue */
.excel-sheet-table th {
  white-space: nowrap;
}

.host-edit-multipleImg {
  display: flex;
  flex-direction: column;
}

.host-edit-multipleImg i {
  width: 84px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -5px;
  z-index: 111;
  font-size: 20px;
  cursor: pointer;
  color: #d93030;
}

@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
  .dashboard-activity {
    display: flex;
    grid-template-columns: auto auto auto auto;
    gap: 16px;
    width: 100%;
  }

  .dashboard-activity-one {
    margin-top: 16px;
    padding-right: 8px;
  }

  .dashboard-activity-one,
  .dashboard-activity-two {
    width: 100%;
  }

  .dashboard-activity-two {
    padding-left: 8px;
  }
}

/* dashboard */
.heading-dashboard {
  /* font-weight: 800 !important; */
  margin-bottom: 8px;
  color: var(--black--);
}

.dashBoxData h5 {
  color: #8381cd;
  margin: 0px !important;
  padding-bottom: 3px;
  font-size: 18px !important;
  text-decoration: underline;
  text-underline-offset: 8px;
}

.dashBoxData h6 {
  font-weight: 800;
  font-size: 30px;
  padding-top: 10px !important;
  text-align: start;
}

.custom-text-color {
  color: #9b7ff8;
}

.custom-shortie-color {
  background: linear-gradient(90deg, #6c61fb 0%, #c74cf2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 900;
}

.dashBoxData .dashBox-text {
  padding: 10px;
  display: flex;
  width: calc(100% - 120px);
  padding-bottom: 0px;
  flex-direction: column;
  justify-content: center;
}

.dashBoxData svg {
  width: 64px;
  height: 64px;
  filter: brightness(34.5);
  color: white;
}

.dashBoxData .icon {
  width: 120px;
  height: 122px;
  align-items: center;
  margin: 0px !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.dashBoxData .icon-data1 {
  display: flex;
  justify-content: center;
  background: #8a82fb;
}

.dashBox-text h6 {
  margin: 0px !important;
}

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

.dashboard-analytics h6 {
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  padding-top: 15px;
}

.chart-not-available {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 500;
  top: 50%;
  left: 0;
  height: 400px;
}

.dashBoxData .icon img {
  width: 60px;
  height: 60px;
  fill: white !important;
  color: white !important;
}

.dashboard .user-activity {
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
  background: #fff;
  border-radius: 5px;
  /* padding: 25px; */
}

.dashboard .user-activity .apexcharts-canvas {
  width: 100%;
}

.dashboard .user-activity h6 {
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  /* text-decoration: underline; */
  /* text-align: start; */
  padding-top: 0px !important;
  /* padding-bottom: 10px; */
  /* text-underline-offset: 8px; */
}

.dashboard .date-range-picker input::placeholder {
  color: white !important;
}

.dashboard .dashboard-chart {
  margin-top: 15px !important;
}

.dashboard .dashboard-user-count {
  border-radius: 5px;
  border: 1px solid #ebebeb;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
}

.dashboard .user-activity .total-user-chart {
  /* margin-top: 37px; */
  display: flex;
  /* margin-bottom: 10px; */
}

.dashboard .user-activity .total-active-chart {
  display: flex;
}

.dashboard .user-activity .total-user-chart h5,
.total-active-chart h5 {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}

.dashboard .user-activity .total-user-chart span {
  border-radius: 100px;
  background: #be73f6;
  width: 20px;
  display: block;
  margin-right: 8px;
  height: 20px;
}

.dashboard .dashboard-user-count .apexcharts-legend-series {
  display: flex !important;
  align-items: center;
}

.dashboard .dashboard-user-count .apexcharts-legend .apexcharts-legend-marker {
  width: 20px !important;
  height: 20px !important;
  margin-right: 5px !important;
  /* border-radius: 6px !important; */
}

.dashboard .dashboard-user-count .apexcharts-legend-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: "Poppins", Roboto, Helvetica, Arial, sans-serif !important;
}

.dashboard .dashboard-user-count text {
  text-anchor: unset !important;
}

.dashboard .dashboard-user-count tspan {
  font-weight: 600 !important;
  font-size: 10px;
}

.dashboard .user-activity .total-active-chart span {
  border-radius: 100px;
  background: #8a82fb;

  margin-right: 8px;
  display: block;
  width: 20px;
  height: 20px;
}

.dashboard .date-range-picker input {
  margin-left: auto;
  border-radius: 8px;
  background-color: gray !important;
  color: white;
  cursor: pointer;
}

.dashboard .form-control:focus {
  box-shadow: none !important;
  border-color: unset !important;
}

.cancelBtn {
  background-color: gray;
  color: white;
  border: none;
}

.applyBtn {
  background-color: var(--lightOrangeColor);
  color: white;
  border: none;
}

.cancelBtn:hover {
  background-color: #999191;
  color: white;
}

.applyBtn:hover {
  background-color: #eb6a7c;
  color: white;
}

/* dashboard */

/* userPage */
.userPage .userSetting {
  padding: 0px !important;
  margin: 0px !important;
}

.userPage .searching-box input {
  border-radius: 5px !important;
  min-width: 300px;
  border: 1px solid #c9c9c9 !important;
}

.userPage .searching-box input:focus {
  border: 1px solid #ababab !important;
  outline: none;
}

.userPage {
  padding: 20px;
  padding-bottom: 0px;
}

.userPage .table-custom img {
  border-radius: 6px;
  object-fit: cover;
}

.userPage .table-custom span {
  font-weight: 500;
  /* font-weight: 600; */
  font-size: 14px;
}

.action-button {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-button button {
  border-radius: 5px;
  background: #f4f4f4;
  padding: 8px;
}

.userPage .table-custom input {
  border-radius: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1px solid black;
}

.custom-input {
  color: #404040;
  font-weight: 500;
  margin-bottom: 5px;
}

/* .userPage .multi-user-btn .MuiToggleButtonGroup-root:nth-child(3){
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px;
} */

.userPage .table-custom tbody tr td input[type="checkbox"]:checked {
  accent-color: var(--lightOrangeColor);
}

.userPage .table-custom th input[type="checkbox"]:checked {
  accent-color: var(--white--);
}

.userSetting .MuiList-root {
  display: flex;
  flex-direction: column;
}

.userSetting .MuiList-root li {
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
}

.user-table-top input {
  border-radius: 5px;
  /* border-radius: 40px; */
  border: 1px solid #c9c9c9;
  background: #fff;
  width: 100%;
  padding: 10px;
  height: 38px;
}

.user-table-top h6 {
  font-size: 15px;
  font-weight: 400;
}

.user-table-top {
  justify-content: flex-end;
}

.user-table-top .MuiInputBase-root {
  height: 43px;
  border-radius: 40px;
}

.user-table-top .MuiSelect-outlined {
  display: flex;
  justify-content: center;
}

.user-table-top .MuiFormLabel-root {
  padding-left: 5px;
  margin-top: -6px;
}

.user-table {
  margin-top: 15px;
  border-radius: 5px;
  /* border: 1px solid #c9c9c9; */
  background: white;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
}

.user-table-top {
  padding: 15px 35px;
  /* margin-left: 5px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.pagination-select {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.pagination-select .pagination-submit {
  max-width: 163px;
  width: 100%;
}

.pagination-submit .MuiFormLabel-root {
  color: rgba(0, 0, 0, 0.6) !important;
}

.pagination-select
  .pagination-submit
  .Mui-focused
  .MuiOutlinedInput-notchedOutline {
  color: rgba(0, 0, 0, 0.54) !important;
}

.pagination-select .Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: unset !important;
}

.pagination-select .MuiFormControl-root {
  width: 100%;
  max-width: 163px;
}

.pagination-select .action-submit {
  display: flex;
  flex-direction: column;
}

.pagination-select .MuiInputBase-root {
  height: 43px;
  border-radius: 40px;
}

.pagination-select .MuiFormLabel-root {
  padding-left: 0px;
  margin-top: -1px;
}

.new-fake-btn button {
  width: auto;
  min-width: 100px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle,
    rgba(139, 130, 252, 1),
    rgba(125, 130, 251, 1),
    rgba(210, 111, 244, 1)
  );
  color: white;
  padding: 0 15px;
  border-radius: 5px;
  border: none;
  white-space: nowrap;
}

.css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase.Mui-checked
  + .MuiSwitch-track {
  color: #cd70f5;
}

.css-jsexje-MuiSwitch-thumb {
  background: var(--lightOrangeColor);
}

.css-1yjjitx-MuiSwitch-track {
  background: #737fc7 !important;
}

.fake-create-img img {
  width: 100px;
  height: 80px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
  margin-top: 15px;
}

.fake-user .fake-create-img img {
  width: 150px;
  height: 80px;
  border-radius: 15px;
  border: 1px solid white;
  object-fit: cover;
  margin-top: 15px;
}

.fake-user .pagination-box {
  padding-right: 10px;
}

.real-user .pagination-box {
  padding-right: 10px;
}

.fake-user .passHideShow i {
  margin-right: 17px;
}

.fake-user .userSettingBox {
  height: unset !important;
}

.fake-user .form-input[type="file"] {
  margin-top: 6px;
}

.css-ozc333 .MuiSwitch-switchBase + .MuiSwitch-track {
  opacity: 1;
  background-color: #fcf3f4 !important;
}

.css-ozc333 .MuiSwitch-switchBase + .MuiSwitch-track {
  opacity: 1;
  background-color: #fcf3f4 !important;
}

/* userPage */
/* userSetting */
.userSetting .multiButton .MuiToggleButtonGroup-root:nth-child(3) {
  border-left: 0px;
  border-radius: 0px;
  border-right: 1px solid var(--lightOrangeColor) !important;
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
}

/* .userSettingBox {
  border-radius: 22px;
  border: 1px solid #c9c9c9;
  background: #fcfcfc;
  /* padding: 25px; */
/* margin-bottom: 17px; */
/* } */
*/ .userSetting {
  padding: 20px 20px 0;
}

.userSetting .label-form {
  color: #1f1f1f;
  font-weight: 600;
  margin-bottom: 10px;
}

.userSetting .MuiRadio-colorSecondary.Mui-checked {
  color: var(--lightOrangeColor) !important;
}

.general-setting .text-about {
  flex-direction: column;
  display: flex;
}

.general-setting textarea {
  border: 1px solid var(--inputBorder--) !important;
  border-radius: 20px;
  padding: 10px;
  color: #495057 !important;
}

.general-setting textarea:focus {
  border: 1px solid #ababab !important;
  outline: none;
}

.avatar-setting .image-avatar-box {
  position: relative;
}

.avatar-setting .image-avatar-box .cover-img-user img {
  height: 284px;
  width: 100%;
  margin-top: 30px;
  object-fit: cover;
  border-radius: 20px;
}

/* .avatar-setting .image-avatar-box .avatar-img-user {
  position: absolute;
  top: 225px;
  left: 52px;
} */
.avatar-setting .image-avatar-box .avatar-img-user img {
  width: 100%;
  height: 100%;
  /* width: 200px;
  height: 200px; */
  object-fit: cover;
  border-radius: 20px;
  border: 2px solid #fcfcfc;
}

.avatar-setting .avatar-img-icon {
  position: absolute;
  top: 12px;
  right: 10px;
  /* color: white; */
  border-radius: 50%;
  /* border: 1px solid; */
  width: 40;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.avatar-setting .avatar-img-icon svg {
  padding: 5px;
  font-size: 29px;
  color: #524ae3;
}

.avatar-setting .userSettingBox {
  /* height: calc(100vh - 260px); */
}

textarea.custom-textarea {
  border-radius: 10px;
  border: 1px solid #997cfa;
  background: #fcfcfc;
}

textarea.custom-textarea:focus {
  border: 1px solid #ababab !important;
}

/* .inputData textarea {
  padding-left: 20px;

} */

.inputData textarea {
  width: 100%;
  background-color: #fbfbfb;
  border: 1px solid #997cfa !important;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 10px;
  font-size: 16px;
}

textarea:focus {
  outline: none;
  border: 1px solid gray !important;
}

.password-setting .userSettingBox {
  height: calc(100vh - 281px);
}

.userSettingBox h5 {
  font-size: 25px;
  font-weight: 500;
}

/* userSetting */

/* Payment Setting */
.payment-setting {
  padding: 30px;
}

.app-setting {
}

.payment-setting-box {
  border-radius: 10px;
  /* border: 1px solid #c9c9c9; */
  background: #fcfcfc;
  /* margin-top: 20px; */
  background: white;
  box-shadow: -1px 8px 16px -12px rgba(66, 68, 90, 1);
}

.se .payment-setting-box h5 {
  font-weight: 600;
  font-size: 18px;
}

.withdrawal-box {
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background: white;
  padding: 15px;
  /* box-shadow: 0px 2px 8px rgb(47 43 61 / 0.12); */
}

.withdrawal-box h6 {
  font-size: 18px;
  margin-bottom: 0px;
  /* color: radial-gradient(circle, rgba(139, 130, 252, 1), rgba(125, 130, 251, 1), rgba(210, 111, 244, 1)); */
}

.withdrawal-box .withdrawal-requests {
  border-radius: 12px;
  padding: 8px;
  background: #0fb515;
}

.withdrawal-box .withdrawal-requests p {
  color: white;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 0px;
}

.payment-setting .payment-content-button {
  border-radius: 8px;
  min-width: 89px;
  border: none;
  min-width: 60px;
  padding: 6px;
  height: 37px;
  cursor: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  background: #ffedf0;
}

.payment-setting .payment-content-button span {
  color: var(--lightOrangeColor);
  font-weight: 500;
  margin-left: 3px;
  font-size: 14px;
}

.payment-setting .Mui-checked + .MuiSwitch-track {
  border-radius: 52px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  background: #ffedf0 !important;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08) inset;
}

.payment-setting .Mui-checked .MuiSwitch-thumb {
  background-color: #0fb515 !important;
}

.border {
  border: 1px solid #dbdbdb;
}

.payment-setting .withdrawal-input {
  border-top: 1px solid #dbdbdb;
  margin-top: 15px;
  padding-top: 9px;
}

.payment-setting .withdrawal-input label {
  font-size: 15px;
}

.payment-setting .MuiSwitch-root {
  padding-right: 0px;
}

.payment-setting .MuiFormControlLabel-root {
  margin-right: 0px;
}

.payment-setting span {
  margin-right: 0px;
  margin-bottom: 0px;
  /* background : #8A82FB */
}
.payment-setting .chip {
  background: #8a82fb;
}

.payment-setting .withdrawal-input input {
  border-radius: 5px;
  /* border: 1px solid #997cfa !important; */
  background: #fcfcfc;
}

.payment-setting .withdrawal-input .Mui-disabled .MuiSwitch-thumb {
  opacity: 0.6;
}

.payment-setting .withdrawal-input .Mui-disabled .MuiSwitch-track {
  opacity: 0.6 !important;
}

/* .payment-setting .withdrawal-input input:focus {
  border-color: #e1818f !important;
} */
.payment-setting .withdrawal-input h6 {
  font-size: 14px;
  margin-top: 7px;
  margin-bottom: 0px;
  color: #666666;
  font-weight: normal;
}

.payment-box p {
  font-size: 13px;
  margin-top: 6px;
  color: #666;
  margin-bottom: 0px;
}

.video-upload-loader {
  position: relative;
  width: 200px;
  height: 138px;
}

.video-upload-loader .loader-box-video {
  position: absolute;
  top: 30%;
  left: 40%;
}

.video-upload-loader .MuiCircularProgress-root {
  color: #ff4d67 !important;
  width: 45px !important;
  height: 45px !important;
}

.video-short-setting {
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 15px;
  padding-bottom: 9px;
}

.video-short-setting .paid-channel {
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 15px;
  padding-bottom: 2px;
}

.video-short-setting .withdrawal-input {
  border-top: none;
  margin-top: unset;
  padding-top: unset;
}

.payment-setting .selector-payment-setting {
  border-top: 1px solid #dbdbdb;
  margin-top: 9px;
  padding-top: 9px;
}

.payment-setting .selector-payment-setting label {
  color: var(--lightOrangeColor);
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 5px;
}

.payment-setting .selector-payment-setting p {
  margin-top: 0px;
}

.payment-setting .selector-payment-setting select {
  border-radius: 10px !important;
  border: 1px solid #ff4d67 !important;
}

.payment-setting .selector-payment-setting svg {
  z-index: 111;
}

.payment-setting .selector-payment-setting .selector-custom {
  margin-top: -15px;
  margin-bottom: 5px;
}

.add-details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.add-details .custom-input {
  width: 100%;
}

.add-details button {
  white-space: nowrap;
  color: white;
  background-color: #8491ff;
  border-radius: 0.5rem;
  height: 38px;
  font-size: 15px;
  margin-bottom: 3px;
  margin-left: 16px;
  display: flex;
  align-items: center;
}

.add-details button svg {
  font-size: 20px;
  margin-right: 5px;
}

.withdrawal-page .primeMain ul li {
  position: relative;
  margin-bottom: 3px;
}

.withdrawal-page .primeMain ul li {
  text-align: justify;
  white-space: nowrap;
  margin-bottom: 5px;
  margin-left: 20px;
}

.withdrawal-page .primeMain ul li::before {
  content: " ";
  position: absolute;
  top: 6px;
  left: -19px;
  height: 7px;
  width: 7px;
  border: 1px solid #b6b6b6;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* Payment Setting */

/* Login Page */
.login-page-content {
}

.login-page-content .bg-login {
  background:
    url(webpack:///mini-css-extract-plugin//_next/static/media/loginPageBg.270401fe.png),
    lightgray 50% cover no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-page-content .login-page-box {
  border-radius: 32px;
  background: #fffafa;
  padding: 30px;
  width: 100%;
  max-width: 900px;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.08);
  z-index: 9;
}

.login-page-box .text-login {
  border-left: 1px solid #cacaca;
  padding: 0px 31px;
}

.login-page-box .text-login .heading-login {
  display: flex;
  align-items: center;
}

.login-page-box .text-login .heading-login img {
  width: 45px;
  height: 45px;
}

.login-page-box .text-login .heading-login h6 {
  color: #000;
  font-size: 28px;
  font-style: normal;
  margin: 0px;
  margin-left: 15px;
  font-weight: 900;
}

.login-page-content .login-page-box .right-login-img img {
  width: 369px;
}

.login-page-box .login-left-form {
  margin-top: 30px;
}

.login-page-box .login-left-form span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.66px;
}

.login-page-box .login-left-form h5 {
  color: #000;
  margin-top: 3px;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: normal;
}

.login-page-box .login-left-form label {
  color: #7e7e7e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.login-page-box .login-left-form .custom-input {
  position: relative;
  margin-bottom: 10px;
  margin-top: 20px;
}

.login-page-box .login-left-form input {
  border-radius: 10px;
  margin-top: 5px;
  border: none !important;
  font-weight: 500 !important;
  color: #9b7ff8 !important;
  background: #f4f4f4;
}

.login-page-box .login-left-form input:focus {
  border: none !important;
  background: #f4f4f4 !important;
}

.login-page-box .login-left-form h4 {
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  cursor: pointer;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  text-align: right;
}

.demologin {
  border-radius: 5px;
  width: 150px;
  color: white;
  /* margin-top: 20px; */
  background: radial-gradient(
    circle,
    rgba(139, 130, 252, 1),
    rgba(125, 130, 251, 1),
    rgba(210, 111, 244, 1)
  );
}

.login {
  border-radius: 5px;
  width: 150px;
  color: white;
  /* margin-top: 20px; */
  background-color: #fe0952;
}

/*  */
.login-page {
  padding: 35px;
  height: calc(100vh - 35px);
}

.login-page .row {
  height: calc(100vh - 78px);
}

.login-page .login-box-img {
  display: flex;
  align-items: flex-end;
}

.login-page .login-box-img img {
  width: 50px;
  height: 50px;
}

.login-page .login-box-img h5 {
  font-weight: 500;
  margin-left: 15px;
  font-size: 30px;
}

.login-page .login-form {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.login-form span {
  font-weight: 400;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
}

.login-form h6 {
  font-weight: 500;
  font-size: 33px;
}

.login-form label {
  color: #7e7e7e !important;
  font-size: 16px;
  font-weight: 400 !important;
}

.login-form .custom-input {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.login-form .custom-input input {
  border-radius: 5px !important;
  /* background: #f4f4f4 !important; */
}

.login-form .password {
  position: relative;
}

.login-page .login-form h4 {
  font-weight: 500;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  cursor: pointer;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  text-align: right;
}

.login-form .login-btn {
  border-radius: 28px;
  width: 224px;
  color: white;
  margin-top: 20px;
  background: var(--lightOrangeColor);
}

.swal-button--danger {
  background: var(--lightOrangeColor);
}

.swal-button {
  padding: 8px 24px;
}

.swal-button--cancel {
  color: #555;
  background-color: #efefef;
  padding: 8px 24px;
}

/* Login Page */

/* Video Page */
.importVideo-page .new-fake-btn button {
  width: 100px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightOrangeColor);
  color: white;
  border-radius: 10px;
}

.type-radio-box label {
  margin-top: 6px;
  margin-right: 5px;
  margin-left: 5px;
}

.type-radio-box input {
  cursor: pointer;
  width: 17px;
  height: 17px;
  accent-color: var(--lightOrangeColor);
}

.video-upload input {
  margin-top: 0px !important;
}

.video-show-upload video {
  width: 200px;
  height: 138px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  border: 1px solid white;
  object-fit: cover;
  margin-left: 10px;
}

.video-show-upload img {
  width: 100%;
  height: 138px;
  max-width: 200px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  border: 1px solid white;
  object-fit: cover;
  margin-left: 10px;
  min-width: 100px;
}

.video-upload-page .video-upload-img {
  display: flex;
  justify-content: center;
}

.video-upload-page .video-show img {
  width: 200px;
  height: 138px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  border: 1px solid white;
  object-fit: cover;
  margin-left: 10px;
}

.video-upload-page .video-show {
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: center;
}

.video-upload-page .video-show video {
  width: 200px;
  height: 138px;
  border: 1px solid white;
  object-fit: cover;
  border-radius: 15px;
}

/* .videoPage .multi-video-btn{ */

/* Video Page */
/* channelPage */
.sound-add-box {
  max-height: 500px;
  overflow: scroll;
}

.sound-add-box::-webkit-scrollbar {
  height: 2px;
  display: block;
  width: 3px;
  background-color: transparent;
}

.sound-add-box::-webkit-scrollbar-thumb:hover {
  -webkit-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
  background: var(--scrollColor--);
}

.sound-add-box::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: transparent;
}

.sound-add-box::-webkit-scrollbar-thumb {
  background: var(--scrollColor--);
  border-radius: 5px;
}

.sound-add-box-post {
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.sound-add-box-post::-webkit-scrollbar {
  height: 2px;
  display: block;
  width: 3px;
  background-color: transparent;
}

.sound-add-box-post::-webkit-scrollbar-thumb:hover {
  -webkit-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
  background: var(--scrollColor--);
}

.sound-add-box-post::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: transparent;
}

.sound-add-box-post::-webkit-scrollbar-thumb {
  background: var(--scrollColor--);
  border-radius: 5px;
}

.channelPage .multiButton .MuiToggleButtonGroup-root:nth-last-child(1) {
  /* border-right: 1px solid var(--lightOrangeColor); */
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
}

.model-header {
  border-bottom: 1px solid #eee;
  padding: 15px;
}
.model-body {
  border-bottom: 1px solid #eee;
  padding: 15px;
}
.model-header p {
  font-size: 18px;
  font-weight: 500;
}

.create-channel-model .MuiTypography-root {
  padding-bottom: 13px;
}

.create-channel-model .text-about {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.create-channel-model textarea {
  border: 1px solid var(--inputBorder--) !important;
  border-radius: 20px;
  padding: 10px;
}

.create-channel-model textarea:focus {
  border: 1px solid #ababab !important;
  outline: none;
}

.create-channel-model form {
  border-radius: 22px 22px 0px 0px;
  border-top: 1px solid #c9c9c9;
  border-right: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9;
  background: #fcfcfc;
  padding: 25px;
}

.create-channel-model .custom-input label {
  font-size: 15px;
  margin-bottom: 10px !important;
}

.create-channel-model .text-about label {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 10px !important;
}

.close-model-btn {
  background-image: linear-gradient(195deg, #747b8a, #495361);
  color: white;
  border-radius: 0.5rem;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  width: 88px;
  height: 37px;
  display: flex;
  align-items: center;
  font-size: 15px;
  justify-content: center;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

/* channelPage */
/* Faq Page */
.faq-page .action-button {
  display: flex;
  justify-content: flex-end;
}

.faq-page .MuiPaper-root {
  border: none;
  min-width: 481px;
}

.faq-page .payment-setting-box {
  padding: 24px;
  background-color: #ffffff;
}

.faq-page .MuiAccordionSummary-content p {
  font-weight: 500;
  font-size: 17px;
  color: #000;
}

.faq-page .MuiAccordionSummary-root {
  padding: 0px 10px 8px 10px !important;
  background-color: transparent !important;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.1);
}

.faq-page .MuiTypography-root p {
  font-size: 20px;
  line-height: 26px;
}

.faq-page .not-data-found {
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  color: var(--TableFont--);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 426px;
}

.faq-page .MuiAccordionSummary-expandIconWrapper {
  display: flex;
  width: 43px;
  height: 43px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  transition: all 0.2s ease-out;
  box-shadow: none;
  background: #ff4d67;
  border-color: transparent;
  color: white !important;
}

.faq-page .MuiAccordionSummary-expandIconWrapper:hover {
  background: #ff8396;
}

.faq-page .MuiAccordionSummary-content {
  align-items: center;
  justify-content: space-between;
}

.faq-page .MuiAccordionDetails-root {
  margin-bottom: 0px;
  color: rgb(0 0 0 / 70%);
  background: #f5f5f5;
  font-size: 16px;
  border-top: 0px;
  line-height: 27px;
  padding: 26px 9px;
}

/* Faq Page */

/* Profile Page */
.profile-img img {
  border: 3px solid var(--lightOrangeColor);
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 17%;
  /* display: flex; */
  padding: 0.5rem !important;
  transition: 0.5s ease;
}

.profile-img label {
  position: relative;
}

.profile-img label:hover img {
  cursor: -webkit-grab !important;
  cursor: grab !important;
  /* opacity: 0.4 !important; */
}

.profile-img label:hover i {
  opacity: 1 !important;
  z-index: 111;
}

.profile-img label i {
  left: 50%;
  opacity: 0 !important;
  position: absolute;
  font-size: 15px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: rgb(31, 28, 48);
  border-radius: 50px;
  height: 29px;
  text-align: center;
  top: 55%;
  transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  transition: 0.5s ease !important;
}

.profile-img h5 {
  color: #212529;
  font-size: 20px;
  padding-bottom: 7px;
  padding-top: 5px;
  text-transform: capitalize;
}

.profile-img h6 {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 9px;
  padding-bottom: 15px;
}

.profile .withdrawal-input p {
  color: red !important;
}

.profile-page .custom-input {
  position: relative;
}

/* Profile Page */

/* Reset Password */
.customMethod-input label {
  margin-top: 10px;
}

.customMethod-input .custom-input input {
  border: 1px solid #ffced5 !important;
}

.reset-password .login-page {
  height: unset !important;
}

.reset-password label {
  color: #7e7e7e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.reset-password .custom-input {
  position: relative;
  margin-bottom: 10px;
  margin-top: 20px;
}

.reset-password input {
  border-radius: 5px;
  margin-top: 5px;
  /* border: none !important; */
  font-weight: 500 !important;
  color: var(--lightOrangeColor) !important;
  /* background: #f4f4f4; */
}

.reset-password .custom-input .form-input:focus:focus {
  border: none !important;
  background: #f4f4f4 !important;
}

.reset-password .primeHeader {
  margin-bottom: 0px !important;
}

.reset-password {
  background:
    url(webpack:///mini-css-extract-plugin//_next/static/media/loginPageBg.270401fe.png),
    lightgray 50% cover no-repeat;
  background-repeat: no-repeat;
  height: 100vh;
  background-size: cover;
}

.reset-password .login-page .login-page-box {
  height: min-content;
  width: 100%;
  max-width: 494px;
  border-radius: 5px;
  background: #fffafa;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 26px;
}

.reset-password h6 {
  font-weight: 500;
  /* margin-bottom: 8px; */
  color: #495057;
  font-size: 20px;
  margin-top: 28px;
}

/* Reset Password */

/* Premium Plan Page */
.premium-plan .primeMain ul li {
  text-align: justify;
  white-space: nowrap;
  margin-bottom: 10px;
  margin-left: 20px;
}

.premium-plan .primeMain ul li::before {
  left: -19px;
}

/* Premium Plan Page */

/* Notification Dialogue */
.notification-box {
  background-color: white;
  width: 330px;
  height: auto;
}

.notification-head {
  padding: 16px;
}

.notification-head h6 {
  color: grey;
  margin-bottom: 0;
}

.notification-head {
  border-bottom: 1px solid rgb(222, 226, 230) !important;
}

/* Notification Dialogue */
.css-i4bv87-MuiSvgIcon-root {
  width: 0.9em;
  margin-right: 10px;
}

.image-show-multi {
  position: relative;
}

.image-show-multi img {
  margin: 0px !important;
  width: 85px;
  height: 85px;
  border-radius: 3px;
}

.image-show-multi {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-gap: 15px;
  grid-gap: 15px;
  gap: 15px;
  margin-top: 30px;
  justify-items: center;
}

.image-show-multi-box {
  position: relative;
}

.videoCreateModel .videoShow video,
.videoCreateModel .videoShow img {
  object-fit: fill;
  width: 150px;
  height: auto;
  border-radius: 13px;
  border: 1px solid #cbd5e1;
}

.image-show-multi .image-show-multi-box .MuiButtonBase-root {
  left: 63px !important;
  top: -15px !important;
  color: white;
}

.image-show-multi .image-show-multi-box .MuiButtonBase-root svg {
  color: white;
  background-color: #ff4d67;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

.giftCategoryShow {
}

.giftCategoryShow .searching-box label {
  margin: 10px 0px !important;
}

.giftCategoryBox {
  margin-top: 15px;
}

.giftCategoryBox .giftCategory {
  margin-bottom: 21px;
  border-radius: 5px;
  /* background-color: #c9c9c930; */
  background-color: white;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 2px 8px rgb(47 43 61 / 0.12);
}

.giftCategory .giftCategory-img {
  padding: 25px;
  text-align: center;
}

.giftCategoryBox .gift-head h4 {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 5px !important;
}

.giftCategoryBox .all-giftShow {
  margin-bottom: 16px;
}

.giftCategoryBox .gift-head h6 {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 18px;
  margin-top: 3px;
  text-transform: capitalize;
  margin-bottom: 12px !important;
}

.giftCategory-img .img-gift {
  margin-right: auto !important;
  margin-left: auto !important;
  border: 2px solid #997cfa;
  padding: 10px;
  object-fit: cover;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  width: 100px;
  display: block;
}

.newMuiButton {
  background-color: #ff4d67 !important;
}

.giftCategory-img h5 {
  color: rgb(0 0 0 / 68%);
  font-size: 18px;
  text-transform: capitalize;
  margin-top: 30px;
}

.giftCategory-img h6 {
  color: rgba(0, 0, 0, 0.54);
  margin-top: 5px;
  font-size: 14px;
  text-transform: capitalize;
  margin-bottom: 30px;
}

.giftCategory .action-button button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-left: 5px;
  margin-right: 5px;
  background: #f4f4f4;
}

.searchWrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
}

.badge-primary,
a.badge-primary:focus,
a.badge-primary:hover {
  background-color: #bfddfc;
  color: #007bff;
}

.badge-success,
a.badge-success:focus,
a.badge-success:hover {
  background-color: #bffcc7;
  color: #009b0d;
}

.action-button .closeIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 8px;
  margin-left: 5px;
  margin-right: 5px;
  background: #f4f4f4;
}

.action-button .closeIcon svg {
  border-radius: 6px;
  object-fit: cover;
  width: 30px;
  height: 30px;
  fill: red;
}

/* For Back Button */

.back-btn {
  border-radius: 5px;
  max-width: 120px;
  color: white;
  width: 88px;
  background: var(--lightOrangeColor);
  height: 38px;
  display: flex;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.radio-label {
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

/* Styling for the active radio button */
.active-radio input[type="radio"] {
  accent-color: #8a82fb;
  margin-right: 10px;
  /* Change the color of the selected radio to pink */
}

/* Adjust spacing between the radio button and the label text */
.radio-label span {
  margin-left: 30px;
  /* Adds space between radio and the text */
}

/* Custom style for the radio button itself */
.custom-radio {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

/* Ensure vertical alignment of the radio buttons */
.radio-label {
  display: flex;
  align-items: center;
}

.MuiModal-root .create-channel-model {
  width: 600px !important;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ======================== Start DatePicker CSS ======================== */

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before,
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: " ";
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 0;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #ff4d67;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}
.daterangepicker .btn:disabled {
  background-color: #ff4d67 !important;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 4px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 14px;
  padding: 12px 16px !important;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  /* --lightOrangeColor:  */
  background: #8A82FB;
  color: #fff;
  width: inherit;
  height: inherit;
  border-radius: 1px;
  margin: 0 !important;
}
.daterangepicker .ranges li.active:nth-child(1) {
  background-color: transparent;
  color: black;
}
.daterangepicker .ranges li.active:nth-child(1):hover {
  background-color: #eee !important;
}
/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    /* width: 140px; */
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges,
  .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges,
  .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}

/* ======================== End DatePicker CSS ======================== */

/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* font-family: 'Poppins', sans-serif;
font-family: 'Roboto Slab', serif; */

:root {
  --black--: #000;
  --white--: #fff;
  --prime--: #524ae3;
  --blackPrime--: #0f172a;
  --pink--: #cb198e;
  --blackLight--: #1920325c;
  --grayPrime--: #404040;
  --inputBorder--: #cbd5e1;
  --btnPrime--: #524ae3;
  --tablePrime--: #f8fafc;
  --tablePrime--: #e2e8f0;
  --scrollColor--: #b6b6b6;
  --headerPrime--: #f0f4f8;
  --fontPoppins--: "Poppins", sans-serif;
  --fontRoboto--: "Roboto Slab", serif;
  --TableColumnBold--: #334155;
  --TableFont--: rgb(47 43 61 / 0.7);
  --lightOrangeColor: #8a82fb;
  --textLightColor: #565656;
}

/* ======================== Start Input CSS ======================== */

/* all Fields css */
.mobSidebar .mainMenu li a i {
  margin-left: -5px !important;
}
.prime-input {
  margin-bottom: 10px;
  position: relative;
}

.form-input {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid var(--inputBorder--) !important;
  padding: 16px;
  color: #404040 !important;
  font-size: 14px;
  cursor: pointer;
  background-color: #dee2e694;
}

.prime-input label {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--blackPrime--);
}
.subMenu i {
  display: flex;
  align-items: center;
}
.mainMenu .toggleIcon {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
/* For Input Type Password */

.passHideShow {
  position: absolute;
  top: 40px;
  right: 12px;
  cursor: pointer;
}

.password-input {
  height: 38px !important;
  padding: 16px;
  color: #404040 !important;
  font-size: 14px;
  background: "white";
  cursor: pointer;
}

.password-input:focus {
  box-shadow: none;
}
/* For Input Type Search */

.searching {
  position: absolute;
  top: 14px;
  right: 12px;
  cursor: pointer;
}

.inputData {
  font-family: "Poppins", sans-serif !important;
  font-size: 20px;
  position: relative !important;
  text-align: start !important;
  /*Tablate Device*/
  /* Image Input */
  /* Normal Select */
  /* Input Select */
  /*Text Area*/
  /* Box Image Files */
  /* For Input Type Password , Search */
  /* Type Radio And Check Box Label */
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  font-size: 16px;
}

/* For Input Type Number */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Type Radio And Check Box */
.form-check {
  position: relative;
  display: block;
  /* padding-left: 4.25rem; */
}
.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}
.form-check-label {
  margin-bottom: 0;
}
.radioWidth {
  height: 280px !important;
}

.prime-input.radio,
.prime-input.checkbox {
  display: flex;
  align-items: center;
}

.prime-input.radio label,
.prime-input.checkbox label {
  margin-bottom: 0;
  margin-right: 10px;
  cursor: pointer;
}

.form-input[type="radio"],
.form-input[type="checkbox"] {
  height: 18px !important;
  width: 18px !important;
}

.form-input[type="radio"],
.form-input[type="checkbox"] {
  accent-color: var(--blackPrime--);
}

/* For Input Type File */

.form-input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  border: none;
  background: var(--blackPrime--);
  padding: 0px 20px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  height: 43px !important;
}

.form-input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: none;
  background: var(--blackPrime--);
  padding: 0px 20px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  height: 43px !important;
}

.css-1nmdiq5-menu {
  padding: 10px !important;
}

.form-input[type="file"] {
  padding: 0px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  margin-top: 7px;
}

.errorMessage {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 0px;
  color: red !important;
}
@media screen and (max-width: 425px) {
  .form-input[type="file"]::-webkit-file-upload-button {
    margin-right: 10px;
    border: none;
    background: var(--blackPrime--);
    padding: 0 5px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
    height: 35px;
  }
  .form-input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: none;
    background: var(--blackPrime--);
    padding: 0 5px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    height: 35px;
  }
}

/* ======================== End Input CSS ======================== */

/* ======================== Start Button CSS ======================== */

.themeBtn {
  border: 0;
  /* padding: 10px; */
}

.bgsuccess {
  background-color: rgb(25, 135, 84);
}
.searchBarBorder {
  border-right: none !important;
}
.searchBarBorder:focus {
  border-right: none !important;
  border: 1px solid rgb(166, 163, 163) !important;
}
/* Button Background Color CSS */

.btnPrime {
  background-color: var(--btnPrime--) !important;
  color: var(--white--) !important;
}

.btnBlackPrime {
  background-color: var(--blackPrime--) !important;
  color: var(--white--) !important;
}

/* ======================== End Button CSS ======================== */

/* ======================== Start Toggle Switch CSS ======================== */

.checkbox {
  display: none;
}

.slider {
  width: 60px;
  height: 30px;
  background-color: lightgray;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  transition: 0.3s;
  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
  cursor: pointer;
}
.Mui-checked {
  color: var(--lightOrangeColor);
}
.Mui-checked + .MuiSwitch-track {
  background: var(--lightOrangeColor) !important;
}

/* ======================== End Toggle Switch CSS ======================== */
/* ======================== Start Table CSS ======================== */

.primeHeader {
  /* border-bottom: 1px solid var(--grayPrime--); */
  padding: 0px 30px;
  /* background-color: var(--headerPrime--); */
}

.titlePath {
  font-weight: 500;
}
/* tost */
.Toastify__toast-body div {
  text-transform: capitalize !important;
}
/* tost */
/* model */
.MuiModal-root {
  z-index: 9999999 !important;
}
/* model */
.swal-overlay {
  z-index: 99999999;
}

.primeMain {
  /* min-height: 75vh;
  max-height: 75vh; */
  /* overflow: auto; */
  /* margin-top: 10px; */
  font-size: 14px;
  /* border-radius: 15px; */
  /* padding: 0 20px; */
  font-family: var(--fontPoppins--);
}

.tableHeader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tableMain {
  /* background-color: white; */
  border-radius: 16px !important;
  /* width: fit-content; */
  /* overflow: overlay;
  margin: 0px 18px; */

  overflow: scroll;
  margin: 0px 18px;
  max-height: 660px;
}

/* .primeTable {} */

.primeTable tr th {
  background-color: inherit;
  padding: 12px 16px;
  font-family: var(--fontPoppins--);
  font-size: 13px;
  font-weight: 500;
  /* font-weight: 600; */
  text-transform: uppercase;
  /* font-weight: 600; */
}
.primeTable {
  background-color: #fcfcfc;
}
.primeTable tr th:nth-child(1) {
  /* border-radius: 22px 22px 0px 0px; */
  /* border-top-right-radius: 0px; */
}
.primeTable tr th:nth-last-child(1) {
  /* border-radius: 22px 22px 0px 0px !important; */
  /* border-top-left-radius: 0px !important; */
}
/* .primeTable tr td {
  padding: 12px 20px;
  border-bottom: 1px solid #cfcfcf;
  font-family: "Poppins", sans-serif;
  color: var(--TableFont--);
  font-size: 15px;
  font-weight: 400;
} */
tbody tr td {
  padding: 8px 10px;
  /* border-bottom: 1px solid #cfcfcf; */
  font-family: "Poppins", sans-serif;
  color: var(--TableFont--);
  /* font-size: 15px; */
  /* font-weight: 400; */
  background-color: white;
}

thead tr td {
  padding: 12px 20px;
  border-bottom: 1px solid #cfcfcf;
  font-family: "Poppins", sans-serif;
  color: var(--TableFont--);
  /* font-size: 15px; */
  font-weight: 400;
}
thead {
  background-color: #e2e8f0;
}
.tableBoldFont {
  color: var(--TableColumnBold--);
  /* font-size: 13px;  */
  font-weight: 500;
}

/* pagination CSS */

.paginationBtn:disabled {
  opacity: 0.8;
}

/* ================================================Pagination CSS=========================================== */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.pageOption {
  padding: 5px 6px;
  border-radius: 10%;
}
.count {
  margin: 15px;
}
.page-btn {
  border-radius: 65px;
  border: 1px solid #c9c9c9;
  background: #fff;
  width: 45px;
  margin-top: 15px;
  height: 45px;
  margin-right: 8px;
}
.page-btn svg {
  width: 16px;
  height: 18px;
}
.active {
  height: 45px;
  width: 45px;
  /* padding: 10px 17px; */
  border-radius: 50px;
  color: #cfcfcf;
  border: none;
  /* margin-top: 15px; */
}
.active svg path {
  color: white;
}
.active-btn {
  height: 50px;
  width: 50px;
  margin: 5px;
  /* padding: 10px 15px; */
  border-radius: 50%;
  /* background-color: #494594; */
  color: #000;
  border: none;
}
.pagination .makeStyles-root-29 {
  display: flex !important;
}
/* Pagination Selection */

.tableSelection {
  margin-right: 15px;
  padding: 5px;
}

/* Pagination Selection */

.tableSelection {
  margin-right: 15px;
  padding: 5px;
}

/* Dialogue CSS */

.mainDialogue {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #00000050;
  opacity: 0;
  animation: fade-in 0.1s ease-in;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.1s ease-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.Dialogue {
  width: 600px;
  min-height: 290px;
  background-color: var(--white--);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 111;
  border-radius: 10px;
}
.faeHostDialog {
  max-width: 65%;
  min-height: 290px;
  background-color: var(--white--);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 111;
  border-radius: 10px;
  max-height: 90vh;
}

@media screen and (max-width: 630px) {
  .Dialogue {
    width: 97%;
  }
}

/* Header */
.dialogueHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  padding: 20px;
}

.headerTitle {
  font-size: 22px;
}

.closeBtn {
  background-color: var(--blackPrime--);
  color: var(--white--);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.closeBtn span {
  /* margin-top: -3px; */
  font-size: 24px;
}

/* Main */
.dialogueMain {
  padding: 20px;
  position: relative;
}

/* Footer */
.dialogueFooter {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 426px) {
  .dialogueFooter {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* ======================== End Table CSS ======================== */

/* ======================== Start Scroll CSS ======================== */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
/* width */

/* ======================== End Scroll CSS ======================== */

/* ======================== Start Setting Box CSS ======================== */
.dayAnalytics {
  display: flex;
  justify-content: flex-end;
}
.date-range-box {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* .date-range-box input {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
} */
.date-range-box input:focus-visible {
  outline: none;
}
.right-drp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 92px;
  color: white;
  height: 48px;
  border-radius: 10px;
  /* border-radius: 0px 100px 100px 0px; */
  background: #8a82fb;
  font-size: 14px;
}
.right-drp-btn svg {
  color: white;
}
.settingMain {
  padding: 20px;
  overflow: auto;
  /* height: 82vh; */
}

.settingBox {
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  /* box-shadow: 0 0 4px #0000005c; */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.loginType {
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  /* box-shadow: 0 0 4px #0000005c; */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.bgSetting {
  background-color: #fff;
}

.settingInnerBox .prime-input {
  margin-bottom: 5px !important;
}

.settingBoxHeader {
  margin-bottom: 15px;
}

.mainTitle {
  font-size: 22px;
  font-weight: bold;
}

/* ======================== End Setting Box CSS ======================== */

/* ======================== Start Dashboard Box CSS ======================== */
.mainDashboard {
  padding: 30px;
}

.dashboardBox {
  padding: 15px;
  background-color: #ededed;
  border-radius: 6px;
  box-shadow: -2px 2px 8px #00000030;
}

.dashIcon {
  font-size: 40px;
}

.dName {
  font-size: 20px;
}

.dCount {
  font-size: 40px;
  line-height: 40px;
}

.showMoreBtn {
  margin-top: 10px;
}
/* extra */

.description {
  width: calc(100% - 160px) !important;
}
#description {
  width: calc(100% - 160px) !important;
}
.cursor {
  cursor: pointer !important;
}

.pos-center {
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.loader2 {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ======================== End Dashboard Box CSS ======================== */

.totalDollar {
  border: 1px solid darkgray;
  padding: 12px;
  border-radius: 0 10px 10px 0px;
  border-left: none;
}
.totalTex {
  /* border: 1px solid; */
  padding: 13px;
  border-radius: 10px 0 0 10px !important;
  background: var(--bs-green);
  color: white;
  border-radius: 10px;
}

.userBtn {
  border-radius: 5px;
  margin: auto;
  width: 40px;
}

/* ======================== IMPORT IN STYLE CSS ======================== */
/* Table CSS */
/* .userMain table{
  position: relative;
}
.userMain .pagination {
  position: sticky;
  bottom: 0;
  height: 82px;
  background-color: #f1f5f9;
  width: 100%;
  margin: 0px;
} */
.userMain thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 45px;
}
/* fake host dialogue */
.setImage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: 190px;
  /* overflow-y: auto; */
}

.img-container {
  position: relative;
}

.img-container i {
  position: absolute;
  right: 18px;
  top: 4px;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.scroll-content {
  display: flex;
  align-items: center;
  height: 100%;
  /* overflow-y: auto  ; */
}
::-webkit-scrollbar {
  width: 4px;
  color: #404040;
}

::-webkit-scrollbar-thumb {
  background: var(--lightOrangeColor);
  border-radius: 5px;
}

.switchTitleColor {
  color: #64748b;
}
.p2 {
  padding: 12px;
}

/* meTube */

.searchBtn {
  border-radius: 62px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  width: 56px;
  height: 43px;
}
.search-input-box {
  /* display: flex;
  align-items: flex-end;
  flex-direction: column; */
  /* padding-top: 15px; */
}
.searching-box {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.searching-box svg {
  width: 22px;
  height: 22px;
}
.searching-box input {
  height: 56px;
  border: 1px solid var(--lightOrangeColor) !important;
  background-color: white !important;
}
.searching-box input {
  outline: none;
}
.searching-box button {
  background-color: var(--lightOrangeColor);
}

.sideBarLogo {
  background-color: white;
}
.sideBar {
  border-right: 2px solid #ececec;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
/* dayAnalytics */
.dayAnalytics .MuiInputBase-root {
  border-radius: 64px !important;
}
.dayAnalytics .MuiFormControl-root .Mui-focused {
  color: rgba(0, 0, 0, 0.6) !important;
}
.dayAnalytics #dayAnalytics-select {
  display: flex;
  justify-content: center;
}
.dayAnalytics .MuiOutlinedInput-notchedOutline {
  border-color: var(--lightOrangeColor);
}
/* .dayAnalytics svg{
  background-color: var(--lightOrangeColor);
  color: white;
  position: absolute;
  top: 0;
  right: 0;
    width: 50px;
    height: 100%;
    border-radius: 68px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
 } */
.dayAnalytics .MuiSelect-iconOpen {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-radius: 68px;
}
.dayAnalytics .Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #ff9eac !important;
}
.dayAnalytics .MuiInputBase-root:hover {
  border-color: #ff9eac !important;
}
.dayAnalytics .MuiInputBase-root {
  height: 43px;
  width: 190px;
}
.dayAnalytics .MuiBox-root {
  display: flex;
  justify-content: flex-end;
}
.dayAnalytics .Mui-focused .MuiOutlinedInput-notchedOutline {
  color: rgba(0, 0, 0, 0.54) !important;
}
/* dayAnalytics */

/* Multi Button */
.multiButton .MuiButtonBase-root {
  border: none !important;
}
.multiButton .MuiToggleButtonGroup-root {
  /* border: 1px solid #997cfa; */
  /* border-radius: 28px; */
  padding: 1px;
  overflow: visible;
}

.multiButton button {
  border-radius: 5px;
  min-width: 87px;
  width: 100%;
  font-weight: 400 !important;
  /* margin: 2px; */
  padding: 7px 20px;
  font-size: 15px;
  min-height: 38px;
  color: #404040;
  overflow: visible;

  /* background: var(--lightOrangeColor); */
}

.css-ueukts-MuiButtonBase-root-MuiToggleButton-root.Mui-selected:hover {
  background: var(--lightOrangeColor) !important;
}
.multiButton .MuiToggleButtonGroup-root:nth-child(1) {
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.multiButton .MuiToggleButtonGroup-root:nth-child(2) {
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px;
}
.multiButton .MuiToggleButtonGroup-root:nth-child(3) {
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px;
}
.multiButton .MuiToggleButtonGroup-root:nth-child(4) {
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px;
}

.multiButton .MuiToggleButtonGroup-root:nth-last-child(1) {
  border-left: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  /* border-right: 1px solid #997cfa !important; */
}
.multiButton .Mui-selected {
  background: var(--lightOrangeColor);
  color: white !important;
  box-shadow: 0px 2px 6px rgb(115 103 240 / 0.3);
}

/* Multi Button */
/* Table */
.table-custom {
  display: block;
  /* max-height: 417px;
  min-height: 417px; */
  background-color: white;
  height: 100%;
  width: 100%;
  /* overflow: scroll; */
  border: none;
  /* border-radius: 22px; */
}
.table-custom tbody tr td:nth-child(1) {
  border-left: none !important;
}
.table-custom .table-head {
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody::-webkit-scrollbar {
  height: 2px;
  width: 5px;
  background: var(--lightOrangeColor) !important;
  width: 10px !important;
}

tbody::-webkit-scrollbar-thumb:hover {
  -webkit-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
  background: var(--scrollColor--);
}

tbody::-webkit-scrollbar-track {
  border-radius: 2px;
  background: var(--lightOrangeColor);
}

tbody::-webkit-scrollbar-thumb {
  background: var(--scrollColor--);
  border-radius: 5px;
}

.table-custom thead {
  background: white !important;
  /* background: #8A82FB !important; */
  color: black !important;
  border-radius: 22px 22px 0px 0px !important;
  border-bottom: 1px solid #eee;
  /* border-top : 1px solid #eee; */
}
.table-custom tr {
  background-color: radial-gradient(
    circle,
    rgba(139, 130, 252, 1),
    rgba(125, 130, 251, 1),
    rgba(210, 111, 244, 1)
  ) !important;
  color: rgb(47 43 61 / 0.7);
  border-radius: 22px 22px 0px 0px !important;
}
.table-custom thead tr th input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 5px;
  /* border: 1px solid #fff; */
}
.table-custom thead tr th span {
  font-weight: 500;
  font-size: 13px;
}
.table-custom {
  /* margin-top: 10px; */
  /* overflow: scroll; */
}

.table-custom tbody tr td {
  border-bottom: 1px solid #eee;
}
/* Table */
/* Submit Btn */
.submit-btn-dialogue {
  border-radius: 36px;
  /* border-radius: 36px; */
  max-width: 120px;
  color: white;
  width: 100%;
  background: #0fb515;
  height: 43px;
  display: flex;
  font-size: 16px;
  justify-content: center;
  align-items: center;
}
.submit-btn {
  border-radius: 5px;
  max-width: 120px;
  color: white;
  width: 88px;
  background: #0fb515bd;
  /* background: #0fb515; */
  height: 38px;
  display: flex;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  /* margin-left: 10px; */
}
/* Submit Btn */
/* pagination */
.custom-pagination {
  background-color: #fff;
  border-radius: 22px;
}
.custom-pagination .page-btn {
  background: #fff !important;
  opacity: 0.5;
  cursor: not-allowed !important;
}

.pagination-select .selector-custom {
  margin-top: 15px;
}
/* pagination */
.custom-pagination .pagination .disabled,
.custom-pagination .pagination .disabled a {
  opacity: 0.8;
  cursor: not-allowed !important;
}
.custom-pagination .MuiFormControl-root .Mui-focused {
  color: rgba(0, 0, 0, 0.6) !important;
}
.custom-pagination .page-item {
  /* margin-left: 10px; */
  margin-right: 5px;
}
.custom-pagination .page-item:nth-child(1),
.custom-pagination .page-item:nth-child(2),
.custom-pagination .page-item:nth-last-child(1),
.custom-pagination .page-item:nth-last-child(2) {
  border-radius: 5px;
  /* border: 1px solid #c9c9c9; */
  /* background: #fff; */
  width: 40px;
  height: 40px;
  font-size: 13px;
  display: flex;
  margin-right: 5px !important;
  margin-left: 0px !important;
  align-items: center;
  justify-content: center;
  padding: 0px;
  box-shadow: 0px 2px 6px rgb(115 103 240 / 0.1);
}
.custom-pagination .page-item a {
  border-radius: 5px !important;
  /* background: #fff; */
  width: 40px;
  height: 40px;
  align-items: center;
  font-size: 13px;
  color: rgba(33, 37, 41, 0.75) !important;
  display: flex;
  justify-content: center;
  margin-left: 0px !important;
  padding: 0px;
  box-shadow: 0px 2px 6px rgb(115 103 240 / 0.1);
  /* border: 1px solid #c9c9c9 !important; */
}

.custom-pagination .pagination .active,
.custom-pagination .pagination .active a {
  width: 40px;
  height: 40px;
  font-size: 13px;
  border-radius: 5px !important;
  background: var(--lightOrangeColor);
  color: white !important;
}
/* Input Custom */
.custom-input input {
  border-radius: 5px;
  /* border-radius: 65px; */
  border: 1px solid #c9c9c9;
  background: #fff;
}
.custom-input label {
  color: #404040;
  font-weight: 500;
  margin-bottom: 5px;
}
.custom-input .form-input:focus {
  border: 1px solid #ababab !important;
  outline: none;
  background-color: #fefdff !important;
}
/* Input Custom */
/* Selector Custom */
.selector-custom select {
  color: #495057 !important;
  font-size: 14px;
  padding: 16px;
  border: 1px solid #cbd5e1 !important;
  white-space: break-spaces;
  height: 38px;
}

.selector-custom .form-select:focus {
  box-shadow: none;
  border: 1px solid #ababab !important;
  outline: none;
  background-color: #fefdff !important;
}
/* .selector-custom select::placeholder{
  color: #858585 !important;
  font-size: 5px !important;
}
.selector-custom select:-ms-input-placeholder{
  color: #858585 !important;
  font-size: 5px !important;
}
.selector-custom option:first {
 font-size: 10px;
}

.selector-custom fieldset{
  border-radius: 65px;
  border: 1px solid var(--inputBorder--) !important;
} */

.selector-custom .Mui-focused .MuiOutlinedInput-notchedOutline {
  border: 1px solid #ababab !important;
  color: rgba(0, 0, 0, 0.54);
}
.selector-custom .MuiFormControl-root label {
  color: rgba(0, 0, 0, 0.54) !important;
  margin-top: -4px;
}
.selector-custom .MuiInputBase-root {
  height: 43px;
}
.selector-custom .label-selector-custom {
  color: #1f1f1f;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 15px;
  /* font-size: 15px; */
}
/* Selector Custom */
.back-btn {
  background-color: var(--lightOrangeColor);
  color: white;
  border-radius: 8px;
  width: 82px;
  height: 35px;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
/* Pagination Custom */
/* .pagination-select .pagination {
} */
/* Pagination Custom */
.create-new {
  background-color: var(--lightOrangeColor);
  max-width: 180px;
  color: white;
  font-size: 15px;
  width: 100%;
  border-radius: 64px;
}

/* react-date-range-picker */
.react-date-range-picker label {
  color: #1f1f1f;
  font-weight: 500;
  margin-bottom: 5px;
}
.react-date-range-picker input {
  border-radius: 65px;
  width: 100% !important;
  height: 43px !important;
  border: 1px solid var(--inputBorder--) !important;
  padding: 16px;
  font-size: 14px;
  cursor: pointer;
}
.react-date-range-picker input:focus {
  border: 1px solid #ababab !important;
  outline: none;
  background-color: #fefdff !important;
}
/* react-date-range-picker */
/* audio upload */
.audio-upload audio {
  width: 100% !important;
}
.audio-upload {
  display: flex;
  align-items: center;
}
/* audio upload */

.changePassword-btn {
  background-color: var(--lightOrangeColor);
  color: white;
  font-size: 15px;
  max-width: 200px;
}
.rounded {
  border-radius: 62px !important;
}

.country-dropdown .country-optionList img {
  width: 35px;
  height: 25px;
  object-fit: cover;
  margin-right: 10px;
  margin-left: 20px;
  border-radius: 4px;
}
.country-dropdown .country-optionList span {
  font-size: 14px;
  color: #495057;
}
.country-dropdown .country-optionList {
  height: 40px;
  cursor: pointer;
  border-bottom: 1px solid #bfddfc;
  display: flex;
  align-items: center;
}
.country-dropdown .custom-multi-value {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid #b6b6b6;
  margin: 5px 5px;
  border-radius: 6px;
}
.country-dropdown .custom-multi-value svg {
  color: red;
  font-size: 19px;
  cursor: pointer;
  margin-left: 6px;
}
#react-select-2-listbox {
  max-height: 216px !important;
}
.country-dropdown label {
  color: #1f1f1f;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 15px;
}
.country-dropdown .optionShow-option img {
  width: 35px;
  height: 25px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
}
.country-dropdown .optionShow-option span {
  font-size: 14px;
  color: #495057;
}

.userText {
  transition: 0.1s ease-in !important;
}

.css-1yk1gt9-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root {
  border-radius: 30px !important;
}

/* .userText:hover {
  color: var(--lightOrangeColor) !important;
} */

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);

  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px !important;
  width: 32px !important;
  background-color: rgba(64, 81, 137, 0.2) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px) !important;
  border-radius: 8px !important;
}

swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0;
  /* font-feature-settings: ; */
  font-feature-settings: ;
  font-variant: initial;
  line-height: 1;
  color: #b93160 !important;
}
/* 
.multi-user-btn{
  margin-bottom: 0 !important;
  margin-top: 1.5rem !important;
} */

.progress-bar {
  background: #8a82fb;
}

.cursor-pointer {
  cursor: pointer;
}

.hidden {
  visibility: hidden;
}

input:-moz-read-only {
  background-color: #f0f0f0;
  color: gray;
  cursor: not-allowed;
}

input:read-only {
  background-color: #f0f0f0;
  color: gray;
  cursor: not-allowed;
}

.badge-primary {
  color: #7367f0 !important;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e8e7fd !important;
      font-size: small !important;
    font-weight: 500 !important;
}

.badge-warning {
  color: #ff9f43 !important;
  padding: 2px 6px;
  border-radius: 5px;
  background: #fff0e1 !important;
      font-size: small !important;
    font-weight: 500 !important;
}

@media screen and (min-width: 947px) and (max-width: 1558px) {
  .dashboard-count-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-count-box .adminProfileBox {
    width: 100%;
  }
}

@media screen and (min-width: 947px) and (max-width: 1324px) {
  .dashboard-chart-box {
    width: 60%;
  }
  .dashboard-total-user {
    width: 40%;
  }
}

.create-channel-model {
  width: min(600px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
}

@media only screen and (max-width: 420px) {
  .fake-user .fake-create-img img {
    width: 100%;
    max-width: 150px;
    height: auto;
  }
}

@media only screen and (max-width: 500px) {
  .dashboard .dashboard-user-count text {
    text-anchor: end !important;
  }
}

@media only screen and (max-width: 412px) {
  .custom-pagination .page-item a {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .custom-pagination .page-item:nth-child(1),
  .custom-pagination .page-item:nth-child(2),
  .custom-pagination .page-item:nth-last-child(1),
  .custom-pagination .page-item:nth-last-child(2) {
    width: 40px;
    height: 40px;
  }
  .custom-pagination .pagination .active,
  .custom-pagination .pagination .active a {
    width: 45px;
    height: 45px;
  }
  .custom-pagination .page-item {
    margin-left: -3px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 573px) {
  .video-show {
    flex-direction: column;
  }
  .video-show video {
    margin-bottom: 10px;
    max-width: 100%;
  }
  .video-upload-page .video-show img {
    margin: 0px;
  }
}

@media screen and (max-width: 650px) {
  .multiButton .MuiButtonBase-root {
    border: 1px solid var(--lightOrangeColor) !important;
  }
  .multiButton .MuiToggleButtonGroup-root {
    border: none !important;
  }
}

@media screen and (max-width: 714px) {
  .custom-pagination {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 31px;
  }
  .custom-pagination .pagination-select {
    margin-bottom: 16px;
    width: 100%;
    align-items: center;
    min-width: 0;
    max-width: 268px;
    margin-left: 0px;
    justify-content: center;
  }
  .custom-pagination .pagination {
    width: 100%;
    margin-top: 10px;
    align-items: center;
  }
  .custom-pagination .pagination p {
    text-align: center;
  }
  .custom-pagination .pagination .active {
    margin-top: 0px;
  }
}

@media screen and (max-width: 768px) {
  .pagination-select {
    margin-top: 20px;
  }
  .pagination-box {
    justify-content: flex-start !important;
  }
}

@media screen and (max-width: 992px) {
  .dayAnalytics {
    justify-content: center;
    margin-top: 10px;
  }
  .login-img {
    display: flex;
    justify-content: center;
  }
  .login-img img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .right-login-img {
    display: none;
  }
  .text-login {
    border-left: none !important;
  }
  .login-page-content .login-page-box {
    width: 100%;
    max-width: 377px;
  }
}

@media screen and (max-width: 400px) {
  .login-page-content .login-page-box {
    max-width: 100% !important;
    padding: 20px;
  }
}

/* ============================================================
   OraLive admin — "editorial precision / premium control room"
   Single source-of-truth stylesheet, loaded last in _app.jsx.

   Aesthetic: dark sidebar console + light data plane.
   Italic serif display, geometric sans body, mono numerals.
   Surgical red accents (never the dominant color in data zones).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ─── 1. Tokens ───────────────────────────────────────────── */

:root {
  /* Brand */
  --ora-red:        #ef3b41;
  --ora-red-bright: #ff474e;
  --ora-red-deep:   #c12a30;
  --ora-red-50:     #fff2f3;
  --ora-red-100:    #ffe1e3;
  --ora-red-200:    #ffc5c8;
  --ora-red-300:    #ff8b91;
  --ora-red-soft:   rgba(239, 59, 65, 0.08);
  --ora-red-tint:   rgba(239, 59, 65, 0.14);
  --ora-grad-brand: linear-gradient(135deg, #ff474e 0%, #e6343a 60%, #c12a30 100%);

  /* Dark console (sidebar + login hero) */
  --ora-ink-900:    #08090b;
  --ora-ink-850:    #0d0e11;
  --ora-ink-800:    #121316;
  --ora-ink-700:    #1c1e22;
  --ora-ink-600:    #2a2c31;
  --ora-ink-500:    #3a3d44;
  --ora-ink-400:    #5c6068;
  --ora-ink-300:    #8e9199;
  --ora-ink-200:    #b8bac1;
  --ora-ink-100:    #d8dade;
  --ora-ink-50:     #ecedef;

  /* Light data plane */
  --ora-bg:         #f6f6f8;
  --ora-bg-soft:    #fafafb;
  --ora-surface:    #ffffff;
  --ora-surface-2:  #fbfbfc;
  --ora-border:     #e8e8ec;
  --ora-border-soft:#f0f0f3;
  --ora-line:       #ededf1;

  /* Text */
  --ora-text:       #18191c;
  --ora-text-muted: #6b6d75;
  --ora-text-faint: #9ea0a8;
  --ora-text-on-dark: #ecedef;
  --ora-text-on-dark-muted: #9499a3;

  /* Shadows — quiet, never showy */
  --ora-shadow-xs:  0 1px 2px rgba(15, 17, 22, 0.04);
  --ora-shadow-sm:  0 1px 3px rgba(15, 17, 22, 0.06), 0 1px 2px rgba(15, 17, 22, 0.04);
  --ora-shadow-md:  0 10px 30px -12px rgba(15, 17, 22, 0.18), 0 4px 10px -6px rgba(15, 17, 22, 0.08);
  --ora-shadow-lg:  0 28px 60px -24px rgba(15, 17, 22, 0.30);
  --ora-shadow-red: 0 8px 22px -8px rgba(239, 59, 65, 0.42);
  --ora-shadow-ring: 0 0 0 3px rgba(239, 59, 65, 0.16);

  /* Geometry */
  --ora-sidebar-w:            264px;
  --ora-sidebar-w-collapsed:  74px;
  --ora-navbar-h:             68px;
  --ora-content-px:           28px;
  --ora-content-py:           28px;

  --ora-radius-xs: 6px;
  --ora-radius-sm: 9px;
  --ora-radius:    12px;
  --ora-radius-lg: 18px;
  --ora-radius-xl: 24px;

  --ora-tx:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ora-tx-fast:   160ms var(--ora-tx);
  --ora-tx-base:   220ms var(--ora-tx);
  --ora-tx-slow:   320ms var(--ora-tx);

  /* Re-map legacy admin vars so untouched pages re-theme automatically */
  --prime--:           var(--ora-red);
  --btnPrime--:        var(--ora-red);
  --lightOrangeColor:  var(--ora-red);
  --pink--:            var(--ora-red);
}

/* ─── 2. Base ─────────────────────────────────────────────── */

html,
body,
input,
button,
select,
textarea {
  font-family: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif !important;
}

html,
body {
  color: var(--ora-text) !important;
  background: var(--ora-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "ss03" on;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ora-red-tint);
  color: var(--ora-red-deep);
}

/* ─── 3. App shell ────────────────────────────────────────── */

.mainContainer {
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  background: var(--ora-bg);
}

.containerLeft {
  flex: 0 0 var(--ora-sidebar-w);
  width: var(--ora-sidebar-w);
  height: 100vh;
  height: 100dvh;
  z-index: 50;
}

.containerRight {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--ora-bg);
}

.mainAdmin {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  margin: 0 !important;
  padding: 24px var(--ora-content-px) 32px !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ora-bg) !important;
  scroll-behavior: smooth;
}

.mainAdmin::-webkit-scrollbar { width: 10px; }
.mainAdmin::-webkit-scrollbar-thumb {
  background: var(--ora-border);
  border: 3px solid var(--ora-bg);
  border-radius: 999px;
}
.mainAdmin::-webkit-scrollbar-thumb:hover { background: var(--ora-ink-200); }

.mainAdmin .comShow {
  background: var(--ora-surface);
  border-radius: var(--ora-radius-lg);
  border: 1px solid var(--ora-border);
  box-shadow: var(--ora-shadow-xs);
  padding: 24px;
  min-width: 0;
  max-width: 100%;
  min-height: calc(100vh - var(--ora-navbar-h) - 56px);
  min-height: calc(100dvh - var(--ora-navbar-h) - 56px);
}

@media (max-width: 768px) {
  .mainAdmin {
    padding: 16px 14px 96px !important;
  }
  .mainAdmin .comShow {
    padding: 16px;
    border-radius: var(--ora-radius);
  }
}

/* ─── 4. Sidebar (dark console) ───────────────────────────── */

.mainSidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.sideBar,
.webSidebar {
  position: relative;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  width: var(--ora-sidebar-w) !important;
  background: var(--ora-ink-850) !important;
  background-image:
    radial-gradient(80% 60% at 0% 0%, rgba(239, 59, 65, 0.08) 0%, transparent 55%),
    radial-gradient(60% 40% at 100% 100%, rgba(239, 59, 65, 0.05) 0%, transparent 60%);
  border-right: 1px solid var(--ora-ink-700);
  color: var(--ora-text-on-dark) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--ora-tx-base);
}

.sideBar::after {
  /* Subtle grain noise for atmosphere */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
}

.sideBarLogo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 22px 22px 18px !important;
  border-bottom: 1px solid var(--ora-ink-700);
  background-color: transparent !important;
  background: transparent !important;
}

.sideBarLogo a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.sideBarLogo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  margin: 0 !important;
  object-fit: cover;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6);
}

/* Brand wordmark — explicit class to avoid hitting Next.js Image's wrapper span */
.ora-brand-wordmark {
  font-family: "Instrument Serif", "Geist", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  color: #ffffff !important;
  background: transparent !important;
  -webkit-text-fill-color: #ffffff !important;
  position: relative !important;
  display: inline-block !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* Mobile navbar brand should be dark on light, not white */
.mainNavbar .logo-show-nav .ora-brand-wordmark {
  color: var(--ora-text) !important;
  -webkit-text-fill-color: var(--ora-text) !important;
  font-size: 22px !important;
}

.ora-brand-wordmark::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ora-red);
  box-shadow: 0 0 0 3px rgba(239, 59, 65, 0.22);
  animation: ora-blink 1.8s ease-in-out infinite;
}

/* Hide blink dot on the mobile-navbar brand (less noisy at the top) */
.mainNavbar .logo-show-nav .ora-brand-wordmark::after {
  display: none;
}

@keyframes ora-blink {
  0%, 70%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(239, 59, 65, 0.22); }
  85% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(239, 59, 65, 0); }
}

.navigation {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  margin-top: 0 !important;
  padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.navigation::-webkit-scrollbar { width: 4px !important; }
.navigation::-webkit-scrollbar-thumb {
  background: var(--ora-ink-600) !important;
  border-radius: 999px !important;
}
.navigation::-webkit-scrollbar-track { background: transparent !important; }

.sideBarTitle {
  font-family: "Geist", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ora-text-on-dark-muted) !important;
  padding: 16px 14px 8px !important;
  margin: 0 !important;
  opacity: 0.7;
}

.mainMenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainMenu > li { padding: 0 !important; }

.mainMenu li a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 9px 14px !important;
  margin: 1px 0 !important;
  border-radius: 9px !important;
  color: var(--ora-text-on-dark) !important;
  font-family: "Geist", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background var(--ora-tx-fast), color var(--ora-tx-fast);
  overflow: hidden;
}

.mainMenu li a > div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.mainMenu li a svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex-shrink: 0;
  color: var(--ora-ink-300);
  transition: color var(--ora-tx-fast);
  stroke-width: 1.6;
}

.mainMenu li a span,
.mainMenu li a > div > span {
  font-family: "Geist", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ora-ink-100) !important;
}

.mainMenu li a:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}
.mainMenu li a:hover svg { color: #fff !important; }
.mainMenu li a:hover span { color: #fff !important; }

/* Active item — restrained: tinted background + 2px red rail on the left,
   never a full red gradient pill. */
.mainMenu .activeMenu,
.mainMenu li > a.activeMenu {
  background: linear-gradient(90deg, rgba(239, 59, 65, 0.14), rgba(239, 59, 65, 0.04)) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mainMenu .activeMenu::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ora-red);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--ora-red);
}

.mainMenu .activeMenu svg,
.mainMenu .activeMenu svg path {
  color: var(--ora-red) !important;
  stroke: currentColor !important;
  fill: none !important;
}
.mainMenu .activeMenu span { color: #fff !important; }

/* ─── 5. Sidebar — mobile drawer ──────────────────────────── */

.mobSidebar-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 11, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 45;
  cursor: pointer;
  touch-action: none;
  overscroll-behavior: contain;
}
.mobSidebar-bg.responsive-bg { display: block !important; }

@media (min-width: 993px) {
  .containerLeft.is-open { transform: none !important; }
  .mobSidebar-bg.responsive-bg { display: none !important; }
}

@media (max-width: 992px) {
  .containerLeft {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    flex: 0 0 auto;
    width: min(86vw, var(--ora-sidebar-w)) !important;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--ora-tx-base);
    box-shadow: 30px 0 80px -20px rgba(0, 0, 0, 0.35);
    overscroll-behavior: contain;
  }
  .containerLeft.is-open { transform: translateX(0); }
}

html[data-drawer-open="true"],
html[data-drawer-open="true"] body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html[data-drawer-open="true"] .mainAdmin {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .containerLeft,
  .sideBar,
  .webSidebar {
    transition: none !important;
  }
}

/* ─── 6. Navbar (light, sticky) ───────────────────────────── */

.mainNavbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 !important;
  padding: 20px var(--ora-content-px) 0 !important;
  background: transparent;
}

.mainNavbar .navBar {
  background: var(--ora-surface) !important;
  border: 1px solid var(--ora-border) !important;
  border-radius: var(--ora-radius) !important;
  box-shadow: var(--ora-shadow-xs);
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  height: var(--ora-navbar-h);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
}

.ora-nav__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.ora-nav__right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.ora-nav__crumb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Geist", sans-serif;
}

.ora-nav__crumb-label {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--ora-text-muted);
  letter-spacing: -0.005em;
}

.ora-nav__crumb-sep {
  color: var(--ora-text-faint);
  font-size: 14px;
}

.ora-nav__crumb-page {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ora-text);
  letter-spacing: -0.01em;
}

@media (max-width: 992px) {
  .ora-nav__crumb { display: none; }
}

.ora-nav__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: var(--ora-bg);
  border: 1px solid var(--ora-border);
  transition: border-color var(--ora-tx-fast), background var(--ora-tx-fast);
}

.ora-nav__profile:hover {
  border-color: var(--ora-red-100);
  background: var(--ora-red-50);
}

.ora-nav__profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  gap: 3px;
}

.ora-nav__profile-name {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ora-text);
  text-transform: capitalize;
}

.ora-nav__profile-role {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ora-text-muted);
  letter-spacing: 0.04em;
}

.ora-nav__profile-avatar {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--ora-border);
  flex-shrink: 0;
}

.ora-nav__profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

@media (max-width: 576px) {
  .ora-nav__profile-meta { display: none; }
  .ora-nav__profile { padding: 3px; }
}

.navToggle {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ora-bg);
  color: var(--ora-text) !important;
  cursor: pointer;
  transition: background var(--ora-tx-fast);
  border: 1px solid var(--ora-border) !important;
}
.navToggle:hover { background: var(--ora-red-50); border-color: var(--ora-red-100) !important; color: var(--ora-red) !important; }
.navToggle svg { color: currentColor !important; }

@media (max-width: 992px) {
  .navToggle { display: inline-flex !important; }
}

.navIcons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navIcons .pe-4 {
  padding-right: 0 !important;
}

.navIcons span {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  color: var(--ora-text);
  font-size: 14px;
}

.navIcons a img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ora-border) !important;
  background: #fff;
  object-fit: cover;
  transition: transform var(--ora-tx-fast);
}
.navIcons a img:hover { transform: scale(1.06); }

/* Mobile brand inside navbar (hidden on desktop, shown <992px) */
.mainNavbar .logo-show-nav { display: none !important; }

@media (max-width: 992px) {
  .mainNavbar { padding: 14px 14px 0 !important; }
  .mainNavbar .navBar { padding: 8px 12px !important; height: 58px; }
  .mainNavbar .logo-show-nav {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    padding: 0 12px !important;
  }
  .mainNavbar .logo-show-nav .sideBarLogo {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    gap: 10px !important;
  }
  .mainNavbar .logo-show-nav .sideBarLogo img {
    width: 30px !important;
    height: 30px !important;
  }
  .mainNavbar .logo-show-nav .sideBarLogo span {
    font-size: 22px !important;
    color: var(--ora-text) !important;
    -webkit-text-fill-color: var(--ora-text) !important;
  }
  .mainNavbar .logo-show-nav .sideBarLogo span::after { display: none; }
}

@media (max-width: 576px) {
  .navIcons { gap: 8px; }
  .navIcons .pe-4.ml-1 span { display: none; }
}

/* ─── 7. Cards / Dashboard ─────────────────────────────────── */

.card,
.card1 {
  background: var(--ora-surface) !important;
  border: 1px solid var(--ora-border) !important;
  border-radius: var(--ora-radius) !important;
  box-shadow: var(--ora-shadow-xs) !important;
  transition: transform var(--ora-tx-fast), box-shadow var(--ora-tx-fast), border-color var(--ora-tx-fast);
}

/* Drop the heavy default bottom margin for stacking inside grids */
.dashboard-count-box .card { margin-bottom: 0 !important; }

.dashboard { padding: 0 !important; }

.dashboard .dashboardHeader,
.dashboardHeader.primeHeader {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 22px !important;
  margin: 0 !important;
}

/* viewProfile.tsx adds `.row` to the dashboardHeader so its bootstrap-grid
   children (col-10 title + col-2 Back button) sit side-by-side. Don't let
   the generic column-stacking rule above clobber that — restore bootstrap
   row behavior when both classes are present. */
.dashboardHeader.primeHeader.row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  /* Bootstrap col-N already total 100 %. The inherited `gap: 6px` from
     the rule above pushes col-2 onto a new line. Restore native row
     spacing (bootstrap gutters handle horizontal spacing). */
  gap: 0 !important;
  padding: 0 !important;
}

.heading-dashboard {
  font-family: "Instrument Serif", "Geist", serif !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 34px !important;
  color: var(--ora-text) !important;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.dashBoardMain {
  padding: 0 !important;
  margin-top: 4px !important;
}

/* 4-col → 3 → 2 → 1 responsive grid */
.dashboard-count-box {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin: 0 0 24px !important;
}

.dashboard-count-box > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: initial !important;
}

@media (max-width: 1200px) { .dashboard-count-box { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dashboard-count-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 520px)  { .dashboard-count-box { grid-template-columns: 1fr; } }

.dashboard-count-box .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ora-radius) !important;
  background: var(--ora-surface) !important;
}

.dashboard-count-box .card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(239, 59, 65, 0.07), transparent 70%);
  pointer-events: none;
}

.dashboard-count-box .card:hover {
  transform: translateY(-1px);
  border-color: var(--ora-border) !important;
  box-shadow: var(--ora-shadow-sm) !important;
}

.dashboard-count-box .card-body { padding: 20px 20px 18px !important; }

.dashboard-count-box .card-body h3 {
  font-family: "Geist", sans-serif !important;
  font-feature-settings: "tnum" on, "cv11" on;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--ora-text) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dashboard-count-box .card-body .fw-medium,
.dashboard-count-box .card-body span {
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  color: var(--ora-text-muted) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}

/* Icon — small, subtle red tint, never large saturated block */
.dashboard-count-box .card-body svg {
  color: var(--ora-red) !important;
  width: 22px !important;
  height: 22px !important;
  padding: 8px !important;
  border-radius: 999px;
  background: var(--ora-red-50);
  box-sizing: content-box;
  stroke-width: 1.7;
}

.dashboard-count-box .progress {
  background: var(--ora-border-soft) !important;
  border-radius: 999px !important;
  height: 4px !important;
  overflow: hidden;
  margin-top: 14px !important;
}

.dashboard-count-box .progress-bar {
  background: var(--ora-grad-brand) !important;
  border-radius: 999px;
}

/* Chart row — preserve bootstrap col-lg-9 / col-lg-3 split */
.dashboard-analytics {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-analytics h6 {
  font-family: "Instrument Serif", "Geist", serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ora-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.dashboard-chart {
  /* Restore bootstrap row gutters, no extra gap that breaks col widths */
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.dashboard-chart-box,
.dashboard-total-user {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 0 !important;
}

.dashboard-user-count,
.user-activity {
  background: var(--ora-surface);
  border: 1px solid var(--ora-border);
  border-radius: var(--ora-radius);
  padding: 18px;
  box-shadow: var(--ora-shadow-xs);
  height: 100%;
}

.user-activity .border-bottom {
  border-bottom: 1px solid var(--ora-line) !important;
  padding: 0 0 14px !important;
  margin: 0 0 6px !important;
}

.user-activity h6 {
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ora-text) !important;
  letter-spacing: -0.005em;
}

.total-user-chart,
.total-active-chart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.total-user-chart h5,
.total-active-chart h5 {
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  color: var(--ora-text-muted) !important;
  margin: 0 !important;
  font-weight: 500;
}

/* Dot markers in "Total User Activity" legend. Specificity must match the
   legacy `.dashboard .user-activity .total-user-chart span` rule in style.css
   that hard-codes purple (#be73f6 / #8a82fb). */
.dashboard .user-activity .total-user-chart span,
.total-user-chart span {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--ora-red) !important;
  display: inline-block !important;
  margin-right: 8px !important;
  flex-shrink: 0;
}

.dashboard .user-activity .total-active-chart span,
.total-active-chart span {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--ora-ink-300) !important;
  display: inline-block !important;
  margin-right: 8px !important;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .dashboard-chart-box,
  .dashboard-total-user {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .dashboard-chart-box { margin-bottom: 14px !important; }
}

/* ─── 8. Buttons ──────────────────────────────────────────── */

.themeBtn,
.login-btn,
.btn-primary {
  font-family: "Geist", sans-serif !important;
  background: var(--ora-grad-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em;
  box-shadow: var(--ora-shadow-red) !important;
  transition: transform var(--ora-tx-fast), filter var(--ora-tx-fast), box-shadow var(--ora-tx-fast) !important;
}

.themeBtn:hover,
.login-btn:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 28px -10px rgba(239, 59, 65, 0.5) !important;
}

.themeBtn:active { transform: translateY(0); filter: brightness(0.96); }

.themeBtn:disabled {
  filter: grayscale(0.4) brightness(0.95);
  opacity: 0.85;
  cursor: not-allowed;
}

/* Dialog Close/Cancel — neutral so it reads as a separate button next to the
   red Submit (otherwise both .themeBtn render the same red gradient and merge). */
.close-model-btn,
.close-model-btn:hover,
.close-model-btn:active {
  background: #eef0f3 !important;
  color: #3a4250 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Action icon buttons (.action-button .themeBtn) — used in tables.
   These must be subtle: tinted square, not big red block. */
.action-button .themeBtn {
  background: var(--ora-red-50) !important;
  color: var(--ora-red) !important;
  box-shadow: none !important;
  border: 1px solid var(--ora-red-100) !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.action-button .themeBtn:hover {
  background: var(--ora-red-100) !important;
  transform: none;
  filter: none;
}

.action-button .themeBtn svg,
.action-button .themeBtn .text-secondary,
.action-button .themeBtn i {
  color: var(--ora-red) !important;
  stroke: var(--ora-red) !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.action-button .themeBtn span { display: none; }

/* ─── 9. Inputs ───────────────────────────────────────────── */

.custom-input label,
.prime-input label {
  font-family: "Geist", sans-serif;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ora-text) !important;
  margin-bottom: 8px !important;
  display: block;
  letter-spacing: -0.005em;
}

.form-input,
.form-control,
.password-input,
input[type="text"]:not([class*="toggle"]):not([class*="form-check"]),
input[type="email"],
input[type="number"],
input[type="tel"] {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid var(--ora-border) !important;
  background: var(--ora-surface) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--ora-text) !important;
  font-family: "Geist", sans-serif !important;
  transition: border-color var(--ora-tx-fast), box-shadow var(--ora-tx-fast);
}

textarea.form-control,
textarea.form-input,
textarea.password-input {
  height: auto !important;
  min-height: 84px;
  line-height: 1.55 !important;
  padding: 12px 14px !important;
  resize: vertical;
  overflow-y: auto;
  overflow-wrap: break-word;
}

@media (max-width: 576px) {
  textarea.form-control,
  textarea.form-input,
  textarea.password-input {
    min-height: 104px;
    max-height: 45vh;
    max-height: 45dvh;
  }
}

input::placeholder,
textarea::placeholder { color: var(--ora-text-faint) !important; }

.form-input:focus,
.form-control:focus,
.password-input:focus,
input:focus {
  outline: none !important;
  border-color: var(--ora-red) !important;
  box-shadow: var(--ora-shadow-ring) !important;
}

/* Bootstrap input-group: keep inline, fix the password eye placement */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  align-items: stretch;
}

.input-group .form-control,
.input-group .password-input,
.input-group .form-input {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  border-radius: 10px 0 0 10px !important;
  border-right: none !important;
}

.input-group-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  border: 1px solid var(--ora-border) !important;
  border-left: none !important;
  background: var(--ora-surface) !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--ora-text-faint);
  padding: 0 14px !important;
  min-width: 46px;
  cursor: pointer;
  transition: color var(--ora-tx-fast), border-color var(--ora-tx-fast);
}
.input-group-text:hover { color: var(--ora-red); }

.input-group:focus-within .form-control,
.input-group:focus-within .password-input,
.input-group:focus-within .input-group-text {
  border-color: var(--ora-red) !important;
}

.errorMessage {
  color: var(--ora-red-deep) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 6px 0 0 !important;
}

/* ─── 10. Tables (.primeTable used by Table.tsx) ──────────── */

.primeMain.table-custom,
.table-responsive {
  background: var(--ora-surface);
  border: 1px solid var(--ora-border);
  border-radius: var(--ora-radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--ora-shadow-xs);
}

.primeMain.table-custom::-webkit-scrollbar { height: 8px; }
.primeMain.table-custom::-webkit-scrollbar-thumb {
  background: var(--ora-border) !important;
  border-radius: 999px;
}

.primeTable,
.table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 !important;
}

.primeTable thead th,
.table thead th {
  background: var(--ora-bg-soft) !important;
  color: var(--ora-text-muted) !important;
  font-family: "Geist", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ora-line) !important;
  padding: 14px 16px !important;
  /* Inherit alignment from the table (Table.tsx adds `.text-center` to
     primeTable, so body cells center). Don't force left on headers — that
     desyncs headers from the data underneath. */
  text-align: inherit;
}

.primeTable.text-center thead th,
.primeTable.text-center tbody td {
  text-align: center !important;
}

.primeTable thead .table-head {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 6px;
}

.primeTable tbody td,
.table tbody td {
  border-bottom: 1px solid var(--ora-line) !important;
  padding: 14px 16px !important;
  vertical-align: middle;
  font-size: 14px;
  color: var(--ora-text);
  font-family: "Geist", sans-serif;
}

/* Make action-column toggles/eye-icons center properly inside their cells */
.primeTable tbody td .toggle.btn,
.primeTable tbody td .action-button,
.primeTable tbody td .form-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.primeTable tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: none !important; }

.primeTable tbody tr:hover td,
.table tbody tr:hover td {
  background: var(--ora-bg-soft);
}

/* Mono-tone numerals in tables (IDs, counts) */
.primeTable tbody td,
.primeTable tbody td span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.primeTable .spinner-border.text-primary {
  border-color: var(--ora-red) transparent var(--ora-red) var(--ora-red);
}

/* ─── 11. Bootstrap toggle (block status) — full override ─── */

/* The legacy .toggle component from bootstrap4-toggle. Make it elegant. */
.toggle,
.toggle.btn,
.toggle-handle {
  background: none !important;
}

/* Wrap toggle in a custom switch — neutral OFF, brand ON */
.toggle.btn {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  background: var(--ora-ink-100) !important;
  border-radius: 999px !important;
  border: none !important;
  overflow: hidden;
  transition: background var(--ora-tx-base);
  box-shadow: inset 0 0 0 1px rgba(15, 17, 22, 0.04);
  padding: 0 !important;
}

.toggle.btn.off {
  background: var(--ora-ink-100) !important;
}

.toggle.btn:not(.off),
.toggle.btn.btn-primary,
.toggle.btn.btn-success,
.toggle.btn.btn-danger {
  background: var(--ora-grad-brand) !important;
}

.toggle .toggle-group {
  position: absolute !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
}

.toggle .btn,
.toggle .toggle-on,
.toggle .toggle-off {
  display: none !important;
}

.toggle .toggle-handle {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform var(--ora-tx-base);
  pointer-events: none;
}

.toggle.btn:not(.off) .toggle-handle {
  transform: translateX(20px);
}

/* ─── 12. Searching / search input ────────────────────────── */

.searching {
  position: relative;
}

.searching input,
input[type="search"],
input[type="search"].form-input,
input.searchBarBorderr {
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ora-border) !important;
  padding: 8px 14px 8px 42px !important;
  background-color: var(--ora-surface) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ea0a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  font-family: "Geist", sans-serif !important;
  font-size: 14px !important;
  color: var(--ora-text) !important;
}

input[type="search"]:focus,
input.searchBarBorderr:focus {
  border-color: var(--ora-red) !important;
  box-shadow: var(--ora-shadow-ring) !important;
  outline: none !important;
}

/* ─── 13. Pagination ──────────────────────────────────────── */

.custom-pagination .page-item a,
.custom-pagination .pagination a {
  border: 1px solid var(--ora-border) !important;
  color: var(--ora-text-muted) !important;
  border-radius: 9px !important;
  background: var(--ora-surface) !important;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  transition: all var(--ora-tx-fast);
}

.custom-pagination .pagination a:hover {
  border-color: var(--ora-red-100) !important;
  color: var(--ora-red) !important;
}

.custom-pagination .pagination .active,
.custom-pagination .pagination .active a {
  background: var(--ora-grad-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--ora-shadow-red);
}

/* ─── 14. Day analytics chips ─────────────────────────────── */

.dayAnalytics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dayAnalytics button,
.dayAnalytics .dayAnalyticsBtn {
  font-family: "Geist", sans-serif !important;
  border: 1px solid var(--ora-border) !important;
  background: var(--ora-surface) !important;
  color: var(--ora-text-muted) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--ora-tx-fast);
}

.dayAnalytics .active,
.dayAnalytics button.active,
.dayAnalytics .dayAnalyticsBtn.active {
  background: var(--ora-grad-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--ora-shadow-red);
}

/* ─── 15. Modals ──────────────────────────────────────────── */

.modal-content,
.modal-dialog {
  border-radius: var(--ora-radius-lg) !important;
  border: 1px solid var(--ora-border) !important;
  box-shadow: var(--ora-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--ora-line) !important;
  padding: 18px 22px !important;
}

.modal-title {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: var(--ora-text) !important;
  letter-spacing: -0.01em;
}

.modal-body { padding: 20px 22px !important; }
.modal-footer { border-top: 1px solid var(--ora-line) !important; padding: 16px 22px !important; }

@media (max-width: 576px) {
  .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
}

/* ─── 16. Auth pages (login / forgot / reset) ─────────────── */

.ora-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  background: var(--ora-bg);
}

@media (max-width: 992px) {
  .ora-auth { grid-template-columns: 1fr; }
}

/* Hero — editorial dark composition, restrained red */
.ora-auth__hero {
  position: relative;
  overflow: hidden;
  background: var(--ora-ink-900);
  color: var(--ora-text-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  isolation: isolate;
}

@media (max-width: 992px) {
  .ora-auth__hero { display: none; }
}

/* Layered atmosphere — single soft red glow, plus subtle grain */
.ora-auth__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 18% 28%, rgba(239, 59, 65, 0.32) 0%, transparent 65%),
    radial-gradient(35% 45% at 90% 92%, rgba(239, 59, 65, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0d0e11 0%, #08090b 100%);
  z-index: -2;
}

.ora-auth__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

.ora-auth__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 32px;
}

.ora-auth__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ora-auth__brand img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.7);
}

.ora-auth__brand-name {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 30px !important;
  letter-spacing: -0.01em;
  color: #fff !important;
  line-height: 1;
  position: relative;
}

.ora-auth__brand-name::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ora-red);
  box-shadow: 0 0 0 3px rgba(239, 59, 65, 0.22), 0 0 20px var(--ora-red);
  animation: ora-blink 1.8s ease-in-out infinite;
}

.ora-auth__brand-name span {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Editorial stat strip below the brand */
.ora-auth__hero-stats {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ora-auth__hero-stats .stat {
  flex: 1 1;
}
.ora-auth__hero-stats .stat-value {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}
.ora-auth__hero-stats .stat-label {
  display: block;
  margin-top: 6px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ora-text-on-dark-muted);
}

.ora-auth__art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  margin: 12px 0;
}

/* Phone-shaped art card — restrained dark glass */
.ora-auth__art-card {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 15;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(239, 59, 65, 0.10), transparent 70%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow:
    0 50px 90px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: perspective(1200px) rotateY(-10deg) rotateX(3deg);
}

.ora-auth__art-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.ora-auth__art-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ora-auth__art-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(239, 59, 65, 0.18);
  border: 1px solid rgba(239, 59, 65, 0.35);
  color: #ff8b91;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.ora-auth__art-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ora-red);
  box-shadow: 0 0 0 4px rgba(239, 59, 65, 0.2);
  animation: ora-pulse 1.4s ease-in-out infinite;
}

@keyframes ora-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 59, 65, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(239, 59, 65, 0); }
}

.ora-auth__art-frame {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 15;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 50px 90px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: perspective(1200px) rotateY(-10deg) rotateX(3deg);
}

.ora-auth__art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(239, 59, 65, 0.14), transparent 35%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 1;
}

.ora-auth__art-badge--float {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(239, 59, 65, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.ora-auth__art-pill {
  font-family: "Geist", sans-serif;
  font-feature-settings: "tnum" on;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.ora-auth__art-bubbles {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.ora-auth__art-bubble {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 9px 13px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 80%;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.ora-auth__art-bubble.me {
  align-self: flex-end;
  background: linear-gradient(135deg, #ef3b41, #c12a30);
  border: none;
  color: #fff;
  font-weight: 500;
}

.ora-auth__art-host {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ora-auth__art-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef3b41, #c12a30);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.ora-auth__art-host-meta strong {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.ora-auth__art-host-meta small {
  font-family: "Geist", sans-serif;
  font-feature-settings: "tnum" on;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

/* Bottom copy area with rotating slider */
.ora-auth__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ora-auth__taglines {
  position: relative;
  min-height: 130px;
}

.ora-auth__taglines > div {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.ora-auth__taglines > div.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ora-auth__taglines > div h2 {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
  font-size: 34px !important;
  font-weight: 400 !important;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff !important;
}

.ora-auth__taglines > div p {
  margin: 12px 0 0;
  font-family: "Geist", sans-serif;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  max-width: 420px;
  line-height: 1.55;
  font-weight: 400;
}

@keyframes ora-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ora-auth__art-img {
  animation: ora-fade-in 0.6s ease;
}

.ora-auth__dots {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ora-auth__dots span {
  width: 16px;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: width 0.4s ease, background 0.4s ease;
}

.ora-auth__dots span.is-active {
  width: 28px;
  background: var(--ora-red);
}

/* Form panel */
.ora-auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: var(--ora-surface);
  position: relative;
}

.ora-auth__form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(239, 59, 65, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

@media (max-width: 992px) {
  .ora-auth__form {
    background:
      radial-gradient(80% 60% at 50% 0%, rgba(239, 59, 65, 0.07) 0%, transparent 60%),
      var(--ora-surface);
    padding: 36px 20px;
  }
}

.ora-auth__form-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ora-auth__form-mobile-brand {
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.ora-auth__form-mobile-brand img { width: 40px; height: 40px; border-radius: 10px; }

.ora-auth__form-mobile-brand strong {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--ora-text);
  position: relative;
}

.ora-auth__form-mobile-brand strong::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ora-red);
  box-shadow: 0 0 0 2px rgba(239, 59, 65, 0.2);
}

@media (max-width: 992px) {
  .ora-auth__form-mobile-brand { display: flex; }
}

.ora-auth__form-inner h1 {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
  font-size: 38px !important;
  font-weight: 400 !important;
  color: var(--ora-text);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.05;
}

.ora-auth__form-inner p.subtitle {
  margin: 12px 0 28px;
  font-family: "Geist", sans-serif;
  color: var(--ora-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.ora-auth__form-inner .custom-input {
  margin-bottom: 16px;
}

.ora-auth__form-inner .forgot-link {
  color: var(--ora-red) !important;
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: right;
  width: 100%;
  margin: 0 0 22px !important;
  cursor: pointer;
  transition: color var(--ora-tx-fast);
}

.ora-auth__form-inner .forgot-link:hover { color: var(--ora-red-deep) !important; }

.ora-auth__form-inner .ora-submit {
  width: 100%;
  padding: 13px 18px !important;
  font-size: 15px !important;
  margin-top: 6px;
  border-radius: 11px !important;
}

.ora-auth__footer-note {
  margin-top: 24px;
  text-align: center;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  color: var(--ora-text-faint);
  letter-spacing: 0.04em;
}

.ora-auth__footer-note a { color: var(--ora-red); font-weight: 500; }

/* ─── 16.5 Global loader → slim top progress bar ──────────── */
/* Replaces the legacy full-screen purple spinner (`.mainLoaderBox` +
   `.loading > .d1/.d2`) with a YouTube/NProgress-style 2px red bar
   fixed to the top of the viewport. Never overlaps inline table loaders. */

.mainLoaderBox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: transparent !important;
  z-index: 9999 !important;
  display: block !important;
  pointer-events: none !important;
  align-items: initial !important;
  justify-content: initial !important;
}

.mainLoaderBox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ora-grad-brand);
  box-shadow: 0 0 16px var(--ora-red), 0 0 4px var(--ora-red);
  animation: ora-loader-bar 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: 999px;
  transform-origin: left center;
}

@keyframes ora-loader-bar {
  0% { transform: translateX(-100%) scaleX(0.4); }
  40% { transform: translateX(0) scaleX(0.6); }
  100% { transform: translateX(100%) scaleX(0.4); }
}

/* Hide the legacy concentric spinners that lived inside .mainLoaderBox */
.mainLoaderBox .loading,
.mainLoaderBox .d1,
.mainLoaderBox .d2,
.loader-new .loading,
.loader-new .d1,
.loader-new .d2 {
  display: none !important;
}

/* Inline table spinner — brand red */
.spinner-border.text-primary,
.primeTable .spinner-border {
  width: 32px !important;
  height: 32px !important;
  border-color: var(--ora-red) transparent var(--ora-red) var(--ora-red) !important;
  border-width: 2.5px !important;
}

.primeTable tbody td p.text-muted {
  color: var(--ora-text-muted) !important;
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* ─── 17. Toastify ────────────────────────────────────────── */

.Toastify__toast {
  font-family: "Geist", sans-serif !important;
  border-radius: var(--ora-radius) !important;
  box-shadow: var(--ora-shadow-md) !important;
}
.Toastify__progress-bar { background: var(--ora-grad-brand) !important; }

/* ─── 18. Misc legacy color overrides ─────────────────────── */

.custom-shortie-color {
  color: var(--ora-red) !important;
  background: var(--ora-grad-brand) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dashBoxData {
  border: 1px solid var(--ora-border) !important;
  border-radius: var(--ora-radius) !important;
}

.chart-container {
  background: var(--ora-surface) !important;
  border: 1px solid var(--ora-border);
  border-radius: var(--ora-radius);
  padding: 16px;
}

.viewbutton {
  background: var(--ora-grad-brand) !important;
  box-shadow: var(--ora-shadow-red);
  border-radius: 10px !important;
  padding: 8px 16px !important;
}

/* ─── 19. Selector / dropdowns ────────────────────────────── */

.css-13cymwt-control,
.css-t3ipsp-control,
select.form-control {
  border-radius: 10px !important;
  border: 1px solid var(--ora-border) !important;
  min-height: 44px !important;
  font-family: "Geist", sans-serif;
}

.css-t3ipsp-control {
  border-color: var(--ora-red) !important;
  box-shadow: var(--ora-shadow-ring) !important;
}

/* ─── 20. DateRange picker (brand tint) ───────────────────── */

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--ora-grad-brand) !important;
  color: #fff !important;
}

.daterangepicker .btn-primary {
  background: var(--ora-grad-brand) !important;
  border-color: transparent !important;
}

/* ─── 21. Section / sub-page headers ─────────────────────── */

.primeHeader h4,
.dashboardHeader h4,
.primeHeader .title h4 {
  font-family: "Instrument Serif", serif !important;
  font-style: italic;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ora-text) !important;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Tiny utility text inside the brand area */
.text-secondary { color: var(--ora-text-muted) !important; }

/* ─── 24. MOBILE RESPONSIVE OVERHAUL ───────────────────────────
   Legacy `style.css` has a `@media (max-width: 992px)` block that:
   - hides nav labels inside `.sideBar .mainMenu li a > div > span`
   - shrinks the sidebar to 83px (icon-only)
   - keeps `.user-table-top` and tab strips on a single flex row that doesn't wrap
   - leaves header + search + buttons fighting for space on narrow widths
   These overrides restore a clean tablet/phone layout. */

@media (max-width: 992px) {
  .mainSidebar,
  .containerLeft .sideBar,
  .containerLeft .webSidebar,
  .sideBar.webSidebar {
    width: 100% !important;
  }
  .containerLeft .mainMenu li a > div > span,
  .containerLeft .mainMenu li a span,
  .sideBar .mainMenu li a > div > span,
  .sideBar .mainMenu li a > div,
  .sideBar .mainMenu li a span {
    display: inline-flex !important;
    color: var(--ora-ink-100) !important;
  }
  .sideBar .mainMenu li a {
    justify-content: flex-start !important;
    padding: 10px 14px !important;
  }
  .sideBar .mainMenu li a i {
    margin-right: 10px !important;
  }
  .sideBarLogo span,
  .sideBar .sideBarLogo span {
    display: inline-block !important;
  }
  /* Section headings inside the nav stay readable */
  .navigation .sideBarTitle,
  .webSidebar .navigation p,
  .mobSidebar .navigation p {
    text-align: left !important;
    margin: 14px 14px 8px !important;
    padding: 0 !important;
    display: block !important;
  }
}

@media (max-width: 992px) {
  /* Page chrome */
  .mainAdmin { padding: 16px 14px 80px !important; }
  .mainAdmin .comShow {
    padding: 16px !important;
    border-radius: var(--ora-radius);
  }

  /* User table / generic page headers — stop the header from squeezing the title */
  .user-table-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
    padding: 16px !important;
  }
  .user-table-top h6,
  .user-table-top h5,
  .user-table-top .title,
  .user-table-top > div {
    width: 100% !important;
  }
  .user-table-top input[type="search"],
  .user-table-top .searching input,
  .user-table-top .form-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .user-table-top .submit-btn,
  .user-table-top .themeBtn {
    width: 100% !important;
  }

  /* Searching component’s flex row — stack on mobile */
  .searching,
  .searching-box,
  .searching > .row,
  .searching .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px;
  }

  /* MultiButton tab strip (Real User / Verified User / etc.) — let chips wrap
     and align left so they don't get clipped or stack awkwardly */
  .multiButton {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  .multiButton .MuiToggleButtonGroup-root {
    border: none !important;
    background: transparent !important;
  }
  .multiButton .MuiToggleButton-root {
    border: 1px solid var(--ora-border) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-family: "Geist", sans-serif !important;
    text-transform: none !important;
    color: var(--ora-text-muted) !important;
  }
  .multiButton .Mui-selected {
    background: var(--ora-grad-brand) !important;
    color: #fff !important;
    border-color: transparent !important;
  }

  /* Dayanalytics + page date picker → full width below header */
  .dayAnalytics {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Banned Device / page panels with side description text — stack two-col grids */
  .row.banned-device,
  .row.page-grid,
  .row > .col-md-3,
  .row > .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 12px;
  }

  /* Page heading next to filter chip (e.g. "Total Banned Devices: 1") — stack */
  .page-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .page-header-row .badge {
    align-self: flex-start;
  }

  /* Generic two-column form rows */
  .row > [class*="col-"] {
    margin-bottom: 10px;
  }
}

@media (max-width: 576px) {
  .heading-dashboard {
    font-size: 26px !important;
  }
  .primeHeader h4,
  .dashboardHeader h4 {
    font-size: 22px !important;
  }
  .ora-auth__form-inner h1 { font-size: 30px !important; }
  .mainAdmin .comShow { padding: 12px !important; }

  /* Force the close (×) on modals to be reachable */
  .modal-dialog {
    margin: 6px !important;
    max-width: calc(100vw - 12px) !important;
  }

  /* Pagination — wrap to multiple lines instead of overflowing */
  .custom-pagination .pagination {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
}

/* ─── 25. Tablet (993–1199px) — also tighten paddings ───────────── */
@media (min-width: 993px) and (max-width: 1199px) {
  .dashboard-count-box { gap: 12px; }
  .mainAdmin { padding: 20px 18px 28px !important; }
  .mainAdmin .comShow { padding: 18px !important; }
}

/* ─── 23. Support page stat strip ───────────────────────────── */
/* The grid is inline-styled to 4 columns; collapse on narrow screens. */
@media (max-width: 992px) {
  .user-table > div:first-child[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  .user-table > div:first-child[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 22. Settings page — toggle rows + multi-select chips ─── */

.withdrawal-box {
  border: 1px solid var(--ora-border) !important;
  border-radius: var(--ora-radius) !important;
  background: var(--ora-surface) !important;
  padding: 16px 18px !important;
  box-shadow: var(--ora-shadow-xs);
}

.withdrawal-box h6 {
  font-family: "Geist", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ora-text) !important;
}

/* Toggle rows ("OTP Verification", "OTP Delivery Channel", etc.) */
.payment-setting .payment-content-button,
.payment-content-button {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  height: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  cursor: default !important;
}

.payment-setting .payment-content-button span,
.payment-content-button span {
  font-family: "Geist", sans-serif !important;
  color: var(--ora-text) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em;
  margin: 0 !important;
}

.payment-setting .Mui-checked + .MuiSwitch-track {
  background: var(--ora-grad-brand) !important;
  border: none !important;
  opacity: 1 !important;
}

/* Multi-select chips (e.g. "Image Moderation Categories", language picker) */
.multiSelectContainer {
  margin-top: 6px !important;
  width: 100% !important;
}

.multiSelectContainer .chip,
.payment-setting .chip,
.multiSelectContainer .searchWrapper .chip {
  background: var(--ora-red-soft) !important;
  border: 1px solid var(--ora-red-100) !important;
  color: var(--ora-red-deep) !important;
  border-radius: 999px !important;
  font-family: "Geist", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 4px 4px 10px !important;
  margin: 4px 6px 4px 0 !important;
}

.multiSelectContainer .chip img,
.multiSelectContainer .chip .closeIcon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(85%) saturate(2580%) hue-rotate(338deg) brightness(95%) contrast(98%);
  opacity: 0.85;
}

.multiSelectContainer .searchWrapper {
  border: 1px solid var(--ora-border) !important;
  border-radius: 10px !important;
  background: var(--ora-surface) !important;
  padding: 8px !important;
  min-height: 44px;
}

.multiSelectContainer input.searchBox {
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  color: var(--ora-text) !important;
}

.multiSelectContainer .optionContainer {
  border: 1px solid var(--ora-border) !important;
  border-radius: 10px !important;
  background: var(--ora-surface) !important;
  box-shadow: var(--ora-shadow-md);
  margin-top: 4px;
}

.multiSelectContainer .option {
  font-family: "Geist", sans-serif !important;
  font-size: 13px !important;
  color: var(--ora-text) !important;
}

.multiSelectContainer .highlightOption,
.multiSelectContainer .option:hover {
  background: var(--ora-red-soft) !important;
  color: var(--ora-red-deep) !important;
}

/* Radio buttons (Water Mark Setting, etc.) */
.form-check-input:checked {
  background-color: var(--ora-red) !important;
  border-color: var(--ora-red) !important;
}

.form-check-input:focus {
  border-color: var(--ora-red) !important;
  box-shadow: var(--ora-shadow-ring) !important;
}

/* Storage setting hint text shouldn't be danger-red */
.payment-setting p.text-danger,
.withdrawal-input p.text-danger {
  color: var(--ora-text-muted) !important;
  font-size: 12px !important;
  font-style: italic;
  font-weight: 400 !important;
}

/* ============================================================
   26. RESPONSIVE — page-level overhaul
   Catches every page that mixes bootstrap `col-N` (no breakpoint
   variant) with inline pixel widths. Each rule beats inline
   `style=` via `!important`.
   ============================================================ */

/* ─── 26.0 Button hard-coded widths (legacy) ─────────────────
   `custom.css` / `style.css` give .back-btn (82–88px) and
   .submit-btn (88px / max 120px) fixed widths that crush longer
   labels like "View Recharge History" or "Submit Verification".
   Make them content-sized with sensible min/max and let them
   shrink on phones. */
.back-btn,
.submit-btn {
  width: auto !important;
  max-width: none !important;
  min-width: 96px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  margin-left: 0 !important;
}

/* Row of action buttons (e.g. UserProfile.tsx footer) — keep
   them inline on desktop, allow wrap on small screens. */
.general-setting .row > [class*="col-"].d-flex.justify-content-end {
  gap: 10px;
  flex-wrap: wrap !important;
}
.general-setting .row > [class*="col-"].d-flex.justify-content-end > * {
  margin: 0 !important;
}

@media (max-width: 480px) {
  .back-btn,
  .submit-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .general-setting .row > [class*="col-"].d-flex.justify-content-end {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ─── 26.1 Generic bootstrap col fallback ─────────────────────
   Any `col-1..col-12` inside a `.row` that has no responsive
   variant (col-sm-*/col-md-*/col-lg-*/col-xl-*) collapses to
   100 % width on tablets & phones (≤992px — matches the drawer
   breakpoint in Layout.js). Bootstrap's existing breakpoints win
   on cols that *do* specify a variant. */
@media (max-width: 992px) {
  .row > [class*="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not(.col-12) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ─── 26.1b Settings (AppSetting.tsx) — bulletproof stack ─────
   AppSetting uses bare col-6/col-4 cards. On tablet & phone flip
   every settings row to a column so the App-Setting / Fake-Data
   split AND the inner input pairs stack, regardless of bootstrap
   flex-basis. Inner toggle rows use `.col-12 > .d-flex` so the
   label+switch stay inline (the inner flex is untouched). */
@media (max-width: 992px) {
  .payment-setting-box .row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .payment-setting-box .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── 26.2 viewProfile.tsx — header row ──────────────────────
   Title (col-10) + Back button (col-2) need to stack and the
   Back button must align left + stretch full width. */
@media (max-width: 768px) {
  .dashboardHeader.primeHeader.row {
    flex-direction: column !important;
  }
  .dashboardHeader.primeHeader.row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }
  .dashboardHeader.primeHeader.row > [class*="col-"]:last-child {
    justify-content: flex-start !important;
  }
  .dashboardHeader.primeHeader.row .back-btn {
    width: 100% !important;
    justify-content: center;
  }
}

/* ─── 26.3a UserProfile.tsx — avatar image at all widths ─────
   `.ora-profile-avatar` replaces the previous inline 300×300 px.
   Desktop: 240×240 circle. Mobile rules below shrink further. */
.card1 .avatar-setting .ora-profile-avatar,
.ora-profile-avatar {
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 auto;
  border: 3px solid var(--ora-surface);
  box-shadow: var(--ora-shadow-sm);
}

/* ─── 26.3 UserProfile.tsx — avatar (col-3) + form (col-9) ──── */
@media (max-width: 992px) {
  .card1 > .cardBody.d-flex {
    flex-direction: column !important;
    gap: 18px;
  }
  .card1 .avatar-setting.col-3,
  .card1 .general-setting.col-9,
  .card1 .general-setting.fake-user.col-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .card1 .avatar-setting .userSettingBox,
  .card1 .avatar-setting .image-avatar-box,
  .card1 .avatar-setting .avatar-img-user,
  .card1 .avatar-setting .profile-img,
  .card1 .avatar-setting .profile-img label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .card1 .avatar-setting .ora-profile-avatar,
  .card1 .avatar-setting .profile-img img,
  .card1 .avatar-setting .avatar-img-user img {
    width: 220px !important;
    height: 220px !important;
    max-width: 60vw !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
}
@media (max-width: 480px) {
  .card1 .avatar-setting .ora-profile-avatar,
  .card1 .avatar-setting .profile-img img,
  .card1 .avatar-setting .avatar-img-user img {
    width: 170px !important;
    height: 170px !important;
  }
}

/* The save-row inside the form — let buttons wrap instead of overflowing */
@media (max-width: 576px) {
  .card1 .general-setting .row > .col-12.d-flex.justify-content-end {
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: stretch !important;
  }
  .card1 .general-setting .row > .col-12.d-flex.justify-content-end > * {
    margin: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* ─── 26.4 Standalone `.Dialogue` boxes (custom modals) ───────
   `width: 550px/500px` is inline-styled — override via !important.
   The base CSS already drops to 97% at <=630px, but that rule
   has no !important so the inline width wins. */
@media (max-width: 768px) {
  .Dialogue {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .Dialogue .row > [class*="col-"] {
    margin-bottom: 8px;
  }
}

/* MUI `create-channel-model` modals — responsive widths */
@media (max-width: 600px) {
  .create-channel-model {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ─── 26.5 StoryDialogue — thumbnail (col-2) + meta (col-10) ── */
@media (max-width: 576px) {
  .storyDialogue-card .col-2,
  .storyDialogue-card .col-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ─── 26.6 Inline pixel-width chip / cell containers ─────────
   Common pattern: `style={{ width: "200px" }}` for label columns
   inside flex rows on listing pages (adminEarnings, verification
   request pages, ranking, etc.). Allow them to wrap and never
   exceed viewport. */
@media (max-width: 768px) {
  .mainAdmin div[style*="width: 200px"],
  .mainAdmin div[style*="width: 220px"],
  .mainAdmin div[style*="width: 250px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── 26.7 Generic d-flex rows that should wrap on phones ────
   Bootstrap's `d-flex` does not wrap by default, so multi-cell
   header strips overflow. Force wrap below md. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top .d-flex,
  .mainAdmin .user-table .d-flex.justify-content-between,
  .mainAdmin .userPage > .d-flex,
  .mainAdmin .userSetting > .d-flex {
    flex-wrap: wrap !important;
    gap: 10px;
  }
}

/* ─── 26.8 Form fields inside narrow viewports ───────────────
   ReactSelect / Selector / Input — already 100% width — but the
   wrapper rows sometimes inherit a min-width from bootstrap
   gutters. Reset to keep them inside the viewport. */
@media (max-width: 576px) {
  .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
}

/* ─── 26.9 Tables — guarantee horizontal scroll envelope ────── */
@media (max-width: 992px) {
  .primeMain.table-custom,
  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
  }
  .primeTable,
  .table {
    min-width: 720px;
  }
}

/* ─── 26.10 Owner / ChangePassword cards — center on mobile ── */
@media (max-width: 768px) {
  .owner-page .row,
  .changePassword-page .row {
    flex-direction: column !important;
  }
  .owner-page .row > [class*="col-"],
  .changePassword-page .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ─── 26.11 Chat monitor / liveStream side panels ───────────── */
@media (max-width: 992px) {
  .chatMonitor-shell,
  .liveStream-shell {
    flex-direction: column !important;
  }
  .chatMonitor-shell > *,
  .liveStream-shell > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ─── 26.12 Reaction / banner / mystery-box image previews ──── */
@media (max-width: 576px) {
  .mainAdmin img[style*="width: 300px"],
  .mainAdmin img[style*="width: 250px"],
  .mainAdmin img[style*="width: 200px"],
  .mainAdmin img[style*="width: 150px"] {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
  }
}

/* ─── 26.13 Banner page row & buttons that overflow ─────────── */
@media (max-width: 576px) {
  .banner-actions,
  .currency-actions {
    flex-direction: column !important;
    gap: 8px;
    align-items: stretch !important;
  }
  .banner-actions > *,
  .currency-actions > * {
    width: 100% !important;
  }
}

/* ─── 26.14 Recharge history / withdrawal rows — wrap ────────
   These pages use `flex: 1 1 320px; min-width: 0` already, which
   wraps correctly. The pinned-right "amount" cell needs to drop
   below on phones. */
@media (max-width: 576px) {
  .recharge-row,
  .withdraw-row {
    flex-wrap: wrap !important;
  }
}

html,
body {
  max-width: 100%;
  overscroll-behavior-x: none;
}

.mainAdmin {
  overflow-wrap: break-word;
}

.mainAdmin img,
.mainAdmin video,
.mainAdmin iframe,
.mainAdmin embed,
.mainAdmin object,
.mainAdmin canvas {
  max-width: 100%;
}

.mainAdmin pre,
.mainAdmin code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mainAdmin .apexcharts-canvas,
.mainAdmin .apexcharts-canvas svg {
  max-width: 100% !important;
}

.mainAdmin .comShow > .row,
.mainAdmin .comShow > div > .row {
  --bs-gutter-x: 1rem;
}

@media (max-width: 992px) {
  .mainAdmin .comShow {
    min-height: 0;
  }

  .mainAdmin .primeTable td,
  .mainAdmin .primeTable th {
    overflow-wrap: normal;
    word-break: normal;
  }

  .mainAdmin .table-responsive,
  .mainAdmin .primeMain.table-custom {
    max-width: 100%;
  }

  .login-page,
  .login-page .row {
    height: auto !important;
    min-height: 0 !important;
  }

  .mainAdmin .nav-tabs,
  .mainAdmin .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mainAdmin .nav-tabs::-webkit-scrollbar,
  .mainAdmin .nav-pills::-webkit-scrollbar {
    display: none;
  }
  .mainAdmin .nav-tabs .nav-link,
  .mainAdmin .nav-pills .nav-link {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .MuiDialog-container .MuiPaper-root,
  .MuiDialog-paper {
    margin: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
  }

  .MuiDialogContent-root,
  .MuiDialogActions-root {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .MuiDialogActions-root {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  .modal-dialog {
    margin: 12px auto !important;
    max-width: calc(100% - 24px) !important;
  }
  .modal-body {
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mainAdmin .btn,
  .mainAdmin .themeBtn,
  .mainAdmin .submit-btn,
  .mainAdmin .MuiButton-root {
    min-height: 38px;
  }

  .mainAdmin .dropdown-menu {
    max-width: calc(100vw - 24px);
    overflow-x: hidden;
  }

  .daterangepicker {
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: auto !important;
    overflow-x: auto;
  }
  .daterangepicker .drp-calendar {
    max-width: 100% !important;
    float: none !important;
  }
  .daterangepicker .ranges ul {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .mainAdmin .comShow > div > .d-flex.justify-content-between,
  .mainAdmin .comShow > .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 10px;
  }

  .mainAdmin .btn-group {
    flex-wrap: wrap;
  }
}

.MuiModal-root > .MuiBox-root > .model-header,
.MuiModal-root > .MuiBox-root > .model-body {
  max-width: 100%;
}

.MuiModal-root .Dialogue {
  max-width: 100% !important;
}

@media (max-width: 576px) {
  .MuiModal-root > .MuiBox-root {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .MuiModal-root > .MuiBox-root .model-header,
  .MuiModal-root > .MuiBox-root .model-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .MuiModal-root > .MuiBox-root .model-footer,
  .MuiModal-root > .MuiBox-root .model-body .d-flex.justify-content-end {
    flex-wrap: wrap !important;
    gap: 8px;
  }
}

.MuiModal-root > .MuiBox-root,
.MuiModal-root > .create-channel-model {
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
.MuiModal-root img,
.MuiModal-root video,
.MuiModal-root canvas,
.MuiModal-root iframe,
.MuiModal-root embed {
  max-width: 100%;
  height: auto;
}
.MuiModal-root audio {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.MuiModal-root pre,
.MuiModal-root code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.MuiModal-root .sound-add-box,
.MuiModal-root .sound-add-box-post {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.MuiModal-root .image-show-multi {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-items: start !important;
}
.MuiModal-root .videoShow {
  flex-wrap: wrap !important;
  gap: 12px;
}
.MuiModal-root .videoShow > img,
.MuiModal-root .videoShow > video {
  margin-left: 0 !important;
}
.MuiModal-root #svga {
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto 10px !important;
}
.MuiModal-root #svga canvas {
  width: 100% !important;
  height: auto !important;
}

.mainAdmin .row.search-action {
  flex: 1 1 220px;
  width: 100%;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mainAdmin .row.search-action > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mainAdmin .row.search-action .searching-box {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
.mainAdmin .row.search-action input[type="search"] {
  width: 100% !important;
  min-width: 0 !important;
}
.mainAdmin audio {
  max-width: 100% !important;
}

.mainAdmin .betBox {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.mainAdmin .betBox > [class*="col-"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}

.mainAdmin .giftCategory .giftCategory-img {
  position: relative !important;
}
.mainAdmin .giftCategory .giftCategory-img > .switch {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2;
}

.ora-2fa__qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 18px;
}
.ora-2fa__qr img {
  width: 100%;
  max-width: 180px;
  height: auto;
}
.ora-2fa__manual,
.ora-2fa__backup {
  margin: 0 0 16px;
  min-width: 0;
}
.ora-2fa__manual > label,
.ora-2fa__backup > label {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ora-text);
  margin-bottom: 8px;
  display: block;
}
.ora-2fa__manual code,
.ora-2fa__backup-list code {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--ora-border);
  border-radius: 8px;
  background: var(--ora-bg);
  color: var(--ora-text);
}
.ora-2fa__backup-warning {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  color: var(--ora-text-muted);
  margin: 0 0 8px;
}
.ora-2fa__backup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.ora-auth__form-inner .forgot-link {
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 4px !important;
  margin: 0 0 14px auto !important;
}

@media (max-width: 992px) {
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"] > table {
    min-width: 640px;
  }
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"] > .d-flex.justify-content-end {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
  }
  .mainAdmin .userPage.channelPage .user-table table td,
  .mainAdmin .userPage.channelPage .user-table table td > div {
    overflow-wrap: anywhere;
  }
  .mainAdmin .table-responsive td code,
  .mainAdmin .primeTable td code,
  .mainAdmin .user-table table td code {
    display: inline-block;
    max-width: 200px;
    vertical-align: bottom;
  }
}

@media (max-width: 992px) {
  .mainAdmin .btn-sm,
  .mainAdmin .btn-group-sm > .btn,
  .mainAdmin .form-select-sm,
  .mainAdmin .form-control-sm {
    min-height: 38px !important;
  }
  .mainAdmin table input[type="checkbox"],
  .mainAdmin .table input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    cursor: pointer;
  }
  .mainAdmin table td .btn.btn-sm {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
  }
  .mainAdmin .primeTable img[alt="Info"],
  .mainAdmin .table img[alt="Info"] {
    width: 22px;
    height: 22px;
    padding: 8px;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
  }
  .mainAdmin .form-check.form-switch {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding-left: 0 !important;
  }
  .mainAdmin .form-check.form-switch .form-check-input {
    width: 2.5em !important;
    height: 1.25em !important;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 auto;
  }
  .MuiModal-root .add-withdraw-field-row button {
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
}

@media (max-width: 992px) {
  .mainAdmin .title h4.text-nowrap,
  .mainAdmin .primeHeader .title h4,
  .mainAdmin .dashboardHeader .title h4 {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
  .mainAdmin .dashboardHeader.primeHeader.row {
    flex-direction: column !important;
  }
  .mainAdmin .dashboardHeader.primeHeader.row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }
  .mainAdmin .dashboardHeader.primeHeader.row > *:not([class*="col-"]) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .mainAdmin .dashboardHeader.primeHeader.row .back-btn {
    width: 100% !important;
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .mainAdmin .userPage,
  .mainAdmin .userPage.channelPage,
  .mainAdmin .userSetting,
  .mainAdmin .userPage .userSetting {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  .mainAdmin div[style*="min-height: 100vh"],
  .mainAdmin div[style*="min-height:100vh"],
  .mainAdmin div[style*="min-height: calc(100vh - 80px)"],
  .mainAdmin div[style*="min-height:calc(100vh - 80px)"] {
    min-height: 0 !important;
  }
  .mainAdmin div[style*="minmax(240px"] {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 992px) {
  .mainAdmin .chatMonitor-shell {
    height: auto !important;
    overflow: visible !important;
  }
  .mainAdmin .chatMonitor-shell > div:first-child {
    max-height: 52vh;
    border-right: none !important;
    border-bottom: 1px solid var(--ora-border);
  }
  .mainAdmin .chatMonitor-shell > div:last-child {
    min-height: 60vh;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .mainAdmin .row > .col-md-2 {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    width: 33.3333% !important;
  }
}

@media (min-width: 576px) and (max-width: 992px) {
  .mainAdmin .row > .col-md-3.col-sm-6,
  .mainAdmin .row > .col-md-4.col-sm-6,
  .mainAdmin .row > .col-md-3.col-sm-4,
  .mainAdmin .row > .col-md-4.col-sm-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin div[style*="display: flex"][style*="justify-content: space-between"],
  .mainAdmin div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 10px;
    min-width: 0 !important;
  }
  .mainAdmin .user-table .d-flex.justify-content-end,
  .mainAdmin .user-table-top .d-flex.justify-content-end,
  .mainAdmin .chatMonitor-shell .d-flex.align-items-center.gap-2.p-3 {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .mainAdmin .chatMonitor-shell .d-flex.align-items-center.gap-2.p-3 > .ms-auto {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
  }
  .mainAdmin .dashboardHeader.primeHeader > .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 10px;
    justify-content: flex-start !important;
  }
  .mainAdmin .dashboardHeader.primeHeader > .d-flex.justify-content-between > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .mainAdmin .dashboardHeader.primeHeader > .d-flex.justify-content-between > .ms-2 {
    margin-left: 0 !important;
  }
  .mainAdmin .dashboardHeader.primeHeader .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mainAdmin .dashboardHeader.primeHeader .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mainAdmin .giftCategoryShow > .row > .col-6.new-fake-btn.d-flex {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px;
  }
  .mainAdmin .giftCategoryShow > .row > .col-6.new-fake-btn .me-3 {
    margin-right: 0 !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin .user-table-top .w-25,
  .mainAdmin .user-table-top .w-50 {
    width: 100% !important;
    min-width: 150px;
    flex: 1 1 150px;
  }
  .mainAdmin .user-table-top .d-flex > div {
    min-width: 0;
  }
  .mainAdmin .user-table .row.px-5,
  .mainAdmin .user-table form .row.px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mainAdmin .user-table.p-4 {
    padding: 16px !important;
  }
  .mainAdmin .table-responsive th[style*="min-width: 380px"],
  .mainAdmin .table-responsive th[style*="min-width:380px"] {
    min-width: 230px !important;
  }
  .mainAdmin .table-responsive td > div[style*="max-width: 460px"],
  .mainAdmin .table-responsive td > div[style*="max-width:460px"] {
    max-width: 230px !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin .userPage.channelPage .user-table table thead th:first-child,
  .mainAdmin .userPage.channelPage .user-table tbody tr.ora-perm-row td:first-child {
    min-width: 170px !important;
    width: 170px !important;
    padding: 10px 8px !important;
  }
  .mainAdmin .userPage.channelPage .user-table tbody tr.ora-perm-row td:first-child,
  .mainAdmin .userPage.channelPage .user-table tbody tr.ora-perm-row td:first-child > div {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .mainAdmin .userPage.channelPage .user-table tbody tr.ora-perm-row td input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin .custom-pagination .pagination > div,
  .mainAdmin .custom-pagination .pagination > .w-100 > div {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center;
  }
  .mainAdmin .custom-pagination ul.pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 576px) {
  .mainAdmin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .mainAdmin select:not([multiple]),
  .mainAdmin textarea:not([hidden]),
  .MuiModal-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .MuiModal-root select:not([multiple]),
  .MuiModal-root textarea:not([hidden]),
  .ora-auth__form-inner input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    font-size: 16px !important;
  }
}

@media (max-width: 576px) {
  .mainAdmin .form-select,
  .mainAdmin .form-select-sm {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .mainAdmin .selector-custom .form-group {
    min-width: 0 !important;
    width: 100%;
  }
  .mainAdmin div[style*="min-width: 220px"],
  .mainAdmin div[style*="min-width:220px"],
  .mainAdmin div[style*="min-width: 180px"],
  .mainAdmin div[style*="min-width:180px"] {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  .mainAdmin div[style*="min-width: 120px"],
  .mainAdmin div[style*="min-width:120px"] {
    min-width: 0 !important;
    flex-grow:        1;
    flex-shrink:        1;
    flex-basis:        calc(50% - 8px);
  }
  .mainAdmin div[style*="width:250px"],
  .mainAdmin div[style*="width:200px"],
  .mainAdmin div[style*="width:220px"] {
    width: 100% !important;
    max-width: 250px !important;
    min-width: 0 !important;
  }
  .mainAdmin .search-action .pagination-box .w-100,
  .mainAdmin .search-action .pagination-box select.form-select {
    min-width: 0 !important;
    flex: 1 1 160px !important;
  }
  .mainAdmin .search-action .pagination-box > .d-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 576px) {
  .mainAdmin .comShow > div[style*="padding: 20px"],
  .mainAdmin .comShow > div[style*="padding:20px"],
  .mainAdmin .comShow > .userTable[style*="padding: 20px"],
  .mainAdmin .comShow > .userTable[style*="padding:20px"] {
    padding: 0 !important;
  }
  .mainAdmin .user-table.p-4 {
    padding: 12px !important;
  }
  .mainAdmin div[style*="max-width: 460px"][style*="padding: 48px 40px"],
  .mainAdmin div[style*="max-width:460px"][style*="padding:48px 40px"] {
    padding: 28px 18px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 576px) {
  .mainAdmin .user-table .badge.fs-6.text-nowrap {
    white-space: normal !important;
    font-size: 0.8125rem !important;
    max-width: 100%;
    text-align: center;
  }
  .mainAdmin .user-table > div:first-child > button[style*="border-radius: 999px"],
  .mainAdmin .user-table > div:first-child > button[style*="border-radius:999px"] {
    white-space: normal !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .mainAdmin .user-table .btn-group.w-100 > .btn {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    border-radius: 10px !important;
    min-height: 42px;
  }
  .mainAdmin .user-table .btn-group.w-100 > .btn + .btn {
    margin-top: 8px !important;
  }
  .mainAdmin .user-table .row > .col-md-4.d-flex.justify-content-end > .btn {
    flex: 1 1 160px !important;
    min-height: 40px;
  }
}

@media (max-width: 576px) {
  .mainAdmin .primeTable td img[style*="width: 150px"],
  .mainAdmin .table-custom td img[style*="width: 150px"],
  .mainAdmin .primeTable td img[style*="width:150px"],
  .mainAdmin .table-custom td img[style*="width:150px"] {
    width: 150px !important;
    height: 75px !important;
    max-width: 150px !important;
    object-fit: cover;
  }
  .mainAdmin .payment-setting-box img[style*="border-radius: 170px"],
  .mainAdmin .payment-setting-box div[style*="border-radius: 170px"],
  .mainAdmin .payment-setting-box img[style*="border-radius:170px"],
  .mainAdmin .payment-setting-box div[style*="border-radius:170px"] {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
}

@media (max-width: 400px) {
  .mainAdmin .userPage.channelPage .user-table table thead th:first-child,
  .mainAdmin .userPage.channelPage .user-table tbody tr.ora-perm-row td:first-child {
    min-width: 130px !important;
    width: 130px !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin .giftCategoryShow > .row > .col-6,
  .mainAdmin .giftCategoryShow > .row > .col-6.new-fake-btn {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

.primeMain.table-custom,
.mainAdmin .table-responsive {
  background-image:
    linear-gradient(to right, var(--ora-surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--ora-surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(15, 17, 22, 0.16), rgba(15, 17, 22, 0)),
    linear-gradient(to left, rgba(15, 17, 22, 0.16), rgba(15, 17, 22, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--ora-surface);
}

@media (max-width: 992px) {
  .primeMain.table-custom,
  .mainAdmin .table-responsive,
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"] {
    scrollbar-width: thin;
    scrollbar-color: var(--ora-ink-300) transparent;
  }

  .primeMain.table-custom::-webkit-scrollbar,
  .mainAdmin .table-responsive::-webkit-scrollbar,
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"]::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 8px !important;
  }

  .primeMain.table-custom::-webkit-scrollbar-thumb,
  .mainAdmin .table-responsive::-webkit-scrollbar-thumb,
  .mainAdmin .userPage.channelPage .user-table > div[style*="overflow-x"]::-webkit-scrollbar-thumb {
    background: var(--ora-ink-300) !important;
    border: none !important;
    border-radius: 999px !important;
  }

  .primeMain.table-custom::-webkit-scrollbar-track,
  .mainAdmin .table-responsive::-webkit-scrollbar-track {
    background: var(--ora-border-soft) !important;
    border-radius: 999px;
  }

  .mainAdmin .primeTable td .text-nowrap,
  .mainAdmin .primeTable td span {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ─── 27. serverHealth.tsx — header controls (mobile only) ────
   The page header is an inline-styled flex row: an (empty) NewTitle
   block on the left fighting the "Auto-refresh" checkbox + "Refresh
   now" button on the right. On phones the row squeezes the button
   until its label wraps onto two lines and the checkbox label breaks.
   Stack the header, then keep checkbox (left) + button (right) on one
   tidy row. Desktop layout is untouched. */
@media (max-width: 768px) {
  .mainAdmin .sh-header {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .mainAdmin .sh-header .sh-header-title .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mainAdmin .sh-header .sh-header-title [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mainAdmin .sh-header .sh-controls {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .mainAdmin .sh-header .sh-autorefresh {
    margin: 0 !important;
    gap: 8px !important;
    min-width: 0;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.2;
    cursor: pointer;
  }
  .mainAdmin .sh-header .sh-autorefresh input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    flex: 0 0 auto;
    accent-color: #997cfa;
  }

  .mainAdmin .sh-header .sh-refresh-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 16px !important;
    min-height: 38px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Overall-health banner: the generic "wrap any space-between flex row"
     rule pushes the big ✓ onto its own line, leaving a tall empty block.
     Keep it beside the text and scale it down. */
  .mainAdmin .sh-banner {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .mainAdmin .sh-banner .sh-banner-icon {
    font-size: 40px !important;
    line-height: 1;
    flex: 0 0 auto;
  }
}

/* ─── 28. userTable — search / action row + pagination (mobile) ─
   `.search-action` is a bootstrap row whose two columns pick up
   `margin-bottom: 10px` (26.x) *and* `.pagination-select`'s legacy
   `margin-top: 20px` (responsive.css), leaving a dead band between
   the search field and the All/Submit controls. Drive the spacing
   from one flex gap instead, and keep the select + Submit paired on
   a single line. Desktop layout is untouched. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top .row.search-action {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .mainAdmin .user-table-top .row.search-action > [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .mainAdmin .user-table-top .row.search-action .pagination-select {
    margin-top: 0 !important;
    display: block !important;
  }
  .mainAdmin .user-table-top .row.search-action .searching-box {
    gap: 0 !important;
  }

  /* All / Block / Unblock select + Submit stay side by side */
  .mainAdmin .search-action .pagination-box > .d-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .mainAdmin .search-action .pagination-box .w-100 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mainAdmin .search-action .pagination-box select.form-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px;
  }
  .mainAdmin .search-action .pagination-box .submit-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
  }
}

/* Pagination strip — legacy rules blow the page chips up to 45px and
   add a 31px top margin on phones, so 7 chips wrap onto three rows.
   Keep one compact centered row. */
@media (max-width: 768px) {
  .mainAdmin .custom-pagination {
    margin-top: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mainAdmin .custom-pagination .pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mainAdmin .custom-pagination .pagination p {
    width: 100%;
  }
  /* "Showing x out of y" + the chips are one wrapped flex row — centre both
     lines instead of leaving the chips hanging on the left */
  .mainAdmin .custom-pagination .pagination > div[style*="justify-content: space-between"] {
    justify-content: center !important;
    gap: 10px !important;
  }
  .mainAdmin .custom-pagination .page-item,
  .mainAdmin .custom-pagination .page-item:nth-child(1),
  .mainAdmin .custom-pagination .page-item:nth-child(2),
  .mainAdmin .custom-pagination .page-item:nth-last-child(1),
  .mainAdmin .custom-pagination .page-item:nth-last-child(2),
  .mainAdmin .custom-pagination .page-item a,
  .mainAdmin .custom-pagination .pagination .active,
  .mainAdmin .custom-pagination .pagination .active a {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  .mainAdmin .custom-pagination .pagination .active {
    margin-top: 0 !important;
  }
}

/* ─── 29. viewProfile / UserProfile — footer action buttons ────
   Four `.back-btn` / `.submit-btn` siblings in a `justify-content-end`
   row. On phones they keep their nowrap labels and run off the right
   edge (and stretch tall when the row stretches). Stack them full
   width at a fixed control height. */
@media (max-width: 576px) {
  .mainAdmin .general-setting .row > [class*="col-"].d-flex.justify-content-end,
  .mainAdmin .cadrFooter .d-flex.justify-content-end {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mainAdmin .general-setting .row > [class*="col-"].d-flex.justify-content-end > button,
  .mainAdmin .cadrFooter .d-flex.justify-content-end > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

/* ─── 30. userTable header row — DESKTOP alignment ────────────
   `.user-table-top` is a space-between flex row: a title block that
   claims `w-100` / `width:100%` on the left, and the search + action
   controls on the right. The title eats the width, so `.search-action`
   collapses to its 220px flex-basis and the (min-width'd) select +
   Submit overflow leftwards and paint over the search input. On the
   Fake User tab the controls also sit on three different baselines:
   `.pagination-select` is `align-items: flex-end`, `.new-fake-btn`
   stretches from the top, and the search input is taller than both.
   Give the title auto width, keep every control on one centre line
   at one height. Scoped to `.userPage` and to ≥769px. */
@media (min-width: 769px) {
  /* Only the *title* block may shrink. banner.tsx (and friends) put the
     heading AND the "New" button inside this same full-width div — shrinking
     that one collapses the two together and the button lands on the heading,
     so anything that is itself a flex row is excluded. */
  .mainAdmin .userPage .user-table-top > .w-100:first-child:not(.d-flex),
  .mainAdmin .userPage .user-table-top
    > div[style*="width: 100%"]:first-child:not([style*="display: flex"]) {
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0;
  }

  .mainAdmin .userPage .user-table-top > .d-flex.justify-content-end {
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .mainAdmin .userPage .user-table-top .row.search-action {
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px;
    max-width: 720px;
    min-width: 0 !important;
  }
  .mainAdmin .userPage .user-table-top .row.search-action > [class*="col-"] {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }

  /* All three control groups share the same centre line */
  .mainAdmin .userPage .user-table-top .pagination-select,
  .mainAdmin .userPage .user-table-top .pagination-box,
  .mainAdmin .userPage .user-table-top .new-fake-btn {
    align-items: center !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  .mainAdmin .userPage .user-table-top .new-fake-btn {
    flex: 0 0 auto !important;
  }
  .mainAdmin .userPage .user-table-top .searching-box,
  .mainAdmin .userPage .user-table-top .search-input-box {
    min-width: 0 !important;
  }

  /* …and the same height */
  .mainAdmin .userPage .user-table-top input[type="search"],
  .mainAdmin .userPage .user-table-top select.form-select,
  .mainAdmin .userPage .user-table-top .submit-btn,
  .mainAdmin .userPage .user-table-top .new-fake-btn button {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}

/* ─── 31. userTable — remaining mobile whitespace ─────────────
   (a) the tab chips wrapped onto a second row, leaving a hole next to
   "Fake User"; (b) header → card spacing was four stacked margins;
   (c) `.userPage`'s own 20px padding doubled `.comShow`'s 16px;
   (d) the pagination chips still wrapped because §28's `.pagination`
   selector loses to the earlier `ul.pagination { flex-wrap: wrap }`;
   (e) Fake User's "New" button hung off on its own half-row. */
@media (max-width: 768px) {
  /* (a) one scrollable chip row instead of a ragged second line */
  .mainAdmin .multiButton {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding-bottom: 2px;
  }
  .mainAdmin .multiButton::-webkit-scrollbar {
    display: none;
  }
  .mainAdmin .multiButton .MuiToggleButtonGroup-root {
    flex: 0 0 auto !important;
  }
  .mainAdmin .multiButton .MuiToggleButton-root {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  /* (b) + (c) collapse the header → card stack to a single 12px step */
  .mainAdmin .userPage {
    padding: 0 !important;
  }
  .mainAdmin .userPage .dashboardHeader.primeHeader {
    margin-bottom: 0 !important;
  }
  .mainAdmin .userPage .dashboardHeader .row > [class*="col-"] {
    margin-bottom: 0 !important;
  }
  .mainAdmin .userPage .dayAnalytics {
    margin-top: 0 !important;
  }
  .mainAdmin .userPage .user-table {
    margin-top: 12px !important;
  }
  .mainAdmin .userPage .user-table-top {
    padding: 14px !important;
    gap: 10px !important;
  }

  /* (e) Fake User: search / select+Submit / New as three full-width rows */
  .mainAdmin .userPage .user-table-top > .d-flex.justify-content-end {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  /* Only the Fake User layout stacks — i.e. a `.new-fake-btn` that sits in
     the column'd `.d-flex.justify-content-end` wrapper. banner.tsx puts its
     New button in a `.new-fake-btn` too, but beside the heading, where a
     100% width would push it onto a second row (see §41). */
  .mainAdmin .userPage .user-table-top > .d-flex.justify-content-end .new-fake-btn {
    width: 100% !important;
  }
  .mainAdmin .userPage .user-table-top > .d-flex.justify-content-end .new-fake-btn button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  /* loading / empty table cell — 50px of padding is a lot of dead card */
  .mainAdmin .primeTable tbody td[colspan] {
    padding: 24px 12px !important;
  }
}

/* (d) pagination: one row. Must out-rank `.mainAdmin .custom-pagination
   ul.pagination { flex-wrap: wrap !important }` above — same specificity,
   declared later, so this wins. */
@media (max-width: 768px) {
  .mainAdmin .custom-pagination ul.pagination {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mainAdmin .custom-pagination ul.pagination::-webkit-scrollbar {
    display: none;
  }
  .mainAdmin .custom-pagination ul.pagination .page-item,
  .mainAdmin .custom-pagination ul.pagination .page-item:nth-child(1),
  .mainAdmin .custom-pagination ul.pagination .page-item:nth-child(2),
  .mainAdmin .custom-pagination ul.pagination .page-item:nth-last-child(1),
  .mainAdmin .custom-pagination ul.pagination .page-item:nth-last-child(2),
  .mainAdmin .custom-pagination ul.pagination .page-item a,
  .mainAdmin .custom-pagination ul.pagination .active,
  .mainAdmin .custom-pagination ul.pagination .active a {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
}

/* ─── 32. The stubborn blank under the search row (mobile) ────
   `.mainAdmin .row.search-action { flex: 1 1 220px }` was written for
   a horizontal parent, where 220px is a *width* basis. On phones the
   parent (`.user-table-top`, and Fake User's `.d-flex.gap-2` wrapper)
   flips to `flex-direction: column`, so that basis becomes a **height**
   — reserving 220px for a ~90px block and leaving ~130px of dead white
   card in Real User, Verified User and Fake User alike. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top .row.search-action,
  .mainAdmin .user-table-top > .d-flex.justify-content-end > .row.search-action {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .mainAdmin .user-table-top .row.search-action > [class*="col-"],
  .mainAdmin .user-table-top .searching-box,
  .mainAdmin .user-table-top .pagination-select,
  .mainAdmin .user-table-top .pagination-box {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ─── 33. Date range picker on phones ─────────────────────────
   (a) The panel was pinned to `left: 8px` at `100vw - 16px`, so it sat
   wider than — and offset from — the input that opened it. Line it up
   with the page content inset instead (mainAdmin 14 + comShow 16).
   (b) In Custom Range mode the plugin's `.drp-buttons` is an inline-block
   strip with `line-height: 12px`; against the theme's 40px buttons that
   makes Cancel and Apply overlap. Lay them out as a flex row. */
@media (max-width: 768px) {
  .daterangepicker {
    left: 30px !important;
    right: auto !important;
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
  }
  .daterangepicker .ranges,
  .daterangepicker .ranges ul {
    width: 100% !important;
  }

  .daterangepicker.show-calendar .drp-buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    line-height: normal !important;
    padding: 10px !important;
  }
  .daterangepicker .drp-buttons .drp-selected {
    width: 100%;
    display: block;
    text-align: left;
    padding: 0 0 6px !important;
    font-size: 12px;
    white-space: normal;
  }
  .daterangepicker .drp-buttons .btn,
  .daterangepicker .drp-buttons .applyBtn,
  .daterangepicker .drp-buttons .cancelBtn {
    margin: 0 !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    height: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

@media (max-width: 576px) {
  .daterangepicker {
    left: 26px !important;
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
  }
}

/* ─── 34. In-table action buttons (mobile) ────────────────────
   Row actions like "Unban IP" / "Unban Device" are `.btn` + icon inside
   a narrow cell, so the label breaks across two lines and the button
   grows into a blob. The table already scrolls horizontally, so keep the
   label on one line and let the column be as wide as it needs. */
@media (max-width: 768px) {
  .mainAdmin .primeTable td .btn,
  .mainAdmin .table-responsive td .btn,
  .mainAdmin .user-table td .btn {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: auto !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    min-height: 32px !important;
    height: auto !important;
    line-height: 1.2 !important;
  }
  .mainAdmin .primeTable td .btn svg,
  .mainAdmin .table-responsive td .btn svg,
  .mainAdmin .user-table td .btn svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
  }
  .mainAdmin .primeTable td .btn > *,
  .mainAdmin .table-responsive td .btn > * {
    white-space: nowrap !important;
  }
}

/* ─── 35. Same two gaps, everywhere else (mobile) ─────────────
   §32 fixed the 220px flex-basis-as-height only inside `.user-table-top`.
   Pages like bannedDevice / bannedIP put `<Searching>` in their own
   `flex-column` wrapper, so the dead 130px band came back under the
   search field. Neutralise the basis for every `.search-action`.
   The second gap is the page title → card stack: `mb-3` + an *empty*
   `.multiButton` still carrying its 12px bottom margin + `.user-table`'s
   15px top margin, on top of the page wrapper's own 20px padding. */
@media (max-width: 768px) {
  .mainAdmin .row.search-action {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Title blocks render an empty tab strip when a page passes no labels */
  .mainAdmin .multiButton:empty,
  .mainAdmin .multi-user-btn:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mainAdmin .dashboardHeader.primeHeader {
    margin-bottom: 8px !important;
  }
  .mainAdmin .user-table {
    margin-top: 12px !important;
  }
  .mainAdmin .comShow > div[style*="padding: 20px"],
  .mainAdmin .comShow > div[style*="padding:20px"] {
    padding: 0 !important;
  }
  .mainAdmin .user-table.p-4 {
    padding: 14px !important;
  }
}

/* ─── 36. Card-header control clusters (bannedIP / bannedDevice) ─
   These pages put the search field, the purge pill buttons and the
   "Total …" badge in one `d-flex … flex-wrap` next to the card heading.
   On phones each item wraps onto its own line at its own content width,
   so you get a ragged left-aligned stack of three different shapes with
   a 16px `gap-3` between them. Stack them deliberately instead: one
   column, full width, one control height. */
@media (max-width: 768px) {
  .mainAdmin .user-table > .d-flex > .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
    text-align: left !important;
  }
  .mainAdmin .user-table > .d-flex.mb-4 {
    margin-bottom: 14px !important;
    gap: 10px !important;
  }

  .mainAdmin .user-table > .d-flex > .d-flex > .row.search-action,
  .mainAdmin .user-table > .d-flex > .d-flex > .searching-box {
    width: 100% !important;
    margin: 0 !important;
  }

  .mainAdmin .user-table > .d-flex > .d-flex > .btn {
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    justify-content: center !important;
    white-space: nowrap;
  }

  .mainAdmin .user-table > .d-flex > .d-flex > .badge {
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}

/* ─── 37. bannedIdentity tab pills (mobile) ───────────────────
   An earlier rule stretched these to `flex: 1 1 100%` *and* allowed
   `white-space: normal`, so "Banned Identities (Strong)" broke over two
   lines and each pill became a ~56px slab. Keep them full width — that
   matches §36's stacked controls — but on one line at one control
   height. (Their indigo `#6366f1` is replaced by the brand gradient in
   the page itself, and the "Total" badge now uses `bg-danger` like the
   other ban pages.) */
@media (max-width: 768px) {
  .mainAdmin .user-table > div:first-child > button[style*="border-radius: 999px"],
  .mainAdmin .user-table > div:first-child > button[style*="border-radius:999px"] {
    flex: 1 1 100% !important;
    white-space: nowrap !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    margin-left: 0 !important;
  }
  .mainAdmin .user-table > div:first-child > button[style*="border-radius: 999px"] svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
  }
}

/* ─── 38. Log-page filter clusters (integrityLog, banAttemptLog, …) ─
   DESKTOP: `<Searching>` renders `.row.search-action`, which carries a
   global `width: 100%`. Dropped into these header clusters next to the
   reason/endpoint selects and the Total badge, that 100% forces a line
   break either side of it — so the selects, the search and the badge
   each land on their own row in a ~65% column with the rest of the card
   empty. Let the search size itself and the cluster stays one row.
   MOBILE: the same cluster stacks full width (see §36), the selects
   included. */
@media (min-width: 769px) {
  .mainAdmin .user-table > .d-flex > .d-flex > .row.search-action,
  .mainAdmin .user-table > .d-flex > .d-flex .searching-box {
    width: auto !important;
    flex: 1 1 220px !important;
    min-width: 200px !important;
    max-width: 340px !important;
  }
  .mainAdmin .user-table > .d-flex > .d-flex {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .mainAdmin .user-table > .d-flex > .d-flex > select.form-select {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  .mainAdmin .user-table > .d-flex > .d-flex > .badge {
    flex: 0 0 auto !important;
  }
  /* the description paragraph beside it keeps the leftover room */
  .mainAdmin .user-table > .d-flex > p {
    flex: 1 1 320px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .mainAdmin .user-table > .d-flex > .d-flex > select.form-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
  }
}

/* ─── 39. Native select popups on phones ─────────────────────
   A native <select>'s option list is drawn by the browser at the width
   of its longest option, using the *control's* font — so a 14px control
   with long labels renders a popup that overhangs the field. Dropping
   the control to 13px pulls the popup back in (the long labels
   themselves are shortened in the pages that had them). */
@media (max-width: 768px) {
  .mainAdmin .user-table select.form-select,
  .mainAdmin .user-table-top select.form-select {
    font-size: 13px !important;
    max-width: 100% !important;
  }
  .mainAdmin .user-table select.form-select option,
  .mainAdmin .user-table-top select.form-select option {
    font-size: 13px;
  }
}

/* ─── 40. WhatsApp OTP log — filter row alignment ─────────────
   Six `.col-md-2` blocks, each "label above control". "Phone (with
   country code)" wraps to two lines, which pushes its input a line
   lower than its neighbours, and the Search column (`align-items-end`)
   then sits lower still — so the row reads as three different
   baselines. Make every column a flex column: labels pinned to the top
   at a reserved two-line height, controls pinned to a shared bottom
   line, one control height throughout. */
.mainAdmin .otp-filter-row {
  align-items: flex-end;
}
.mainAdmin .otp-filter-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainAdmin .otp-filter-row .form-label {
  display: block;
  font-size: 13px !important;
  line-height: 1.25;
  margin-bottom: 6px !important;
  min-height: 2.5em;
}
.mainAdmin .otp-filter-row .form-select,
.mainAdmin .otp-filter-row .form-control,
.mainAdmin .otp-filter-row .btn {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}
.mainAdmin .otp-filter-row > [class*="col-"].d-flex.align-items-end {
  justify-content: flex-end;
}

/* On phones the columns stack, so a reserved two-line label is just
   wasted height. */
@media (max-width: 768px) {
  .mainAdmin .otp-filter-row .form-label {
    min-height: 0;
    margin-bottom: 4px !important;
  }
  .mainAdmin .otp-filter-row > [class*="col-"] {
    margin-bottom: 10px !important;
  }
  .mainAdmin .otp-filter-row .btn {
    width: 100% !important;
  }
}

/* ─── 41. banner / giftPage style headers — heading + "New" ───
   These pages build the card header from inline styles rather than the
   `.d-flex` helpers, so §31's stacking never reached them: the heading
   and the New button share one inline `justify-content: space-between`
   div inside `.user-table-top`. Keep them on one line with the button
   hard against the right edge, and stop `.betBox` from claiming space
   it doesn't need. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top > div[style*="justify-content: space-between"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .mainAdmin .user-table-top > div[style*="justify-content: space-between"] > h5 {
    margin: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }
  .mainAdmin .user-table-top .betBox {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .mainAdmin .user-table-top .betBox .new-fake-btn,
  .mainAdmin .user-table-top .betBox [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mainAdmin .user-table-top .betBox button {
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* ─── 42. `.card-head-row` — heading + a single action button ──
   An explicit hook instead of attribute-selector guesswork. Any card
   header that is "title on the left, one button on the right" gets this
   class; the rules below are the last word in the file, so nothing in
   §24's generic `.user-table-top .themeBtn { width: 100% }` (or any
   other legacy full-width rule) can push the button onto its own row. */
@media (max-width: 768px) {
  .mainAdmin .card-head-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .mainAdmin .card-head-row > h5,
  .mainAdmin .card-head-row > h6,
  .mainAdmin .card-head-row > .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }
  .mainAdmin .card-head-row .betBox,
  .mainAdmin .card-head-row .betBox > [class*="col-"],
  .mainAdmin .card-head-row .new-fake-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mainAdmin .card-head-row button,
  .mainAdmin .card-head-row .themeBtn {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* ─── 43. Gift page header actions (mobile) ───────────────────
   "All Gifts / Exclusive" and the "New ⌄" menu button wrapped into a
   ragged 2 + 1 layout at three different widths. Give them a
   deliberate two-row grid: the pair splits the width 50/50, New spans
   the full width below, all at one height. */
@media (max-width: 768px) {
  .mainAdmin .gift-head-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  /* empty spacer div that only contributes a 1rem bottom margin */
  .mainAdmin .gift-head-actions > .dashboardHeader:empty {
    display: none !important;
  }
  .mainAdmin .gift-head-actions .gift-filter-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  .mainAdmin .gift-head-actions .gift-filter-group > .MuiButton-root {
    flex: 1 1 50% !important;
    min-width: 0 !important;
  }
  .mainAdmin .gift-head-actions > .MuiButton-root {
    width: 100% !important;
  }
  .mainAdmin .gift-head-actions .MuiButton-root {
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
}

/* ─── 44. Modal shell — "Add Gift" and every dialog like it ───
   The shared `.model-header / .model-body / .model-footer` shell was a
   plain 5px-radius box with hairline dividers, an inert `boxShadow:
   "24px"` (not a valid value, so no elevation at all) and a footer whose
   buttons were sized by an inline `width: 88px`. Give it real elevation,
   a sticky title and action bar so long forms stay usable, and one
   consistent control size. */
.MuiModal-root > .MuiBox-root {
  border-radius: 16px !important;
  border: 1px solid var(--ora-border) !important;
  background: var(--ora-surface) !important;
  box-shadow:
    0 24px 60px -20px rgba(15, 17, 22, 0.35),
    0 6px 18px -8px rgba(15, 17, 22, 0.18) !important;
}

.MuiModal-root > .MuiBox-root > .model-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px !important;
  background: var(--ora-surface);
  border-bottom: 1px solid var(--ora-border-soft) !important;
  border-radius: 16px 16px 0 0;
}
.MuiModal-root > .MuiBox-root > .model-header p {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--ora-text) !important;
}

/* Header close (×) */
.MuiModal-root > .MuiBox-root > .model-header .model-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ora-border);
  border-radius: 9px;
  background: var(--ora-surface);
  color: var(--ora-text-muted);
  cursor: pointer;
  transition: background var(--ora-tx-fast), color var(--ora-tx-fast);
}
.MuiModal-root > .MuiBox-root > .model-header .model-close:hover {
  background: var(--ora-red-50);
  border-color: var(--ora-red-100);
  color: var(--ora-red);
}

.MuiModal-root > .MuiBox-root > .model-body {
  padding: 16px 20px 20px !important;
  border-bottom: none !important;
}
.MuiModal-root > .MuiBox-root > .model-body img {
  border-radius: 12px;
  border: 1px solid var(--ora-border);
  object-fit: cover;
}

.MuiModal-root > .MuiBox-root > .model-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--ora-surface);
  border-top: 1px solid var(--ora-border-soft);
  border-radius: 0 0 16px 16px;
}
.MuiModal-root > .MuiBox-root > .model-footer > .d-flex {
  padding: 14px 20px !important;
  gap: 10px;
  align-items: center;
}
.MuiModal-root > .MuiBox-root > .model-footer .submit-btn,
.MuiModal-root > .MuiBox-root > .model-footer .close-model-btn {
  width: auto !important;
  min-width: 104px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

/* On phones the two actions share the row instead of hugging the right */
@media (max-width: 576px) {
  .MuiModal-root > .MuiBox-root > .model-footer > .d-flex {
    padding: 12px 14px !important;
  }
  .MuiModal-root > .MuiBox-root > .model-footer .submit-btn,
  .MuiModal-root > .MuiBox-root > .model-footer .close-model-btn {
    flex: 1 1 !important;
    min-width: 0 !important;
  }
  .MuiModal-root > .MuiBox-root > .model-header {
    padding: 14px 16px !important;
  }
  .MuiModal-root > .MuiBox-root > .model-body {
    padding: 14px 16px 16px !important;
  }
}

/* ─── 45. `.card-head-row--stack` — long action labels ────────
   The row variant (§42) only works when the button label is short. On
   notification.tsx the action reads "Send Notification" (~180px) and the
   legacy `.user-table-top .themeBtn { width: 100% }` stretched it edge to
   edge, crushing "Notification History" down to one character per line.
   This modifier stacks instead: title on its own line, action full width
   underneath. Declared after §42 so it wins on equal specificity. */
@media (max-width: 768px) {
  .mainAdmin .card-head-row--stack {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .mainAdmin .card-head-row--stack > h5,
  .mainAdmin .card-head-row--stack > h6 {
    flex: 0 0 auto !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .mainAdmin .card-head-row--stack .new-fake-btn,
  .mainAdmin .card-head-row--stack .betBox {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .mainAdmin .card-head-row--stack button,
  .mainAdmin .card-head-row--stack .themeBtn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }
}

/* ─── 46. Audio players inside table cells (mobile) ───────────
   `.mainAdmin audio { max-width: 100% }` lets the native player shrink to
   whatever the cell gives it. On a phone the Song column collapses to
   ~60px, which crushes the control into an unusable oval — the play
   button is no longer hittable. Native audio controls have a minimum
   usable size, so pin the player to its desktop width and let the table
   scroll horizontally, exactly like the other wide columns do. */
@media (max-width: 768px) {
  .mainAdmin .primeTable td audio,
  .mainAdmin .table-responsive td audio,
  .mainAdmin .user-table td audio {
    width: 240px !important;
    min-width: 240px !important;
    max-width: none !important;
    height: 40px !important;
    display: block;
  }
  .mainAdmin .primeTable td > audio,
  .mainAdmin .table-responsive td > audio {
    margin: 4px 0;
  }
}

/* ─── 47. Card headers built from a bootstrap `.row` ──────────
   Video / FakeVideo / Story / FakeStory build their header as
   `.user-table-top > .row > .col-6 (title) [+ .col-6 (New button)]`.
   `.user-table-top` is a flex container, so that `.row` is a flex item
   sized shrink-to-fit — and a row whose children are percentage-width
   columns has an intrinsic width of ~0. The row collapses, the col-6
   becomes half of nothing and the title renders one letter per line
   (Video / Story, which lack the `w-100` their Fake* twins have).
   Give the row the full width it was always assuming, on every screen. */
.mainAdmin .user-table-top > .row {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
}
.mainAdmin .user-table-top > .row > [class*="col-"] {
  min-width: 0;
}
.mainAdmin .user-table-top > .row h5 {
  overflow-wrap: normal;
  word-break: normal;
}

/* Mobile: title left (wrapping normally), action right, one centred row —
   the 50/50 split leaves the title cramped and the button floating. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top > .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px;
  }
  .mainAdmin .user-table-top > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mainAdmin .user-table-top > .row > [class*="col-"]:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mainAdmin .user-table-top > .row h5 {
    margin: 0 !important;
    font-size: 18px !important;
  }
  .mainAdmin .user-table-top > .row .new-fake-btn,
  .mainAdmin .user-table-top > .row .ms-auto {
    width: auto !important;
    margin: 0 !important;
  }
  .mainAdmin .user-table-top > .row .new-fake-btn button {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* ─── 48. Live Streams header (mobile) ────────────────────────
   Title, type filter, search and the Total badge each took a full row
   with a 16px `gap-3` between them, an extra `px-3 py-2` on top of the
   card's own padding, and the badge left-aligned at content width — a
   tall column with dead corners. Pack it into two rows: the type filter
   shares a line with the Total badge, search spans the width below.
   Scoped to classes added on this header so no other page is touched. */
@media (max-width: 768px) {
  .mainAdmin .stream-head-row {
    padding: 0 !important;
    gap: 10px !important;
  }
  .mainAdmin .stream-head-row > h5 {
    font-size: 18px !important;
  }

  .mainAdmin .stream-head-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  /* row 1 — type filter */
  .mainAdmin .stream-head-controls > div:first-child {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* row 1 — total badge, pinned right at the same height */
  .mainAdmin .stream-head-controls > .badge {
    order: 2;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
    height: 40px;
    display: flex !important;
    align-items: center;
    font-size: 13px !important;
  }
  /* row 2 — search, full width */
  .mainAdmin .stream-head-controls > .flex-grow-1 {
    order: 3;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .mainAdmin .stream-head-controls select.form-select,
  .mainAdmin .stream-head-controls input[type="search"] {
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
  }
}

/* ─── 49. Ranking filter row ──────────────────────────────────
   Desktop: the `.btn-group.w-100` splits `col-md-4` between two long
   labels, so "Weekly Ranking (Hosts)" breaks onto two lines and the
   pair renders ~56px tall against a 38px select — and the action column
   fakes its alignment with `mt-4`, landing on a third baseline. Pin
   every control to one 42px height on a shared bottom edge and keep the
   labels on one line. */
.mainAdmin .ranking-filter-row {
  align-items: flex-end !important;
  row-gap: 12px;
}
.mainAdmin .ranking-filter-row .form-label {
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block;
}
.mainAdmin .ranking-filter-row .btn-group .btn,
.mainAdmin .ranking-filter-row > [class*="col-"] .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.mainAdmin .ranking-filter-row .form-select {
  height: 42px !important;
}
/* the action column no longer needs its hand-tuned top margin */
.mainAdmin .ranking-filter-row > .col-md-4.text-end {
  margin-top: 0 !important;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .mainAdmin .ranking-filter-row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 10px !important;
  }
  .mainAdmin .ranking-filter-row .btn-group {
    width: 100% !important;
  }
  .mainAdmin .ranking-filter-row .btn-group .btn {
    flex: 1 1 50% !important;
    font-size: 12.5px !important;
    padding: 8px 8px !important;
  }
  .mainAdmin .ranking-filter-row > .col-md-4.text-end {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }
  .mainAdmin .ranking-filter-row > .col-md-4.text-end .btn {
    flex: 1 1 auto !important;
  }
}

/* ─── 49b. …and the button-group seam ─────────────────────────
   Bootstrap's `.btn-group` overlaps its children by `margin-left: -1px`
   so adjacent 0-radius buttons share one hairline border. The theme
   gives every `.btn` a 10px radius, so instead of a shared edge the
   filled button's rounded corner sits *on top of* the outlined button's
   left border. Drop the negative margin and separate them properly —
   ranking.tsx holds the only `.btn-group` in the admin. */
.mainAdmin .btn-group {
  gap: 8px;
}
.mainAdmin .btn-group > .btn,
.mainAdmin .btn-group > .btn:not(:first-child),
.mainAdmin .btn-group > .btn:not(:last-child) {
  margin-left: 0 !important;
  border-radius: 10px !important;
}

/* ─── 50. `.w-25` / `.w-50` filter wrappers (mobile) ──────────
   Third instance of the same trap: an earlier rule gives these
   `flex: 1 1 150px` for a horizontal header. The report tabs' header is
   a column on phones (§31e), where that basis becomes a **height** — so
   the "All / Pending / Solved" select sat in a 150px-tall box with
   ~110px of blank card under it, pushing the search field out of view. */
@media (max-width: 768px) {
  .mainAdmin .user-table-top .w-25,
  .mainAdmin .user-table-top .w-50 {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mainAdmin .user-table-top > .d-flex.justify-content-end > div {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  .mainAdmin .user-table-top .w-25 select.form-select,
  .mainAdmin .user-table-top .w-50 select.form-select {
    height: 40px !important;
    width: 100% !important;
  }
}

/* ─── 51. Settings pages — nested gutter pile-up (mobile) ─────
   AppSetting nests three bootstrap `.row`s inside `.payment-setting-box
   .p-3` inside a card. Every level adds its own gutter padding, so by
   the time you reach the inputs each side has ~40px of inherited inset
   on top of `.mainAdmin` (14) + `.comShow` (16) — the fields end up
   half the width of the screen. Flatten the nested gutters on phones
   and let the controls use the card. */
@media (max-width: 768px) {
  .mainAdmin .payment-setting-box {
    padding: 12px !important;
  }
  .mainAdmin .payment-setting-box .row,
  .mainAdmin .payment-setting-box .row .row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mainAdmin .payment-setting-box [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mainAdmin .payment-setting-box .withdrawal-box,
  .mainAdmin .payment-setting-box .payment-box {
    padding: 12px !important;
  }
  .mainAdmin .payment-setting-box .mb-4 {
    margin-bottom: 12px !important;
  }
  .mainAdmin .payment-setting .withdrawal-input {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
  .mainAdmin .payment-setting-box .form-input,
  .mainAdmin .payment-setting-box .form-select,
  .mainAdmin .payment-setting-box input[type="text"],
  .mainAdmin .payment-setting-box input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* card header: title + Submit stay on one line */
  .mainAdmin .payment-setting > .cardHeader > .d-flex {
    padding: 12px !important;
    gap: 10px;
    flex-wrap: nowrap !important;
  }
  .mainAdmin .payment-setting > .cardHeader .submit-btn {
    width: auto !important;
    min-width: 88px !important;
    height: 38px !important;
    margin: 0 !important;
  }
}

/* ─── 52. Settings pages — go tighter on phones ───────────────
   §51 removed the nested bootstrap gutters, but the panels are still a
   card inside a card inside a card: `.mainAdmin` (14) + `.comShow` (12)
   + `.payment-setting-box` (12) + `.withdrawal-box` (12) ≈ 55px of inset
   per side before an input starts. Below 576px trade the nesting for
   width — every settings tab uses `.payment-setting-box`, so this
   reaches App Setting, Payment, Withdraw, Ad, Moderation, Membership,
   Live Quality, Storage and Report Reason alike. */
@media (max-width: 576px) {
  .mainAdmin {
    padding: 12px 8px 60px !important;
  }
  .mainAdmin .comShow {
    padding: 10px !important;
  }
  .mainAdmin .payment-setting-box {
    padding: 8px !important;
  }
  .mainAdmin .payment-setting-box .withdrawal-box,
  .mainAdmin .payment-setting-box .payment-box {
    padding: 12px 10px !important;
    border-width: 1px !important;
  }
  .mainAdmin .payment-setting-box .withdrawal-box h6 {
    font-size: 16px !important;
  }
  .mainAdmin .payment-setting-box .mt-4 {
    margin-top: 12px !important;
  }

  /* the bare "=" between Amount and Coin sat on its own full-width line
     with an mt-3 above it — a ~60px hole between two fields */
  .mainAdmin .payment-setting-box .withdrawal-input .col-1 {
    margin-top: 0 !important;
    padding: 0 !important;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }
}

/* ─── 53. Settings card headers — title + action (mobile) ─────
   `.cardHeader > .d-flex.justify-content-between` holds a title block and
   a `.new-fake-btn` / Submit. The button keeps its natural width while
   the title block is free to shrink, so "Report Reason Setting" collapsed
   to ~90px and broke over three lines. Let the title take the free space
   at a size that fits, and cap the action button. */
@media (max-width: 768px) {
  .mainAdmin .payment-setting > .cardHeader > .d-flex > div:first-child,
  .mainAdmin .card1 > .cardHeader > .d-flex > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mainAdmin .payment-setting > .cardHeader > .d-flex > div:first-child p,
  .mainAdmin .card1 > .cardHeader > .d-flex > div:first-child p {
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal;
    word-break: normal;
  }
  .mainAdmin .payment-setting > .cardHeader .new-fake-btn,
  .mainAdmin .card1 > .cardHeader .new-fake-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .mainAdmin .payment-setting > .cardHeader .new-fake-btn button,
  .mainAdmin .card1 > .cardHeader .new-fake-btn button {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .mainAdmin .card1 > .cardHeader > .d-flex {
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 12px !important;
  }
}