@font-face {
  font-family: "Helvetica";
  src: url("../fonts/Helvetica.eot");
  src: url("../fonts/Helvetica.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Helvetica.woff") format("woff"),
    url("../fonts/Helvetica.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeueLight.eot");
  src: url("../fonts/HelveticaNeueLight.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNeueLight.woff") format("woff"),
    url("../fonts/HelveticaNeueLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Impact";
  src: url("../fonts/Impact.woff2") format("woff2"),
    url("../fonts/Impact.woff") format("woff"),
    url("../fonts/Impact.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* =============================================================
   APP SHELL — design tokens
   -------------------------------------------------------------
   Single source of truth for the layout dimensions of the app
   shell (sidebar + top navbar + content area). Override these
   in a Laravel/Vite setup by re-declaring on `:root` (or on a
   theme class) instead of editing the rules below.
   ============================================================= */
:root {
  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 150px;
  --sidebar-edge-gap: 10px;
  /* outer gap on top/left/bottom */

  /* Top navbar */
  --navbar-height: 70px;

  /* Content area */
  --content-margin-y: 10px;
  /* gap between navbar and scroll area */

  /* Motion */
  --shell-transition-duration: 0.3s;
  --shell-transition-easing: ease;
}

/* =============================================================
   APP SHELL — root rules
   -------------------------------------------------------------
   `scrollbar-gutter: stable` reserves space for the vertical
   scrollbar on every page. In a multi-page app this prevents
   the viewport width (and any `width: 100%` fixed element such
   as the top navbar) from shifting between pages that do/don't
   need to scroll.
   ============================================================= */
html {
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-gutter: stable;
}

body {
  /* animation: fadeInAnimation ease 15s; */
  /* animation-iteration-count: 1; */
  animation-fill-mode: forwards;
  /* font-family: Helvetica, sans-serif !important; */
  margin: 0 !important;
  /* height: calc(100vh - 76px) !important; */
}

html,
body {
  /* height: 100%; */
  margin: 0;
  color: #3c3c3c !important;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body {
  font-family: "Helvetica";
  background-color: #f7f8fa;
  /* padding: 20px; */
  color: black;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

p {
  color: #444
}

#merge-form p {
  font-size: 16px;
  margin-bottom: 40px;
}

span#main-comp {
  color: #35bcd9;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*-----------************************----------------*/
.inkish-logo-area {
  text-align: center;
  display: block;
  margin: 15px 0;
}

/* .desk-logo {
  font-family: Impact !important;
  font-size: 42px;
  color: #97d4e5;
}

.desk-logo>span {
  font-size: 42px;
} */

.userdb-login-area .card {
  background-clip: border-box;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 12px;
  padding: 10px 0;
  background: #fff;
}

.userdb-login-area .card-body {
  padding: 20px 15px;
}

.userdb-login-area .card-body label {
  font-family: 'PT Sans', sans-serif;
  font-weight: 600;
}

.text-md-right {
  text-align: right !important
}

.login-btn {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 7px 20px;
}

.login-btn:hover {
  color: #fff;
  background-color: #062036;
  border-color: #062036;
}

.wrapper {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: #F7F8FA;
}

/* App shell — sidebar */
#sidebar {
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  background: #ffffff;
  color: #fff;
  /* Animate only the dimensions that change on collapse. Listing
     properties explicitly (instead of `all`) prevents the browser
     from animating from its initial state to the parsed stylesheet
     values during page load. */
  transition:
    min-width var(--shell-transition-duration) var(--shell-transition-easing),
    max-width var(--shell-transition-duration) var(--shell-transition-easing);
  box-shadow: 0px 5px 12px 0px rgb(0 0 0 / 5%);
  border-radius: 12px;
  position: fixed;
  top: var(--sidebar-edge-gap);
  left: var(--sidebar-edge-gap);
  z-index: 3;
  height: calc(100% - 2 * var(--sidebar-edge-gap));
  overflow: hidden;
}

#sidebar.active {
  min-width: var(--sidebar-collapsed-width);
  max-width: var(--sidebar-collapsed-width);
  text-align: center;
  overflow: visible;
}

#sidebar.active .sidebar-header .desk-logo {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

/* Collapsed sidebar: toggle protrudes outside via right: -60px.
   #sidebar.active has overflow: visible so the button is not clipped. */
#sidebar.active .sidebar-header .toggle-cus-btn {
  top: 16px;
  right: -60px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 5px 12px 0px rgb(0 0 0 / 5%);
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

.sidebar-header .desk-logo svg {
  width: 180px;
}

.sidebar-header strong svg {
  width: 40px;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 16px 20px 20px 20px;
  /*  background: #97d4e5;*/
  position: relative;
}

#sidebar.active .sidebar-header {
  padding: 22px 20px;
}

#sidebar.active ul.components {
  padding: 0;
  /* border-bottom: 1px solid #3b3b41; */
  height: calc(92% - 270px);
  overflow-y: auto;
}

.toggle-cus-btn,
.toggle-cus-btn:hover {
  position: absolute;
  top: 16px;
  right: 4px;
  color: #97d4e5 !important;
  border-radius: 50px;
  background-color: transparent;
  text-align: center;
  width: auto;
  padding: 6px 10px;
}

.toggle-cus-btn:focus {
  outline: none;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 0;
  /* border-bottom: 1px solid #3b3b41; */
  height: calc(68% - 42px);
  overflow: auto;
}

#sidebar ul li a {
  padding: 16px 20px;
  font-size: 16px;
  text-transform: capitalize;
  display: block;
  text-decoration: none;
  color: #525252;
  /*  border-color: #3b3b41;
  border-width: 1px 0 0;
  border-style: solid;*/
}

#sidebar ul li a:hover {
  color: #fff;
  background: #97d4e5;
}

#sidebar ul.sidebar-logout li a:hover {
  color: #fff;
  background: #97d4e5;
  border-radius: 0 0 12px 12px;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a,
#sidebar a[aria-expanded="true"] {
  color: #fff;
  background: #97d4e5;
}

#sidebar span.pull-right i {
  transition: all 0.3s linear 0s;
  font-size: 10px;
}

#sidebar a[aria-expanded="true"] span.pull-right i {
  transform: rotate(90deg);
}

#sidebar.active a span.pull-right {
  display: none;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 14px !important;
  border: none !important;
  padding: 14px 10px 14px 40px !important;
}

.sidebar-logout {
  margin: 70px 0 0;
  /*border-bottom: 1px solid #3b3b41;*/
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
}

#sidebar ul.sidebar-logout li a {
  padding-left: 20px;
}

.sidebar-logout ol,
ul {
  padding-left: 0 !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
    ----------------------------------------------------- */

/* App shell — main content area
   Sits to the right of the fixed sidebar. Width + margin both
   reference --sidebar-width so the layout stays in sync if the
   sidebar dimension changes. */
#content {
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  padding: var(--navbar-height) 10px 0 30px;
  /* top padding clears the fixed top navbar */
  background-color: #f7f8fa !important;
  /* Animate only the dimensions that change on sidebar collapse. */
  transition:
    width var(--shell-transition-duration) var(--shell-transition-easing),
    margin-left var(--shell-transition-duration) var(--shell-transition-easing);
}

.top-navbar {
  /*  padding: 20px 20px 20px 50px;
  background-color: #fff;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);*/
}

.search-bar {
  padding-right: 10px;
  position: relative;
}

.search-bar .form-control {
  border-radius: 50px;
  border: none;
  background-color: #f1f2f7;
  box-shadow: unset;
  padding: 6px 40px;
  height: 40px;
}

.search-bar .form-control::placeholder {
  font-weight: bold;
  color: #aeaeae;
}

.search-bar span {
  position: absolute;
  top: 10px;
  left: 15px;
  color: #97d4e5;
}

.search-bar svg {
  width: 20px;
}

.top-navbar-links>ul>li {
  display: inline-block;
  margin: 0 5px;
  position: relative;
}

.top-navbar-links>ul>li div.dropdown {
  position: relative;
  top: 7px;
}

.top-navbar-links li:last-child {
  margin-right: 0;
}

.top-navbar-links {
  float: right;
  margin: 0;
}

.top-navbar-links>ul>li>a {
  display: block;
  /*background-color: #f6f6f6;*/
  border-radius: 50%;
  font-size: 16px;
  color: #32323a;
  text-decoration: none;
  padding: 5px;
}

.count-span {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 12px;
  background-color: #fbb323;
  height: 20px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  text-align: center;
  color: #fff;
  line-height: 1.7;
}

.top-navbar-links li a.dropdown-toggle {
  border-radius: 12px;
  padding: 0;
  font-size: 16px;
  background: #97d4e5;
  padding: 10px 20px;
  color: #fff;
}

.top-navbar-links .dropdown-menu {
  padding: inherit;
  top: inherit;
  backdrop-filter: blur(18.600000381469727px);
  background: #000000B2;
  border-radius: 0px !important;
  border: none;
  color: #fff;
  padding: 10px;
  /* min-height: 100px; */
}

.nav-item .dropdown-menu.notification-container.dropdown-menu-right {
  top: 40px;
}

.top-navbar-links .dropdown-menu a,
.top-navbar-links .dropdown-menu li {
  font-size: 12px !important;
  display: block;
}

.top-navbar .top-navbar-links .dropdown-menu li.mail-li {
  /* padding: 10px 20px !important; */

  color: #333333;

  /* border-bottom: 1px solid #f0f0f0; */

  font-size: 16px !important;
}

.top-navbar-links .dropdown-menu a,
.top-navbar-links .dropdown-menu li.mail-li {
  /* padding: 10px 20px !important; */

  color: #333333;

  /* border-bottom: 1px solid #f0f0f0; */

  font-size: 16px !important;

  /* border-bottom: 1px solid #e5e5e5 !important; */
}

.top-navbar-links .dropdown-menu a:hover {
  background-color: rgba(133, 210, 228, 0.2);
}

.top-navbar-links .dropdown-menu li.mail-li {
  opacity: 0.5;
}

.top-navbar-links li a.dropdown-toggle .caret {
  margin-right: 2px;
  color: #ffffff;
  margin-left: 10px;
}

.top-navbar-links li img {
  width: 26px;
  height: 26px;
  margin-right: 10px;
  display: inline-block;
}

/* App shell — internal scroll container
   The single vertical scroll container for the page. The body
   itself never scrolls, which guarantees the fixed sidebar and
   top navbar stay locked to the viewport regardless of page
   content length. */
.dashboard-content {
  /* height: calc(100vh - var(--navbar-height) - 2 * var(--content-margin-y)); */
  margin: var(--content-margin-y) 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* absorb Bootstrap row negative margins */
  padding: 16px;
  /* symmetric padding to contain Bootstrap row gutter */
}

.counting-fields {
  margin-bottom: 25px;
}

.counting-fields svg {
  width: 40px;
}

.article-count-item {
  /*background-color: #ffa755;*/
  display: flex;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 1px 4px 3px rgb(176 176 176 / 10%);
  min-height: 140px;
}

.btn-edit svg {
  width: 15px;
  position: relative;
  top: 2px;
}

.article-count-icon {
  align-self: stretch;
  flex: 1 30%;
  max-width: 30%;
  text-align: center;
  font-size: 50px;
  color: #fff;
  line-height: 2.2;
}

.article-count-desc {
  flex: 1 70%;
  max-width: 70%;
  padding: 0 15px 0 5px;
}

.orange-clr .article-count-icon {
  background-color: #f6b09c;
}

.purple-clr .article-count-icon {
  background-color: #978ded;
}

.sky-clr .article-count-icon {
  background-color: #88d3e5;
}

.orange-clr .article-count-desc h1 {
  color: #f6b09c;
}

.purple-clr .article-count-desc h1 {
  color: #978ded;
}

.sky-clr .article-count-desc h1 {
  color: #88d3e5;
}

.article-count-desc h1 {
  font-weight: bold;
  margin: 5px 0;
  color: #fff;
}

.article-count-desc p {
  font-size: 16px;
  color: #ffffff;
}

.article-cate-main>h3 {
  margin-top: 0;
  font-size: 18px;
}

.article-cate-main .card>h3 {
  margin-top: 0;
  font-size: 18px;
}

.article-cate-main .card.card-wrapper {
  padding: 16px 40px;
}

.article-cate-main p {
  font-size: 14px;
  line-height: 2;
}

.article-cate-main ul li {
  display: inline-block;
  width: 100%;
  max-width: 49%;
  margin: 8px 0;
}

.article-cate-main ul li .left-span {
  width: 100%;
  font-size: 12px;
  max-width: 30%;
  display: inline-block;
}

.article-cate-main ul li .right-span {
  width: 100%;
  max-width: 68%;
  font-size: 12px;
  display: inline-block;
}

