@import url("reset.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700");
/* @import url('https://fonts.cdnfonts.com/css/segoe-ui-4'); */

@font-face {
  font-family: segoe ui;
  font-style: normal;
  font-weight: 400;
  src:
    local("Segoe UI Web"),
    url("https://fonts.cdnfonts.com/s/15051/Segoe UI.woff") format("woff");
}
@font-face {
  font-family: segoe ui;
  font-style: italic;
  font-weight: 400;
  src:
    local("Segoe UI Web"),
    url("https://fonts.cdnfonts.com/s/15051/Segoe UI Italic.woff") format("woff");
}
@font-face {
  font-family: segoe ui;
  font-style: normal;
  font-weight: 700;
  src:
    local("Segoe UI Web"),
    url("https://fonts.cdnfonts.com/s/15051/Segoe UI Bold.woff") format("woff");
}
@font-face {
  font-family: segoe ui;
  font-style: italic;
  font-weight: 700;
  src:
    local("Segoe UI Web"),
    url("https://fonts.cdnfonts.com/s/15051/Segoe UI Bold Italic.woff") format("woff");
}

:root {
  --sp-app-bg-color: white;
  --cs-secondary-bg: #ededed;
  --cs-secondary-text: #7c7c7c;
  --cs-icon-default: #afafac;
  --cs-dark-bg: #ededed;
  --cs-text-default: #7c7c7c;
  --cs-active-color: #3c95ce;
  --sp-primary: #3c95ce;
  --sp-primary-active: #3c95ce;
  --sp-gray-800: #7c7c7c;
  --sp-text-gray-900: #7c7c7c;
  --sp-text-dark: #7c7c7c;
  --sp-text-gray-600: #7c7c7c;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px !important;
  font-weight: 400;
  color: var(--sp-gray-800);
  font-family: "Segoe UI Web", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--sp-app-bg-color);
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}

.cs-icon-default {
  color: #afafac;
}

.bg-light {
  background-color: #fff !important;
}

.nav-line {
  background-color: var(--cs-secondary-bg) !important;
}

.text-primary {
  color: var(--sp-primary) !important;
}

.sidebar .sidebar-nav .nav .nav-link span,
.sidebar .sidebar-footer .nav-link span {
  color: var(--cs-secondary-text);
}

.sidebar .sidebar-nav .nav .nav-link.active span,
.sidebar .sidebar-footer .nav-link.active span,
.sidebar .sidebar-nav .nav .nav-link:hover span,
.sidebar .sidebar-footer .nav-link:hover span {
  color: var(--sp-primary) !important;
}

.sidebar .sidebar-nav .nav .nav-link.active i,
.sidebar .sidebar-footer .nav-link.active i,
.sidebar .sidebar-nav .nav .nav-link:hover i,
.sidebar .sidebar-footer .nav-link:hover i {
  color: var(--sp-primary) !important;
}
.dropdown .dropdown-toggle i:hover,
.dropdown.show > a > i {
  color: var(--sp-text-primary) !important;
}

.sidebar-nav .active {
  background-color: var(--cs-secondary-bg) !important;
}

.active {
  color: var(--sp-primary) !important;
}

.ranges .active {
  color: white !important;
}

.active > i:not(.active > i.fab) {
  color: var(--sp-primary) !important;
}
i.fab {
  font-size: 20px !important;
}

.card {
  overflow: hidden;
}

.card,
.card-custom .card-status,
.card-status input,
.insights .border,
.card-shadow {
  box-shadow: #00000029 3px 3px 5px 0px;
}

.card,
.card-body,
.card.border,
.card-shadow {
  border-radius: 15px !important;
}

.card-footer:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.post-type .text,
.card-custom .card-status {
  font-weight: bold;
}

.overlay-blocker {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 11;
  backdrop-filter: saturate(1) brightness(0.9);
  border-radius: 15px;
  display: none;
}

.overlay-blocker-text {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
}

.upload-blocker {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
  z-index: 11; /* Ensures it overlays all content */
  display: none;
}

.upload-blocker-text {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
}

.upload-blocker-text .text-center {
  padding: 1.5rem;
  color: white;
}

.upload-blocker-text span::after {
  content: " ";
  animation: dots 1.5s steps(4, end) infinite; /* Animates the dots */
  display: inline-block;
  width: 2ch; /* Ensures even spacing for dots */
  text-align: left;
}

@keyframes dots {
  0% {
    content: " ";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: " ";
  }
}

.only-video-image-text {
  position: absolute;
  color: red;
  top: 0;
  left: 0;
  padding: 10px;
}

