@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.eot');
  src: url('../fonts/Satoshi-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Bold.woff2') format('woff2'),
      url('../fonts/Satoshi-Bold.woff') format('woff'),
      url('../fonts/Satoshi-Bold.ttf') format('truetype'),
      url('../fonts/Satoshi-Bold.svg#Satoshi-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.eot');
  src: url('../fonts/Satoshi-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Light.woff2') format('woff2'),
      url('../fonts/Satoshi-Light.woff') format('woff'),
      url('../fonts/Satoshi-Light.ttf') format('truetype'),
      url('../fonts/Satoshi-Light.svg#Satoshi-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.eot');
  src: url('../fonts/Satoshi-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Black.woff2') format('woff2'),
      url('../fonts/Satoshi-Black.woff') format('woff'),
      url('../fonts/Satoshi-Black.ttf') format('truetype'),
      url('../fonts/Satoshi-Black.svg#Satoshi-Black') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.eot');
  src: url('../fonts/Satoshi-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Regular.woff2') format('woff2'),
      url('../fonts/Satoshi-Regular.woff') format('woff'),
      url('../fonts/Satoshi-Regular.ttf') format('truetype'),
      url('../fonts/Satoshi-Regular.svg#Satoshi-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.eot');
  src: url('../fonts/Satoshi-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Medium.woff2') format('woff2'),
      url('../fonts/Satoshi-Medium.woff') format('woff'),
      url('../fonts/Satoshi-Medium.ttf') format('truetype'),
      url('../fonts/Satoshi-Medium.svg#Satoshi-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


body,html {  margin: 0;}

body {
    font-size: 14px;
    overflow-x: hidden;
    font-family: 'Satoshi';
    color: var(--paragraph, #6b6880);
    margin: 0px;
    padding: 0px;
    background: var(--primary-light);
}

:root {
  /* Brand purple, #712F79 -> #672c72, with a hover-darken step the brand
     never had. Signed off 2026-07-23 as one half of the decision whose other
     half moved --paragraph off #858B98; that half shipped first, so for a
     while the theme carried one of the two and the styleguide carried both.

     White-on-purple goes from 8.81:1 to 9.63:1, which is not the reason for
     the change. The old value already passed. The reason is that a primary
     button had no defined hover, so every surface invented its own.

     Pointed at the design token rather than carrying its own hex, because
     tokens.css is the file that already holds the signed value and is where
     dark mode will swap it. The literal fallback is there for the case where
     ts_design_tokens is not attached, which is any admin-theme page.
     TS-5128; workings in docs/styling-review-2026-07/decision-doc.md. */
  --primary-color: var(--ts-btn-primary-bg, #672c72);
  --primary-hover: var(--ts-btn-primary-hover-bg, #521f5a);
  /* #F26419 cannot carry white text (3.18:1, fails WCAG AA); #c2410c can
     (5.18:1). The brighter orange remains for illustration accents only.
     TS-5128; full palette rationale in docs/styling-review-2026-07/. */
  --secondary-color:#c2410c;
  --primary-light:#F2EEF8;
  /* #858B98 failed AA for body-size text (3.42:1 on white, 2.99:1 on the
     lavender page background). TS-5128. */
  --paragraph:#6b6880;
  --title:#3E2155;
}

a { outline: none !important;}

.app-sidebar,
.sec-toolbar-main .toolbox-main, .link-view-all, .user-img .dropdown-menu a, .action-tool, .auth-button.post-btn .btn, .btn-upload, .timeline-icon, .top-tag-list .tags {
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

img {    max-width: 100%;}
a,a:hover {    text-decoration: none;}
button,select {    outline: none !important;}
ul,ol {padding: 0px;margin: 0px;list-style: none;}
h1,h2,h3,h4,h5,h6 {  margin: 0px; line-height: 1.1;}


.dashboard-header {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--bs-white);
  z-index: 14;
  top: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-logo {
  flex: 0 0 250px;
  width: 250px;
  padding: 10px 24px;
  background: var(--dark-gray);
  margin-right: auto;
  border-bottom: 1px solid rgb(255 255 255 / 21%);
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.header-logo img{
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.header-logo a {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}



.header-logo img+img { display: none;}
.open-menu  .header-logo img{ display: none;}
.open-menu  .header-logo img+img { display: inline-block;}

.open-menu .header-logo a {justify-content: center;}

.navbar-full {
  padding: 8px 18px;
  flex: 1;
  min-height: 56px;
  position: relative;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.hd-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
.user-img {
  display: flex;
  align-items: center;
}


.dropdown-menu.dropdown-top-area {
  min-width: 182px;
  border: 0;
  border-radius: 16px;
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
  margin-top: 8px !important;
}
.dropdown-menu.dropdown-top-area::before{position: absolute;content: "";right: 6px;top: -15px;background-image: url(../images/arrow-top.svg);background-repeat: no-repeat;width: 24px;height: 24px;}
.dropdown-menu.dropdown-top-area li a{font-size: 13px;font-weight: 500;color: var(--title);padding: 7px 13px;display: flex;}
.dropdown-menu.dropdown-top-area li .icon-text{flex: 0 0 25px;min-width: 25px;margin-right: 8px;}
.dropdown-menu.dropdown-top-area a:hover{ color: var(--secondary-color);}

.auth-button .dropdown-menu.dropdown-top-area::before {right: 10px;}


.dropdown-menu.dropdown-top-area{
  -webkit-animation-name: DropDownSlide;
  animation-name: DropDownSlide;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.user-img .dropdown-menu.dropdown-top-area {left: auto !important;right: 0px !important;}
.user-img .dropdown-menu.dropdown-top-area.show {top: 100% !important;}

.auth-button .dropdown-menu.dropdown-top-area.show {
  top: 100% !important;
}

.auth-button .dropdown-menu.dropdown-top-area:before {right: 52px;}

.top-bar-left-section .layers { position: relative;}
.top-bar-left-section .layers .dropdown-menu.dropdown-top-area.show{ top: 100% !important;}

.thumbnails-blankimage .user-img .dropdown-menu.dropdown-top-area:before{
  right: 6px;
  left: auto;
}

.thumbnails-blankimage .top-bar-left-section #ts-editor-file-button .dropdown-menu.dropdown-top-area:before{ left: 42px;}

.thumbnails-blankimage .top-bar-left-section #ts-editor-layers-button-1 .dropdown-menu.dropdown-top-area:before{ left: 50px;}


@keyframes DropDownSlide {
  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0)
  }

  0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px)
  }
}


.notification .dropdown-menu.dropdown-top-area {
  min-width: 329px;
  margin-left: 70px !important;
}
.notification .dropdown-menu.dropdown-top-area::before {right: 66px;top: -10px;}

.ic-avatar {
  background: #fff;
}
.ic-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 40px;
  max-width: 40px;
}

.menu-toggle-btn {
  position: absolute;
  left: 0;
}


.bar1,
.bar2,
.bar3 {
    background-color: #545455;
    cursor: pointer;
    height: 2px;
    margin: 7px 0;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 24px;
    display: block;
}

.bar2 {
    width: 20px;
}

.toggle-button {
  margin-left: 15px;
}

.app-sidebar .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 18%);
  font-size: 24px;
  padding: 10px 15px;
}

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: rgb(0 0 0 / 50%);
  z-index: 14;
  display: none;
  visibility: hidden;
}

.dashaboard-main {
    display: flex;
    margin-top: 56px;
}

.app-sidebar {
  bottom: 0;
  width: 250px;
  background-color: var(--bs-white);
  z-index: 13;
  min-height: calc(100vh - 56px);
  box-shadow: none;
  border: 0;
  outline: none;
  /* Scoped, for the same reason the button transition was in batch 7: a bare
     `all` animates every animatable property, so this was animating the
     sidebar's width, margin, bottom and backdrop-filter alongside the slide it
     actually wants. It also left the transform mid-flight when the open class
     was toggled, which is what sent me hunting a broken off-canvas rule that
     turned out to be a 12px margin problem. */
  -webkit-transition: transform .3s ease-in;
  -o-transition: transform .3s ease-in;
  -ms-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
}

.sidebar-list-item {
  min-height: calc(100vh - 254px);
  overflow: auto;
}

.open-menu .sidebar-list-item {
  overflow: visible;
  min-height: initial;
}


.app-sidebar-wrapper{
  padding-bottom: 16px;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
}

.app-sidebar .nav-item {list-style: none;}

.app-sidebar .list-unstyled li a {
  display: flex;
  width: 100%;
  padding: 5px 10px;
  color: var(--paragraph);
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid transparent;
  min-height: 40px;
  position: relative;
}



.menuicon {
  min-width: 25px;
  margin-right: 8px;
}

.app-sidebar .list-unstyled li.active a {
  background: var(--primary-light);
  color: var(--title);
  border-left-color: var(--primary-color);
}

.app-sidebar .list-unstyled li.active .menuicon path {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.app-sidebar .list-unstyled li a:hover{
  color: var(--primary-color);
}

.app-sidebar .list-unstyled li .btn-toggle-nav li a {
  font-size: 14px;
  min-height: auto;
}

.btn-toggle-nav {
  background: rgba(204, 204, 204,14%);
  padding: 0px 20px;
}

.menu-arrow {
  position: absolute;
  top: 6px;
  right: 21px;
  transition: transform .2s ease-in-out;
}

.app-sidebar .list-unstyled li a:not(.collapsed) .menu-arrow{ transform: rotate(-180deg);}


.badge.ms-auto {
  background: #feefe8;
  color: var(--secondary-color);
  border-radius: 4px;
  font-size: 10px;
}

.dashaboard-content {
  margin-left: 250px;
  /* margin-top: 56px; */
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  position: relative;
  display: inline-block;
  width: calc(100% - 250px);
  flex: 1;
}

.dashaboard-inner {padding: 16px;}

.dashboard-header .search-area {margin-left: 20px;}

.search-area input {
  font-size: 12px;
  font-weight: 500;
  background: var(--primary-light);
  border-radius: 8px;
  border-color: var(--primary-light);
  width: 180px;
  max-width: 100%;
  background-image: url(../images/icon-search.svg);
  background-repeat: no-repeat;
  background-position: center left 16px;
  height: 36px;
  color: #B1B7C5;
  padding-left: 40px;
}

.form-control:focus{
  border-color: var(--primary-color) !important;
  outline: 0 !important;
  box-shadow: 0 0 1rem 0 rgba(140,152,164,.25) !important;
}

.control-field .form-control:focus, .control-field .form-select:focus{
  border-color: var(--primary-color) !important;
  outline: 0 !important;
  box-shadow: 0 0 1rem 0 rgba(140,152,164,.25) !important;
}


.btn.btn-primary{
  padding: 10px 18px;
  box-shadow: none !important;
  display: inline-block;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  /* Declared, not inherited. This button never set a line-height and took
     Bootstrap's 1.5, which is 21px here. Every rule that claimed to "mirror
     .btn.btn-primary's metrics" then wrote 1.2 instead, because 1.2 is what
     the metrics list looks like when you read the declarations rather than
     the computed value. That is a 4.2px height difference between two buttons
     in the same row, and it is what was left after the padding fix. */
  line-height: 1.5;
  background-color: var(--primary-color);
  border: 0;
}

.btn.btn-primary,
.btn-secondary,
.btn-fill,
.btn.btn-channel,
.btn.btn-fill.button-convert,
.btn-remove-photo,
.btn.btn-fill.btn-export-chapters,
.btn.btn-fill.btn-remove,
.export-btn,
.btn.btn-fill.btn-orange,
.fc-prev-button.fc-button.fc-button-primary,
.fc-next-button.fc-button.fc-button-primary,
button.fc-today-button.fc-button.fc-button-primary,
.btn-preview,
.button,
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline .form-item .form-label,
.customization-btn,
.ac-save-button,
.path-video-planner .fc-toolbar.fc-header-toolbar .fc-button-group>.fc-button,
.subscribe-price .sbm-cB_C-access-btn.morningfame-invite-link
{
  position: relative;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  /* Was `transition: all 500ms ease`. A bare `all` animates every animatable
     property, including ones no button should ever animate.
     
     It was not theoretical. The metric tabs on the channel report signal the
     selected tab with font-weight as well as colour, and `all` animated the
     font-weight: Satoshi has no weight between 500 and 700 to interpolate to,
     so the value stuck at its old figure and the indicator silently stopped
     working after the first click. It was correct on page load and wrong
     from then on, which is the worst way for an accessibility affordance to
     fail because it tests clean.
     
     Naming the properties fixes that and is better practice anyway: `all`
     also animates layout properties such as width and padding, which forces
     layout on every hover. */
  transition:
    color 500ms ease,
    background-color 500ms ease,
    border-color 500ms ease,
    box-shadow 500ms ease,
    opacity 500ms ease,
    transform 500ms ease;
}




.btn-primary:before,
.btn-secondary:before,
.btn-fill::before,
.btn.btn-channel::before,
.btn.btn-fill.button-convert:before,
.btn-remove-photo::before,
.btn.btn-fill.btn-export-chapters::before,
.btn.btn-fill.btn-remove::before,
.export-btn::before,
.btn.btn-fill.btn-orange::before,
.fc-prev-button.fc-button.fc-button-primary::before,
.fc-next-button.fc-button.fc-button-primary::before,
button.fc-today-button.fc-button.fc-button-primary::before,
.btn-preview::before,
.button::before,
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline .form-item .form-label::before,
.customization-btn::before,
.ac-save-button::before,
.path-video-planner .fc-toolbar.fc-header-toolbar .fc-button-group>.fc-button::before,
.subscribe-price .sbm-cB_C-access-btn.morningfame-invite-link::before
 {
  content: '';
  position: absolute;
  border-radius: 8px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.btn.btn-primary::before{ border: 3px solid transparent;}
.btn.btn-secondary:before{  border:3px solid transparent;}


.btn-primary:hover:before,
.btn.btn-fill.button-edit:hover:before,
.btn.btn-fill.button-convert:hover::before,
.btn.btn-channel:hover::before,
.btn.btn-fill.btn-export-chapters:hover::before,
 button.fc-today-button.fc-button.fc-button-primary:hover::before,
.btn-preview:hover::before,
.button:hover::before,
.customization-btn:hover::before,
.subscribe-price .sbm-cB_C-access-btn.morningfame-invite-link:hover::before,


.btn-primary:focus:before,
.btn.btn-fill.button-edit:focus:before,
.btn.btn-fill.button-convert:focus:before,
.btn.btn-channel:focus::before,
.btn.btn-fill.btn-export-chapters:focus::before,
 button.fc-today-button.fc-button.fc-button-primary:focus::before,
.btn-preview:focus::before,
.button:focus::before,
.customization-btn:focus::before,
.subscribe-price .sbm-cB_C-access-btn.morningfame-invite-link:focus::before,

.btn-primary:active:before,
.btn.btn-fill.button-edit:active:before,
.btn.btn-fill.button-convert:active:before,
.btn.btn-channel:active::before,
.btn.btn-fill.btn-export-chapters:active::before,
button.fc-today-button.fc-button.fc-button-primary:active::before,
.btn-preview:active::before,
.button:active::before,
.customization-btn:active::before,
.subscribe-price .sbm-cB_C-access-btn.morningfame-invite-link:active::before
{
  -webkit-animation-name: hvr-ripple-primary-out;
  animation-name: hvr-ripple-primary-out;
}


.btn.btn-fill.button-view:hover:before,
.btn.btn-fill.button-view:focus:before,
.btn.btn-fill.button-view:active:before{
  -webkit-animation-name: hvr-ripple-primary-light-out;
  animation-name: hvr-ripple-primary-light-out;
}

.btn.btn-fill.button-delete:hover:before,
.btn-remove-photo:hover::before,
.btn.btn-fill.btn-remove:hover::before,


.btn.btn-fill.button-delete:focus:before,
.btn-remove-photo:focus::before,
.btn.btn-fill.btn-remove:focus::before,


.btn.btn-fill.button-delete:active:before,
.btn-remove-photo:active::before,
.btn.btn-fill.btn-remove:active::before
{
  -webkit-animation-name: hvr-ripple-delete-out;
  animation-name: hvr-ripple-delete-out;
}


.btn-secondary:hover:before,
.export-btn:hover::before,
.btn.btn-fill.btn-orange:hover::before,
.btn-preview.custom-view:hover::before,
.subscription-plans .membershipPage .active .register-button .button:hover::before,
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline .form-item .form-label:hover::before,
.ac-save-button:hover::before,
.path-video-planner .fc-toolbar.fc-header-toolbar .fc-button-group>.fc-button:hover::before,
.button.dialog-cancel:hover::before,
.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary:hover::before,
.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary:hover::before,

.btn-secondary:focus:before,
.export-btn:focus::before,
.btn.btn-fill.btn-orange:focus::before,
.btn-preview.custom-view:focus::before,
.subscription-plans .membershipPage .active .register-button .button:focus::before,
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline .form-item .form-label:focus::before,
.ac-save-button:focus::before,
.path-video-planner .fc-toolbar.fc-header-toolbar .fc-button-group>.fc-button:focus::before,
.button.dialog-cancel:focus::before,
.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary:focus::before,
.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary:focus::before,

.btn-secondary:active:before,
.export-btn:active::before,
.btn.btn-fill.btn-orange:active::before,
.btn-preview.custom-view:active::before,
.subscription-plans .membershipPage .active .register-button .button:active::before,
.path-video-planner .views-exposed-form.bef-exposed-form .form--inline .form-item .form-label:active::before,
.ac-save-button:active::before,
.path-video-planner .fc-toolbar.fc-header-toolbar .fc-button-group>.fc-button:active::before,
.button.dialog-cancel:active::before,
.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary:active::before,
.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary:active::before {
  -webkit-animation-name: hvr-ripple-secondary-out;
  animation-name: hvr-ripple-secondary-out;
}

 .fc-prev-button.fc-button.fc-button-primary,
 .fc-next-button.fc-button.fc-button-primary{ overflow: visible !important;}

.fc-prev-button.fc-button.fc-button-primary:hover::before,
.fc-next-button.fc-button.fc-button-primary:hover::before,

.fc-prev-button.fc-button.fc-button-primary:focus::before,
.fc-next-button.fc-button.fc-button-primary:focus::before,

.fc-prev-button.fc-button.fc-button-primary:active::before,
.fc-next-button.fc-button.fc-button-primary:active::before{
  -webkit-animation-name: hvr-ripple-calender-out;
  animation-name: hvr-ripple-calender-out;
}


.fc-prev-button.fc-button.fc-button-primary::before,
.fc-next-button.fc-button.fc-button-primary::before{
  border:3px solid transparent;
}



@keyframes hvr-ripple-primary-out {
  100% {
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    border: var(--primary-color) solid 3px;
    opacity: 0;
}
}

@keyframes hvr-ripple-secondary-out {
  100% {
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    border: var(--secondary-color) solid 3px;
    opacity: 0;
}
}


@keyframes hvr-ripple-primary-light-out {
  100% {
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    border: var(--secondary-color) solid 3px;
    opacity: 0;
}
}

@keyframes hvr-ripple-delete-out {
  100% {
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    border: #EA2E2E solid 3px;
    opacity: 0;
}
}

@keyframes hvr-ripple-calender-out {
  100% {
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    border: var(--secondary-color) solid 3px;
    opacity: 0;
}
}





/* .btn.btn-primary:hover{ background-color: #481e4d;} */

/* The orange secondary used to be defined HERE, and it required BOTH classes:
 * `.btn.btn-primary.btn-secondary`. That is the root of a defect family, not a
 * quirk, so it is worth saying what it caused before it disappears from the
 * file.
 *
 * A role class should answer one question: what does this button MEAN. Making
 * the answer depend on a pair meant a bare `.btn-secondary` fell through to
 * Bootstrap's grey, and a bare `.btn-primary` stayed purple, so the only way
 * to get an orange button was to write both and hope nobody tidied one away.
 * Somebody did tidy, and six audit buttons turned grey.
 *
 * It also spawned five copies of itself. When a button did not come out
 * orange, the reachable fix was to re-declare the colour inside a page scope
 * rather than to work out why, so `background: var(--secondary-color)` ended
 * up restated in the video planner, the thumbnails group, the bio page, the
 * extension download button and a module badge. Five places to keep in step
 * for one declaration.
 *
 * The single-class definition in custom-style.css is now authoritative. The
 * `path { fill }` rules move with it, because an icon inside an orange button
 * needs white regardless of how the button was classed.
 */

.upgrade-area a{font-size: 14px;font-weight: bold;color: var(--secondary-color);}
.setting-area>div{ margin-left: 16px;}
.auth-button .btn {
  min-width: 140px;
}

.notification a{ position: relative;}
.notification-indicator-number {
  width: 14px;
  height: 14px;
  background: var(--secondary-color);
  border-radius: 50%;
  border: 1px solid var(--bs-white);
  display: flex;
  position: absolute;
  top: -3px;
  right: -5px;
  font-size: 8px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}

.app-sidebar .dropdown-divider{
  border-top: 1px solid #F2EEF8;
  margin: 20px 0;
}

.navbar-label{
  font-size: 11px;
  color: var(--title);
  font-weight: bold;
  margin-bottom: 10px;
}



.toolbox-main {
  min-height: 120px;
  color: var(--paragraph) !important;
}

.toolbox-main p{ margin: 0px; font-weight: 500;}

.toolbox-main .d-block { margin-bottom: 5px; min-height: 35px;}

.sec-toolbar-main {
  position: relative;
}

.sec-toolbar-main .position-absolute {
  right: 0;
  top: 20px;
  width: 78px;
}

.sec-toolbar-main .swiper-button-next,
.sec-toolbar-main .swiper-button-prev {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  color: #797979;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.sec-toolbar-main .swiper-button-next path,
.sec-toolbar-main .swiper-button-prev path{ stroke: var(--paragraph); }
.sec-toolbar-main .swiper-button-prev:after,
.sec-toolbar-main .swiper-rtl .swiper-button-next:after {
  display: none;
}

.sec-toolbar-main .swiper-button-next:after,
.sec-toolbar-main .swiper-rtl .swiper-button-prev:after {
  display: none;
}

.sec-toolbar-main .swiper-button-next:hover,
.sec-toolbar-main .swiper-button-prev:hover {
  background-color: var(--secondary-color);
  color: var(--bs-white);
}

.sec-toolbar-main .swiper-button-next:hover path,
.sec-toolbar-main .swiper-button-prev:hover path{ stroke: var(--bs-white); }

.sec-toolbar-main .toolbox-main:hover {
  background: var(--primary-color);
  color: var(--bs-white) !important;
}

.sec-toolbar-main .toolbox-main:hover path {
  stroke: var(--bs-white);
}

.block-header{margin-bottom: 10px;}
.title {
  font-size: 16px;
  font-weight: bold;
  color: var(--title);
}

.card{border-radius: 12px;padding: 12px;border: 0;}

.card-recent-project h5{font-size: 14px;color: var(--title);font-weight: bold;margin-bottom: 8px;}
.card-recent-project p{ font-size: 11px;}

.action-tool {
  display: flex;
  gap: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}
.card-recent-project{ cursor: pointer;}
.card-recent-project .flex-grow-1 {
  padding-right: 40px;
}

.card-recent-project:hover .action-tool { opacity: 1; visibility: visible;}


.imgbx {
  flex: 0 0 100px;
  max-width: 100px;
  margin-right: 10px;
}
.imgbx img{
  border-radius: 8px;
  width: 100%;
  height: 74px;
}
.link-view-all{ color: var(--paragraph); font-size: 12px; font-weight: 500;}
.link-view-all:hover{ color: var(--secondary-color);}

.img-figure{background: var(--primary-light);border-radius: 8px; min-height: 90px;margin-bottom: 10px;}
.card-info h4 {
  font-size: 14px;
  line-height: 16px;
  color: var(--title);
  font-weight: bold;
  margin-bottom: 12px;
}
.card-info p{font-size: 12px;}

.card-info .btn {
  font-size: 12px;
  font-weight: bold;
}


.icon-box {
  flex: 0 0 90px;
  max-width: 90px;
  min-height: 72px;
  background: var(--primary-light);
  border-radius: 8px;
  margin-right: 8px;
  width: 90px;
}

.card-smiple-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 5px;
}

.card-milestone p {
  font-size: 10px;
  margin-bottom: 5px;
  font-weight: 500;
}

.card-milestone .mt-auto {
  display: none;
}

.card.h-100.card-milestone .d-flex.mb-3:last-child{ margin-bottom: 0px !important;}
.card.h-100.card-schedule-post {
  height: calc(100% - 30px) !important;
  padding: 24px;
}

.datepicker-inline {
  width: 100%;
  margin-bottom: 16px;
}
.datepicker table {
  width: 100%;
}

.datepicker td, .datepicker th {
  border: 1px solid #EAE2F4;
  border-radius: 0px;
}
.datepicker.dropdown-menu{ font-family: satoshi;}
/* .datepicker td{font-size: 18px;font-weight: 500;height: 84px;vertical-align: bottom;text-align: right;padding: 5px;} */

.datepicker th.datepicker-switch {
  /* width: 145px; */
  font-size: 12px;
  font-weight: bold;
  color: var(--title);
  border: 0;
}

.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
  background: var(--primary-color);
  color: #fff !important;
}

.datepicker table tr td.today:hover, .datepicker table tr td.today:hover:hover, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:hover:hover, .datepicker table tr td.today:active, .datepicker table tr td.today:hover:active, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.active, .datepicker table tr td.today:hover.active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled:hover.active, .datepicker table tr td.today.disabled, .datepicker table tr td.today:hover.disabled, .datepicker table tr td.today.disabled.disabled, .datepicker table tr td.today.disabled:hover.disabled, .datepicker table tr td.today[disabled], .datepicker table tr td.today:hover[disabled], .datepicker table tr td.today.disabled[disabled], .datepicker table tr td.today.disabled:hover[disabled]{ background-color: var(--primary-color);}

.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled]{ background: var(--primary-color) !important;}

.datepicker th.dow{font-size: 14px; font-weight: bold; color: var(--title); background: var(--primary-light);}

.datepicker table thead> tr:first-child {
  border-bottom: 3px solid #fff;
}
.datepicker thead tr th.prev, .datepicker thead tr th.next {
  /* width: 20px;
  height: 20px;
  padding: 17px; */
  border-radius: 6px;
  background-color: #feefe8;
  border-color: #feefe8;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  border: 0;
}


@media screen and (min-width: 767px) {
/* .datepicker thead tr th.prev{position: absolute;left: 24px;}
.datepicker thead tr th.next {position: absolute;left: 70px;}
.datepicker thead tr th.prev, .datepicker thead tr th.next{ display: block;}
.datepicker th.datepicker-switch{ padding-bottom: 24px;} */
}

.datepicker thead tr th.prev{background-image: url(../images/arrow-pre.svg);}
.datepicker thead tr th.next {background-image: url(../images/arrow-next.svg);}

.datepicker thead tr th.prev:hover,
.datepicker thead tr th.next:hover{ background-color: var(--secondary-color); border-color: var(--secondary-color);
  background-position: center center;
  background-repeat: no-repeat;
}

.datepicker thead tr th.prev:hover{background-image: url(../images/arrow-pre-hover.svg);}
.datepicker thead tr th.next:hover{ background-image: url(../images/arrow-next-hover.svg);}
.datepicker thead tr th.datepicker-switch:hover {background: transparent;}
.datepicker table tr td .month {
  text-align: center;
}

.button-group-event .btn{ margin: 0px 8px;}
.btn.btn-today {
  position: absolute;
  right: 24px;
  top: 24px;
  font-size: 12px;
  font-weight: bold;
  min-width: 90px;
  min-height: 32px;
  box-shadow: none !important;
  color: var(--primary-color);
  background: var(--primary-light);
}
.btn.btn-today:hover{ background: var(--secondary-color); color: var(--bs-white);}


.card-single{ background: var(--primary-light); padding: 16px; border-radius: 8px;}

.card-single .title01 {
  font-size: 14px;
  color: var(--title);
  font-weight: bold;
}

.upgrade-link {font-size: 12px;font-weight: bold; color: var(--secondary-color);}
.upgrade-link img {margin-right: 5px;}

.progress {background: var(--bs-white);border-radius: 30px;height: 8px;}
.progress-bar{ background: var(--primary-color);}
.card-single p{ font-size: 12px; margin-top: 12px;}
.sidebar-footer {padding: 16px 20px;}

.open-menu .sidebar-footer{ opacity: 0;}

.swiper-pagination-bullet{ background:#DBD0EC; opacity: 1;}
.swiper-pagination-bullet-active {
  background: var(--primary-color);
}

.open-menu .app-sidebar {
  transform: translate(0);
  overflow-y: auto;
  overflow-x: hidden;
}

@media screen and (min-width: 768px) {
  .open-menu .app-sidebar{ width: 100px;}
}



.open-menu .dashaboard-content {margin-left: 100px;}

.figimg {
  flex: 0 0 32px;
  max-width: 32px;
  height: 32px;
  background: var(--primary-light);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-flex.hd-area {
  padding: 0px 15px 5px 15px;
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
}

.d-flex.hd-area .View-all {
  margin-left: auto;
  font-size: 13px;
  font-weight: normal;
  color: var(--primary-color)
}

.meta-text {flex: 1;padding: 0px 6px;}
.notification .dropdown-menu.dropdown-top-area li a{ color: var(--paragraph); font-weight: normal;}
.meta-text .message-heading {font-size: 13px; font-weight: bold;}
.meta-text p {margin: 0px;font-size: 12px;}
.time-area{ font-size: 12px;}

.ripple {width: 10px;height: 10px;background: var(--primary-color);border-radius: 50%;
  border: 3px solid var(--bs-white);position: absolute;right: 0;top: 0; display: none;}

.notification .dropdown-menu.dropdown-top-area .active .meta-text .message-heading{ color: var(--title);}
.notification .dropdown-menu.dropdown-top-area .active .ripple{ display: block;}

.modal-do-next .modal-dialog{ max-width: 450px;}
.modal-content{ border-radius: 16px; border: 0;}

.modal-card .img-figure{ min-height: 120px; margin-bottom: 16px;}
.modal-card .card-info h4{ font-size: 16px;}
.modal-card .card-info p {font-size: 13px;}

/* G4 (TS-4376, 2026-05-26) — entitlement modal dynamic-payload styles.
   The .useability-modal__fallback block keeps the existing legacy look.
   These rules style the new admin-editable dynamic path. */
.useability-modal__dynamic { text-align: center; }
.useability-modal__dynamic .useability-modal__message {
  font-size: 14px;
  color: var(--paragraph);
  margin-bottom: 12px;
  line-height: 1.5;
}
.useability-modal__dynamic .useability-modal__message p { margin-bottom: 8px; }
.useability-modal__reset-at {
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin-top: 6px;
  margin-bottom: 0;
}
/* Secondary CTA — outlined / quieter than primary so the two buttons
   don't compete visually. Bootstrap's btn-outline-secondary is close
   enough; this just nudges colour to match the brand purple. */
.useability-modal__footer .useability-modal__secondary-cta {
  color: var(--primary-color);
  border-color: var(--primary-color);
  margin-left: 8px;
}
.useability-modal__footer .useability-modal__secondary-cta:hover {
  background: var(--primary-color);
  color: #fff;
}
.modal-header .btn-close {
  padding: .5rem .5rem;
  margin: 0px !important;
  margin-left: auto !important;
  opacity: 1;
  background: #fff !important;
  padding: 0px;
  width: 20px;
  height: 20px;
  box-shadow: none;
  outline: none !important;
}


.modal-do-next .modal-header {border: 0; padding-bottom: 0px; padding-top: 24px;}
.modal-do-next .modal-footer{padding-bottom: 20px;}
.modal-footer .btn {font-size: 12px;font-weight: bold;min-width: 134px;flex: 1;}
.modal-body {padding: 24px;}

.btn.btn-primary.btn-light.btn-mark {background: #f8f5f8; color: var(--primary-color);}
.btn.btn-primary.btn-light.btn-mark::before{ border: 3px solid transparent}

.btn.btn-primary.btn-light.btn-skip {background: #f9f9fa;color: var(--paragraph);min-width: 100px;flex: 0;}
.btn.btn-primary.btn-light.btn-skip::before{ border:3px solid transparent}

/* .btn.btn-primary.btn-light.btn-mark:hover,
.btn.btn-primary.btn-light.btn-skip:hover{ background: var(--primary-color); color: var(--bs-white);} */

/* .modal-open .dashboard-header, .modal-open .dashaboard-main {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
} */

/* .modal-backdrop{ display: none;} */

.btn-check:focus+.btn, .btn:focus {
  box-shadow: none;
}


.auth-button.post-btn .btn {min-width: 100px;}
.post-btn .btn.btn-primary:hover path {stroke: #fff;fill: none;}


.top-bar-left-section .btn{font-weight: 500; font-size: 14px; color: var(--paragraph);padding: 0px 16px;}
.top-bar-left-section .btn svg{ min-width: 20px;}

.top-bar-lower-deck .btn {font-weight: 500;font-size: 14px;color: var(--paragraph);padding: 0px 5px;}
.top-bar-lower-deck .btn svg{ min-width: 20px;}

.top-bar-lower-deck .btn:hover{color: #C9D0DA;}
.top-bar-lower-deck .btn:hover svg{ opacity: 0.5;}

.button-undo:hover .btn,
.button-redo:hover .btn,
.button-resize:hover .btn{ color: #C9D0DA;}

.button-undo:hover .btn svg,
.button-redo:hover .btn svg,
.button-resize:hover .btn svg, .button-file-save-status:hover svg{ opacity:0.5;}

.top-bar-left-section {margin-left: 16px;}
.top-bar-center-section{ font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar-center-section svg{ min-width: 20px;}
.nav-item.layer-head {padding: 5px 20px;}
.nav-item.layer-head .layer-text-name{font-size: 12px;color: var(--paragraph);font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding-right: 5px;}


.action-layer [class*='icn-']{ width: 12px; cursor: pointer;}
.action-layer [class*='icn-']:not(:last-child){ margin-right: 12px;}

.dashboard-header.editor-layout-header .header-inner{align-items: start !important;}

/* app-sidebar-editor-layout css start */
.open-menu .header-logo{ flex: 0 0 100px; max-width: 100px;}

.open-menu .list-unstyled.nav-compact .menuicon {min-width: 24px;}

.app-sidebar .list-unstyled.nav-compact .nav-item .menuicon .d-inline {
  display: none !important;
}
.app-sidebar .list-unstyled.nav-compact .nav-item.active .menuicon .d-inline {
  display: block !important;
}

.app-sidebar .list-unstyled.nav-compact .nav-item.active .menuicon .d-block{ display: none !important;}


.open-menu  .list-unstyled.nav-compact .nav-item.active .menuicon .d-none
{ display: block !important;}

.open-menu .list-unstyled.nav-compact .nav-item.active .menuicon .d-inline
{ display: none !important;}


.open-menu .list-unstyled.nav-compact li:not(:last-child){ margin-bottom: 20px;}

.open-menu .list-unstyled.nav-compact li a {
font-size: 14px;
flex-direction: column;
text-align: center;
}

.open-menu .list-unstyled.nav-compact li.active a {
  font-weight: bold;
  background: var(--bs-white);
  border-color: var(--bs-white);
}

.open-menu .list-unstyled.nav-compact .menuicon {
  min-width: 52px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 4px;
}

.open-menu  .list-unstyled.nav-compact li.active .menuicon{ height: 52px;}

.open-menu  .list-unstyled.nav-compact .nav-item.active .menuicon{  background: var(--primary-color);}

.open-menu .list-unstyled.layer-listing{ display: none;}
.open-menu .nav-item .dropdown-divider{ display: none;}
.open-menu .navbar-label{ display: none;}

.open-menu .list-unstyled.list-most-used-tools {display: none;}
.open-menu .menu-arrow{ display: none;}


.dashboard-header.editor-layout-header .menu-toggle-btn {/* position: static; *//* order: -1; */}

.top-bar-lower-deck {padding: 9px 0px;border-top: 1px solid var(--primary-light);position: fixed;top: 57px;z-index: 12;background: #fff;width: calc(100% - 250px);right: 0;-webkit-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}

.open-menu .top-bar-lower-deck {
  width: calc(100% - 100px);
}

.dashaboard-content.editing-area {margin-top: 45px;}
.dashaboard-content.editing-area .dashaboard-inner{padding: 32px;}


.frame .form-control {
  width: 72px;
  height: 28px;
  color: var(--paragraph);
  background: var(--primary-light);
  border-color: var(--primary-light);
  border-radius: 4px;
  font-size: 10px;
  padding: 7px;
  font-weight: 500;
  padding-right: 20px;
}

.frame .form-control::placeholder {color: var(--paragraph);opacity: 1;}
.frame .form-control::-ms-input-placeholder {color:var(--paragraph);}

.frame .form-control:focus{ border-color: var(--primary-color); box-shadow: none;}

.frame .w-px {
  position: absolute;
  right: 8px;
  font-size: 10px;
  color: #C7CDDA;
  font-weight: 500;
}

.frame-w {
  font-size: 14px;
  font-weight: 500;
  padding: 0px 8px;
}

.size-lock {
  margin: 0px 8px;
  cursor: pointer;
  min-width: 16px;
}

.zize-lock img {
  vertical-align: -2px;
}

.border-end {
  border-right: 1px solid #F2EEF8 !important;
}

.top-bar-lower-deck-wrapper {
  margin: 0px -5px;
}

.app-sidebar-right {
  margin-top: 49px;
  bottom: 0;
  right: 0;
  width: 250px;
  background-color: var(--bs-white);
  z-index: 11;
  min-height: 100vh;
  box-shadow: none;
  border: 0;
  outline: none;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  display: flex;
  flex-direction: column;
}

.dashaboard-content.layout-side-bar {/* margin-right: 250px; */}

.open-menu .dashaboard-content.layout-side-bar {/* margin-right: 250px; */}
.open-menu .dashaboard-content.layout-side-bar {/* margin-left: 100px; */}

.sidebar-header {padding:8px 16px;position: -webkit-sticky; /* Safari */position: sticky;top: 0;background: #fff;z-index: 1;}

.sidebar-body {
  padding: 10px 16px;
  padding-top: 0;
}

.nav.toolbox-nav .nav-links {
  font-size: 12px;
  font-weight: 500;
  color: var(--title);
  display: block;
  position: relative;
  background-color: transparent;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
}

.nav.toolbox-nav .nav-links.active {
  font-weight: 700;
  color: var(--bs-white);
  background-color: var(--primary-color);
}

.nav.toolbox-nav {
  border-bottom: 1px solid #f2eef8;
  background: var(--primary-light);
  padding: 6px;
  border-radius: 8px;
}

.accordionbutton {
  background: var(--bs-white);
  border: 1px solid var(--bs-white);
  width: 100%;
  position: relative;
  text-align: left;
  font-size: 11px;
  font-weight: bold;
  color: var(--title);
  padding: 8px 0px;
  text-transform: uppercase;
}

.accordion.list-accordion .accordion-header .accordionbutton::before {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 10px;
  justify-content: center;
  font-weight: bold;
  background-color: var(--primary-light);
  border-radius: 2px;
}

.accordion.list-accordion .accordion-header .accordionbutton.collapsed::before {
  content: "\f4fe";
  font-family: bootstrap-icons !important;
}
.accordion.list-accordion .accordion-header .accordionbutton::before {
  content: "\f63b";
  font-family: bootstrap-icons !important;
}
.accordion.list-accordion .accordion-item{border: 0;border-bottom: 1px solid #F2EEF8;}
.square-lock img {
  width: 12px;
  min-width: 12px;
}
.accordion.list-accordion .accordion-item:last-child{ border-bottom: 0;}
.accordion-header .ms-auto {
  position: absolute;
  right: 0;
  top: -5px;
}

.accordion-body {
  padding: 1rem 1.25rem;
  padding: 0px 0px 10px 0px;
}


.tooltip.bs-tooltip-bottom{ display: none;}

.img-circle {
  flex: 0 0 40px;
  max-width: 40px;
}


.size-frame .form-control {
  width: 72px;
  height: 28px;
  color: var(--paragraph);
  background: var(--primary-light);
  border-color: var(--primary-light);
  border-radius: 4px;
  font-size: 10px;
  padding: 7px;
  font-weight: 500;
  padding-right: 20px;
}

.size-frame .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

.size-frame .size-frame-w {
  font-size: 14px;
  font-weight: 500;
  padding-right: 5px;
}

.size-frame .size-w-px{
  position: absolute;
  right: 10px;
  font-size: 10px;
  color: #C7CDDA;
  font-weight: 500;
}

.size-frame {margin: 0px 4px;}

.preset-list .col {
  flex: 1 0 20%;
  max-width: 20%;
  margin: 2px 0px;
}

.item-icon {display: block; cursor: pointer; text-align: center;}

.strock-option input.form-control {
  border: 0;
  font-size: 12px;
  color: var(--paragraph);
  font-weight: 500;
  padding: 2px;
  box-shadow: none !important;
  background-color: var(--bs-white);
}
.strock-option .input-group-prepend{min-width: 20px;line-height: 1;}
.strock-option.border {border: 1px solid #F2EEF8 !important; border-radius: 5px; padding: 5px;}

.strock-option .input-group-prepend  input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.strock-option .input-group-prepend input::-webkit-color-swatch {border-radius: 4px;border: none;}
.strock-option .input-group-prepend input::-moz-color-swatch {border-radius: 4px;border: none;}





input[type="number"] {
  position: relative;
}

/* Spin Buttons modified */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
  width: 1em;
  opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-inner-spin-button:active{
  opacity: .8;
}

.form-check.checkbox-container {margin: 0px;}
.checkbox-container .form-check-input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  cursor: pointer;
  margin-right: 12px;
  border-radius: 4px;
  border: 1px solid var(--primary-light);
  background: var(--primary-light);
  box-shadow: none !important;
}

.checkbox-container .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.checkbox-container .form-check-label{font-size: 11px;font-weight: bold;color: var(--title);cursor: pointer;}

.input-group.strock-option.border.border-0 {
  border: 0 !important;
  padding: 0px;
}
.input-group.strock-option.border.border-0 label{line-height: 1;padding-left: 12px;font-size: 11px;font-weight: bold;color: var(--title);cursor: pointer;}

.title-label {
  background: var(--bs-white);
  border: 1px solid var(--bs-white);
  width: 100%;
  position: relative;
  text-align: left;
  font-size: 11px;
  font-weight: bold;
  color: var(--title);
  display: inline-block;
  text-transform: uppercase;
}

.tools-controls .tools-controls-iteam:not(:last-child){margin-bottom: 5px;}
.tools-controls .tools-controls-iteam label{font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right: 5px; cursor: pointer;}
.tools-controls .tools-controls-iteam .controls-icon{ min-width: 20px; margin-right: 8px;}


.form-switch .form-check-input {
  width: 28px;
  height: 16px;
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}
.form-switch .form-check-input:focus{ box-shadow: none;}

.form-switch .form-check-input:checked {
  background-color: rgb(229, 186, 241);
  border-color: rgb(229, 186, 241);
  background-image: url(../images/toggle-bg.svg);
  background-size: 13px;
  background-position: center right 2px;
}
.preset-item.my-1 {
  margin: 2px 0 !important;
}

.tools-controls-iteam .form-switch {margin-left: auto;display: flex; cursor: pointer;}

.card-slider-header{font-size: 12px;font-weight: 500;color: var(--paragraph);margin-bottom: 5px;}
.card-slider-body{background: var(--primary-light);padding: 2px 6px;border-radius: 6px; height: 25px;}

.card.card-slider{margin-bottom: 10px;border-radius: 0px;}
.card-title-sm{font-size: 11px;font-weight: bold;color: var(--title);text-transform: uppercase;margin-bottom: 10px;}


.dropdown-divider {border-top: 1px solid #F2EEF8;}
.card-title-sm img{ margin-left: 8px;}
.color-box {width: 24px;height: 24px;display: block;border: 2px solid;border-radius: 4px;}

.card-slider-body .slider.slider-horizontal{ margin-top: 3px;}
.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
  margin-left: 0;
}
.card-color-palette{background-color: var(--primary-light);border-radius: 8px;padding: 8px;}

.slider-handle{background-color: var(--primary-color);background-image: var(--primary-color);top: -7px;cursor: pointer;width: 12px;height: 12px;border: 2px solid var(--bs-white);}
.slider-selection {background: var(--primary-color); height: 4px !important; box-shadow: none !important;}
.slider.slider-horizontal .slider-track{height: 3px;box-shadow: none;background: var(--bs-white);}
.slider.slider-horizontal {
  width: 100%;
  height: 4px;
}

.nav.nav-color-edit{ margin-bottom: 10px;}
.nav.nav-color-edit li:not(:last-child){ margin-right: 11px;}
.nav.nav-color-edit li .nav-links {position: relative;}
.nav.nav-color-edit li .nav-links::before {
  position: absolute;
  content: "";
  left: 1px;
  right: 0px;
  display: none;
  bottom: -20px;
  background-image: url(../images/arrow-angle.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 24px;
  height: 24px;
}
.nav.nav-color-edit li .nav-links.active::before{ display: block;}


.slider-invert .slider.slider-horizontal .slider-track {
  background-image: linear-gradient(to right, #E91818, #E96127, #F1DC20, #5BED58, #2296EA, #2296EA,
  #AC1DEF, #F11298 );
}
.slider-iteam .slider-selection{ background: transparent;}

.toggle-button-main {
  padding: 8px 15px;
  display: none;
}

.panelsidebar {top: 60px;left: 251px;width: 200px;display:flex;border: 0;overflow-y: auto;overflow-x: hidden;border-radius: 4px;z-index: 12;box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);}

.open-menu .panelsidebar{ left: 100px;}

.panel-header {padding: 8px;position: -webkit-sticky;position: sticky;top: 0;background: #fff;z-index: 2;}




/* css by dp 13 */

.templates-gallery .search-area input{width: 100%;}
.templates-gallery {
  left: 255px;
  top: 110px;
  border-radius: 8px;
  max-width: 200px;
  width: 100%;
  padding: 8px;
  position: fixed;
  width: 250px;
  background-color: var(--bs-white);
  z-index: 11;
  overflow-y: auto;
  max-height: 100%;
  box-shadow: none;
  border: 0;
  outline: none;
  overflow-x: hidden;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  display: flex;
  flex-direction: column;
}

.template-slide .swiper-slide a {
  display: flex;
  font-size: 10px;
  font-weight: 500;
  color:var(--primary-color);
  background: var(--primary-light);
  padding: 6px 10px;
}

.template-slider {
  max-height: 29px;
  height: 100%;
}


.template-slide .swiper-button-next,
.template-slide .swiper-button-prev,
.shape-slide .swiper-button-next,
.shape-slide .swiper-button-prev
{
  width:20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  color: #797979;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  margin-top: -10px !important;
}

.template-slide .swiper-button-next, .shape-slide .swiper-button-next{right: 2px;}
.template-slide .swiper-button-prev, .shape-slide .swiper-button-prev {left: 2px;}

.template-slide .swiper-button-next:hover,
.template-slide .swiper-button-prev:hover,
.shape-slide .swiper-button-next:hover,
.shape-slide .swiper-button-prev:hover {
  background-color: var(--secondary-color);
  color: var(--bs-white);
}

.template-slide .swiper-button-next:hover path,
.template-slide .swiper-button-prev:hover path,
.shape-slide .swiper-button-next:hover path,
.shape-slide .swiper-button-prev:hover path {
  stroke: var(--bs-white);
}

.template-slide .swiper-button-prev:after,
.template-slide .swiper-rtl .swiper-button-next:after,
.template-slide .swiper-button-next:after,
.template-slide .swiper-rtl .swiper-button-prev:after{display: none;}


.shape-slide .swiper-button-prev:after,
.shape-slide .swiper-rtl .swiper-button-next:after,
.shape-slide .swiper-button-next:after,
.shape-slide .swiper-rtl .swiper-button-prev:after{display: none;}


.template-slide .swiper-button-prev.swiper-button-disabled,
.shape-slide .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}


.panel-content {padding: 8px;}

.row.gx-2.template-group{ margin: 0px -2px !important; margin-bottom: 8px;}
.row.gx-2.template-group [class*='col-'] {
  padding: 0px 2px;
  margin: 2px 0px !important;
}

.sliderbox {padding-left: 8px;}

.nav.toolbox-nav.panel-tab{margin: 0;margin-bottom: 8px;}
.nav.toolbox-nav.panel-tab .nav-links{ font-size: 10px; padding: 0px 2px 8px 2px;}
.panelsidebar .px-2 {padding: 0px 8px !important;}

.link-see-more {
  padding-right: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--paragraph);
}

.headign-box span {
  font-size: 10px;
  font-weight: bold;
  color: var(--title);
  text-transform: uppercase;
}
.link-see-more:hover{ color: var(--secondary-color);}
.h-header { margin-bottom: 5px;}

.btn-upload {
  background: var(--secondary-color);
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  color: var(--bs-white);
  padding: 9px 10px;
  width: 100%;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.btn-upload img{margin-right: 5px;}
.btn-upload:hover{ color: var(--bs-white); background: #b7480e;}
.btn-upload input{opacity: 0;position: absolute;left: 0;top: 0;bottom: 0;right: 0;width: 100%;height: 100%;cursor: pointer;}

.thumbnail-list-iteam{margin: 0px -2px;flex: 1 1 auto;}
.thumbnail-box {padding: 0px 2px;flex: 0 0 50%;max-width: 50%;margin-bottom: 4px;position: relative;}

.thumbnail-box input{width: 100%;height: 100%;display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;cursor: pointer;opacity: 0;z-index: 1;}
.thumbnail-box span {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid transparent;
}
.thumbnail-box span img{width: 100%;height: 64px;object-fit: cover; object-position: top; cursor: pointer; display: block;}
.thumbnail-box .iocn-check{opacity: 0;visibility: hidden;position: absolute;left: 5px;top: 5px;}
.thumbnail-box input:checked ~ img.iocn-check { opacity: 1; visibility: visible;}
.thumbnail-box input:checked ~ span{ border-color: var(--primary-color);}



.project-itam-card .imgbx {flex: 0 0 66px;max-width: 66px;margin-right: 5px;}
.project-itam-card .card-recent-project h5{font-size: 11px;margin-bottom: 3px;}
.project-itam-card .card-recent-project p {font-size: 10px;margin: 0;}
.project-itam-card {margin-bottom: 8px;position: relative;}


.project-itam-card .card{ border: 1px solid #fff; border-radius: 6px; padding: 5px !important;}
.project-itam-card:hover .card{ border-color: #F2EEF8;}
.project-itam-card .project-checkbox { position: absolute;left: 10px;top: 10px;z-index: 1;opacity: 0;}
.project-itam-card input {width: 100%;height: 100%;display: block;position: absolute;  left: 0;
  right: 0; top: 0; bottom: 0; z-index: 1; opacity: 0;cursor: pointer;}

.project-itam-card input:checked ~ .card{ border-color: #F2EEF8;}
.project-itam-card input:checked ~ .project-checkbox{ opacity: 1;}

.panel-footer {
  padding: 8px;
}

.panel-footer .delete-button {
  display: block;
  border-top: 1px solid #F2EEF8;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--paragraph);
  font-weight: bold;
}


.toolbox-icon {
  flex: 0 0 32px;
  height: 36px;
  background: #F2EEF8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 6px;
  margin-right: 8px;
}

.toolbox-title {font-size: 11px;text-transform: uppercase;font-weight: bold;color: var(--title);  margin-bottom: 4px;}
.toolbox-card .span-title-heading {font-size: 12px;font-weight: 500;color: var(--title);}
.toolbox-card p {font-size: 10px;margin: 0px;}

.toolbox-card .d-flex.position-relative {margin-bottom: 8px;}

.tools-controls-iteam {position: relative; cursor: pointer;}

.sidebar-action {
  position: absolute;
  right: 100%;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  bottom: inherit;
  width: 180px;
  margin-top: 0;
  top: 0;
}


#open-social-media-grids {
  margin-top: -100px;
}




.media-grid-header .flex-grow-1 { font-size: 12px;font-weight: bold;color: var(--title);}
.media-grid-list .form-switch .form-check-input{ width: 41px;}
.textlight {
  position: absolute;
  right: 0;
  font-size: 8px;
  left: 3px;
  top: 6px;
  display: none;
  color: var(--title);
  font-weight: bold;
  pointer-events: none;
}
.media-grid-list .form-switch .form-check-input:checked ~ .textlight{ display: block;}
.media-grid-list .form-check.checkbox-container{ padding: 0px;}
.media-label {
  font-size: 12px;
  font-weight: 500;
}


/******************New css bio page start****************/

.mb-16 {margin-bottom: 16px;}
.addBioPage .img-box {padding: 45px;}
.addBioPage .btn.btn-secondary {margin-top: 10px;}
.socialBioCard .text-box p:last-child {margin-bottom: 0;}
.addBioPage .btn.btn-secondary:hover {background: var(--primary-color);}
.tabsBio-head ul.nav {background: #fff;padding: 8px;border-radius: 6px;}

.tabsBio-head ul.nav li .nav-link {color: var(--paragraph);font-size: 14px;font-weight: 500;border-radius: 6px; background-color: transparent; cursor: pointer;}
.tabsBio-head ul.nav li .nav-link.active {background-color: var(--primary-color);color: var(--primary-light);}

.author-box .img-box {
  background-image: url(../images/authore-full-bg.png???);
  background-color: var(--primary-light);
  width: 100%;
  min-height: 150px;
  padding-top: 75%;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 8px;
}

.author-box .img-box .author-bg img {width: 100%;}

.author-box .img-box .author-bg img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  object-fit: contain;
}

.author-box .img-box .author-details {padding: 0 10px 22px;}
.author-box .img-box .author-details img {width: 68px;height: 68px;margin-top: -29px;border-radius: 50px;overflow: hidden;}
.author-box .img-box .author-details h4 {color: #03463A;margin: 8px 0 0;line-height: 20px;}
.author-box .img-box .author-details p {margin: 0;color: #457754;font-weight: 500;line-height: 20px;}

.btn-preview {padding: 6px 10px;border-radius: 6px;font-size: 12px;font-weight: bold;transition: all 500ms ease;}
.btn-preview::before{ border: 3px solid transparent;}

.edit {background-color: rgb(103 44 114 / 15%);color: var(--primary-color);}
.edit:hover {background-color: rgb(103 44 114 / 35%);color: var(--primary-color);}

.delete {color: #EA2E2E;background-color: rgba(234, 46, 46, 15%);}
.delete:hover {background-color: rgb(234 46 46 / 35%);color: #EA2E2E;}

.custom-view {color: #F26419;background-color: rgb(242 100 25 / 15%);}
.custom-view:hover {background-color: rgb(242 100 25 / 35%);color: #F26419;}

.card.socialBioCard.author-box .text-box h4{ margin-bottom: 6px;}
.card.socialBioCard.author-box .text-box p{ margin-bottom: 2px;}
.card.socialBioCard.author-box .text-box ul {justify-content: space-between; gap: 5px;}
.author-box .text-box ul li {margin-top: 2px;}

.tabs-card-bio [class*='col-'] {margin-bottom: 15px;}


@media only screen and (max-width:992px){
.tabs-card-bio .h-100 {height: auto !important;}
}

/******************New css bio page end****************/


.slider-opacity-main .slider.slider-horizontal .slider-track {
  height: 12px;
  background-image: url(../images/range-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.slider-opacity-main .slider-selection{ height: 12px !important;}
.slider-opacity-main .slider-handle {top: -5px;width: 16px;height: 16px;}


.contentbody .card-slider-header {font-size: 10px;font-weight: bold;}
.contentbody .card-slider-header label{ font-size: 10px; font-weight: bold;}
.custom-color {margin-top: 7px;}

#open-shadow { margin-top: -80px;}



select.form-select.form-select-sm {
  border-radius: 4px;
  border: 1px solid #F2EEF8;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
  color: var(--paragraph);
  background-image: url(../images/select-down.png);
  background-position: center right 9px;
  background-repeat: no-repeat;
  background-size: 10px;
}

.radio-container input {position: absolute;opacity: 0; cursor: pointer;}

.radio-container { cursor: pointer;position: relative;}
.img-hide{ display: none;}

.radio-container input:checked ~ .img-show{ display: none;}
.radio-container input:checked ~ .img-hide{ display: block;}
.action-itam {
  flex: 1;
  text-align: center;
}
.action-itam:not(:last-child){ border-right: 1px solid #F2EEF8;}



.control-field .form-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--title);
    margin-bottom: 4px;
}
/* The border was --primary-light, the same value as the fill, so these fields
   had a border that could not be seen: 1.14:1 against the card behind them,
   against the 3:1 a non-text boundary needs. A field has to look like
   somewhere you can type before you read its label. #6f6786 is the house
   quiet-control border, 3.04:1 on white, the darkest that still reads as
   quiet rather than as an outlined button. This rule is the shared filter
   field, so it corrects them everywhere at once rather than page by page. */
.control-field .form-control,
.control-field .form-select{ font-size: 14px; color: #313234; height: 40px; border-radius: 8px; background-color: var(--primary-light); padding: 6px 11px; border-color: var(--ts-border-control, #6f6786); box-shadow: none;}
.control-field .form-select{ font-weight: bold; color: var(--title); text-transform: uppercase; padding-right: 35px;}


.control-field .form-control::-ms-input-placeholder { color: #313234; opacity: 1;}
.control-field .form-control::placeholder { color: #313234; opacity: 1;}


.control-field.mb-3 {
  margin-bottom: 15px !important;
}

.title-group-list-item .btn {
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  align-items: center;
  padding: 2px;
  margin-bottom: 3px;
  background-color: var(--primary-light);
  justify-content: center;
}
.title-group-list-item:not(:last-child){ margin-right: 16px;}

.control-field .input-group {
  font-size: 14px;
  color: #BDC3CE;
  height: 40px;
  border-radius: 8px;
  background-color: var(--primary-light);
  padding: 6px 11px;
  border-color: var(--primary-light);
  box-shadow: none;
}

.control-field .input-group .input-group-text {
  background: transparent;
  border: 0;
  padding: 0;
  color: #BDC3CE;
  margin-right: 10px;
}

.control-field .input-group .flex-grow-1 {
  background: #fff;
  padding: 2px 12px;
  height: auto;
  border-radius: 8px !important;
  border: 0 !important;
  font-size: 14px !important;
  color: var(--title);
  font-weight: bold;
  padding-right: 80px;
}

.control-field .input-group .flex-grow-1::-ms-input-placeholder { color: var(--title); opacity: 1;}
.control-field .input-group .flex-grow-1::placeholder { color: var(--title); opacity: 1;}

.control-field .input-group .flex-grow-1 input {
  padding: 0;
  height: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--title);
  opacity: 1;
}

.btn.btn-primary.btn-sav-btn {
  position: absolute;
  top: 9px;
  right: 14px;
  padding: 2px 10px;
  border-radius: 4px !important;
  min-width: 64px;
  font-size: 12px;
  z-index: 3;
  font-weight: 500;
}


.page-item .btnPrevious {
    font-size: 14px;
    font-weight: bold;
    color: var(--paragraph);
}

.page-item .btnNext {
    min-width: 120px;
    text-align: center;
    font-weight: bold;
}

.nav.nav-social-bio{border-bottom: 0px;position: relative;max-width: 420px;margin: auto;}
.nav.nav-social-bio::before{position: absolute;content: "";width: calc(100% - 94px);left: 46px;height: 2px;background: linear-gradient(45deg, var(--primary-color), transparent);bottom: 4px;}
.nav-social-bio li{ position: relative;}
.nav-social-bio .nav-link{font-size: 16px;color: var(--paragraph);font-weight: 500;display: flex;flex-direction: column;align-items: center;padding: 0px 10px;border: 0 !important;isolation: inherit !important;position: relative;pointer-events: none;}

.nav-social-bio .nav-link.active {
  font-weight: bold;
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.nav-social-bio li:nth-child(2) a:before {
  width: 0;
}

.nav-social-bio .nav-link::before {
  position: absolute;
  content: "";
  height: 12px;
  background-color: #fff;
  bottom: -16px;
  width: 12px;
  right: 0;
  margin: 0 auto;
  left: 0;
  border-radius: 50%;
  border: 2px solid #858B98;
}

.nav-social-bio li:nth-child(2) a.nav-link.prevuse:before {width: 164px;left: 32px;}
.nav-social-bio .nav-link.prevuse::before{ background-color: var(--primary-color);}

.nav-social-bio li:last-child .nav-link::before{ display: none;}




.nav-social-bio li a.active{font-weight: bold;color: var(--primary-color) !important;background-color: transparent !important;}
.nav-social-bio li a:hover{ color: var(--primary-color);}
.bio-dot {
  width: 12px;
  height: 12px;
  border: 2px solid;
  display: block;
  border-radius: 50%;
  background: #fff;
  position: relative;
  z-index: 1;
}

.card.card-social-bio {
  padding: 24px;
}

.breadcrumb .breadcrumb-item { font-size: 12px; font-weight: 500;}
.breadcrumb .breadcrumb-item a{ color: var(--paragraph);}
.breadcrumb-item.active{ font-weight: bold; color: var(--title);}

.user-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}
.user-picture img{
  width: 100px;
  border-radius: 50%;
  height: 100px;
}


.placeholder-img img {
  border-radius: 8px
}

.photo-filed .control-field .form-label{ margin-bottom: 15px;}


.btn.button-upload, .btn-remove-photo{
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  min-width: 140px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.button-upload img, .btn-remove-photo img{margin-right: 5px;}

.btn.button-upload {background-color: rgba(103, 44, 114, 9%);color: var(--primary-color);position: relative;overflow: hidden;}

.btn-remove-photo{background-color: #ea2e2e26;color: #EA2E2E;}
.btn-remove-photo::before{border: 3px solid transparent;}

.btn.button-upload:hover{ border-color: var(--primary-color);}
.btn-remove-photo:hover{
  /* border-color: #EA2E2E;  */
  color: #EA2E2E;
}

.photo-filed .control-field.mb-3 {margin-bottom: 20px !important;}


.btn.button-upload input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.placeholder-img{ margin-bottom: 16px;}
.top-bar-bio-form{margin-bottom: 30px;}

.accordion.list-accordion-bio .accordion-header {
  background: var(--primary-light);
  padding: 8px 10px;
  border-radius: 8px
}

.accordion.list-accordion-bio  .accordion-btn {
  background: transparent;
  border: 0;
  width: 26px;
  height: 26px;
  position: relative;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  padding: 8px 0px;
  text-transform: uppercase;
  margin-left: 16px;
}

.accordion.list-accordion-bio .accordion-header .accordion-btn::before {
  content: "\f63b";
  font-family: bootstrap-icons !important;
}

.accordion.list-accordion-bio .accordion-header .accordion-btn.collapsed::before {
  content: "\f4fe";
  font-family: bootstrap-icons !important;
}

.accordion.list-accordion-bio .accordion-header .accordion-btn::before {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  margin-top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: center;
  font-weight: bold;
  background-color: var(--bs-white);
  border-radius: 8px;
  color: var(--title);
  opacity: 1;
}

.accordion.list-accordion-bio .accordion-item{border: 0;background: var(--primary-light);margin-bottom: 16px;}


.ac-btn-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  margin-right: 8px;
}

.drag-drop {margin-right: 8px;cursor: pointer;}
.msl-auto{ margin-left: auto;}

.ac-remove {
  font-size: 12px;
  font-weight: bold;
  color: #EA2E2E;
  display: flex;
  align-items: center;
}
.ac-remove:hover{
  color: #EA2E2E;
}

.list-accordion-bio .accordion-body {
  padding: 16px;
}

.control-field.panel-column .form-control,
.control-field.panel-column .form-select {
  background-color: var(--bs-white);
  border-color: var(--bs-white);
  box-shadow: none;
  color: var(--title);
  font-weight: 500;
}


.control-field.panel-column .form-control::-ms-input-placeholder { color: var(--title); opacity: 1; font-weight: 500;}
.control-field.panel-column .form-control::placeholder { color: var(--title); opacity: 1; font-weight: 500}


.btn.button-upload.w-100 {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
}

.btn.btn-add-link{ background-color: #e5dbeb; color: var(--primary-color);}
.btn.btn-add-remove{background-color: rgba(234, 46, 46, 15%);color: #EA2E2E;}

.btn.btn-add-link, .btn.btn-add-remove {
  font-size: 12px;
  font-weight: bold;
  min-width: 110px;
}

.title-group-list-item.title-w-auto .btn {
  width: 189px;
}

.form-check.form-check-inline.checkbox-container:not(:last-child){ margin-right: 24px;}
.form-check.form-check-inline.checkbox-container .form-check-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--paragraph);
}

.cardframe {
  position: relative;
  padding-left: 80px;
}

.cardframe:before {
  position: absolute;
  content: "";
  left: 0;
  width: 1px;
  height: 100%;
  background: #F2EEF8;
}

.mobilebox {
  width: 370px;
  height: 750px;
  position: relative;
  padding: 10px;
  margin: 0 auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
}

.preview-heading {
  font-size: 20px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 15px;
}


.step-one { padding: 38px 34px;text-align: center;}
.step-one h4 {font-size: 20px;font-weight: bold;margin-bottom: 5px;}
.step-one p{font-size: 12px;color: var(--title);font-weight: 500;margin-bottom: 8px;}
.step-one p span {font-size: 14px;color: var(--paragraph);}

.banner-bio {
  border-top-left-radius: 71px;
  border-top-right-radius: 71px;
  overflow: hidden;
  padding: 5px;
  padding-bottom: 0px;
  height: 90px;
}

.bio-user-profile {
  text-align: center;
}

.bio-user-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: -38px;
}

.profile-info h2 {font-size: 20px;font-weight: bold;color: #03463A;margin-bottom: 5px;}
.profile-info {text-align: center;padding: 15px  20px;max-height: 578px;overflow-y: auto;overflow-x: hidden;}
.profile-title {font-size: 14px;font-weight: 500;color: #457754;margin-bottom: 8px;}
.profile-info p {
  font-size: 12px;
  font-weight: 500;
  color: #03463A;
}

.btn-social {
  position: relative;
  padding: 8px 18px;
  overflow: hidden;
  box-shadow: none !important;
  display: block;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  width: 100%;
  background-color: #03463A;
  border: 0;
  transition: all 500ms ease;
}
.btn-social:hover{background: #02241e;color: var(--bs-white);}

.social-links li{ margin-bottom: 16px;}

.column-l { max-width: 600px;padding-right: 24px;}
.steps-left { height: 100%; display: flex; flex-direction: column;}
.pagination{ margin-top: auto;}
.ms-auto .ac-remove { padding-bottom: 5px;}

.fc .fc-button .fc-icon {vertical-align: -2px !important;}
.fc .fc-button-primary:focus {box-shadow: none !important;}


.top-bar-lower-deck .btn .icon-text {margin-left: 8px;}
.top-bar-lower-deck .btn img {margin-left: 8px;}

.top-bar-left-section .btn{ border-radius: 0px;}
.top-bar-left-section .btn .icon-text {margin-left: 8px;}
.top-bar-left-section .btn img {margin-left: 8px;}
.button-undo .btn {border-left: 1px solid #F2EEF8;}
.button-redo .btn {border-right: 1px solid #F2EEF8;}
.auth-button.save-status-btn .btn {min-width: inherit;}

.top-area .settings-tray-editable>div{margin-left: 16px;display: flex; align-items: center;}
.user-img.btn-group .settings-tray-editable .ic-avatar {margin-left: 0;}
.auth-button .btn .icon-text { margin-left: 8px;}
@media screen and (max-width: 767px) {
  .auth-button .btn .icon-text{ display: none;}
  .top-area .settings-tray-editable>div{ margin-left: 5px;}
}


/* Audience page css */
/* Layout shared by the audience card and the empty-state card.
 *
 * These two look identical because the empty states were built by copying the
 * audience card. The copy is deliberate now rather than accidental: both
 * selectors are listed on each layout rule, so the layout has ONE definition
 * instead of two that drift apart.
 *
 * The one thing they do NOT share is below: .card-audience paints its primary
 * button with --secondary-color, because inside that feature the orange and
 * purple pair distinguishes the target audience from the current one. That
 * colour opinion is what made every borrowed empty state render its call to
 * action orange regardless of what the action did, so .ts-empty-state exists
 * precisely to have the layout without it. */
.card.card-audience,
.card.ts-empty-state {padding: 16px;}
.card.card-audience .card-head {
  font-size: 16px;
  font-weight: bold;
  color: var(--title);
}
.audience-img {
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  margin-right: 40px;
}

.card.card-audience .flex-grow-1,
.card.ts-empty-state .flex-grow-1 {max-width: 374px;}
.card.card-audience .flex-grow-1 h5,
.card.ts-empty-state .flex-grow-1 h5 {font-size: 14px;font-weight: bold;color: var(--title);margin-bottom: 10px;}
.card-audience .card-body,
.ts-empty-state .card-body {padding: 32px 0px;}
.card.card-audience .flex-grow-1 p,
.card.ts-empty-state .flex-grow-1 p {margin-bottom: 16px;}
.card-audience .btn.btn-primary img,
.ts-empty-state .btn.btn-primary img { margin-right: 3px;}
/* Button sizing: shared. */
.card-audience .btn.btn-primary,
.ts-empty-state .btn.btn-primary {font-size: 12px; border-radius: 6px; font-weight: bold; min-width: 160px;}
/* Button colour: the audience feature only. This single declaration is the
   whole reason .ts-empty-state had to exist as a separate class. */
.card-audience .btn.btn-primary {background-color: var(--secondary-color); color: var(--bs-white);}

.my-target-audience .btn.btn-primary {background-color: var(--secondary-color);}
/* .my-target-audience .btn.btn-primary:hover{background-color: var(--primary-color);} */

.current-audience .btn.btn-primary {background-color: var(--primary-color);}
.current-audience .btn.btn-primary:hover{ background-color: var(--primary-color);}
.sec-audience-main .card.card-audience:not(:last-child){margin-bottom: 16px;}


.accordion.accordion-audience .accordion-btn {
  background: transparent;
  width: 100%;
  border: 0;
  position: relative;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  padding: 8px 30px 8px 0px;
}


.accordion.accordion-audience .accordion-item{ border: 0;}

.accordion.accordion-audience .accordion-header .accordion-btn::before {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 8px;
  margin-top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  font-weight: bold;
  background-color: var(--primary-light);
  border-radius: 2px;
  color: var(--title);
  opacity: 1;
}

.accordion.accordion-audience .accordion-header .accordion-btn::before {
  content: "\f63b";
  font-family: bootstrap-icons !important;
}

.accordion.accordion-audience .accordion-header .accordion-btn.collapsed::before {
  content: "\f4fe";
  font-family: bootstrap-icons !important;
}


.video-area {
  margin-bottom: 16px;
}
.accordion-audience .accordion-body .accordion-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 6px;
}
.accordion-audience .accordion-body p{ margin-bottom: 10px; line-height: 18px; font-size: 12px;}

.accordion-audience .dropdown-divider {
  margin-bottom: 20px;
  margin-top: 0;
}

.timeline li{position: relative;padding-left: 80px;padding-bottom: 32px;}
.timeline li:last-child{ padding-bottom: 0;}
.timeline li:last-child .timeline-marker{ display: none;}
.timeline-icon {
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  background: var(--primary-light);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  left: 0;
  position: absolute;
  z-index: 1;
}

.timeline li:hover .timeline-icon { background-color: var(--primary-color); color: var(--bs-white);}

.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}
.timeline-marker:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  height: 100%;
  border-left: dashed 1px rgb(103 44 114 / 30%);
}

.timeline-content label {
    font-size: 12px;
    font-weight: bold;
    display: block;
    color: var(--title);
}

.body-text {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.audience-sidebar {
  flex: 0 0 222px;
  width: 222px;
  max-width: 100%;
}
.author-content {
  flex: 1;
  padding-left: 8px;
}

.profile-author-thumb{ margin-bottom: 16px;}
.profile-author {background: #f9f9fa;padding: 15px;border-radius: 8px;margin-bottom: 8px;}
.profile-author-thumb img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgb(242 100 25 / 5%);
}

.profile-menu {
  font-size: 12px;
  line-height: normal;
  margin-bottom: 10px;
  border-radius: 6px;
}

.profile-menu:last-child{ margin-bottom: 0px;}
.profile-menu .fw-bold{ font-weight: bold !important; color: var(--title);}

.profile-setting .btn{ margin-bottom: 8px;}
.btn.btn-fill { font-size: 12px;font-weight: bold;}
.btn.btn-fill img{ margin-right: 4px;}

.btn.btn-fill.button-edit { background: #f8f5f8; color: var(--primary-color);}
.btn.btn-fill.button-edit::before{ border: 3px solid transparent}

.btn.btn-fill.button-view { background: #fef7f3; color: var(--secondary-color);}
.btn.btn-fill.button-view::before{ border: 3px solid transparent}

.btn.btn-fill.button-delete{ background: #fef5f5; color: #EA2E2E;}
.btn.btn-fill.button-delete::before{ border: 3px solid transparent}

.btn.btn-fill.button-convert { background: #f8f5f8; color: var(--primary-color);}
.btn.btn-fill.button-convert::before{ border: 3px solid transparent}



/* .btn.btn-fill.button-convert{ background-color: var(--primary-color); color: var(--bs-white);} */

.feature-topics {background: rgba(133, 139, 152, 5%);border-radius: 8px;padding: 15px;}
.feature-topics:not(:last-child){ margin-bottom: 10px;}
.feature-topics label { font-size: 13px; font-weight: bold; color: var(--title); flex: 0 0 115px;  max-width: 115px;}
.contentlead { font-size: 12px;padding-left: 10px;}

.accordion-profile-area .accordion-item{padding: 16px; border-radius: 12px;}
.accordion-profile-area .accordion-item:not(:last-child){ margin-bottom: 16px;}

.profile-author ul li a {color: var(--paragraph);font-size: 14px;font-weight: 500; cursor: pointer !important;
  padding: 5px 10px;
  border-radius: 4px;
}

.profile-author ul li a.active{ background-color: var(--primary-color); color: var(--bs-white); font-weight: bold;}
.profile-author ul li a:hover { background-color: var(--primary-color); color: #fff; }
.profile-author ul li a.active:hover { background: var(--primary-color); color: #fff;}
.profile-author ul li:not(:last-child) {margin-bottom: 8px;}

.modal-title {font-size: 16px;font-weight: bold;color: var(--title);}

.modal-create-audience-avatar .modal-dialog {max-width: 600px;}
.form-label.fw-normal {
  color: var(--paragraph);
  font-size: 13px;
  font-weight: 500 !important;
}

.control-field.control-bold .form-control,
.control-field.control-bold .form-select{ color: var(--title); font-weight: bold;}

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

.control-field.control-bold .form-control::-ms-input-placeholder { color: var(--title); opacity: 1; font-weight: bold;}
.control-field.control-bold .form-control::placeholder { color: var(--title); opacity: 1; font-weight: bold}

.form-create-audience-avatar .control-field .form-control:focus {
  border-color: var(--primary-color);
}

.add-item {font-size: 12px;font-weight: bold; color: var(--secondary-color);}
.add-item img{ margin-right: 2px;}
.add-item:hover{color: var(--primary-color);}


.control-field.control-field-normal .form-select {font-weight: 500;color: #B1B7C5;text-transform: capitalize;}
.btn-create-avatar img{ margin-right: 3px;}
.modal-create-audience-avatar .modal-footer {padding: 24px;}

.top-tag-list ul{ margin-bottom: -4px;}
.top-tag-list ul li{ margin-bottom: 4px; margin-right: 4px;}
.top-tag-list .tags {
  font-size: 12px;
  color: var(--title);
  font-weight: 500;
  border-radius: 6px;
  background-color: var(--primary-light);
  display: block;
  padding: 5px 13px;
}
.top-tag-list .tags:hover{ background-color: var(--primary-color); color: var(--bs-white);}
.pd-16 {
  padding: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 5px;
}

.field-group .form-label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
}


.form-group.field-group {
  margin-bottom: 10px;
}

.form-group.field-group .form-control,
.form-group.field-group .form-select {
  font-size: 12px;
  font-weight: 500;
  color: #313234;
  height: 32px;
  border-radius: 6px;
  box-shadow: none;
  /* Same defect as .control-field above: the border was the fill's own value,
     so the field had no edge against the surface behind it. */
  border-color: var(--ts-border-control, #6f6786);
  background-color: #F2EEF8;
}

.form-control.search-field {
  background-image: url(../images/icon-search.svg);
  background-repeat: no-repeat;
  background-position: center left 16px;
  padding-left: 40px;
}

.form-group.field-group .form-select{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='gray' opacity='0.5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.form-group.field-group .form-control:focus{ box-shadow: none;}
.form-group.field-group em {
  font-size: 11px;
  font-weight: 500;
}

.form-group.field-group .form-control::placeholder {color:#B1B7C5;opacity: 1;}
.form-group.field-group .form-control::-ms-input-placeholder {color:#B1B7C5;}

.accordion.accordion-advance-filters .accordion-btn{ font-size: 12px; color: var(--secondary-color);}

/* #c2410c is 5.18:1 on white and only 4.38:1 on this peach tint, so the same
   ink that passes everywhere else fails here. Measured live on the notes page,
   "Open Video in YouTube". #b23c0b restores it to 5.01 without changing the
   colour anyone perceives.

   This is the second time this exact pair has needed it: .ac-save-button had
   the identical 4.38 on the identical tint. The lesson is not about the value,
   it is that an ink checked against WHITE is not checked. A tinted button
   background is a different surface and has to be measured on its own. */
.btn.btn-fill.btn-orange { background: #fde8dc;color: #b23c0b;}
.btn.btn-fill.btn-orange::before{border: 3px solid transparent;}

.card-generate-ai-script .btn.btn-fill {max-width: 160px;}
.card-generate-ai-script p {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
}
.card-generate-ai-script p strong{ color: var(--title);}
.btn.btn-shuffle-results {
  background-color: rgb(103 44 114 / 10%);
  color: var(--primary-color);
}

.tophead {margin-bottom: 10px;}

.card-shuffle-results .card{ margin-bottom: 16px; padding-top: 40px;}

.column-col-3 {flex: 0 0 276px;max-width: 276px;}
.column-col-9 {flex: 1;padding-left: 16px;}

.card-title-filters .checkbox-container { margin-top: 13px;}
.card-title-filters .form-check.form-check-inline.checkbox-container .form-check-label{ font-size: 12px; font-weight: bold; color: var(--title);}
.card-title-filters .checkbox-container .form-check-input:checked {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}


.notes-list li:not(:last-child){margin-bottom: 12px;}
.notes-list .text-note { font-size: 13px;font-weight: 500;color: var(--title);}
.notes-list .text-time{ font-size: 12px; font-weight: 500;}
.card-notes-chapters .card-body {padding: 10px;}

.sec-seemore a{ font-size: 12px; font-weight: bold; color: var(--secondary-color);}
.sec-seemore a:hover{ color: var(--primary-color);}

.btn.btn-fill.btn-export-chapters {
  background: #eae0eb;
  color: var(--primary-color);
}

.btn.btn-fill.btn-export-chapters::before{ border:3px solid transparent}

.btn.btn-fill.btn-remove{ background:#fce0e0; color: #EA2E2E;}
.btn.btn-fill.btn-remove::before{ border:3px solid transparent}

.btn.btn-fill.go-to-youtube{ color: var(--secondary-color);}

.card-notes-chapters .card-footer li:not(:last-child){ margin-right: 16px;}

.upload-info{ font-size: 12px; font-weight: 500; color: var(--paragraph);}
.upload-info img{ margin-right: 5px;}
.upload-info:hover{ color: var(--primary-color);}

.btn-add-url img{ margin-right: 5px;}

.ac-edit-button{ font-size: 14px; font-weight: 500; color: var(--primary-color);
  white-space: nowrap;}
.ac-edit-button:hover{ color: var(--primary-color);}
.ac-edit-button img{ margin-right: 5px;}


.column-box-full {
  flex: 1;
  padding-right: 16px;
  -webkit-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.column-box-half {flex: 0 0 375px;max-width: 375px;
  -webkit-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.accordion.list-accordion-bio.accordion-my-description .accordion-btn{ width: 23px; height: 23px;}
.accordion.list-accordion-bio.accordion-my-description .accordion-header .accordion-btn::before {
  width: 23px;
  height: 23px;
  font-size: 16px;
  background-color: var(--primary-light);
  border-radius: 2px;
  opacity: 1;
}


.group-col-box span{ position: relative;}
.group-col-box span::before {
  position: absolute;
  content: "";
  width: 1px;
  left: -15px;
  top: 8px;
  height: 21px;
  background-color: #E3E1E4;
}
.form-control.border-r-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.form-control.border-l-0{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.form-smart-description .form-label.fw-normal {
  font-size: 14px;
}

.ac-save-button {
  background:#fde8dd;
  /* Was var(--secondary-color), the brand orange #c2410c, which measures
     4.38:1 on this pale peach fill: just under the 4.5 a label needs, on ten
     buttons on the Smart Text page alone. #b23c0b is the same orange one step
     darker, 5.01:1, which clears it without the button ceasing to read as the
     secondary role. The fill is unchanged, so nothing else about the button
     moves. */
  color: #b23c0b;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
}
.ac-save-button::before{ border: 3px solid transparent;}
.ac-save-button:hover{ color:var(--secondary-color)}
.ac-save-button img {
  margin-right: 5px;
}

.card.card-sidebar-audience.card-smart-discraption {
  margin-bottom: 16px;
}

.card-form-description .form-label {margin-bottom: 2px;}
.card-form-description {border: 1px solid #F2EEF8;padding: 8px 16px;}
.card-form-description:not(:last-child){ margin-bottom: 10px;}
.card-form-description li:not(:last-child){margin-bottom: 2px;}
.card-form-description .link-text {
  font-size: 13px;
  font-weight: bold;
  color: var(--title);
}

.modal-footer .btn.modalsave {
  font-size: 14px;
  max-width: 165px;
}

.modalsave img{ margin-right: 5px;}

.modal-customize-smart-text .modal-xl {max-width: 1205px;}


.modal-customize-area .control-field .form-control,
.modal-customize-area .control-field .form-select {
  background-color: var(--bs-white);
}

.modal-customize-area .card { background: var(--primary-light);}
.modal-customize-area .accordion-item{ background-color:transparent;}
.modal-customize-area .card-form-description {border: 1px solid #B1B7C5;}

.accordion-my-description .accordion-item {
  border-radius: 8px;
}

/* ************************************************* */

.my-promo-page {
  padding: 16px;
}


.inner-button span {
  font-size: 12px;
  font-weight: 500;
  color: var(--paragraph);
  padding-left: 4px;
}

.my-promo-page .video-box {
  border: 2px solid #EAE2F4;
  border-radius: 8px;
  margin-bottom: 11px;
  background-color: var(--primary-light);
  min-height: 150px;
  padding-top: 51%;
  background-image: url(../images/authore-full-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.bio-card-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
  margin-top: 4px;
}
.bio-card-status--published {
  background: #e6f4ea;
  color: #1e7e34;
}
.bio-card-status--draft {
  background: #fff3e0;
  color: #e65100;
}
.my-promo-page .video-box.has-image {
  background-image: none;
  background-color: #fff;
}
.my-promo-page .video-box img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  object-fit: cover;
  border-radius: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inner-button a {
  display: flex;
  align-items: center;
}

.custom-table th {
  font-size: 14px;
  line-height: 16px;
  color: var(--paragraph);
  font-weight: 500;
  border: none;
  white-space: nowrap;
  padding: 15px 15px 15px 24px;
  background-color: var(--primary-light);
}

.custom-table td {
  font-size: 14px;
  line-height: 16px;
  color: var(--paragraph);
  font-weight: 500;
  border: none;
  padding: 15px 15px 15px 24px;
}

.custom-table td p {
  margin: 0px;
}


.custom-table td a {
  color: var(--paragraph);
  display: flex;
  align-items: center;
}

.custom-table td a img {
  margin-right: 5px;
}

.table-custom-main {
  border: 1px solid #EAE2F4;
  background: #fff;
  padding: 0px;
  border-radius: 8px;
  overflow: hidden;
}

.icon-normal {display: inline-block;}
.icon-hover {display: none;}

.extra-table .table-hover>tbody>tr:hover td {
  --bs-table-accent-bg: var(--primary-light);
  color: var(--title);
}

.table-wrap {margin-bottom: 16px;}

.extra-table {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}

.table-wrap h4 {
  font-size: 14px;
  line-height: 16px;
  color: var(--title);
  font-weight: bold;

}

.export-btn {
  display: flex;
  align-items: center;
  background: var(--secondary-color);
  padding: 10px 18px;
  line-height: 14px;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.export-btn::before{border: var(--secondary-color) solid 3px;}


.export-btn img{ margin-right: 5px;}

.script-card-box .js-form-item {margin-bottom: 10px;}

.export-btn:hover {
  /* background: var(--primary-color); */
  color: #fff;
}

.my-promo-page h4 {
  margin-bottom: 6px;
}

.extra-table .table-hover>tbody>tr:hover .del-btn span {
  color: var(--secondary-color);
}

.head-text {
  font-size: 14px;
  font-weight: bold;
  color: #222222;
  padding: 16px 0 0 0;
}



.dollar-rup {
  font-weight: 700;
  color: var(--title);
}

.coupon-btn a {
  display: inline-block;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-color);
  background-color: rgb(242 100 25 / 10%);
  border-radius: 6px;
}

.coupon-btn span {
  padding-left: 8px;
}

.margin-total {
  padding: 12px 0 0;
}

.custom-checkout-page .border-top {
  border-top: 1px solid #F2EEF8 !important;
  margin: 17px 0;
}

.plus-monthly-text p {
  margin: 0;
  font-weight: 500;

}

.extra-margin {
  padding: 17px 0 0;
}

.dollar-rup p {
  margin: 0;
}

.checkout-form .control-field {
  margin-bottom: 16px !important;
  margin-top: 8px;
}

.custom-select {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--paragraph) !important;
}

.custom-check-box .form-check.checkbox-container {
  margin: 34px 0 0;
}

.payment-btn .btn-primary {
  font-size: 14px !important;
}

.payment-btn img {
  margin-right: 8px !important;
}


.checkout-form .form-label {
  margin-bottom: 8px;
}

.custom-ul-li-plus li {
  padding: 20px 0 0px 17px;
  position: relative;
}

.custom-ul-li-plus li img {
  position: absolute;
  left: 0;
  top: 21px;
}



.custom-ul-li-plus li span {
  margin-left: 7px;
  font-weight: 500;
}

.inner-text-creator {
  padding: 0px 16px;
}

.creator-section {
  padding: 16px 0 0;
}

.inner-image-nick {
  flex: 0 0 120px;
}

.inner-text-creator p {
  font-size: 14px;
  line-height: 22px;
  color: var(--title);
  font-weight: 500;
  padding: 8px 0 0;
}

.card-field .form-control {
  padding-left: 16px;
}

.payment-btn .btn-primary {
  background-color: var(--primary-color) !important;
}


.nick-text {
  font-size: 12px;
  font-weight: 500;
}

.payment-btn .btn.btn-primary {
  min-width: 200px;
}

.payment-btn {
  min-width: 200px;
}

.payment-btn .btn.btn-primary:hover {
  background: #481e4d !important;
}

/* checkout2-css */

.country-name {
  font-weight: 700 !important;
  color: var(--title) !important;
}

.payment-filed .form-control {
  padding-left: 50px;
}

.nick-para {
  padding-top: 6px;
}

.inner-image-nick img {
  width: 120px;
  height: 120px;
  display: block;
  background-color: #ddd;
  overflow: hidden;
  border-radius: 15px;
}

.payment-credit-card {
  position: absolute;
  top: 35px;
  left: 30px;
}

.coupon-btn a:hover {
  background-color: rgb(242 100 25 / 35%);
  color: #F26419;
}

.paypal-field .form-control {
  padding-left: 50px;
}

.payment-filed {
  position: relative;
}

.paypal-field {
  position: relative;
}

.paypal-image {
  position: absolute;
  left: 30px;
  top: 28px;
}

.master-card {
  position: absolute;
  right: 35px;
  top: 35px;
}

.card-field {
  position: relative;
}

.checkout2-form .form-control:focus {
  border: 1px solid var(--primary-color);
  background: #fff;
  color: #000 !important;
  font-weight: 700 !important;
}

.checkout3-page .img-box {
  margin: 45px;
}

/* checkout-3-page */
.checkout3-page {
  width: 770px;
  margin: 50px auto;
  max-width: 100%;
  padding: 0;
}


.congrats-heading {
  padding: 0px 116px 40px;
}

.congrats-heading p {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

.congrats-heading h4 {
  font-size: 28px;
  line-height: 34px;
  margin-bottom: 16px;
}



.audience-col-3 {
  flex: 0 0 438px;
  max-width: 438px;
}

.audience-col-9 {
  flex: 1;
  padding-right: 16px;
}



.welcome-para p {
  font-size: 14px !important;
  line-height: 30px;
}

.extra-border {
  padding: 0;
}

.description-gap {
  gap: 35px;
}

.decription-box:hover {
  border-color: var(--primary-color);
  box-shadow: 0px 4px 20px rgba(50, 13, 55, 0.3);
}

.description-edit-change span {
  color: var(--primary-color);
}

.description-delete-change span {
  color: var(--secondary-color);
}

.button-wrappper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customization-btn {
  background: rgb(103 44 114 / 10%);
  border-radius: 6px;
  color: var(--primary-color) !important;
  max-width: 115px;
  padding: 8px 10px;
}
.customization-btn::before{ border: 3px solid transparent;}

.desc-single-page-wrap .card-audience {
  padding: 24px;
}

.customization-text-btn .btn-primary {
  background: var(--secondary-color) !important;
}

.check-box-custom .checkbox-container {
  margin-top: 5px !important;
}


.check-box-custom .form-label {
  padding: 8px 0 0 0;
}

.textarea-custom {
  height: 300px !important;
  resize: none;
  padding: 16px !important;
}



.text-form p {
  font-size: 12px;
  font-weight: 500;
}


.decription-box {
  border: 1px solid #fff;
  transition: all 500ms ease;
}

.card-how-it-work-head {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  overflow: visible;
  padding: 0px 0 16px;
}

.control-field.heading-super.m-0 {margin-bottom: 0px !important;}

.desc-single-page-wrap .control-field .form-select {
  font-size: 13px;
  font-weight: 500;
  padding: 11px 40px 11px 10px;
}


.desc-single-page-wrap .card-head {
  margin-bottom: 10px;
}

.checkout-form-footer .btn{ min-width: 120px !important;}


div#block-tubespanner-purple-mainpagecontent .views-element-container.mb-3 {
  margin-bottom: 0px !important;
}


.inner-text-creator {
  display: flex;
  flex-direction: column;
}

.inner-text-creator img {
  width: 24px;
  margin-bottom: 5px;
}


.login-register-sec .card.card-audience.row.align-items-center {
  margin: 0;
  max-width: 400px;
  margin: auto;
}

.login-register-sec .control-field {margin-bottom: 15px;}
.login-register-sec .seperator {
  text-align: center;
  margin: 40px 0px 0px 0px;
  border-top: 1px solid #ccc;
}
.login-register-sec .seperator b {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  display: inline-block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  position: relative;
  top: -22px;
  z-index: 1;
}

.login-register-sec .card-audience .btn.btn-primary { font-size: 14px; background-color: var(--primary-color); display: block; width: 100%;}

/* .login-register-sec .card-audience .btn.btn-primary:hover{ background-color: #481e4d} */

.login-register-sec .card.card-audience .col-md-6 { width: 100%; padding: 0px;}


.login-register-sec .sec-audience-main {
  max-width: 1100px;
  margin: auto;
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  margin-top: 70px;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.login-register-sec .sec-audience-main .audience-col-9 {padding-right: 0;}
.login-register-sec .sec-audience-main .audience-col-3 {
  border-left: 8px solid var(--primary-color);
  flex: 0 0 500px;
  max-width: 500px;
}


.login-register-sec .auth-link__text {color: #2C2C2C;
  font-weight: 500;
  padding: 12px;
  text-align: center;
  display: block;
  width: 100%;
}

.login-register-sec .google-login-wrapper a {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  align-items: center;
}

.login-register-sec .google-login-wrapper a img {
  vertical-align: middle;
  border-right: 1px solid #cccccc;
  width: 50px;
  height: 50px;
  padding: 10px;
}



.add-text-white {
  color: #fff;
}
.form-create-audience-avatar .js-form-type-vertical-tabs{
  display: none;
}


.sec-channel-obj .form-label {color: var(--paragraph);font-weight: 500;display: flex;
justify-content: space-between;}
.sec-channel-obj .control-field .form-label .text-end {padding-left: 10px;}
.sec-channel-obj [class*='col-'] {margin-bottom: 20px;}
.sec-channel-obj .row.js-form-wrapper.form-wrapper.mb-3 { margin-bottom: 0px !important;}
.sec-channel-obj .text-align-center.mt-5 {margin-top: 20px !important;}

.card.card-audience.sec-channel-obj .btn.btn-primary {
  font-size: 14px;
  background-color: var(--primary-color);
}
.card.card-audience.sec-channel-obj .btn.btn-primary:hover{ background-color: #481e4d;}

.alert-success button.close {
  position: absolute;
  right: -5px;
  top: -8px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background-color: #fff;
  width: 30px;
  height: 30px;
  color: var(--primary-color);
  padding: 0px;
  display: none;
  font-size: 19px;
  box-shadow: none;
  font-weight: 500;
}

.alert-success h2 {
  font-size: 18px;
  font-weight: bold;
  display: none;
  margin-bottom: 5px;
}
.alert-success p {
  margin-bottom: 0px;
}


/* Subscription page — TS-5066: mirrors the browser extension "Uses & limit"
   screen. Three groups (metered / unlimited / included) rendered as a
   two-column feature grid. Replaces the TS-4376 nudge + comparison layout. */

.subscription-page > * + * { margin-top: 16px; }

.subscription-header.card.card-audience {
  display: flex;
  /* Bootstrap's .card sets flex-direction: column; force row so the plan
     label sits left and the CTA right rather than stacking centred. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
}
.subscription-header__plan { font-size: 15px; color: var(--paragraph); }
.subscription-header__plan strong { color: var(--title); }
.subscription-header__cta { font-size: 13px; white-space: nowrap; }

/* Two-column feature grid, like the extension. Collapses to one column on
   narrow viewports so labels + counts never wrap awkwardly. */
/* Three columns fill the wide CMS dashboard; step down to two then one so
   labels + counts never crowd on narrower viewports. */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 18px;
}
@media (max-width: 1100px) {
  .usage-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .usage-grid { grid-template-columns: 1fr; }
}

.usage-item { min-width: 0; }
.usage-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
}
.usage-item__label {
  color: var(--title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Metered rows echo the extension: purple label, coloured count. */
.usage-item--metered .usage-item__label { color: var(--primary-color); }
.usage-item__meta {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--paragraph);
}
.usage-item--metered .usage-item__meta { color: #2bc485; font-weight: 600; }
.usage-item--metered .usage-item__meta b { font-weight: 700; }
.usage-item--over .usage-item__meta { color: #d63b3b; }

/* Thin usage bar under metered rows. */
.usage-bar.progress {
  height: 5px;
  margin-top: 6px;
  background: var(--primary-light);
  border-radius: 3px;
  overflow: hidden;
}
.usage-bar__fill.progress-bar {
  height: 100%;
  border-radius: 3px;
  min-width: 4px;
}
.usage-bar__fill--ok.progress-bar { background: #2bc485; }
.usage-bar__fill--over.progress-bar { background: #d63b3b; }

/* Per-row "Upgrade to unlock" link, shown under features the current tier
   does not include (locked counters + not-granted Booleans). Sits where the
   usage bar would be so locked rows keep the same rhythm as their neighbours. */
.usage-item__unlock { margin-top: 6px; font-size: 12px; line-height: 1.2; }
.usage-item__unlock a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.usage-item__unlock a:hover { text-decoration: underline; }

/* Included-features section header carries the granted count (". N"). */
.subscription-included__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.subscription-included__count { color: var(--paragraph); font-weight: 600; }

/* Per-feature pills. Base sets shape; modifiers set colour. */
.subscription-feature__pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.subscription-feature__pill--included {
  background-color: #e7f7ef;
  color: #1b8a55;
}
.subscription-feature__pill--unlimited {
  background-color: var(--primary-light);
  color: var(--primary-color);
}
.subscription-feature__pill--locked {
  background-color: #f3f0f5;
  color: #6b6478;
}

/* Plan manifest table (TS-5066). Zebra striping + a two-column measure keep
   long feature lists readable and stop the allowance value drifting off into
   empty space on wide screens. */
.subscription-manifest__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
  table-layout: fixed;
}
.subscription-manifest__table th,
.subscription-manifest__table td {
  padding: 9px 14px;
  vertical-align: middle;
}
/* Three columns spread across the full width: feature left, Used centred,
   Allowance right. The middle column soaks up the space that used to sit
   empty between the label and its value. */
.subscription-manifest__table th:nth-child(1),
.subscription-manifest__table td:nth-child(1) { text-align: left; }
.subscription-manifest__table th:nth-child(2),
.subscription-manifest__table td:nth-child(2) {
  width: 26%;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.subscription-manifest__table th:nth-child(3),
.subscription-manifest__table td:nth-child(3) {
  width: 26%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.subscription-manifest__table thead th {
  font-weight: bold;
  color: var(--title);
  border-bottom: 2px solid var(--primary-light);
}
.subscription-manifest__table tbody td {
  color: var(--paragraph);
  border-bottom: 1px solid #f4f1f8;
}
.subscription-manifest__table tbody td:first-child {
  color: var(--title);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Zebra striping for row tracking across the width. */
.subscription-manifest__table tbody tr:nth-child(even) td { background-color: #faf9fc; }
.subscription-manifest__table tbody tr:hover td { background-color: var(--primary-light); }
/* At-the-cap / over-limit rows get the same accent as their usage bars above. */
.subscription-manifest__row--maxed td:first-child { font-weight: 600; color: var(--primary-color); }
.subscription-manifest__row--over td:first-child { font-weight: 600; color: #d63b3b; }
.subscription-manifest__unlock a { color: var(--primary-color); text-decoration: underline; font-weight: 600; }
.subscription-manifest__unlock a:hover { text-decoration: none; }

/* Phones: a three-column table can't hold values like "Upgrade to unlock" in
   a ~80px cell (they break mid-word around 320px). Stack each row into
   full-width label/value lines so the text wraps naturally. */
@media (max-width: 575px) {
  .subscription-manifest__table,
  .subscription-manifest__table tbody,
  .subscription-manifest__table tr,
  .subscription-manifest__table td {
    display: block;
    width: auto;
  }
  .subscription-manifest__table thead { display: none; }
  .subscription-manifest__table tr {
    padding: 10px 0;
    border-bottom: 1px solid #f0edf6;
  }
  .subscription-manifest__table td {
    border-bottom: 0;
    padding: 1px 14px;
    text-align: left;
    font-size: 12px;
  }
  .subscription-manifest__table td:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--title);
    margin-bottom: 3px;
    overflow: visible;
    white-space: normal;
  }
  /* Label the value cells since the header row is hidden. */
  .subscription-manifest__table td:nth-child(2)::before { content: 'Used: '; color: var(--paragraph); }
  .subscription-manifest__table td:nth-child(3)::before { content: 'Allowance: '; color: var(--paragraph); }
  /* Zebra + hover read oddly once cells are stacked; drop them on mobile. */
  .subscription-manifest__table tbody tr:nth-child(even) td { background: transparent; }
  .subscription-manifest__table tbody tr:hover td { background: transparent; }
}

/* end subscription page */

/* custom style.css responive*/


.dashboard-header .search-area .mb-3 {margin-bottom: 0px !important;}
.dashboard-header .search-area input.form-autocomplete {background-position: center right 10px;margin-top: 0px;}


/*Global Modal popup css start */
ul#ui-id-1 { border: 1px solid #ddd; border-radius: 5px;}
.search-api-autocomplete-search .ui-menu-item:hover { background: #eee !important;}

body .ui-state-active, .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active,
body a.ui-button:active,
body .ui-button:active,
body .ui-button.ui-state-active:hover {
    border: 1px solid #ddd !important;
    background: #ddd !important;
}


.ui-widget-header { background: transparent; border: 0; font-size: 16px; font-weight: bold;
    color: var(--title);
}

.ui-dialog .ui-dialog-titlebar {padding: 24px;padding-bottom: 0px;}
.ui-dialog .ui-dialog-content {padding: 24px;}

.create-script-popup .form-check.form-check-inline.checkbox-container:not(:last-child) {
    margin: 0px;
    padding: 0px;
}

.script-modal .create-script-popup .advanced-btn {
    font-size: 14px;
    font-weight: bold;
    color: var(--title);
    margin: 0;
    margin-bottom: 5px;
}

div.ui-widget.ui-widget-content {
    border: 1px solid #fff;
    border-radius: 16px;
    width: 600px !important;
    max-width: 100%;
    padding: 0px;
}

.ui-dialog .ui-dialog-titlebar-close {
    border: 1px solid #ddd;
    background: #f2f3f4;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.ui-dialog .ui-dialog-titlebar-close:before {
    position: absolute;
    content: "\f659" !important;
    font-family: bootstrap-icons !important;
    top: -1px;
    left: 0;
    right: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--paragraph, #6b6880);
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 24px;
    margin: 0;
}
.ui-widget-content {color: var(--paragraph, #6b6880);}


.js-form-item.form-item.js-form-type-checkbox {/* padding: 0px 10px; */display: flex;}
.js-form-item.form-item.js-form-type-checkbox input {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px;
    cursor: pointer;
    padding: 0;
    margin-top: 2px;
}

.js-form-item.form-item.js-form-type-checkbox .form-label {
    margin: 0 !important;
    cursor: pointer;
    color: var(--paragraph);
    font-weight: 500;
}

.js-form-item.form-item.js-form-type-checkbox input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.form-actions.js-form-wrapper.form-wrapper {
    text-align: center;
    margin: 0px !important;
}

.js-form-item.form-item.js-form-type-checkbox.form-item-field-saved-audience-value.js-form-item-field-saved-audience-value.form-group.control-field {
    padding: 0px 15px;
}

/* Soial bio page */
.nav.nav-social-bio{ margin-bottom: 30px;}
.nav.nav-social-bio::before{ bottom: -12px;}
.mobilebox iframe { border-radius: 70px;}
.card.card-social-bio .form-actions.js-form-wrapper.form-wrapper {
    justify-content: space-between;
    display: flex;
    margin-top: 50px !important;
}
#drupal-off-canvas button.color_field_widget_box__square, .color_field_widget_box__square, #drupal-off-canvas button.color_field_widget_box__square--transparent, .color_field_widget_box__square--transparent {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: none;
    background-position: center center;
    background-size: 16px;
}

#drupal-off-canvas button.color_field_widget_box__square, .color_field_widget_box__square {margin-right: 16px;}

button.color_field_widget_box__square.active {
    border-color: red;
}
.control-field .form-control.form-text, .control-field .form-select.form-text { margin-top: 0px;}
.ck.ck-editor__editable_inline {min-height: 150px;}

.field--widget-entity-reference-paragraphs .paragraph-toggle{ display: none;}
.tabledrag-toggle-weight-wrapper {display: none;}

.field--widget-entity-reference-paragraphs tr {
    border: 0;
    border-bottom: 16px solid #fff;
    background-color: var(--primary-light);
}

.js .field--widget-entity-reference-paragraphs .field-multiple-table {width: 100%;}
.js .field--widget-entity-reference-paragraphs .field-multiple-table .tabledrag-hide {display: none;}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 {
    margin-bottom: 0px !important;
}

.js .paragraph-type-top {
    padding: 0px 40px 0px 0px;
    align-items: center;
    min-height: 42px;
    position: relative;
}

.js .field--widget-entity-reference-paragraphs .field-multiple-drag {
    position: relative;
    padding: 0px 5px;
    width: 25px;
    vertical-align: middle;
}


.field--widget-entity-reference-paragraphs tr.expanded .field-multiple-drag {
    vertical-align: top;
}

.field--widget-entity-reference-paragraphs tr.expanded .field-multiple-drag .tabledrag-handle {
    margin-top: 15px;
}



.js .field--widget-entity-reference-paragraphs td {
    padding: 5px;
}


.js .field--widget-entity-reference-paragraphs .draggable .tabledrag-handle {
    display: block !important;
    height: auto !important;
}

.js .field--widget-entity-reference-paragraphs .tabledrag-handle .handle {
    width: 22px !important;
    height: 22px !important;
    margin: 0px;
    background-position: 4px;
}

.touchevents a.tabledrag-handle .handle {
    height: 21px;
    background-position: center center !important;
}

.tabledrag-changed-warning.messages.messages--warning {
    margin-bottom: 14px;
}

div#iframe-wrapper {width: 100%; height: 100%;}
.mobilebox iframe {
    border-radius: 70px;
    width: 100%;
    height: 100%;
}


.paragraphs-dropbutton-wrapper .btn { font-size: 12px; font-weight: bold; color: #EA2E2E; display: flex;
align-items: center; background: transparent; padding: 0px;}

.paragraphs-dropbutton-wrapper .btn:hover {background: transparent;}
.js-form-item.form-item.js-form-type-color input {width: 40px;padding: 3px;border-radius: 3px;}

.js .paragraph-type-title { font-size: 14px;font-weight: bold;color: var(--title);margin-right: 8px; margin-bottom: 0px !important;}

.field-label h4.label {
    font-size: 18px;
    font-weight: 700;
    color: var(--title);
    margin-bottom: 10px;
    background-color: #fff;
    margin: -1px;
    padding: 10px;
}

button.paragraph-item-toggle {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    transform: translate(-50%);
    margin-top: -12px;
    right: -10px;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 0;
    justify-content: center;
    font-weight: bold;
    background-color: var(--bs-white);
    border-radius: 8px;
    color: var(--title);
    opacity: 1;
    border: 0;
}

.field--widget-entity-reference-paragraphs .draggable .paragraph-item-toggle:before {
    content: "\f4fe";
    font-family: bootstrap-icons !important;
    width: 28px;
    height: 28px;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.field--widget-entity-reference-paragraphs .draggable.expanded .paragraph-item-toggle:before {
    content: "\f63b";
    font-family: bootstrap-icons !important;
}

.focal-point-wrapper{ width: 100%;}
.focal-point-preview-link {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: var(--title);
    font-weight: 500;
    margin: 5px 0px;
}
.file.file--mime-image-jpeg.file--image a {
    color: var(--paragraph);
}

.image-widget.js-form-managed-file.form-managed-file .focal-point-wrapper {
    position: static !important;
    height: auto;
    margin-bottom: 10px;
}

.dropbutton-multiple .dropbutton .secondary-action {
    margin-top: 5px;
}

.image-widget.js-form-managed-file.form-managed-file.clearfix .form-control {
    height: 35px;
}

div#edit-body-wrapper textarea#edit-body-0-value {
    margin-bottom: 1rem !important;
}

.control-field .form-required.form-label{ position: relative;}
.control-field .form-required.form-label:before {
    position: absolute;
    content: "*";
    color: #ea2e2e;
    right: -15px;
    font-size: 20px;
}

.form-control.error {border-color: #ea2e2e;}
.ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items { flex-wrap: wrap !important;}
body .mobilebox .loader-modalButton { position: absolute;z-index: 1;}


.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper .dropbutton-toggle button {
    border-top-right-radius: 8px;
    background: var(--primary-color);
    border-bottom-right-radius: 8px;
    border-left: 1px solid #4b1e50;
    height: 41px;
}

.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper .dropbutton-widget {
    width: 100%;
    position: relative;
}

.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-arrow {
    margin-top: 5px;
}

.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper.dropbutton-multiple .btn {
    min-width: 170px;
    width: 100%;
}

.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper .dropbutton-toggle button .dropbutton-arrow {
    color: #fff;
}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 .dropbutton-wrapper .dropbutton-toggle button {
    height: 28px;
}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 .dropbutton-wrapper .dropbutton-toggle button {
    height: 28px;
}

.js .field--widget-entity-reference-paragraphs .dropbutton-wrapper .dropbutton-widget li:first-child .btn {
    z-index: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 .dropbutton-wrapper ul {
    display: flex;
    align-items: center;
}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 .dropbutton-wrapper ul button {
    min-width: inherit;
    padding: 5px;
}

.js .field--widget-entity-reference-paragraphs td .js-form-wrapper.form-wrapper.mb-3 .dropbutton-wrapper ul li {
    margin: 0;
    background-color: transparent;
}

.js .paragraphs-collapsed-description:after {background: transparent !important;}


.paragraphs-subform .control-field .form-control, .paragraphs-subform .control-field .form-select {
    background-color: #fff;
}

nav.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0px;
}

.pager__items.js-pager__items {
    display: inline-flex;
    align-items: center;
    box-shadow: 0px 10px 20px rgba(62, 33, 85, 0.3);
    background: #fff;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    padding: 8px;
}

.pager__items.js-pager__items li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    border-radius: 6px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--paragraph, #6b6880);
    text-decoration: none;
    background-color: #fff;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


li.pager__item.pager__item--previous {
    display: none;
}

li.pager__item.pager__item--next {
    display: none;
}

.pager__items.js-pager__items li.pager__item.is-active a {
    background: var(--primary-color);
    color: #fff;
}

.pager__items.js-pager__items .pager__item.pager__item--first a,
.pager__items.js-pager__items .pager__item.pager__item--last a {font-size: 0;}

.pager__items.js-pager__items .pager__item.pager__item--first a:before,
.pager__items.js-pager__items .pager__item.pager__item--last a:before {
    position: absolute;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    top: 1px;
    left: 0;
    right: 0;
    font-size: 18px;
    bottom: 0;
    width: 32px;
    height: 32px;
    font-family: bootstrap-icons !important;
}

.pager__items.js-pager__items .pager__item.pager__item--first a:before{ content: "\f284";}
.pager__items.js-pager__items .pager__item.pager__item--last a:before{content: "\f285";}

.pager__items.js-pager__items li a:hover {
    background: var(--primary-color);
    color: #fff;
}

nav.pager.pagination-dark .pager__items.js-pager__items {
    background: #3E2155;
}

nav.pager.pagination-dark .pager__items.js-pager__items li a {
    background: transparent;
}

nav.pager.pagination-dark .pager__items.js-pager__items.is-active li a {
    background: var(--primary-color);
}

nav.pager.pagination-dark .pager__items.js-pager__items li.is-active a {
    background: var(--primary-color);
}



.paragraphs-dropbutton-wrapper .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-arrow {
    margin-top: 0 !important;
}




.field--type-boolean.field--name-field-hide-shadow.field--widget-boolean-checkbox.js-form-wrapper.form-wrapper.mb-3 {
    margin-bottom: 10px !important;
}

.ajax-progress.ajax-progress-throbber {
    position: fixed;
    background: rgb(0 0 0 / 50%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
  }

  .ajax-progress-throbber .throbber {
    background-image: url(../images/loader-bg.gif);
    width: 100px;
    height: 100px;
    background-size: cover;
    border-radius: 20px;
    border: 1px solid #dddd;
}


.membershipPage.anonymous .grid-membership-content .views-col.col-1{position: relative;}


@media screen and (max-width: 767px) {
button.paragraph-item-toggle { width: 16px; height: 16px;margin-top: -8px;border-radius: 3px;}
.js .field--widget-entity-reference-paragraphs .draggable .tabledrag-handle{ width: auto !important;}
.field--widget-entity-reference-paragraphs .draggable .paragraph-item-toggle:before{ font-size: 12px;}
.paragraphs-dropbutton-wrapper .btn{ font-size: 10px;}
.js .paragraph-type-title{ font-size: 12px;}
body .mobilebox:after { width: 261px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;}
.js .paragraph-type-top {padding: 0px 30px 0px 0px;}
.card.card-social-bio .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary {padding: 7px 10px;}
}




/* Pricing table css */

.view-memberships.view-display-id-page_1 .grid-membership-content {
    max-width: 1500px;
    margin: auto;
}

.subscription-plans .membershipPage .toggle {
    max-width: 520px;
}

.subscription-plans .membershipPage .pricing-columns.pricing-section {
    width: 100%;
    margin-left: 0;
}
body.subscription-plans .membershipPage .toggler--is-active {
    color: #fff;
    position: relative;
    z-index: 9;
}
.subscription-plans .toggle-main-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscription-plans .membershipPage .toggler {
    width: 50%;
    float: left;
    margin: 0;
}

.subscription-plans .membershipPage label.toggler--is-active {background-color: var(--primary-color);border-radius: 31px;}

.membershipPage .grid-membership-content {
    padding-left: 0;
}


.subscription-plans .view-memberships.view-display-id-page_1 .grid-membership-content .field--name-title {
    color: var(--title);
    text-transform: capitalize;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
}

.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .views-col {
    border: 0 !important;
    border-top: 20px solid var(--title)!important;
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    border-radius: 17px;
}

.subscription-plans .membershipPage .grid-membership-content .views-col.col-1.active{ border-radius: 17px;}

.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .col-1:last-child {
    border-left: 0px solid #edeef2 !important;
    border-right: 0px solid #edeef2 !important;
}

.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .views-col {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 30px;
    position: relative;
}

.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .views-col .your-current-plan {
    font-size: 16px;
    min-height: 44px;
    color: #7d7979;
}

.subscription-plans .membershipPage h3.price {
    color: #000;
    font-size: 35px;
    font-weight: 700;
}

.subscription-plans .register-button {
    width: 100%;
    display: inline-block;
}

body.subscription-plans .subs-table-block.subsc_plans ul, body.subscription-plans ul.subs-lists {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
    text-align: center;
    margin-top: 40px;
}


.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .field--name-field-description.priceDesc{ padding: 15px;}

body.subscription-plans ul.subs-lists li { padding: 20px 10px; color: #000;}

body.subscription-plans ul.subs-lists li:nth-child(odd) {
    background: #f7f7f7f7;
}

.subscription-plans .membershipPage .bestValue {
    left: 0;
    border: 0px;
    background: var(--secondary-color);
}
.subscription-plans .membershipPage .grid-membership-content .views-col.col-1.active{ background-color: #fff;}
.subscription-plans .membershipPage .grid-membership-content .active .field--name-field-description.priceDesc {
    color: #7d7979;
}

.subscription-plans .view-memberships.view-display-id-page_1 .grid-membership-content .active .field--name-title {
    color: var(--title);
}

.subscription-plans .membershipPage .grid-membership-content .active .field--name-field-description.priceDesc {
    background: #fff;
    border: 0;
    color: #7d7979;
}

body.subscription-plans .subscription-plans .view-memberships.view-display-id-page_1 .grid-membership-content .active .dollar-wrapper h3 {
    color: #000;
}


.subs-plus-blocks div#block-subscriptionblocks>div {
    display: flex;
}


.plan-wrapper {
    padding: 40px 0 0;
    background: #fff;
    border-radius: 17px;
    border-top: 20px solid var(--title)!important;
    text-align: center;
    height: 100%;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
}

.subs-plus-blocks {
    max-width: 1000px;
    margin: auto;
}

.subs-plus-blocks [class*=col-] {
    padding: 0px 10px;
}


body.subscription-plans .plan-wrapper .plan-title h2 {
    color: var(--title);
    font-size: 25px;
    text-transform: capitalize;
    font-weight: bold;
}

body.subscription-plans .plan-wrapper .plan-content {
    max-width: 60%;
    margin: 25px auto 25px;
    line-height: 1.4;
    font-size: 14px;
    color: #7d7979;
}

body.subscription-plans .plan-wrapper .plan-price h1 {
    font-size: 35px;
    color: #000;
    font-weight: bold;
}

body.subscription-plans .plan-wrapper .plan-price h1 sup {
    font-size: 18px;
    position: relative;
    top: -10px;
}

body.subscription-plans .plan-wrapper .plan-price h1 sub {
    bottom: -.25em;
}

body.subscription-plans .plan-links.register-button {
    margin: 40px 0;
    min-height: 65px;
}

body.subscription-plans ul.subs-list li {
    padding: 20px 10px;
    color: #000;
}

body.subscription-plans ul.subs-list li:nth-child(odd) {
    background: #f7f7f7f7;
}

body.subscription-plans .plan-links.register-button.free-role {
    display: none;
}


.subscription-plans .membershipPage .register-button .button {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px !important;
}
body.subscription-plans .membershipPage .switch { background-color: var(--primary-color);}


body.subscription-plans {
    background: var(--primary-light);
}

.billed-text {
    color: #7d7979;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

.subscription-plans .membershipPage .active .register-button .button {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}



@media screen and (max-width: 767px) {
.view-memberships.view-display-id-page_1 .grid-membership-content .views-col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;

}
.subscription-plans .membershipPage.view-memberships.view-display-id-page_1 .grid-membership-content .views-col { margin-left: 0;
    margin-right: 0;
}
.subs-plus-blocks div#block-subscriptionblocks>div {display: block;}
.subs-plus-blocks [class*=col-] {padding: 0 0px;}

}

#Scheduled-posts-root td:nth-child(5) .popup-wrapper,
#Scheduled-posts-root td:nth-child(6) .popup-wrapper,
#Scheduled-posts-root td:nth-child(7) .popup-wrapper {
    left: auto;
    right: 0;
}
.content-wrapper {font-size: 10px;font-weight: 500;word-wrap: normal;}
.content-wrapper .title {
    font-size: 10px;
    text-align: left;
    word-break: break-word;
    display: block;
    white-space: normal;
}

#Scheduled-posts-root .fc-daygrid-day-frame .fc-daygrid-day-top .popup-wrapper .start{ text-align: left;}
#Scheduled-posts-root .fc-daygrid-day-frame .fc-daygrid-day-top .popup-wrapper .end {
    text-align: left;
}

#Scheduled-posts-root .fc .fc-daygrid-day-number{ height: 100%;}
.event-count {font-size: 11px;font-weight: 500;}

.fc .fc-daygrid-day-number{ z-index: inherit !important;}
#Scheduled-posts-root .fc-daygrid-day-frame .fc-daygrid-day-top .popup-wrapper .popup-menu.ts-plannerAddButton {
    position: relative;
    z-index: 4;
    background-color: #fff;
}


@media screen and (max-width: 767px) {
#Scheduled-posts-root .fc .fc-daygrid-day-number{ font-size: 12px;}
}






@media screen and (max-width: 991px) {
.login-register-sec .sec-audience-main {padding: 20px;margin-top: 15px;}
.login-register-sec .sec-audience-main .audience-col-3 {flex: 0 0 370px;max-width: 370px;}
}

@media screen and (max-width: 767px) {
button.paragraph-item-toggle {
    width: 18px;
    height: 18px;
    top: 11px;
    border-radius: 2px;
    color: var(--title);
}

.field--widget-entity-reference-paragraphs .draggable .paragraph-item-toggle:before{ font-size: 13px;}
.js .paragraph-type-title{ font-size: 12px;}
.js .paragraph-type-top { padding: 8px 28px;border-radius: 8px;align-items: center;position: relative;}
.login-register-sec .sec-audience-main{ padding: 0px;}
.login-register-sec .sec-audience-main .audience-col-3 {
  border-left: 0;
  flex: 0 0 100%;
  max-width: 100%;
}


  }

/* Range slider  css */
.card.card-audience.sec-channel-obj input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  cursor: pointer !important;
  outline: none !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 0px !important;
  height: 14px !important;
}

.card.card-audience.sec-channel-obj .form-range::-webkit-slider-thumb{ margin-top: 0px !important;}

/* Track: webkit browsers */
.card.card-audience.sec-channel-obj input[type="range"]::-webkit-slider-runnable-track {
  height: 12px !important;
  background: #F2EEF8 !important;
  border-radius: 16px;
}

/* Track: Mozilla Firefox */
.card.card-audience.sec-channel-obj input[type="range"]::-moz-range-track {
  height: 12px !important;
  background: #F2EEF8 !important;
  border-radius: 16px !important;
}

/* Thumb: webkit */
.card.card-audience.sec-channel-obj input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none !important;
  appearance: none !important;
  /* creating a custom design */
  height: 12px !important;
  width: 12px !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary-color) !important;
  /*  slider progress trick  */
   box-shadow: -807px 0 0 800px var(--primary-color) !important;
}


/* Thumb: Firefox */
.card.card-audience.sec-channel-obj input[type="range"]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  /*  slider progress trick  */
  box-shadow: -807px 0 0 800px var(--primary-color) !important;
}


/* Range slide css end */





.card-media-action .action-box {margin-left: 16px;}
.card-media-action .action-box img {min-width: 20px;width: 20px;}

.social-iconbox {
  flex: 0 0 84px;
  max-width: 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 18px;
  margin-right: 16px;
}
.text-notes-list h5 {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 4px;
}

.text-notes-list p {
  margin-bottom: 0px;
}

.card.card-connected-channel p a {
  color:var(--secondary-color);
}

.card.card-connected-channel {margin-bottom: 16px;}
.sec-media-list .sec-media-item:not(:first-child){ margin-top: 16px;}

.btn.btn-channel {
  background-color: var(--primary-light);
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-color);
  min-width: 200px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-channel::before {border: var(--primary-light) solid 3px;}

.btn.btn-channel span{ margin: 0px 5px;}

.dropdown-menu.dropdown-menu-end.dropdown-connect-channel {
  min-width: 182px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.dropdown-menu-end.dropdown-connect-channel .dropdown-item {
  background: transparent !important;
  font-size: 12px;
  font-weight: 500;
}

.affiliate-sec .card-title {font-size: 18px;}
[class*='affiliate-'] {margin-bottom: 24px;}
[class*='affiliate-'] a{ font-weight: 500; color: var(--secondary-color);}
[class*='affiliate-'] strong {
  font-weight: 500;
}

.table-tube {
  border: 1px solid #EAE2F4;
  background: #fff;
  padding: 0px;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0px;
}

.sec-channel-obj p:empty {display: none;}

.table__responsive { overflow-x: auto; width: 100%;}


.path-notifications #ts-notifications-form table tr th:first-child,
.path-notifications #ts-notifications-form table tr td:first-child {
  display: none;
}

.responsive-enabled.table.table-hover.custom-table>tbody>tr:hover td {
  --bs-table-accent-bg: #f9f9f9;
}

.btn-preview.btn-use-this-template img {
  margin-right: 5px;
}



.path-user-membership #user-form .password-strength__indicator.is-weak,.user-register .password-strength__indicator.is-weak {
  background-color: #d60040
}

.path-user-membership #user-form .password-strength__indicator.is-fair,.user-register .password-strength__indicator.is-fair {
  background-color: #ff7400
}

.path-user-membership #user-form .password-strength__indicator.is-good,.user-register .password-strength__indicator.is-good {
  background-color: #20bb00
}

.path-user-membership #user-form .password-strength__indicator.is-strong,.user-register .password-strength__indicator.is-strong {
  background-color: #178001
}

.sec-user-membership-main .js-form-item.confirm-parent .ok {
  color: #20bb00;
  font-weight: 500;
}




.views-field {height: 100%;}
.views-field .field-content {height: 100%;}
.views-field .field-content .dropdown-divider {margin-top: auto;}
.views-field .field-content .plus-monthly-text.welcome-para {
  padding-bottom: 10px;}
.views-field .field-content .plus-monthly-text.welcome-para a {
    color: var(--paragraph);
}
.accordion-my-description fieldset legend{ display: none;}



.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper {
    margin-bottom: 0px !important;
}

.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .form-item-coupon-redemption-form-code {
  flex: 1;
  padding-right: 15px;
  display: inline-block;
  width: 500px;
  max-width: 100%;
}

.card-bo .extra-margin:last-child {margin-bottom: 0px;}
.checkout-pane .fieldset-legend {font-size: 16px;font-weight: bold;color: var(--title);}

.checkout-pane.checkout-pane-payment-information.card.js-form-item .js-form-wrapper {
  margin-bottom: 0 !important;
}

.checkout-pane.checkout-pane-payment-information.card.js-form-item .address-container-inline {
  display: flex;
  margin-bottom: 0px !important;
  margin-left: -7px;
  margin-right: -7px;
}

.checkout-pane.checkout-pane-payment-information.card.js-form-item .address-container-inline > .form-item {
  margin-right: 0;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0px 7px;
}

.checkout-pane.checkout-pane-payment-information.card.js-form-item .js-form-item {
  margin-bottom: 10px;
}

.checkout-pane.checkout-pane-payment-information.card.js-form-item {
  padding: 0px;
}

.custom-checkout-cls .custom-checkout-heading h3 {margin-bottom: 12px;}

.commerce-checkout-flow {
  position: relative;
}

.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

form.custom-msg-prompt .checkout-pane-stripe-review {
  padding: 0 0 20px;
  margin-top: 0;
}

.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper .link--previous {
  position: relative;
  padding: 10px 18px;
  overflow: hidden;
  box-shadow: none !important;
  display: inline-block;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 0;
  transition: all 500ms ease;
  background: #feefe8;
  color: var(--secondary-color);
  margin-left: 10px;
}

.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary {
  background-color: #f2641926;
  color: var(--secondary-color);
}

.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary:hover {
  background-color: var(--secondary-color);
  color: #fff;
}



@media screen and (max-width: 1199px) {
  .checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .form-item-coupon-redemption-form-code{ width: 270px;}
}
@media screen and (max-width: 991px) {
.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .form-item-coupon-redemption-form-code {
  padding-right: 0;
  width: 100%;
  margin-bottom: 10px;
}

.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper {flex-direction: column;gap: 10px;}


}


/* landing page css */

.hero-banner .head-banner {
  background-size: cover;
  border-radius: 30px;
  overflow: hidden;
  max-width: 1270px;
  margin: auto;
  padding: 50px;
  background-position: center center;
  margin-bottom: 40px;
  text-align: center;
}

.hero-banner .head-banner .content-area p {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

.style-container {
  width: 1170px;
  margin: 0 auto;
  max-width: 100%;
}

section.inner-pages .inner-pages-content h2 {
  line-height: 45px;
  font-weight: 700;
  font-size: 32px;
  color: #000;
}

.hero-banner .head-banner .content-area  h2 {
    color: #fff;
    margin-bottom: 20px;
}

.connect-box {
    display: flex;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.connect-content {
    padding: 10px;
    flex: 1;
}

.connect-box .connect-img {
    flex: 0 0 330px;
    max-width: 330px;
}

.connect-content h2 {
    font-size: 18px;
    font-weight: bold;
    color: var(--title);
    margin-bottom: 18px;
}

.connect-content p {
    display: flex;
}

.connect-content p .list-tick {
    flex: 0 0 20px;
    max-width: 20px;
}

@media screen and (max-width: 767px) {
.connect-box {
    flex-direction: column;
    align-items: center;
}
.text-notes-list h5{ margin-bottom: 15px;}
.card-media-action .action-box {margin-left: 5px;}
.card-media-action .action-box .btn-remove-photo {min-width: 100px;}
.d-flex.top-head-block {flex-direction: column;}
.d-flex.top-head-block .ms-auto {margin-left: 0px !important;margin-bottom: 15px;}
.sec-media-item > .d-flex.align-items-center {align-items: start !important;}
.card-media-action .action-box .btn {padding: 5px;}

}

/*access denied page css */
.page-forbidden {display: flex;align-items: center; padding: 50px 0px;}
.page-forbidden .container {
  max-width: 100%;
  text-align: center;
  padding: 0px;
  width: 100%;
}

.top-head p {
  font-size: 20px;
  font-weight: bold;
  color: var(--title);
  margin-bottom: 20px;
}
.fig-imgbox img {
  width: 193px;
  height: 193px;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 20px;
}
.forbidden-content {text-align: left;width: 460px;max-width: 100%;}
.forbidden-content p{ font-size: 16px; font-weight: bold; color: var(--title); margin: 0px;}
.card-page .search-area input {background-color: #fff;}


.page-forbidden {position: relative;max-width: 690px;margin: auto}


.page-node-type-landing-pages .access-denied-search {display: block!important}
.page-node-type-landing-pages .access-denied-search .mb-3 {margin: 0px !important;}
.forbidden-content p:empty {display: none;}

.auth-button.sign-up-btn .btn .icon-text,
.auth-button.log-in-btn .btn .icon-text,
.auth-button.sign-in-btn .btn .icon-text {
  display: inline-block;margin: 0;
}


body.administrator-user.thumbnails-blankimage {padding: 0 !important;}

.app-sidebar .sidebar-list-item .thumbnail_layer_panel {height: auto;min-height: auto;max-height: initial;}
.open-menu .app-sidebar .sidebar-list-item .thumbnail_layer_panel {display: none;}


.app-sidebar div.sidebar-footer span.upgrade-link {min-width: 72px;}


.open-section {
  width: 20px;
  height: 20px;
  font-size: 0px;
  background-color: var(--primary-light);
  border-radius: 2px;
  color: var(--title);
  border: 1px solid var(--primary-light);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: relative;
}

.accordion-header-text {
  font-size: 14px;
  font-weight: bold;
  color: var(--title);
  padding: 8px 0px 8px 0px;
  margin-right: auto;
}


.open-section:before { width: 100%; height: 100%;
  position: absolute;margin-top: 0;right: 0;bottom: 0;display: flex;  align-items: center;
  font-size: 16px; justify-content: center;font-weight: bold;background-color: var(--primary-light);
  border-radius: 2px;color: var(--title);opacity: 1;}
.open-section:before {content: "\f63b";font-family: bootstrap-icons !important;}
.hide-accordion .open-section:before {content: "\f4fe";font-family: bootstrap-icons !important;}

@media screen and (min-width: 1199px) {
.hide-accordion .accordion-header-text{ display: none;}
.hide-accordion .column-box-half.column-box-right-side-bar { flex: 0 0 44px; max-width: 44px;}
.hide-accordion .column-box-half.column-box-right-side-bar .accordion-body {display: none;}
/* One open state, for every page that has this sidebar.
 *
 * This was three near-identical copies of the same 375px rule, each hooked on a
 * different seo-tools handle - a wrapper class, a body class, a Twig class -
 * described as defence-in-depth. All three only ever matched the seven page
 * templates that carry a seo-tools class. The other thirty-seven render the
 * column as plain `column-box-right-side-bar d_noneSet`, so opening the sidebar
 * there matched no width rule at all: the column fell back to min-content and
 * the panel text came out one word per line. /objectives is where it was
 * reported (TS-5465), but it was every non-seo-tools page.
 *
 * Keyed on the state instead of the page, which is what it always meant: the
 * sidebar is open when it has no d_noneSet, whatever page it is on. (0,4,0)
 * clears the 44px rail above it on class count. */
.hide-accordion .column-box-half.column-box-right-side-bar:not(.d_noneSet) { flex: 0 0 375px; max-width: 375px; }
.hide-accordion .column-box-half.column-box-right-side-bar:not(.d_noneSet) .accordion-header-text { display: block; }
.hide-accordion .column-box-half.column-box-right-side-bar:not(.d_noneSet) .accordion-body { display: block; }
/* Search Explorer's in-content sidebar (SeoSidebar, 4-col) is wider than
   Discovery's (3-col) and filled the flex row, wrapping the 375px help sidebar
   below the content. Keep the row on one line and let the content column shrink
   so the help panel stays beside it on both tabs. */
.seo-tools-wrapper .d-xl-flex { flex-wrap: nowrap; }
.seo-tools-wrapper .column-box-full { min-width: 0; }
}



#Scheduled-posts-root button.fc-today-button.fc-button.fc-button-primary{ position: relative; cursor: pointer;}
#Scheduled-posts-root button.fc-today-button.fc-button.fc-button-primary::before{ border: 3px solid transparent;}

.t-hover {
  -webkit-transition: -webkit-box-shadow .25s ease, -webkit-transform .25s ease;
  transition: -webkit-box-shadow .25s ease, -webkit-transform .25s ease;
  -o-transition: box-shadow .25s ease, transform .25s ease;
  transition: box-shadow .25s ease, transform .25s ease;
  transition: box-shadow .25s ease, transform .25s ease, -webkit-box-shadow .25s ease, -webkit-transform .25s ease;
}

.t-hover:hover {
  -webkit-box-shadow: 0 1rem 2.5rem rgba(22, 28, 45, .1), 0 .5rem 1rem -.75rem rgba(22, 28, 45, .1) !important;
  box-shadow: 0 1rem 2.5rem rgba(22, 28, 45, .1), 0 .5rem 1rem -.75rem rgba(22, 28, 45, .1) !important;
  -webkit-transform: translate3d(0, -3px, 0);
  transform: translate3d(0, -3px, 0);
}


/* css added 26 dec */
.form-smart-description.with-flag-btn .fieldset-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  height: 100%;
  /* TS-5297: this row had no wrap and no media query anywhere, while the button
     inside is white-space: nowrap. Below roughly 600px the textarea and the
     button could not fit side by side, and with nothing allowed to wrap the row
     pushed past the edge of the card. Wrapping lets the button drop under the
     field instead. */
  flex-wrap: wrap;
}

/* Flex children default to min-width: auto, so the textarea refuses to shrink
   below its intrinsic width and forces the overflow even once wrapping is
   allowed. This is the half people usually miss. */
.form-smart-description.with-flag-btn .fieldset-wrapper > * {
  min-width: 0;
}

.form-smart-description.with-flag-btn .fieldset-wrapper .flag .btn {
  white-space: nowrap;
}

.form-smart-description.with-flag-btn .fieldset-wrapper .flag .btn-secondary,.form-smart-description.with-flag-btn .fieldset-wrapper .flag .btn-primary {
  padding: 7px 10px;
  font-size: 12px;
}
.form-smart-description.with-flag-btn .fieldset-wrapper .token-disabled textarea {
  pointer-events: none;
  background: #e1e5e9;
}
.form-smart-description.with-flag-btn .preview-div .form-label.fw-normal {
  word-break: break-all;
}

.sidebar-footer #block-entitylimitaccessblock1 .upgrade-area a svg {
    width: 18px;
    height: 18px;
}

.sidebar-footer #block-entitylimitaccessblock1 .upgrade-area a {
    font-size: 12px;
}

.my-promo-page .video-box.script-box img{
    max-width : unset;
    max-height: unset;
}
.my-promo-page .video-box.script-box{
    border : none;
    min-height: unset;
}

.d_noneSet .card {
    padding: 0;
}
.column-box-half.column-box-right-side-bar {
    transition: max-width 0.4s ease-in-out,
    flex 0.4s ease-in-out,
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out;
    flex: 1;
    opacity: 1;
    visibility: visible;
    overflow: hidden; /* prevents content from overflowing during transition */
}

.column-box-half.column-box-right-side-bar.d_noneSet {
    max-width: 0;
    flex: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0px;
}

.custom-checkout-cls .card.card-audience .card-head {
  font-size: 22px;
 }

.custom-checkout-cls .plan-price span {
    color: #22142D;
    font-size: 42px;
    font-weight: 900;
}

.custom-checkout-cls .plan-price small {
    color: #22142D;
    font-size: 16px;
}
.custom-checkout-cls {


}
.custom-checkout-cls  .card.card-audience.custom-checkout-heading {
    max-width: 490px;
    margin: 0 auto;
    box-shadow: 0px 2px 5px 0px #00000017;
    padding: 30px;
    border: none;
}

.custom-checkout-heading .card-bo.pricing-card {
    color: #22142D;
    font-size: 16px;
}

.custom-checkout-heading .plan-title .plan-type {
    font-size: 16px;
    color: #22142D;
     margin-bottom: 0;
}

.custom-checkout-heading .plan-name {
    margin-top: 23px;
    font-weight: 900;
    color: #22142D;
    margin-bottom: 5px;
}

.custom-checkout-heading .plan-features ul li::before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url(../images/star-purple.png);
    background-repeat: no-repeat;
    background-position: left;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.custom-checkout-heading .plan-features ul li {
    margin-bottom: 8px;
}

.custom-checkout-heading .border-top.extra-margin.margin-total.text-purple .plus-monthly-text p {
    font-size: 18px;
    font-weight: 700;
}
.custom-checkout-heading .border-top.extra-margin.margin-total.text-purple .dollar-rup p {
    font-weight: 900;
    font-size: 22px;
}
.custom-checkout-heading .custom-checkout-cls .coupon-discount-wrapper {
    display: none;
}

.checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary {
    background: unset;
    color: #22142D80;
    border: 1px solid #22142D33;
    font-weight: 400;
    font-size: 16px;
}

.custom-checkout-heading .checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary {
    background: unset;
    color: #22142D80;
    border: 1px solid #22142D33;
  text-transform: capitalize;
}

.custom-checkout-cls .line {
    display: flex;
    justify-content: space-between;
  width: 100%;
}
.custom-checkout-cls .summary {
    font-size: 16px;
    color: #22142DBF;
    font-weight: 400;
}

.custom-checkout-cls .plus-monthly-text p {
    font-weight: 400;
}
.custom-checkout-cls .plus-monthly-text.cu-text p {
    font-weight: bold;
    font-size: 18px;
}
.custom-checkout-cls .line span:nth-child(2) {
    color: #22142D;
    font-weight: 900;
}
.custom-checkout-cls .js-form-item.form-item.js-form-type-textfield.form-item-sidebar-coupon-redemption-form-code.js-form-item-sidebar-coupon-redemption-form-code.form-group.control-field {
    width: 57%;
}
 .custom-checkout-cls .extra-margin {
    padding: 6px 0 0;
}

.custom-checkout-cls .card.card-audience {
    max-width: 552px;
}

.custom-checkout-cls .checkout-pane .fieldset-legend {
    font-size: 21px;
}


 .custom-checkout-cls #edit-actions .btn.btn-primary {
    background: linear-gradient(180deg, #FB874A 12.18%, #F2641A 73.08%);
    border: 2px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(0, 0, 0, 0.2) 100%);
    max-width: calc(100% - 30px);
    width: 100%;
    border-radius: 22px;
    font-size: 18px !important;
}

 .custom-checkout-cls .control-field .form-control, .custom-checkout-cls .control-field .form-select {
    background: unset;
    font-size: 18px;
    font-weight: 500;
    height: 44px;
    border-color: #22142D33;
}
.custom-checkout-cls .control-field .form-control::placeholder {
    color: #22142D80;
    font-weight: 400;
    font-size: 16px;
}
.custom-checkout-cls #edit-actions .btn.btn-primary:before{
display: none;
}
.commerce-checkout-flow .form-actions.js-form-wrapper.form-wrapper .btn.btn-primary {
background: linear-gradient(180deg, #FB874A 12.18%, #F2641A 73.08%);
  border: 2px solid;
    border-image-source: none;
  border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(0, 0, 0, 0.2) 100%);
  max-width: calc(100% - 30px);
  width: 100%;
  border-radius: 22px;
  font-size: 18px !important;

}
.custom-checkout-cls .testimonial-views {
    padding: 24px 30px;
    color: #22142D;
    font-size: 16px;
}

.custom-checkout-page .author-info {
    display: flex;
    align-content: center;
    gap: 12px;
}
.custom-checkout-cls .testimonial-views .author-info .youtube-icon img {
    width: auto;
    height: auto;
}
.custom-checkout-cls .testimonial-views .author-info img {
    width: 50px;
    height: 50px;
}
.creator-section .inner-text-creator p {
    margin-bottom: 0;
}
.custom-checkout-page .author-name {
    font-weight: 700;
}
.custom-checkout-page .my-custom-coupon-wrapper {
  padding: 15px 0;
}
.custom-checkout-cls .testimonial-views .views-row {
    margin-bottom: 30px;
}
.custom-checkout-cls .testimonial-views .social-proof-content {
  margin-bottom: 1rem;
}
.custom-checkout-cls .testimonial-views .social-proof-content p {
    margin-bottom: 0;
}
#edit-payment-information-billing-information-address-0-address-country-code select {
    font-size: 16px;
}
.checkout-pane-stripe-review p.custom-msg-prompt{
    padding-top: 24px;
}

.custom-checkout-cls .form-actions.js-form-wrapper.form-wrapper {
    position: unset;
    flex-direction: column;
    gap: 20px;
}
.custom-checkout-page #dashaboard-inner-content {
  content: "";
  background-image: url(/themes/custom/tubespanner_purple/images/checkout-ellipse-graphic.png);
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-position-x: right;
}
.custom-checkout-page .secure-payment-lock-wrapper {
  color: #22142D;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media screen and (min-width: 1200px) {
  .custom-checkout-cls .container {
      max-width: 1160px;
  }
}


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

  .custom-checkout-cls .card.card-audience {
      max-width: 100%;
      margin-top: 20px;
  }
  .custom-checkout-cls .card.card-audience.custom-checkout-heading {
      max-width: 100%;
  }
}


@media screen and (max-width: 498px) {
  .custom-checkout-cls .js-form-item.form-item.js-form-type-textfield.form-item-sidebar-coupon-redemption-form-code.js-form-item-sidebar-coupon-redemption-form-code.form-group.control-field,
  .custom-checkout-heading .checkout-pane.checkout-pane-coupon-redemption .js-form-wrapper .btn.btn-primary {
    width: 100%;
  }
  .custom-checkout-page .my-custom-coupon-wrapper {
    min-height: 140px;
  }
}

@media screen and (max-width: 380px) {
  img.plan-icon {
    max-width: 80px;
  }
  .custom-checkout-heading .plan-title .plan-type {
    font-size: 14px;
  }
  .custom-checkout-cls .plan-price span {
    font-size: 36px;
  }
  .custom-checkout-page .secure-payment-lock-wrapper {
    display: block;
  }
}