.card-wrapper {
  background-color: #fff;
  box-shadow: 0 1px 4px 3px rgba(176, 176, 176, 0.1);
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.card {
  padding: 40px;
}

.card-wrapper h4 {
  margin-top: 0;
  color: #848484;
}

.card-wrapper img {
  display: block;
  margin: 0 auto;
}

.progress-bar-wrapper h3 {
  padding-bottom: 15px;
  font-size: 18px;
  margin-bottom: 0;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 0 15px;
}

.card .progress-item:last-child {
  margin: 0;
}

.progress-btn {
  flex: 1 20%;
  align-self: flex-end;
  max-width: 20%;
}

.progress-item .progress {
  border-radius: 50px;
}

.progress-item .progress-bar {
  box-shadow: unset;
}

.progress-item .sky-clr,
.authors-table .sky-clr {
  background-color: #88d3e5;
}

.authors-table .yellow-clr,
.progress-item .yellow-clr {
  background-color: #f8b425;
}

.progress-item .red-clr,
.authors-table .red-clr {
  background-color: #ec4561;
}

.progress-item .orange-clr,
.authors-table .orange-clr {
  background-color: #f6b09c;
}

.progress-item .purple-clr,
.authors-table .purple-clr {
  background-color: #978ded;
}

.progress-item .progress {
  border-radius: 50px;
  height: 20px;
  margin: 0;
  position: relative;
}

.progress-content {
  max-width: 70%;
  flex: 1 70%;
  position: relative;
}

.progress-title {
  color: #aeaeae;
  font-size: 16px;
}

.progress-btn .btn {
  color: #fff;
  font-size: 16px;
  padding: 6px 34px;
  width: 100%;
  border-radius: 50px;
}

.progress-count {
  position: absolute;
  top: -25px;
  color: #aeaeae;
  margin-left: -10px;
  font-size: 16px;
}

.authors-wrapper {
  background-color: #fff;
  box-shadow: 0 1px 4px 3px rgba(176, 176, 176, 0.1);
  border-radius: 4px;
  margin: 15px 0 30px;
}

.authors-wrapper h3 {
  padding: 30px 30px;
  margin: 0;
  color: #848484;
}

.country-wrapper {
  padding: 20px 30px;
}

.country-wrapper h3 {
  margin-top: 5px;
  color: #848484;
  margin-bottom: 30px;
}

.authors-table table {
  margin-bottom: 0;
}

.authors-table table thead th {
  background-color: #546e7a;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
  padding: 14px 30px;
  text-transform: capitalize;
}

.authors-table table tbody td {
  padding: 14px 30px;
  font-size: 16px;
  border: none;
  vertical-align: middle;
  color: #848484;
}

.authors-table table tbody tr {
  border-bottom: 1px solid #eee;
}

.authors-table table tbody tr:last-child {
  border-bottom: unset;
}

.authors-table .btn {
  padding: 8px 30px;
  color: #fff;
  width: 100%;
  max-width: 60%;
  border-radius: 50px;
}

.read-article-main h3 {
  margin-top: 0;
  border-bottom: 1px solid #e3e4ec;
  color: #848484;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.read-article-main table,
.users-table table {
  color: #848484;
  font-size: 16px;
}

.read-article-main table thead th,
.users-table table thead th {
  font-weight: normal;
  border: none;
  padding: 15px 30px;
  vertical-align: middle;
}

.read-article-main table tbody tr,
.users-table table tbody tr {
  background-color: #fff;
  /*  box-shadow: 0 1px 4px 3px rgba(176, 176, 176, 0.1);
  border-radius: 4px;*/
  border-top: 1px solid #eeeff4;
}

.read-article-main table tbody tr.spacer,
.users-table table tbody tr.spacer {
  height: 10px;
  box-shadow: unset;
}

.read-article-main table tbody tr td,
.users-table table tbody tr td {
  vertical-align: middle;
  border: none;
  padding: 10px 12px;
  /*border-radius: 4px;*/
  height: 56px;
}

/* .users-table table tbody tr td:nth-of-type(4) {
  min-width: 200px;
} */

.read-article-main table tbody tr td:first-child,
.users-table table tbody tr td:first-child {
  /*border-radius: 4px 0 0 4px;*/
}

.read-article-main table tbody tr td:last-child,
.users-table table tbody tr td:last-child {
  border-radius: 0px 4px 4px 0;
}

.read-article-main table .btn {
  border-radius: 30px;
  background-color: #88d3e5;
  color: #fff;
  width: 55px;
}

.footer-main {
  display: none;
}

.footer-main p {
  margin: 0;
}

/* Hide legacy full-page loading overlay — replaced by component-level skeletons */
.loading {
  display: none !important;
}

/*---users list page--*/
.page-title {
  color: #919194;
  /* border-bottom: 1px solid #e3e4ec; */
  padding-bottom: 10px;
  background: #fff;
  padding: 10px 20px;

  border-radius: 12px;
  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 5%);
}

.page-title p {
  margin-bottom: 0;
  font-size: 16px;
}

.page-title p>span {
  color: #000;
}

.page-title h3 {
  font-size: 22px;
  margin: 0;
  font-weight: bold;
}

.users-table {
  /* margin-top: 20px; */
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 12px 0px rgb(0 0 0 / 5%);
}

.btn:focus,
.btn:active:focus {
  outline: none !important;
}

.users-table table td a.btn {
  color: #fff;
  padding: 8px 0px;
  border-radius: 30px;
  height: 38px;
  width: 38px;
}

.users-table .btn svg {
  width: 15px;
  position: relative;
  top: 2px;
  margin-right: 0px;
}

.page-title span.pull-right .btn {
  margin-top: -40px;
  border-radius: 50px;
  font-size: 14px;
  color: #fff;
  padding: 8px 22px;
}

.purple-btn {
  background-color: #978ded;
}

.red-btn {
  background-color: #ec4561 !important;
}

.red-btn:hover {
  background-color: #e68495;
}

.sky-btn {
  background-color: #86D3E3 !important;
}

.sky-btn:hover {
  background-color: #90e0f0;
}

.yellow-btn {
  background-color: #fbb323;
}

.yellow-btn:hover {
  background-color: #ebcc8f;
}

.articles-table .status-btn .btn {
  width: 100%;
  max-width: 100%;
}

/*--settings- profile---*/
.setting-main {
  margin-top: 20px;
}

.tab-content {
  display: block !important;
  padding: 10px 0 0;
  border-top: 1px solid #f1f2f7;
}

.tabs-wrapper input {
  display: none;
}

.tabs-wrapper label {
  display: inline-block;
  margin: 0 5px -1px 0px;
  padding: 15px 25px;
  font-weight: 500;
  text-align: center;
  background-color: #f1f2f7;
  color: #919194;
  font-size: 16px;
  border: 1px solid transparent;
}

.tabs-wrapper .tab-content label {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-align: center;
  background-color: transparent;
  color: #919194;
  font-size: 14px;
  border: none;
}

.tab-btn,
.tab-btn:hover {
  background-color: #97d4e5;
  color: #fff;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
}

.tabs-wrapper .btn {
  margin-top: 20px;
}

.tabs-wrapper .tab-content .form-control {
  display: block;
  height: 45px;
  border-radius: 0;
  box-shadow: none;
}

.tabs-wrapper .tab-content .form-control:focus {
  border: 1px solid #97d4e5;
  box-shadow: none;
}

.tabs-wrapper label:hover {
  color: #789;
  cursor: pointer;
}

.tabs-wrapper input:checked+label {
  color: #fff;
  border: 1px solid #97d4e5;
  background-color: #97d4e5;
  border-bottom: 1px solid #97d4e5;
}

.tabs-wrapper #tab1:checked~#content1,
.tabs-wrapper #tab2:checked~#content2,
.tabs-wrapper #tab3:checked~#content3,
.tabs-wrapper #tab4:checked~#content4 {
  display: block;
}

.upload-logo-main {
  position: relative;
  width: 100%;
  height: 45px;
  border: 1px solid #ccc;
}

.upload-logo-main input {
  position: absolute;
  top: 3px;
  left: 0;
  background-color: transparent;
  z-index: 9;
  border: none;
}

.profile-upload {
  background-color: #f1f2f7;
  padding: 10px;
  position: relative;
}

.profile-upload .btn {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  border-radius: 0;
  color: #fff;
}

.profile-upload .btn input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  display: block;
  height: 100%;
  z-index: 9;
}

.setting-main {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 12px 0px rgb(0 0 0 / 5%);
  margin-bottom: 26px;
}

.setting-main .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #97d4e5;
  color: #fff;
  border-color: #97d4e5;
  padding: 0px 3px;
  font-size: 14px;
}

.setting-main .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #fff;
  margin-right: 5px;
  border: none;
}

.setting-main .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #ccc;
}

/*--setting account--*/
.grey-wrapper {
  background-color: #fff;
  padding: 25px;
  border-radius: 4px;
}

.grey-wrapper .title {
  color: #000;
  margin: 0;
}

.grey-wrapper .title-bottom {
  color: #999;
}

.grey-wrapper form {
  margin-top: 30px;
}

.custm-effect {
  border: 1px solid #ccc;
  height: 42px;
  padding: 6px 12px;
  text-indent: 15px 12px 6px 12px;
  box-shadow: unset;
  background-color: #fff !important;
}

.setting-main form input {
  /* height: 42px; */
  border-radius: 4px;
}

.setting-main form input[type="checkbox"] {
  height: unset;
}

.custm-effect.form-control:focus {
  box-shadow: unset;
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control-placeholder {
  /* position: absolute;
  top: 0;
  padding: 15px 0 0 15px;*/
  font-weight: bold;
  transition: all 200ms;
  color: #333;
}

#profileViewForm {
  margin: 30px auto;
  max-width: 700px;
}

.custm-effect:focus+.form-control-placeholder,
.custm-effect:valid+.form-control-placeholder {
  font-size: 75%;
  padding: 10px 0 0 15px;
  transform: translate3d(0, -20%, 0);
  opacity: 1;
}

.grey-wrapper .btn:hover {
  color: #fff;
}

.green-btn {
  background-color: #00cc99 !important;
  color: #fff !important;
  padding: 10px 20px;
  font-size: 16px;
}

.green-btn:hover,
.green-btn:focus {
  background-color: #07b186;
  color: #fff;
}

.black-btn {
  background-color: #32323a;
  color: #fff;
  padding: 10px 25px;
  font-size: 16px;
}

.black-btn:hover {
  background-color: #484850;
}

.m-t-30 {
  margin-top: 30px;
}

textarea.form-control {
  height: auto;
  resize: none;
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/down-arrow.png) 99% / 7px no-repeat #fff;
  /*padding: 15px 25px 6px 12px;*/
}

.upload-pic {
  width: 140px;
  height: 140px;
  position: relative;
}

.upload-pic img {
  border-radius: 4px;
}

.upload-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s linear 0s;
  opacity: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}

.upload-icon input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.upload-pic:hover .upload-icon {
  opacity: 1;
}

.upload-logo {
  position: relative;
  border: 1px solid #ccc;
  height: 48px;
  padding: 12px 12px 6px 12px;
  background-color: #fff;
  border-radius: 4px;
  color: #8f8f91;
}

.upload-logo-icon {
  position: absolute;
}

.upload-logo-icon input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 99;
}

.social-wrapper .social-input {
  width: 100%;
}

.social-wrapper .social-input .form-control {
  border: 1px solid #ccc;
  height: 48px;
  padding: 8px 12px 6px 12px;
  box-shadow: unset;
}

.social-wrapper .input-group-addon {
  background-color: transparent;
  width: 200px;
  text-align: left;
  color: #8f8f91;
}

.privacy-page-editor table tbody tr {
  background-color: transparent;
  box-shadow: unset;
  border-radius: 0;
}

/**/
label.error {
  color: red;
  font-size: 12px;
}

.pagination-main {
  /* text-align: center; */
}

.pagination-main nav .flex-sm-fill.d-sm-flex.align-items-sm-center.justify-content-sm-between {
  flex-direction: column;
}

.pagination-main .pagination {
  /* background-color: #f7f8fa; */
  border-radius: 12px;
  padding: 10px 20px;
  margin-bottom: 0;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pagination-main .pagination a {
  /*font-size: 20px;*/
  color: #333;
  font-family: "Helvetica";
  display: inline-block;
  font-weight: normal;
  /*padding: 0 10px;*/
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  margin: 0px;
}

.pagination-main .pagination a:hover {
  color: #fff;
}

.actions-btn {
  border-radius: 50% !important;
  color: white;
}

.actions-btn.sky-clr:hover {
  background-color: #74c5d8;
  color: #fff;
}

.actions-btn.red-clr:hover {
  background-color: #d8334f;
  color: #fff;
}

.pagination-main .pagination>.active>span,
.pagination-main .pagination>li>a:hover {
  /* background-color: #fff; */
  border-color: #fff;
  border-radius: 50px;
  /*padding: 3px 9px;*/
  /* margin-left: 5px; */
  /*margin-top: 3px;*/
  /* margin-right: 5px; */
  /* color: #333; */
  background: #88d3e5;
  color: #fff;
}

.pagination-main .pagination>li>a,
.pagination>li>span {
  background-color: transparent;
  border: 1px solid transparent;
}

.pagination-main .pagination>.disabled>span {
  color: #333;
  background-color: transparent;
  border-color: transparent;
  font-size: 34px;
  padding: 0;
  line-height: 25px;
  border: none;
}

.pagination-main .pagination>li:last-child>a,
.pagination-main .pagination>li:last-child>span {
  font-size: 26px;
  padding: 0;
  line-height: 30px;
  border: none;
}

.pagination-main .pagination>li:first-child>a,
.pagination-main .pagination>li:first-child>span,
.pagination-main .pagination>li:last-child>a,
.pagination-main .pagination>li:last-child>span {
  font-size: 26px;
  padding: 0;
  line-height: 30px;
  border: none;
  background: #88d3e5;
  width: 34px;
  height: 34px;
  border-radius: 50px;
  color: #fff;
}

.pagination-main .pagination .page-link {
  width: 34px !important;
  height: 34px !important;
}

#profileViewForm .form-control-placeholder {
  top: -14px;
}

.form-control-placeholder.slct-control-placeholder {
  top: 0px !important;
}

.top-navbar-links .dropdown-menu a.mdi-notification-clear-all {
  border: none !important;
  top: -6px;
  position: relative;
  font-size: 15px !important;
  padding: 5px 0 !important;
}

/*.top-navbar-links .dropdown-menu a.see-all-noti {
    padding: 0 !important;
    border: none;
}*/

.profile-set-img {
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 150px;
  padding: 5px;
  height: 140px;
}

.profile-set-img img {
  display: block;
  margin: 0 auto !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-set-label {
  /* position: absolute;
    top: 7px;*/
  font-size: 12px;
  background: #efefef;
  padding: 2px 10px;
  display: block;

  border-radius: 5px;

  margin-top: 5px;

  color: #404656;
}

.profile-actual-img {
  height: 100%;
  margin: 10px auto !important;
  object-fit: cover;
}

.notification-item-wrapper {
  padding: 20px;
  background-color: #fff;
}

.noti-item {
  background-color: #fff;
  display: flex;
  flex: 1 32%;
  flex-direction: column;
  padding: 10px 0px 20px;
  border-bottom: 1px solid #e3e4ec;
  max-width: 32%;
  margin: 0 10px;
}

.notification-item-wrapper {
  padding: 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.noti-item .noti-date {
  padding: 15px 0 0;
  text-align: left;
}

.serach-item {
  /* width: 300px;
  margin-top: -28px;
  position: relative;*/
}

.serach-item svg {
  width: 20px;
}

.serach-item .form-control {
  border-radius: 50px;
  height: 38px;
  padding-right: 30px;
  font-size: 16px;
}

.serach-item .form-control:focus {
  border-color: #97d4e5;
  box-shadow: unset;
}

.serch-icon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.serch-icon svg {
  width: 20px;
}

.serach-item .form-control:focus+.serch-icon {
  color: #97d4e5;
}

.article-serch-item {
  margin-left: 20px;
}

td.title-td {
  width: 40%;
  max-width: 40%;
  min-width: 40%;
}

.top-navbar-links li a.dropdown-toggle.user-settng img {
  margin: 0 10px 0 0;
  border-radius: 100px;
}

.notification-container .h5 {
  font-size: 18px;
  line-height: unset;
}

.notification-container .p-all-15 {
  padding: 5px 15px;
}

.nav-item a {
  /* color: #333 !important; */
}

.login-admin-content {
  padding: 40px;
  background-color: #fff;
  flex: 1 300px;
  max-width: 500px;
  border-radius: 4px;
  box-shadow: 0 1px 4px 3px rgba(176, 176, 176, 0.1);
}

.login-admin-main {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #88d3e5;
  height: calc(100vh - 82px);
}

.login-admin-content img {
  margin-bottom: 30px;
}

.loginAdmin-btn {
  font-size: 18px;
  padding: 6px 20px;
  color: #fff;
  width: 100%;
  text-transform: uppercase;
  margin-top: 20px;
  transition: all 0.3s linear 0s;
}

.loginAdmin-btn:hover {
  background-color: #81c3d6;
  color: #fff;
}

.bk-btn {
  padding-bottom: 5px;
}

.fileinput .btn:hover {
  color: #333;
}

.cell-fontfamily-options {
  height: 50px !important;
}

.cell-fontfamily-options #divFontList {
  overflow: hidden !important;
}

.admin-content-container {
  width: 71.1%;
  margin: 0;
}

/*************************************
       New Dashboard Design Css        
 ************************************/
.desk-logo {
  font-family: "Impact";
  font-size: 36px;
  color: #97d4e5;
}

.toggle-cus-btn.btn:active,
.toggle-cus-btn.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
  box-shadow: none;
}