.dashboard-container-block {
  border: 1px solid #dee2e6;
  background: var(--sp-primary-light);
  padding: 10px;
  border-radius: 15px;
}

.ccEverywhere.create-with-adobe-express {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  background-color: #000b1d;
  color: white;
  padding: 6px 16px;
  font-size: 12pt; /* Small button text size */
  font-family: inherit;
  border-radius: 23px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 10px auto;
  text-align: center;
}

.ccEverywhere.create-with-adobe-express:hover,
.ccEverywhere.create-with-adobe-express:focus,
.ccEverywhere.create-with-adobe-express:active {
  background-color: #1a1a1a;
  text-decoration: none !important;
  outline: none;
}

.ccEverywhere.create-with-adobe-express img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.create-with-canva {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ECF3F3; /* Soft Canva teal */
    border: none;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    width: 100%;
    margin: 10px auto;
  }
  
  .create-with-canva:hover,
  .create-with-canva:focus {
    background-color: #CCF1F3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    outline: none;
  }
  
  .create-with-canva img {
    height: 24px;
    object-fit: contain;
    display: block;
  }

  .create-with-capcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    width: 100%;
    margin: 10px auto;
  }
  
  .create-with-capcut:hover,
  .create-with-capcut:focus {
    background-color: #2c2e2e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    outline: none;
  }
  
  .create-with-capcut img {
    height: 24px;
    object-fit: contain;
    display: block;
  }
  
  
  

.beamer_icon.active,
#beamerIcon.active {
  color: white !important;
}

.highcharts-text-outline {
  stroke-width: 1px !important;
  stroke: #a5a5a5 !important;
  fill: #222 !important;
}

.highcharts-data-label text {
  stroke: #222 !important;
  fill: #222 !important;
  stroke-width: 0 !important;
}

.fm-list-item {
  border-radius: 4px;
  border: 1px solid var(--sp-border-color);
  overflow: hidden;
}

.fm-list-info {
  background: rgb(251, 251, 251);
}

.fm-list-action i {
  font-size: 1.5rem;
  padding: 4px;
  border-radius: 50%;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
  color: var(--sp-primary);

  /* background: rgb(255 255 255 / 30%); */
}

.hover-icon:hover,
.fm-list-action i:hover {
  filter: brightness(150%);
}

.bulk_post_form .fm_extended_options {
  display: none !important;
}

/* .border {
    box-shadow: #0000004d 5px 5px 5px 0px;
} */

.flex {
  display: flex;
}

.cursor-pointer {
  cursor: pointer;
}

.row.post-type {
  padding: 0;
  padding-inline: 20px;
}

.post-type .text,
.card-custom .card-status {
  font-weight: bold;
}

.aipost-list-keywords,
.schedule-list .card-body span {
  user-select: text;
}

/* .border {
    box-shadow: #0000004d 5px 5px 5px 0px;
} */

/*
* Header
*/
.header {
  display: none;
  position: fixed;
  height: 65px;
  top: 0;
  right: 0;
  width: calc(100% - 345px);
  box-shadow: 0 10px 30px 0 rgb(82 63 105 / 8%);
  z-index: 50;
}

body.dark .header {
  background-color: #1e1e2d !important;
  border-bottom: 1px solid #25253a !important;
  box-shadow: none;
}

body.sidebar-close .header,
body.sidebar-small .header {
  width: calc(100% - 345px);
}

body.sidebar-open .header {
  width: calc(100% - 515px);
}

[dir="rtl"] .header {
  left: 0;
  right: auto !important;
  right: inherit;
}

/*
* Sidebar
*/
.sidebar {
  z-index: 200;
  position: relative;
  top: 0;
  background-color: #fff;
  box-shadow: 0 0 80px 50px rgb(206 213 225 / 12%);
}

.sidebar .sidebar-nav {
  height: calc(100% + 1px);
  overflow: auto;
}

.sidebar .sidebar-nav .nav {
  padding-right: 0;
}

.sidebar .sidebar-footer {
  padding-top: 10px;
}

.sidebar .sidebar-nav .nav .nav-link span,
.sidebar .sidebar-footer .nav-link span {
  display: inline-block;
  white-space: pre;
  opacity: 1;
  transition: all 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: bold !important;
}

.sidebar .sidebar-nav .nav .nav-link,
.sidebar .sidebar-footer .nav-link {
  color: #b5b5c3;
  overflow: hidden;
  border-radius: 6px;
  margin: 0 17px;
}