.nav-profile-area {
  border: solid 1px #f3eeee;
  padding: 10px 12px;
  margin: 10px 20px 30px 20px;
  border-radius: 12px;
  color: #525252;
  display: flex;
}

.nav-profile-area img {
  width: 36px;
  height: 36px;
  margin: 1px 10px 0 0;
  border-radius: 100px;
}

.nav-profile-area h3 {
  margin: 0 0 1px;
  font-size: 16px;
  font-weight: bold;
}

.nav-profile-area p {
  margin: 0;
  font-size: 13px;
  color: #ababab;
}

.top-navbar-search input.form-control {
  position: relative;
  border-radius: 12px;
  padding: 10px 42px 10px 15px;
  box-shadow: none;
  height: 44px;
  border: none;
}

.top-navbar-search .search-icon {
  position: absolute;
  right: 14px;
  z-index: 2;
  background: transparent;
  border: none;
  top: 12px;
}

.top-navbar .top-navbar-tittle {
  margin: 4px 0 2px;
  font-size: 20px;
}

.top-navbar-subtitle {
  font-size: 14px;
  color: #64748B;
  font-weight: 400;
  margin: 0;
}

/* Sidebar SVG icon fill overrides */
.cls-2 {
  fill: #333 !important;
}

#sidebar ul li a:hover svg .cls-2 {
  fill: #97d4e5 !important;
}

/* Status pills - shared across projects */
.status-text-red {
  background-color: #FEE2E2;
  color: #EF4444 !important;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.status-text-black {
  color: #000;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.status-text-green {
  background-color: #DCFCE7;
  color: #15803D;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.status-text-yellow {
  background-color: #FFF6E5;
  color: #E49D05;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.status-text-info {
  background-color: #FFF6E5;
  color: #0dcaf0;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.status-text-secondary {
  background-color: #FFF6E5;
  color: #6c757d;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
}

.status-pill-orange {
  background-color: #FFEDD5;
  color: #C2410C;
  font-weight: 700;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* Fill-viewport white-card — fills the entire viewport area below the top
   navbar so there's no wasted space at the bottom. The inner table area
   scrolls vertically if there are too many rows. Pagination/footer content
   sits at the bottom of the card.

   Usage: add `fill-viewport` to a `.white-card`. Use `.fv-scroll` on the
   inner element you want to scroll (typically the table wrapper). */
.white-card.fill-viewport {
  display: flex;
  flex-direction: column;
  /* Card sizes to its content (toolbar + scroll area + pagination) so there's
     no empty space below a short table. The scroll area itself carries the
     viewport cap, so a long table still scrolls internally without the card
     overrunning the viewport. */
  height: auto;
  margin-bottom: -16px !important;
  overflow: hidden;
}

.white-card.fill-viewport>.fv-scroll {
  /* Natural height up to a viewport-relative cap. Short tables → fv-scroll
     is content-height (card shrinks to content, no empty space below rows).
     Long tables → fv-scroll caps out and `overflow-y: auto` scrolls internally.
     Cap chrome budget: navbar 70 + dash-content margin+padding 26 + card
     padding 40 + toolbar 60 + pagination 60 + bottom margin 30 ≈ 286. */
  max-height: calc(100vh - 286px);
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* When a .page-breadcrumb sits directly above a .fill-viewport white-card,
   subtract the breadcrumb height (~70px) from the scroll-area cap. */
.page-breadcrumb+.white-card.fill-viewport>.fv-scroll {
  max-height: calc(100vh - 356px);
}

.white-card.fill-viewport>nav,
.white-card.fill-viewport>.pagination-wrap {
  margin-top: auto;
  flex-shrink: 0;
}

/* Generic single-line cell utility — apply to specific cells that must not wrap */
.no-wrap {
  white-space: nowrap;
}

/* Page breadcrumb — shared across all projects */
.page-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  margin-bottom: 20px;
  font-size: 14px;
}

.page-breadcrumb a {
  color: #86d3e3;
  text-decoration: none;
  font-weight: 500;
}

.page-breadcrumb a:hover {
  text-decoration: underline;
}

.page-breadcrumb span {
  color: #64748B;
}

.page-breadcrumb .sep {
  color: #dee2e6;
}

/* Empty state — shared across all projects.
   Use inside any container to indicate no data: */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  background: #fafbfc;
  margin: 10px 0;
}

.empty-state-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #eef8fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #86d3e3;
  font-size: 26px;
  margin-bottom: 18px;
}

.empty-state h5 {
  font-size: 17px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* Loading skeleton — shimmer placeholder for content waiting to load.
   Apply .skeleton to any element to give it a shimmering grey block. */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton-text {
  height: 14px;
  width: 100%;
}

.skeleton-text-sm {
  height: 12px;
  width: 60%;
}

.skeleton-title {
  height: 22px;
  width: 40%;
}

.skeleton-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.skeleton-row td {
  padding: 12px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Filter popover — single button + dropdown panel containing stacked filters.
   Reusable across any table page in any project. */
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  color: #3c3c3c;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all 0.15s;
}

.filter-btn:hover {
  background: #f7f8fa;
  border-color: #86d3e3;
  color: #86d3e3;
}

.filter-btn[aria-expanded="true"] {
  background: #e7f4f7;
  border-color: #86d3e3;
  color: #86d3e3;
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px 1px;
  background: #86d3e3;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  top: -1px;
}

.filter-popover {
  min-width: 280px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin-top: 8px !important;
}

.filter-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.filter-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: #3c3c3c;
}

.filter-clear-btn {
  background: none;
  border: none;
  color: #86d3e3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.filter-clear-btn:hover {
  color: #6bc0d0;
  text-decoration: underline;
}

.filter-group {
  margin-bottom: 14px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.filter-group .form-select {
  width: 100%;
  font-size: 13px;
}

/* Sortable table headers — click to sort, with arrow indicator */
.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.sortable-th:hover {
  background-color: #6e8a96 !important;
}

.sortable-th .sort-icon {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

.sortable-th:hover .sort-icon {
  color: #fff;
}

.sortable-th.sort-asc .sort-icon,
.sortable-th.sort-desc .sort-icon {
  color: #86d3e3;
}

.fv-scroll {
  position: relative;
}

.fv-scroll>table>thead th {
  /* position: sticky; */
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

.white-card.fill-viewport>[data-fv-wrapper] {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.white-card.fill-viewport>[data-fv-wrapper]>.fv-scroll,
.white-card.fill-viewport>[data-fv-wrapper]>.table-responsive {
  /* Same cap as the direct-child variant so `data-fv-wrapper` tables
     (submission list, template index, etc.) scroll internally instead of
     letting the whole page scroll when the user picks a large per_page. */
  max-height: calc(100vh - 286px);
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.page-breadcrumb+.white-card.fill-viewport>[data-fv-wrapper]>.fv-scroll,
.page-breadcrumb+.white-card.fill-viewport>[data-fv-wrapper]>.table-responsive {
  max-height: calc(100vh - 356px);
}

.app-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
}

.app-pagination-footer .pagination-count {
  font-size: 13px;
  color: #64748B;
  flex: 1;
}

.app-pagination-footer .pagination-count strong {
  color: #3c3c3c;
  font-weight: 600;
}

.app-pagination-footer nav {
  flex: 0 0 auto;
}

.app-pagination-footer .pagination {
  margin: 0;
  gap: 4px;
}

.app-pagination-footer .pagination .page-item .page-link {
  color: #64748B;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.page-item.active {
  font-family: "Helvetica";
}

.page-link {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-pagination-footer .pagination .page-item .page-link:hover {
  background: #e7f4f7;
  border-color: #86d3e3;
  color: #86d3e3;
}

.app-pagination-footer .pagination .page-item.active .page-link {
  background: #86d3e3;
  border-color: #86d3e3;
  color: #fff;
}

.app-pagination-footer .pagination .page-item.disabled .page-link {
  color: #cbd5e1;
  background: #f7f8fa;
  cursor: not-allowed;
  pointer-events: none;
}

.app-pagination-footer .pagination-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748B;
  flex: 1;
  justify-content: flex-end;
}

.app-pagination-footer .pagination-page-size select {
  width: auto;
  min-width: 80px;
}

@media (max-width: 768px) {
  .app-pagination-footer {
    justify-content: center;
  }

  .app-pagination-footer .pagination-count,
  .app-pagination-footer .pagination-page-size {
    flex: 0 0 auto;
    justify-content: center;
  }
}

/* App pagination — shared pagination style across all projects.
   Apply `.app-pagination` to the <nav> wrapping a Bootstrap `.pagination` ul.
   Uses padding-top + border-top so it always has breathing room from the
   table above, even inside .fill-viewport (where margin-top: auto overrides
   regular margin-top). */
.app-pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.app-pagination .pagination {
  margin-bottom: 0;
  gap: 4px;
}

.app-pagination .page-item .page-link {
  color: #64748B;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.app-pagination .page-item .page-link:hover {
  background: #e7f4f7;
  border-color: #86d3e3;
  color: #86d3e3;
}

.app-pagination .page-item.active .page-link {
  background: #86d3e3;
  border-color: #86d3e3;
  color: #fff;
}

.app-pagination .page-item.disabled .page-link {
  color: #cbd5e1;
  background: #f7f8fa;
  cursor: not-allowed;
  pointer-events: none;
}

.app-pagination .page-link:focus {
  box-shadow: 0 0 0 3px rgba(134, 211, 227, 0.2);
}

/* Detail rows — label + value, used in info/detail panels */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: #64748B;
  font-weight: 500;
}

.detail-value {
  font-weight: 600;
  color: #3c3c3c;
}

/* Detail grid — table-style variant: wrap a stack of .detail-row inside .detail-grid
   to get bordered cells (label cell + value cell) like a structured info table.
   Reusable across any project for "view details" pages. */
.detail-grid {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.detail-grid .detail-row {
  display: flex;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px;
}

.detail-grid .detail-row:last-child {
  border-bottom: none;
}

.detail-grid .detail-label {
  flex: 0 0 45%;
  padding: 14px 18px;
  background: #f7f8fa;
  border-right: 1px solid #e2e8f0;
  color: #64748B;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.detail-grid .detail-value {
  flex: 1;
  padding: 14px 18px;
  color: #3c3c3c;
  font-weight: 500;
  font-size: 15px;
  word-break: break-word;
  display: flex;
  align-items: center;
}

/* Flow breadcrumb — horizontal step indicator (used inside white-cards) */
.flow-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #f7f8fa;
  border-radius: 4px;
}

.flow-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.flow-breadcrumb-item i {
  color: #97d4e5;
  font-size: 12px;
}

.flow-breadcrumb-arrow {
  color: #97d4e5;
  font-size: 10px;
  margin: 0 2px;
}

/* "How it works" / explainer items — used in dashboards to explain workflows */
.how-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.how-item:last-child {
  border-bottom: none;
}

.how-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #e7f4f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #97d4e5;
  font-size: 15px;
}

.how-item-text h6 {
  font-size: 15px;
  font-weight: 700;
  color: #3c3c3c;
  margin-bottom: 4px;
}

.how-item-text p {
  font-size: 14px;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

/* Reusable cell truncation — use on any <td> with long text (address, URL, description, etc.) */
.cell-truncate {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-truncate-sm {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-truncate-lg {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed-layout tables: column widths come from <th> so td cells
   don't need max-width — just the overflow/ellipsis behaviour.
   Headers always remain fully visible (wrap if needed). */
.table-fixed {
  table-layout: fixed;
}

.table-fixed td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-fixed th {
  white-space: normal;
  word-break: keep-all;
  overflow: visible;
}

/* App shell — top navbar
   Spans the full viewport width. The left padding clears the
   fixed sidebar; it changes when the sidebar collapses, so only
   that property is animated. */
.top-navbar {
  position: fixed;
  height: var(--navbar-height);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: #f7f8fa;
  padding: 12px 30px 0 330px;
  transition: padding var(--shell-transition-duration) var(--shell-transition-easing);
}

.article-count-icon i {
  background: rgb(255 255 255 / 36%);
  padding: 15px;
  font-size: 26px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.orange-bg {
  background: #ffa755;
}

.green-bg {
  background: #68e365;
}

.purple-bg {
  background: #b48dd3;
}

.blue-bg {
  background: #709fba;
}

#sidebar.active .nav-profile-area {
  flex-wrap: wrap;
  justify-content: center;
}

#sidebar.active .nav-profile-detail {
  text-align: center;
  width: 100%;
}

#sidebar.active .nav-profile-detail p {
  display: none;
}

#sidebar.active .nav-profile-area img {
  margin: 0 0px 12px 0;
}

#sidebar.active .nav-profile-area h3 {
  font-size: 14px;
}

.white-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 5%);
  margin-bottom: 15px;
}

.table .thead-dark th {
  color: #fff;
  background-color: #546e7a;
  border-color: #546e7a;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  padding: 14px 10px;
  color: #444;
  /* height: 56px; */
}

.white-card h3,
.setting-main h3 {
  margin: 10px 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.white-card .table {
  margin-bottom: 0px;
}

.tittle_maincard h3 {
  margin: 10px 0;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.form-control {
  height: 40px;
  box-shadow: none;
  font-size: 0.9rem;
}

.d-block {
  display: block;
}

.multiselect-native-select .btn {
  display: inline-block;
  padding: 8px 12px;
}

.search-filter-area form {
  display: flex;
}

.search-filter-area form .form-control:first-child,
.search-filter-area form .form-control:nth-child(2) {
  max-width: 180px;
  margin-right: 20px;
}

.search-filter-area .form-control {
  height: 44px;
  box-shadow: none;
  border-color: #ddd;
}

.white-card .users-table {
  margin-top: 25px;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.users-table h3 {
  margin: 10px 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.serach-item input.form-control {
  border-radius: 4px;
  height: 44px;
  font-size: 16px;
}

.users-table table.btn-no-round td a.btn {
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  height: auto;
  width: auto;
}

.sidebar-header a {
  text-decoration: none !important;
}

.sidebar-header a:hover,
.sidebar-header a:focus {
  text-decoration: none;
}

.fileinput .btn-file {
  background: #f7f8fa;
  color: #838383;
}

.top-search-area {
  display: flex;
  justify-content: end;
}

.top-navbar-search {
  position: relative;
}

.top-search-area form {
  width: 35%;
}

.wrapper #sidebar.active~#content {
  margin-left: 220px;
  width: calc(100% - 220px);
}

.wrapper #sidebar.active~#content .top-navbar {
  padding: 16px 30px 0 269px;
}

/**  Custom Scroll STYLE */
#sidebar ul.components::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  border-radius: 10px;
  background-color: #f7f8fa;
}

#sidebar ul.components::-webkit-scrollbar {
  width: 5px;
  background-color: #f7f8fa;
}

#sidebar ul.components::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #dae2f3;
}

/**  Custom Scroll STYLE END */

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8));

  background: -webkit-radial-gradient(rgba(20, 20, 20, 0.8),
      rgba(0, 0, 0, 0.8));
  /*background: #0201011c;*/
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 800px) {
  .tabs-wrapper label {
    font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  .tabs-wrapper label {
    padding: 8px;
    font-size: 10px;
  }

  .profile-upload {
    margin-bottom: 20px;
  }
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 1600px) {
  .article-count-desc h1 {
    font-size: 32px;
  }

  .article-count-desc p {
    font-size: 14px;
  }

  .progress-btn .btn {
    font-size: 14px;
    padding: 6px 20px;
  }

  .authors-table .btn {
    padding: 8px 10px;
    max-width: 130px;
  }

  .article-count-icon {
    font-size: 40px;
  }

  .article-cate-main .card.card-wrapper {
    padding: 30px;
  }

  .read-article-main h3,
  .country-wrapper h3,
  .authors-wrapper h3 {
    font-size: 22px;
  }

  td.title-td {
    width: 30%;
    max-width: 30%;
    min-width: 30%;
  }
}

@media (max-width: 1440px) {
  .article-count-icon {
    font-size: 38px;
  }

  .article-count-desc p {
    font-size: 12px;
  }

  .article-count-desc {
    padding: 0 10px;
  }

  .users-table .btn {
    padding: 6px 12px;
    font-size: 12px;
    margin-bottom: 5px;
    height: 38px;
    width: 38px;
  }

  .read-article-main table,
  .users-table table {
    font-size: 14px;
  }

  .articles-table .status-btn .btn {
    max-width: 100%;
  }

  td.title-td {
    width: 30%;
    max-width: 30%;
    min-width: 30%;
  }

  .progress-btn {
    max-width: 20%;
  }

  .progress-content {
    width: 70%;
  }

  .progress-btn .btn {
    padding: 6px 14px;
  }

  .green-btn {
    font-size: 14px;
  }
}

@media (max-width: 1366px) {
  .authors-table .btn {
    max-width: 80%;
  }

  .authors-table table thead th,
  .authors-table table tbody td {
    padding: 14px 16px;
  }

  .read-article-main table tbody tr td,
  .users-table table tbody tr td,
  .read-article-main table thead th,
  .users-table table thead th {
    padding: 10px 20px;
  }

  .form-control-placeholder,
  .upload-logo-icon {
    font-size: 12px;
  }

  .progress-btn .btn {
    font-size: 12px;
  }

  .progress-count {
    top: -18px;
    font-size: 12px;
  }

  .article-count-desc h1 {
    font-size: 28px;
  }

  .progress-btn {
    flex: 1 20%;
    max-width: 20%;
  }

  .authors-wrapper h3 {
    padding: 20px 30px;
    font-size: 20px;
  }

  .read-article-main h3,
  .country-wrapper h3 {
    font-size: 20px;
  }

  .counting-fields .article-count-item {
    padding: 0 15px;
  }
}

@media (max-width: 1280px) {
  .progress-btn {
    flex: 1 23%;
    max-width: 23%;
  }

  .read-article-main table,
  .users-table table {
    font-size: 12px;
  }

  .article-cate-main ul li .left-span,
  .article-cate-main ul li .right-span {
    max-width: 100%;
  }

  .users-table table td a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .users-table .btn svg {
    top: 0px;
  }
}

@media (max-width: 1024px) {
  .progress-btn .btn {
    font-size: 14px;
    padding: 6px 14px;
  }

  .progress-item .progress {
    height: 25px;
  }

  .article-count-desc h1 {
    font-size: 32px;
  }

  .article-count-icon {
    line-height: 3;
    font-size: 40px;
    flex: 1 25%;
    max-width: 25%;
  }

  .article-count-desc p {
    font-size: 18px;
  }

  .top-navbar-links>ul>li {
    margin: 0 7px;
  }

  .authors-wrapper h3,
  .country-wrapper h3 {
    font-size: 18px;
  }

  .read-article-main table,
  .users-table table {
    font-size: 16px;
  }

  .users-table .btn {
    padding: 6px 10px;
    font-size: 10px;
  }

  .read-article-main table tbody tr td,
  .users-table table tbody tr td,
  .read-article-main table thead th,
  .users-table table thead th {
    padding: 10px 16px;
  }

  .article-cate-main ul li .left-span,
  .article-cate-main ul li .right-span {
    max-width: 100%;
  }

  .dashboard-content .row>[class*="col-"] {
    width: 100%;
  }

  .counting-fields .row>[class*="col-"] {
    padding: 0 15px;
  }

  .article-count-item {
    margin: 10px 0;
  }

  .users-table .btn svg {
    width: 10px;
  }

  body .counting-fields .col-md-3 {
    width: 50% !important;
  }

  .counting-fields .article-count-item {
    gap: 15px;
  }

  .fieldset_finish .purple-text {
    font-size: 20px;
  }

  .fieldset_finish img {
    max-width: 80px;
  }

  body #progressbar li {
    padding: 10px 20px;
    flex-wrap: wrap;
  }

  .dashboard-content {
    max-width: 660px;
  }

  .users-table .search-item .form-control {
    margin-bottom: 10px;
  }

  .pagination-main .pagination {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .grey-wrapper.m-t-30 {
    margin: 15px 0;
  }

  .top-navbar .top-navbar-links .dropdown-menu li.mail-li {
    padding: 6px 20px !important;
    font-size: 14px !important;
  }

  .top-navbar-links .dropdown-menu a,
  .top-navbar-links .dropdown-menu li.mail-li {
    padding: 6px 20px !important;
    font-size: 12px !important;
  }

  .admin-content-container {
    width: 100%;
  }

  /* .dashboard-content .white-card {
    background: transparent;
    padding: 0;
    box-shadow: none;
  } */

  .dashboard-content .table-responsive {
    background-color: #fff;
    margin-top: 5px;
  }

  body #sidebar {
    min-width: 200px;
    max-width: 200px;
    margin-left: -20px !important;
  }

  .nav-profile-area {
    margin: 10px;
    flex-wrap: wrap;
    text-align: center;
    gap: 5px;
    justify-content: center;
  }

  body #content {
    margin-left: 180px;
    background: #f7f8fa !important;
  }

  #content {
    background: #f7f8fa !important;
  }

  .dashboard-content {
    max-width: 550px;
  }

  .dashboard-content .upload-item {
    margin-top: 10px;
  }

  #sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .counting-fields .article-count-desc h1 {
    font-size: 28px;
  }
}

@media (max-width: 800px) {
  .top-navbar-links li a.dropdown-toggle {
    font-size: 12px;
  }

  #sidebar {
    min-width: 210px;
    max-width: 210px;
  }

  .page-title {
    display: flex;
    flex-direction: column;
  }

  .serach-item {
    margin-top: 15px;
  }
}

@media (max-width: 768px) {
  .card {
    padding: 30px 20px;
  }

  .progress-item {
    margin: 0px 0 25px;
  }

  .authors-wrapper h3,
  .country-wrapper h3,
  .read-article-main h3 {
    font-size: 20px;
  }

  #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
  }

  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }

  #sidebar.active {
    margin-left: 0 !important;
  }

  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
    display: none;
  }

  #sidebar .sidebar-header strong {
    display: block;
  }

  #sidebar ul li a {
    padding: 20px 10px;
  }

  #sidebar ul li a span {
    font-size: 0.85em;
  }

  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }

  #sidebar ul ul a {
    padding: 10px !important;
  }

  #sidebar ul li a i {
    font-size: 1.3em;
  }

  #sidebar {
    margin-left: 0;
  }

  #sidebarCollapse span {
    display: none;
  }

  .toggle-cus-btn,
  .toggle-cus-btn:hover {
    right: -40px;
  }

  .desk-logo {
    display: none;
  }

  .users-table .btn svg {
    width: 12px;
  }

  #sidebar.active .sidebar-header .toggle-cus-btn {
    top: 20px;
  }

  .users-table.contact-list-table table tbody tr td {
    min-width: 170px;
  }

  .users-table.contact-list-table table tbody tr td.title-td {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
  }

  .dashboard-content {
    max-width: 510px;
  }
}

@media (max-width: 767px) {
  .table-responsive {
    border: none;
  }

  body .modal_save_btn {
    margin-left: 0;
  }

  .top-navbar-links {
    float: right;
    margin-top: 20px;
  }

  .search-bar {
    padding-right: 0;
  }

  .counting-fields .row>div {
    padding: 0 15px;
  }

  .article-count-item {
    margin: 10px 0;
  }

  .serach-item {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .authors-table .btn {
    max-width: 100%;
  }
}

@media (max-width: 480px) {

  .read-article-main table,
  .users-table table {
    font-size: 16px;
  }

  .authors-wrapper h3,
  .country-wrapper h3,
  .read-article-main h3 {
    font-size: 16px;
  }

  .counting-fields {
    margin-bottom: 20px;
  }

  .dashboard-content {
    padding: 20px 15px;
  }

  .footer-main {
    padding: 20px 10px;
    font-size: 12px;
  }

  .page-title span.pull-right .btn {
    font-size: 10px;
    padding: 8px 12px;
  }

  .article-count-desc p,
  .progress-title,
  .progress-count {
    font-size: 12px;
    top: -15px;
  }

  #sidebar.active .sidebar-header .toggle-cus-btn {
    top: 20px;
  }

  .toggle-cus-btn,
  .toggle-cus-btn:hover {
    right: -40px;
  }

  .article-cate-main ul li {
    max-width: 100%;
  }

  .top-navbar-links .nav-item .dropdown-menu {
    left: unset;
    right: -100px;
  }

  .nav-item .dropdown-menu.notification-container.dropdown-menu-right {
    width: 250px !important;
  }

  .progress-item {
    flex-wrap: wrap;
  }

  .progress-content {
    max-width: 100%;
    flex: 1 100%;
    width: 100%;
  }

  .progress-btn {
    flex: 1 30%;
    max-width: 30%;
  }

  .progress-btn .btn {
    font-size: 12px;
    padding: 6px;
  }
}

.info-span {
  font-size: 12px;
  text-align: right;
  float: right;
  width: 100%;
  color: #65acda;
}

/*loading*/
/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  z-index: 99999;
}

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.8));

  background: -webkit-radial-gradient(rgba(20, 20, 20, 0.8),
      rgba(0, 0, 0, 0.8));
  /*background: #0201011c;*/
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 1.5em 0 0,
    rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0,
    rgba(255, 255, 255, 0.75) -1.5em 0 0 0,
    rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0,
    rgba(255, 255, 255, 0.75) 0 -1.5em 0 0,
    rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.articles-box {
  max-height: 250px;
  overflow-y: scroll;
  border: 1px solid #f3f0f0;
  padding: 20px;
  text-decoration: none;
}

/*number input*/
.number-input input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.number-input input[type="number"]::-webkit-inner-spin-button,
.number-input input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  margin-bottom: 3rem;
}

.number-input button {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: "";
  height: 2px;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type="number"] {
  text-align: center;
}

.number-input.number-input {
  border: 1px solid #ced4da;
  width: 12rem;
  border-radius: 0.25rem;
  padding: 8px;
}

.number-input.number-input button {
  width: 2.6rem;
  height: 0.7rem;
}

.number-input.number-input button.minus {
  padding-left: 10px;
}

.number-input.number-input button:before,
.number-input.number-input button:after {
  width: 0.7rem;
  background-color: #495057;
}

.number-input.number-input input[type="number"] {
  max-width: 4rem;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-width: 0 1px;
  /*font-size: 1rem;*/
  font-size: 14px;
  height: 3rem;
  color: #495057;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {

    .number-input.def-number-input.safari_only button:before,
    .number-input.def-number-input.safari_only button:after {
      margin-top: -0.3rem;
    }
  }
}

/*modal*/

.article-modal-form h3 {
  font-family: "Impact";
  margin-bottom: 17px;
  margin-top: 8px;
  color: #97d4e5;
}

.btn-submit {
  color: white;
}

#resetPwdForm {
  display: none;
}

.preview-banner-image img,
.preview-sponsored-image img {
  width: 100%;
}

.preview-banner-image,
.preview-sponsored-image {
  margin-bottom: 10px;
}

.serach-item input {
  padding: 8px 16px;
}

.upload-item {
  /*  margin: 15px 25px;*/
}

/* ---------------------------------------------------  
    Modal Style Chnages
    ----------------------------------------------------- */

#exampleModalCenter .company_logo {
  max-width: 200px;
  width: 100%;
  margin-top: 10px;
}