.sidebar .sidebar-nav .nav .nav-link:hover,
.sidebar .sidebar-footer .nav-link:hover {
  color: #04c8c8;
}

.sidebar .sidebar-nav .nav-item .nav-line {
  height: 1px;
}

.sidebar .sidebar-nav .nav .menu-sub,
.sidebar .sidebar-footer .menu-sub {
  padding-left: 32px;
  font-size: 13px;
}

.sidebar .sidebar-footer .menu-sub .menu-link {
  color: #181c32;
}

/*Sidebar open*/
body.sidebar-open .sidebar {
  width: 250px;
  border-right: 1px solid #eff2f5;
  align-items: left !important;
}

body.sidebar-open .sidebar .logo-big {
  display: block;
}

body.sidebar-open .sidebar .logo-small {
  display: none;
}

body.sidebar-open .sidebar .sidebar-footer {
  width: 100%;
}

body.sidebar-open .sidebar .sidebar-nav .nav .nav-link span,
body.sidebar-open .sidebar .sidebar-footer .nav-link span {
  padding-left: 10px;
}

/*Sidebar hover*/
body.sidebar-hover .sidebar-wrapper {
  width: 80px;
}

body.sidebar-hover .sidebar .logo-big {
  display: block;
}

body.sidebar-hover .sidebar .logo-small {
  display: none;
}

body.sidebar-hover .sidebar {
  width: 250px;
  border-right: 1px solid #eff2f5;
  transition: all 0.3s;
}

body.sidebar-hover .sidebar .sidebar-nav .nav .nav-link,
body.sidebar-hover .sidebar .sidebar-footer .nav-link {
  padding: 0;
}

body.sidebar-hover .sidebar .sidebar-nav .nav .nav-link i,
body.sidebar-hover .sidebar .sidebar-footer .nav-link i {
  width: 44px;
  text-align: center;
}

/*Sidebar Small*/
body.sidebar-small .sidebar {
  width: 80px;
  border-right: 1px solid #eff2f5;
  align-items: center !important;
}

body.sidebar-small .sidebar .logo-big {
  display: none;
}

body.sidebar-small .sidebar .logo-small {
  display: block;
}

body.sidebar-small .sidebar .sidebar-nav .nav .nav-item,
body.sidebar-small .sidebar .sidebar-footer .nav-item {
  width: 80px;
}

body.sidebar-small .sidebar .sidebar-nav .nav .nav-link,
body.sidebar-small .sidebar .sidebar-footer .nav-link {
  padding: 0;
}

body.sidebar-small .sidebar .sidebar-nav .nav .nav-link i,
body.sidebar-small .sidebar .sidebar-footer .nav-link i {
  width: 44px;
  text-align: center;
}

body.sidebar-small .sidebar .sidebar-nav .nav .nav-link span,
body.sidebar-small .sidebar .sidebar-footer .nav-link span {
  opacity: 0;
  display: none;
}

/*Sidebar Close*/
body.sidebar-close .sidebar {
  width: 80px;
  border-right: 1px solid #eff2f5;
  align-items: center !important;
}

body.sidebar-close .sidebar .logo-big {
  display: none;
}

body.sidebar-close .sidebar .logo-small {
  display: block;
}

body.sidebar-close .sidebar .sidebar-footer {
  align-items: center !important;
}

body.sidebar-close .sidebar .sidebar-toggle {
  display: none;
}

body.sidebar-close .sidebar .sidebar-nav .nav .nav-link span,
body.sidebar-close .sidebar .sidebar-footer .nav-link span {
  display: none;
}

body.sidebar-close .sidebar .sidebar-nav .nav .nav-link,
body.sidebar-close .sidebar .sidebar-footer .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: calc(1.5em + (1.5rem + 2px));
  width: calc(1.5em + (1.5rem + 2px));
  margin: 0 19px;
  border-radius: 0.475rem;
}

body.sidebar-close .sidebar-popover .webui-popover {
  display: block;
  margin-left: 27px;
  padding: 17px;
  width: 200px;
  box-shadow: 0 10px 30px 0 rgb(82 63 105 / 8%);
  border: 1px solid #eff2f5;
}

body.sidebar-close .sidebar-popover .webui-popover.right > .webui-arrow,
body.sidebar-close .sidebar-popover .webui-popover.right-top > .webui-arrow,
body.sidebar-close .sidebar-popover .webui-popover.right-bottom > .webui-arrow {
  border-right-color: #eff2f5;
}

body.sidebar-close .sidebar-popover .webui-popover .menu-link {
  color: #181c32;
}

.btn-open-sidebar {
  display: none;
}

body.sidebar-dark .sidebar,
body.dark .sidebar {
  background-color: #1e1e2d !important;
  border-right-color: #25253a !important;
  box-shadow: none;
}

body.sidebar-dark .sidebar .nav-link.active,
body.dark .sidebar .nav-link.active {
  background-color: #0e0e18 !important;
}

body.sidebar-dark .sidebar .menu-sub .menu-link,
body.dark .sidebar .menu-sub .menu-link {
  color: #fff;
}

body.sidebar-dark .sidebar .nav-line {
  background-color: #25253a !important;
}

body.dark .sidebar-popover .webui-popover {
  background-color: #1e1e2d !important;
  border: 1px solid var(--text-gray-900) !important;
}

body.dark .sidebar-popover .webui-popover.right > .webui-arrow:after,
body.dark .sidebar-popover .webui-popover.right-top > .webui-arrow:after,
body.dark .sidebar-popover .webui-popover.right-bottom > .webui-arrow:after {
  border-right-color: #1e1e2d !important;
}

body.sidebar-close.dark .sidebar-popover .webui-popover.right > .webui-arrow,
body.sidebar-close.dark .sidebar-popover .webui-popover.right-top > .webui-arrow,
body.sidebar-close.dark .sidebar-popover .webui-popover.right-bottom > .webui-arrow {
  border-right-color: #1e1e2d !important;
}

/*Sidebar Transparent*/
body.sidebar-light .sidebar {
  background-color: var(--sp-app-bg-color) !important;
  border-right-color: var(--sp-app-bg-color) !important;
  box-shadow: none;
}

body.sidebar-light .sidebar .nav-link.active {
  background-color: #b7cdd9 !important;
  border: 1px solid #eff2f5;
}

body.sidebar-light .sidebar .nav-link.active span {
  color: #fff !important;
}

body.sidebar-light .sidebar .menu-sub .menu-link {
  color: #fff;
}

body.sidebar-light .sidebar .nav-line {
  background-color: var(--sp-app-bg-color) !important;
}

body.sidebar-light .header {
  background-color: var(--sp-app-bg-color) !important;
  box-shadow: none;
}

body.sidebar-light .sub-sidebar {
  border-radius: 15px;
  margin: 15px;
  box-shadow: none;
  border: 1px solid #eff2f5;
}

body.sidebar-light .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background-color: var(--sp-scrollbar-hover-color);
}

body.sidebar-light .sidebar .sidebar-nav::-webkit-scrollbar-track {
  background-color: var(--sp-app-bg-color);
}

/*
* Sub sidebar
*/
.sub-sidebar {
  min-width: 265px;
  max-width: 265px;
  border-right: 1px solid #eff2f5;
  box-shadow: 0 0 80px 50px rgb(206 213 225 / 12%);
  position: relative;
  z-index: 100;
}

body.dark .sub-sidebar {
  background-color: #1e1e2d !important;
  border-right-color: #25253a !important;
  box-shadow: none;
}

body.sidebar-dark .sidebar .nav-link.active {
  background-color: #0e0e18 !important;
}

body.sidebar-dark .sidebar .menu-sub .menu-link {
  color: var(--sp-text-gray-600) !important;
}

body.sidebar-dark .sidebar .nav-line {
  background-color: #25253a !important;
}

/*Main Wrapper*/
.main-wrapper {
  margin-top: 65px;
  height: calc(100% - 65px);
  position: relative;
  overflow-y: hidden;
}

.main-wrapper .column-one {
  position: relative;
}

/*Ajax Loading*/
.empty-scroll-trigger {
  height: 50px; /* Adjust as needed */
  visibility: hidden;
  position: absolute;
  bottom: -50px;
  overflow-y: scroll;
  margin-top: 100px;
}

.scroll-message:last-child {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background-color: #343a40; /* A softer dark grey background color */
  font-weight: normal;
  position: sticky; /* Sticky position */
  bottom: 0; /* Stick to the bottom of the container */
  width: 100%;
  border-radius: 5px;
  animation: subtle-blink 3s infinite; /* Subtler blink effect */
  z-index: 10; /* Ensure it stays above other elements */
}

.scroll-message:last-child:hover {
  opacity: 0.8;
  cursor: pointer;
}

@keyframes subtle-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  } /* Slightly dim instead of completely disappearing */
}

.ajax-load-scroll[data-loading="0"] .scroll-message {
  display: block;
}