.modal-title {
  font-size: 24px;
  margin-right: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

.mvt-admin-modal-block-1,
.mvt-admin-modal-block-2,
.mvt-admin-modal-block-3 {
  background-color: #f3f5f7;
  padding: 15px;
  border-radius: 5px;
}

.mvt-admin-modal-block-1 {
  margin-right: 7.5px;
  margin-left: 15px;
}

.mvt-admin-modal-block-2 {
  margin-left: 7.5px;
  margin-right: 15px;
}

.mvt-admin-modal-block-3 {
  margin-top: 15px;
  max-width: 95%;
  margin-inline: 15px;
  width: 100%;
}

.mvt-admin-modal-blocks {
  display: flex;
}

#exampleModalCenter .email::before,
#exampleModalCenter .company_email::before,
#exampleModalCenter .user-email::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
}

#exampleModalCenter .logo {
  margin-bottom: 10px;
}

#exampleModalCenter .fa-phone::before {
  font-family: "FontAwesome";
  margin-right: 5px;
  font-size: 16px;
}

.modal-block-phone-number {
  display: flex;
}

.modal-block-website-icon {
  display: flex;
}

#exampleModalCenter .fa-globe {
  transform: rotate(-52deg);
}

#exampleModalCenter .fa-globe::before {
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
  position: relative;
  top: 0;
  right: -4px;
  font-size: 13px;
  font-weight: 700;
}

.Approved::after {
  content: "\f00c";
  font-family: "FontAwesome";
  margin-right: 5px;
  color: green;
}

.Pending::after {
  content: "\f06a";
  font-family: "FontAwesome";
  margin-right: 5px;
  color: red;
  position: relative;
  top: 1px;
}

.Rejected::after {
  content: "\f057";
  font-family: "FontAwesome";
  margin-right: 5px;
  color: red;
  position: relative;
  top: 1px;
}

.modal-block-address-container {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  row-gap: 0;
}

.modal-block-address-container p {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .mvt-admin-modal-blocks {
    display: block;
  }

  .mvt-admin-modal-block-1,
  .mvt-admin-modal-block-2 {
    margin-inline: 15px;
  }

  .mvt-admin-modal-block-2 {
    margin-top: 15px;
  }

  .mvt-modal-block-content {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.mvt-modal-block-all-request .approve,
.mvt-modal-block-all-request .disapprove,
.mvt-modal-block-all-request .delete {
  color: #fff;
  padding-inline: 5px;
  padding-block: 3px;
  border-radius: 3px;
}

.mvt-modal-block-all-request .approve:hover,
.mvt-modal-block-all-request .disapprove:hover,
.mvt-modal-block-all-request .delete:hover {
  text-decoration: none;
}

.mvt-modal-block-all-request .approve {
  background-color: green;
  margin-left: 10px;
}

.mvt-modal-block-all-request .disapprove {
  background-color: orange;
}

.mvt-modal-block-all-request .delete {
  background-color: red;
}

/* ---------------------------------------------------  
    Modal Style Chnages
    ----------------------------------------------------- */

/* view user page */
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.card {
  z-index: 0;
  border: none;
  position: relative;
}

.view-table-title {
  font-size: 21px;
  font-weight: 400;
  color: #000000;
  margin: 30px 0 10px;
}

.gap-4 {
  gap: 1.5rem !important;
}

.w-100 {
  width: 100% !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.view-table table th {
  width: 250px;
}

.view-table table th,
.view-table table td {
  font-size: 16px;
  font-weight: 400;
  color: #212121;

  padding: 10px 15px;
}

.view-table table,
.view-table table th,
.view-table table td {
  border: 1px solid #dddddd;
}

/* .loading{
      display:none !important;
  } */

/* add /edit user page */
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: lightgrey;
  display: flex;
  /* gap: 20px; */
  justify-content: center;
}

#progressbar li:first-child {
  border-radius: 10px 10px 10px 10px;
}

.profile-list .active .inactive-tab {
  display: none;
}

.profile-list .inactive-tab {
  display: none;
}

.profile-list .active .active-tab {
  display: inline-block;
}

#progressbar .active {
  background: #f6f9fc;
  border-bottom: 2px solid #344767;
  color: #344767;
}

#progressbar li {
  list-style-type: none;
  align-items: center;
  display: flex;
  background: #f6f9fc;
  font-weight: 400;
  gap: 10px;
  padding: 15px 45px;
  color: #8a8f95;
  border-right: 1px solid #bec7dc;
  font-size: 16px;
}

#progressbar li strong {
  font-weight: 400;
}

.form-card {
  text-align: left;
  color: #333;
}

#msform {
  text-align: center;
  position: relative;
  margin-top: 20px;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  /* padding-bottom: 20px; */
  position: relative;
}

.form-card {
  text-align: left;
}

#msform fieldset:not(:first-of-type) {
  display: none;
}

#msform input,
#msform select,
#msform textarea {
  padding: 6px 12px;
  border-radius: 0px;
  /* margin-bottom: 25px;
  margin-top: 2px; */
  width: 100%;
  box-sizing: border-box;
  font-family: 'Helvetica';
  color: #2c3e50;
  background-color: transparent;
  font-size: 14px;
  letter-spacing: 1px;
  resize: none;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#msform select {
  border: 1px solid #ccc !important;
}

#msform input,
#msform select {
  height: 42px;
}

#msform input:focus,
#msform textarea:focus {
  box-shadow: unset;
  border-color: #94a9c6;
}

.form-select {
  /* border-color: #97d4e5 !important; */
  color: #555 !important;
}

.selected-url {
  flex-wrap: nowrap !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef !important;
  opacity: 1;
}

#msform .action-button {
  width: 100px;
  background: #344767;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  /* padding: 10px 10px;*/
  margin: 20px 0px 10px 5px;
  float: right;
  border-radius: 8px;
  font-family: "Helvetica";
}

#msform .action-button:hover,
#msform .action-button:focus {
  background-color: #344767;
}

#msform .action-button-previous {
  width: 100px;
  background: #616161;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  /* padding: 10px 5px;*/
  margin: 10px 5px 10px 0px;
  float: right;
  border-radius: 8px;
  margin-top: 20px;
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
  background-color: #000000;
}

.card {
  z-index: 0;
  border: none;
  position: relative;
}

#media-information h2.fs-title {
  margin: 0 0 20px;
  padding-left: 15px;
}

.fs-title,
.fs-title-2 {
  font-size: 18px;
  color: #333;
  text-align: left;
  margin: 0 0 20px;
  font-weight: 600;
  /* padding: 0 15px; */
}

.fs-title-2 {
  margin: 15px 0px 20px;
}

.pl-15 {
  padding-left: 15px;
}

.purple-text {
  /* color: #673AB7; */
  font-weight: normal;
  font-size: 30px;
}

.modal_save_btn {
  margin-left: 10.5%;
}

.steps {
  font-size: 25px;
  color: gray;
  margin-bottom: 10px;
  font-weight: normal;
  text-align: right;
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: lightgrey;
  display: flex;
  /* gap: 20px; */
  justify-content: center;
}

#progressbar li:first-child {
  border-radius: 10px 10px 10px 10px;
}

#progressbar li:last-child {
  border-radius: 10px 10px 10px 10px;
}


#progressbar .active {
  background: #344767;
  border-bottom: 0;
  color: #fff;
}

#progressbar li {
  list-style-type: none;
  align-items: center;
  display: flex;
  background: #f6f9fc;
  font-weight: 400;
  gap: 10px;
  padding: 15px 45px;
  color: #8a8f95;
  border-right: 1px solid #bec7dc;
  font-size: 16px;
}

#progressbar li:last-child {
  border-right: 0px;
}

#progressbar li strong {
  font-weight: 400;
}

.profile-list .active .active-tab {
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(228deg) brightness(103%) contrast(102%);
}

.profile-list .active .inactive-tab {
  display: none;
}

.profile-list .active-tab {
  display: none;
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  color: #8a8f95;
  /* background: #F6F9FC; */
  border-radius: 50%;
  padding: 2px;
}

#progressbar li.active:before,
#progressbar li.active:after {
  color: #344767;
}

.progress {
  height: 20px;
}

.progress-bar {
  background-color: #673ab7;
}

.fit-image {
  width: 100%;
  object-fit: cover;
}

select#action,
select#service,
select#country,
select#state,
select#city,
select#usertypes {
  width: 100%;
  /* background-color: #ffffff;
border: 1px solid #9B9B9B; */
  border-radius: 0px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/221782-200.png");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 11px;
  /* padding: 11px; */
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #ccc;
  background-size: 18px;
  min-height: 42px;
  border-radius: 4px;
}

.bg-primary {
  top: 0;
}

.custom-control-input:checked~.custom-control-label {
  background-color: #e2f0f9;
}

.open .multiselect-container {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

#msform {
  margin-top: 0px;
  padding-top: 0px;
}

.company_name_bar {
  position: relative;
}

.company_name_bar #autocomplete-results {
  position: absolute;
  top: 80px;
  left: 16px;
  width: 95%;
}

#autocomplete-results {
  position: absolute;
  top: 90px;
  left: 16px;
  z-index: 999;
  width: 96%;
}

.form-card .col-6 {
  position: relative;
}

#companyname-input {
  margin-bottom: 0;
}

#autocomplete-results .autocomplete-item {
  padding: 5px;
  cursor: pointer;
}

/* Adjust the height of .iti__country-container when the #phone has the error class */

.companyList {
  display: block;
  list-style: none;
  font-size: 15px;
  width: 49%;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0px 0px 5px #333;
}

#federation_add_more_button {
  border: 0;
  color: #fff;
  font-family: "Helvetica";
  font-size: 16px;
  font-weight: 500;
  padding: 7px 15px;
  width: auto !important;
  background: #344767;
  border-radius: 8px;
}

div#federation_appd label {
  color: #333333;
}

#federation_add_more {
  text-align: right;
}

#media_add_more_button {
  border: 0;
  color: #fff;
  font-family: "Helvetica";
  font-size: 16px;
  font-weight: 500;
  padding: 7px 15px;
  width: auto !important;
  background: #344767;
  border-radius: 8px;
}

#company_add_more_button {
  border: 0;
  color: #fff;
  font-family: "Helvetica";
  font-size: 16px;
  font-weight: 500;
  padding: 7px 15px;
  width: auto !important;
  background: #344767;
  border-radius: 8px;
  margin-right: 15px;
}

.remove_company {
  margin-right: 15px;
}

.usersCompany-table table td a.btn {
  color: #fff;
  padding: 8px 0px;
  border-radius: 30px;
  height: 38px;
  width: 38px;
}

.error.invalid-feedback {
  width: 100%;
  float: left;
  text-align: left;
  color: red;
  /* font-weight: bold; */
  font-style: normal;
  font-size: 12px;
  margin-top: 5px;
}

.dropdown-menu input {
  width: max-content !important;
}

.dropdown-menu.show {
  /* inset: 0 auto auto -60px !important; */
}

span.remove {
  font-size: 13px;
  color: red !important;
  float: right;
  margin-top: 15px;
  margin-bottom: 10px;
}

.pull-right,
.rm-row {
  text-align: right;
}

span.multiselect-native-select {
  width: 100%;
  float: left;
}

/* ------COMMENT */

#msform input {
  background: transparent;
  border: 1px solid #ccc;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Helvetica";
  color: #555;
}

.iti__selected-country-primary {
  height: 0px !important;
  position: absolute;
  top: 20px;
}

#phone {
  padding-left: 44px !important;
}

.fieldlabels {
  color: #333;
  text-align: left !important;
  font-weight: 600;
  font-size: 14px;
  margin: 0px 0px 5px;
}

.banner-img {
  position: fixed;
  top: 0;
  z-index: -1;
}

.form-group .editor_textarea {
  height: 40px;
}

span.remove {
  display: flex;
  justify-content: flex-end;
  color: #97d4e5 !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#append-media-information {
  margin-top: 20px;
}

#media-information .media-lang {
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/221782-200.png);
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 10px;
  background-size: 18px;
}

#autocomplete-results {
  position: absolute;
  top: 70px;
  left: 16px;
  z-index: 999;
  color: black !important;
  border-radius: 4px;
  /* height: 200px;
    overflow-y: scroll; */
}

#autocomplete-results:has(.autocomplete-item) {
  max-height: 200px;
  overflow-y: scroll;
  width: 96%;
}

#autocomplete-results .autocomplete-item {
  padding: 5px;
  cursor: pointer;
}

.companyList {
  display: block;
  list-style: none;
  font-size: 15px;
  width: 49%;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0px 0px 5px #333;
}

/* Other information */
.other-information .col-6 {
  padding: 0 15px;
  margin-bottom: 15px;
}

/* Printer */
.fieldset_printer .fs-title {
  padding: 0;
}

.fieldset_printer .col-sm-6 {
  text-align: left;
}

#federation_add_more {
  padding: 0 15px;
}

/* Media */
#media-information .pull-right,
#media-information span.remove {
  margin-right: 15px;
}

.card_padding {
  padding-block: 0;
}

.card_padding_bottom {
  padding-bottom: 0;
}

.media_form_table:not(:last-child) {
  margin-bottom: 25px;
}

.iti {
  float: left;
  width: 100%;
}

.rounded-circle {
  border-radius: 50% !important;
  /* padding: 8px 12px !important; */
}

.company-option {
  padding: 0;
  margin: 0 !important;
  color: black;
}

.select2-container--default .select2-search--inline .select2-search__field {
  color: black !important;
}

.select2-search__field {
  margin-bottom: -16px;
}


#autocomplete-citys .autocomplete-item {
  padding: 5px 0;
  cursor: pointer;
}

#autocomplete-citys:has(.autocomplete-item) {
  max-height: 100px;
  height: fit-content;
  overflow-y: scroll;
  list-style: none !important;
  padding: 10px;
}

#autocomplete-citys.autocomplete-item {
  padding: 5px 10px;
  cursor: pointer;
  list-style: none !important;
}

#autocomplete-states:has(.autocomplete-item),
#autocomplete-citys:has(.autocomplete-item) {
  /* height: 200px; */
  overflow-y: scroll;
  list-style: none !important;
  padding: 10px;
  height: fit-content;
  max-height: 250px;
  position: absolute;
  background: white;
  z-index: 5;
  width: 94%;
  box-shadow: rgb(237, 237, 237) 2px 2px 5px;
  /* left: 0px; */
}

#stateModal,
#cityModal {
  z-index: 20050;
}

.stateNotFound {
  font-size: 14px;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0 10px 26px 0 rgb(0 0 0 / 5%);
  margin-top: 0px;
}

.modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-header {
  border-top: 5px solid #35bcd9;
}

.back-button {
  background-color: #97d4e5 !important;
  border-color: #97d4e5 !important;
  color: #fff !important;
}

.back-button:hover {
  background-color: #a3e0f1 !important;
  border-color: #97d4e5 !important;
  color: #fff !important;
}


.users-table .table-responsive table thead {
  background: #546E7A;
}

.users-table .table-responsive table thead th {
  color: #ffffff;
}

.users-table .table-responsive table thead th a {
  color: #ffffff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 14px !important;
}

.select2-results__option {
  color: #000000 !important;
}

.media-information {
  padding: 20px 0px;
  margin-bottom: 20px;
  /* border-bottom: 2px dashed #dfdada ; */
  border-top: 2px dashed #dfdada;
}

.printer-information {
  padding: 20px 0px;
  border-top: 2px dashed #dfdada;
}

.select2-search__field {
  padding: 3px 5px !important;
}

.select2-container--default .select2-selection--multiple {
  border-color: #ccc !important;
}

.select2 {
  width: 100% !important;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  background-color: white;
  border-color: #CCCCCC;
}

.setting-main form input.green-btn {
  color: #fff;
}

textarea.select2-search__field {
  height: unset !important;
  resize: none;
  border: none !important;
}



#federations-error {
  position: absolute;
  top: 40px;
}

.topbar {
  position: sticky;
  top: 20px;
  height: 100%;
  z-index: 2;
  padding-bottom: 10px;
  background: #f7f8fa;
}

option {
  color: #555 !important;
}


li.autocomplete-item {
  padding: 5px;
  cursor: pointer;
}

li.autocomplete-item:hover {
  background: #97d4e5;
}

.autocomplete-editors {
  position: absolute;
  top: 100%;
  left: 15px;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  width: 95%;
  display: none;
  padding: 0;
  margin-top: 4px;
  list-style: none;
}

.autocomplete-editor {
  padding: 8px 12px;
  cursor: pointer;
}

.autocomplete-editor:hover {
  background-color: #f0f0f0;
}

.no-citys {
  overflow-y: none;
  list-style: none !important;
  padding: 10px;
  height: fit-content;
  max-height: 250px;
  position: absolute;
  background: white;
  z-index: 5;
  width: 95%;
  box-shadow: rgb(237, 237, 237) 2px 2px 5px;
  left: 10px;
}

.thumb-logo img {
  height: 200px;
  width: 200px;
  object-fit: cover;
  object-position: center;
}

.view-table {
  width: 100% !important;
}

#fed_err .invalid-feedback {
  display: block;
  margin-top: 30px;
}

.company-section,
.cloned-company-section {
  border-bottom: 2px dashed #dfdada;
}

#company_add_more_button {
  margin-top: 10px;
}

.mediaDiv {
  border-bottom: 2px dashed #dfdada;
  margin-bottom: 10px;
}

.addCampaignBtn {
  border: 0;
  color: #fff;
  font-family: "Helvetica";
  font-size: 16px;
  font-weight: 500;
  padding: 7px 15px;
  width: auto !important;
  background: #344767;
  border-radius: 8px;
  margin: 20px 0px 10px 5px;
  float: right;
}

.select2-results__option span {
  font-size: 14px !important;
  color: black !important;
}

.select2-results__option--selectable {
  font-size: 14px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #97d4e5 !important;

}

.select2-container--default textarea {
  border: none !important;
}

.select2-container--default .select2-selection--multiple {
  padding-bottom: 0 !important;
}

.select2-selection__choice {
  margin: 7px !important;
}

.radio-group {
  gap: 2rem;
}

.radio-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 15px !important;
}

.radio-circle {
  width: 14px;
  height: 14px;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5f5f5f;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.radio-input:checked+.radio-label .radio-circle {
  border-color: #5f5f5f;
  background: transparent;
}

.radio-input:checked+.radio-label .radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

/* .radio-input:focus+.radio-label .radio-circle {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
} */
.select2-search__field {
  min-width: 30%;
}



.url-field-row .input-group {
  max-width: 100%;
}

.url-field-row input[readonly] {
  cursor: default;
}

.url-input {
  width: 80% !important;
}

.remove-url {
  font-size: 18px;
  line-height: 1;
  /* background-color: #ccc !important; */
  border-radius: 5px !important;
}

#add-url-btn {
  background-color: #86d3e3 !important;
  border-radius: 5px !important;
}

.selected-url-input {
  border-color: #EEFCFF !important;
  background-color: #EEFCFF !important;
  border-radius: 5px !important;
  width: 96% !important;
}

.selected-url {
  background-color: #EEFCFF !important;

}

.table-rounded {
  border-radius: 15px !important;
}

.page-wrapper {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
}


/* Campaign View Page */
.campaign-title {
  font-family: "Impact";
  font-size: 56px;
  font-weight: 300;
  color: #233D4A;
}

.link-pill {
  background-color: #97D4E5;
  border-radius: 6px;
  padding: 10px 14px;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.link-pill a {
  text-decoration: none;
  color: #fff;
}

.empty-state {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 2px dashed #ddd; */
  border-radius: 8px;
  color: #6c757d;
  font-size: 26px;
  font-weight: 500;
  /* background-color: #fafafa; */
  text-align: center;
}

.navy-btn {
  background-color: #546e7a !important;
  color: #fff !important;
}

/* Click map */

#clicksMap {
  width: 100%;
  height: 500px;
  z-index: 0;
}

.clickmap_inner {
  position: absolute;
  z-index: 9999;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  right: 20px;
  top: 50%;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(-50%);
}