.scroll-message:not(:last-child) {
  display: none !important;
}

.ajax-load-scroll[data-loading="1"] .scroll-message {
  display: none !important;
}

.ajax-loading {
  height: 5px;
  top: 0;
  transition: all 0.25s;
  width: 0;
  z-index: 1000;
  margin: auto;
  display: none;
  animation-duration: 1s;
  animation-name: ajax-loading-width;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: absolute;
}

@keyframes ajax-loading-width {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/*Sidebar mobile*/
@media (max-width: 768px) {
  .btn-open-sidebar {
    display: block;
  }

  .sub-header {
    display: block;
    position: relative;
  }

  .sidebar {
    position: absolute;
    left: -265px;
    transition: all 0.3s;
  }

  .sidebar.active {
    left: 0;
    width: 250px;
  }

  body.sidebar-hover .sidebar-wrapper {
    width: auto;
  }

  /*Sidebar Small*/
  body.sidebar-small .sidebar {
    width: 250px;
  }

  body.sidebar-small .sidebar .sidebar-nav .nav .nav-item,
  body.sidebar-small .sidebar .sidebar-footer .nav-item {
    width: 250px;
  }

  body.sidebar-small .sidebar .sidebar-nav .nav .nav-link span,
  body.sidebar-small .sidebar .sidebar-footer .nav-link span {
    opacity: 1;
    display: block;
  }

  .submenu-right {
    position: absolute;
    right: -265px;
    transition: all 0.3s;
    height: 100%;
  }

  .sub-sidebar {
    position: absolute;
    left: -265px;
    transition: all 0.3s;
    height: 100%;
  }

  .sub-sidebar.active {
    left: 0;
  }

  .submenu-right.active {
    right: 0;
  }

  .header {
    width: 100% !important;
  }

  body.sidebar-light .sub-sidebar {
    left: -285px;
  }

  body.sidebar-light .sub-sidebar.active {
    left: 0;
  }
}

@media (min-width: 0) {
  .main-wrapper .col-custom {
    width: 100%;
    flex: 0 0 auto;
  }
  .iziToast {
    max-width: 80%; /* Adjust the width as needed */
  }
}

@media (min-width: 1200px) {
  .main-wrapper .col-custom {
    width: 50%;
    flex: 0 0 auto;
  }
  .iziToast {
    max-width: 800px; /* Adjust the width as needed */
  }
}

@media (min-width: 1600px) {
  .main-wrapper .col-custom {
    width: 33.33333333%;
    flex: 0 0 auto;
  }
}

@media (min-width: 2000px) {
  .main-wrapper .col-custom {
    width: 25%;
    flex: 0 0 auto;
  }
}

@media (min-width: 2250px) {
  .main-wrapper .container .col-custom {
    width: 20%;
    flex: 0 0 auto;
  }
}

@media (min-width: 0) {
  .main-wrapper .container .col-custom {
    width: 100%;
    flex: 0 0 auto;
  }
}

@media (min-width: 1200px) {
  .main-wrapper .container .col-custom {
    width: 50%;
    flex: 0 0 auto;
  }
}

@media (min-width: 1600px) {
  .main-wrapper .container .col-custom {
    width: 33.33333333%;
    flex: 0 0 auto;
  }
}

/*Line*/
.line-no-text {
  margin-bottom: 3px;
  height: 13px;
  background: var(--sp-gray-200);
}

.line-no-text.w50 {
  width: 50%;
}

/**/
.piv-text {
  word-break: break-word;
}

#beta-icon {
  color: white !important; /* Sets the beta label color to orange */
  font-size: 0.8em; /* Slightly smaller font size for the beta label */
  padding: 2px 4px; /* Padding around the beta label */
  margin-left: 5px; /* Space between the product name and beta label */
  border-radius: 6px !important; /* Optional: rounded corners for the beta label */
  background-color: #50cd89; /* Light pink background for the beta label */
  display: inline-block !important;
}

.nav-item.link-activated .submenu-chevron {
  transform: rotate(90deg); /* Points the chevron down when active */
}

/* Ensure this CSS only affects items within #sidebar-menu to avoid affecting other nav-links */
.nav-item.link-activated .submenu-chevron {
  transition: transform 0.3s ease; /* Smooth transition for the chevron, remove if no animation desired */
}

/* Ensure this CSS only affects items within #sidebar-menu to avoid affecting other nav-links */
.nav-item .submenu-chevron {
  transition: transform 0.3s ease; /* Smooth transition for the chevron, remove if no animation desired */
}