.clickmap_inner span {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.clickmap_inner .region_wrapper {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.clickmap_inner .region_wrapper .region_wrap {
  display: flex;
  font-size: 16px;
  gap: 12px;
}

.clickmap_inner .region_wrapper .region_wrap .color {
  width: 24px;
  height: 24px;
  background-color: #efefef;
  border-radius: 50%;
}

/* Click map */


/* Tabs */
/* TAB CONTAINER */
.tab {
  display: flex;
  gap: 15px;
  border-bottom: 2px solid #EDEDED;
}

/* BASE BUTTON */
.tab button {
  background: transparent;
  border: 2px solid transparent;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  /* border-radius: 8px; */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* HOVER */
.tab button:hover {
  background: #97D4E5;
  border-color: #97D4E5;
  color: #fff;
}

/* ACTIVE */
.tab button.active {
  background: #97D4E5;
  border-color: #97D4E5;
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid #34b6db;
}

.tabcontent {
  display: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.btn_padding {
  padding: 7px 21px !important;
}

.custom_border {
  border: 1px solid #DBDBDB !important;
}

.download_btn {
  background-color: #86D3E3 !important;
  color: #000000 !important;
  padding: 4px 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  gap: 5px !important;
  font-size: 11px !important;
}

.download_btn:hover {
  background-color: #86D3E3 !important;

}

.modal_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
}

.modal_content {
  max-width: 181.3px;
  max-height: 170px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.modal_title {
  font-size: 18px;
  font-weight: 600;
  color: #233D4A;
}

.modal_sub_title {
  font-size: 18px;
  font-weight: 300;
  color: #233D4A;
  margin-bottom: 0;
}

.company_name {
  background: #97d4e5;
  color: #fff;
  border-color: #97d4e5;
  padding: 1px 5px !important;
  font-size: 15px;
  background-color: #97d4e5;
  border: 1px solid #97d4e5;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  padding-left: 20px;
  position: relative;
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;

}

.company_container {
  padding: 6px;
  border: 1px solid #E9E9E9;
  border-radius: 5px;
  max-width: 1635px;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.company_heading {
  font-size: 24px;
  font-weight: 600;
  color: #233D4A;
}

.custom_badge {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &::before {
    margin-right: 5px;
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
  }
}

.campanaign_tables {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
}

.campanaign_table {
  border: 1px solid #ECEFF5;
  border-radius: 10px;
}

.campanaign_table th {
  border-right: 1px solid #ECEFF5;
  padding: 14px 10px !important;
}

.campanaign_table td {
  text-align: right;
  padding: 14px 10px !important;

}

.edit_btn {
  background-color: #98D1E4;
  color: #fff;
  padding: 16px;
  border-radius: 5px;
}

.film_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 20px;
}

.view_all_films_btn {
  border: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  width: auto !important;
  background: #344767 !important;
  border-radius: 8px !important;
}

.view_all_films_btn:hover {
  background: #344767 !important;
  color: #fff !important;
}

/* Make the Select2 container look like a standard Bootstrap Input */
.select2-container--default .select2-selection--single {
  height: 38px !important;
  /* Standard input height */
  padding: 5px 10px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  background-color: #fff;
}

/* Hide the dropdown arrow to make it look like a text input */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

/* Style the placeholder text */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}

/* Adjust the search box inside the dropdown to look seamless */
.select2-dropdown {
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.select2-search--dropdown .select2-search__field {
  border: none !important;
  border-radius: 4px;
  padding: 8px !important;
  margin-bottom: 6px !important;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none !important;
  box-shadow: none !important;
}

.select2-search--dropdown {
  padding: 0 !important;
}

.select2-container--default .select2-selection--single {
  padding: 4px 0 !important;
}

span.select2-dropdown.select2-dropdown--below:has(input[aria-controls="select2-filterQRByCompany-results"]) {
  top: -36px !important
}

span.select2-dropdown.select2-dropdown--below:has(input[aria-controls="select2-filterByCompany-results"]) {
  top: -36px !important
}

.disabled-link,
.btn-disabled {
  pointer-events: none;
  /* BLOCK CLICK */
  opacity: 0.6;
  cursor: not-allowed;
}

.tooltip-wide {
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #000;
}

.tooltip-wide .tooltip-inner {
  max-width: 350px;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

[data-bs-toggle="tooltip"] {
  cursor: pointer;
}

.dashboard-welcome-box {
  background: #f3f5f7;
  padding: 25px 30px;
  border-radius: 12px;
  margin-bottom: 25px;
}

.welcome-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #3c3c3c;
}

.welcome-subtitle {
  color: #6c7a89;
  font-size: 15px;
  margin-bottom: 20px;
}

.how-it-works {
  color: #6cb4c7;
  font-weight: 600;
  text-decoration: none;
}

.steps-row {
  margin-top: 10px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  /* gap: 15px; */
}

.step-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  /* ⭐ IMPORTANT */
  flex-shrink: 0;
  background: #e7f4f7;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  color: #97d4e5;
  font-size: 18px;
  margin-right: 15px;
}

.step-item h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #3c3c3c;
}

.step-item p {
  margin: 3px 0 0;
  color: #7d8a97;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .dashboard-content {
    margin-top: 100px;
  }
}

/* Header */
.page-header {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
}

/* Service Card */
.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* Stats Box */
.stat-box {
  background: #7dbacb;
  color: #fff;
  border-radius: 8px;
  padding: 15px 20px 20px 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.stat-title {
  font-size: 14px;
  font-weight: 500;
}

.stat-value {
  font-size: 29px;
  font-weight: 700;
}

/* Badge */
.status-badge {
  background: #e9ecef;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.open-btn {
  background: #79c6cf !important;
  border: none !important;
  font-size: 15px !important;
  padding: 15px 16px !important;
}

.open-btn:hover {
  background: #63b3bc !important;
}

.service-icon {
  font-size: 18px;
  margin-right: 8px;
}

/* APP HEADER STRIP */
.app-header {
  background: #fff;
  padding: 12px 23px;
  /* border-radius: 14px 14px 0 0; */
  font-weight: 600;
  gap: 15px;
  width: max-content;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.app-icon {
  font-size: 38px;
  color: #222;
}

/* CARD BODY */
.service-card {
  background: #fff;
  padding: 20px;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* My Style */
/* Custom utility classes extracted from inline styles */
.text-ink {
  color: #3c3c3c;
}

.insights-subtitle {
  color: #64748B;
  font-size: 15px;
}

.text-13 {
  font-size: 13px;
}

.text-14 {
  font-size: 14px;
}

.text-15 {
  font-size: 15px;
}

.btn-custom-radius {
  border-radius: 4px;
}

.icon-external {
  font-size: 12px;
  margin-left: 4px;
}

.preview-icon {
  width: 42px;
  height: 42px;
}

/* Specific background styles for the image placeholders */
.gradient-bg {
  background: linear-gradient(135deg, #a18cd1 0%, #00d2ff 100%);
}

.solid-bg {
  background: #eaedf2;
}

.td-preview-width {
  width: 80px;
}

/* Pending */
.status-dot-pending {
  color: #E49D05;
  /* amber */
  font-size: 15px;
  margin-right: 5px;
}

/* Approved */
.status-dot-approved {
  color: #00CC99;
  /* teal green */
  font-size: 15px;
  margin-right: 5px;
}

/* Rejected */
.status-dot-rejected {
  color: #E20606;
  /* red */
  font-size: 15px;
  margin-right: 5px;
}

/* Post Pending */
.status-dot-post-pending {
  color: #6C63FF;
  /* purple */
  font-size: 15px;
  margin-right: 5px;
}

/* Posted */
.status-dot-posted {
  color: #2ECC71;
  /* strong green */
  font-size: 15px;
  margin-right: 5px;
}

/* Post In Progress */
.status-dot-post-in-progress {
  color: #3498DB;
  /* blue */
  font-size: 15px;
  margin-right: 5px;
}

/* Custom table design */
.custom-table-wrapper {
  border-radius: 8px;
  border: 1px solid #eee;
  /* overflow: hidden; */
}

/* Modifier: allow cell content to wrap (no horizontal scroll, no min-width: max-content).
   Use on tables where you want long text to wrap naturally instead of expanding the table. */
.custom-table-wrapper.wrap-content,
.custom-table-wrapper.wrap-content .table {
  min-width: 0 !important;
  width: 100%;
}

.custom-table-wrapper.wrap-content {
  overflow-x: hidden !important;
}

.custom-table-wrapper.wrap-content td,
.custom-table-wrapper.wrap-content th {
  white-space: normal;
  word-break: break-word;
}

.custom-table-wrapper .table {
  margin-bottom: 0;
  border-collapse: collapse !important;
  min-width: max-content;
}

.custom-table-wrapper thead tr th {
  background-color: #546e7a;
  color: #fff;
  border: none !important;
}

.custom-table-wrapper tbody tr td {
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
}

.custom_buttons-gp {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
  align-items: center;
}

@media screen and (max-width: 1501px) {
  .custom_buttons-gp {
    grid-template-columns: 1fr 2fr;
  }
}

@media screen and (max-width: 1024px) {
  .custom_buttons-gp {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

/* Remove the bottom border on the last row so it doesn't double-up with the wrapper border */
.custom-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

/* Sequence Groups & Settings Additions */

/* Search Input wrapper with inner icon */
.search-input-wrapper {
  position: relative;
  min-width: 220px;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f8f91;
  width: 15px;
  height: 15px;
}

.search-input-wrapper .form-control {
  padding-left: 38px;
  border: 1px solid #E9E9E9;
  box-shadow: none;
}

/* Light border style for selects */
.filter-select {
  border: 1px solid #E9E9E9 !important;
  color: #64748B;
  box-shadow: none !important;
}

.filter-select:focus {
  border-color: #86D3E3 !important;
}

/* Info circle icon */
.info-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 35px;
  border-radius: 50%;
  background-color: #f1f2f4;
  color: #2C2C2C;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  font-family: serif;
}

.info-icon-circle:hover {
  background-color: #e2e3e5;
  color: #495057;
}

/* Form Labels */
.form-label-custom {
  font-size: 15px;
  color: #2C2C2C;
  margin-bottom: 6px;
  font-weight: 500;
}

/* Custom Outlined Buttons */
.btn-outline-sky {
  color: #86D3E3;
  border: 1px solid #86D3E3;
  background-color: transparent;
  transition: all 0.2s;
}

.btn-outline-sky:hover {
  background-color: #86D3E3 !important;
  color: #fff;
}

.btn-outline-gray {
  color: #a0a5b1;
  border: 1px solid #dcdfe5;
  background-color: transparent;
  transition: all 0.2s;
}

.btn-outline-gray:hover {
  background-color: #f7f8fa;
  color: #333;
}

.btn-outline-teal {
  color: #546E7A;
  border: 1px solid #546E7A;
  background-color: transparent;
  transition: all 0.2s;
}

.btn-outline-teal:hover {
  background-color: #4a616b;
  color: #607680;
}

/* Sequence Settings Dropdowns (Cyan Border) */
.settings-select {
  border: 1px solid #86D3E3 !important;
  color: #949494 !important;
  box-shadow: none !important;
}

.settings-select:focus {
  border-color: #86D3E3 !important;
  outline: 0;
}

/* Fix height mismatch between search input and filter dropdowns */
.search-input-wrapper .form-control,
.filter-select {
  height: 40px !important;
  box-sizing: border-box;
}

/* Ensure the text inside the select is vertically centered */
.filter-select {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Modal Right Side Floating Position */
.modal-dialog-right {
  position: absolute;
  right: 20px;
  top: 20px;
  bottom: 20px;
  margin: 0;
  width: 480px;
  max-width: 100%;
}

/* Make sure the modal fills its vertical container */
.modal-dialog-right .modal-content {
  min-height: calc(100vh - 40px);
}

/* Fallback for smaller screens */
@media (max-width: 576px) {
  .modal-dialog-right {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* Make Modal Slide in from Right */
.modal.fade .modal-dialog-right {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.modal.show .modal-dialog-right {
  transform: translateX(0);
}

/* Ensure modal dialog touches the right edge */
.modal-dialog-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  width: 480px;
  max-width: 100%;
  padding: 15px;
  /* Adds breathing room around the modal content */
}

/* --- Template Editor Section --- */

.template-list {
  max-height: 505px;
}

.cursor-pointer {
  cursor: pointer;
}

.template-item {
  transition: background-color 0.2s;
}

.template-item.active {
  background-color: #eefcff;
}

.template-item:hover:not(.active) {
  background-color: #f7f8fa;
}

.custom-editor-textarea {
  line-height: 1.6;
}

/* Small variation of the info circle icon */
.info-icon-sm {
  width: 22px !important;
  height: 25px !important;
  font-size: 19px !important;
  color: #2C2C2C !important;
  background-color: #F4F4F4 !important;
}

/* Custom Pills for Placeholders */
.custom-placeholder-pill {
  background-color: #F4F4F4;
  color: #949494 !important;
  border: 1px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
}

.custom-placeholder-pill:hover {
  background-color: #e6e5e5;
  color: #7e7e7e !important;
}

.bg-f0 {
  background-color: #F0F0F0 !important;
}

.fs-00 {
  color: #000 !important;
}

/* =========================================
   Share Your Work Page Styles
   ========================================= */

/* Public form pages (e.g., form.html) — modernized with brand teal,
   Inter font, soft gradient background, and drag-drop upload zone. */
body.share-page-bg {
  background: linear-gradient(145deg, #F0F4F8 0%, #E8F4F8 100%) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  min-height: 100vh;
  margin: 0 !important;
}

.share-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;
}

.share-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 40px 44px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(0, 0, 0, 0.07);
}

.share-logo-wrapper {
  text-align: center;
  margin-bottom: 16px;
}

.share-logo {
  height: 36px;
  object-fit: contain;
}

.share-title {
  text-align: center;
  font-family: inherit;
  color: #1E293B;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.share-subtitle {
  text-align: center;
  font-size: 14px;
  color: #64748B;
  margin-bottom: 28px;
}

.share-context-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F0F4F8;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 14px;
  color: #64748B;
  margin-bottom: 24px;
}

.share-context-pill strong {
  color: #1E293B;
  font-weight: 600;
}

.share-section {
  margin-bottom: 28px;
}

.share-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F0F4F8;
}

.share-label {
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.share-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.share-label-row .share-label {
  margin-bottom: 0;
}

.share-char-counter {
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
}

.share-readonly-hint {
  font-size: 13px;
  color: #94A3B8;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Input fields */
.share-input {
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  font-size: 14px;
  color: #1E293B !important;
  box-shadow: none;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input.share-input,
select.share-input {
  height: 42px;
}

.share-input::placeholder {
  color: #94A3B8;
}

.share-input:focus {
  border-color: #86D3E3 !important;
  box-shadow: 0 0 0 3px rgba(134, 211, 227, 0.15) !important;
  outline: 0;
}

.share-input[readonly] {
  background: #F7F8FA;
  color: #64748B !important;
  cursor: default;
}

/* Drag-drop upload zone */
.share-upload-zone {
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  padding: 36px 20px;
  text-align: center;
  background: #FAFBFC;
  cursor: pointer;
  transition: all 0.15s;
}

.share-upload-zone:hover {
  border-color: #86D3E3;
  background: #F0F9FB;
}

.share-upload-zone.dragover {
  border-color: #86D3E3;
  background: #E7F4F7;
}

.share-upload-zone-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E7F4F7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #86D3E3;
  font-size: 22px;
  margin-bottom: 12px;
}

.share-upload-zone-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 4px;
}

.share-upload-zone-hint {
  font-size: 14px;
  color: #64748B;
  margin: 0;
}

/* Checkbox */
.share-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #CBD5E1;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.share-checkbox:checked {
  background-color: #86D3E3;
  border-color: #86D3E3;
}

.share-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(134, 211, 227, 0.15);
  border-color: #86D3E3;
}

.share-checkbox-label {
  font-size: 14px;
  color: #64748B;
  line-height: 1.5;
  cursor: pointer;
}

/* Submit button */
.share-submit-btn {
  background-color: #86D3E3 !important;
  border-radius: 8px !important;
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px !important;
  width: 100%;
  transition: background 0.15s;
}

.share-submit-btn:hover {
  background-color: #6BC0D0 !important;
}

/* Footer below card */
.share-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: #94A3B8;
}

.share-footer a {
  color: #86D3E3;
  text-decoration: none;
  font-weight: 500;
}

.share-footer a:hover {
  text-decoration: underline;
}

/* Mobile responsiveness — minimum body font 14px */
@media (max-width: 576px) {
  .share-container {
    padding: 20px 12px;
  }

  .share-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .share-title {
    font-size: 22px;
  }

  .share-subtitle {
    margin-bottom: 20px;
  }

  .share-context-pill {
    padding: 8px 12px;
  }

  .share-section {
    margin-bottom: 20px;
  }

  .share-upload-zone {
    padding: 24px 16px;
  }

  .share-upload-zone-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .share-upload-zone-title {
    font-size: 14px;
  }

  .share-footer {
    line-height: 1.6;
  }
}


.nav-insta-profile-area,
.nav-app-profile-area {
  display: flex;
  gap: 15px;
  padding: 16px 20px 20px 20px;
  align-items: center;
}

.nav-app-profile-area h3 {
  font-size: 16px;
  font-weight: 700;
  color: #3c3c3c;
  margin: 0 0 2px;
}

.nav-app-profile-area p {
  font-size: 14px;
  color: #64748B;
  margin: 0;
}

#sidebar.active .nav-insta-profile-area,
#sidebar.active .nav-app-profile-area {
  flex-direction: column;
}

#sidebar.active .nav-insta-profile-area h3,
#sidebar.active .nav-app-profile-area h3 {
  font-size: 18px;
}

#sidebar.active .nav-insta-profile-area p,
#sidebar.active .nav-app-profile-area p {
  display: none;
}


.lang-selector-btn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.languages-icon {
  margin-right: 15px;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.languages-icon .en-btn {
  background-color: #53717b;
  font-family: "Impact";
  font-size: 18px;
  padding: 5px 9px;
  box-shadow: none;
  border: none;
  color: #fff;
  line-height: 25px;
}

.languages-icon .dropdown-menu,
.heatmap-icon .dropdown-menu {
  padding: inherit;
  top: inherit;
  backdrop-filter: blur(18.600000381469727px);
  background: #000000B2;
  border-radius: 0px;
  border: none;
  color: #fff;
  padding: 10px;
  min-height: 100px;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.lang-list {
  display: flex;
}

.languages-icon .lang-list a {
  background-color: #97d0e1;
  font-family: "Impact";
  font-size: 17px;
  padding: 3px;
  color: #fff;
  margin-right: 2px;
  text-transform: uppercase;
  width: 33px;
  text-align: center;
  margin-bottom: 3px;
}



/* Main trigger button */
.lang-selector-btn {
  background-color: #53717b !important;
  font-family: "Impact" !important;
  font-size: 18px !important;
  padding: 5px 9px !important;
  box-shadow: none !important;
  border: none !important;
  color: #fff !important;
  line-height: 25px !important;
  border-radius: none !important;

}

.lang-selector-btn:hover,
.lang-selector-btn:focus {
  background-color: #435B66;
  color: #ffffff;
}

/* Dropdown Menu Box */
.top-navbar-links .dropdown .lang-dropdown-menu {
  width: max-content;
  /* border-radius: 8px !important; */
  margin-top: 1px !important;
  padding: 10px 10px !important;
}

.top-navbar-links .dropdown .lang-dropdown-menu.show {
  inset: 0px auto auto -195px !important;
}

.top-navbar-links .dropdown .lang-dropdown-menu .lang-dropdown-title {
  color: #86D3E3;
  font-weight: 800;
  font-size: 30px;
}

/* Grid for the buttons */
.top-navbar-links .dropdown .lang-dropdown-menu .lang-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* gap: 10px; */
}

.top-navbar-links .dropdown .lang-dropdown-menu .lang-item {
  /* background-color: #97d0e1; */
  font-family: "Impact";
  font-size: 17px;
  padding: 3px;
  color: #fff;
  margin-right: 2px;
  text-transform: uppercase;
  width: 33px;
  text-align: center;
  margin-bottom: 3px;
  text-decoration: none !important;
}


/* Specific Colors for Language Squares */
.bg-lang-cyan {
  background-color: #73bcd1;
}

.bg-lang-slate {
  background-color: #5F838F;
}

.bg-lang-dark {
  background-color: #51504C;
}

.bg-lang-black {
  background-color: #000000;
}

.bg-lang-orange {
  background-color: #FC6E08;
}

.bg-lang-navy {
  background-color: #1E4D7B;
}

.lang-selector-btn:focus,
.lang-selector-btn:active,
.lang-selector-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.custom-dropdown-menu {
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  position: absolute;
  border-radius: 4px !important;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  transform: translate(-55px, 50px) !important;
  top: -2% !important;
}

.custom-dropdown-menu li {
  padding: 10px 20px !important;
  color: #333333;
  font-size: 16px !important;
}

.custom-dropdown-menu li:last-child:hover {
  background-color: #E6F6F9;
}

.custom-dropdown-menu li:hover {
  background-color: none !important;
}

.log-in-out {
  padding: 0 !important;
}

.log-in-out:hover {
  background-color: transparent !important;
}

.dropdown-menu .log-in-out.a:hover {
  background-color: rgba(133, 210, 228, 0.2);
}

button:disabled,
.btn:disabled {
  cursor: not-allowed !important;
  pointer-events: all !important;
  opacity: 0.65;
}

/* Sticky table head while tbody scrolls inside .fv-scroll */
.table-responsive.fv-scroll {
  position: relative;
}

.table-responsive.fv-scroll>table>thead th {
  /* position: sticky; */
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* ============================================================
   Shell responsive — top-navbar, sidebar, toggle button
   Fixes: title/description overlap with lang+user dropdown,
          sidebar hidden off-screen on mobile with floating toggle,
          dropdowns not overflowing the viewport.
   ============================================================ */

/* Tablet (≤ 991.98px): narrower sidebar, tighter navbar padding */
@media (max-width: 991.98px) {

  .top-navbar {
    padding: 12px 20px 0 220px;
  }

  .wrapper #sidebar.active~#content .top-navbar {
    padding: 12px 20px 0 240px;
  }

  .top-navbar>.row {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
  }

  .top-navbar>.row>[class*="col-"] {
    min-width: 0;
  }

  .top-navbar .col-md-8.col-sm-6 {
    flex: 1 1 auto;
  }

  .top-navbar .col-md-4.col-sm-6 {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .top-navbar-tittle,
  .top-navbar-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-navbar .top-navbar-tittle {
    font-size: 17px;
  }

  .top-search-area {
    justify-content: flex-end;
  }

  .top-navbar-links {
    float: none;
    margin: 0;
  }

  /* Lang popover default offset is -195px — pull it closer to the button */
  .top-navbar-links .dropdown .lang-dropdown-menu.show {
    inset: 0px 0 auto auto !important;
  }

  /* User dropdown: avoid big negative translate that overflows viewport */
  .custom-dropdown-menu {
    transform: translate(0, 50px) !important;
  }
}

/* Small tablet / mobile (≤ 768px): sidebar fully hidden off-screen,
   only a floating toggle remains visible. Click toggle slides sidebar in
   as an overlay; click again to hide.
   NB: higher-specificity selectors (`body .wrapper #sidebar`) are used to
   beat the older `body #sidebar` rule at line ~3206 that would otherwise
   leave the sidebar partially visible on mobile. */
@media (max-width: 768px) {

  body .wrapper #sidebar,
  body #sidebar {
    min-width: 260px !important;
    max-width: 260px !important;
    margin-left: -280px !important;
    overflow: visible;
    text-align: left;
    transition:
      margin-left var(--shell-transition-duration) var(--shell-transition-easing);
  }

  body .wrapper #sidebar.active,
  body #sidebar.active {
    min-width: 260px !important;
    max-width: 260px !important;
    margin-left: 0 !important;
    text-align: left;
    overflow: visible;
    z-index: 10;
  }

  #sidebar .sidebar-header .desk-logo,
  #sidebar.active .sidebar-header .desk-logo {
    display: block;
  }

  #sidebar .sidebar-header strong,
  #sidebar.active .sidebar-header strong {
    display: none;
  }

  /* Floating toggle pinned to viewport — always clickable, always on top.
     On mobile the sidebar is off-screen (margin-left: -280px), so the
     toggle must use position: fixed to remain visible.
     Two button placements exist:
       Hub:              #sidebar ~ #sidebarCollapse.toggle-cus-btn  (sibling)
       Campaign/Insta:   #sidebar .sidebar-header .toggle-cus-btn   (descendant) */
  .toggle-cus-btn,
  .toggle-cus-btn:hover,
  #sidebar .sidebar-header .toggle-cus-btn,
  #sidebar.active .sidebar-header .toggle-cus-btn,
  #sidebar~#sidebarCollapse.toggle-cus-btn,
  #sidebar.active~#sidebarCollapse.toggle-cus-btn {
    position: fixed;
    top: 14px;
    left: 14px;
    right: auto;
    background: #fff;
    color: #97d4e5 !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1;
    z-index: 20;
    width: auto;
    transition: left var(--shell-transition-duration) var(--shell-transition-easing);
  }

  /* Sidebar OPEN → slide toggle to sidebar's right edge (260px wide) */
  #sidebar.active .sidebar-header .toggle-cus-btn,
  #sidebar.active~#sidebarCollapse.toggle-cus-btn {
    left: 220px;
  }

  /* Content spans full viewport; sidebar overlays when active */
  body #content,
  .wrapper #sidebar.active~#content {
    margin-left: 0;
    width: 100%;
  }

  .top-navbar,
  .wrapper #sidebar.active~#content .top-navbar {
    padding: 12px 16px 0 70px;
  }

  /* Nav items render as full-width rows with labels */
  #sidebar ul li a,
  #sidebar.active ul li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 20px;
    font-size: 14px;
    gap: 15px;
    line-height: 1.3;
  }

  #sidebar ul li a i,
  #sidebar.active ul li a i {
    margin: 0;
    display: inline-block;
    font-size: 1.1em;
  }

  #sidebar ul.sidebar-logout li a,
  #sidebar.active ul.sidebar-logout li a {
    padding-left: 20px;
    padding-right: 20px;
  }

  #sidebar .sidebar-header {
    padding: 16px 20px 20px 20px;
  }

  .nav-app-profile-area,
  #sidebar.active .nav-app-profile-area {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding: 14px 18px;
    gap: 12px;
  }

  .nav-app-profile-area h3,
  #sidebar.active .nav-app-profile-area h3 {
    font-size: 14px;
    line-height: 1.2;
  }

  .nav-app-profile-area p,
  #sidebar.active .nav-app-profile-area p {
    display: block;
  }

  .top-navbar .top-navbar-tittle {
    font-size: 16px;
  }

  .top-navbar-subtitle {
    font-size: 12px;
  }

  .top-navbar-links li a.dropdown-toggle {
    padding: 6px 12px;
    font-size: 13px;
  }

  .top-navbar-links li img {
    width: 22px;
    height: 22px;
    margin-right: 6px;
  }

  .lang-selector-btn {
    padding: 6px 10px !important;
    font-size: 14px !important;
  }

  /* Keep lang popover inside viewport */
  .top-navbar-links .dropdown .lang-dropdown-menu {
    max-width: calc(100vw - 30px);
  }
}

/* Phone (≤ 575.98px): hide subtitle, tighten further, avatar-only user menu */
@media (max-width: 575.98px) {

  .top-navbar,
  .wrapper #sidebar.active~#content .top-navbar {
    padding: 10px 12px 0 64px;
  }

  .top-navbar>.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .top-navbar>.row>[class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
    max-width: 100%;
  }

  .top-navbar .col-md-8.col-sm-6 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-navbar .col-md-4.col-sm-6 {
    flex: 0 0 auto;
  }

  .top-navbar-subtitle {
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-navbar .top-navbar-tittle {
    font-size: 15px;
  }

  .top-navbar-links>ul {
    gap: 4px;
  }

  .top-navbar-links>ul>li {
    margin: 0 2px;
  }

  .top-navbar-links li a.dropdown-toggle {
    padding: 5px 8px;
    font-size: 12px;
    max-width: 48px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .top-navbar-links li a.dropdown-toggle .caret {
    display: none;
  }

  .top-navbar-links li img {
    width: 22px;
    height: 22px;
    margin-right: 0;
  }

  /* User dropdown stays on-screen */
  .custom-dropdown-menu {
    transform: translate(0, 50px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 200px;
  }

  /* Lang popover: cap width to viewport; 3-col grid so buttons aren't tiny */
  .top-navbar-links .dropdown .lang-dropdown-menu {
    max-width: calc(100vw - 24px);
    padding: 12px !important;
  }

  .top-navbar-links .dropdown .lang-dropdown-menu .lang-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

.custom-tooltip {
  width: 400px;
}

/* ============================================================
   Sidebar toggle — responsive positioning.
   Two button placements exist in the codebase:
     Hub:              button is a SIBLING of #sidebar  (#sidebar ~ #sidebarCollapse)
     Campaign/Insta:   button is INSIDE #sidebar        (#sidebar .sidebar-header .toggle-cus-btn)

   Desktop/Tablet:
     - Campaign/Insta: position: absolute inside sidebar-header (base rules handle this)
     - Hub:            position: fixed, left-based (sibling can't use absolute relative to sidebar)
   Mobile (≤ 768px):   both use position: fixed
   ============================================================ */

/* Desktop (≥ 992px): Hub sibling button — use fixed positioning */
@media (min-width: 992px) {

  #sidebar~#sidebarCollapse.toggle-cus-btn,
  #sidebar~#sidebarCollapse.toggle-cus-btn:hover {
    position: fixed;
    top: 18px;
    left: 244px;
    right: auto;
    color: #97d4e5 !important;
    background-color: transparent;
    border-radius: 8px;
    padding: 6px 10px;
    z-index: 15;
    width: auto;
    transition: left var(--shell-transition-duration) var(--shell-transition-easing);
  }

  #sidebar.active~#sidebarCollapse.toggle-cus-btn {
    left: 180px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  }
}

/* Tablet (769–991px): swap full logo for small icon so it doesn't
   collide with the toggle button. Hub sibling button repositioned. */
@media (min-width: 769px) and (max-width: 991.98px) {

  /* Hub sibling button */
  #sidebar~#sidebarCollapse.toggle-cus-btn,
  #sidebar~#sidebarCollapse.toggle-cus-btn:hover {
    position: fixed;
    top: 18px;
    left: 140px;
    right: auto;
    color: #97d4e5 !important;
    background-color: transparent;
    border-radius: 8px;
    padding: 6px 10px;
    z-index: 15;
    width: auto;
    transition: left var(--shell-transition-duration) var(--shell-transition-easing);
  }

  #sidebar.active~#sidebarCollapse.toggle-cus-btn {
    left: 150px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  }

  /* Swap full logo for the small <strong> icon at tablet widths */
  #sidebar .sidebar-header .desk-logo {
    display: none;
  }

  #sidebar .sidebar-header strong {
    display: block;
  }

  /* Collapsed (active) state: hide the app-name h3 to prevent 2-line wrap */
  #sidebar.active .nav-app-profile-area {
    justify-content: center;
  }

  #sidebar.active .nav-app-profile-area h3,
  #sidebar.active .nav-app-profile-area p {
    display: none;
  }

  /* Collapsed nav items: icon-above-label, centered, compact */
  #sidebar.active ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font-size: 11px;
    padding: 14px 6px;
    line-height: 1.2;
  }

  #sidebar.active ul li a i {
    display: block;
    margin: 0;
    font-size: 1.5em;
  }

  #sidebar.active ul.sidebar-logout li a {
    padding: 14px 6px;
  }
}

/* ============================================================
   Content width fixes — remove artificial max-width on
   tablet / mobile and sync #content width with sidebar.
   ============================================================ */

/* Desktop ≤ 1024: remove dashboard-content max-width cap */
@media (max-width: 1024px) {
  .dashboard-content {
    max-width: none !important;
  }
}

/* Tablet: #content needs to match body's margin-left: 180 */
@media (max-width: 991.98px) {
  body #content {
    width: calc(100% - 180px);
  }

  body .wrapper #sidebar.active~#content {
    margin-left: 150px;
    width: calc(100% - 150px);
  }

  body .wrapper #sidebar.active~#content .top-navbar {
    padding: 12px 20px 0 210px;
  }

  .dashboard-content {
    margin-top: 0;
    padding-top: 8px;
  }
}

/* Mobile: content fills the whole viewport; sidebar overlays when open. */
@media (max-width: 768px) {

  body #content,
  body .wrapper #sidebar.active~#content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .dashboard-content {
    max-width: none !important;
    margin-top: 0;
    padding-top: 6px;
  }

  /* User dropdown — cap width & clip overflow */
  .top-navbar-links li a.dropdown-toggle {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
  }

  .top-navbar-links li a.dropdown-toggle img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    flex-shrink: 0;
  }
}

@media (max-width: 575.98px) {
  .top-navbar-links li a.dropdown-toggle {
    max-width: 72px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .top-navbar-links li a.dropdown-toggle .caret {
    display: none;
  }
}

/* ============================================================
   Shared component responsive — stat boxes, fill-viewport,
   detail-grid, breadcrumb, pagination, white-card.
   Applies to ALL service sections (Hub, Campaign, etc.)
   ============================================================ */

/* Tablet (≤ 1199px) */
@media (max-width: 1199.98px) {
  .stat-value {
    font-size: 26px;
  }
}

/* Tablet (≤ 991.98px) */
@media (max-width: 991.98px) {
  .stat-box {
    height: auto;
    min-height: 90px;
    padding: 14px 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  /* Fill-viewport: allow card to breathe on smaller screens */
  .white-card.fill-viewport {
    height: auto;
    min-height: calc(100vh - 120px);
  }

  .page-breadcrumb+.white-card.fill-viewport {
    height: auto;
    min-height: calc(100vh - 190px);
  }

  /* Detail grid: tighten label/value spacing */
  .detail-grid .detail-label {
    flex: 0 0 40%;
    padding: 12px 14px;
    font-size: 13px;
  }

  .detail-grid .detail-value {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* View page tabs: reduce font */
  .setting-main .tab button.tablinks {
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* Small tablet / large phone (≤ 767.98px) */
@media (max-width: 767.98px) {

  /* Breadcrumb wraps cleanly */
  .page-breadcrumb {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Fill-viewport: let card size to content */
  .white-card.fill-viewport,
  .page-breadcrumb+.white-card.fill-viewport {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
  }

  .white-card.fill-viewport>.fv-scroll,
  .white-card.fill-viewport>[data-fv-wrapper]>.fv-scroll,
  .white-card.fill-viewport>[data-fv-wrapper]>.table-responsive,
  .page-breadcrumb+.white-card.fill-viewport>.fv-scroll,
  .page-breadcrumb+.white-card.fill-viewport>[data-fv-wrapper]>.fv-scroll,
  .page-breadcrumb+.white-card.fill-viewport>[data-fv-wrapper]>.table-responsive {
    flex: 0 0 auto;
    max-height: none;
    overflow-y: visible;
  }

  .white-card.fill-viewport>[data-fv-wrapper] {
    overflow: visible;
  }

  .white-card.fill-viewport>nav,
  .white-card.fill-viewport>.pagination-wrap,
  .white-card.fill-viewport>.js-pagination-container {
    margin-top: 16px;
  }

  /* Detail grid stacks label above value */
  .detail-grid .detail-row {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-grid .detail-label {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .detail-grid .detail-value {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Pagination: compact at mobile — stack count/nav/page-size */
  .app-pagination-footer {
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .app-pagination-footer .pagination-count,
  .app-pagination-footer nav,
  .app-pagination-footer .pagination-page-size {
    width: 100%;
    justify-content: center !important;
    text-align: center;
  }

  .app-pagination-footer .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .app-pagination-footer .page-link {
    min-width: 32px;
    height: 32px;
    font-size: 12px !important;
  }

  /* White cards: reduce padding */
  .white-card {
    padding: 16px;
    border-radius: 10px;
  }

  /* Header stacks inside white cards */
  .white-card .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Stat boxes */
  .stat-box {
    padding: 12px 14px;
    min-height: 84px;
    height: auto;
  }

  .stat-title {
    font-size: 13px;
  }

  .stat-value {
    font-size: 22px;
  }

  /* View page tabs: scroll horizontally */
  .setting-main .tab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  .setting-main .tab button.tablinks {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Phone (≤ 575.98px) */
@media (max-width: 575.98px) {
  .page-breadcrumb {
    padding: 8px 12px;
    font-size: 12px;
  }

  .white-card {
    padding: 14px;
  }

  .white-card h4 {
    font-size: 16px;
  }

  .insights-subtitle {
    font-size: 13px;
  }

  /* Table cells shrink */
  .custom-table-wrapper thead tr th,
  .custom-table-wrapper tbody tr td {
    padding: 10px 12px !important;
    font-size: 13px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-title {
    font-size: 12px;
  }

  /* Stat boxes: 2-col on phone */
  .white-card .row.g-2>[class*="col-md-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Modal: fit phone screens */
  .modal-dialog {
    margin: 10px;
  }

  .modal-body {
    max-height: 60vh !important;
  }
}

/* Very small phones (≤ 375px) */
@media (max-width: 375px) {
  .stat-value {
    font-size: 18px;
  }

  .cell-truncate {
    max-width: 140px;
  }

  .page-breadcrumb a,
  .page-breadcrumb span {
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

#emailContentModal .modal-dialog {
  max-width: 50%;
}

@media (max-width: 768px) {
  #emailContentModal .modal-dialog {
    max-width: 90%;
  }
}

img.icon-dashboard {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  margin-right: 5px !important;
}

.inkish-icon{
  color: #86d3e3 !important;
  font-size: 16px !important;
}