@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

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

body {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  color: #101010;
  }

html,
body {
  width: 100%;
  padding-right: 0 !important;
  }

:focus:not(:focus-visible) {
  outline: 0;
  }

:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  border-radius: 6px;
  }

.btn:focus:not(:focus-visible) {
  box-shadow: none;
  }

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  }

/* A text editor is always focus-visible while typing; its bordered box clips the ring above to a stray
   line under the text, and the caret already shows where focus is */
.ql-editor:focus-visible {
  box-shadow: none;
  }

.disabled {
  pointer-events: none;
  opacity: 0.5;
  }

.disabled .view-profile-link {
  pointer-events: auto;
  }

.max-h-400 {
  max-height: 400px;
  overflow-y: auto;
  }

.max-h-500 {
  max-height: 500px;
  overflow-y: auto;
  }

.max-h-600 {
  max-height: 600px;
  overflow-y: auto;
  }

.max-h-300 {
  max-height: 300px;
  overflow-y: auto;
  }

/* A slim scrollbar for lists that scroll inside a card (the workflow module's
   3-4px bars, made reusable) */
.rp-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: #e0e3e8 transparent;
  }

.rp-scroll-thin::-webkit-scrollbar {
  width: 4px;
  }

.rp-scroll-thin::-webkit-scrollbar-track {
  background: transparent;
  }

.rp-scroll-thin::-webkit-scrollbar-thumb {
  background: #e0e3e8;
  border-radius: 4px;
  }

.max-h-200 {
  max-height: 200px;
  overflow-y: auto;
  }

.min-h-500 {
  min-height: 500px;
  }

.min-h-400 {
  min-height: 400px;
  }

.min-h-300 {
  min-height: 300px;
  }

.min-h-200 {
  min-height: 200px;
  }

.min-h-100 {
  min-height: 100px;
  }

.hw-100 {
  height: 100%;
  width: 100%;
  }

.btn-upload {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  }

.post-filter-box {
  width: 300px;
  top: 50px;
  right: 16px;
  z-index: 1;
  }

.label-list li:last-child {
  margin: 0 !important;
  }

.label-list {
  max-height: 115px;
  }

/* custom scroll css */

::-webkit-scrollbar {
  width: 5px;
  height: 6px;
  }

::-webkit-scrollbar-track {
  background: transparent;
  }

::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 10px;
  }

.form-check-input + label {
  cursor: pointer;
  }

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

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: "Young", sans-serif; */
  font-weight: normal;
  }

h1 {
  font-size: 38px;
  }

h2 {
  font-size: 32px;
  }

h3 {
  font-size: 24px;
  }

h4 {
  font-size: 18px;
  line-height: 25px;
  }

h5 {
  font-size: 16px;
  }

h6 {
  font-size: 12px;
  }

.b1 {
  font-size: 32px;
  }

.b2 {
  font-size: 24px;
  }

.b3 {
  font-size: 20px;
  }

.b4 {
  font-size: 16px;
  }

.b5 {
  font-size: 14px !important;
  }

.b6 {
  font-size: 12px;
  }

.fw-mediaum {
  font-weight: 400 !important;
  }

.fw-semibold {
  font-weight: 500 !important;
  }

.fw-bold {
  font-weight: 600 !important;
  }

.text_primary {
  color: #0d6efd;
  }

.text_scondary {
  color: #101010;
  }

a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
  }

.align-center {
  align-items: center;
  justify-content: center;
  }

.form-control {
  border-radius: 6px;
  min-height: 40px;
  font-size: 14px;
  padding: 10px 15px;
  background-image: none;
  color: #101010;
  }

.SearchContentBox .form-control {
  min-height: 40px;
  }

.form-select {
  border-radius: 6px;
  min-height: 42px;
  font-size: 15px;
  cursor: pointer;
  }

.form-select:focus {
  border-color: #0d6efd;
  box-shadow: none;
  }

select.form-control {
  padding-right: 50px;
  }

.form-control:focus {
  background-color: #fff;
  border-color: #0d6efd;
  outline: 0;
  box-shadow: none;
  }

hr {
  border-color: #dee2e64a !important;
  opacity: 1;
  }

hr.dark {
  border-color: #e5e6eb !important;
  }

.alert {
  padding: 0.5rem 0.6rem;
  line-height: normal;
  }

.alert-primary {
  color: #333333;
  background: #E6F2FF;
  border-color: #ccecef;
  }

.alert-info {
  color: #101010;
  background: #f3f9ff;
  border-color: #74bbfe;
  }

.text-info {
  color: #178dfe !important;
  }

.alert-warning {
  color: #101010;
  background: #fffef2;
  border-color: #fbb500;
  }

.text-warning {
  color: #fbb500 !important;
  }

.alert-danger {
  color: #101010;
  background: #fdf5f5;
  border-color: #f17171;
  }

.text-danger {
  color: #e81313 !important;
  }

.alert-success {
  color: #101010;
  background: #daf1e0;
  border-color: #45b854;
  }

.text-success {
  color: #10B981 !important;
  }

.toast {
  background: #ffffff;
  }

.border-start-dashed {
  border-left: 1px dashed #1F1F1F33;
  }

.border-end-dashed {
  border-right: 1px dashed #1F1F1F33;
  }

.btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-weight: 600;
  }

.v-hidden {
  visibility: hidden;
  }

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  border-color: #0d6efd;
  }

.btn-group-sm>.btn, .btn-sm {
  padding: 6px 10px !important;
  font-size: .875rem !important;
  border-radius: 8px;
  border-radius: 6px;
  }

.workspace-list .badge {
  height: 22px;
  }

.post-description .badge,.post-library .badge {
  max-width: 250px !important;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  }

.badge {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  }

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

.btn.b6 {
  font-size: 12px;
  padding: 2px 8px !important;
  }

.copy-delete .btn {
  padding:12px 14px;
  }

.btn-primary {
  background: #0d6efd;
  border-color: #0d6efd;
  font-weight: 500;
  }

.btn-outline-primary {
  background: #ffffff;
  }

.btn-group .border-start {
  border-color: #0956c9 !important;
  border: 0;
  border-radius: 0 8px 8px 0 !important;
  }

.input-group .border-start-0 {
  border-radius: 0 8px 8px 0 !important;
  }

.btn-group .btn:first-child:hover {
  border-color: #0d6efd;
  }

.btn-outline-secondary {
  border-color: #dee2e6 !important;
  color: #1F1F1F;
  background: #ffffff;
  }

.btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-secondary.show {
  color: #0d6efd !important;
  background-color: #ffffff !important;
  border-color: #0d6efd !important;
  }

.btn-outline-light {
  border-color: #E6F2FF !important;
  color: #0d6efd;
  background: #E6F2FF;
  }

.btn-outline-light:hover,.btn-outline-light:active,.btn-outline-light.show {
  background-color: #ffffff !important;
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  }

.btn.btn-skip,
.btn.btn-skip:first-child:hover {
  background: #fff;
  border: 0;
  color: #9d9d9d;
  }

.btn.btn-no-bg,
.btn.btn-no-bg:hover {
  background: transparent;
  border: 0;
  color: #1F1F1F;
  font-weight: 700;
  padding: 5px 0 0;
  }

.btn.btn-icon {
  padding: 10px;
  border-radius: 6px;
  }
.btn-min {
  min-width: 110px;
  }

.btn-secondary {
  background: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #1F1F1F !important;
  }

.UploadContentBulk .btn-list .active {
  border: 1px solid #0d6efd !important;
  color: #0d6efd !important;
  background: #ffffff;
  }

.btn-secondary:hover {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  }

.btn-secondary-light {
  border-color: #e6f0fe;
  color: #0d6efd;
  background: #e6f0fe;
  }

.btn-secondary-light:hover,.btn-secondary-light:active {
  border-color: #cee2fe !important;
  color: #0d6efd !important;
  background: #cee2fe !important;
  }

/* Bootstrap 5.2 ships .min-w-100 / .min-vw-100 / etc. but no .min-w-0.
   Flex children need min-width:0 to let text-truncate actually clip,
   otherwise the child grows to its content size and pushes siblings out
   (e.g. long IG audio titles hiding the edit/delete buttons). */
.min-w-0 {
  min-width: 0 !important;
  }

/* Same idea on the block axis: a flex child needs min-height:0 before it will
   shrink below its content (charts inside a fixed-height card). */
.min-h-0 {
  min-height: 0 !important;
  }

.w-min {
  min-width: 100px;
  }

.btn-danger:hover {
  color: #fff;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  }

.form-label {
  font-size: 16px;
  font-weight: 500;
  }

.small, small {
  font-size: 13px;
  }

.form-switch .form-check-input {
  width: 30px;
  height: 18px;
  background-color: #ececec;
  box-shadow: none;
  flex: 0 0 30px;
  }

.form-switch .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
  }

.form-switch .form-check-label {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  }

.form-switch .form-check-input:focus {
  border-color: #1F1F1F40;
  }

.btn-light,
.btn-light:hover {
  color: #1F1F1F !important;
  }

.form-control.border-end-0:focus,.input-group .form-control.border-start-0:focus {
  border-color: #ced4da;
  }

.border {
  border-color: #dee2e6 !important;
  }

.border.border-primary {
  border-color: #0d6efd !important;
  }

.border-danger {
  border-color: #dc3545!important;
  }

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

.offcanvas-body p.title {
  color: #101010;
  }

.overflow-y {
  overflow: hidden auto;
  }

.form-check-input:checked {
  border-color: #0d6efd;
  background-color: #0d6efd;
  }

.form-check-input:focus {
  border-color: #0d6efd;
  outline: 0;
  box-shadow: 0 0 0 0.25rem #0d6efd29;
  }

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
  }

/* .accordion-button.collapsed::after {
  transform: rotate(-180deg);
  }

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(0deg);
  }

.accordion-button:not(.collapsed) {
  box-shadow: none;
  }

*/

.website-logo .logo-img {
  margin-right: 10px;
  opacity: 0.4;
  cursor: pointer;
  }

.website-logo .logo-img:hover {
  opacity: 1;
  }

.website-logo .logo-img.active {
  border-color: #0d6efd !important;
  opacity: 1;
  background: #F6F9FB;
  }

.custom-tab .nav-link {
  border-bottom: 2px solid #ffffff !important;
  color: #495057;
  margin: 0;
  padding: 0 0 0.5rem 0;
  }

.custom-tab .nav-link.active {
  color: #1F1F1F;
  border-color: #0d6efd !important;
  }

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

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

/* Color Start */

.bg-color-1 {
  background-color: #e74c3c !important;
  }

.bg-color-2 {
  background-color: #c0392b !important;
  }

.bg-color-3 {
  background-color: #1abc9c !important;
  }

.bg-color-4 {
  background-color: #16a085 !important;
  }

.bg-color-5 {
  background-color: #d51f4d !important;
  }

.bg-color-6 {
  background-color: #3498db !important;
  }

.bg-color-7 {
  background-color: #2980b9 !important;
  }

.bg-color-8 {
  background-color: #9b59b6 !important;
  }

.bg-color-9 {
  background-color: #8e44ad !important;
  }

.bg-color-10 {
  background-color: #f2784b !important;
  }

.bg-color-11 {
  background-color: #2ecc71 !important;
  }

.bg-color-12 {
  background-color: #27ae60 !important;
  }

.bg-color-13 {
  background-color: #e67e22 !important;
  }

.bg-color-14 {
  background-color: #d35400 !important;
  }

.bg-color-15 {
  background-color: #19b5fe !important;
  }

.bg-color-16 {
  background-color: #34495e !important;
  }

.bg-color-17 {
  background-color: #2c3e50 !important;
  }

.bg-color-18 {
  background-color: #d2527f !important;
  }

.bg-color-19 {
  background-color: #b1456b !important;
  }

.bg-color-20 {
  background-color: #00d947 !important;
  }

.bg-color-21 {
  background-color: #f1c40f !important;
  }

.bg-color-22 {
  background-color: #f39c12 !important;
  }

.bg-color-23 {
  background-color: #a2c8a2 !important;
  }

.bg-color-24 {
  background-color: #7e9c7e !important;
  }

.bg-color-25,
.bg-color-26 {
  background-color: #ba16d8 !important;
  }

.bg-color-27 {
  background-color: #8a8686 !important;
  }

.bg-color-28 {
  background-color: #a1a1a1 !important;
  }

.bg-color-primary {
  background-color: #0d6efd !important;
  }

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

.bg-color-secondary {
  background-color: #F6F9FB !important;
  }

.color-primary {
  color: #0d6efd !important;
  }

.text-muted {
  color: #6b7280 !important;
  }

.text-black-30 {
  color: #1F1F1F45;
  }

.color-1 {
  color: #e74c3c;
  }

.color-2 {
  color: #c0392b;
  }

.color-3 {
  color: #1abc9c;
  }

.color-4 {
  color: #16a085;
  }

.color-5 {
  color: #d51f4d;
  }

.color-6 {
  color: #3498db;
  }

.color-7 {
  color: #2980b9;
  }

.color-8 {
  color: #9b59b6;
  }

.color-9 {
  color: #8e44ad;
  }

.color-10 {
  color: #f2784b;
  }

.color-11 {
  color: #2ecc71;
  }

.color-12 {
  color: #27ae60;
  }

.color-13 {
  color: #e67e22;
  }

.color-14 {
  color: #d35400;
  }

.color-15 {
  color: #19b5fe;
  }

.color-16 {
  color: #34495e;
  }

.color-17 {
  color: #2c3e50;
  }

.color-18 {
  color: #d2527f;
  }

.color-19 {
  color: #b1456b;
  }

.color-20 {
  color: #00d947;
  }

.color-21 {
  color: #f1c40f;
  }

.color-22 {
  color: #f39c12;
  }

.color-23 {
  color: #a2c8a2;
  }

.color-24 {
  color: #7e9c7e;
  }

.color-25,
.color-26 {
  color: #ba16d8;
  }

.color-27 {
  color: #e0e0e0;
  }

.color-28 {
  color: #a1a1a1 !important;
  }

.color-29 {
  color: #3628b5;
  }

/* Color End */

.mxw-100 {
  max-width: 100px;
  }

/* login and signup css start */

.recurpost-login-signup .left-container {
  background:#F6F9FB;
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow-y: auto;
  }

.recurpost-login-signup .left-container .logo {
  flex: 0 0 auto;
  padding: 40px 50px 0;
  }

.recurpost-login-signup .left-container .logo a img {
  max-width: 200px;
  }

/* centre the panel content in the space left below the logo, never behind it */
.recurpost-login-signup .left-container > *:not(.logo) {
  margin-top: auto;
  margin-bottom: auto;
  }

.new-feature {
  padding: 0 50px;
  }

.recurpost-login-signup .right-container .signup-details {
  padding: 20px 40px;
  max-width: 500px;
  margin: auto;
  }

.recurpost-login-signup .right-container .signup-details.book-demo {
  max-width: 800px;
  }

.chrome-plugin .login-ctn {
  max-width: 450px;
  padding: 15px;
  }

.recurpost-login-signup.contact-sales .right-container .signup-details {
  max-width: 600px;
  }

.iti {
  width: 100%;
  }

.recurpost-login-signup .form-group {
  padding-bottom: 15px;
  position: relative;
  }

.recurpost-login-signup.share-a-post .form-group {
  padding-bottom: 0;
  }

.signin-blocks #show_password {
  position: absolute;
  top: 30px;
  right: 0;
  padding: 15px;
  cursor: pointer;
  font-size: 16px;
  line-height: 18px;
  }

.was-validated .form-control:invalid + #show_password,.was-validated .form-control:valid + #show_password {
  right: 25px;
  }

.recurpost-login-signup .left-container .user-details .user-img img {
  height: 70px;
  width: 70px;
  border-radius: 15px;
  border: 1px solid #eee;
  }

.pass-requirement-box p {
  display: inline-block;
  margin-right: 10px;
  }

.ResetPassword .pass-requirement-box {
  box-shadow: none;
  }

.pass-requirement-box .icon-check {
  position: relative;
  top: 2px;
  color: #e0e0e0;
  }

.pass-requirement-box p.check,
.pass-requirement-box .check .icon-check {
  color: #27ae60;
  font-weight: 500;
  }

.feature-tag {
  background: #FED024;
  color: #000;
  padding: 5px 15px;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 500;
  }

/* login and signup css end */

/* OTP Verification CSS */
.otp-verify .otp-input-container {
  max-width: 320px;
  margin: 0 auto;
  }

.otp-verify .otp-digit {
  width: 45px;
  height: 55px;
  font-size: 24px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #dee2e6;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  padding: 10px;
  background-image: none !important;
  }

.otp-verify .otp-digit:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  outline: none;
  }

.otp-verify .otp-digit.is-invalid {
  border-color: #dc3545;
  background-image: none !important;
  padding-right: 10px !important;
  }

.otp-verify .otp-digit.is-filled {
  border-color: #28a745;
  background-color: #f8fff9;
  }

#btn_resend_otp.disabled {
  pointer-events: none;
  opacity: 0.5;
  }

#expiry_timer.expired {
  color: #dc3545;
  font-weight: 600;
  }

/* OTP Verification CSS end */

/* on boarding steps css */

.recurpost-login-signup header {
  background: #F6F9FB;
  text-align: center;
  position: relative;
  }

.recurpost-login-signup header .logo img {
  max-width: 200px;
  max-height: 100px;
  padding: 15px 0;
  }

.progressbar_steps li {
  display: inline-block;
  margin: 0 2px;
  color: #d9d9d9;
  font-size: 10px;
  }

.progressbar_steps li.active {
  color: #45b854;
  }

.describes-box {
  background: #fff;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  position: relative;
  height: 60px;
  margin-bottom: 15px;
  padding: 10px;
  cursor: pointer;
  }

.describes-box.active {
  border: 1px solid #0d6efd;
  color: #0d6efd;
  }

.describes-box input {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  }

.describes-box label {
  cursor: pointer;
  color: #727272;
  }

.describes-box.active label,
.describes-box:hover label {
  color: #0d6efd;
  font-weight: 600;
  }

.describes-box:hover {
  background: #F6F9FB;
  }

/* on boarding plan and price css  */

.plans-select-tab li {
  margin: 0 4px;
  position: relative;
  }

.plans-select-tab li a {
  font-size: 20px;
  font-weight: 500;
  color: #101010;
  }

.plans-select-tab li a span {
  position: absolute;
  bottom: 2px;
  right: -110px;
  }

.plans-select-tab .form-switch .form-check-input {
  width: 45px;
  height: 25px;
  background-color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  }

.plans-select-tab .form-switch .form-check-input:checked {
  background-color: #fed024;
  border-color: #fed024;
  }

.plan-details-table .plan-price  .btn-secondary {
  background: #fed024 !important;
  border-color: #fed024 !important;
  color: #101010 !important;
  }

.plan-details-table .plan-price .btn-secondary:hover {
  background: #ffc900 !important;
  }

.plan-details-table .price s {
  text-decoration: none;
  font-size: 16px;
  }

.plan-details-table {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 30px 20px;
  position: relative;
  }

.current-plan .plan-details-table {
  border-color: #ffffff;
  background: #fafafa;
  }

.plan-price .plan_description {
  min-height: 50px;
  }

.popular-plan .plan-details-table {
  border-color: #ffc900;
  background: #FFFDF8;
  }

.plan-details span {
  position: relative;
  top: 1px;
  color: #27ae60;
  }

.plan-details .not-included span {
  color: #eb5757;
  }

.plan-details-table .popular-tag {
  background: #8454FF;
  font-size: 12px;
  color: #ffffff;
  border-radius: 15px 0 0 15px;
  padding: 5px;
  min-width: 85px;
  position: absolute;
  right: 0;
  top: 15px;
  }

.plan-price .price span.text-black-50 {
  font-size: 22px;
  position: relative;
  bottom: 6px;
  }

/* on boarding plan and price css end */

/* connect social account css */

.modal .connect-box {
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  }

.modal.connect-insta .connect-box {
  height: auto;
  }

.modal.connect-insta .connect-box img {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 25px;
  }

.social-media-account-block {
  padding: 30px 20px;
  border-radius: 10px;
  background: #f3f8fe;
  border: 1.5px solid rgba(16, 16, 16, 0.09);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.05);
  position: relative;
  cursor: pointer;
  }

.social-media-account-block:hover {
  box-shadow:0 2px 4px #00000029;
  }

.social-media-account-block .icon-add {
  top: 15px;
  left: 15px;
  font-size: 16px;
  }

.social-media-account-block .new-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #8454FF;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 25px;
  font-size: 12px;
  }

.socialaccount-blocks .d-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 10px 0;
  }

.social-media-account-block .social-media-logo img,.connect-box img {
  width: 34px;
  }

.manage-social-accounts .social-media-account-block {
  margin-top: 0;
  }

.social-add-btn {
  padding: 8px 0 !important;
  color: #101010;
  background: #ffffff;
  border: 1px solid transparent;
  letter-spacing: 0.8px;
  border-radius: 6px;
  width: 115px;
  font-weight: 500;
  font-size: 14px;
  transition-duration: 0.2s;
  }

.invite-others-to-add .connect-socialaccount.d-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 10px 0;
  }

.invite-others-to-add .social-media-account-block {
  padding: 20px;
  }

.facebook-bg-light {
  background-color: #1876f21a;
  }

.twitter-bg-light {
  background: #41a1f21a;
  }

.linkedin-bg-light {
  background-color: #007ab91a;
  }

.instagram-bg-light {
  background-color: #a305cd1a;
  }

.googlebusiness-bg-light {
  background-color: #ffce001a;
  }

.pinterest-bg-light {
  background: #cb20271a;
  }

.youtube-bg-light {
  background: #cd201f1a;
  }

.tiktok-bg-light,
.threads-bg-light {
  background: #0101011a;
  }

.btn-facebook {
  border: 1px solid #1877f2 !important;
  }

.btn-facebook:hover,
.btn-facebook-dark {
  background: #1877f2 !important;
  color: #ffffff;
  }

.btn-facebook.border-start {
  border-left-color: #1667d0 !important;
  }

.btn-twitter {
  border: 1px solid #101010 !important;
  }

.btn-twitter:hover {
  background: #101010;
  color: #ffffff;
  }

.btn-linkedin {
  border: 1px solid #007ab9 !important;
  }

.btn-linkedin:hover {
  background: #007ab9;
  color: #ffffff;
  }

.btn-instagram {
  border: 1px solid #fe2181 !important;
  }

.btn-instagram:hover {
  background: #fe2181;
  color: #ffffff;
  }

.btn-googlebusiness {
  border: 1px solid #ffce00 !important;
  }

.btn-googlebusiness:hover {
  background: #ffce00;
  color: #010101;
  }

.btn-pinterest {
  border: 1px solid #cb2027 !important;
  }

.btn-pinterest:hover {
  background: #cb2027;
  color: #ffffff;
  }

.btn-youtube {
  border: 1px solid #cd201f !important;
  }

.btn-youtube:hover {
  background: #cd201f;
  color: #ffffff;
  }

.btn-tiktok,
.btn-threads {
  border: 1px solid #010101 !important;
  }

.btn-tiktok:hover,
.btn-threads:hover {
  background: #010101;
  color: #ffffff;
  }

.img-box {
  flex: 0 0 130px;
  }

.facebook-step-img-box .step-box {
  width: 25%;
  flex: 0 0 25%;
  }

.offcanvas.offcanvas-end.AddYourProfiles {
  max-width: 550px;
  width: 100%;
  /* background: #F6F6F6;
  */
  border-top-left-radius: 16px;
  z-index: 1045;
  }

.AddYourProfiles .offcanvas_header {
  padding: 20px 24px 5px;
  position: relative;
  border-top-left-radius:16px;
  }

.AddYourProfiles .btn-close {
  position: absolute;
  top: 25px;
  left: -15px;
  background-color: #e7e7e7;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
  border-radius: 100%;
  background-size: 10px;
  opacity: 1;
  height: 25px;
  width: 25px;
  }

.AddYourProfiles .offcanvas-body {
  padding: 5px 0 20px;
  }

.AddYourProfiles .offcanvas-body .b5 {
  font-weight: 500;
  font-size: 12px;
  }

.small-social-icon {
  height: 18px;
  width: 18px;
  }

.medium-social-icon {
  height: 30px;
  width: 30px;
  }

.big-social-icon {
  height: 80px;
  width: 80px;
  }

.schedule-pic-box .small-social-icon {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 1px solid #fff;
  border-radius: 50%;
  }

.btn.Addaccount {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 5px;
  width: 70px;
  flex: 0 0 70px;
  }

.btn.Addaccount.disabled {
  color: #0d6efd;
  background: #E6F2FF;
  opacity: .5;
  }

.btn.Addaccount.removeaccount {
  width: 32px;
  flex: 0 0 32px;
  }

.user-info p.b4,
.user-info input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.select-accounts .user-info .b4 {
  max-width: 160px;
  }

.publishing-calendar .select-accounts .user-info .b4 {
  max-width: 210px;
  }

.publishing-calendar .select-accounts .account-list {
  padding-left: 15px;
  padding-right: 15px;
  }

.user-info .b6 {
  color: #585858;
  }

.user-info + p.text-success {
  flex: 0 0 70px;
  font-weight: 500;
  }

.social-account-list .user-info {
  padding-left: 10px;
  }

.social-account-list {
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  cursor: pointer;
  }

#social-profiles-grid .social-account-list {
  cursor: default;
  }

.social-account-list.rounded-top {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  }

.social-account-list:last-child {
  margin-bottom: 0;
  }

.edit-post-as .form-select {
  padding: 8px 40px 8px 10px;
  min-height: 40px;
  }

.platform-filter {
  max-height: 260px;
  }

.manage-social-accounts .queue-history-tabs.nav-tabs .nav-link {
  padding: 4px 10px;
  }

.profiles-list-table {
  min-width: 900px;
  }

.manage-social-accounts .social-account-list .account-details {
  min-height: 65px;
  }

.profiles-list-table .social-icon {
  width: 35px;
  flex: 0 0 35px;
  }

.profiles-list-table td {
  vertical-align: middle;
  max-width: 200px;
  }

.profiles-list-table .edit-post-as .form-select {
  max-width: 250px;
  }

.profiles-list-table .table-action {
  width: 200px;
  }

.btn.btn-remove,
.btn.btn-edit,
.btn.btn-remove:hover,
.btn.btn-edit:hover {
  color: #585858;
  font-size: 12px;
  padding: 5px 0;
  background: #ffffffeb;
  border-color: transparent;
  }

.done-button {
  background: #f6f6f6;
  }

.ProfilesAddedSuccessfully a.b4 {
  color: #101010;
  box-shadow: none !important;
  }

.ProfilesAddedSuccessfully a.b4 label {
  cursor: pointer;
  }

.connect-account.Profiles-added {
  padding-right: 450px !important;
  }

.AuthenticateFacebookgroup img {
  width: 160px;
  flex: 0 0 160px;
  }

/* Switch Flat */

.switch.switch-flat {
  width: 75px;
  height: 30px;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  }

.switch .switch-input {
  display: block;
  opacity: 0;
  position: absolute;
  }

.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 14px;
  border-radius: inherit;
  box-sizing: content-box;
  }

.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
  box-sizing: content-box;
  }

.switch-label:before {
  content: attr(data-off);
  right: 16px;
  color: #ffffff;
  }

.switch-label:after {
  content: attr(data-on);
  left: 16px;
  color: #FFFFFF;
  opacity: 0;
  }

.switch-input:checked ~ .switch-label {
  background: #0d6efd;
  border-color:#0d6efd;
  }

.switch-input:checked ~ .switch-label:before {
  opacity: 0;
  }

.switch-input:checked ~ .switch-label:after {
  opacity: 1;
  }

.switch-input:checked ~ .switch-handle {
  left: 74px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  }

.switch-label, .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
  }

.switch-flat {
  padding: 0;
  background: #FFF;
  background-image: none;
  }

.switch-flat .switch-label {
  background: #CACACA;
  border: solid 2px #CACACA;
  box-shadow: none;
  }

.switch-flat .switch-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ffffff;
  width: 22px;
  height: 22px;
  box-shadow: none;
  border-radius: 100%;
  }

.switch-flat .switch-input:checked ~ .switch-handle {
  left: 46px;
  }

/* Switch Flat end*/

.app-group-authanticate .container {
  max-width: 900px;
  }

.app-page-authanticate .container {
  max-width: 1000px;
  }

.offcanvas.offcanvas-end.AddYourProfiles.ProfilesAddedSuccessfully {
  transform: none;
  visibility: visible;
  z-index: 1;
  width: 450px;
  }

/* connect social account css end*/

.library-left-block {
  padding: 0 40px 0 0;
  }

.library-right-block {
  padding: 0 0 0 10px;
  }

.select-library-box .col-md-6.position-relative {
  border-left: 1px dashed #1F1F1F33;
  }

.library-left-block .b3,
.library-right-block .b3 {
  font-weight: 500;
  }

.library-left-block .mb-4,
.library-right-block .mb-4 {
  color: #464646;
  }

.library-schedule-box {
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2px;
  margin-bottom: 15px;
  position: relative;
  background: #ffffff;
  }

/* remove this if not required */

.library-schedule-box.border-start {
  border-left-width:4px !important;
  }

.library-schedule-box.border-start .icon {
  display: none;
  }

.contentlist .select-accounts.accounts-filter.show .library-schedule-box.border-start .icon,
.manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box.border-start .icon {
  display: block;
  }

.border-color-18 {
  border-left-color: #d2527f !important;
  }

.border-color-14 {
  border-left-color: #d35400 !important;
  }

.border-color-16 {
  border-left-color: #34495e !important;
  }

.add-to-library .library-schedule-box {
  height: 50px;
  }

.template-library-box {
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  margin-bottom: 15px;
  }

.template-library-box:last-child {
  margin-bottom: 0;
  }

.library-schedule-box:hover,
.select-accounts .account-list .social-account:hover,
.inner-social-account .social-account:hover {
  /* background: #F6F9FB !important;
  */
  border-color:#0d6efd;
  }

.offcanvas-small .social-media-list-box .social-account-list {
  cursor: pointer;
  }

.offcanvas-small .social-media-list-box .social-account-list:hover {
  background: #ffffff;
  color: #0d6efd;
  }

.library-schedule-box.active {
  border-color: #0d6efd;
  color: #0d6efd;
  background: #ffffff;
  }

.library-schedule-box:last-child {
  margin-bottom: 0;
  }

.library-schedule-box .icon-right-arrow {
  background: #ffffff;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  }

.library-schedule-box.active .icon-right-arrow {
  background: #0d6efd;
  border: 1px solid #0d6efd;
  color: #ffffff;
  }

.colorpicker {
  -webkit-appearance:none;
  -moz-appearance: none;
  appearance: none;
  height: 25px;
  width: 25px;
  cursor: pointer;
  border-radius: 50% !important;
  }

.colorpicker::-webkit-color-swatch,
.colorpicker::-moz-color-swatch {
  border-radius: 50%;
  border: none;
  }

.color-picker-box {
  max-width: 262px;
  }

.ColorCell {
  height: 34px;
  width: 34px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  }

.color-picker-box .ColorCell:hover,
.color-picker-box .ColorCell.active {
  border-color: #0d6efd;
  }

.ColorCell span {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  }

.library-schedule-box .one-time-use {
  position: absolute;
  top: -5px;
  right: -5px;
  color: #fff;
  font-size: 16px;
  }

#confetti {
  width: 2000px;
  }

a.btn.btn-primary.mb-4 {
  position: relative;
  z-index: 1057;
  }

.final-step .social-account-list,
.final-step .template-library-box {
  border-radius: 0;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  padding-left: 0;
  }

.final-step .social-account-list:last-child,
.final-step .template-library-box:last-child {
  border: 0;
  }

.view-installedprofiles-btn,
.ProfilesAddedSuccessfully .btn-close {
  display: none;
  }

/*on boarding steps css  end*/

/* sidebar menu css */

/* The rail and its flyouts (Share a post, workspaces) sit above anything sticky in the page,
   such as the calendar's weekday row, and still under Bootstrap's backdrops and overlays (1040+) */
.main-menu {
  background: #ffffff;
  min-width: 80px;
  width: 80px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1025;
  }

@media (prefers-reduced-motion: reduce) {
  .main-menu {
    transition: none;
    }
  }

/* Bootstrap's collapse animates height, which is the wrong axis for a rail and
   holds the .show class back until it has finished, so the width used to snap
   at the end instead of sliding. Skipping its transition lands the class at
   once and leaves the width rule above to do the animating. */

.main-menu.collapsing {
  height: auto !important;
  transition: none;
  }

/* Closing slides as well: common/sidebar.js keeps .show on while .rail-closing narrows the
   rail back to 80px, the labels and the account-row toggle fade out first, and
   .rail-moving clips anything wider than the rail until it settles. */

.main-menu.rail-moving {
  overflow: hidden;
  }

.main-menu.collapse.show.rail-closing {
  width: 80px;
  }

.main-menu.collapse.show.rail-closing .text-only,
.main-menu.collapse.show.rail-closing .logo-full,
.main-menu.collapse.show.rail-closing .ws-switcher-caret {
  opacity: 0;
  animation: none;
  transition: opacity 0.12s ease-out;
  }

.main-menu.rail-closing .user-profile.menu-list > li > .btn-collaps {
  display: none !important;
  }

/* The names have no width to slide out of, so they arrive on a fade rather
   than appearing fully formed halfway through the slide. */

.main-menu.collapse.show .text-only,
.main-menu.collapse.show .logo-full {
  animation: rp-rail-reveal 0.25s ease both;
  }

@keyframes rp-rail-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
  }

.main-menu .menu-list ul li {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 5px;
  }

/* the bottom block (Help, Report an issue, the avatar) centres on the same axis as the nav above */
.main-menu .user-profile.menu-list > li {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  }

/* The account row also holds the rail toggle, Buffer style: beside the name when the rail is
   open, stacked above the avatar when it is collapsed */
.main-menu.collapse:not(.show) .user-profile.menu-list > li:has(> .btn-collaps) {
  flex-direction: column-reverse;
  }

/* The account link opens a menu rather than a page, so hover only turns the name blue: no row
   tint, and the role underneath stays muted */
.main-menu.collapse.show .user-profile.menu-list > li:has(> .btn-collaps) > a:hover {
  background: transparent;
  }

.main-menu hr.dark {
  margin: 6px 0;
  }

.main-menu .menu-list ul li.dropend {
  position: unset;
  }

.main-menu.collapse.show .menu-list ul li {
  justify-content: start;
  }

.main-menu.collapse.show {
  width: 250px;
  }

.main-menu .text-only {
  display: none;
  position: relative;
  }

.user-profile.menu-list a:hover .text-only {
  display: none;
  }

.main-menu.collapse.show .user-profile.menu-list a:hover .text-only {
  display: inline-flex;
  }

.menu-tooltip {
  display: block;
  }

.menu-collapse .menu-tooltip,
.main-menu.collapse.show .menu-list a:hover .text-only::after {
  display: none;
  }

.menu-list a:hover .text-only::after {
  position: absolute;
  height: 8px;
  width: 8px;
  top: 8px;
  left: -3px;
  background: #1a1a1a;
  content: "";
  transform: rotate(45deg);
  }

.main-menu.collapse.show .menu-list a:hover .text-only,
.main-menu.collapse.show .menu-list .active a .text-only {
  color: #0d6efd;
  }

.main-menu.collapse.show .text-only {
  display: inline-flex;
  color: #1F1F1F;
  font-size: 14px;
  background: transparent;
  padding: 0;
  border: 0;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  }

.main-menu.collapse.show .logo-icon {
  display: none;
  }

.logo-full {
  display: none;
  max-width: 200px;
  margin: auto;
  }

.main-menu.collapse.show .logo-full {
  display: block;
  }

/* Rail items: a small, quiet row. Collapsed, each item is its icon alone (the bold
   fill weight, since no label carries the meaning) on a 40px square that only tints on
   hover and for the active page. Expanded, the icon turns to the light line weight and
   the whole row is the hover/active field; the active page keeps the fill. Nothing is
   boxed at rest, so the rail reads as a short list, not a stack of tiles. */
.menu-list a {
  color: #1F1F1F;
  font-size: 14px;
  border-radius: 6px;
  }

.menu-list a:hover {
  color: #0d6efd;
  }

.menu-icon {
  display: inline-flex;
  color: #4a4a4a;
  border-radius: 6px;
  height: 34px;
  width: 34px;
  font-size: 16px;
  line-height: 1;
  justify-content: center;
  align-items: center;
  flex: 0 0 34px;
  transition: background-color .15s ease-out, color .15s ease-out;
  }

.menu-list a:hover .menu-icon,
.menu-list li.active .menu-icon {
  background: #E6F2FF;
  color: #0d6efd;
  }

.menu-list li.active .text-only {
  color: #0d6efd;
  }

/* the two weights of one glyph: line when collapsed and open, fill on the active row */
.menu-icon .rail-ico-fill {
  display: none;
  }

.menu-list li.active .menu-icon .rail-ico-line {
  display: none;
  }

.menu-list li.active .menu-icon .rail-ico-fill {
  display: inline;
  }

/* open rail: the row is the field, 36px tall, the icon a touch smaller than when it stands alone */
.main-menu.collapse.show .menu-list ul li:not(.menu-label):not(:has(> hr)) > a,
.main-menu.collapse.show .user-profile.menu-list > li > a {
  width: 100%;
  transition: background-color .15s ease-out;
  }

/* Open, each icon keeps the place it has in the collapsed rail (centred in 80px), so the
   slide only grows the labels and nothing jumps sideways. 34px icons sit 7px in, the 40px
   avatar 4px in. */
.main-menu.collapse.show .menu-list ul li:not(.menu-label):not(:has(> hr)) > a,
.main-menu.collapse.show .user-profile.menu-list > li:not(:has(> .btn-collaps)) > a {
  padding-left: 7px;
  }

.main-menu.collapse.show .user-profile.menu-list > li:has(> .btn-collaps) > a {
  padding-left: 4px;
  }

.main-menu.collapse.show .menu-list ul li:not(.menu-label):not(:has(> hr)) > a:hover,
.main-menu.collapse.show .user-profile.menu-list > li > a:hover {
  background: #F6F9FB;
  }

.main-menu.collapse.show .menu-list li.active > a {
  background: #E6F2FF;
  }

.main-menu.collapse.show .menu-list a:hover .menu-icon,
.main-menu.collapse.show .menu-list li.active .menu-icon {
  background: transparent;
  }

@media (prefers-reduced-motion: reduce) {
  .menu-icon,
  .main-menu.collapse.show .menu-list a {
    transition: none;
    }
  }

.tooltip {
  pointer-events: none;
  border: none;
  }

.user-profile .menu-icon.user-icon,
.main-menu.collapse.show .user-profile .menu-icon.user-icon {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  padding: 0;
  text-align: center;
  line-height: 40px;
  }

.user-profile .menu-icon .user-image-sidemenu {
  width: 100%;
  object-fit: cover;
  height: 100%;
  object-position: center;
  }

/* Rail toggle in the account row: a quiet icon button. Collapsed it shows
   ri-sidebar-unfold-line; open, the glyph turns to ri-sidebar-fold-line */
.btn-collaps {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  color: #6B7280;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: color .15s ease-out, background-color .15s ease-out;
  }

.btn-collaps:hover,
.btn-collaps:focus-visible {
  color: #0d6efd;
  background: #F6F9FB;
  }

.main-menu.collapse.show .btn-collaps i:before {
  content: "\f45c";
  }

.notification-dropdown a.border-top {
  font-size: 16px;
  font-weight: 500;
  }

.notification-dropdown ul {
  max-height: 210px;
  }

.inner-sm-header {
  box-shadow: 0 1px 5px #1F1F1F17;
  z-index: 99;
  }

.btn-accounts-filter {
  z-index: 2;
  background: #0d6efd;
  padding: 6px 18px;
  border-radius: 0 0px 10px 10px;
  }

.FeedManager .ai-chat-loader img {
  width: 55px;
  }

.add-feed-box {
  background: #ffffff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

.add-feed-box:hover {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.08);
  }

.add-feed-box .post-opt-icon img {
  width: 22px;
  height: 22px;
  }

.menu-header .logo-icon {
  border-radius: 6px;
  }

.ws-switcher-btn {
  width: 100%;
  padding: 0;
  justify-content: center;
  transition: background-color .15s ease-out;
  }

.main-menu.collapse.show .ws-switcher-btn {
  width: calc(100% + 12px);
  margin: 0 -6px;
  padding: 6px 6px 6px 10px;
  gap: 10px;
  justify-content: start;
  }

.ws-switcher-logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  }

.menu-header .ws-switcher {
  min-height: 44px;
  display: flex;
  align-items: center;
  }

.main-menu.collapse.show .ws-switcher-btn {
  margin: -4px -6px;
  }

.main-menu .menu-header hr.dark {
  margin: 16px 0 6px;
  }

.main-menu.collapse.show .ws-switcher .text-only {
  margin-left: 0;
  }

.ws-switcher-caret {
  display: none;
  color: #6c757d;
  font-size: 16px;
  transition: color .15s ease-out;
  }

.main-menu.collapse.show .ws-switcher-caret {
  display: inline-flex;
  flex-shrink: 0;
  }

.ws-switcher-btn.show .ws-switcher-caret {
  color: #0d6efd;
  }

@media (prefers-reduced-motion: reduce) {
  .ws-switcher-btn,
  .ws-switcher-caret {
    transition: none;
    }
  }

.ws-switch-item.active {
  background-color: rgba(13, 110, 253, .08);
  }

/* "Manage" group label: only when the rail is open */
.main-menu .menu-list li.menu-label {
  display: none;
  }

.main-menu.collapse.show .menu-list li.menu-label {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 6px 4px;
  letter-spacing: .06em;
  font-size: 11px;
  }

/* sidebar menu css end */

/* dashboard right box css  */

.inner-header {
  padding: 1rem;
  }

/* Team pages: the header is as tall as the rail's logo block (16px, the 44px logo,
   16px, the 1px rule), so its bottom border runs on from the rail's divider */
.inner-header-rail {
  min-height: 77px;
  }

/* Card anatomy on the Team pages: a heading row with a hairline under it, then
   rows divided by hairlines instead of boxed in borders. */
.rp-card-head {
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e6eb;
  }

.rp-list-row {
  padding: 14px 0;
  border-bottom: 1px solid #e5e6eb;
  }

.rp-list-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  }

.divider::before {
  position: absolute;
  height: 100%;
  top: 0;
  left: 10px;
  content: "";
  width: 1px;
  background: #e7e7e7;
  z-index: -1;
  }

.demo-video-modal iframe {
  height: 450px;
  width: 100%;
  border-radius: 5px;
  }

.offcanvas.offcanvas-end.create-new-post {
  width: 90%;
  border-top-left-radius: 16px;
  }

.offcanvas.offcanvas-end.create-new-post.share-a-post,
.offcanvas.offcanvas-end.create-new-post.share-a-thread {
  width: 100%;
  border-radius: 0;
  background: #1f1f1f78;
  padding-left: 180px;
  }

.offcanvas.offcanvas-end.create-new-post.share-a-post .offcanvas-header,
.offcanvas.offcanvas-end.create-new-post.share-a-post .offcanvas-body,
.offcanvas.offcanvas-end.create-new-post.share-a-post .footer-ctn,
.offcanvas.offcanvas-end.create-new-post.share-a-thread .offcanvas-header,
.offcanvas.offcanvas-end.create-new-post.share-a-thread .offcanvas-body,
.offcanvas.offcanvas-end.create-new-post.share-a-thread .footer-ctn {
  background: #ffffff;
  }

.offcanvas.offcanvas-end.create-new-post.share-a-post .oneoff-post-div > .full-loader,
.offcanvas.offcanvas-end.create-new-post.share-a-thread .twitter_thread_canvas >.full-loader {
  margin-left: 180px;
  }

.offcanvas.offcanvas-end.create-new-post.offcanvas-medium {
  max-width: 1170px;
  }

.create-new-post .offcanvas-header {
  position: relative;
  padding: 20px 35px;
  border-top-left-radius: 16px;
  }

.create-new-post .btn-close {
  position: absolute;
  top: 34px;
  left: -15px;
  background-color: #e7e7e7;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
  border-radius: 100%;
  background-size: 10px;
  opacity: 1;
  height: 22px;
  width: 22px;
  }

.offcanvas .btn-close {
  z-index: 111;
  }

.create-new-post .library-schedule-box span.icon {
  font-size: 24px;
  color: #888888;
  }

.CopyTimeSlots .social-account-list {
  border: 1px solid #dee2e6;
  cursor: pointer;
  }

.CopyTimeSlots .social-account-list:hover {
  background: #ffffff;
  color: #0d6efd;
  }

.publishing-calendar .select-accounts.accounts-filter.show .social-account {
  width: 50px;
  }

.select-accounts .account-list .social-account {
  border: 1px solid #dee2e6;
  cursor: pointer;
  background: #ffffff;
  }

.inner-social-account .account-list .social-account {
  border: 1px solid #dee2e6;
  cursor: pointer;
  }

.library-schedule-box.selected,
.social-account-list.selected,
.account-list .social-account.selected {
  border-color: #0d6efd !important;
  color: #0d6efd;
  }

.user-check {
  display: none;
  line-height: normal;
  background: #ffffff;
  top: -5px;
  right: -5px;
  font-size: 20px;
  }

.selected .user-check {
  display: flex;
  }

.add-to-library .update-to-libraries {
  max-height: 210px;
  overflow: auto;
  }

.library-schedule-box.selected span.icon {
  color: #1F1F1F;
  }

.contentlist .select-accounts.accounts-filter.show,
.manage-social-accounts .select-accounts.accounts-filter.show {
  width: 70px;
  flex: 0 0 70px;
  }

.contentlist .select-accounts.accounts-filter.show .search-account,
.publishing-calendar .select-accounts.accounts-filter.show .search-account,
.publishing-calendar .select-accounts.accounts-filter.show .menu_sa_status {
  display: none!important;
  }

.contentlist .select-accounts.accounts-filter.show h4,
.manage-social-accounts .select-accounts.accounts-filter.show h4,
.publishing-calendar .select-accounts.accounts-filter.show .title.b4 {
  display: none;
  }

.contentlist .select-accounts.accounts-filter.show .library-schedule-box,
.manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box,
.contentlist .select-accounts.accounts-filter.show .btn.btn-icon.library-expand,
.manage-social-accounts .select-accounts.accounts-filter.show .btn.btn-icon.library-expand {
  width: 40px;
  height: 40px;
  }

.contentlist .select-accounts.accounts-filter.show .library-schedule-box p,
.manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box p {
  justify-content: center;
  }

.contentlist .select-accounts.accounts-filter.show .text-only,
.manage-social-accounts .select-accounts.accounts-filter.show .text-only {
  display: none !important;
  }

.library-name-tooltip {
  display: none;
  }

.library-collapse .library-name-tooltip {
  display: block;
  }

.contentlist .select-accounts.accounts-filter.show .icon-collaps::before,
.manage-social-accounts .select-accounts.accounts-filter.show .icon-collaps::before,
.publishing-calendar .select-accounts.accounts-filter.show .icon-collaps::before {
  content: "\e940";
  }

.publishing-calendar .select-accounts.accounts-filter.show {
  width: 85px;
  flex: 0 0 85px;
  }

.publishing-calendar .select-accounts.accounts-filter.show .user-info {
  display: none;
  }

.publishing-calendar .select-accounts.accounts-filter.show .justify-content-between.w-100 {
  justify-content: center !important;
  }

/* Create Recuring Post css */

.create-new-post .library-right-block {
  padding: 0;
  }

.social_tab img {
  width: 20px;
  }

.post-ctn .nav-tabs .social_tab.nav-link span {
  position: absolute;
  top: 18px;
  right: 6px;
  background: #fff;
  border-radius: 50%;
  display: block;
  padding: 0 !important;
  border: 1px solid #fff;
  font-size: 12px;
  }

.post-ctn .nav-tabs .social_tab.nav-link .icon-warning-circle {
  top: 3px;
  left: 3px;
  right: auto;
  }

.post-ctn .nav-tabs {
  border: 0;
  overflow: auto hidden;
  }

.post-ctn .nav-tabs .social_tab.nav-link {
  border: 1px solid #dee2e6;
  color: #101010;
  padding: 8px 10px;
  height: 40px;
  position: relative;
  border-radius: 6px;
  border-bottom-width:3px;
  }

/* .post-ctn .nav-tabs .social_tab.nav-link.error {
  background-color:#f8d7da;
  }

*/

.post-ctn .nav-tabs .social_tab.nav-link.active {
  border-bottom-color: #0d6efd;
  color: #1F1F1F;
  z-index: 1;
  position: relative;
  }

.post-content {
  padding: 15px 15px 60px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #ffffff;
  }

.btn-add-media {
  background: #f6f9fc;
  border: 0;
  height: 28px;
  width: 28px;
  font-size: 12px;
  border-radius: 6px;
  }

.btn-location.added {
  color: #45b854;
  }

.btn-add-media.generate-link-preview {
  padding: 0 10px;
  border-radius: 30px;
  }

.textarea-footer {
  position: absolute;
  bottom: 15px;
  width: 100%;
  left: 0;
  padding-left: 10px;
  padding-right: 15px;
  }

/* quill-emoji pins its button at left 15px (30px wide); start the toolbar after it */
.post-content:has(.textarea-emoji-control) .textarea-footer {
  padding-left: 53px;
  }

.VariationsList .variation_sub_div.post-content {
  padding-bottom: 50px;
  }

.emojionearea .emojionearea-button {
  position: absolute;
  bottom: 20px;
  left: 15px;
  }

.UploadDropMedia {
  width: 100%;
  border: 1px dashed #0D6EFD;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: #f6faff !important;
  }

.upload-in-bulk .UploadDropMedia {
  max-width: 700px;
  }

.upload-media-bulk .UploadDropMedia.drag-over,
.UploadDropMedia.upload-image-box.drag-over,
.UploadDropMedia.upload-image-settings-box.drag-over,
.rp-upload-more-box.drag-over,
.rp-upload-more-settings-box.drag-over,
.rp-whitelabel-logo-drop.drag-over,
.rp-report-issue-drop.drag-over,
.rp-wm-drop.drag-over,
.rp-ws-wm-drop.drag-over {
  border-color: #0D6EFD;
  background: #e4eeff !important;
  transform: scale(1.01);
}

#csv_modal_popup .csv-details-box-list {
  max-height: 500px;
  }

.UploadDropMedia input {
  opacity: 0;
  cursor: pointer;
  }

.csv-details-ctn span.btn {
  padding: 5px 10px;
  }

.UploadDropMedia .Upload-progress {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #f2f2f2;
  }

.rp-bulk-upload-list .rp-bulk-upload-overall-bar {
  height: 6px;
  background: #eef1f5;
  }

.rp-bulk-upload-list .rp-bulk-upload-overall-bar-fill {
  background-color: #0D6EFD;
  transition: width 200ms ease-out;
  }

.rp-bulk-upload-list .rp-bulk-upload-row {
  background: #fff;
  border: 1px solid #E5E9F0;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.rp-bulk-upload-list .rp-bulk-upload-row + .rp-bulk-upload-row {
  margin-top: 8px;
}

.rp-bulk-upload-list .rp-bulk-upload-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #F1F5FB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D6EFD;
  font-size: 20px;
  flex-shrink: 0;
}

.rp-bulk-upload-list .rp-bulk-upload-progress {
  height: 6px;
  background: #ffffff;
}

.rp-bulk-upload-list .rp-bulk-upload-bar {
  background-color: #0D6EFD;
  transition: width 200ms ease-out;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-uploading {
  border-color: #BFD6FE;
  background: #F8FBFF;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-done {
  border-color: #BBE6C5;
  background: #F4FBF6;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-done .rp-bulk-upload-thumb {
  background: #E2F4E7;
  color: #1E8E3E;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-done .rp-bulk-upload-bar {
  background-color: #1E8E3E;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-done .rp-bulk-upload-status {
  color: #1E8E3E;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-error {
  border-color: #F2C2BD;
  background: #FDF5F4;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-error .rp-bulk-upload-thumb {
  background: #FCE3E0;
  color: #C5221F;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-error .rp-bulk-upload-bar {
  background-color: #C5221F;
}

.rp-bulk-upload-list .rp-bulk-upload-row.rp-state-error .rp-bulk-upload-status {
  color: #C5221F;
}

@media (prefers-reduced-motion: reduce) {
  .rp-bulk-upload-list .rp-bulk-upload-bar,
  .main-menu,
  .main-menu.collapse.show .text-only,
  .main-menu.collapse.show .logo-full,
  .rp-bulk-upload-list .rp-bulk-upload-overall-bar-fill,
  .rp-bulk-upload-list .rp-bulk-upload-row,
  .uploaded-media-box[data-rp-item] {
    transition: none;
    animation: none;
      }

  }

.uploaded-media-box .Upload-progress {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #f2f2f2;
  z-index: 1;
  text-align: center;
  }

.uploaded-media-box {
  height: 100px;
  width: 100px;
  flex: 0 0 100px;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 5px;
  border: 1px solid #cacacc;
  }

.uploaded-media-box .edit-image-dropdown {
  position: unset;
  }

.uploaded-media-box img {
  height: 100px;
  width: 100px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  }

.uploaded-media-box .btn-remove {
  top: 7px;
  right: 7px;
  height: 24px;
  width: 24px;
  border-radius: 4px;
  font-size: 12px;
  background: #1F1F1Fa3;
  border: 1px solid transparent;
  z-index: 2;
  }

.uploaded-media-box .btn.btn-drag {
  bottom: 7px;
  left: 7px;
  height: 24px;
  width: 24px;
  border-radius: 4px;
  font-size: 12px;
  background: #1F1F1Fa3;
  border: 1px solid transparent;
  padding: 5px 0;
  }

.uploaded-media-box .btn.btn-drag:hover {
  border: 1px solid #ffffff85;
  cursor: grab;
  }

.uploaded-media.ui-sortable {
  max-width: 100%;
  position: relative;
  padding: 2px 0 5px;
  }

.uploaded-media .ui-state-default {
  height: auto;
  width: auto;
  margin: 0;
  }

.uploaded.media-list {
  overflow: auto hidden;
  }

.ui-state-highlight {
  height: 100px;
  width: 100px;
  flex: 0 0 100px;
  background: #E6F2FF !important;
  border: 1px dashed #0d6efd !important;
  border-radius: 6px;
  }

.uploaded-media-box .btn-alt {
  bottom: 7px;
  right: 7px;
  height: 24px;
  width: 24px;
  border-radius: 4px;
  font-size: 12px;
  background: #1F1F1Fa3;
  border: 1px solid transparent;
  padding: 5px 0;
  color: #ffffff;
  }

.uploaded-media-box .btn-alt.added {
  position: relative;
  }

.btn-alt.added .icon-check {
  color: #45b854;
  background: #ffffff;
  top: -10px;
  border: 1px solid #fff;
  }

/* Composer media pick: what a network posts stays lit and outlined, the rest fades back */
/* The media type badge matches the tile's menu and drag buttons */
.uploaded-media-box .media-type-badge {
  bottom: 7px;
  right: 7px;
  height: 24px;
  width: 24px;
  padding: 0;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  }

/* A tile that lets its menu escape must not let the image cover its own border */
.uploaded-media-box.overflow-visible img {
  height: 100%;
  }

.uploaded-media-box[data-rp-item] {
  transition: opacity .15s ease-out;
  }

.uploaded-media-box[data-rp-item].rp-media-posting {
  border-color: #0d6efd;
  }

/* A video Facebook is not posting stays clickable so the pick can move to it, and
   reads as still in play rather than dropped like the images */
.uploaded-media-box[data-rp-item].rp-media-choice {
  cursor: pointer;
  opacity: .75;
  border-style: dashed;
  }

.uploaded-media-box[data-rp-item].rp-media-choice:hover,
.uploaded-media-box[data-rp-item].rp-media-choice:focus-visible {
  border-color: #0d6efd;
  }

/* An image past the network's own cap is over the limit, not merely unpicked */
.uploaded-media-box[data-rp-item].rp-media-over {
  border-style: dashed;
  border-color: #F59E0B;
  }

.uploaded-media-box .btn-change-thumb {
  bottom: 6px;
  right: 6px;
  height: 22px;
  width: 22px;
  border-radius: 4px;
  font-size: 12px;
  background: #1F1F1Fa3;
  padding: 5px 0;
  border: 1px solid #ffffff85;
  }

/* Video thumbnail upload-thumb new design */
.upload-thumb .uploaded-media-box.bg-dark {
  background: #000;
  }

.upload-thumb .uploaded-media-box.bg-dark img {
  opacity: 0.5;
  }

.Addalt textarea {
  resize: none;
  }

.uploaded-media-box .btn-remove:hover, .uploaded-media-box .btn-change-thumb:hover,.uploaded-media-box .btn-alt:hover {
  background: #1f1f1fe6;
  font-size: 12px;
  border: 1px solid #ffffff85;
  }

.uploaded-media-box .btn-upload,
.post-video .btn-upload {
  height: 32px;
  width: 32px;
  background: #151e2cad;
  flex: 0 0 32px;
  opacity: 1;
  }

.uploaded-media-box .btn-upload .icon-Play,
.post-video .btn-upload .icon-Play {
  top: 0;
  font-size: 18px;
  }

.custom-dropdown {
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16);
  min-width: 280px;
  }

.notification-dropdown {
  min-width: 450px;
  }

.account-settings-dropdown {
  width: 280px;
  }

.custom-dropdown li:last-child a {
  margin-bottom: 0 !important;
  }

.custom-dropdown .cdd-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9098a5;
  padding-bottom: 8px;
  }

.custom-dropdown .cdd-section-label ~ .cdd-section-label {
  padding-top: 4px;
  }

/* A secondary link sat on the end of a section label, for a menu that
   groups controls rather than plain links. */

.custom-dropdown .cdd-section-action {
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  }

/* Single-choice menu: the item in force is marked in the brand colour
   with a trailing tick, so a filter menu reads its own state. */

.custom-dropdown .cdd-check {
  visibility: hidden;
  color: #0d6efd;
  }

.custom-dropdown .cdd-selected {
  color: #0d6efd !important;
  font-weight: 600;
  }

.custom-dropdown .cdd-selected .cdd-check {
  visibility: visible;
  }

/* row menus mute their icons with .text-black-50; the item in force takes the brand colour whole */
.custom-dropdown .cdd-selected .text-black-50 {
  color: #0d6efd !important;
  }

.og-image-container {
  width: 140px;
  height: 110px;
  min-width: 140px;
  }

.fields-picker {
  width: 330px;
  }

.og-image-container .og-image {
  object-fit: cover;
  object-position: center;
  height: 100%;
  }

.replace-image {
  bottom: 10px;
  right: 10px;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  }

.preview_description {
  max-height: 55px;
  }

.more-opt-img {
  width: 20px;
  margin-right: 2px;
  }

.more-opt .title,.AI-content .title {
  cursor: pointer;
  color: #212529;
  box-shadow: none;
  }

.post-type label {
  /* width: 150px;
  */
  padding: 8px 5px;
  margin-left: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: start;
  background: #ffffff;
  flex-direction: column;
  height: 100%;
  width: 100%;
  }

.post-type label:hover {
  /* color: #0d6efd !important;
  */
  background: #F6F9FB;
  }

.post-type label.checked {
  /* border-color: #0d6efd !important;
  */
  position: relative;
  z-index: 1;
  /* color: #101010 !important;
  */
  /* background: #E6F2FF;
  */
  /* background:#f8fcff;
  */
}

.post-type .label-radio:checked + label .ri-checkbox-blank-circle-line:before,
.post-type label.checked .ri-checkbox-blank-circle-line:before {
  color: #0d6efd !important;
  content: "\eb80";
  }

.post-type .label-radio:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
  }

.post-type label.checked span.b6 {
  color: #585858 !important;
  }

.post-type label.checked.disabled,
.post-type label.checked.disabled input {
  opacity: 1;
  }

.form-control.pin-title {
  font-size: 20px;
  }

.full-loader {
  z-index: 99;
  background: #fffffff1;
  backdrop-filter: saturate(180%) blur(5px);
  }

/* Create Recuring Post css end  */

.modal-header .btn-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #e7e7e7;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12);
  border-radius: 100%;
  background-size: 10px;
  opacity: 1;
  height: 22px;
  width: 22px;
  }

.rp-modal,
.modal {
  background: #1F1F1F78;
}

.rp-plan-limit-modal {
  box-shadow: 0 24px 60px rgba(31, 31, 31, 0.18);
  }

.rp-plan-limit-icon {
  width: 84px;
  height: 84px;
  background: #fff4e5;
  }

/* Add Media Modal */

.am-sidebar {
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  }

.am-nav-link {
  background: none;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 5px;
  text-align: left;
  }

.am-nav-link:hover {
  background: #F0F4FF;
  color: #0D6EFD !important;
  }

.am-nav-link.active,
.am-nav-link.active:hover {
  background: #EBF2FF;
  color: #0D6EFD !important;
  }

.am-content {
  flex: 1;
  min-width: 0;
  height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  }

.am-content .tab-pane {
  flex: 1;
  overflow: hidden;
  }

/* Force-hide inactive tab panes - d-flex !important on panes overrides Bootstrap's display:none */
.am-content .tab-pane:not(.active) {
  display: none !important;
  }

.am-upload-zone {
  max-width: 380px;
  width: 100%;
  padding: 48px;
  border: 2px dashed #c5d5f0;
  border-radius: 12px;
  background: #f8fbff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  }

.am-upload-zone:hover {
  border-color: #0D6EFD;
  background: #eef5ff;
  }

.am-upload-zone input[type="file"] {
  opacity: 0;
  cursor: pointer;
  }

.am-upload-icon {
  font-size: 2.75rem;
  display: block;
  color: #93a8d0;
  }

.am-search {
  max-width: 260px;
  }

.am-toolbar {
  min-height: 58px;
  flex-shrink: 0;
  background: #fafbfc;
  }

.am-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5a6474;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  }

.am-source-btn:hover {
  border-color: #0D6EFD;
  color: #0D6EFD;
  }

.am-source-btn.active {
  border-color: #0D6EFD;
  color: #0D6EFD;
  background: #EBF2FF;
  }

.am-filter-btn {
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #5a6474;
  cursor: pointer;
  transition: all 0.15s;
  }

.am-filter-btn:hover,
.am-filter-btn.active {
  border-color: #0D6EFD;
  color: #0D6EFD;
  }

.am-filter-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef0f3;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
  }

.am-sort-select {
  width: auto;
  font-size: 0.8125rem;
  padding: 4px 28px 4px 10px;
  border-color: #eef0f3;
  color: #4b5563;
  background-position: right 8px center;
  }

.am-grid-scroll {
  overflow-y: auto;
  }

.am-media-item {
  background: #f0f2f5;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s, outline-color 0.15s;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: -2px;
  }

.am-media-item:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  }

.am-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }

.am-media-item.selected,
.am-media-item.is-selected {
  outline: 3px solid #0D6EFD;
  outline-offset: -1px;
  }

/* Corner select-checkbox */
.am-select-check {
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ffffffed;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  color: transparent;
  cursor: pointer;
  z-index: 2;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
  }

.am-media-item:hover .am-select-check,
.am-media-item.is-selected .am-select-check {
  opacity: 1;
  }

.am-select-check:hover {
  transform: scale(1.08);
  }

.am-media-item.is-selected .am-select-check {
  background: #0D6EFD;
  border-color: #0D6EFD;
  color: #fff;
  }

/* Header - selection chip */
.am-selected-chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #EBF2FF;
  color: #0D6EFD;
  font-size: 0.8125rem;
  font-weight: 500;
  }

.am-selected-chip i {
  font-size: 0.95rem;
  }

.am-selected-chip strong {
  font-weight: 700;
  }

.am-selected-chip.is-active {
  display: inline-flex;
  }

/* Persistent selection tray */
.am-content {
  position: relative;
  }

.am-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid #eef0f3;
  box-shadow: 0 -10px 24px -10px rgba(15, 23, 42, 0.10);
  transform: translateY(110%);
  transition: transform 0.25s ease;
  z-index: 10;
  }

.am-tray.is-active {
  transform: translateY(0);
  }

/* Shrink the scroll area so it ends above the tray, keeping the last row and the
   Load more button reachable instead of hidden behind the (absolute) tray. */
.am-content.has-tray .am-grid-scroll {
  margin-bottom: 64px;
  }

.am-content.has-tray .am-import-pane,
.am-content.has-tray .am-ai-pane {
  padding-bottom: 80px;
  }

/* The mixed-media note adds a second row, so the tray gets taller and the
   scroll area has to give back the extra height. */
.am-content.has-tray-note .am-grid-scroll {
  margin-bottom: 94px;
  }

.am-content.has-tray-note .am-import-pane,
.am-content.has-tray-note .am-ai-pane {
  padding-bottom: 110px;
  }

.am-tray-thumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
  }

.am-tray-thumbs::-webkit-scrollbar {
  height: 4px;
  }

.am-tray-thumbs::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
  }

.am-tray-thumb {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #f1f3f5;
  border: 1px solid #eef0f3;
  }

.am-tray-thumb img, 
.am-tray-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  }

.am-tray-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #93a8d0;
  font-size: 1.1rem;
  }

.am-tray-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
  transition: background 0.15s, transform 0.12s;
  }

.am-tray-x i {
  font-size: 10px;
  line-height: 1;
  }

.am-tray-x:hover {
  background: #ef4444;
  }

.am-tray-clear:hover {
  color: #ef4444 !important;
  }

/* Add Media - Load More */
.am-load-more-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 8px 6px;
  }

.am-load-more-wrap::before,
.am-load-more-wrap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8ecf0;
  max-width: 140px;
  }

.am-load-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
  }

.am-load-more i {
  font-size: 1rem;
  line-height: 1;
  transition: transform .35s ease;
  }

.am-load-more:hover {
  border-color: #0D6EFD;
  color: #0D6EFD;
  background: #EBF2FF;
  box-shadow: 0 1px 4px rgba(13,110,253,0.08);
  }

.am-load-more:hover i {
  transform: rotate(180deg);
  }

.am-grid-empty {
  color: #6c757d;
}

/* Unsplash search-first: centered search hero until results exist, then the
   search bar moves to the top toolbar and the results grid is shown. */
.am-unsplash-pane:not(.has-results) .am-unsplash-toolbar {
  flex-direction: column;
  border-bottom: 0;
  width: 100%;
  max-width: 460px;
  gap: 16px;
}

.am-unsplash-pane:not(.has-results) .am-unsplash-toolbar .am-search {
  width: 100%;
  flex: 0 0 auto;
}

.am-unsplash-hero-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #EBF2FF;
}

.am-unsplash-hero-icon {
  font-size: 1.75rem;
  color: #0D6EFD;
}

.am-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.5;
  z-index: 1;
  letter-spacing: 0.03em;
  }

.am-web-form {
  max-width: 440px;
  width: 100%;
  padding: 0 32px;
  }

.am-web-desc {
  max-width: 320px;
  margin: 4px auto 20px;
  }

.am-ai-icon {
  background: #f3f0ff;
  color: #7c3aed;
  }

/* Add Media - Import panes (Google Drive, Get Video, Copy from Web) */
.am-import-pane {
  padding: 15px;
  gap: 18px;
  overflow-y: auto;
  }

.am-import-brand {
  width: 45px;
  height: 45px;
  }

.am-brand-tint-blue {
  background: #EBF2FF;
  border-color: #d8e6ff;
  color: #0D6EFD;
  }

.am-import-head-text {
  min-width: 0;
  padding-top: 2px;
  }

.am-import-bar:focus-within {
  border-color: #0D6EFD !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.10);
  }

.am-import-bar-input::placeholder {
  color: #94a3b8;
  }

.am-import-hint {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #6b7280;
  }

.am-import-hint i {
  color: #94a3b8;
  font-size: 0.95rem;
  }

/* Bottom helper section */
.am-import-meta {
  margin-top: 4px;
  padding: 0 4px;
  }

.am-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #eef0f3;
  font-size: 0.8125rem;
  color: #4b5563;
  font-weight: 500;
  }

.am-meta-chip i {
  font-size: 0.95rem;
  color: #6b7280;
  }

.am-meta-chip-yt i {
  color: #FF0000;
  }

.am-meta-chip-vimeo i {
  color: #1AB7EA;
  }

.am-meta-chip-tiktok i {
  color: #010101;
  }

.am-meta-chip-ig i {
  color: #E4405F;
  }

/* Add Media - Generate with AI pane */
.am-ai-pane {
  background: #fff;
  --ai-violet: #7c3aed;
  --ai-indigo: #4F46E5;
  --ai-pink: #EC4899;
  --ai-cyan: #06B6D4;
  }

/* Header - title + credit chip */

.am-ai-spark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--ai-indigo) 0%, var(--ai-violet) 50%, var(--ai-pink) 100%);
  box-shadow: 0 8px 18px -8px rgba(124, 58, 237, 0.55);
  flex-shrink: 0;
  }

.am-ai-credit-chip > i {
  color: #f59e0b;
  font-size: 1rem;
  }

.am-ai-credit-chip strong {
  color: #101010;
  font-weight: 700;
  }

.am-ai-credit-buy {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #0D6EFD;
  font-weight: 600;
  font-size: 0.7375rem;
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s;
  }

.am-ai-credit-buy:hover {
  background: #EBF2FF;
  color: #0D6EFD;
  }

.am-ai-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  }

.am-ai-usage-link {
  width: 32px;
  height: 32px;
  }

.am-ai-usage-link:hover {
  background: #EBF2FF;
  color: #0D6EFD;
  border-color: #DBEAFE;
  }

/* Composer */
.am-ai-composer {
  padding: 14px 22px 4px;
  flex-shrink: 0;
  }

.am-ai-composer-box {
  position: relative;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 12px 12px 42px;
  transition: border-color .2s, box-shadow .2s;
  }

.am-ai-composer-box:focus-within {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
  }

.am-ai-composer-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--ai-violet);
  font-size: 1rem;
  }

.am-ai-composer-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #2b3340;
  font-family: inherit;
  background: transparent;
  min-height: 44px;
  max-height: 90px;
  }

.am-ai-composer-input::placeholder {
  color: #9ca3af;
  }

.am-ai-generate i {
  font-size: 0.95rem;
  }

.am-ai-generate:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 18px -6px rgba(79, 70, 229, 0.65);
  }

.am-ai-generate:active {
  transform: translateY(0);
  }

.am-ai-generate:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  }

.am-ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
  }

.am-ai-suggestions-label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-right: 2px;
  font-weight: 500;
  }

.am-ai-chip {
  border: 1px solid #eef0f3;
  background: #fff;
  color: #4b5563;
  font-size: 0.7375rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
  }

.am-ai-chip:hover {
  border-color: rgba(124, 58, 237, 0.5);
  color: var(--ai-violet);
  background: #faf5ff;
  }

/* Stage with three states */
.am-ai-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 12px 22px 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eef0f3;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 22%, rgba(236, 72, 153, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(6, 182, 212, 0.10) 0%, transparent 60%),
    #fbfbff;
  }

.am-ai-state {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px;
  text-align: center;
  }

.am-ai-stage[data-state="empty"]      .am-ai-empty-state,
.am-ai-stage[data-state="generating"] .am-ai-generating-state,
.am-ai-stage[data-state="result"] .am-ai-result-state {
  display: flex;
  }

/* Empty state - orbiting sparkles */
.am-ai-orbit {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 14px;
  }

.am-ai-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(124, 58, 237, 0.28);
  }

.am-ai-orbit-ring--out {
  inset: 0;
  animation: amOrbit 22s linear infinite;
  }

.am-ai-orbit-ring--in {
  inset: 22px;
  border-color: rgba(236, 72, 153, 0.22);
  animation: amOrbit 14s linear infinite reverse;
  }

@keyframes amOrbit {
  to {
    transform: rotate(360deg);
      }

  }

.am-ai-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,0) 60%),
              linear-gradient(135deg, var(--ai-indigo), var(--ai-violet) 60%, var(--ai-pink));
  box-shadow: 0 0 0 6px rgba(124,58,237,0.10), 0 12px 26px -6px rgba(124, 58, 237, 0.45);
  animation: amCore 3.6s ease-in-out infinite;
  }

@keyframes amCore {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
      }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
      }

  }

.am-ai-orb {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.45);
  animation: amFloat 5s ease-in-out infinite;
  }

.am-ai-orb-1 {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  top: -6px;
  left: 50%;
  margin-left: -14px;
  }

.am-ai-orb-2 {
  background: linear-gradient(135deg, var(--ai-pink), #F59E0B);
  bottom: 4px;
  right: 0;
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
  animation-delay: -1.6s;
  }

.am-ai-orb-3 {
  background: linear-gradient(135deg, var(--ai-cyan), #3B82F6);
  bottom: 14px;
  left: 0;
  width: 24px;
  height: 24px;
  font-size: 0.68rem;
  animation-delay: -3s;
  }

@keyframes amFloat {
  0%, 100% {
    transform: translateY(0);
      }

  50% {
    transform: translateY(-6px);
      }

  }

.am-ai-empty-copy {
  max-width: 320px;
  }

.am-ai-empty-copy h6 {
  color: #101010;
  font-size: 0.9375rem;
  }

.am-ai-empty-copy strong {
  color: var(--ai-violet);
  font-weight: 600;
  }

/* Generating state - shimmer + pulsing dots */
.am-ai-shimmer {
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background:
    linear-gradient(110deg, #ece9fa 0%, #f5f0ff 25%, #fce7f3 50%, #f5f0ff 75%, #ece9fa 100%);
  background-size: 220% 100%;
  animation: amShimmer 1.6s linear infinite;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(124, 58, 237, 0.30);
  }

.am-ai-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(168,85,247,0.30) 0%, transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(99,102,241,0.30) 0%, transparent 45%);
  pointer-events: none;
  }

.am-ai-shimmer-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-violet);
  font-size: 1.1rem;
  z-index: 1;
  animation: amSparkPulse 1.4s ease-in-out infinite;
  }

@keyframes amShimmer {
  0% {
    background-position: 220% 0;
      }

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

  }

@keyframes amSparkPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(124,58,237,0.5);
      }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 12px rgba(124,58,237,0);
      }

  }

.am-ai-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  }

.am-ai-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-violet);
  animation: amDot 1.2s ease-in-out infinite both;
  }

.am-ai-progress-dot:nth-child(2) {
  animation-delay: 0.15s;
  }

.am-ai-progress-dot:nth-child(3) {
  animation-delay: 0.3s;
  }

@keyframes amDot {
  0%, 60%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
      }

  30% {
    transform: scale(1);
    opacity: 1;
      }

  }

.am-ai-status {
  color: #4b5563;
  font-weight: 500;
  font-size: 0.8125rem;
  margin: 0;
  }

/* Result state - single image with hover toolbar */
.am-ai-result-state {
  padding: 14px;
  }

.am-ai-result-frame {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 50px -16px rgba(15, 23, 42, 0.25);
  animation: amResultIn .35s ease-out both;
  }

.am-ai-result-frame.am-media-item {
  aspect-ratio: auto;
  cursor: default;
  background: #fff;
  }

.am-ai-result-frame.am-media-item:hover {
  transform: none;
  box-shadow: 0 24px 50px -16px rgba(15, 23, 42, 0.25);
  }

.am-ai-result-frame .am-media-overlay {
  display: none;
  }

.am-ai-result-frame .am-select-check {
  opacity: 1;
  }

@keyframes amResultIn {
  from {
    opacity: 0;
    transform: scale(0.96);
      }

  to {
    opacity: 1;
    transform: scale(1);
      }

  }

.am-ai-result-img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  }

.am-ai-result-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
  }

.am-ai-result-frame:hover .am-ai-result-toolbar,
.am-ai-result-frame:focus-within .am-ai-result-toolbar {
  opacity: 1;
  transform: translateY(0);
  }

.am-ai-tool {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  }

.am-ai-tool:hover {
  background: rgba(255,255,255,0.18);
  }

.am-ai-tool-danger:hover {
  background: #ef4444;
  }

.am-ai-result-meta i {
  color: var(--ai-violet);
  }

.am-ai-result-prompt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

/* Footer */
.am-ai-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid #eef0f3;
  background: #fff;
  flex-shrink: 0;
  }

.am-ai-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0D6EFD;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.8125rem;
  }

.am-ai-link:hover {
  text-decoration: underline;
  color: #0D6EFD;
  }

.am-ai-add:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  }

.am-web-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #EBF2FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0D6EFD;
  font-size: 1.6rem;
  }

.am-gdrive-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #f0f4fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  }

.am-logo-badge {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  }

.am-toolbar .am-type-select {
  width: 140px;
  }

.am-toolbar .am-size-select {
  width: 120px;
  }

/* Drag-over state for upload zone */
.am-upload-zone.drag-over {
  border-color: #0D6EFD;
  background: #e4eeff;
  transform: scale(1.01);
  }

/* File-selected preview state */
.am-upload-selected {
  display: flex;
  flex-direction: column;
  height: 100%;
  }

.am-preview-grid-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  }

.am-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  }

.am-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }

.am-preview-thumb .am-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  font-size: 1.75rem;
  color: #93a8d0;
  }

.am-preview-thumb .am-thumb-icon span {
  font-size: 0.6rem;
  color: #7a8ea8;
  padding: 0 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

.rp-modal,
.modal {
  background: #1F1F1F78;
  }

.modal-backdrop.show {
  display: none;
  }

/* dashboard right box css end */

/* Post Preview css */

.post-preview-ctn {
  background: #dee2e6;
  }

.nav-tabs .social_preview.nav-link {
  padding: 0;
  margin: 0;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  height: auto;
  }

.nav-tabs .social_preview.active.nav-link,
.nav-tabs .social_preview.nav-link:hover {
  border-color: #0d6efd;
  }

.nav-tabs .social_preview.nav-link img {
  height: 35px;
  width: 35px;
  }

.post-account-info .user-icon {
  height: 40px;
  width: 40px;
  }

.fb-post-preview,
.twitter-post-preview,
.linkedin-post-preview,
.insta-post-preview.feed-preview,
.gbp-post-preview,
.pinterest-post-preview,
.YouTube-post-preview,
.threads-post-preview,
.bluesky-post-preview {
  max-width: 400px;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); */
  margin-bottom: 20px !important;
  border: 1px solid #dee2e6;
  border-radius: 10px !important;
  }

/* fb post preview css */
.main-img-100 img {
  width: 100%;
  object-fit: contain;
  object-position: center;
  }

.fb-post-image.one-img .main-img-100 img {
  max-height: 345px;
  }

.fb-post-image,
.fb-post-image .d-flex {
  gap: 2px;
  }

.fb-post-image.three-img .main-img-100 img,
.fb-post-image.four-img .main-img-100 img {
  object-fit: cover;
  max-height: 200px;
  }

.fb-post-preview .video-preview-box video {
  max-height: 345px;
  }

.main-img-50 {
  width: 255px;
  height: 200px;
  background: #f2f2f2;
  overflow: hidden;
  }

.main-img-50 img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  }

.more-img {
  width: 170px;
  height: 130px;
  background: #f2f2f2;
  overflow: hidden;
  }

.more-img img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: top;
  }

.more-img span {
  font-size: 30px;
  background: #000000c4;
  }

.post-comment img {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  }

.post-comment .comment-body {
  background: #F0F2F5;
  border-radius: 15px
}

.fb-post-link-preview-content .description {
  max-height: 55px;
  overflow: hidden;
  }

.fb-opt, .reels-opt {
  width: 50px;
  position: absolute;
  bottom: 30px;
  right: 10px;
  color: #ffffff;
  }

.fb-reel-preview .user-icon {
  height: 32px;
  width: 32px;
  flex: 0 0 32px;
  }

.fb-bg-list {
  display: flex;
  }

.fb-background-picker .btn-picker:not(.collapsed) {
  display: none;
  }

.fb-background-picker .fb-bg-list .bg-item {
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
  }

.fb-background-picker .fb-bg-list .bg-item img,.fb-background-picker .fb-bg-list .bg-item-big img {
  border: 2px solid #DEE2E6;
  box-shadow: rgb(0, 0, 0 , 0.1) 0px 0px 3px 0px;
  }

.fb-background-picker .fb-bg-list input:checked + img {
  border-color: #0d6efd;
  padding: 2px;
  }

.fb-background-picker .fb-bg-list .bg-item.btn-close-picker {
  background: #E4E6EB;
  }

.fb-tooltip .tooltip-inner {
  max-width: 250px;
  }

.fb-background-picker.disabled .btn-picker {
  pointer-events: all;
  }

.post-preview .fb-text-bg-post {
  width: 100%;
  height: 285px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  }

.post-preview .fb-text-bg-post span {
  font-size: 24px;
  font-weight: 700;
  word-break: break-word;
  word-wrap: break-word;
  }

.fb-text-bg-post .mention {
  width: auto;
  height: auto;
  border-radius: 0;
  background: no-repeat;
  font-weight: 700;
  text-decoration: underline;
  color: #fff;
  padding: 0;
  }

.post-preview .fb-text-bg-post .text-black .mention {
  color: #000000;
  }

.modal .fb-background-picker .fb-bg-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 86px;
  gap: 6px;
  }

/* Post Preview css end */

/* Twitter post preview css */

.twitter-post-ctn {
  padding-left: 65px;
  margin-top: -15px;
  }

.twitter-post-image,
.twitter-post-ctn video,
.twitter-thread-post-ctn video {
  border-radius: 15px;
  overflow: hidden;
  }

.twitter-post-ctn .link-preview,
.twitter-thread-post-ctn .link-preview {
  border-radius: 15px;
  }

.twitter-post-image.one-img img {
  width: auto;
  border-radius: 15px;
  }

.twitter-post-image.two-img .main-img-50:first-child {
  border: 0;
  border-right: 1px solid #ffffff;
  }

.twitter-post-image.two-img .main-img-50:last-child {
  border: 0;
  border-left: 1px solid #ffffff;
  }

.twitter-post-image.three-img .main-img-50,
.twitter-post-image.three-img .main-img-50 img {
  height: 280px;
  border: 0;
  border-right: 1px solid #ffffff;
  }

.twitter-post-image .twitter-more-img img {
  height: 140px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  }

.twitter-post-image .twitter-more-img img:first-child {
  border-bottom: 1px solid #ffffff;
  }

.twitter-post-image .twitter-more-img img:last-child {
  border-top: 1px solid #ffffff;
  }

.twitter-post-image.four-img .twitter-more-img:first-child {
  border-right: 2px solid #fff;
  }

.twitter-post-ctn video, .twitter-thread-post-ctn video {
  max-height: 320px;
  }

.alt-added, .alt-added-tooltip {
  bottom: 15px;
  left: 15px;
  background: #000000bf;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  }

.alt-text-popover.popover {
  border-radius: 18px;
  border: 1px solid #DDDDDD;
  max-width: 250px;
  }

.alt-text-popover.popover .popover-header {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  padding: 15px 15px 0;
  }

.alt-text-popover.popover .popover-body {
  text-align: left;
  padding: 10px 15px 10px;
  }

.alt-text-popover.popover span {
  color: #1E1E1E;
  padding: 5px;
  border: 1px solid #DDDDDD;
  border-radius: 40px;
  text-align: center;
  margin: 10px 0;
  font-weight: 700;
  display: block;
  cursor: pointer;
  }

.popover.alt-text-popover .popover-arrow::after {
  border-top-color: #fff;
  }

.engagement-by-library .color-box {
  height: 16px;
  width: 16px;
  display: block;
  border-radius: 50%;
  }

.engagement-by-library .progress_bar {
  height: 30px;
  opacity: 0.25;
  max-width: 100%;
  }

.engagement-by-library .total-progress {
  position: absolute;
  top: 15px;
  width: 100%;
  text-align: center;
  left: 0;
  }

/* Twitter post preview css end */

/* Twitter thread css */ 
.quill-twitter-thread.ql-container {
  max-height: inherit;
  }

.quill-twitter-thread .ql-editor {
  min-height: 60px;
  max-height: 200px;
  padding-right : 15px;
  }

.quill-twitter-thread .ql-editor::before {
  padding-right: 15px;
  }

.twitter-thread-preview-box .user-icon img {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  }

.twitter-thread-preview-box .user-icon .vr {
  align-self: center;
  background-color: #bbc6cb;
  width: 2px;
  border-radius: 8px;
  }

.twitter-thread-post-ctn .main-img-50 {
  width: 161px;
  height: 215px;
  }

.twitter-thread-post-ctn .main-img-50 img {
  height: 215px;
  }

/* Twitter thread css end*/ 

/* Linkedin post preview css */

.doc-preview-box .doc-hearder,.doc-preview-box .doc-footer {
  background: #000000cf;
  padding: 10px 15px;
  position: absolute;
  width: 100%;
  top: 0;
  gap: 10px;
  font-size: 13px;
  }

.doc-preview-box .doc-hearder .file-name {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

.doc-preview-box .doc-footer {
  top: auto;
  bottom: 0;
  }

.doc-preview-box .line {
  height: 1px;
  width: 100%;
  display: block;
  background: #ffffff;
  }

.slider-arrow {
  top: 0;
  right: 20px;
  }

.slider-arrow-left {
  right: auto;
  left: 20px;
  }

.slider-arrow-left span {
  transform: rotate(180deg);
  }

.doc-preview-box .slider-arrow span {
  display: flex;
  background: #000000cf;
  color: #ffffff;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  }

.doc-preview-box .doc-ctn .rp-doc-page-img {
  width: 100%;
  background: #f3f3f3;
  }

.doc-preview-box .line {
  overflow: hidden;
  }

.rp-doc-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #0a66c2;
  display: block;
  transition: width 0.3s ease;
  }

.linkedin-post-image.one-img .main-img-100 img,
.linkedin-post-preview .video-preview-box video {
  max-height: 500px;
  }

.linkedin-post-image,
.linkedin-post-image .d-flex {
  gap: 2px;
  }

/* Linkedin post preview css end */

/* Pill/Chip Preview Tabs for FB & IG multi-type posts */
.fb-preview-tabs,
.ig-preview-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-bottom: 16px !important;
  border-bottom: none !important;
  }

.fb-preview-tabs .nav-item,
.ig-preview-tabs .nav-item {
  margin: 0;
  }

.fb-preview-tabs .preview-pill-tab,
.ig-preview-tabs .preview-pill-tab {
  border-radius: 20px;
  background: #F0F2F5;
  border: none;
  color: #65676B;
  font-weight: 500;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  }

.fb-preview-tabs .preview-pill-tab.active,
.ig-preview-tabs .preview-pill-tab.active {
  background: #E6F2FF;
  color: #0d6efd;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
  }

/* Insta post preview css */

.insta-post-preview.feed-preview .main-img-100 {
  width: 100%;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  }

.insta-post-preview.feed-preview .main-img-100 img {
  object-position: center;
  object-fit: contain;
  }

/* Carousel dots sit below the media, not over it */
.insta-post-preview .carousel-indicators {
  position: static;
  margin: 10px 0 0;
  padding: 0;
  }

.insta-post-preview .carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  border: 0;
  border-radius: 50%;
  background-color: #c7c7c7;
  opacity: 1;
  text-indent: 0;
  }

.insta-post-preview .carousel-indicators [data-bs-target].active {
  background-color: #0d6efd;
  }

.insta-feed-video video {
  object-fit: contain;
  cursor: pointer;
  width: 100%;
  max-height: 500px;
  }

/* .insta-post-preview.feed-preview .post-msg p {
  max-height: 40px;
  overflow: hidden;
  }

*/

.insta-post-preview.feed-preview .post-msg p.expanded {
  max-height: inherit;
  overflow: auto;
  }

.insta-post-preview.feed-preview .post-msg p.expanded + .load-more {
  display: none !important;
  }

.insta-post-preview.feed-preview .post-msg p.ig-post-msg-text + .load-more {
  right: 0;
  bottom: -3px;
  padding-left: 5px;
  font-weight: 600;
  }

.insta-post-preview .post-msg.reels-post-msg,.fb-reel-preview .post-msg.reels-post-msg {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  max-height: 20px;
  }

.insta-post-preview .post-msg.reels-post-msg.expanded,.fb-reel-preview .post-msg.reels-post-msg.expanded {
  text-overflow: inherit;
  overflow: auto;
  white-space: normal;
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
  max-height: 215px;
  }

.insta-post-preview .post-msg.reels-post-msg.expanded::-webkit-scrollbar,.fb-reel-preview .post-msg.reels-post-msg.expanded::-webkit-scrollbar {
  display: none;
  }

.playpause span {
  cursor: pointer;
  font-size: 50px;
  }

.insta-post-preview.story-preview,
.insta-post-preview.reel-preview,
.tiktok-post-preview,
.YTshort-post-preview,
.fb-reel-preview {
  max-width: 315px;
  height: 560px;
  border-radius: 10px !important;
  }

.insta-tag-people-on-reels .insta-post-preview.reel-preview,
.insta-tag-products-on-reels .insta-post-preview.reel-preview {
  flex: 0 0 314px;
  height: 559px;
  }

.insta-post-preview.story-preview .insta-video,
.insta-post-preview.reel-preview .insta-video,
.tiktok-post-preview .tiktok-video,
.YTshort-post-preview .YTshort-video,
.fb-reel-preview .fb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  }

.insta-post-preview.story-preview .main-img-100,
.insta-post-preview.reel-preview .main-img-100 {
  height: 532px;
  }

.insta-post-preview.story-preview .main-img-100 img,
.insta-post-preview.reel-preview .main-img-100 {
  object-fit: cover;
  object-position: center;
  }

.story-preview .post-account-info,
.reel-preview .post-header {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(3, 3, 3, 1) 100%);
  }

/* The header sits over the frames, so it has to win against the carousel's own stacking */
.story-preview .post-account-info {
  z-index: 2;
  }

/* One segment per story, the way Instagram counts them */
.story-preview .carousel-indicators.story-segments {
  position: static;
  margin: 0 0 12px;
  }

.story-preview .carousel-indicators.story-segments [data-bs-target] {
  flex: 1 1 0;
  width: auto;
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background-color: #ffffff59;
  opacity: 1;
  }

.story-preview .carousel-indicators.story-segments [data-bs-target].active {
  background-color: #fff;
  }

.insta-grid {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 15px;
  }

.insta-grid .insta-grid-ctn {
  border-radius: 15px;
  overflow: hidden;
  }

.grid-view-container .post-date {
  display: none;
  }

.grid-view-container .post-image-container:hover .post-date {
  display: flex;
  background: #00000099;
  z-index: 1;
  }

.grid-view-container .post-image-container {
  background: #D6DAE0;
  }

.grid-view-container .post-image-container img {
  object-fit: cover;
  object-position: center;
  }

.insta-grid .grid-view-container {
  display: grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:150px;
  gap: 2px;
  max-height: 500px;
  }

.insta-grid .grid-view-container .in-queue {
  background: #ffffffe0;
  border-radius: 5px;
  height: 25px;
  width: 25px;
  bottom: 8px;
  right: 8px;
  }

/* .grid-view-container .post-image-container.reorder-post:hover {
  cursor: move;
  }

*/

.grid-view-container .post-image-container .library-name {
  background: #ffffffe0;
  padding: 5px;
  bottom: 8px;
  left: 0;
  }

/* Insta post preview css end */

/* Insta tag user css start */

.modal.insta-tag-user .image-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  flex: 0 0 400px;
  }

.modal .tagged-user-preview .replicated-container {
  max-width: 400px;
  width: 100%;
  margin: auto;
  }

.insta-tagged-user-preview .modal-dialog {
  max-width: 435px;
  }

.modal.insta-tag-user .image-container img {
  cursor: crosshair;
  }

.modal.insta-tag-products .image-container img {
  object-fit: contain;
  object-position: center;
  }

.indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #0d6efd;
  border-radius: 50%;
  border: 2px solid white;
  z-index: 5;
  }

.remove-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ffffffba;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: none;
  color: #000;
  }

.tagging-box,.product-tagging-box {
  position: absolute;
  display: none;
  background-color: white;
  padding: 12px;
  z-index: 10;
  width: 300px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  }

.tagging-box input {
  width: 100%;
  }

.insta_user_tag {
  position: absolute;
  background-color: rgb(0 0 0 / 80%);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 6;
  margin-top: 14px;
  }

.insta_user_tag span,.instaproducttag span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  }

.replicated-container .insta_user_tag::after {
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid rgba(0, 0, 0, .8);
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  }

.replicated-container .insta_user_tag {
  margin-top: 8px;
  }

.status-message {
  display: none;
  font-size: 12px;
  color: gray;
  }

.btnshowhidetag {
  background: #000000e0;
  text-align: center;
  cursor: pointer;
  width: 40px;
  bottom: 15px;
  height: 40px;
  border-radius: 50%;
  left: 15px;
  }

.btnshowhidetag.showhide-product {
  left: 65px;
  }

.tagged-user-preview .replicated-tags {
  display: block;
  }

/* Insta tag user css end */

/* Insta tag product css start */
 
.product-tagging-box input {
  width: calc(100% - 25px);
  margin-bottom: 5px;
  padding: 5px;
  }

.product-tagging-box button {
  margin-right: 5px;
  }

.instaproducttag {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 3px 5px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
  }

.product-list {
  list-style: none;
  padding: 0;
  max-height: 150px;
  }

.product {
  display: flex;
  align-items: center;
  cursor: pointer;
  }

.product-tagging-box .product-list .product {
  margin-bottom: 10px;
  }

.modal.insta-tag-products .product img,
.modal.insta-tag-products-on-reels .product-reels img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #DEE2E6;
  margin-right: 10px;
  }

.product .product-name,
.product-reels .product-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 10px;
  }

.tagged-product .product-list .product-reels.selected,
.tagged-product .product-list .instagram_product.selected {
  border-color:#0d6efd;
  }

.product-reels .ri-checkbox-circle-line,
.instagram_product .ri-checkbox-circle-line {
  display: none;
  }

.product-reels.selected .ri-checkbox-circle-line,
.instagram_product.selected .ri-checkbox-circle-line {
  display: block;
  }

.remove-product {
  margin-left: auto;
  cursor: pointer;
  }

.tagged-product .product-list .product,
.insta-tag-people-on-reels .people-list .tegged-user,
.tagged-product .product-list .product-reels {
  border: 1px solid #DEE2E6;
  padding: 10px;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 10px;
  }

.tagged-product .product-list {
  max-height: 210px;
  }

.insta-tag-products-on-reels .tagged-product .product-list,
.insta-tag-products .tagged-product .product-list {
  max-height: 380px;
  }

.insta-tag-people-on-reels .people-list {
  max-height: 410px;
  padding-right: 10px;
  }

.tagged-product-box .social-profiles-list .schedule-pic-box {
  padding: 1px;
  border: 1px solid transparent;
  cursor: pointer;
  opacity: .5;
  }

.tagged-product-box .social-profiles-list .schedule-pic-box.selected {
  border-color:#0d6efd;
  opacity: 1;
  }

.tagged-product-box .social-profiles-list {
  min-height: 40px;
  gap: 12px;
  overflow: auto hidden;
  padding: 2px 2px 8px 2px;
  }

.tagged-product-box .schedule-pic-box .user-check {
  left: -4px;
  right: auto;
  font-size: 18px;
  }

/* Insta tag product css end */

/* Insta post preview css end */

/* gbp post preview css*/

.gbp-post-ctn-box video {
  object-fit: cover;
  }

.gbp-offer .coupon-code {
  border: 1px dashed #e4e4e4;
  }

/* gbp post preview css end */

.pinterest-post-preview {
  border-radius: 20px;
  }

.user-info-more .btn-light,
.user-info-more .btn-light:hover {
  background: #efefef;
  border-radius: 40px;
  font-weight: 700;
  }

.pinterest-post-image img,
.pinterest-post-preview video {
  border-radius: 20px;
  }

/* TikTok post preview css*/
.tiktok-post-preview .post-header,.fb-reel-preview .post-header {
  background: linear-gradient(0deg, rgba(3, 3, 3, 0) 0%, rgba(1, 1, 1, .2) 100%);
  }

.tiktok-post-preview .post-footer,
.fb-reel-preview .post-footer,
.reel-preview .post-footer {
  background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0%, rgba(3, 3, 3, 0) 100%);
  padding-right: 60px !important;
  }

.tiktok-post-preview .post-footer .post-msg {
  max-height: 65px;
  overflow: hidden;
  }

.tiktok-opt,
.YTshort-opt {
  width: 50px;
  position: absolute;
  bottom: 30px;
  right: 10px;
  color: #ffffff;
  }

.YTshort-post-preview .post-footer {
  padding: 15px 55px 15px 15px;
  }

.YTshort-info {
  max-width: 400px;
  margin: auto;
  }

.YTshort-post-preview .post-footer .post-account-info img {
  width: 32px;
  flex: 0 0 32px;
  }

.YTshort-post-preview .post-footer .post-account-info span {
  border-radius: 20px;
  }

.tiktok-post-preview .user-icon {
  background: #000;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  position: relative;
  }

.tiktok-post-preview .user-icon .icon-plus {
  position: absolute;
  bottom: -7px;
  background: #FD295A;
  font-size: 10px;
  padding: 2px;
  border-radius: 50%;
  left: 12px;
  border: 1px solid #fff;
  }

.tiktok-post-preview .tiktok-mute {
  font-size: 16px;
  z-index: 2;
}

.tiktok-post-preview .tiktok-carousel-nav {
  bottom: 90px;
  z-index: 2;
}

.tiktok-post-preview .tiktok-carousel-arrow {
  line-height: 1;
  cursor: pointer;
}

.tiktok-post-preview .tiktok-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, .5);
  display: inline-block;
}

.tiktok-post-preview .tiktok-dot.active {
  background: #ffffff;
}

/* TikTok post preview css end*/

/* meta threads post preview css start*/
.threads-post-preview .user-icon img {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  }

.threads-post-image, .threads-post-ctn video, .threads-thread-post-ctn video {
  border-radius: 10px;
  overflow: hidden;
  }

.threads-post-image img {
  border-radius: 10px;
  }

.threads-post-image.single-img img {
  width: 100%;
  }

.threads-post-image.multiple-img img {
  height: 260px;
  object-fit: cover;
  object-position: center;
  }

.threads-post-image.multiple-img {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
  }

/* Every item keeps its own width and scrolls, rather than squashing to fit the card */
.threads-post-image.multiple-img > * {
  flex: 0 0 auto;
  }

/* Without a height a video lays itself out at its intrinsic size and blows out the card */
.threads-post-image.multiple-img .threads-media-video {
  height: 260px;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  }

.threads-post-image.multiple-img .threads-media-video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  }

/* Threads marks a scrollable strip with a slim bar under it */
.threads-post-image.multiple-img::-webkit-scrollbar {
  height: 3px;
  }

.threads-post-image.multiple-img::-webkit-scrollbar-thumb {
  background: #d3d3d5;
  border-radius: 999px;
  }

/* meta threads post preview css end*/

/* Bluesky post preview css */

.bluesky-post-image {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  }

.bluesky-post-image .alt-added {
  bottom: 8px;
  right: 8px;
  left: auto;
  background: #f1f3f5;
  padding: 3px 05px;
  opacity: 0.8;
  border-radius: 4px;
  font-size: 10px;
  }

.bluesky-post-image.two-img .main-img-50 {
  height: 185px;
  border: 0;
  }

.bluesky-post-image.two-img .main-img-50 img {
  height: 185px;
  }

.bluesky-post-image.three-img .main-img-50, .bluesky-post-image.three-img .main-img-50 img {
  height: 174px;
  border: 0;
  object-position: center;
  }

.bluesky-post-image .bluesky-more-img img {
  height: 85px;
  width: 100%;
  object-fit: cover;
  object-position:center;
  }

.bluesky-post-image.four-img .bluesky-more-img img {
  height: 120px;
  }

.bluesky-post-ctn video {
  height: 315px;
  border-radius: 10px;
  }

.bluesky-link-preview-content .description {
  height: 40px;
  overflow: hidden;
  }

/* Bluesky post preview css end*/

/* add time slots */

.select-accounts,
.select-library {
  width: 260px;
  flex: 0 0 260px;
  transition: 0.2s;
  z-index: 1;
  }

.alert-error {
  background-color: #f8d7da !important;
  border-color: #f17171 !important;
  }

.footer-ctn {
  z-index: 1;
  }

.select-accounts .user-info p,
.select-library .library-schedule-box p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  }

/* Show full social account name when toggle enabled */
.select-accounts.show-full-name .user-info p.account-name,
.show-full-name .user-info p.account-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  }

.workspace-accounts-list.select-accounts {
  width: 100%;
  flex: 0 0 100%;
  }

.edit-post .select-accounts.show {
  display: flex;
  }

.select-accounts .social-account .form-check-input,
.search-contentlist .form-check-input {
  flex: 0 0 16px;
  height: 16px;
  box-shadow: none;
  }

.select-accounts .social-account,
.inner-social-account .social-account {
  margin-top: 2px;
  margin-bottom: 15px;
  }

.select-accounts .social-account:last-child,
.inner-social-account .social-account:last-child {
  margin-bottom: 0;
  }

.select-accounts .schedule-pic-box {
  height: 32px;
  width: 32px;
  flex: 0 0 32px;
  }

.add-time-slots .col-md-9 {
  border-left: 1px dashed #1F1F1F33;
  }

.frequency-box ul {
  grid-template-columns: repeat(7, 1fr);
  }

.frequency-box li {
  color: #585858;
  cursor: pointer;
  text-align: center;
  }

.frequency-box li:hover {
  background: #F6F9FB;
  }

.frequency-box li.active {
  border: 1px solid #0d6efd !important;
  color: #0d6efd;
  }

.custom-frequency-list select {
  max-width: 150px;
  }

.custom-frequency-list:last-child {
  margin-bottom: 0 !important;
  }

.frequency-weekly,
.frequency-monthly {
  max-width: 460px;
  }

.frequency-custom {
  max-width: 550px;
  }

.RP-steps li {
  opacity: 0.6;
  }

.RP-steps li.text-success {
  opacity: 1;
  }

.step-boder {
  width: 40px;
  opacity: 1;
  margin: 0 5px;
  background: transparent;
  border: 1px dashed #1F1F1F33;
  }

.ScheduleLater-dropdown {
  width: 350px;
  box-shadow: 0px 4px 24px rgb(0 0 0 / 16%);
  padding: 15px;
  }

.inner-ctn .search-account, 
.custom-time .search-account, 
.form-select.status-filter, 
.form-select.platform-filter {
  max-width: 220px;
  }

.inner-ctn .AddYourProfiles .search-account {
  max-width: 100%;
  }

.account-more-opt label {
  width: 65px;
  flex: 0 0 65px;
  }

/* calendar css start */

.queue-history-tabs {
  padding: 5px 5px 6px;
  }

.queue-history-tabs.nav-tabs .nav-link {
  color: #6b7280;
  font-weight: 500;
  padding: 4px 15px;
  }

.queue-history-tabs.nav-tabs .nav-link.active {
  background: #E6F2FF;
  color: #0d6efd;
  font-weight: 600;
  }

.post-image {
  height: 130px;
  width: 130px;
  flex: 0 0 130px;
  }

.post-image img {
  height: 130px;
  width: 130px;
  object-fit: cover;
  object-position: center;
  }

.post-image.link-post img {
  height: 80px;
  margin-bottom: 3px;
  }

.post-message {
  height: 78px;
  margin-bottom: 12px;
  word-break: break-word;
  }

.post-msg p {
  word-wrap: break-word;
  word-break: break-word;
  }

.post_preview_tabs .post-msg p {
  word-break: normal;
  }

.library-post-content .post-message {
  height: 90px;
  margin: 0;
  }

.ApprovalPost .library-post-content .post-message {
  height: 90px;
  }

.UploadContentBulk .library-post-content .post-message {
  height: 110px;
  }

.post-edit-delete .btn,.template-library-box .btn {
  padding: 5px 8px;
  border-radius: 5px;
  color: #a3a3a3;
  display: flex;
  align-items: center;
  height: 30px;
  }

.post-check-box {
  height: 16px;
  width: 16px;
  flex: 0 0 16px;
  cursor: pointer;
  margin-top: 0;
  }

.post-social-account .schedule-pic-box {
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  }

.post-social-account .account-list li:first-child {
  padding-left: 0 !important;
  }

.post-social-account .account-list li {
  padding: 5px 0;
  }

.post-social-account .account-list .user-info .icon-arrow,.pointer-table-row .icon-arrow {
  height: 18px;
  width: 18px;
  display: flex;
  flex: 0 0 18px;
  background: #E6F2FF;
  color: #0d6efd;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  line-height: 10px;
  }

.post-social-account .account-list .user-info .icon-arrow:hover,.pointer-table-row .icon-arrow:hover {
  color: #0d6efd;
  }

.pointer-table .pointer-table-row .icon-arrow {
  width: 20px;
  height: 20px;
  }

.post-social-account .more-account {
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  background: #E6F2FF;
  border-radius: 5px;
  color: #0d6efd;
  }

.library-post-content .post-social-account .more-account {
  height: 28px;
  width: 28px;
  flex: 0 0 28px;
  }

.queue-post-content .post-library {
  position: absolute;
  bottom: 20px;
  right: 65px;
  }

.library-post-content .post-library {
  position: absolute;
  bottom: 15px;
  right: 15px;
  }

.report-card .queue-post-content .post-library {
  right: 1rem;
  }

.error .schedule-pic-box,
.post-social-account .account-list li.error .schedule-pic-box::before {
  background: #f17171;
  }

.error .schedule-pic-box span {
  position: absolute;
  color: #e81313;
  top: 0;
  left: 0;
  }

.error .schedule-pic-box .schedule-pic {
  opacity: 0.9;
  border-color: #f17171;
  }

.post-social-account .account-list li.error .schedule-pic-box::after {
  background: #fdf5f5;
  }

.alert-danger.error {
  border-color: #f17171 !important;
  background: #fdf5f5 !important;
  }

.more-account .btn {
  padding: 8px 10px;
  }

.social-tab-list li:last-child {
  padding-right: 0 !important;
  margin-right: 0 !important;
  }

.social-tab-list img {
  width: 24px;
  height: 24px;
  flex: 0 0 25px;
  background: #f6f6f6;
  border-radius: 50%;
  }

.social-tab-list .active img,
.social-tab-list img:hover {
  border-color: #0d6efd;
  }

.social-tab-list li {
  height: 45px;
  cursor: pointer;
  color: #101010;
  position: relative;
  }

.post-preview .post-edit {
  bottom: 1px;
  right: 1px;
  border: 1px solid #fff;
  }

.post-preview .post-error {
  top: 1px;
  left: 1px;
  border: 1px solid #fff;
  }

.post-preview .icon-warning.post-error {
  border-color: #fbb500;
  font-size: 10px;
  padding: 2px;
  border-width: 2px;
  }

.library-post-content .post-ctn-header .more-action span.icon-warning-circle,
.library-post-content .post-ctn-header .more-action span.icon-warning {
  top: 2px;
  left: -3px;
  background: #FFFFFF;
  }

.library-post-list .library-post-content .post-description.pe-5 {
  padding-right: 0 !important;
  overflow: hidden;
  }

.social-tab-list li button.active,
.social-tab-list li:hover {
  color: #1F1F1F !important;
  }

.social-tab-list li button.active:after {
  content: "";
  background: #ffffff;
  height: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -3px;
  }

.social-tab-list li button {
  height: 45px;
  padding: 0 10px;
  margin-bottom: 0 !important;
  }

.UploadContentBulk .social-tab-list li button {
  height: 52px;
  }

.post-edit-delete {
  width: 48px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  gap: 15px;
  }

.fectch-ctn-list .post-edit-delete {
  right: auto;
  left: 0;
  }

.FeedManager .post-edit-delete {
  top: 35px;
  }

.ManageVariations .post-edit-delete {
  top: 0;
  }

.UploadContentText .post-edit-delete {
  top: 0;
  right: 1px;
  }

.post-main-ctn .tab-content .tab-pane.active {
  display: flex;
  gap: 10px;
  }

.social-tab-list li span {
  position: absolute;
  top: 24px;
  right: 6px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  font-size: 13px;
  }

.social-tab-list li span.icon-warning {
  top: 1px;
  right: 1px;
  }

.social-tab-list .error img {
  background: #f8d7da;
  }

.social-tab-list .error.active img {
  border-color: #eb5757;
  }

.carousel-control-next, .carousel-control-prev {
  width: 30px;
  overflow: hidden;
  }

.carousel-control-next,
.carousel-control-prev {
  opacity: 1;
  }

.carousel-control-next-icon,
.carousel-control-prev-icon {
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
  display: flex;
  }

.carousel-control-prev-icon {
  background-image: url("../img/icon-prev.png");
  }

.carousel-control-next-icon {
  background-image: url("../img/icon-next.png");
  }

.user-msg-details {
  padding: 10px;
  }

.user-msg-details .border {
  border-color: #74bbfe !important;
  }

.user-msg-details .more-info img,
.SocialAccountDetails .social-account-list .more-info img {
  width: 16px;
  }

.day-header:last-child,
.days-container:last-child {
  border-right: 1px solid #dee2e6 !important;
  }

.queue-calendar {
  min-width: 1200px;
  }

.day-header,
.days-container {
  flex-grow: 1;
  }

.days-container {
  min-height: 100px;
  display: grid;
  grid-auto-rows: max-content;
  }

.queue-calendar .day-header,
.queue-calendar .days-container {
  flex: 0 0 calc(100% / 7);
  position: relative;
  width: calc(100% / 7);
  }

.timeslots-calendar .queue-calendar .day-header,
.timeslots-calendar .queue-calendar .days-container {
  flex: 0 0 calc(100% / 8);
  position: relative;
  width: calc(100% / 8);
  }

.queue-calendar .days-container {
  background: #ffffff;
  gap: 10px;
  padding: 8px;
  }

.queue-calendar .days-container.day-disabled {
  background: #F6F9FB;
}

.queue-calendar .cal-post-list,
.timeslots-calendar .queue-calendar .cal-post-list {
  min-height: 50px;
  }

.queue-calendar.queue-week-calendar .cal-post-list {
  min-height: 400px;
  }

.queue-calendar .days-container > p {
  color: #585858;
  }

.queue-calendar .days-container.day-disabled > p,.queue-calendar .days-container.next-month > p {
  opacity: .4;
  }

.days-container .schedule-pic-box,
.schedule-pic-box.small-pic {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  margin-top: -5px;
  }

.days-container .schedule-pic-box .schedule-pic {
  height: 20px;
  width: 20px;
  }

.days-container .schedule-pic-box .small-social-icon,
.schedule-pic-box.small-pic .small-social-icon {
  width: 14px;
  height: 14px;
  bottom: -5px;
  right: -3px;
  }

.days-container .post-message {
  max-height: 40px;
  height: auto;
  overflow: hidden;
  }

.days-container .post-image {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  }

.days-container .post-image img {
  height: 40px;
  width: 40px;
  object-fit: cover;
  object-position: center;
  }

.days-container .post-image .icon-post-type {
  position: absolute;
  top: 0;
  left: 0;
  background: #00000057;
  }

.days-container .queue-post-content .post-edit-delete {
  top: auto;
  position: relative;
  border-top: 1px solid #e5e6eb;
  padding: 6px 8px;
  gap: 8px;
  }

.timeslots-calendar .days-container .queue-post-content .post-edit-delete {
  padding: 2px 10px;
  }

.days-container .queue-post-content .post-edit-delete .cal-btn-drag,
.timeslots-calendar .days-container .queue-post-content .editschedule .cal-btn-drag {
  cursor: grab;
  }

.days-container.highlight-day-box {
  background-color: #E6F2FF;
  }

.days-container .ui-state-highlight-old {
  background-color: #ffffff;
  border: 1px dashed #C9D2DF;
  border-radius: 6px;
  text-align: center;
  height: 100px;
  margin-bottom: 10px;
  }

  .days-container .ui-sortable-placeholder {
  background-color: #ffffff;
  border: 1px dashed #0d6efd;
  border-radius: 6px;
  text-align: center;
  height: 100px;
  margin-bottom: 10px;
  }

.timeslots-calendar .days-container .ui-state-highlight-old,
.timeslots-calendar .days-container .ui-sortable-placeholder {
  height: 45px;
  }

.calendar-cell .cal-post-list .ui-sortable-placeholder {
  height: 0 !important;
  }

.calendar-cell .cal-queue-post-content {
  margin-bottom: 10px;
  }

.calendar-cell .cal-queue-post-content.ui-sortable-helper {
  transform: rotate(5deg);
  }

/* SortableJS drag states */
.calendar-cell .cal-queue-post-content.ts-slot-ghost {
  opacity: 0.5;
  border: 1px dashed #0d6efd;
  background: #eaf2ff;
  }

.calendar-cell .cal-queue-post-content.ts-slot-chosen {
  cursor: grabbing;
  }

/* Empty-cell "Add time slots" affordance */
/* Box comes from Bootstrap on the button itself; only the dashed placeholder
   look is left here. */

.timeslots-calendar .ts-add-slot {
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #94a3b8;
  line-height: 1.2;
  transition: border-color .15s, color .15s, background .15s;
  }

.timeslots-calendar .ts-add-slot:hover {
  border-color: #0d6efd;
  color: #0d6efd;
  background: #eaf2ff;
  }

/* Hide the affordance once the cell holds a time slot. !important because the
   button carries Bootstrap's d-flex, which is itself !important. */

.timeslots-calendar .cal-post-list:has(.cal-queue-post-content) .ts-add-slot {
  display: none !important;
  }

.calendar-cell .show-more {
  margin-top: -10px;
  }

/* .days-container .cal-post-list {
  gap: 10px;
  }

*/

.days-container .queue-post-content {
    border: 1px solid #e5e6eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.days-container .queue-post-content:hover {
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.18);
    /* border: 1px solid #bdbdbd; */
}

.librariesfilter {
  position: absolute;
  top: 52px;
  z-index: 9;
  background: #ffffff;
  width: 400px;
  right: 0;
  }

.librariesfilter .libraries-list {
  max-height: 180px;
  overflow-y: auto;
  }

.SocialAccountDetails .offcanvas-body .social-account-list.error .btn-outline-secondary {
  min-width: 28px;
  flex: 0 0 28px;
  }

.librariesfilter .library-schedule-box,
.copy-to-libraries .library-schedule-box,
.move-to-libraries .library-schedule-box {
  height: 50px;
  }

.user-msg-details .btn-outline-secondary,
.SocialAccountDetails .offcanvas-body .btn-outline-secondary {
  font-size: 12px;
  border-radius: 5px;
  min-width: 75px;
  }

.days-container .cal-date {
  /* background: #F0F0F0;
  */
color: #000000;
  }

/* A layout the current mode cannot use stays listed but greyed */
.custom-dropdown .single-workspace.disabled {
  opacity: .45;
  pointer-events: none;
  }

/* Filters offcanvas: one tab per filter, each a list of the workspace picker's checkbox cards (.clw-libpick-row) */
/* The Filters drawer is narrower than the profile drawers: checkbox rows need no more */
.offcanvas.offcanvas-end.AddYourProfiles.cal-filters {
  max-width: 480px;
  }

/* The icon buttons beside a search box stretch to its height (in a stretched d-flex wrapper);
   the width is the search box's 43px height, so they stay square without overflowing the row */
.cal-filters .btn-icon {
  width: 43px;
  }

/* The composer's own list: an expired or paused profile is shown but not clickable. */
.select-accounts .account-list .social-account[data-status],
.select-accounts .account-list .social-account[data-status]:hover {
  border-color: #dee2e6;
  cursor: default;
  }

/* calendar css start end */

/* contentlist css start  */

.select-library .library-schedule-box,
.AddLabel .library-schedule-box {
  height: 45px;
  padding: 0 15px;
  width: 100%;
  }

.library-post-list .post-social-account .schedule-pic-box {
  height: 25px;
  width: 25px;
  flex: 0 0 25px;
  }

.library-post-list .small-social-icon {
  height: 15px;
  width: 15px;
  }

.library-post-list .post-social-account .account-list li .schedule-pic-box::after,
.library-post-list .post-social-account .account-list li .schedule-pic-box::before {
  display: none;
  }

.post-variation {
  font-weight: normal;
  }

.timeslots-calendar .user-info .b6 {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

.timeslots-calendar .btn.btn-icon {
  padding:6px 5px;
  }

.timeslots-calendar .days-container {
  min-height: 50px;
  display: grid;
  grid-auto-rows: max-content;
  }

.timeslots-calendar .days-container .social-account:last-child {
  margin-bottom: 0 !important;
  }

.timeslots-calendar .days-container .library-name {
  display: flex;
  width: 100%;
  background: #ffffff;
  padding: 5px;
  align-items: center;
  gap: 3px;
  }

.timeslots-calendar .monthly .days-container {
  min-height: 110px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid transparent;
  }

.timeslots-calendar .monthly .days-container.highlight-day-box {
background: #ffffff;
border: 1px solid #C9D2DF;
}

.time-slots-ctn {
  min-width: 1050px;
  }

.timeslots-calendar .days-container .cal-queue-post-content:hover .editschedule {
  display: flex;
  gap: 15px;
  }

.timeslots-calendar .days-container .queue-post-content {
  position: relative;
  margin: 0;
  }

  .timeslots-calendar .days-container .cal-post-list {
  gap: 10px;
  min-height: 50px;
  }

.datepicker-one-off-post .ui-widget.ui-widget-content {
  border: 0;
  width: 100%;
  box-shadow: none;
  padding: 0;
  }

.select-accounts .tab-pane.flex-column.active {
  display: flex;
  }

.days-container .more-account {
  height: 28px;
  width: 28px;
  flex: 0 0 30px;
  background: #F6F9FB;
  border-radius: 5px;
  color: #0d6efd;
  position: absolute;
  bottom: 6px;
  right: 6px;
  }

.days-container .more-account.icon-arrow {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  top: -1px;
  right: 0;
  }

.btn-calendar, .BackToTop {
  position: absolute;
  bottom: 8px;
  right: 36px;
  height: 40px;
  width: 40px;
  flex: 0 0 50px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
  z-index: 9;
  color: #000;
  }

.add-time-slots .BackToTop {
  right: 100px;
  }

.btn-accounts-filter {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 45px;
    width: 45px;
    flex: 0 0 45px;
    filter: drop-shadow(2px 4px 2px #0000004a);
    z-index: 2;
}

.library-post-content .more-options-btn {
  padding: 5px 10px;
  }

.library-post-content .post-ctn-header {
  min-height: 35px;
  position: relative;
  border-radius: 6px 6px 0 0;
  }

.library-post-content .post-scheduled-details {
  padding-right: 47px;
  }

.library-post-content .post-social-account .account-pointer {
  border-radius: 5px;
  gap: 3px;
  }

.library-post-content .post-ctn-header .ui-sortable-handle {
  min-height: 46px;
  }

.edit-pointer .number {
  border: 1px solid #e4e4e4;
  height: 35px;
  width: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  }

.set-pointer label {
  padding-right: 62px;
  }

.alert .btn-close {
  position: absolute;
  font-size: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 6px;
  opacity: 1;
  right: -10px;
  top: -10px;
  }

.create-post .alert .btn-close {
  background-color: transparent;
  box-shadow: none;
  top: 2px;
  right: 0 !important;
  left: auto;
  }

.library-post-content .edit-pointer .btn {
  padding: 6px;
  border-radius: 5px;
  font-size: 12px;
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  }

.pointer-table-row:last-child {
  border-bottom: none !important;
  }

.pointer-table-row .icon-arrow-top.collapsed::before {
  content: "\e90f";
  }

.FeedManager .library-post-content .post-ctn-header {
  min-height: auto;
  }

/* Compact feed-review card thumbnail (minimal approval-card layout) */

.FeedManager .post-feed-list .post-image,
.FeedManager .post-feed-list .post-image img {
  height: 64px;
  width: 64px;
  flex: 0 0 64px;
  }

.FeedManager .post-feed-list .carousel-control-prev,
.FeedManager .post-feed-list .carousel-control-next {
  display: none;
  }

.post-main-ctn {
  min-height: 150px;
  }

.SearchContentBox {
  max-width: 400px;
  }

.collapsed .iconsearch:before {
  content: "\e938";
  }

/* contentlist css end  */

/* Plug-ins css start  */

.bitlyAccountList .account-list {
  max-height: 235px;
  }

.bagoftags-list {
  min-height: 130px;
  }

.bagoftags-list p {
  max-height: 65px;
  overflow: auto;
  text-overflow: ellipsis;
  }

.bag-tile .ms-auto {
  flex: 0 0 50px;
  }

.no-ctn-box {
  max-width: 500px;
  }

.CustomFields .libraries-list .ms-auto {
  flex: 0 0 40px;
  }

.CustomFields .libraries-list .library-schedule-box p {
  text-overflow: ellipsis;
  }

.manage-Value .custom-dropdown {
  width: 95%;
  max-height: 300px;
  overflow-y: auto;
  }

.library-schedule-box input:disabled {
  color: #101010;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  }

.library-schedule-box.selected input:disabled {
  color: #1F1F1F;
  }

.offcanvas.offcanvas-end.AddYourProfiles.offcanvas-small {
  width: 600px;
  }

/* Plug-ins css end  */

/* Account Settings css end  */

.accountsettings .tab-content > .active,
.ApprovalQueue .tab-content > .active {
  display: flex;
  height: 100%;
  }

.upload-profile-pic .schedule-pic-box {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  }

.upload-profile-pic .schedule-pic-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  }

.CurrentPlan .bg-color-secondary .fw-semibold {
  background: #ffc107;
  border-radius: 5px;
  }

#Security .btn-outline-secondary {
  bottom: 30px;
  }

.plan-details-ctn a {
  font-weight: 500;
  }

.add-on-quantity .btn-icon {
  width: 45px;
  }

.add-on-quantity .form-control {
  width: 60px;
  font-weight: 500;
  }

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

input[type="number"] {
  -moz-appearance: textfield;
  }

.add-on-price {
  width: 70px;
  flex: 0 0 70px;
  text-align: right;
  }

.add-on-name {
  width: 200px;
  flex: 0 0 200px;
  overflow: hidden;
  }

.add-on-name span {
  display: block;
  height: 38px;
  }

/*
 * Add-ons grouped line-item list. The info block flexes and wraps the
 * control group to its own line in narrow containers, so the stepper can
 * never overflow regardless of viewport or sidebar widths.
 */
.rp-plan-details-toggle[aria-expanded="true"] .icon-arrow-down1 {
  transform: rotate(180deg);
}

.rp-addon-list .rp-addon-row:not(:last-child) {
  border-bottom: 1px solid #dee2e6;
}

.rp-addon-icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.rp-addon-row .add-on-quantity .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 90px;
}

.rp-addon-row .add-on-quantity .btn-icon {
  flex: 0 0 45px;
}

.Add-ons hr {
  background: #dee2e6 !important;
  }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  opacity: 1;
  }

.chart_wrapper {
  height: 400px;
  }

.multi-currency .dropdown-menu {
  max-height: 350px;
  overflow: auto;
  }

.multi-currency img {
  border: 1px solid #e4e4e4;
  border-radius: 3px;
  }

/* Account Settings css end  */

/* reports css start */

.report-icon {
  font-size: 14px;
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  background: #E6F2FF;
  color: #0d6efd;
  }

.reports-ctn .main-reports:hover, 
.reports-ctn .rp-card:hover, 
.reports-ctn .social-post:hover {
  box-shadow: 0 0px #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  }

.report-card .progress_bar {
  height: 35px;
  opacity: 0.25;
  }

.report-card .total-progress {
  position: absolute;
  width: 100%;
  left: 0;
  top: 25px;
  }

.report-card .btn-outline-secondary.active {
  background: #ffffff;
  border-color: #0d6efd !important;
  color: #0d6efd;
  }

.img-upload-box .UploadDropMedia {
  background: #ffffff;
  padding: 50px 0;
  height: auto;
  }

.img-upload-box .UploadDropMedia .img-uploaded {
  position: absolute;
  top: 0;
  background: #fff;
  left: 0;
  }

.report-card .post-image {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  }

.report-card .post-image img {
  width: 80px;
  height: 80px;
  }

.report-card .post-preview .post-message {
  height: 65px;
  margin: 0;
  }

.custom-popover.popover {
  border-radius: 5px;
  border: 1px solid #DDDDDD;
  max-width: 250px;
  background: #2F2F2F;
  color: #ffffff;
  }

.custom-popover.popover .popover-header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  padding: 15px 15px 0;
  background: #2F2F2F;
  }

.custom-popover.popover .popover-body {
  text-align: left;
  padding: 10px 15px 10px;
  color: #ffffff;
  }

.custom-popover.popover .popover-body hr {
  margin:5px 0;
  }

.custom-popover.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .custom-popover.bs-popover-end>.popover-arrow::after {
  border-right-color: #2F2F2F;
  }

.custom-popover.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .custom-popover.bs-popover-start>.popover-arrow::after {
  border-left-color:#2F2F2F;
  }

.custom-popover.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .custom-popover.bs-popover-top>.popover-arrow::after {
  border-top-color:#2F2F2F;
  }

.custom-popover.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .custom-popover.bs-popover-bottom>.popover-arrow::after {
  border-bottom-color:#2F2F2F;
  }

.report-table td,.report-table th {
  vertical-align: middle;
  padding: .75rem;
  }

.report-table .table > :not(:first-child) {
  border-top: 0;
  }

.rp-reports .percentage.zero {
  color: #B3B3B3;
  }

.rp-reports .percentage.down {
  color: #E81313;
  }

.rp-reports .percentage {
  gap: 3px;
  color: #45B854;
  }

.top-post .post-message {
  height: 76px;
  overflow: hidden;
  margin: 0;
  }

.top-post .post-img img,.top-post .post-img video {
  height: 220px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  }

.top-post .post-type {
  bottom: 15px;
  right: 15px;
  height: 30px;
  width: 30px;
  border-radius: 5px;
  color: #ffffff;
  background: rgba(22, 32, 32, 0.56);
  }

.top-post .post-img .link-title {
  top: 0;
  left: 0;
  background: #ffffff;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  }

.top-post .text-post-content .post-message {
  height: 298px;
  }

.video-performance .chart_wrapper.chart-left {
  height: 400px;
  width: 100%;
  }

.video-performance .chart_wrapper.chart-right {
  height: 190px;
  }

.video-performance .chart_wrapper.chart-right canvas {
  max-width: 240px;
  }

.top-countries img {
  width: 30px;
  border: 1px solid #e4e4e4;
  height: 21px;
  object-fit: cover;
  }

.hashtag-list .progress {
  height: 5px;
  }

.hashtag-list .progress .progress-bar {
  background: #6F5ED3;
  }

.hashtag-list.list-right .progress .progress-bar {
  background: #08C4B2;
  }

.reports-ctn .rp-card-body .social-profiles {
  max-height: 350px;
  overflow-y: auto;
  }

/* Reports sidebar collapse styles */
.rp-reports .select-accounts.accounts-filter {
  width: 260px;
  flex: 0 0 260px;
  }

.rp-reports .select-accounts.accounts-filter.show {
  width: 85px;
  flex: 0 0 85px;
  }

.rp-reports .select-accounts.accounts-filter.show .social-account {
  width: 50px;
  }

.rp-reports .select-accounts.accounts-filter.show .user-info,
.rp-reports .select-accounts.accounts-filter.show .title.b4,
.rp-reports .select-accounts.accounts-filter.show p.title {
  display: none;
  }

.rp-reports .select-accounts.accounts-filter.show .search-account,
.rp-reports .select-accounts.accounts-filter.show .menu_sa_status {
  display: none !important;
  }

.rp-reports .select-accounts.accounts-filter.show .justify-content-between.w-100 {
  justify-content: center !important;
  }

.rp-reports .select-accounts.accounts-filter.show .icon-collaps::before {
  content: "\e940";
  }

/* reports css end */

/* Inbox sidebar collapse styles */
.inbox .select-accounts.accounts-filter {
  width: 260px;
  flex: 0 0 260px;
  }

.inbox .select-accounts.accounts-filter.show {
  width: 85px;
  flex: 0 0 85px;
  }

.inbox .select-accounts.accounts-filter.show .social-account {
  width: 50px;
  }

.inbox .select-accounts.accounts-filter.show .user-info,
.inbox .select-accounts.accounts-filter.show .title {
  display: none;
  }

.inbox .select-accounts.accounts-filter.show .search-account,
.inbox .select-accounts.accounts-filter.show .menu_sa_status {
  display: none !important;
  }

.inbox .select-accounts.accounts-filter.show .justify-content-between.w-100 {
  justify-content: center !important;
  }

.inbox .select-accounts.accounts-filter.show .icon-collaps::before {
  content: "\e940";
  }

/* inbox css end */

/* Plugin sidebar collapse styles */
.plugin-page .select-accounts.accounts-filter {
  width: 260px;
  flex: 0 0 260px;
  }

.plugin-page .select-accounts.accounts-filter.show {
  width: 85px;
  flex: 0 0 85px;
  }

.plugin-page .select-accounts.accounts-filter.show .title,
.plugin-page .select-accounts.accounts-filter.show .library-schedule-box p {
  display: none;
  }

.plugin-page .select-accounts.accounts-filter.show .search-account {
  display: none !important;
  }

.plugin-page .select-accounts.accounts-filter.show .justify-content-between.w-100 {
  justify-content: center !important;
  }

.plugin-page .select-accounts.accounts-filter.show .icon-collaps::before {
  content: "\e940";
  }

/* DM Automation styles - matching reports design */
.rp-dm-automation .select-accounts.accounts-filter {
  width: 260px;
  flex: 0 0 260px;
  }

.rp-dm-automation .select-accounts.accounts-filter.show {
  width: 85px;
  flex: 0 0 85px;
  }

.rp-dm-automation .select-accounts.accounts-filter.show .social-account {
  justify-content: center;
  }

.rp-dm-automation .select-accounts.accounts-filter.show .user-info,
.rp-dm-automation .select-accounts.accounts-filter.show .title,
.rp-dm-automation .select-accounts.accounts-filter.show p.title,
.rp-dm-automation .select-accounts.accounts-filter.show .search-account,
.rp-dm-automation .select-accounts.accounts-filter.show .no-result-found {
  display: none !important;
  }

.rp-dm-automation .select-accounts.accounts-filter.show .justify-content-between.w-100 {
  justify-content: center !important;
  }

.rp-dm-automation .select-accounts.accounts-filter.show .icon-collaps::before {
  content: "\e940";
  }

/* plugin css end */

.workspace-list .selected {
  border-color: #1fa5ab !important;
  background: #e9f6f7;
  color: #1fa5ab;
  font-weight: 500;
  }

.user-list .user-comment + img {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  }

/* inbox css start */

.empty_box img {
  max-width: 150px;
  }

.inbox-filter select {
  max-width: 170px;
  }

.user_list_box .user-list .post-check-box {
  margin-top: 14px;
  }

.inbox .tab-content > .active {
  display: flex !important;
  }

.inbox .user-list.selected {
  border-color: #0d6efd !important;
  }

.reply-box-ctn .post-box {
  max-width: 500px;
  margin: auto;
  }

.reply-box .emojionearea .emojionearea-editor {
  min-height: 60px;
  padding: 0;
  margin-bottom: 40px;
  }

.chat-box-ctn .reply-box .emojionearea .emojionearea-editor {
  min-height: 35px;
  padding: 12px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 30px;
  }

.reply-box .emojionearea .emojionearea-button {
  bottom: 15px;
  left: 10px;
  }

.comment-reply-box::before {
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  background: #dee2e6;
  top: 0;
  left: -14px;
  }

.msg-chat p {
  padding: 10px;
  border-radius: 15px;
  }

.msg-chat .replies p {
  border-bottom-left-radius: 0 !important;
  }

.msg-chat .received p {
  border-bottom-right-radius: 0 !important;
  }

.inbox .reply-box {
  padding-bottom: 50px !important;
  padding-left: 15px !important;
  }

.inbox .chat-box-ctn .reply-box {
  padding: 15px 15px 60px 15px !important;
  }

.inbox .ql-editor {
  min-height: 60px;
  max-height: 190px;
  padding-right: 18px;
  }

.inbox .chat-box-ctn .ql-editor {
  min-height: 25px;
  padding-right: 30px;
  }

.inbox .comment-reply-img {
  height: 150px;
  width: 150px;
  object-fit: cover;
  object-position: center;
  }

.manage-gbp-template .uploaded-media-box,.template-list .choose-template img {
  height: 100%;
  width: 100%;
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 0;
  border: 1px solid #cacacc;
  }

.manage-gbp-template .uploaded-media-box img,.template-list .choose-template img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  }

.choose-template .form-check-input {
  top: 4px;
  right: 8px;
  font-size: 16px;
  }

.tui-image-editor-header-buttons button.disabled {
  opacity: 1;
  }

#tui-gbp-floating-opacity-panel {
  display: none;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 12px 16px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }

#tui-gbp-logo-opacity-value {
  font-size: 13px;
  min-width: 40px;
  text-align: right;
  }

#tui-gbp-logo-opacity-slider {
  width: 120px;
  cursor: pointer;
  accent-color: #fff;
  }

#gbp-template-panel {
  display: none;
  position: absolute;
  top: 64px;
  left: 12px;
  background: rgba(30, 30, 30, 0.97);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 14px 18px;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }

.gbp-template-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  }

.gbp-template-data {
  position: absolute;
  top: -8px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(30, 30, 30, 0.97);
  }

.inbox .uploaded-media-box,.inbox .uploaded-media-box img {
  height: 80px;
  width: 80px;
  }

/* inbox css end */

.library-contentlist, .library-time-slots, .create-post-ctn {
  display: block !important;
  transition: 0.2s;
  }

.no-post-added img {
  max-width: 130px;
  }

.divider-or {
  color: #999999;
  text-align: center;
  position: relative;
  max-width: 400px;
  margin: 25px auto 15px;
  display: block;
  width: 100%;
  }

.upload-content-bulk .divider-or {
  max-width: 800px;
  margin: 20px auto;
  }

.divider-or b {
  background: #fff;
  position: relative;
  z-index: 1;
  padding: 0 12px;
  font-size: 12px;
  }

.divider-or::after {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0px;
  border-top: 1px dashed  #ddd;
  }

.recurpost-login-signup .divider-or {
  max-width: 350px;
  margin: 10px auto 10px;
  }

.import-data-list .cricle-icon {
  height: 50px;
  width: 50px;
  flex: 0 0 50px;
  background: #F6F9FB;
  }

.import-data-list .btn {
  min-width: 100px;
  }

.bulk-upload-post-list .post-header a.btn {
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
  padding: 0;
  font-size: 20px;
  }

.bulk-upload-post-list .post-index {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
  }

.bulk-upload-post-list .post-image {
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  }

.bulk-upload-post-list .post-image .icon {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  }

.bulk-upload-post-list .post-image img {
  height: 35px;
  width: 35px;
  }

.bulk-upload-post-list .post-header.collapsed {
  display: flex !important;
  }

.bulk-upload-post-list .post-header {
  display: none !important;
  min-height: 35px;
  }

.bulk-upload-post-list .edit-post.show .post-header {
  display: flex !important;
  }

.bulk-upload-post-list .library-post-content {
  min-height: 43px;
  }

.library-contentlist.show + .library-time-slots,.expand-time-slots .library-contentlist, .create-post-ctn.show + .post-preview-ctn {
  width: 0 !important;
  overflow: hidden !important;
  padding: 0;
  }

.library-contentlist.show,.library-time-slots.show, .create-post-ctn.show {
  flex: 0 0 100%;
  width: 100%;
  }

.library-contentlist.show .icon-right-arrow:before, .create-post-ctn.show .icon-right-arrow:before {
  content: "\e919";
  }

.library-time-slots.show .icon-collaps:before {
  content: "\e940";
  }

.exit-intent-popup {
  background: #0000009c;
  }

.fields-picker ul {
  max-height: 170px;
  }

.search-hastag .search-field + .btn {
  flex: 0 0 45px;
  }

/* AI to write content css */

.ai-input p {
  background: #F4F4F4;
  padding: 10px 20px;
  border-radius: 15px 0px 15px 15px;
  }

.ai-typing-textarea {
  width: 100%;
  background: #F4F4F4;
  border-radius: 26px;
  padding: 8px 8px 8px 0;
  }

.ai-typing-textarea textarea {
  resize: none;
  height: 35px;
  padding: 4px 0 0 18px;
  overflow-y: auto;
  white-space: pre-wrap;
  max-height: 160px;
  }

.ai-tone a {
  background: #E6F2FF;
  padding: 5px 8px;
  border-radius: 5px;
  }

.ai-typing-textarea .token-limit-box {
  position: relative;
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  }

.ai-typing-textarea .btn-send {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  background: #0d6efd;
  color: #ffffff;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  }

.ai-typing {
  max-width: 900px;
  margin: auto;
  }

.ai-typing .token-limit-box {
  height: 50px;
  width: 50px;
  display: block;
  position: relative;
  flex: 0 0 50px;
  bottom: 2px;
  }

.token-limit-box svg {
  transform: rotate(-90deg);
  overflow: visible;
  }

.token-limit-box svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #dedede;
  stroke-width: 14;
  stroke-linecap: round;
  }

.token-limit-box svg circle:last-of-type {
  stroke-dasharray: 625px;
  stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
  stroke: #0d6efd;
  }

.special-days-container .select-platforms label {
  height: 40px;
  width: 40px;
  }

.select-platforms input:checked + label {
  border-color: #0d6efd !important;
  color: #101010 !important;
  font-weight: 600;
  }

.special-days-container {
  max-width: 600px;
  }

.special-day-list {
  max-height: 220px;
  overflow-y: auto;
  }

.ai-template {
  min-height: 150px;
  }

.ai-icon {
  height: 35px;
  width: 35px;
  font-size: 16px;
  }

.template-questions .hr-small {
  width: 50px;
  height: 4px;
  }

.format-small-description {
  max-height: 45px;
  overflow: hidden;
  }

.select-format .format-categories {
  max-height: 70px;
  overflow: auto;
  }

.format-categories a {
  color: #585858;
  padding: 5px 10px;
  border-radius:25px;
  }

.format-categories a:hover {
  color:#0d6efd;
  }

.format-categories a.active {
  border-color: #0d6efd !important;
  color: #0d6efd;
  }

.select-post-format-box .format-list {
  width: 100%;
  max-width: 320px;
  }

.edit-format-box .edit-format {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  resize: none;
  }

.format-box .tab-content .border-top.active {
  display: flex;
  }

.format-list a.active {
  border-color: #0d6efd !important;
  }

/* --------------------------- old ---------------------- */

.AIkeywords-list input {
  position: absolute;
  opacity: 0;
  }

.AIkeywords-list label {
  cursor: pointer;
  border: 1px solid transparent;
  }

.AIkeywords-list input:checked + label {
  border-color: #0d6efd;
  color: #1F1F1F;
  }

.AIkeywords-list {
  max-height: 120px;
  overflow-y: auto;
  }

.AiPostHistory .filter-by-keyword,.AiImageHistory .filter-by-keyword {
  max-width: 300px;
  }

.AiPostHistory .post-edit-delete {
  top: 0;
  }

.AiPostHistory span.badge,.AiImageHistory span.badge {
  max-width: 100%;
  margin-bottom: 5px;
  text-align: left;
  }

.media-images-results .ai-response .form-check {
  top: 12px;
  right: 5px;
  }

/* AI to write content css end*/

/* Shared calendar css start */

.shared-with-modal input:checked + .form-check-label .link-inactive,
.automation-details input:checked + .form-check-label .link-inactive,
.rp-dm-actions input:checked + .form-check-label .link-inactive,
.rp-dm-row-actions input:checked + .form-check-label .link-inactive,
.rp-dm-td-status input:checked + .form-check-label .link-inactive {
  display: none;
  }

.shared-with-modal input:checked + .form-check-label .link-active,
.automation-details input:checked + .form-check-label .link-active,
.rp-dm-actions input:checked + .form-check-label .link-active,
.rp-dm-row-actions input:checked + .form-check-label .link-active,
.rp-dm-td-status input:checked + .form-check-label .link-active {
  display: block;
  }

.shared-with-modal input + .form-check-label .link-active,
.automation-details input + .form-check-label .link-active,
.rp-dm-actions input + .form-check-label .link-active,
.rp-dm-row-actions input + .form-check-label .link-active,
.rp-dm-td-status input + .form-check-label .link-active {
  display: none;
  }

.user-comment-box ul {
  gap: 18px;
  }

.user-comment-box {
  max-height: 400px;
  overflow-y: auto;
  }

.reply-box-ctn .user-comment-box {
  max-height: inherit;
  overflow-y: inherit;
  }

.user-comment-box.add_comment {
  min-height: auto;
  max-height: none;
  overflow: visible;
  }

.add_comment .write-comment {
  border-radius: 24px;
  border: 1px solid #E5EAF0;
  background: #ffffff;
  padding: 4px 4px 4px 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  }

.add_comment .write-comment:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
  }

.user-comment-box.add_comment ul li,
.user-comment-box ul li {
  gap: 10px;
  }

.calendar-name .Workspaces-badge {
  font-size: 10px;
  color: #5481E8;
  background: #DDE6FA;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 600;
  }

.user-comment-box .user-pic,.gust-user-details .user-pic {
  height: 36px;
  width: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #E5EAF0;
  background: #EAF2FF;
  color: #0d6efd;
  font-weight: 600;
  }

.user-comment-box .right-comment .user-pic {
  background: #E6F7F1;
  color: #0F8A6A;
  }

.user-comment .comment p {
  padding: 10px 14px;
  background: #F6F9FB;
  color: #101010;
  border: 1px solid #ECEFF3;
  border-radius: 4px 12px 12px 12px;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.45;
  }

.user-comment .comment p.placeholder {
  height: 50px;
  width: 250px;
  }

.right-comment .user-comment .comment p {
  background: #EAF2FF;
  border-color: #D6E4FB;
  color: #101010;
  border-radius: 12px 4px 12px 12px;
  }

.user-comment-box .user-pic .short-name,.gust-user-details .user-pic {
  font-size: 12px;
  }

.user-comment-box .user-name {
  font-weight: 600;
  font-size: 13px;
  color: #101010;
  line-height: 1.2;
  }

.gust-user-details p {
  max-width: 200px;
  }

.user-comment-box .mark-unread {
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
  }

.user-comment-box .mark-unread input[type="checkbox"] {
  margin: 0;
  }

.user-comment-box .user-comment .date-time {
  font-size: 11px;
  font-weight: normal;
  }

.user-comment-box.add_comment .btn {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 20px !important;
  font-weight: 500;
  }

.user-comment-box.add_comment .btn i {
  font-size: 14px;
  line-height: 1;
  }

.add_comment .form-control {
  font-size: 14px;
  background: transparent;
  box-shadow: none !important;
  padding: 6px 6px;
  }

.add_comment .form-control:focus {
  background: transparent;
  }

/* Comments modal redesign (UserComments) */
.uc-modal .modal-content {
  border: 1px solid #ECEFF3;
  border-radius: 12px;
  overflow: hidden;
  }
  
.uc-modal .uc-count {
  font-size: 11px;
  font-weight: 600;
  color: #0d6efd;
  background: #EAF2FF;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  }

.uc-modal .uc-subtitle i {
  font-size: 13px;
  }

.uc-modal .uc-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 500;
  }

.uc-modal .uc-day-divider::before,
.uc-modal .uc-day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ECEFF3;
  }

.uc-modal .uc-day-divider span {
  background: #ffffff;
  border: 1px solid #ECEFF3;
  padding: 2px 10px;
  border-radius: 999px;
  }

.uc-modal .uc-meta {
  margin-bottom: 6px;
  }

.uc-modal .uc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  }

.uc-modal .uc-tag-client {
  background: #FFF4E5;
  color: #B26A00;
  }

.uc-modal .uc-tag-you {
  background: #E6F7F1;
  color: #0F8A6A;
  }

.uc-modal .uc-footer {
  border-top: 1px solid #ECEFF3;
  padding: 14px 20px;
  background: #ffffff;
  display: block;
  }

.uc-modal .uc-helper i {
  font-size: 13px;
  color: #9AA3AF;
  }

/* Find & Replace modal redesign */
 
.fr-modal .fr-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9AA3AF;
  display: inline-block;
  }
 
/* Bulk Update Options modal redesign */
 
.bom-modal .more-opt .title {
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: #101010;
  gap: 10px !important;
  align-items: center;
  }

.bom-modal .more-opt .title:not(.collapsed) {
  background: #fafafa !important;
  }
  
.bom-modal .more-opt-ctn {
  padding: 16px !important;
  border-top-color: #ECEFF3 !important;
  background: #ffffff;
  }

.bom-modal .more-opt-ctn .form-control,
.bom-modal .more-opt-ctn .form-select {
  border-radius: 6px;
  border: 1px solid #E5EAF0;
  font-size: 14px;
  padding: 8px 12px;
  }

.bom-modal .more-opt-ctn .form-control:focus,
.bom-modal .more-opt-ctn .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
  }

.bom-modal .more-opt-ctn .form-check.b6 {
  margin-top: 6px;
  }

.bom-modal .more-opt-ctn .form-check.b6 .form-check-label {
  font-size: 12px;
  color: #6B7280;
  }

.bom-modal .more-opt-ctn .alert-info {
  background: #EAF2FF;
  border: 1px solid #D6E4FB;
  color: #1A52BF;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  }

.bom-modal .more-opt-ctn .alert-info i {
  color: #0d6efd;
  font-size: 15px;
  }

.bom-modal .bom-field.border-bottom {
  border-bottom-color: #ECEFF3 !important;
  }

.bom-modal .bom-preview-tabs {
  justify-content: center;
  }

/* Add Hashtag modal redesign */

.ah-modal .ah-bag-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #F6F9FB;
  color: #101010;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  }

.ah-modal .ah-bag-trigger:hover,
.ah-modal .ah-bag-trigger[aria-expanded="true"] {
  background: #EAF2FF;
  border-color: #0d6efd;
  }

.ah-modal .ah-bag-trigger[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
  border-bottom-style: solid;
  }

.ah-modal .ah-bag-trigger[aria-expanded="true"] .ah-bag-caret {
  transform: rotate(180deg);
  color: #0d6efd;
  }

.ah-modal .ah-bag-panel {
  border: 1px solid #0d6efd;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  margin-top: -1px;
  padding: 12px;
  }

 .ah-modal .ah-bag-list li:hover {
  background: #EAF2FF !important;
  border-color: #D6E4FB !important;
  }

.ah-modal .ah-bag-edit {
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  }

.ah-modal .ah-bag-edit:hover {
  background: #ffffff;
  color: #0d6efd;
  }
 
/* Share library modal redesign */

.sl-modal .sl-link-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  }

/* Step number badge (Move/copy modal, etc.) */
.clw-step-badge {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  }

/* Expired content library (expired-content.html) */

.ec-empty-card .clw-onboard-tpl-icon {
  height: 45px;
  width: 45px;
  font-size: 20px;
  }

.expired-content .ec-row-copy,
.expired-content .ec-row-del {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  }

.expired-content .ec-row-del {
  width: 32px;
  padding: 5px 0;
  justify-content: center;
  color: #6B7280;
  border: 1px solid #DCE3EA;
  background: #fff;
  }

.expired-content .ec-row-del:hover {
  background: #FEECEC;
  border-color: #FEECEC;
  color: #DC2626;
  }

/* Copy to library modal. It renders outside .expired-content (a position-fixed
   shell), so these rules stay unscoped rather than sitting under the page class. */
.ec-copy-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #344054;
  }

.ec-copy-count strong {
  font-weight: 700;
  color: #0d6efd;
  margin-right: 2px;
  }

.ec-copy-remove {
  padding: 12px;
  background: #FBFCFD;
  border: 1px solid #EEF1F4;
  border-radius: 8px;
  }

/* Search sits in the Expired Content page header, so it needs a floor width */
.expired-content .ec-head-search {
  min-width: 240px;
  }

/* Shared calendar css end */

.authanticate-steps.mt-4 {
  max-width: 650px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  position: relative;
  }

.workspace-edit-ctn .social-account-list {
  opacity: 0.8;
  }

.edit-workspace-name {
  display: inline-block;
  color: #101010;
  max-width: 350px;
  }

/* Workspace Edit redesign */
.workspace-edit .ws-page-header {
  min-height: 64px;
  }

.ws-avatar-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0d6efd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  }

.ws-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 10px;
  }

/* Stacked team member avatars on workspace cards */
.ws-member-stack {
  display: inline-flex;
  align-items: center;
  }

.ws-member-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  }

.ws-member-stack .ws-member-avatar + .ws-member-avatar {
  margin-left: -9px;
  }

.workspace-search {
  width: 240px;
  max-width: 100%;
  }

/* Column header: a compact, faintly tinted band with quiet semibold labels.
   It sticks to the top of the list while the rows scroll under it. */
.team-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  background: #FBFCFD;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 #e5e6eb;
  }

.team-table td {
  padding: 14px 16px;
  }

/* Workspaces: compact rows (every cell is at most two lines, so rows stay one
   height); only the rows and cards that open a workspace light up on hover. */
.ws-table td {
  padding: 10px 16px;
  }

/* Every row is one height, with or without profile pictures */
.ws-table tbody td {
  height: 52px;
  }

/* Profile pictures at row size: the app's avatar box, smaller */
.ws-pic.schedule-pic-box {
  height: 26px;
  width: 26px;
  flex: 0 0 26px;
  }

.ws-pic.schedule-pic-box .small-social-icon {
  width: 12px;
  height: 12px;
  bottom: -2px;
  right: -2px;
  }

.ws-pic.schedule-pic-box .icon-warning-circle {
  font-size: 11px;
  }

/* A lightly overlapped row of those pictures (profiles and team alike). Earlier
   pictures sit above later ones, so a profile's platform badge is never covered;
   the white ring on each picture keeps the edges crisp. */
.ws-pics-stack .ws-pic-item {
  position: relative;
  }

.ws-pics-stack .ws-pic-item + .ws-pic-item {
  margin-left: -6px;
  }

.ws-pics-stack .ws-pic-item:nth-child(1) { z-index: 6; }
.ws-pics-stack .ws-pic-item:nth-child(2) { z-index: 5; }
.ws-pics-stack .ws-pic-item:nth-child(3) { z-index: 4; }
.ws-pics-stack .ws-pic-item:nth-child(4) { z-index: 3; }
.ws-pics-stack .ws-pic-item:nth-child(5) { z-index: 2; }
.ws-pics-stack .ws-pic-item:nth-child(6) { z-index: 1; }

.ws-table .ws-col-name {
  width: 30%;
  }

.ws-table .ws-col-profiles {
  width: 24%;
  }

.ws-table .ws-col-actions {
  width: 1%;
  white-space: nowrap;
  }

.ws-table tr.js-open-ws:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  }

/* An invitation row: an amber line under it and a touch more room under its
   content, so it reads as the one row waiting on you */
.ws-table tr.ws-row-invite > td {
  border-bottom: 1px solid #f2c14e;
  padding-bottom: 14px;
  height: auto;
  }



/* Bottom clearance so the last table rows and 3-dot kebab menus stay fully accessible above floating docks and widgets */
.ws-bottom-space {
  height: 100px;
}

.team-can-mark {
  flex: 0 0 16px;
  text-align: center;
  }

/* Sidebar switch workspace dropdown */
.single-workspace:hover,
.single-workspace:focus {
  background-color: rgba(13, 110, 253, .06);
  }

/* Whole workspace card is the switch target */
.ws-switch-card {
  transition: box-shadow .15s ease-out, border-color .15s ease-out;
  }

.ws-switch-card:hover,
.ws-switch-card:focus-within {
  border-color: #0d6efd !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
  }

.ws-switch-card .ws-card-actions {
  position: relative;
  z-index: 2;
  }

/* Workspace settings page: the section list (General, Resources, People, Client review,
   Settings) beside the open section, the live app's layout */
.workspace-edit .ws-settings-nav {
  width: 240px;
  min-width: 240px;
  }

.workspace-edit .ws-nav-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  }

.workspace-edit .ws-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #4a4a4a;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  }

.workspace-edit .ws-nav-item:hover {
  background: #f5f6fa;
  color: #101010;
  }

.workspace-edit .ws-nav-item.active {
  background: #0d6efd1a;
  color: #0d6efd;
  font-weight: 500;
  }

.workspace-edit .ws-nav-item > i {
  font-size: 16px;
  }

.workspace-edit .ws-nav-section-label {
  font-size: 12px;
  text-transform: uppercase;
  color: #8a8a8a;
  font-weight: 600;
  padding: 12px 12px 4px;
  letter-spacing: 0.04em;
  }

.workspace-edit .ws-pane {
  display: none;
  }

.workspace-edit .ws-pane.active {
  display: block;
  }

/* below lg the list becomes a wrapping strip above the section (the utility border is !important) */
@media (max-width: 991.98px) {
  .workspace-edit .ws-settings-nav {
    width: 100%;
    min-width: 0;
    border-right: 0 !important;
    border-bottom: 1px solid #e5e6eb;
    }

  .workspace-edit .ws-nav-body {
    flex-direction: row;
    flex-wrap: wrap;
    }

  .workspace-edit .ws-nav-section-label {
    width: 100%;
    }
  }

.ws-profiles-grid .ws-profile-card {
  transition: box-shadow .15s ease, border-color .15s ease;
  }

.ws-profiles-grid .ws-profile-card:hover {
  border-color: #c9d2ff;
  box-shadow: 0 2px 8px rgba(16, 16, 16, .06);
  }

.ws-profiles-grid .ws-profile-avatar {
  width: 40px;
  height: 40px;
  position: relative;
  }

.ws-profiles-grid .ws-profile-avatar .schedule-pic {
  width: 40px;
  height: 40px;
  }

.progress-bar-main {
  z-index: 1;
  background: #fffffff1;
  backdrop-filter: saturate(180%) blur(5px);
  }

.offcanvas .progress-bar-main {
  z-index: 99;
  }

.cursor-pointer {
  cursor: pointer;
  }

.cursor-default {
  cursor: default;
  }

#social-post-preview-popup .modal-body,
#oneoff_add_aicontent_modal .modal-content,
.generate-preview-modal .oneoff-preview {
  min-height: 300px;
  }

#queue_content_list_div .full-loader,
#queue_content_month_div .full-loader,
#history_content_list_div .full-loader,
#drafts_content_list_div .full-loader {
  min-height: 450px;
  }

.common-loader-overlaping {
  z-index: 9999;
  }

.no-post-one-off-post-btn-highlight {
  transform: scale(1.5);
  }

span.post_title {
  font-size: 18px;
  }

.account-list .social-account .rounded-pill {
  height: 18px;
  width: 18px;
  font-size: 8px;
  padding: 0 !important;
  }

.spinner-ex-small {
  height: 10px;
  width: 10px;
  }

#comment-box {
  flex-direction: column-reverse !important;
  }

.shared-calendar .link-expired-box {
  max-width: 500px;
  width: 100%;
  }

.link-expired .rp-logo, .guest-connect-accounts .rp-logo {
  max-width: 200px;
  max-height: 60px;
  margin: auto;
  }

.link-expired .inner-box, .guest-connect-accounts .inner-box {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.09);
  }

.upload-content-bulk .spinner-border {
  height: 60px;
  width: 60px;
  }

.upload-content-bulk .uploaded-media-box .spinner-border {
  height: 2rem;
  width: 2rem;
  }

.workspace-clients-email .bootstrap-tagsinput input {
  width: 100%;
  }

.workspace-share-reports .frequency-monthly {
  max-width: 100%;
  }

.intercom-lightweight-app-launcher,.intercom-namespace .intercom-messenger-frame + div {
  bottom: 56px !important;
  right: 32px !important;
  }

.intercom-messenger-frame + iframe + div {
  bottom: 65px !important;
  }

.intercom-messenger-frame + iframe {
  bottom: 110px !important;
  }

/* Injected on every app screen by common/sidebar.js. It sits under Bootstrap's overlays
   (backdrop 1040, offcanvas 1045, modal 1055) and the design preview tools (1030), so an
   open panel or dialog is never covered by it */
.static-intercom-launcher {
  align-items: center;
  background: #ffdc00;
  border-radius: 50%;
  bottom: 60px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  color: #111;
  display: flex;
  height: 48px;
  justify-content: center;
  position: fixed;
  right: 34px;
  width: 48px;
  z-index: 1025;
  }

.static-intercom-launcher svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 24px;
  }

.report-table {
  overflow: auto;
  }

#spinner-page-load-history {
  bottom: 50px;
  }

.recent-pins .img-pin {
  height: 100px;
  width: 100px;
  object-fit: contain;
  object-position: center;
  }

.recent-pins td {
  vertical-align: middle;
  }

.recent-pins table tbody tr:last-child {
  border: transparent;
  }

.board-list.owl-carousel .owl-item {
  padding: 10px 10px 15px 10px;
  }

.board-list .board.selected {
  border-bottom-width:5px !important;
  border-bottom-color:#0d6efd !important;
  }

.board-list .board img {
  height: 120px;
  object-fit: cover;
  object-position: center;
  }

.zero-pin-board {
  color: #dd6b20;
  background: #ffffff;
  border: 1px solid #dd6b20;
  }

.owl-carousel .owl-item .small-social-icon {
  height:20px;
  width:20px;
  }

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  font-size: 25px !important;
  }

.owl-theme .owl-nav [class*=owl-]:hover {
  background: #fff !important;
  color: #101010 !important;
  text-decoration: none;
  }

.owl-carousel .owl-stage {
  display: flex;
  }

.rp-card-title-small .library-name {
  max-width: 300px;
  }

.sp-main-area video {
  height: 500px;
  background: #000;
  border-radius: 10px;
  }

.spinner-border-sm {
  width: 1rem !important;
  height: 1rem !important;
  flex: 0 0 1rem;
  }

/* Plan Weekly Posts with AI css start */

.select-post-count .count {
  padding: 6px 5px;
  color: #00000080;
  font-size: 12px;
  }

.select-post-count input:checked + .count {
  color:#0d6efd;
  border-color:#0d6efd !important;
  }

.include-idea, .include-idea-inbox {
  padding: 15px;
  }

.include-idea .ql-container {
  max-height: 400px;
  }

.include-idea .ql-editor {
  min-height: 350px;
  }

/* Plan Weekly Posts with AI css end */

/* Bulk Update Options css start */

.demo-text-line {
  background: #DEE2E6;
  }

.bulk-update-options .fb-post-preview,
.bulk-update-options .linkedin-post-preview,
.bulk-update-options .insta-post-preview,
.bulk-update-options .gbp-post-preview,
.bulk-update-options .pinterest-post-preview,
.bulk-update-options .YouTube-post-preview {
  max-width: 320px;
  }

/* Bulk Update Options css end */
/* holiday-offer css start */

.holiday-offer {
  background: #fde8b6;
  }

.holiday-offer img {
  max-width: 180px;
  }

.offer-ctn h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  }

.offer-code {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  background: #fffbf4;
  padding: 10px 12px;
  border: 1px dashed #101010;
  }

.countdown-container .countdown-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  }

.countdown-container .countdown-number {
  font-size: 32px;
  font-weight: 600;
  }

/* holiday-offer css end */

.report-all-posts .date-range_picker button small {
  display: none !important;
  }

.gbp-template-list img {
  height: 65px;
  width: 65px;
  flex: 0 0 65px;
  }

/* DM automation css start*/

/* Breadcrumb inline name */
.rp-dm-name-display {
  cursor: pointer;
  max-width: 260px;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background-color 0.15s;
  }

.rp-dm-name-display:hover {
  border-color: #dee2e6;
  background-color: #f8f9fa;
  }

.rp-dm-name-input {
  max-width: 260px;
  width: 200px;
  }

/* Stepper */

.stepper-number {
  width: 26px;
  height: 26px;
  background: #e9ecef;
  color: #6c757d;
  transition: all 0.3s ease;
  flex-shrink: 0;
  }

.stepper-label {
  color: #6c757d;
  transition: color 0.3s ease;
  }

.stepper-item.active .stepper-number {
  background: #0d6efd;
  color: #fff;
  }

.stepper-item.completed .stepper-number {
  background: #d1f5d3;
  color: #198754;
  }

.stepper-item.active .stepper-label {
  color: #0d6efd;
  }

.stepper-item.completed .stepper-label {
  color: #198754;
  }

.stepper-line {
  height: 2px;
  background: #e9ecef;
  transition: background 0.3s ease;
  }

.stepper-line.active {
  background: #0d6efd;
  }

/* Step transitions */
.dm-automation-step {
  animation: stepFadeIn 0.25s ease;
  }

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
      }

  to {
    opacity: 1;
    transform: translateY(0);
      }

  }

.dm-automation-step.disabled {
  opacity: .1;
  }

/* Tile-based option cards */
.automation-tile {
  border: 2px solid #e9ecef;
  transition: all 0.15s ease;
  background: #fff;
  }

.start-dm-automation .automation-tile {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 0;
  text-align: left;
  }

.start-dm-automation .automation-tile .tile-icon {
  grid-row: 1 / 3;
  align-self: center;
  }

.start-dm-automation .automation-tile .tile-title,
.start-dm-automation .automation-tile .tile-desc {
  grid-column: 2;
  }

.start-dm-automation .automation-tile .tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 15px;
  flex-shrink: 0;
  }

.automation-tile:hover {
  border-color: #b6d4fe;
  background: #f8fbff;
  }

.automation-tile.selected {
  border-color: #0d6efd;
  background: #eef4ff;
  }

.automation-tile .tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  font-size: 18px;
  color: #6c757d;
  transition: all 0.15s ease;
  }

.automation-tile.selected .tile-icon {
  background: #0d6efd;
  color: #fff;
  }

.automation-tile .tile-title,
.automation-tile .tile-desc {
  line-height: 1.2;
  }

/* Expandable panel below tiles */
.automation-expand-panel {
  animation: panelSlideDown 0.2s ease;
  }

.automation-expand-panel .form-group + .form-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  }

.automation-expand-panel .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #101010;
  margin-bottom: 2px;
  }

.automation-expand-panel .form-label + span.text-muted {
  font-size: 12px;
  margin-bottom: 8px !important;
  }

@keyframes panelSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
      }

  to {
    opacity: 1;
    transform: translateY(0);
      }

  }

/* Validation shake */
.tiles-shake {
  animation: tileShake 0.4s ease;
  }

@keyframes tileShake {
  0%, 100% {
    transform: translateX(0);
      }

  20% {
    transform: translateX(-4px);
      }

  40% {
    transform: translateX(4px);
      }

  60% {
    transform: translateX(-3px);
      }

  80% {
    transform: translateX(3px);
      }

  }

.dm-automation-step .specific-post .post-image-box {
  cursor: pointer;
  background: #000000;
  }

.dm-automation-step .select-post .post-checkbox,
.dm-automation-step .automation-expand-panel .post-checkbox {
  display: none;
  }

.dm-automation-step .select-post .selected .post-checkbox,
.dm-automation-step .automation-expand-panel .selected .post-checkbox {
  display: flex;
  }

.dm-automation-step .select-post .post-checkbox i,
.dm-automation-step .automation-expand-panel .post-checkbox i {
  height: 24px;
  width: 24px;
  color: #0d6efd;
  background: #ffffff;
  }

.dm-automation-step .select-post .specific-post .post-image-box,
.dm-automation-step .automation-expand-panel .specific-post .post-image-box {
  opacity: .5;
  border-width: 2px !important;
  aspect-ratio: 1 / 1;
  }

.dm-automation-step .select-post .specific-post .post-image-box:hover,
.dm-automation-step .automation-expand-panel .specific-post .post-image-box:hover {
  opacity:1;
  }

.dm-automation-step .select-post .specific-post .post-image-box.selected,
.dm-automation-step .automation-expand-panel .specific-post .post-image-box.selected {
  opacity:1;
  border-color:#0d6efd !important;
  }

.dm-automation-step .specific-post .post-image-box img {
  object-fit: cover;
  object-position: center;
  opacity:.9;
  }

.dm-automation-step .specific-post .post-image-box:hover img {
  transform: scale(1.2);
  transition-duration: .3s;
  }

.dm-automation-step .select-post.selected .ri-circle-line:before {
  content: "\eb80";
  }

.dm-automation-step .automations-message {
  padding: 15px 15px 60px 15px;
  }

.automations-message .ql-editor {
  min-height: 50px;
  max-height: 190px;
  }

/* --- DM Automation Table --- */

/* Post cell */
.rp-dm-td-post {
  min-width: 200px;
  }

.rp-dm-row-thumb {
  width: 65px;
  height: 65px;
  flex: 0 0 65px;
  }

.rp-dm-row-thumb img {
  object-fit: cover;
  }

.rp-dm-thumb-badge {
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 11px;
  line-height: 1;
  }

.rp-dm-row-post-info {
  gap: 3px;
  min-width: 0;
  max-width: 220px;
  }

/* Status badges for inactive/scheduled */
.rp-dm-status-scheduled {
  color: #92400e;
  background: #fef3c7;
  }

/* --- Flow Diagram Popover --- */
.rp-dm-flow-popover {
  max-width: 380px;
  }

.rp-dm-flow-popover .popover-body {
  padding: 12px;
  }

.rp-dm-flow,
.rp-dm-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

.rp-dm-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  }

.rp-dm-flow-start {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
  }

.rp-dm-flow-action {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  }

.rp-dm-flow-condition {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 20px;
  }

.rp-dm-flow-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  }

.rp-dm-flow-loop {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  font-size: 10px;
  }

.rp-dm-flow-line {
  width: 2px;
  height: 10px;
  background: #cbd5e1;
  margin: 0 auto;
  }

/* Branch (fork) */
.rp-dm-flow-branch {
  display: flex;
  gap: 16px;
  position: relative;
  margin-top: 0;
  }

.rp-dm-flow-branch-left,
.rp-dm-flow-branch-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding-top: 0;
  position: relative;
  }

/* Horizontal line connecting both branch centers */
.rp-dm-flow-branch-left::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% / 2 + 8px);
  height: 2px;
  background: #cbd5e1;
  }

.rp-dm-flow-branch-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: calc(100% / 2 + 8px);
  height: 2px;
  background: #cbd5e1;
  }

/* Vertical drop lines from horizontal bar to labels */
.rp-dm-flow-branch-left::before,
.rp-dm-flow-branch-right::before {
  content: "";
  width: 2px;
  height: 8px;
  background: #cbd5e1;
  }

.rp-dm-flow-branch-label {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  margin-bottom: 0;
  }

.rp-dm-flow-yes {
  background: #d1fae5;
  color: #065f46;
  }

.rp-dm-flow-no {
  background: #fee2e2;
  color: #991b1b;
  }

.dm-automation-step .bootstrap-tagsinput input {
  width: 100%;
  }

/* DM Automation Filters */

.rp-dm-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #0d6efd;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  }

/* Dropdown menu */
.rp-dm-filter-menu {
  min-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  }

/* Empty state */
.rp-dm-filter-empty {
  color: #6c757d;
  }

.rp-dm-filter-empty i {
  font-size: 32px;
  }

/* DM automation css end*/

.default-images {
  position: relative;
  z-index: 9;
  }

.default-images img {
  height: 50px;
  width: 50px;
  object-fit: cover;
  object-position: center;
  border: 1px solid #dddddd;
  cursor: pointer;
  }

.select-time .form-select {
  padding: 0 30px 0 10px;
  }

/* power RSS css start */

.editable-feed {
  position: relative;
  min-height: 30px;
  }

.editable-feed br {
  display: none;
  }

.add-feed-elements .editable-feed .badge,.added-feed-data .badge {
  white-space: pre-wrap;
  word-break:break-word;
  display: inline;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 1px;
  line-height: 34px;
  }

.add-feed-elements .badge.feed-element, .added-feed-data .badge.feed-element {
  padding: 4px;
  border: 1px solid #dee2e6;
  }

.feed-data .feed-element {
  position: relative;
  padding: 8px 40px 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  }

.feed-data .feed-element:last-child {
  margin-bottom: 0;
  }

.feed-data .feed-element:hover {
  border-color: #0d6efd;
  background: #f6f9ff;
  }

.feed-data .feed-element.selected {
  border-color: #0d6efd;
  background: #e6f2ff;
  }

.feed-data .feed-element::after {
  content: "\eb7d";
  font-family: "remixicon" !important;
  font-style: normal;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: #cbd5e1;
  }

.feed-data .feed-element.selected::after {
  content: "\eb80";
  color: #0d6efd;
  }

.add-feed-elements .custom-dropdown {
  box-shadow: 0 6px 24px rgba(16, 16, 16, 0.12);
  }

.feed-box-header .custom-dropdown {
  width: 360px;
  max-width: calc(100vw - 32px);
  font-weight: 400;
  box-shadow: 0 6px 24px rgba(16, 16, 16, 0.12);
  }

.add-feed-elements .custom-dropdown label {
  display: block;
  }

/* power RSS css end */

.modal.plan_limit.show {
  z-index: 1056;
  }

.input-group .btn {
  z-index: 1;
  }

.inbox .uploaded-media-box, .inbox .uploaded-media-box img {
  height: 80px;
  width: 80px;
  }

.chat-box-ctn #textarea-emoji {
  top: auto !important;
  bottom: 20px !important;
  }

#frmgenerate_preview {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  }

.csv-details-box-list {
  padding-bottom: 70px;
  }

.custom-filed-value-block textarea {
  height:40px;
  overflow: hidden;
  }

.generate-preview-modal .csv-details-box-list {
  padding-bottom: 20px;
  }

.generate-preview-modal #frmgenerate_preview {
  position: relative;
  width: auto;
  }

.RecurPostReviews {
  position: fixed;
  bottom: 30px;
  left: 30px;
  }

.workspace-list-dropdown {
  width: 300px;
  max-width: 300px;
  }

.vip-crown {
  color: #000000;
  position: absolute;
  right: -4px;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  background: #FFCD42;
  font-size: 8px;
  border-radius: 50%;
  }

.sidebar.show .vip-crown {
  top: 12px;
  right: 0;
  }

.plug-ins .vip-crown {
  height: 25px;
  width: 25px;
  font-size: 12px;
  top: 10px;
  right: 10px;
  }

.tooltip.text-start .tooltip-inner {
  text-align: left;
  min-width: 280px;
  padding: 10px;
  }

.tooltip.text-start .tooltip-inner ul li {
  padding: 2px 0;
  }

.social-account-list.error .d-flex.flex-wrap {
  flex-wrap: nowrap !important;
  }

.platform-supported img {
  width: 25px;
  flex: 0 0 25px;
  }

/* boost post css start */

 .boost-post-step .select-post .post-main-ctn {
  min-height: 115px;
  }

.boost-post-step .select-post .selected {
  border-color:#0d6efd !important;
  }

.boost-post-step .select-post .post-message {
  height: 100px;
  margin-bottom: 0;
  }

.boost-post-step .select-post .post-image {
  height: 100px;
  width: 100px;
  flex: 0 0 100px;
  }

.boost-post-step .select-post .post-image img {
  height: 100px;
  width: 100px;
  object-fit: cover;
  object-position: center;
  }

.boost-post-step .post-image.link-post img {
  height: 55px;
  }

/* boost post css end */

/* hashtag css start */

.collections-list .add-hashtag {
  background: #fff;
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
  margin-left: auto;
  }

.collections-list .add-hashtag:hover {
  background: #0d6efd;
  }

.ganrated-hashtag .hashtag-collection {
  grid-template-columns:repeat(3, 1fr);
  gap: 10px;
  }

/* hashtag css end */

.title-note {
  display: none;
  }

.title-input:placeholder-shown + .title-note {
  display: block;
  }

.post-main-ctn .badge {
  max-width: 100%;
  }

.max-width-200 {
  max-width: 200px;
  }

/* css for canva popup */

.canva-user {
  height: 36px;
  width: 36px;
  flex: 0 0 36px;
  }

.canva-item:hover .canva-action {
  display: flex !important;
  }

.canva-action .btn {
  padding: 10px;
  font-size: 14px;
  height: 28px;
  width: 28px;
  font-weight: normal;
  }

.canva-item .item-thumbnail img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  }

.canva-item .item-thumbnail.selected img {
  border: 2px solid #0d6efd;
  }

.canva-action .custom-dropdown {
  min-width: 150px;
  }

.canva-design .more-action.sticky-top {
  padding-top: 5px;
  top: -18px;
  }

.custom-time .user-info {
  width: 200px;
  }

.custom-time .form-select {
  width: 100px;
  }

.select-accounts.accounts-filter.show .select-group {
  display: none !important;
  }

/* Update video thumbnail */

.custom-thumbnail {
  width: 350px;
  flex: 0 0 350px;
  }

.thumb-label {
  display: inline-block;
  border-radius: 30px;
  padding: 6px 15px;
  background: #000000b3;
  color: #ffffffe8;
  }

.thumb-box img {
  height: 200px;
  width: 100%;
  object-fit: contain;
  }

#post-video {
  display: none;
  }

.post-video-box video {
  width: 100%;
  height: 420px;
  object-fit: contain;
  }

#frameSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 500px;
  height: 6px;
  border-radius: 10px;
  background: #e4e6eb;
  outline: none;
  cursor: pointer;
  }

#frameSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0D6EFD;
  border: 2px solid #fff;
  box-shadow:
        inset 0 0 0 5px #1877F2,
        0 2px 6px rgba(0,0,0,0.25);
  cursor: grab;
  }

#frameSlider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  }

.update-thumbnail .modal-body {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  }

.ui-widget.ui-widget-content {
  z-index: 1056 !important;
  }

.bg-success {
  background:#EDFCF2 !important;
  }

.bg-warning {
  background:#FFFAE8 !important;
  }

.bg-danger {
  background:#FEF2F2 !important;
  }

/* A count badge (rail Social profiles, header Filters and bell) is solid red with a white
   number; the pale .bg-danger above is for panels and alerts, not for a 16px pill */
.badge.rounded-pill.bg-danger {
  background-color: #dc3545 !important;
  color: #ffffff;
  }

.rp-tw-wallet-txn-table .badge.bg-danger {
  background-color: #dc3545 !important;
  }

.oneoff-schedule-modal .modal-dialog {
  max-width: 600px;
  }

.add-more-profiles .social-account-list {
  padding: 6px 8px;
  }

.add-more-profiles .schedule-pic-box {
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
  }

.add-more-profiles .schedule-pic-box .small-social-icon {
  height: 16px;
  width: 16px;
  }

.add-more-profiles.more-opt .title {
  padding: 12px 15px;
  }

.add-profiles-schedule .select-profile-box, 
.add-profiles-schedule .selected-profile-box {
  max-height: 165px;
  }

.oneoff-schedule-modal .social-account .form-check-input {
  flex: 0 0 16px;
  }

.social-account-list .form-check-input {
  flex: 0 0 14px;
  }

.wrong-profile .schedule-pic-box {
  height: 60px;
  width: 60px;
  flex: 0 0 60px;
  }

.schedule-pic-box {
  height: 35px;
  width: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  position: relative;
  }

.schedule-pic-box .schedule-pic {
  width: 100%;
  border: 1px solid #e4e4e4;
  object-fit: cover;
  height: 100%;
  object-position: center;
  }

.guest-connect-accounts .ctn-box {
  max-width:650px;
  width:100%;
  }

/* storage usage — library sidebar + customize addons */
.media-storage-progress {
  height: 6px;
}

.media-storage-progress .rp-progress-normal {
  background-color: #276749;
}

.media-storage-progress .rp-progress-warning {
  background-color: #7b341e;
}

.media-storage-progress .rp-progress-danger {
  background-color: #742a2a;
}

.media-storage-box .rp-storage-status-badge.bg-success {
  background-color: #c6f6d5 !important;
  color: #276749 !important;
}

.media-storage-box .rp-storage-status-badge.bg-warning {
  background-color: #feebc8 !important;
  color: #7b341e !important;
}

.media-storage-box .rp-storage-status-badge.bg-danger {
  background-color: #fed7d7 !important;
  color: #742a2a !important;
}

.rp-storage-sync-spinning {
  animation: rp-storage-spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes rp-storage-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.TextPostsOpt .select-platforms label.label-og {
  border-radius: 20px;
  width: auto;
  }

.TextPostsOpt .select-platforms input:checked + label {
  opacity: 1;
  }

.TextPostsOpt .select-platforms i {
  display: none;
  position: absolute;
  top: -4px;
  right: -5px;
  font-size: 16px;
  height: 16px;
  width: 16px;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 50%;
  color: #0d6efd;
  }

.TextPostsOpt .select-platforms input:checked + label + i {
  display: flex;
  }

.TextPostsOpt .select-platforms label {
  height: 30px;
  width: 30px;
  border: 1px solid #DEE2E6;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.6;
  }

.plan-weekly-post-opt .select-platforms label.label-og {
  border-radius: 20px;
  width: auto;
  }

.plan-weekly-post-opt .select-platforms input:checked + label {
  opacity: 1;
  }

.plan-weekly-post-opt .select-platforms i {
  display: none;
  position: absolute;
  top: -4px;
  right: -5px;
  font-size: 16px;
  height: 16px;
  width: 16px;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 50%;
  color: #0d6efd;
  }

.plan-weekly-post-opt .select-platforms input:checked + label + i {
  display: flex;
  }

.plan-weekly-post-opt .select-platforms label {
  height: 30px;
  width: 30px;
  border: 1px solid #DEE2E6;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.6;
  }

.hashtag-collections .collection.selected {
  border-color:#0d6efd !important;
  }

.queue-history-tabs.nav-tabs .nav-link.btn-profile-status {
  padding: 6px 15px;
  }

.FilterByNetwork .custom-dropdown {
  min-width: 350px;
  }

.FilterByNetwork .custom-dropdown ul {
  max-height: 268px;
  }

.form-control-color {
  width: 42px;
  height: 42px;
  padding: 10px;
  }

.form-control-color::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
  }

.profile-expired .social-account-list.border {
  border-color: #fbd0d0 !important;
  }

.profile-expiring .social-account-list.border {
  border-color: #FDE6B6 !important;
  }

.group-view-active .social-account-list > div:first-child {
  display: none !important;
  }

.group-view-active .profile-card > td.text-center,
.group-view-active .profile-card > td.table-action,
.group-view-active .profiles-list-table thead th:first-child,
.group-view-active .profiles-list-table thead th:last-child {
  display: none;
  }

.group-view-active .profiles-list-table .td-profile-name {
  padding-left: 12px !important;
  }

/* ============================================
   Social Accounts — Stat Cards & Filters
   ============================================ */

/* Context label in filter bar */
.rp-sa-context-label {
  flex-shrink: 0;
  }

/* Stats toggle button */
.rp-sa-toggle-icon {
  transition: transform 0.2s ease;
  transform: rotate(180deg);
  }

.rp-sa-stats-toggle[aria-expanded="false"] .rp-sa-toggle-icon {
  transform: rotate(0deg);
  }

/* Stats container */
.rp-sa-stats {
  flex-shrink: 0;
  }

/* Filter empty state */
.rp-sa-filter-empty {
  min-height: 200px;
  }

/* Network filter dropdown (new structure) */
.manage-social-accounts .FilterByNetwork .rp-dm-filter-menu {
  min-width: 350px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  }

.manage-social-accounts .FilterByNetwork .rp-dm-filter-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
  font-size: 13px;
  color: #333;
  }

.manage-social-accounts .FilterByNetwork .rp-dm-filter-body {
  padding: 12px 16px;
  }

.manage-social-accounts .FilterByNetwork .rp-dm-filter-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
  display: flex;
  justify-content: flex-end;
  }

.rounded-circle.bg-danger {
  background: #dc3545 !important;
  }

.list-disk {
  list-style-type: disc;
  }

/* Social Account Settings Modal
   Square icon tile. Only the size lives here, since Bootstrap has no px
   sizing utility; the rest comes from utilities in the markup. */
.sas-row-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  }

/* Workspace report sharing cards */
.ws-report-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all .2s ease;
  overflow: hidden;
  }

.ws-report-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  opacity: .9;
  }

.ws-report-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  transform: translateY(-1px);
  }

.ws-report-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4f46e5;
  font-size: 18px;
  }

.ws-report-email {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  }

.ws-report-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  }

.ws-report-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  }

.ws-report-meta .meta-item i {
  font-size: 14px;
  color: #9ca3af;
  }

.ws-report-meta .meta-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d1d5db;
  }

.ws-report-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  }

.ws-report-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  }

.ws-report-pill.is-active {
  background: #d1fae5;
  color: #047857;
  }

.ws-report-pill.is-active .dot {
  background: #10b981;
  }

.ws-report-pill.is-paused {
  background: #fef3c7;
  color: #b45309;
  }

.ws-report-pill.is-paused .dot {
  background: #f59e0b;
  }

.ws-report-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
  }

.ws-report-actions .btn-ico {
  border: 0;
  background: transparent;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #6b7280;
  transition: all .15s ease;
  cursor: pointer;
  }

.ws-report-actions .btn-ico:hover {
  background: #f3f4f6;
  color: #111827;
  }

.ws-report-actions .btn-ico.is-danger:hover {
  background: #fee2e2;
  color: #dc2626;
  }

/* Share / edit report popup */
.share-report-popup .srp-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 6px;
  display: block;
  }

.share-report-popup .srp-hint {
  font-size: 12px;
  color: #6b7280;
  }

.share-report-popup .srp-input-wrap {
  position: relative;
  }

.share-report-popup .srp-input-wrap > .ri-mail-line {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
  }

.share-report-popup .srp-input-wrap .form-control,
.share-report-popup .srp-input-wrap .bootstrap-tagsinput {
  padding-left: 40px !important;
  }

.share-report-popup .form-control {
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  transition: all .15s ease;
  }

.share-report-popup .form-control:focus {
  background: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
  }

.share-report-popup .form-control:disabled {
  color: #6b7280;
  }

.share-report-popup .srp-input-wrap .bootstrap-tagsinput {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  min-height: 44px;
  }

.share-report-popup .srp-input-wrap .bootstrap-tagsinput.focus {
  background: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
  }

.share-report-popup .srp-frequency-seg {
  display: inline-flex;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 12px;
  gap: 4px;
  list-style: none;
  margin: 0 0 16px;
  }

.share-report-popup .srp-frequency-seg .frequency {
  list-style: none;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  border-radius: 8px;
  cursor: pointer;
  border: 0 !important;
  background: transparent;
  transition: all .15s ease;
  }

.share-report-popup .srp-frequency-seg .frequency:hover {
  color: #111827;
  background: transparent;
  }

.share-report-popup .srp-frequency-seg .frequency.active {
  background: #fff !important;
  color: #0d6efd !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  border: 0 !important;
  }

.share-report-popup .srp-days-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  }

.share-report-popup .srp-days-row .wdays {
  flex: 1 1 0;
  min-width: 52px;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  }

.share-report-popup .srp-days-row .wdays:hover {
  border-color: #cfe2ff !important;
  color: #0d6efd;
  background: #fff;
  }

.share-report-popup .srp-days-row .wdays.active {
  background: #e7f1ff !important;
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .12);
  }

.share-report-popup .srp-dates-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  }

.share-report-popup .srp-dates-grid .mdays {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
  }

.share-report-popup .srp-dates-grid .mdays:hover {
  border-color: #cfe2ff !important;
  color: #0d6efd;
  background: #fff;
  }

.share-report-popup .srp-dates-grid .mdays.active {
  background: #e7f1ff !important;
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .12);
  }

.share-report-popup .srp-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  }

.share-report-popup .srp-status-card .srp-status-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  }

.share-report-popup .srp-status-card .srp-status-sub {
  font-size: 12px;
  color: #6b7280;
  }

.share-report-popup .srp-status-card .form-switch {
  padding: 0;
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  }

.share-report-popup .srp-status-card .form-switch .form-check-input {
  width: 2.4em;
  height: 1.3em;
  margin: 0;
  cursor: pointer;
  }

.share-report-popup .srp-status-card .form-switch .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
  }

.share-report-popup .srp-status-card .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
  border-color: #0d6efd;
  }

.share-report-popup .srp-status-card:has(.form-check-input:checked) .link-inactive,
.share-report-popup .srp-status-card:has(.form-check-input:not(:checked)) .link-active {
  display: none;
  }

/* Invite team member modal */

#invite_team_member_modal .invite-member-body {
  padding: 8px 24px 20px;
  }

#invite_team_member_modal .invite-member-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  margin-top: 15px;
  }

#invite_team_member_modal .invite-member-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7f1ff;
  color: #0d6efd;
  font-size: 20px;
  }

#invite_team_member_modal .invite-member-sub {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  }

#invite_team_member_modal .invite-member-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 6px;
  }

#invite_team_member_modal .invite-member-input-wrap {
  position: relative;
  }

#invite_team_member_modal .invite-member-input-wrap > .ri-mail-line {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
  }

#invite_team_member_modal .invite-member-input-wrap .form-control {
  padding: 10px 14px 10px 40px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: all .15s ease;
  }

#invite_team_member_modal .invite-member-input-wrap .form-control:focus {
  background: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
  }

/* ============================================================
   Watermark on Images
   ============================================================ */

/* Position picker */
.watermark-position {
  grid-template-columns: 1fr 1fr;
  width: 80px;
  }

.watermark-position span {
  width: 36px;
  height: 36px;
  border: 1px solid #d6dde6;
  border-radius: 4px;
  background: #f1f4f8;
  cursor: pointer;
  position: relative;
  display: block;
  transition: background-color .15s ease, border-color .15s ease;
  }

.watermark-position span:hover {
  background: #e4ebf3;
  }

.watermark-position span.selected {
  background: #0d6efd;
  border-color: #0d6efd;
  }

/* Preview canvas */
.watermark-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d9e2ec url('../img/placeholder-image.png') center / cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  }

.copy-watermark-from .social-account-list,
.copy-watermark-to   .social-account-list {
  margin-bottom: 10px;
  }

.copy-watermark-from .social-account-list .user-info p + p,
.copy-watermark-to   .social-account-list .user-info p + p {
  line-height: 1.2;
  }

.watermark-preview > .d-grid {
  position: absolute;
  inset: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  }

.watermark-preview .uploaded-image {
  position: absolute;
  width: 20%;
  top: 15px;
  left: 15px;
  opacity: .30;
  transition: top .15s ease, left .15s ease, right .15s ease, bottom .15s ease, opacity .15s ease, width .15s ease;
  }

.watermark-preview .preview-watermark-image {
  width: 100%;
  height: auto;
  display: block;
  }

.watermark-preview.select-profile {
  aspect-ratio: auto;
  background: #f6f9fb;
  justify-content: center;
  }

/* "Inherited / custom" compact card */
.sas-wm-thumb-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  }

.sas-wm-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  }

.sas-wm-compact-info p {
  line-height: 1.3;
  }

/* Disabled-form-group helper used while controls wait for a watermark image */
.form-group.disabled,
.ws-wm-controls.disabled {
  pointer-events: none;
  opacity: .55;
  }

/* Workspace counter block */
.ws-wm-counter-text {
  padding-top: .5rem;
  }

.ws-override-row {
  background: #fff;
  }

/* Profile-row selected state inside copy-from / copy-to modals */
.wm-profile-row {
  padding: .5rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: .5rem;
  cursor: pointer;
  background: #fff;
  }

.wm-profile-row.selected {
  border-color: #0d6efd;
  background: #fff;
  }

.wm-profile-row.selected .user-check {
  color: #0d6efd;
  }

/* Override-warning alert tweaks (uses Bootstrap .alert-warning otherwise) */
#wm-override-alert i {
  font-size: 1.1rem;
  }

/* Queue social-preview: "Show watermark" toggle pane ââ */
.wm-prev-accounts {
  width: 250px;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 15px;
  }

.wm-prev-account-nav .nav-link {
  padding: 8px 10px;
  color: #101010;
  border-radius: 6px !important;
  text-align: left;
  white-space: normal;
  transition: background 150ms ease-out, border-color 150ms ease-out;
  opacity: 0.7;
  }

.wm-prev-account-nav .nav-link.active,
.wm-prev-account-nav .nav-link:hover {
  background: #e8f0fe !important;
  color: #0d6efd;
  opacity: 1;
  }

.wm-prev-account-nav .nav-link:hover:not(.active) {
  background: #EEF2FF;
  }

.wm-prev-account-nav .nav-link .schedule-pic-box {
  flex-shrink: 0;
  }

.wm-sp-left {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 420px;
  }

.wm-sp-info-strip {
  padding: 0 0 12px;
  flex-wrap: wrap;
  }

@keyframes wmFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
      }

  to {
    opacity: 1;
    transform: translateY(0);
      }

  }

#wm-preview-pane:not(.d-none) {
  animation: wmFadeIn 200ms ease-out;
  }

@media (prefers-reduced-motion: reduce) {
  #wm-preview-pane {
    animation: none;
      }

  }

.wm-badge-ws,
.wm-badge-custom,
.wm-badge-none {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  gap: 2px;
  }

.wm-badge-ws {
  background: #EFF3FF;
  color: #4F6EF7;
  }

.wm-badge-custom {
  background: #fffbeb;
  color: #f59e0b;
  }

.wm-badge-none {
  background: #F4F6FA;
  color: #101010;
  }

.qp-wm-ws {
  color: #4F6EF7;
  }

.qp-wm-custom {
  color: #f59e0b;
  }

.img-uploaded .uploaded-watermark {
  max-height: 100%;
  }

/* ---------------Instagram Reels Audio (Audio API) start--------------- */

.iga-empty-icon {
  width: 32px;
  height: 32px;
  background: #eef4ff;
  color: #0d6efd;
  font-size: 16px;
  border-radius: 6px;
  }

.iga-cover-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #1f2937;
  border-radius: 6px;
  overflow: hidden;
  }

.iga-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  }

.iga-cover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background: #ffffffe0;
  font-size: 13px;
  }

.iga-cover-play.playing .ri-play-fill,
.iga-cover-play:not(.playing) .ri-pause-fill,
.iga-block[data-iga-state="selected"] .iga-fb-hint {
  display: none;
  }

.iga-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eef4ff;
  color: #0d6efd;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  }

.iga-type-pill.iga-type-original {
  background: #fff1ec;
  color: #d2480c;
  }

.iga-vol-label {
  width: 110px;
  flex-shrink: 0;
  color: #101010;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0;
  }

.iga-vol-value {
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  color: #101010;
  }

.iga-slider {
  padding: 0;
  height: 4px;
  }

.iga-divider {
  border-top: 1px solid #eef0f2;
  opacity: 1;
  margin: 12px 0;
  }

.iga-needs-fb .ri-error-warning-line {
  font-size: 16px;
  vertical-align: -2px;
  color: #b88200;
  }

/* Picker modal */
.iga-picker-tabs .nav-link {
  border: 1px solid #e4e8ec;
  color: #101010;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  line-height: 1.2;
  }

.iga-picker-tabs .nav-link:hover {
  background: #f6f9fb;
  }

.iga-picker-tabs .nav-link.active {
  background: #101010;
  color: #fff;
  border-color: #101010;
  }

.iga-picker-search {
  max-width: 280px;
  }

.iga-row {
  cursor: default;
  transition: background 120ms ease;
  }

.iga-row:hover {
  background: #f6f9fb;
  }

.iga-row:last-child {
  border-bottom: 0 !important;
  }

.iga-row-use-btn {
  min-width: 60px;
  }

.iga-modal-footer-note small {
  line-height: 1.4;
  }

.iga-modal-footer-note .icon-info {
  font-size: 13px;
  vertical-align: -1px;
  }

.iga-header-icon {
  width: 20px;
  height: 20px;
  }

/* Account selector bar */
.iga-account-chip {
  background: #fff;
  border: 1px solid #e4e8ec;
  border-radius: 999px;
  padding: 4px 14px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #101010;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  }

.iga-account-chip:hover {
  border-color: #b9c4d0;
  }

.iga-account-chip:focus-visible {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  }

.iga-account-chip::after {
  margin-left: 2px;
  opacity: 0.6;
  }

.iga-account-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef0f2;
  flex-shrink: 0;
  }

.iga-account-chip-handle,
.iga-account-chip-name {
  line-height: 1.2;
  }

.iga-account-menu {
  min-width: 320px;
  padding: 4px;
  border: 1px solid #e4e8ec;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  }

.iga-account-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  }

.iga-account-item.active {
  background: #eef4ff;
  color: inherit;
  }

.iga-account-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef0f2;
  flex-shrink: 0;
  }

.iga-account-item-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  }

.iga-account-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  }

.iga-account-status-ok {
  background: #e7f8ee;
  color: #1f7a3f;
  }

.iga-account-status-warn {
  background: #fff4e0;
  color: #b88200;
  }

/* Loading / reconnect / no-accounts / empty states */
.iga-loading-state .spinner-border {
  width: 36px;
  height: 36px;
  border-width: 3px;
  color: #0d6efd;
  }

.iga-no-accounts-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef4ff;
  color: #0d6efd;
  font-size: 24px;
  margin: 0 auto 16px;
  }

.iga-reconnect-state .iga-reconnect-copy,
.iga-no-accounts-state .iga-no-accounts-copy {
  max-width: 420px;
  }

.iga-reconnect-handle {
  color: #0d6efd;
  font-weight: 600;
  }

/* Reconnect: account-aware avatar + Facebook brand button */
.iga-reconnect-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
  }

.iga-reconnect-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef0f2;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
  }

.iga-reconnect-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1877F2;
  color: #fff;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  }

.iga-reconnect-avatar-badge i {
  font-size: 16px;
  line-height: 1;
  }

.iga-reconnect-features {
  margin: 0 auto 20px;
  max-width: 340px;
  text-align: left;
  }

.iga-reconnect-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #475569;
  font-size: 13px;
  }

.iga-reconnect-features li .icon-tick {
  color: #1f7a3f;
  background: #e7f8ee;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  }

.iga-reconnect-btn {
  background: #1877F2;
  color: #fff;
  border: 0;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  transition: background 150ms ease, transform 100ms ease;
  text-decoration: none;
  }

.iga-reconnect-btn:hover {
  background: #1361d9;
  color: #fff;
  }

.iga-reconnect-btn:active {
  transform: translateY(1px);
  }

.iga-reconnect-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.25);
  outline: none;
  }

.iga-reconnect-btn i {
  font-size: 18px;
  line-height: 1;
  }

.iga-list-badge {
  max-width: 260px;
  }

/* ---------------Instagram Reels Audio (Audio API) end--------------- */

/* ============================================
   RPT Stat Cards (from reports design system)
   ============================================ */
:root {
  --rpt-border: #E8ECF1;
  --rpt-up:     #047857; 
  --rpt-up-bg:  #ECFDF5;
  --rpt-down:   #B91C1C;
  --rpt-down-bg:#FEF2F2;
  --rpt-zero:   #4B5563;
  --rpt-zero-bg:#F3F4F6;
  }

/* --- KPI Stat Cards Grid --- */
.rpt-stats-grid {
  display: grid;
  gap: 14px;
  }

.rpt-stats-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rpt-stats-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  }

.rpt-stats-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  }

.rpt-stat-card {
  background: #ffffff;
  border: 1px solid var(--rpt-border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  }

.rpt-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  }

.rpt-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: transparent;
  }

.rpt-stat-card:hover::before {
  transform: scaleX(1);
  }

.rpt-stat-card .rpt-stat-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #6B7280;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  }

.rpt-stat-card .rpt-stat-label .rpt-stat-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  }

.rpt-stat-card .rpt-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #1A1D26;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
  }

.rpt-stat-card .rpt-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  width: fit-content;
  }

.rpt-stat-card .rpt-stat-change.up {
  color: var(--rpt-up);
  background: 
  var(--rpt-up-bg);
  }

.rpt-stat-card .rpt-stat-change.down {
  color: var(--rpt-down);
  background: 
  var(--rpt-down-bg);
  }

.rpt-stat-card .rpt-stat-change.zero {
  color: var(--rpt-zero);
  background: var(--rpt-zero-bg);
  }

.rpt-stat-card .rpt-stat-subtitle {
  font-size: 11px;
  color: #9CA3AF;
  margin: 0;
  line-height: 1.3;
  }

/* Stat card accent colors */
.rpt-stat-card.accent-blue .rpt-stat-icon {
  background: #EFF3FF;
  color: #4F6EF7;
  }

.rpt-stat-card.accent-blue::before {
  background: #4F6EF7;
  }

.rpt-stat-card.accent-emerald .rpt-stat-icon {
  background: #ECFDF5;
  color: #10B981;
  }

.rpt-stat-card.accent-emerald::before {
  background: #10B981;
  }

.rpt-stat-card.accent-amber .rpt-stat-icon {
  background: #FFFBEB;
  color: #F59E0B;
  }

.rpt-stat-card.accent-amber::before {
  background: #F59E0B;
  }

.rpt-stat-card.accent-violet .rpt-stat-icon {
  background: #F3F0FF;
  color: #8B5CF6;
  }

.rpt-stat-card.accent-violet::before {
  background: #8B5CF6;
  }

.rpt-stat-card.accent-rose .rpt-stat-icon {
  background: #FFF1F2;
  color: #F43F5E;
  }

.rpt-stat-card.accent-rose::before {
  background: #F43F5E;
  }

.rpt-stat-card.accent-cyan .rpt-stat-icon {
  background: #ECFEFF;
  color: #06B6D4;
  }

.rpt-stat-card.accent-cyan::before {
  background: #06B6D4;
  }

.rpt-stat-card.accent-orange .rpt-stat-icon {
  background: #FFF7ED;
  color: #F97316;
  }

.rpt-stat-card.accent-orange::before {
  background: #F97316;
  }

.rpt-stat-card.accent-teal .rpt-stat-icon {
  background: #F0FDFA;
  color: #14B8A6;
  }

.rpt-stat-card.accent-teal::before {
  background: #14B8A6;
  }

.rpt-stat-card.btn-profile-status {
  cursor: pointer;
  user-select: none;
  }

.rpt-stat-card.btn-profile-status.active::before {
  transform: scaleX(1);
  }

.rpt-stat-card.btn-profile-status.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: transparent;
  }

/* ============ Post Labels (chips, dot, dropdown, table, color swatches) ============ */

.rp-table thead th {
  background: var(--rpt-bg);
  color: rgb(107, 114, 128);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  white-space: nowrap;
  }

.rp-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  }

.rp-label-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(13, 110, 253, 0.1);
  border-radius: 999px;
  font-weight: 600;
  color: #0d6efd;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
  }

.rp-label-chip-sm {
  padding: 6px 8px;
  font-size: 11px;
  }

.rp-label-chip-md {
  padding: 4px 10px;
  font-size: 12px;
  }

.rp-label-chip .rp-label-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  }

/* Compact pill design: hide the inline dot inside chips - color is conveyed by tinted bg + text */
.rp-label-chip .rp-label-dot {
  display: none;
  }

/* Standalone dot (used in dropdown options, filter triggers, etc.) */
.rp-label-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0d6efd;
  flex-shrink: 0;
  }

.rp-label-chip[data-color="blue"] {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  }

.rp-label-chip[data-color="emerald"] {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  }

.rp-label-chip[data-color="amber"] {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  }

.rp-label-chip[data-color="rose"] {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
  }

.rp-label-chip[data-color="violet"] {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  }

.rp-label-chip[data-color="cyan"] {
  background: rgba(6, 182, 212, 0.14);
  color: #0891b2;
  }

.rp-label-chip[data-color="slate"] {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
  }

.rp-label-chip[data-color="lime"] {
  background: rgba(132, 204, 22, 0.16);
  color: #4d7c0f;
  }

.rp-label-dot[data-color="blue"] {
  background: #0d6efd;
  }

.rp-label-dot[data-color="emerald"] {
  background: #10b981;
  }

.rp-label-dot[data-color="amber"] {
  background: #f59e0b;
  }

.rp-label-dot[data-color="rose"] {
  background: #f43f5e;
  }

.rp-label-dot[data-color="violet"] {
  background: #8b5cf6;
  }

.rp-label-dot[data-color="cyan"] {
  background: #06b6d4;
  }

.rp-label-dot[data-color="slate"] {
  background: #64748b;
  }

.rp-label-dot[data-color="lime"] {
  background: #84cc16;
  }

/* Color swatch picker (used on Manage Labels create/edit) */

/* Color swatch picker (Manage Labels create/edit drawer) */
.rp-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.rp-color-swatch.selected {
  border-color: #101010;
  box-shadow: 0 0 0 2px #fff inset;
}

.rp-color-swatch[data-color="blue"] {
  background: #0d6efd;
}

.rp-color-swatch[data-color="emerald"] {
  background: #10b981;
}

.rp-color-swatch[data-color="amber"] {
  background: #f59e0b;
}

.rp-color-swatch[data-color="rose"] {
  background: #f43f5e;
}

.rp-color-swatch[data-color="violet"] {
  background: #8b5cf6;
}

.rp-color-swatch[data-color="cyan"] {
  background: #06b6d4;
}

.rp-color-swatch[data-color="slate"] {
  background: #64748b;
}

.rp-color-swatch[data-color="lime"] {
  background: #84cc16;
}

/* Small × on removable chips (reports labels filter pill bar). Matches the
   chip text size so it doesn't overpower the label name. */
.rp-label-chip-x {
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 2px;
  color: inherit;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  }

.rp-label-chip-x i {
  font-size: 13px;
  vertical-align: middle;
}

.rp-label-chip-x:hover {
  opacity: 1;
  color: #f43f5e;
  }

/* Label icon trigger + hover tooltip (used on post cards in queue/drafts/history/calendar) */
.rp-label-icon-host {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  }

.rp-label-icon-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7785;
  font-size: 14px;
  line-height: 1;
  cursor: default;
  transition: color 0.15s ease;
  }

.post-library .rp-label-icon-trigger {
  padding: .5rem;
  border-radius:0.375rem;
  border: 1px solid #dee2e6;
  }

.rp-label-icon-host:hover .rp-label-icon-trigger {
  color: #0d6efd;
  }

.tooltip.rp-label-tooltip {
  opacity: 1;
  }

.tooltip.rp-label-tooltip .tooltip-inner {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  max-width: 260px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.06);
  }

.tooltip.rp-label-tooltip .tooltip-arrow::before {
  border-top-color: #fff;
  }

.tooltip.rp-label-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #fff;
  }

.tooltip.rp-label-tooltip[data-popper-placement^="left"]   .tooltip-arrow::before {
  border-left-color:  #fff;
  }

.tooltip.rp-label-tooltip[data-popper-placement^="right"]  .tooltip-arrow::before {
  border-right-color: #fff;
  }

.rp-label-tooltip-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  }

.rp-label-tooltip-list .rp-label-chip {
  padding: 4px 12px;
  font-size: 12px;
  }

/* Label picker widget (compose flows) */
.rp-label-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  }

.rp-label-input .rp-label-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  }

.rp-label-input .rp-label-count {
  font-size: 10px;
  padding: 2px 6px;
  font-weight: 600;
  line-height: 1;
  min-width: 18px;
  }

/* Active-filter red dot - sits OUTSIDE the button corner, like the inbox unread indicator */
.rp-label-active-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f43f5e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
  pointer-events: none;
  }

.rp-label-input .rp-label-add-btn {
  background: #f6f9fb;
  border: 1px dashed #cdd5df;
  color: #5f6b7a;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  }

.rp-label-input .rp-label-add-btn:hover {
  background: #eef5ff;
  border-color: #0d6efd;
  color: #0d6efd;
  }

/* Dropdown menu */
 
.rp-label-options {
  max-height: 230px;
  overflow-y: auto;
  }

.rp-label-option {
  padding: 6px;
  border-radius: 6px;
  }

.rp-label-option:hover {
  background: #f6f9fb;
  }

/* The picker often sits inside an uppercase/bold section header (Labels).
   Reset inherited transform/weight/color/size so options read as normal case. */
.rp-label-dropdown {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: #101010;
  }

.rp-label-dropdown .rp-label-option .b5 {
  font-size: 13px;
  }

.rp-label-dropdown .rp-label-option .form-check-input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  }

.rp-label-dd-footer a {
  color: #0d6efd;
  }

.rp-label-dd-footer a:hover {
  color: #0a58ca;
  }

/* Picker empty states (no labels exist / search returned no matches) */
.rp-label-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(13, 110, 253, 0.10);
  color: #0d6efd;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
  }

/* The clw design tokens. Brand values come from Bootstrap so the palette stays
   in one place; only the greys and semantic colors Bootstrap has no match for
   are declared as hex. Defined on :root so the rail and bulk bar components can
   be reused on pages that are not built on .clw-shell. */

:root {
  --clw-bg: #F6F9FB;
  --clw-surface: var(--bs-white);
  --clw-border: #E5E9EF;
  --clw-border-soft: #EEF1F5;
  --clw-text: #101010;
  --clw-muted: #6B7280;
  --clw-muted-2: #6B7280;
  --clw-primary: var(--bs-primary);
  --clw-primary-soft: rgba(var(--bs-primary-rgb), 0.10);
  --clw-warn: #B45309;
  --clw-warn-soft: rgba(245, 158, 11, 0.10);
  --clw-danger: #B91C1C;
  --clw-danger-soft: rgba(220, 38, 38, 0.10);
  --clw-success: #047857;
  --clw-success-soft: rgba(16, 185, 129, 0.10);
  --clw-radius: 8px;
  --clw-radius-lg: 12px;
  --clw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --clw-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
  --clw-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
  }

/* Content Library Workspace */

.clw-shell {
  background: var(--clw-bg);
  }

/* === workspace layout === */

.clw-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  }

/* LIBRARY RAIL */

.clw-search {
  padding: 0 10px;
  height: 36px;
  transition: border-color .15s, box-shadow .15s;
  }

.clw-search:focus-within {
  border-color: var(--clw-primary);
  box-shadow: 0 0 0 3px var(--clw-primary-soft);
  background: #fff;
  }

.clw-search > i {
  color: var(--clw-muted);
  font-size: 15px;
  }

.clw-search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 13px;
  padding: 0 8px;
  color: var(--clw-text);
  }

 .clw-rail-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clw-muted);
  cursor: pointer;
  border-radius: 6px;
  }

.clw-rail-group-head:hover {
  background: var(--clw-bg);
  color: var(--clw-text);
  }

.clw-rail-group-head .clw-chev {
  transition: transform .15s;
  font-size: 14px;
  }

.clw-rail-group-head.collapsed .clw-chev {
  transform: rotate(-90deg);
  }

.clw-rail-group-count {
  font-weight: 500;
  }
.clw-rail-group-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
  }

.clw-lib {
  --clw-lib-c: var(--clw-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--clw-text);
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: background .12s;
  }

.clw-lib:hover {
  background: var(--clw-bg);
  color: #0d6efd;
  }

/* The account settings rail drives Bootstrap tabs, so its current row carries
   the .active class the tab plugin toggles rather than .clw-lib-active. */

.clw-lib-active,
.clw-lib.active {
  background: #E6F2FF;
  color: var(--clw-primary);
  }

.clw-lib-active .icon-tile,
.clw-lib.active .icon-tile {
  background: #ffffff;
  }

.clw-lib-state, .clw-lib-glyph {
  font-size: 13px;
  color: #9ca3af;
  flex-shrink: 0;
  }

.clw-lib-active .clw-lib-state {
  color: var(--clw-primary);
  }

.clw-lib-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--clw-muted);
  flex-shrink: 0;
  padding: 0 4px;
  }

.clw-lib-active .clw-lib-count {
  color: var(--clw-primary);
  }

/* Named library tints. The rail sets --clw-lib-c per row, so anything that
   names a library can carry its colour without repeating the hex. */

.clw-lib-c-blue {
  --clw-lib-c: #3498db;
  }

.clw-lib-c-rose {
  --clw-lib-c: #d2527f;
  }

.clw-lib-c-amber {
  --clw-lib-c: #F59E0B;
  }

.clw-lib-c-green {
  --clw-lib-c: #10B981;
  }

.clw-lib-c-red {
  --clw-lib-c: #ef4444;
  }

/* ================= Library picker =================
   The destination list a post is copied or moved into (contentlist move/copy,
   expired content copy). Each row repeats the rail's library row - tinted tile,
   name, count - so one library reads the same in the rail and in the picker.
   Selection is drawn from the input, so no class toggling is needed. */

.clw-libpick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  }

.clw-libpick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  margin: 0;
  }

.clw-libpick-row:hover {
  background: #FBFCFD;
  border-color: #DCE3EA;
  }

.clw-libpick-row:has(input:checked) {
  background: rgba(13, 110, 253, 0.04);
  border-color: #0d6efd;
  }

.clw-libpick-name {
  font-size: 13.5px;
  font-weight: 500;
  color: #101010;
  }

/* A feed line names the library it fills, and colours its glyph to match the
   library list, so the two read as the same set of libraries. */

.fm-feed-lib > i {
  color: var(--clw-lib-c);
  }

/* generic icon button (rail collapse, mobile menu) */
.clw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--clw-border);
  background: #fff;
  border-radius: 6px;
  color: var(--clw-muted);
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  font-size: 14px;
  }

.clw-icon-btn:hover {
  border-color: var(--clw-primary);
  color: var(--clw-primary);
  }

.clw-icon-btn-md {
  width: 38px;
  height: 38px;
  border-radius: var(--clw-radius);
  border: 1px solid var(--clw-border);
  background: #fff;
  color: var(--clw-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all .12s;
  }

.clw-icon-btn-md:hover {
  color: var(--clw-text);
  border-color: var(--clw-muted-2);
  }

/* ============================================================
   COCKPIT HEADER
   ============================================================ */
 
.clw-cockpit-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  }

.clw-cockpit-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clw-text);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

.clw-cockpit-rename {
  opacity: 0;
  }

.clw-cockpit-name:hover .clw-cockpit-rename {
  opacity: 1;
  }

.clw-btn-add {
  border-radius: var(--clw-radius) 0 0 var(--clw-radius) !important;
  }

/* ============================================================
   SUB-BAR (tabs + view + slots)
   ============================================================ */
.clw-subbar {
  background: var(--clw-surface);
  border-bottom: 1px solid var(--clw-border);
  padding: 2px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  }

.clw-tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  }

.clw-tabs::-webkit-scrollbar {
  display: none;
  }

.clw-tab {
  border: 0;
  background: transparent;
  padding: 12px 0;
  color: var(--clw-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  top: 1px;
  transition: all .12s;
  }

.clw-tab:hover {
  color: var(--clw-text);
  }

.clw-tab.active {
  color: var(--clw-primary);
  border-bottom-color: var(--clw-primary);
  font-weight: 600;
  }

.clw-tab-count {
  font-size: 11px;
  font-weight: 600;
  background: #f6f9fb;
  color: #6b7280;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  }

.clw-tab.active .clw-tab-count {
  background: var(--clw-primary-soft);
  color: var(--clw-primary);
  }

.clw-tab-count-warn {
  background: var(--clw-warn-soft) !important;
  color: #B45309 !important;
  }

.clw-tab-count-submitted {
  background: var(--clw-primary-soft) !important;
  color: #0d6efd !important;
  }

.clw-tab-count-rejected {
  background: var(--clw-danger-soft) !important;
  color: #dc2626 !important;
  }

.clw-view-toggle {
  display: inline-flex;
  background: var(--clw-bg);
  border-radius: var(--clw-radius);
  padding: 2px;
  border: 1px solid var(--clw-border);
  }

.clw-view-btn {
  border: 0;
  background: transparent;
  width: 30px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clw-muted);
  cursor: pointer;
  font-size: 15px;
  transition: all .12s;
  }

.clw-view-btn:hover {
  color: var(--clw-text);
  }

.clw-view-btn.active {
  background: #fff;
  color: var(--clw-primary);
  box-shadow: var(--clw-shadow-sm);
  }

.clw-toggle-slots-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--clw-primary-soft);
  color: var(--clw-primary);
  padding: 1px 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  }

.clw-toggle-slots.active .clw-toggle-slots-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
  }

/* Attention dot shown on the Time slots button when no slots are added */
.clw-toggle-slots-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color:#B45309;
  animation: clw-slots-dot-pulse .9s ease-out infinite;
  }

@keyframes clw-slots-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(9,83,9,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(9,83,9,0); }
  100% { box-shadow: 0 0 0 0 rgba(9,83,9,0); }
  }

/* Nudge popover anchored to the Time slots button */
.clw-slots-popover {
  max-width: 280px;
  border-color: #B45309;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10);
  }

.clw-slots-popover .popover-arrow::before {
  border-bottom-color: #B45309 !important;
  }

.clw-slots-popover .popover-arrow::after {
  border-bottom-color: #FFFAE8 !important;
  }

.clw-slots-popover .popover-body {
  color: #101010;
  padding: 12px;
  background-color: #FFFAE8;
  border-radius: inherit;
  }

.clw-slots-popover .clw-slots-pop-close {
  flex: 0 0 auto;
  font-size: 10px;
  margin-top: 2px;
  }

/* ============================================================
   FILTER BAR
   ============================================================ */

/* Header search toggle: show the search glyph when collapsed, the close
   glyph when the search bar is open (Bootstrap toggles .collapsed) */
.clw-search-toggle .ri-close-fill,
.clw-search-toggle:not(.collapsed) .ri-search-line {
  display: none;
  }

.clw-search-toggle:not(.collapsed) .ri-close-fill {
  display: inline-block;
  }

/* ============================================================
   CONTENT - TABLE VIEW
   ============================================================ */

.more-action .cl-error-icon,
.clw-col-platforms .cl-error-icon {
  top: 0px;
  left: -3px;
  height: 12px;
  width: 12px;
  flex: 0 0 20px;
  align-items: center;
  border-radius: 50%;
  }

.clw-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 24px 24px;
  background: var(--clw-bg);
  }

.clw-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--clw-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--clw-border);
  text-decoration: none;
  color: var(--clw-muted-2);
  }

a.clw-thumb:hover, a.clw-thumb:focus {
  color: var(--clw-muted-2);
  text-decoration: none;
  }

.clw-thumb-clickable {
  cursor: zoom-in;
  }

.clw-thumb-clickable:hover {
  border-color: var(--clw-muted-2);
  }

.clw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }

.clw-thumb-text {
  color: var(--clw-muted-2);
  font-size: 18px;
  background: linear-gradient(135deg, #F6F9FB, #EEF1F5);
  }

.clw-thumb-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(16, 16, 16, 0.82);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  }

.clw-thumb-badge > i {
  font-size: 11px;
  line-height: 1;
  }
 
.clw-link-domain,
.clw-link-meta .clw-link-title {
  max-width: 30ch;
  }

.clw-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--clw-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  }

.clw-caption-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  }

.clw-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--clw-bg);
  color: var(--clw-muted);
  border: 1px solid var(--clw-border);
  }

.clw-meta-pill > i {
  font-size: 12px;
  }

.clw-meta-warn {
  color: #B45309;
  background: var(--clw-warn-soft);
  border-color: rgba(245,158,11,0.25);
  }

.clw-plt {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--clw-border);
  flex-shrink: 0;
  font-size: 10px;
  margin-left: -5px;
  }

.clw-plt img {
  object-fit: contain;
  border-radius: 50%;
  }

.clw-col-platforms {
  padding-left: 5px;
  }

.clw-plt-ok {
  border-color: var(--clw-success);
  }

.clw-plt-warn {
  border-color: var(--clw-warn);
  }

.clw-plt-error {
  border-color: var(--clw-danger);
  }

.clw-view .clw-plt .cl-error-icon,
.clw-view .post-card .cl-error-icon {
  top: -5px;
  }

.clw-table-summary {
  font-size: 12.5px;
  color: var(--clw-muted);
  font-weight: 500;
  }

/* CARD VIEW */

.clw-post-card:hover {
  box-shadow: var(--clw-shadow-md);
  border-color: var(--clw-muted-2) !important;
  }

.clw-card-media {
  overflow: hidden;
  background: var(--clw-bg);
  aspect-ratio: 16 / 10;
  position: relative;
  border-radius: var(--clw-radius);
  border: 1px solid var(--clw-border);
  display: block;
  text-decoration: none;
  color: inherit;
  }

a.clw-card-media:hover, a.clw-card-media:focus {
  color: inherit;
  text-decoration: none;
  }

.clw-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  }

/* Clickable image / video media (opens preview modal) */
.clw-card-media-clickable {
  cursor: zoom-in;
  }

.clw-card-media-clickable:focus-visible {
  outline: 2px solid var(--clw-primary);
  outline-offset: 2px;
  }

.clw-card-media-video.clw-card-media-clickable {
  cursor: pointer;
  }

/* Slider (carousel) for multi-image posts */
.clw-card-media-slider {
  padding: 0;
  }

.clw-slider, .clw-slider-inner, .clw-slider-item {
  height: 100%;
  }

.clw-slider-item {
  background: var(--clw-bg);
  }

.clw-slider-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
  }

.clw-slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  }

.clw-slider-ctrl {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, .92);
  color: #101010;
  border-radius: 999px;
  border: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }

.clw-slider-ctrl > i {
  font-size: 18px;
  }

.clw-slider-ctrl-prev {
  left: 8px;
  }

.clw-slider-ctrl-next {
  right: 8px;
  }

.clw-card-media-slider:hover .clw-slider-ctrl,
.clw-slider-ctrl:focus-visible {
  opacity: 1;
  }

.clw-slider-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 16, 16, .78);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  }

/* Text-only post */

.clw-card-media-text .clw-text-quote {
  font-family: "DM Serif Display", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.35;
  color: #1f2937;
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  }

.clw-card-media-text .clw-text-quote::before {
  content: "\201C";
  position: absolute;
  top: -22px;
  left: -10px;
  font-size: 44px;
  color: rgba(13, 110, 253, .22);
  font-family: "DM Serif Display", serif;
  line-height: 1;
  }

/* Video post overlay */
.clw-card-media-video .clw-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  }

.clw-card-media-video .clw-video-play > i {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #101010;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  padding-left: 2px;
  }

/* Link preview card */
.clw-card-media-link {
  display: flex;
  flex-direction: column;
  background: #fff;
  }

.clw-card-media-link .clw-link-img {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  }

.clw-card-media-link .clw-link-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  }

/* ============================================================
   PLATFORMS POPOVER (replaces SocialAccountDetails offcanvas for inline view)
   ============================================================ */

.clw-platforms-pop > .clw-col-platforms {
  cursor: pointer;
  }

.clw-platforms-pop-menu {
  border: 1px solid var(--clw-border) !important;
  border-radius: var(--clw-radius-lg) !important;
  box-shadow: var(--clw-shadow-lg) !important;
  min-width: 320px;
  max-width: 360px;
  max-height: 360px;
  overflow: hidden;
  }
 
/* ============================================================
   EMPTY STATE
   ============================================================ */

.clw-empty-card {
  width: 100%;
  text-align: center;
  }

.clw-empty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  }

.clw-empty-tile:hover {
  background: #fff;
  border-color: var(--clw-primary);
  color: var(--clw-primary);
  transform: translateY(-1px);
  }

.clw-empty-tile:hover .clw-empty-tile-sub {
  color: var(--clw-muted);
  }

.clw-onboard {
  display: none;
  }

.clw-shell.clw-no-libraries .clw-onboard {
  display: block;
  }

.clw-shell.clw-no-libraries .clw-cockpit,
.clw-shell.clw-no-libraries .clw-subbar,
.clw-shell.clw-no-libraries .clw-filterbar,
.clw-shell.clw-no-libraries .clw-content,
.clw-shell.clw-no-libraries .clw-bulkbar,
.clw-shell.clw-no-libraries .clw-rail {
  display: none !important;
  }

.clw-rail-empty-hero {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px 12px;
  background: var(--clw-bg);
  border: 1px dashed var(--clw-border);
  border-radius: var(--clw-radius);
  }

.clw-rail-empty-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--clw-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clw-primary);
  font-size: 18px;
  }

.clw-rail-empty-hero-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--clw-text);
  margin: 4px 0 0;
  }

.clw-rail-empty-hero-sub {
  font-size: 12px;
  color: var(--clw-muted);
  margin: 0;
  line-height: 1.4;
  }

.clw-onboard-tpl:hover {
  border-color: var(--clw-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--clw-shadow-md);
  }

.clw-onboard-tpl-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  }

.clw-tpl-icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  }

.clw-tpl-icon-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  }

.clw-tpl-icon-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
  }

.clw-tpl-icon-violet {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
  }

.clw-tpl-icon-orange {
  background: #FFF7ED;
  color: #F97316;
  }

.clw-tpl-icon-teal {
  background: #F0FDFA;
  color: #14B8A6;
  }

.clw-tpl-icon-danger {
  background: #FEF2F2;
  color: #DC2626;
  }

.clw-onboard-tpl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: auto;
  }

.clw-onboard-tpl-tag > i {
  font-size: 12px;
  }

.clw-onboard-tpl-tag[data-tag="evergreen"] {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  }

.clw-onboard-tpl-tag[data-tag="onetime"] {
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
  }

.clw-onboard-tpl-tag[data-tag="seasonal"] {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
  }

.clw-onboard-tpl-tag[data-tag="bulk"] {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  }

.clw-onboard-bulk-head,
.clw-onboard-bulk-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 40px;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  }

.clw-onboard-bulk-row {
  border-top: 1px solid var(--clw-border-soft);
  }

.clw-onboard-bulk-row > [role="cell"] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  }

.clw-onboard-bulk-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 12px;
  }

.clw-type-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1.5px solid var(--clw-border);
  border-radius: var(--clw-radius);
  transition: border-color .15s, background .15s, box-shadow .15s;
  }

.clw-type-card:hover .clw-type-card-inner {
  border-color: var(--clw-muted-2);
  }

.clw-type-card.clw-type-card-active .clw-type-card-inner {
  border-color: var(--clw-primary);
  background: var(--clw-primary-soft);
  }
.clw-name-field .clw-name-swatch {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  }

.clw-name-field .clw-name-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
  border: 0;
  }

.clw-name-field .clw-name-swatch::-webkit-color-swatch,
.clw-name-field .clw-name-swatch::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
  }

.clw-name-field .form-control:focus {
  box-shadow: none;
  }

.clw-lib-queue-list::-webkit-scrollbar {
  width: 6px;
  }

.clw-lib-queue-list::-webkit-scrollbar-thumb {
  background: var(--clw-border);
  border-radius: 3px;
  }

.clw-lib-queue-list::-webkit-scrollbar-thumb:hover {
  background: var(--clw-muted-2);
  }

.clw-lib-queue-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 10px;
  }

.clw-lib-queue-tag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  }

.clw-lib-queue-tag[data-tag="evergreen"] {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  }

.clw-lib-queue-tag[data-tag="onetime"] {
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
  }

.clw-lib-queue-tag[data-tag="seasonal"] {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
  }

.clw-lib-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  }

.clw-approval-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  }

.clw-segmented {
  display: inline-flex;
  background: var(--clw-bg);
  border: 1px solid var(--clw-border, #E5E9EF);
  border-radius: var(--clw-radius);
  padding: 2px;
  }

.clw-seg {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clw-muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
  }

.clw-seg:hover {
  color: var(--clw-text);
  }

.clw-seg.active {
  background: #fff;
  color: var(--clw-primary);
  box-shadow: var(--clw-shadow-sm);
  font-weight: 600;
  }

.clw-seg .clw-tab-count {
  background: rgba(0,0,0,0.05);
  }

.clw-appr-card {
  transition: all .12s;
  }

.clw-appr-card:hover {
  box-shadow: var(--clw-shadow-md);
  }

.clw-appr-author img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  }

.clw-appr-time {
  color: var(--clw-muted);
  }
 .clw-pointers {
  max-width: 760px;
  margin: 0 auto;
  }

.clw-bulkbar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 24px);
  transform: translate(-50%, 80px);
  z-index: 100;
  transition: transform .18s ease;
  pointer-events: none;
  }

.clw-bulkbar.show {
  transform: translate(-50%, 0);
  pointer-events: auto;
  }

.clw-bulkbar-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: #101010;
  color: #fff;
  padding: 8px 8px 8px 16px;
  border-radius:10px;
  box-shadow: var(--clw-shadow-lg);
  white-space: nowrap;
  }

.clw-bulkbar-count {
  font-size: 13.5px;
  font-weight: 600;
  }

.clw-bulkbar-count strong {
  color: #F59E0B;
  margin-right: 2px;
  }

.clw-bulkbar-clear {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  }

.clw-bulkbar-clear:hover {
  color: #fff;
  }

.clw-bulkbar-spacer {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  margin: 0 4px;
  }

.clw-bulkbar-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s;
  }

.clw-bulkbar-action:hover {
  background: rgba(255,255,255,0.10);
  }

.clw-bulkbar-action-danger {
  color: #FCA5A5;
  }

.clw-bulkbar-action-danger:hover {
  background: #dc3545;
  color: #fff;
  }

.clw-slots.ts-oc {
  --ts-bg: #fff;
  --ts-surface: #F7F9FC;
  --ts-border: #E5EAF2;
  --ts-border-soft: #EFF2F7;
  --ts-text: #101010;
  --ts-muted: #5B6B82;
  --ts-faint: #94A3B8;
  --ts-primary: #0d6efd;
  --ts-primary-soft: #EEF4FF;
  --ts-primary-hover: #0b5ed7;
  --ts-best: #F59E0B;
  --ts-best-soft: #FFF8EB;
  --ts-best-text: #92400E;
  --ts-danger: #EF4444;
  --ts-danger-soft: #FEF2F2;
  --bs-offcanvas-width: min(95vw, 1180px);
  }

.clw-slots.ts-oc .ts-tabs,
.ts-segpill {
  display: inline-flex;
  background: var(--ts-surface, #F7F9FC);
  border: 1px solid var(--ts-border, #E5EAF2);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  }

.clw-slots .queue-calendar {
  min-width: 100%;
}

.clw-slots.ts-oc .ts-tab,
.ts-segpill button {
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 6px;
  color: var(--ts-muted, #5B6B82);
  transition: 150ms;
  cursor: pointer;
  line-height: 1.2;
  font-family: inherit;
  }

.clw-slots.ts-oc .ts-tab:hover,
.ts-segpill button:hover:not(.active) {
  color: var(--ts-text, #101010);
  }

.clw-slots.ts-oc .ts-tab.active,
.ts-segpill button.active {
  background: #fff;
  color: var(--ts-text, #101010);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  }

.clw-slots.ts-oc .ts-weekgrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  }

  .ts-weekgrid .day-header {
    border-radius: 8px 8px 0 0;
  }

  .ts-weekgrid .day-header:last-child,
  .timeslots-calendar .days-container:last-child
  {
    border: 0 !important;
  }

.clw-slots.ts-oc .cal-day-row.ts-weekgrid {
  border-top: 1px solid var(--ts-border);
  padding-top: 6px;
  }

.clw-slots.ts-oc .ts-cell-time i {
  color: var(--ts-best);
  font-size: 12px;
  }

.clw-slots.ts-oc .ts-cell-tag {
  font-size: 9px;
  font-weight: 700;
  background: var(--ts-text);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: fit-content;
  }

.clw-slots.ts-oc .ts-cell-avatars {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  }

.clw-slots.ts-oc .ts-cell-avatars img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  object-fit: cover;
  margin-left: -5px;
  }

.clw-slots.ts-oc .ts-cell-avatars img:first-child {
  margin-left: 0;
  }

.clw-slots.ts-oc .ts-cell-best .ts-cell-avatars img {
  border-color: var(--ts-best-soft);
  }

.timeslots-calendar .ts-cell-lib {
  font-size: 11px;
  color: var(--ts-muted, #5B6B82);
  }

.timeslots-calendar .ts-cell-lib .icon-library {
  font-size: 13px;
  }

.timeslots-calendar .monthly .cal-day-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
}

.ts-popup .ts-modal-content {
  --ts-bg: #fff;
  --ts-surface: #F7F9FC;
  --ts-border: #E5EAF2;
  --ts-border-soft: #EFF2F7;
  --ts-text: #101010;
  --ts-muted: #5B6B82;
  --ts-faint: #94A3B8;
  --ts-primary: #0d6efd;
  --ts-primary-soft: #EEF4FF;
  --ts-primary-hover: #0b5ed7;
  --ts-best: #F59E0B;
  --ts-best-soft: #FFF8EB;
  --ts-best-text: #92400E;
  --ts-danger: #EF4444;
  --ts-danger-soft: #FEF2F2;
  border-radius: 14px;
  border: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(16, 24, 40, .18);
  }

.ts-popup .ts-profile:hover {
  background: var(--ts-surface);
  }

.ts-popup .ts-profile.checked {
  background: var(--ts-primary-soft);
  border-color: rgba(13, 110, 253, .18);
  }

.ts-popup .ts-profile-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ts-border);
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: 120ms;
  color: transparent;
  font-size: 10px;
  }

.ts-popup .ts-profile.checked .ts-profile-check {
  background: var(--ts-primary);
  border-color: var(--ts-primary);
  color: #fff;
  }

  .ts-popup .ts-capacity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ts-border-soft);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: 120ms;
  background: #fff;
  }

.ts-popup .ts-capacity-row:hover {
  background: var(--ts-surface);
  }

.ts-popup .ts-capacity-info {
  flex: 1;
  min-width: 0;
  }

.ts-popup .ts-capacity-bar {
    height: 2px;
    background: var(--ts-surface);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.ts-popup .ts-capacity-bar-fill {
  height: 100%;
  background: var(--ts-primary);
  border-radius: 999px;
  transition: 300ms;
  }

.ts-popup .ts-capacity-bar-fill.warn {
  background: var(--ts-best);
  }

.ts-popup .ts-capacity-bar-fill.full {
  background: var(--ts-danger);
  }

.ts-popup .ts-capacity-bar-fill.cap-5 {
  width: 5%;
  }

.ts-popup .ts-capacity-bar-fill.cap-15 {
  width: 15%;
  }

.ts-popup .ts-capacity-bar-fill.cap-30 {
  width: 30%;
  }

.ts-popup .ts-capacity-bar-fill.cap-45 {
  width: 45%;
  }

.ts-popup .ts-capacity-bar-fill.cap-65 {
  width: 65%;
  }

.ts-popup .ts-capacity-bar-fill.cap-80 {
  width: 80%;
  }

.ts-popup .ts-capacity-bar-fill.cap-95 {
  width: 95%;
  }

/* Plan limit notice - the box itself is the shared .alert-danger; these rules
   only size the profile chips that say which profiles are actually capped */

.ts-popup .ts-limit-chip {
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  min-width: 0;
  }

.ts-popup .ts-limit-chip .schedule-pic-box {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  }

.ts-popup .ts-limit-chip .small-social-icon {
  height: 12px;
  width: 12px;
  }


.ts-oc-libtag {
    font-size: 12px;
    background: #F6F9FB;
    padding: 6px 10px;
    border-radius: 6px;
}

.ts-popup .ts-composer {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 480px;
  }

.ts-popup .ts-composer-left {
  min-width: 260px;
  max-width: 360px;
  border-right: 1px dashed var(--ts-border);
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  }

.ts-popup .ts-composer-right {
  flex: 1;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  }

.ts-popup .ts-composer-right .ts-section-label {
  justify-content: flex-start;
  gap: 14px;
  }

.ts-popup .ts-composer-right .ts-section {
  margin-bottom: 0;
  }

.ts-popup .ts-daygrid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(7, 1fr);
}

.ts-popup .ts-daygrid button {
  width: auto;
  height: 40px;
  border: 1px solid var(--ts-border);
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-muted);
  cursor: pointer;
  transition: 120ms;
  font-variant-numeric: tabular-nums;
  }

.ts-popup .ts-daygrid button:hover {
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  }

.ts-popup .ts-daygrid button.active {
  background: var(--ts-primary-soft);
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  box-shadow: none;
  }

.ts-popup .ts-daygrid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  }

.ts-popup .ts-daygrid-month button {
  width: auto;
  height: 36px;
  }

.ts-popup .ts-customfreq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border-soft);
  border-radius: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  }

.ts-popup .ts-customfreq-row select {
  border: 1px solid var(--ts-border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-text);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  }

.ts-popup .ts-customfreq-text {
  font-size: 12px;
  color: var(--ts-muted);
  font-weight: 500;
  flex: 1;
  min-width: 80px;
  }

.ts-popup .ts-customfreq-row .ts-icon-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ts-muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: 100ms;
  margin-left: auto;
  }

.ts-popup .ts-customfreq-row .ts-icon-btn-danger:hover {
  background: var(--ts-danger-soft);
  color: var(--ts-danger);
  }

.ts-popup .ts-bigtime {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  padding: 6px;
  width: fit-content;
  font-variant-numeric: tabular-nums;
  }

.ts-popup .ts-bigtime select {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--ts-text);
  padding: 6px 8px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  text-align: center;
  width: 70px;
  }

.ts-popup .ts-bigtime-colon {
  font-size: 18px;
  font-weight: 700;
  color: var(--ts-faint);
  padding: 0 2px;
  }
 
.ts-popup .ts-bigtime.ts-bigtime-sm {
  padding: 4px;
  border-radius: 8px;
  }

 .ts-popup .ts-bigtime.ts-bigtime-sm.active {
    border-color: var(--ts-muted);
 } 

.ts-popup .ts-bigtime.ts-bigtime-sm select {
  font-size: 14px;
  padding: 4px 6px;
  font-weight: 700;
  }

.ts-popup .ts-bigtime.ts-bigtime-sm .ts-bigtime-colon {
  font-size: 14px;
  padding: 0 1px;
  }

.ts-popup .ts-bigtime.ts-bigtime-sm .ts-bigtime-meridiem select {
  font-size: 11px;
  padding: 0;
  }

.ts-popup .ts-bestcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ts-best-soft);
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 10px;
  margin-top: 12px;
  cursor: pointer;
  transition: 120ms;
  }

.ts-popup .ts-bestcard:hover {
  background: #FEF3D7;
  }

.ts-popup .ts-bestcard-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .18);
  color: var(--ts-best);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  }

.ts-popup .ts-bestcard-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  }

.ts-popup .ts-bestcard-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-best-text);
  margin: 0;
  line-height: 1.3;
  }

.ts-popup .ts-bestcard-sub {
  font-size: 11px;
  color: #B45309;
  margin: 0;
  font-weight: 500;
  }

.ts-popup .ts-bestcard-switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(245, 158, 11, .32);
  position: relative;
  flex-shrink: 0;
  transition: 150ms;
  }

.ts-popup .ts-bestcard-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ts-best);
  transition: 150ms;
  }

.ts-popup .ts-bestcard input[type="checkbox"] {
  display: none;
  }

.ts-popup .ts-bestcard input[type="checkbox"]:checked ~ .ts-bestcard-switch {
  background: var(--ts-best);
  border-color: var(--ts-best);
  }

.ts-popup .ts-bestcard input[type="checkbox"]:checked ~ .ts-bestcard-switch::after {
  background: #fff;
  left: 18px;
  }

.ts-popup .ts-section-label .ts-section-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  }

.ts-popup .ts-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ts-primary-soft);
  color: var(--ts-primary);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  }

.ts-popup .ts-time-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  }

.ts-popup .ts-time-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--ts-border);
  background: #fff;
  border-radius: 8px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-muted);
  cursor: pointer;
  transition: 120ms;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  }

.ts-popup .ts-time-preset:hover {
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  background: transparent;
  }

.ts-popup .ts-time-preset.active {
  border-color: var(--ts-primary);
  background: var(--ts-primary-soft);
  color: var(--ts-primary);
  box-shadow: none;
  }

.ts-popup .ts-time-preset.active:hover {
  background: var(--ts-primary-soft);
  color: var(--ts-primary);
  border-color: var(--ts-primary-hover);
  }

.ts-popup .ts-time-preset i {
  font-size: 14px;
  line-height: 1;
  }

.ts-popup .ts-time-preset-best.active {
  background: var(--ts-best-soft);
  border-color: var(--ts-best);
  color: var(--ts-best-text);
  box-shadow: none;
  }

.ts-popup .ts-time-preset-best.active:hover {
  background: var(--ts-best-soft);
  color: var(--ts-best-text);
  border-color: #D97706;
  }

.ts-popup .ts-time-preset-best i {
  color: var(--ts-best);
  }

.ts-popup .ts-time-preset-best:not(.active):hover {
  border-color: var(--ts-best);
  color: var(--ts-best-text);
  background: transparent;
  }

.ts-popup .ts-time-preset-add {
  border-style: dashed;
  color: #101010;
  }

.ts-popup .ts-time-preset-add:hover {
  border-style: solid;
  color: var(--ts-primary);
  background: var(--ts-primary-soft);
  }

.ts-popup .ts-time-preset-add.is-open {
  background: var(--ts-primary-soft);
  border-color: var(--ts-primary);
  color: var(--ts-primary);
  border-style: solid;
  }

.ts-popup .ts-chooser-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  }

.ts-popup .ts-chooser-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 10px;
  transition: 120ms;
  }

.ts-popup .ts-chooser-row:hover {
  border-color: var(--ts-primary);
  background: var(--ts-primary-soft);
  }

.ts-popup .ts-chooser-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ts-surface);
  color: var(--ts-muted);
  border: 1px solid var(--ts-border-soft);
  white-space: nowrap;
  flex-shrink: 0;
  }

.ts-popup .ts-chooser-tag-best {
  background: var(--ts-best-soft);
  color: var(--ts-best-text);
  border-color: rgba(245, 158, 11, .32);
  }

.ts-popup .ts-chooser-tag-best i {
  color: var(--ts-best);
  margin-right: 2px;
  }

.ts-popup .ts-chooser-info {
  flex: 1;
  min-width: 0;
  }

.ts-popup .ts-chooser-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  }

.ts-popup .ts-chooser-profiles {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ts-muted);
  font-weight: 500;
  }

.ts-popup .ts-chooser-profiles img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  object-fit: cover;
  margin-left: -5px;
  box-shadow: 0 0 0 1px var(--ts-border-soft);
  }

.ts-popup .ts-chooser-profiles img:first-of-type {
  margin-left: 0;
  }

.ts-popup .ts-chooser-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  }

.ts-popup .ts-chooser-actions .ts-icon-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--ts-muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: 100ms;
  }

.ts-popup .ts-chooser-actions .ts-icon-btn:hover {
  background: var(--ts-surface);
  color: var(--ts-text);
  }

.ts-popup .ts-chooser-actions .ts-icon-btn-danger:hover {
  background: var(--ts-danger-soft);
  color: var(--ts-danger);
  }

.ts-popup .ts-btn-secondary.ts-btn-danger-text {
  color: var(--ts-danger);
  }

.ts-popup .ts-btn-secondary.ts-btn-danger-text:hover {
  background: var(--ts-danger-soft);
  border-color: var(--ts-danger);
  color: var(--ts-danger);
  }

.ts-popup .ts-modal-body-flush {
  padding: 0;
  }

.ts-popup .ts-pickr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ts-border-soft);
  flex-shrink: 0;
  }

.ts-popup .ts-pickr-search i {
  color: var(--ts-faint);
  font-size: 14px;
  }

.ts-popup .ts-pickr-search input {
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--ts-text);
  flex: 1;
  font-family: inherit;
  }

.ts-popup .ts-pickr-filters {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ts-border-soft);
  flex-shrink: 0;
  }

.ts-popup .ts-pickr-filters::-webkit-scrollbar {
  display: none;
  }

.ts-popup .ts-pickr-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--ts-border);
  background: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ts-muted);
  cursor: pointer;
  transition: 120ms;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  line-height: 1.2;
  }

.ts-popup .ts-pickr-filter:hover {
  border-color: #D7DEE9;
  color: var(--ts-text);
  }

.ts-popup .ts-pickr-filter.active {
  background: var(--ts-primary-soft);
  border-color: rgba(13, 110, 253, .28);
  color: var(--ts-primary);
  }

.ts-popup .ts-pickr-filter img {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  object-fit: cover;
  }

.ts-popup .ts-pickr-list {
  overflow-y: auto;
  padding: 4px;
  max-height: 340px;
  }

.ts-popup .ts-pickr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 100ms;
  }

.ts-popup .ts-pickr-row:hover {
  background: var(--ts-surface);
  }

.ts-popup .ts-pickr-row.disabled {
  opacity: .5;
  cursor: not-allowed;
  }

.ts-popup .ts-pickr-row.disabled:hover {
  background: transparent;
  }

.ts-popup .ts-pickr-row .pic-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  }

.ts-popup .ts-pickr-row .pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  }

.ts-popup .ts-pickr-row .platform {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  }

.ts-popup .ts-pickr-row .info {
  flex: 1;
  min-width: 0;
  }

.ts-popup .ts-pickr-row .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.ts-popup .ts-pickr-row .meta {
  font-size: 11px;
  color: var(--ts-muted);
  font-weight: 500;
  }

.ts-popup .ts-pickr-row .check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ts-border);
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: transparent;
  font-size: 11px;
  transition: 120ms;
  }

.ts-popup .ts-pickr-row.checked .check {
  background: var(--ts-primary);
  border-color: var(--ts-primary);
  color: #fff;
  }

.ts-popup .ts-pickr-row.disabled .check {
  background: var(--ts-surface);
  border-color: var(--ts-border);
  color: var(--ts-faint);
  }

.ts-popup .ts-pickr-row.disabled.checked .check {
  background: var(--ts-faint);
  border-color: var(--ts-faint);
  color: #fff;
  }

.ts-popup .ts-pickr-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ts-muted);
  }

.ts-popup .ts-time-customform[hidden] {
  display: none !important;
  }

.ts-popup .ts-time-customform .ts-bigtime {
  background: #fff;
  padding: 5px;
  border-radius: 8px;
  }

.ts-popup .ts-time-customform .ts-bigtime select {
  font-size: 14px;
  padding: 4px 6px;
  font-weight: 600;
  }

.ts-popup .ts-time-customform .ts-bigtime-meridiem {
  padding: 4px 8px;
  margin-left: 2px;
  }

.ts-popup .ts-time-customform .ts-bigtime-meridiem select {
  font-size: 11px;
  padding: 0;
  font-weight: 700;
  }

.ts-popup .ts-time-customform-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  }

.ts-popup .ts-time-preset-custom .ts-time-preset-x {
  margin-right: -4px;
  }

@media (hover: none) {
  .clw-slots.ts-oc .ts-weekcol-menu .ts-icon-btn {
    opacity: 1;
      }

  }

.clw-slots.ts-oc .ts-cell:focus-visible,
.clw-slots.ts-oc .ts-cell-add:focus-visible,
.clw-slots.ts-oc .ts-monthcell:focus-visible,
.clw-slots.ts-oc .ts-tab:focus-visible,
.clw-slots.ts-oc .ts-icon-btn:focus-visible,
.clw-slots.ts-oc .ts-add-btn:focus-visible,
.clw-slots.ts-oc .ts-filter-btn:focus-visible,
.clw-slots.ts-oc .ts-collapse-btn:focus-visible,
.clw-slots.ts-oc .ts-headlink:focus-visible,
.ts-popup .ts-modal-close:focus-visible,
.ts-popup .ts-btn-primary:focus-visible,
.ts-popup .ts-btn-secondary:focus-visible,
.ts-segpill button:focus-visible,
.ts-popup .ts-daygrid button:focus-visible,
.ts-popup .ts-modal-profile:focus-visible,
.ts-popup .ts-profile:focus-visible,
.ts-popup .ts-dayslot-row .ts-icon-btn:focus-visible,
.ts-popup .ts-customfreq-row .ts-icon-btn:focus-visible {
  outline: 2px solid var(--ts-primary, #0d6efd);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .18);
  }

.clw-slots.ts-oc .ts-eyebrow,
.ts-popup .ts-modal-content .ts-eyebrow,
.ts-popup .ts-preview-label {
  color: #5B6B82;
  }

@media (prefers-reduced-motion: reduce) {
  .clw-slots.ts-oc .ts-cell,
  .clw-slots.ts-oc .ts-cell-add,
  .clw-slots.ts-oc .ts-tab,
  .clw-slots.ts-oc .ts-add-btn,
  .clw-slots.ts-oc .ts-filter-btn,
  .clw-slots.ts-oc .ts-collapse-btn,
  .clw-slots.ts-oc .ts-monthcell,
  .clw-slots.ts-oc .ts-icon-btn,
  .clw-slots.ts-oc .ts-weekcol-menu .ts-icon-btn,
  .ts-popup .ts-btn-primary,
  .ts-popup .ts-btn-secondary,
  .ts-popup .ts-modal-close,
  .ts-segpill button,
  .ts-popup .ts-daygrid button,
  .ts-popup .ts-bestcard,
  .ts-popup .ts-bestcard-switch,
  .ts-popup .ts-bestcard-switch::after,
  .ts-popup .ts-profile,
  .ts-popup .ts-modal-profile,
  .ts-popup .ts-capacity-bar-fill,
  .ts-popup .ts-search,
  .ts-popup .ts-dayslot-row {
    transition: none !important;
      }

  .ts-popup .ts-btn-primary:hover {
    transform: none !important;
      }

  }

.clw-rail-group-body.clw-collapsed {
  display: none;
  }

/* ---------------Clear posting history flow--------------- */

.ch-toast-stack {
  z-index: 1090;
  }

.ch-date-wrap .form-control {
  padding-right: 36px;
  cursor: pointer;
  }

.ch-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  }

.clear-history-modal .select-accounts .social-account-list {
  transition: border-color .12s ease, background-color .12s ease;
  }

.clear-history-modal .select-accounts .social-account-list:hover {
  border-color: #c5d3e8;
  }

.clear-history-modal #ClearHistorySelectAll {
  color: #0d6efd;
  }

.clear-history-modal #ClearHistorySelectAll:hover {
  text-decoration: underline;
  }

.ch-summary {
  background: #F6F9FB;
  }

.ch-summary-chip {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  color: #101010;
  }

#ClearHistoryConfirmInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 1px;
  }

.clear-history-progress {
  border-left: 3px solid #f59e0b;
  }

.clear-history-progress .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
  }

/* ----- Move Post / Reorder popup (.prp-*) ----- */
.prp-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  width: fit-content;
  transition: border-color .15s ease, box-shadow .15s ease;
  }

.prp-stepper:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
  }

.prp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: #F6F9FB;
  border: 0;
  color: #101010;
  cursor: pointer;
  transition: background .15s ease;
  }

.prp-step:hover {
  background: #e9ecef;
  }

.prp-step i {
  font-size: 16px;
  }

.prp-stepper-field {
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 2px;
  min-width: 110px;
  }

.prp-hash {
  color: #6c757d;
  font-weight: 500;
  }

.prp-input {
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #101010;
  width: 100%;
  padding: 9px 0;
  -moz-appearance: textfield;
  }

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

/* ----- Pointers tab (.clw-pt-*) ----- */
.clw-pt-hint {
  font-size: 12px;
  color: #6c757d;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  }

.clw-pt-hint i {
  font-size: 14px;
  color: #94a3b8;
  }

.clw-pt-hint strong {
  color: #101010;
  font-weight: 600;
  }

.clw-pt-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: border-color .15s ease;
  }

.clw-pt-card:hover {
  border-color: #d3dbe5;
  }
.clw-pt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  }

.clw-pt-l1 {
  display: flex;
  align-items: center;
  gap: 10px;
  }

.clw-pt-acct {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  }

.clw-pt-pos {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 10px;
  background: #F6F9FB;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  transition: border-color .15s ease, background .15s ease;
  }

.clw-pt-pos:hover {
  border-color: #0d6efd;
  background: #f5f9ff;
  }

.clw-pt-pos-hash {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  }

.clw-pt-pos-num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  width: 30px;
  }

.clw-pt-pos-edit {
  font-size: 13px;
  color: #6c757d;
  margin-left: 4px;
  transition: color .15s ease;
  }

.clw-pt-pos:hover .clw-pt-pos-edit {
  color: #0d6efd;
  }

.clw-pt-l2 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  }

.clw-pt-thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  }

.clw-pt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  }

.clw-pt-snip {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  }

/* Recurring post composer - post options card */
.post-options .accordion-button:not(.collapsed) {
  color: inherit;
  background-color: #fff;
  }
.post-options .accordion-button::after {
  margin-left: auto;
  }
.post-opt-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  }
.post-opt-icon-blue {
  background: #E6F2FF;
  color: #0d6efd;
  }
.post-opt-icon-purple {
  background: #EDE9FE;
  color: #6D28D9;
  }
.post-opt-icon-amber {
  background: #FEF3C7;
  color: #B45309;
  }
.post-opt-icon-green {
  background: #D1FAE5;
  color: #047857;
  }
.post-opt-icon-teal {
  background: #CCFBF1;
  color: #0F766E;
  }
.post-opt-icon-rose {
  background: #FFE4E6;
  color: #BE123C;
  }

/* Bulk actions modal - one action section open at a time.
Each header is a plain row; the caret flips to show open state. */
.bulk-act-head {
  background: #fff;
  cursor: pointer;
  }

.bulk-act-head:hover,
.bulk-act-head:not(.collapsed) {
  background: #FBFCFD;
  }

.bulk-act-head:focus-visible {
  box-shadow: none;
  }

.bulk-act-caret {
  transition: transform 0.15s ease-in-out;
  }

.bulk-act-head.collapsed .bulk-act-caret {
  transform: rotate(-90deg);
  }

/* Bulk CSV import - column mapping cards */
.csv-map-list {
  flex: 1 1 auto;
  min-height: 0;
  }

.csv-row-num {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  }

/* Bulk upload - source picker cards (Write posts / Upload media / Import a CSV) */
.bulk-src-card {
  background: #fff;
  color: inherit;
  }

.bulk-src-card:hover {
  border-color: #9CA3AF !important;
  }

.bulk-src-nav .nav-link.bulk-src-card.active {
  background: rgba(13, 110, 253, 0.04);
  border-color: #0d6efd !important;
  box-shadow: inset 0 0 0 1px #0d6efd;
  }

.bulk-src-check {
  opacity: 0;
  font-size: 18px;
  }

.bulk-src-nav .nav-link.bulk-src-card.active .bulk-src-check {
  opacity: 1;
  }

/* Bulk actions - platform picker chips */
.chip-check {
  display: none;
  }

.btn-check:checked + .btn .chip-check {
  display: inline-flex;
  }

.btn-check:checked + .btn.btn-secondary {
  border-color: #0d6efd !important;
  color: #0d6efd !important;
  }

/* Add Media - Load More */
.am-load-more-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 8px 6px;
}

.am-load-more-wrap::before,
.am-load-more-wrap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8ecf0;
  max-width: 140px;
}

.am-load-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}

.am-load-more i {
  font-size: 1rem;
  line-height: 1;
  transition: transform .35s ease;
}

.am-load-more:hover {
  border-color: #0D6EFD;
  color: #0D6EFD;
  background: #EBF2FF;
  box-shadow: 0 1px 4px rgba(13,110,253,0.08);
}

.am-load-more:hover i {
  transform: rotate(180deg);
}

/* =========================================================
   Import to library - customize wizard (move_feeds_into_library_drawer)
   Reuses .automation-stepper / .stepper-* / .automation-tile / .post-type / .more-opt
   Post type cards reuse the global .post-type styling (same as one-off post).
   ========================================================= */

.rpimp-step {
  animation: stepFadeIn 0.25s ease;
}

/* content step cards */
.rpimp-opt-card {
  border-radius: 12px;
}

.rpimp-plat-icon {
  width: 22px;
  height: 22px;
}

/* bags of tags */
.rpimp-bag-list {
  max-height: 160px;
  border-radius: 10px;
}

.rpimp-bag-add {
  width: 30px;
  height: 30px;
}

.rpimp-bag-row.added .rpimp-bag-add {
  background: #0d6efd!important;
  color: #fff!important;
}

/* network chips */
.rpimp-net-chip {
  border-radius: 30px;
  transition: 0.15s;
}

.rpimp-net-chip:hover {
  border-color: #b6d4fe!important;
}

.rpimp-net-chip.selected {
  border-color: #0d6efd!important;
  background: #eef4ff!important;
  color: #173a78!important;
}

.rpimp-net-chip .rpimp-plat-icon {
  width: 20px;
  height: 20px;
}

.rpimp-net-chip .ri-checkbox-circle-fill {
  display: none;
}

.rpimp-net-chip.selected .ri-checkbox-circle-fill {
  display: inline;
  color: #0d6efd;
}

/* network option panels - matches mockup .more-opt container */
.rpimp-net-panel {
  border-radius: 12px;
}

/* keep the accordion header white with dark text (override Bootstrap active blue) */
.rp-import-wizard .more-opt .accordion-button {
  box-shadow: none;
}

.rpimp-opt-row:last-child,
.rpimp-review-row:last-child {
  border-bottom: 0!important;
}

.rpimp-r-ico {
  width: 34px;
  height: 34px;
}

/* ================= Plug-ins & Integrations css =================*/

.hover-card {
  color: #101010;
  transition: border-color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.16s ease-out;
  }

.hover-card:hover {
  color: #101010;
  border-color: #0d6efd !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 16, 16, 0.06);
  }

.icon-tile {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 20px;
  }

.icon-tile-sm {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-size: 16px;
  }

/* Accent tints - foreground colours are contrast-checked against their tint */

.icon-tile-blue {
  background: #dbe6f9;
  color: #0d6efd;
  }

.icon-tile-violet {
  background: #ede9fe;
  color: #6c5ce7;
  }

.icon-tile-emerald {
  background: #e7f7ee;
  color: #16a34a;
  }

.icon-tile-amber {
  background: #fef3c7;
  color: #b45309;
  }

.icon-tile-cyan {
  background: #cffafe;
  color: #0e7490;
  }

.icon-tile-rose {
  background: #ffe4e9;
  color: #e11d48;
  }

.icon-tile-teal {
  background: #d3f4f0;
  color: #0d9488;
  }

/* A library picks its own colour, so its tile cannot use one of the fixed
   accents above - it tints itself from the --clw-lib-c the row carries. */

.icon-tile-lib {
  color: var(--clw-lib-c);
  background: color-mix(in srgb, var(--clw-lib-c) 15%, #fff);
  }

/* ================= Selectable tile ================= */

.select-card {
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
  }

.select-card:hover {
  border-color: #0d6efd !important;
  }

.select-card:has(.form-check-input:checked) {
  background: #f5f9ff !important;
  }

.select-card:focus-within {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  }

.rp-table .rp-col-shrink {
  width: 1%;
  white-space: nowrap;
  }

.search-inline {
  width: 260px;
  max-width: 100%;
  }

/* URL shortener */

.us-add-card {
  background: #fff;
  border: 1px dashed #c9d2df;
  border-radius: 8px;
  }

.us-add-card:hover {
  color: #0d6efd !important;
  background: #fff;
  border-color: #0d6efd;
  }

.rp-scroll-fill {
  min-height: 100%;
  }

.us-connect-card {
  max-width: 880px;
  }

.us-empty-ico {
  width: 48px;
  height: 48px;
  background: #E6F2FF;
  }

.icon-tile-xs {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 14px;
  }

.dash-modal-w-400 {
  max-width: 400px;
  }
 
.dash-delete-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff1f2;
  display: flex;
  align-items: center;
  justify-content: center;
  }

.dash-delete-icon i {
  font-size: 26px;
  color: #ef4444;
  }

/* The same disc in the brand tint, for a dialog that is not destructive */

.dash-confirm-icon-primary {
  background: #e8f0fe;
  }

.dash-confirm-icon-primary i {
  color: #0d6efd;
  }

.dash-confirm-modal .modal-content {
  animation: deleteModalIn .22s cubic-bezier(.34, 1.56, .64, 1) both;
  }

@keyframes deleteModalIn {
  from { transform: scale(.94); opacity: 0; }
  to { transform: none; opacity: 1; }
  }

@media (prefers-reduced-motion: reduce) {
  .dash-confirm-modal .modal-content {
    animation: none;
      }

  body .offcanvas.offcanvas-end.create-new-post.share-a-post {
    transition: none;
      }
  }

/* Shared Calendar Modal */
.sc-cal-modal .sc-block {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  }
/* Section header inside each card */
.sc-cal-modal .sc-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: #fafbfc;
  border-bottom: 1px solid #f0f1f3;
  border-radius: 11px 11px 0 0;
  }
.sc-cal-modal .sc-step-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  }
.sc-cal-modal .sc-icon-blue   { background: #EFF4FF; color: var(--bs-primary); }
.sc-cal-modal .sc-icon-green  { background: #ecfdf5; color: #10b981; }
.sc-cal-modal .sc-icon-purple { background: #f5f3ff; color: #7c3aed; }
.sc-cal-modal .sc-icon-amber  { background: #fffbeb; color: #d97706; }
.sc-cal-modal .sc-step-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  }
.sc-cal-modal .sc-step-subdesc {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
  }
.sc-cal-modal .sc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  }
.sc-cal-modal .sc-row:last-child { border-bottom: none; }
.sc-cal-modal .sc-row-label {
  font-weight: 600;
  font-size: 13.5px;
  color: #1a1a1a;
  line-height: 1.3;
  }
.sc-cal-modal .sc-row-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.5;
  }
.sc-cal-modal .sc-row .form-check.form-switch {
  padding-left: 2.5em;
  margin: 0;
  flex-shrink: 0;
  padding-top: 2px;
  }
.sc-cal-modal .sc-nested {
  border-left: 2px solid #e9ecef;
  margin-left: 4px;
  padding-left: 14px;
  margin-top: 12px;
  transition: opacity 0.2s ease;
  }
.sc-cal-modal .sc-nested.sc-disabled { opacity: 0.4; pointer-events: none; }
.sc-cal-modal .sc-pin-reveal { margin-top: 12px; display: none; }
.sc-cal-modal .sc-pin-reveal.show { display: block; }
/* big brand-logo preview inside the white-labeling row */
.sc-cal-modal .sc-logo-preview {
  max-height: 40px;
  max-width: 70%;
  object-fit: contain;
  }
.sc-cal-modal .modal-subtitle { font-size: 12.5px; color: #9ca3af; margin-top: 2px; }
/* Share report dialog (common/report-send.js on the reports pages, and the workspace page's
   Share report): the Share library head over one short column */
.rs-modal .modal-dialog { max-width: 620px; }
.rs-modal .sc-logo-preview { max-height: 26px; }
.rs-modal .rs-dates { grid-template-columns: repeat(11, 1fr); }
/* Shareable link - result area at bottom */
.sc-cal-modal .sc-result-area {
  background: #f4f6ff;
  border: 1px solid #dde1f8;
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
  }
.sc-cal-modal .sc-result-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  }
.sc-cal-modal .sc-link-box {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  }
.sc-cal-modal .sc-link-url {
  font-size: 12.5px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  }


/* HASHTAG PAIRS */

.hs-tagbox.is-focus {
  border-color: #0d6efd;
  }

.hs-tag-input {
  flex: 1 1 90px;
  min-width: 90px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 0;
  }

.hs-chip-x {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin-left: 2px;
  line-height: 1;
  font-size: 15px;
  opacity: 0.6;
  }

.hs-chip-x:hover {
  opacity: 1;
  }

/* The confirm-dialog disc in the hashtag tint */

.dash-confirm-icon-violet {
  background: #ede9fe;
  }

.dash-confirm-icon-violet i {
  color: #6c5ce7;
  }

.dash-confirm-icon-amber {
  background: #fef3c7;
  }

.dash-confirm-icon-amber i {
  color: #b45309;
  }

/* The overflow chip on a hashtag pair. It opens a .custom-dropdown. */

.hs-chip-more {
  border: 0;
  }

.rp-rail-chev {
  transition: transform 0.2s ease-out;
  }

/* ============================================================
   IMPORT POSTS FROM SOCIAL MEDIA
   A picking screen, so rows are sized for scanning many at once.
   Only what Bootstrap 5.2 has no utility for lives here.
   ============================================================ */

/* One post. Thumbnail, caption and meta reuse .clw-thumb / .clw-caption,
   so a post reads the same here as it does once it is in a library. */

.ifs-row {
  cursor: pointer;
  border-bottom: 1px solid var(--clw-border, #E5E9EF);
  transition: background-color 0.16s ease-out;
  }

.ifs-row:hover {
  background: var(--clw-bg, #F6F9FB);
  }

.ifs-row:has(.form-check-input:checked) {
  background: #f5f9ff;
  }

.ifs-row:focus-within {
  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25);
  }

.ifs-row-last {
  border-bottom: 0;
  }

.ifs-feed-menu {
  min-width: 260px;
  }

.import-from-social-ctn.ifs-bulk-open .ifs-feed-scroll {
  padding-bottom: 72px;
  }

/* ---- Collapsed rail ---- */

.clw-rail-mini {
  width: 68px !important;
  flex: 0 0 68px !important;
  }

.clw-rail-mini .clw-rail-title,
.clw-rail-mini .clw-rail-totalcount,
.clw-rail-mini .clw-search,
.clw-rail-mini .clw-rail-empty-hero,
.clw-rail-mini .clw-rail-group-head,
.clw-rail-mini .clw-rail-body > p,
.clw-rail-mini .clw-lib-name,
.clw-rail-mini .clw-lib-count,
.clw-rail-mini .clw-lib-state {
  display: none !important;
  }

.clw-rail-mini .clw-rail-head,
.clw-rail-mini .clw-rail-body,
.clw-rail-mini .clw-rail-foot {
  padding-left: 8px !important;
  padding-right: 8px !important;
  }

/* The search box below the title row is gone, so its gap goes with it. */

.clw-rail-mini .clw-rail-head .d-flex {
  margin-bottom: 0 !important;
  }

.clw-rail-mini .clw-rail-head .clw-icon-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  }

/* A tinted square around the tile, rather than a full-width bar with
   nothing in the rest of it. */

.clw-rail-mini .clw-lib {
  margin: 0 auto;
  justify-content: center;
  }

/* The footer action keeps its glyph and drops its wording. The label is a
   bare text node, so it goes by zeroing the type rather than by selector. */

.clw-rail-mini .clw-rail-foot .btn {
  font-size: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  }

.clw-rail-mini .clw-rail-foot .btn > i {
  font-size: 16px !important;
  }

/* The account settings rail carries a plan summary rather than a single
   action. There is no 68px version of a price and a storage bar, so the
   whole block folds away with the names and comes back with them. */

.clw-rail-mini .clw-rail-foot.CurrentPlan {
  display: none !important;
  }

/* ---- Import to library wizard ----
   A tall four-step modal. Title, stepper and Back / Next stay put while
   only the step itself scrolls. */

.ifs-wizard .modal-dialog {
  height: calc(100% - 3.5rem);
  max-width: 1100px;
  }

.ifs-wizard .modal-content {
  max-height: 100%;
  }

.ifs-wizard .modal-body {
  overflow-y: auto;
  }

/* A picked card reads as chosen by its border as well as its tint, since
   several of these hide the control itself and the card is the control. */

.ifs-wizard .select-card:has(.form-check-input:checked) {
  border-color: #0d6efd !important;
  }

/* Network chooser. A pill is a toggle, so it carries its brand mark and
   gains a tick once it is on. */

.ifs-netpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--clw-border, #E5E9EF);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--clw-text, #101010);
  cursor: pointer;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
  }

.ifs-netpill:hover {
  border-color: #0d6efd;
  }

.ifs-netpill:has(input:checked) {
  border-color: #0d6efd;
  background: #f5f9ff;
  color: #0d6efd;
  }

.ifs-netpill:focus-within {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  }

.ifs-netpill-tick {
  display: none;
  color: #0d6efd;
  }

.ifs-netpill:has(input:checked) .ifs-netpill-tick {
  display: inline;
  }

/* A collapsed network panel flips its chevron the way the rest of the
   prototype's collapse headers do. */

.ifs-wizard [data-bs-toggle="collapse"].collapsed .ri-arrow-up-s-line::before {
  content: "\ea4e";
  }

/* The confirm-dialog disc in the import tint, so an empty state
   matches the icon tile this feature carries in the rail. */

.dash-confirm-icon-cyan {
  background: #cffafe;
  }

.dash-confirm-icon-cyan i {
  color: #0e7490;
  }

.dash-confirm-icon-teal {
  background: #d3f4f0;
  }

.dash-confirm-icon-teal i {
  color: #0d9488;
  }

/* ============================================================
   TESTIMONIAL TEMPLATES
   A template is only background art, so a tile shows that art on its own
   and leaves the card clear for the review the user drops on it.
   ============================================================ */

.tt-tile {
  transition: border-color .12s;
  }

.tt-tile:hover {
  border-color: #0d6efd;
  }

.tt-canvas {
  aspect-ratio: 1 / 1;
  background: #f0f2f6;
  overflow: hidden;
  container-type: inline-size;
  }

.tt-photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  }

/* Delete rides on the artwork rather than in a caption bar, so the tile stays
   the design and nothing else. It has to clear the stretched link that carries
   the whole tile into the editor. */

/* Delete rides on the artwork, so it has to clear the stretched link that
   carries the rest of the tile into the editor. Without this the link covers
   the button and the click opens the editor instead. */

.tt-tile .btn-remove {
  top: 8px;
  right: 8px;
  height: 28px;
  width: 28px;
  z-index: 2;
  }

/* The add tile stands in a template's place in the grid, so it takes a
   template's square rather than collapsing to its own content. */

.tt-add {
  aspect-ratio: 1 / 1;
  text-decoration: none;
  }

.tt-add:hover .dash-delete-icon {
  background: #0d6efd;
  }

.tt-add:hover .dash-delete-icon i {
  color: #ffffff;
  }

/* The empty-state artwork is a square illustration, so it is held back from
   the width the no-ctn-box allows its copy. */

.tt-empty-art {
  width: 140px;
  }

/* ================= X (Twitter) Wallet tab ================= */
.progress-sm {
  height: 8px;
}

.rp-tw-pack.rp-tw-pack-featured {
  border: 1px solid #0d6efd !important;
}

/* Modern pagination */
.rp-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rp-pagination .page-link:hover {
  background-color: #F6F9FB;
  color: #0d6efd;
}

.rp-pagination .page-link:focus {
  box-shadow: 0 0 0 1px rgba(13,110,253,0.15);
  z-index: 1;
}

.rp-pagination .page-item.active .page-link {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 600;
}

.rp-pagination .page-item.disabled .page-link {
  color: #C8CED6;
  background-color: transparent;
}

/* Select workspace - the post-login chooser. The panel centres itself in
   whatever room the logo header leaves, and falls back to normal flow once
   the workspace list is taller than the viewport. */

.select-workspace {
  background: #F6F9FB;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }

.select-workspace > header {
  background: #fff;
  border-bottom: 1px solid #E5E9EF;
  }

.select-workspace-stage {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  }

.select-workspace-panel {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 20px 48px;
  }

/* Carousel post preview - a library carousel mixes portrait and landscape
   frames, so cap the height and letterbox each one rather than let a tall
   image push the dialog past the viewport. */

.clw-cp-frame {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  }

  .clw-unread-dot {
    top: 2px;
    right: -2px;
    border: 1px solid #fff !important;
}

/* Settings content reads as content, not as a banner. Capping the measure keeps
   a first name field the size of a first name however wide the window gets. */

.rp-settings-ctn {
  max-width: 900px;
  }

.rp-settings-ctn .input-group .form-control {
  max-width: none;
  }

/* Multi-select chip. Bootstrap's outline buttons fill solid when checked,
   which reads as a pressed button rather than a picked option, so a chip
   stays soft and only takes the brand tint once it is on. */

.rp-chip {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--clw-bg);
  border-color: var(--clw-border);
  color: var(--clw-muted);
  font-size: 14px;
  font-weight: 500;
  }

.rp-chip:hover {
  background: #EEF2F7;
  border-color: var(--clw-border) !important;
  color: var(--clw-text);
  }

.btn-check:checked + .rp-chip {
  background: #E6F2FF;
  border-color: rgba(13, 110, 253, 0.35);
  color: var(--clw-primary);
  }

/* The logo drop zone: the file input covers the whole tile so a click
   anywhere on it opens the picker, and the preview keeps a lockup-sized
   cap rather than filling the tile. */

/* A logo is 240x35, so its drop zone is the size of a logo rather than a
   panel, and the preview slot beside it stands in for one until there is
   something to show. */

/* The plan summary in the header carries a storage bar as well as the
   numbers. A progress fill cannot come from a Bootstrap width utility, so
   the two demo values get a class each rather than an inline style. */

.rp-plan-progress {
  width: 150px;
  }

.rp-storage-paid {
  width: 11%;
  }

.rp-storage-free {
  width: 40%;
  }

.rp-logo-drop {
  width: 240px;
  flex: 0 0 auto;
  }

.rp-brand-slot {
  width: 150px;
  height: 38px;
  border: 1px dashed var(--clw-border);
  }

.rp-upload-hit {
  z-index: 2;
  }

.rp-logo-preview {
  max-height: 80px;
  }

/* The composer profile column's small search: the global .form-control min-height would keep
   it at 40px, so input-group-sm lets it match the btn-sm group picker above (35px) */
.select-accounts .input-group-sm > .form-control {
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  }

/* Composer "Full name" switch: a compact switch and a plain label sized to the Select all link */
#full_name_toggle_container .form-check-input {
  width: 24px;
  height: 14px;
  flex: 0 0 24px;
  cursor: pointer;
  }

#full_name_toggle_container .form-check-label {
  font-size: 14px;
  font-weight: 400;
  }

/* The one-off composer's profile rows sit 12px apart; the list's own top padding leaves room
   for the selected check that sits 5px above a row */
.share-a-post .select-accounts .account-list .social-account {
  margin-top: 0;
  margin-bottom: 12px;
  }

/* With Full name on, composer profile names wrap to a second line before truncating */
.select-accounts.show-full-name .profile-name p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
  }

/* One-off composer (#Share-a-Post in dashboard.html) in three panels: Where to post, the compose
   panel with its actions at the bottom, and How it looks. The three headers share one height so
   their titles line up; on desktop the panels float apart on the dimmed page */
.share-a-post .dash-post-flex {
  flex: 1 1 auto;
  min-height: 0;
  }

.cmp-panel-head {
  height: 64px;
  flex-shrink: 0;
  }

/* .select-accounts sets flex: 0 0 260px, so the width goes through flex too */
.cmp-where {
  width: 280px;
  flex: 0 0 280px;
  }

.share-a-post .cmp-where .btn-close-share-post {
  display: none;
  }

.cmp-compose {
  flex: 1 1 auto;
  min-width: 0;
  }

.cmp-preview {
  background: #f6f9fc;
  transition: flex-basis .2s ease;
  }

/* Chrome Extension: How it looks panel has a white card background with border to match Where to post and Compose */
.chrome-plugin .share-a-post .cmp-preview {
  background: #ffffff !important;
  border: 1px solid #dee2e6;
  }

.chrome-plugin .share-a-post .cmp-preview .cmp-panel-head,
.chrome-plugin .share-a-post .cmp-preview [data-cmp-preview-bar],
.chrome-plugin .share-a-post .cmp-pv-head {
  background: #ffffff;
  }

/* Big preview: the How it looks panel widens and the post cards take its full width (desktop size) */
.share-a-post.cmp-preview-big .cmp-preview {
  flex-basis: 560px;
  }

.share-a-post [data-cmp-preview-close] {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #6c757d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.share-a-post [data-cmp-preview-close]:hover {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #c1c9d0;
}

.share-a-post [data-cmp-preview-close] i {
  font-size: 16px;
  line-height: 1;
}

/* Each preview's head (network name, post type switch) pins to the top of How it looks while its
   preview scrolls under it, and hands over to the next network's head when that one arrives */
.cmp-pv-head {
  position: sticky;
  top: -2px;
  z-index: 2;
  background: #f6f9fc;
  }

/* All in the preview network picker: the picked networks' logos overlap in a small stack */
.cmp-net-stack > * {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
  }

.cmp-net-stack > * + * {
  margin-left: -4px;
  }

.cmp-scroll {
  flex: 1 1 auto;
  min-height: 0;
  }

/* Expanded: the panels take nearly the whole screen, leaving a thin dimmed edge. Expand and
   Collapse glide the left edge instead of jumping; the slide-in keeps Bootstrap's transform timing */
.offcanvas.offcanvas-end.create-new-post.share-a-post {
  transition: transform .3s ease-in-out, padding-left .35s cubic-bezier(.2, 0, 0, 1);
  }

.offcanvas.offcanvas-end.create-new-post.share-a-post.cmp-wide {
  padding-left: 12px;
  }

/* Selectable card: onboarding's profile and source pickers, and the plan rows in Change plan.
   A card that wraps a hidden radio shows the focus ring while the radio has keyboard focus */
.obf-card {
  background: #fff;
  border: 1.5px solid #c9d6e6;
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.05);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s, background 0.15s, opacity 0.2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
  }

.obf-card:hover {
  border-color: #BFD3FE;
  box-shadow: 0 4px 14px rgba(15,23,42,.07);
  transform: translateY(-1px);
  }

.obf-card:focus-visible,
.obf-card:has(input:focus-visible) {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.18);
  }

.obf-card.is-selected {
  border-color: #0d6efd;
  background: #F7FAFF;
  box-shadow: 0 0 0 1px #0d6efd inset, 0 4px 14px rgba(13,110,253,.10);
  }

@media (prefers-reduced-motion: reduce) {
  .obf-card {
    transition: none;
    }
  }

/* Selected check badge, faint until its card is picked */
.obf-card-check {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #0d6efd;
  font-size: 16px;
  opacity: .08;
  }

.obf-card.is-selected .obf-card-check {
  opacity: 1;
  }

/* Change plan compare table: the Agency column takes a light blue tint, softer than Bootstrap's table-primary */
#cpCompare .table-primary {
  --bs-table-bg: #EAF2FF;
  --bs-table-border-color: var(--bs-border-color);
  }

/* Post type choices at the top of the Facebook and Instagram editors: one, two or all three can be on.
   js/common.js disables the last one so it cannot be turned off, and it keeps its full colour */
.post-type-tabs .form-check-input:disabled {
  opacity: 1;
  }

/* ---------- Network preview ----------
   How it looks in every composer in the panel shell (.share-a-post). Each network shows
   the post the way it really appears: at the big size as the site shows it in its feed or
   viewer (pw-*), at the small size in a phone with the app's mobile layout (pp-*).
   Markup is built by js/network-preview.js. The --pp-* colours are each network's own, so
   the previews read as the real thing rather than as RecurPost UI. */

:root {
  --pp-ink: #0f1419;
  --pp-muted: #65676b;
  --pp-line: #e4e6eb;
  --pp-ghost: #eef0f3;
  --pp-fb: #0866ff;
  --pp-li-bg: #f4f2ee;
  --pp-x: #1d9bf0;
  --pp-bsky: #1185fe;
  --pp-pin: #e60023;
  --pp-g: #1a73e8;
  --pp-tt-cyan: #25f4ee;
  --pp-tt-red: #fe2c55;
  --pp-ig-ring: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  }

/* A network drawn here hides the older post cards in its preview pane at both sizes */
.share-a-post .pp-pane > :not([data-cmp-head]):not(.pp-wrap) {
  display: none !important;
  }

/* The phone: a 390 x 844 screen drawn at panel width, with the status bar, the app's bars and a scrolling screen */
.pp-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  background: #fff;
  color: var(--pp-ink);
  border: 8px solid #1f2328;
  border-radius: 44px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  }

.pp-phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 5;
  width: 78px;
  height: 22px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
  }

.pp-status {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  height: 38px;
  padding: 10px 22px 0 26px;
  font-size: 12px;
  font-weight: 600;
  }

.pp-status i {
  font-size: 13px;
  }

.pp-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  }

.pp-screen::-webkit-scrollbar {
  display: none;
  }

.pp-ico {
  font-size: 18px;
  line-height: 1;
  }

.pp-ico-sm {
  font-size: 15px;
  line-height: 1;
  }

.pp-sub {
  color: var(--pp-muted);
  font-size: 11px;
  }

.pp-mute {
  color: var(--pp-muted);
  }

.pp-more {
  color: var(--pp-muted);
  font-weight: 600;
  }

.pp-caption {
  white-space: pre-line;
  word-break: break-word;
  }

/* Avatars */
.pp-av {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  }

.pp-av-sm {
  width: 26px;
  height: 26px;
  }

.pp-av-lg {
  width: 42px;
  height: 42px;
  }

.pp-av-sq {
  border-radius: 6px;
  }

/* Media */
.pp-media {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #000;
  }

.pp-r-square {
  aspect-ratio: 1 / 1;
  }

.pp-r-portrait {
  aspect-ratio: 4 / 5;
  }

.pp-r-wide {
  aspect-ratio: 1.91 / 1;
  }

.pp-r-video {
  aspect-ratio: 16 / 9;
  }

.pp-r-photo {
  aspect-ratio: 4 / 3;
  }

.pp-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  }

.pp-chip {
  position: absolute;
  padding: 2px 7px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(0, 0, 0, .6);
  border-radius: 999px;
  }

.pp-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  }

.pp-dots span {
  width: 6px;
  height: 6px;
  background: #c7cbd1;
  border-radius: 50%;
  }

.pp-dots span:first-child {
  background: var(--pp-x);
  }

/* A grid of photos, as X, Bluesky, Facebook and LinkedIn tile several images */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  overflow: hidden;
  }

.pp-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  }

.pp-grid-x {
  aspect-ratio: 16 / 9;
  grid-template-rows: 1fr 1fr;
  }

.pp-grid-top {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  aspect-ratio: 1 / 1;
  }

.pp-grid-top img:first-child {
  grid-column: 1 / -1;
  }

/* The next post in the feed, greyed out, so a short post still sits in a feed */
.pp-ghost {
  display: flex;
  gap: 8px;
  padding: 12px;
  }

.pp-ghost span {
  display: block;
  height: 8px;
  margin-bottom: 7px;
  background: var(--pp-ghost);
  border-radius: 4px;
  }

.pp-ghost .pp-ghost-av {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  }

.pp-ghost .pp-ghost-media {
  height: 120px;
  margin-top: 10px;
  border-radius: 8px;
  }

/* Bottom bar of the app */
.pp-tabbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px 18px;
  border-top: 1px solid var(--pp-line);
  background: #fff;
  }

.pp-tabbar i {
  font-size: 20px;
  line-height: 1;
  }

.pp-tabbar-labels > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--pp-muted);
  }

.pp-tabbar-labels > span.active {
  color: var(--pp-ink);
  }

.pp-fab {
  position: absolute;
  right: 14px;
  bottom: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 22px;
  border-radius: 50%;
  }

/* Tabs under an app's top bar (X, Bluesky, Google) */
.pp-tabs {
  display: flex;
  border-bottom: 1px solid var(--pp-line);
  }

.pp-tabs span {
  position: relative;
  flex: 1 1 0;
  padding: 9px 4px;
  color: var(--pp-muted);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  }

.pp-tabs span.active {
  color: var(--pp-ink);
  }

.pp-tabs span.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 44px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--pp-x);
  border-radius: 999px;
  }

.pp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  }

/* Full-screen formats: Stories, Reels, TikTok and Shorts fill the phone, with the app's controls on top */
.pp-full {
  color: #fff;
  background: #000;
  }

.pp-full .pp-status,
.pp-full .pp-sub {
  color: #fff;
  }

.pp-full-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }

.pp-full-media.pp-fit {
  object-fit: contain;
  }

.pp-full-top,
.pp-full-bottom,
.pp-rail {
  position: absolute;
  z-index: 3;
  }

.pp-full-top {
  top: 38px;
  left: 0;
  right: 0;
  padding: 6px 12px;
  }

.pp-full-bottom {
  left: 0;
  right: 58px;
  bottom: 62px;
  padding: 0 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }

.pp-full::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 45%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
  pointer-events: none;
  }

.pp-rail {
  right: 8px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }

.pp-rail > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  }

.pp-rail i {
  font-size: 24px;
  line-height: 1;
  }

.pp-full .pp-tabbar {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  color: #fff;
  border-top-color: rgba(255, 255, 255, .15);
  background: #000;
  }

.pp-full .pp-tabbar-labels > span {
  color: rgba(255, 255, 255, .7);
  }

.pp-full .pp-tabbar-labels > span.active {
  color: #fff;
  }

.pp-progress {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  }

.pp-progress span {
  flex: 1 1 0;
  height: 2px;
  background: rgba(255, 255, 255, .45);
  border-radius: 2px;
  }

.pp-progress span:first-child {
  background: #fff;
  }

.pp-reply {
  flex: 1 1 auto;
  padding: 7px 12px;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  }

.pp-outline-pill {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 6px;
  }

/* Facebook */
.pp-fb-wordmark {
  color: var(--pp-fb);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  }

.pp-round-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  background: #e4e6eb;
  border-radius: 50%;
  }

.pp-fb-big {
  font-size: 17px;
  line-height: 1.3;
  }

.pp-fb-link {
  background: #f0f2f5;
  }

.pp-fb-tabbar .active {
  color: var(--pp-fb);
  }

/* Instagram */
.pp-ig-wordmark {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 25px;
  line-height: 1;
  }

.pp-ig-ring {
  padding: 2px;
  background: var(--pp-ig-ring);
  border-radius: 50%;
  }

.pp-ig-ring .pp-av {
  display: block;
  border: 2px solid #fff;
  }

.pp-ig-follow {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 6px;
  }

.pp-ig-audio {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 6px;
  }

/* X */
.pp-x-card {
  overflow: hidden;
  border: 1px solid #cfd9de;
  border-radius: 14px;
  }

.pp-x-card-title {
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
  }

.pp-x-actions {
  color: #536471;
  }

.pp-x-fab {
  background: var(--pp-x);
  }

/* LinkedIn */
.pp-li-search {
  flex: 1 1 auto;
  padding: 6px 10px;
  color: #666;
  background: #edf3f8;
  border-radius: 4px;
  }

.pp-li-feed {
  background: var(--pp-li-bg);
  }

.pp-li-link {
  background: #eef3f8;
  }

.pp-li-actions > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #666;
  font-size: 10px;
  font-weight: 600;
  }

.pp-li-doc-bar {
  padding: 8px 10px;
  color: #fff;
  background: rgba(0, 0, 0, .75);
  }

.pp-li-tabbar .active {
  color: var(--pp-ink);
  }

/* Google Business Profile, as the Updates tab in Google Maps */
.pp-g-tabs span.active::after {
  background: var(--pp-g);
  }

.pp-g-tabs span.active {
  color: var(--pp-g);
  }

.pp-g-cta {
  color: var(--pp-g);
  border: 1px solid #dadce0;
  }

.pp-g-code {
  padding: 8px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  border: 1px dashed #9aa0a6;
  border-radius: 6px;
  }

/* Pinterest */
.pp-pin-media {
  border-radius: 0 0 24px 24px;
  }

.pp-pin-back {
  top: 10px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--pp-ink);
  font-size: 18px;
  background: #fff;
  }

.pp-pin-save {
  color: #fff;
  background: var(--pp-pin);
  }

.pp-pin-grey {
  color: var(--pp-ink);
  background: #e9e9e9;
  }

.pp-pin-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 10px;
  }

.pp-pin-masonry span {
  display: block;
  height: 110px;
  background: var(--pp-ghost);
  border-radius: 14px;
  }

.pp-pin-masonry span:nth-child(2) {
  height: 150px;
  }

/* TikTok */
.pp-tt-tabs span {
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
  }

.pp-tt-tabs span.active {
  color: #fff;
  border-bottom: 2px solid #fff;
  padding-bottom: 3px;
  }

.pp-tt-follow {
  position: absolute;
  left: 50%;
  bottom: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  font-size: 12px;
  background: var(--pp-tt-red);
  border-radius: 50%;
  }

.pp-tt-disc {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 6px solid #222;
  border-radius: 50%;
  }

.pp-tt-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  color: #000;
  font-size: 16px;
  background: #fff;
  border-radius: 7px;
  box-shadow: -3px 0 0 var(--pp-tt-cyan), 3px 0 0 var(--pp-tt-red);
  }

.pp-full .pp-tabbar-labels > .pp-tt-plus {
  color: #000;
  }

/* YouTube */
.pp-yt-sub {
  color: #fff;
  background: var(--pp-ink);
  }

.pp-yt-chip {
  color: var(--pp-ink);
  background: #f2f2f2;
  }

.pp-yt-shorts-sub {
  color: var(--pp-ink);
  background: #fff;
  }

/* Threads and Bluesky */
.pp-th-strip {
  display: flex;
  gap: 6px;
  overflow: hidden;
  }

.pp-th-strip img {
  width: 62%;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  }

.pp-th-media {
  overflow: hidden;
  border-radius: 10px;
  }

.pp-th-logo,
.pp-bsky-logo {
  width: 22px;
  height: 22px;
  }

.pp-bsky-card {
  overflow: hidden;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  }

.pp-bsky-media {
  overflow: hidden;
  border-radius: 8px;
  }

.pp-bsky-tabs span.active::after {
  background: var(--pp-bsky);
  }

.pp-bsky-fab {
  background: var(--pp-bsky);
  }

/* First comment under the post: Facebook's grey bubble and LinkedIn's comment box */
.pp-fb-comment {
  padding: 6px 12px;
  background: #F0F2F5;
  border-radius: 16px;
  }

.pp-li-comment {
  padding: 6px 10px;
  background: #F2F2F2;
  border-radius: 0 8px 8px 8px;
  }

/* ---------- Web (big size): the post as the site shows it in its feed or viewer ---------- */
.pw-card {
  overflow: hidden;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  }

/* Full-screen formats on the web: the 9:16 frame, round buttons beside it */
.pw-stage {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-ink);
  }

.pw-stage-media {
  height: 470px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  color: #fff;
  background: #000;
  border-radius: 10px;
  }

.pw-stage-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 45%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
  pointer-events: none;
  }

.pw-stage-media .pp-sub {
  color: #fff;
  }

.pw-ov-top,
.pw-ov-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 10px 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }

.pw-ov-top {
  top: 0;
  }

.pw-ov-bottom {
  bottom: 0;
  }

.pw-act {
  font-size: 10.5px;
  font-weight: 600;
  }

.pw-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  background: #eceef1;
  border-radius: 50%;
  }

.pw-act-av {
  width: 38px;
  height: 38px;
  }

.pw-ig-audio {
  border-color: var(--pp-line);
  }

/* Instagram */
.pw-ig-media {
  overflow: hidden;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  }

/* Pinterest: the Pin and its details side by side */
.pw-pin-card {
  overflow: hidden;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  }

.pw-pin-media {
  flex: 0 0 50%;
  }

.pw-pin-media .pp-r-wide {
  height: 100%;
  aspect-ratio: auto;
  }

.pw-pin-info {
  flex: 1 1 auto;
  min-width: 0;
  }

.pw-pin-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  }

/* Threads */
.pw-th-card {
  border-radius: 18px;
  }

/* ---------------Responsive css start--------------- */

/* Composer width: below 1350px the one-off composer has no room for How it looks beside the compose
   panel. Its own block because no fixed breakpoint above fits (an agreed exception, see the 1300px block) */

@media (max-width: 1349px) {
  /* The panel steps aside; the eye button in the editor (shown here, not only below 1200px) opens it as a sheet */
  .share-a-post .cmp-preview {
    display: none !important;
      }

  .share-a-post .btn-preview[data-cmp-preview-open] {
    display: inline-flex !important;
      }

  .share-a-post [data-cmp-preview-close] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px;
    color: #6c757d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

  .share-a-post [data-cmp-preview-close]:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #c1c9d0 !important;
      }

  .share-a-post [data-cmp-preview-close] i {
    font-size: 16px;
    line-height: 1;
      }

  /* One-off composer: on smaller screens How it looks opens as a centered modal dialog with backdrop */
  .share-a-post.cmp-preview-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #1f1f1f78;
    z-index: 1058;
    pointer-events: auto;
    animation: cmpPreviewFadeIn .18s ease-out;
  }

  @keyframes cmpPreviewFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes cmpPreviewModalIn {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .share-a-post.cmp-preview-open .cmp-preview {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(500px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: min(86vh, 760px) !important;
    max-height: calc(100vh - 40px);
    z-index: 1060;
    background: #f6f9fc;
    border: 1px solid #dee2e6;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: cmpPreviewModalIn .22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .share-a-post.cmp-preview-open.cmp-preview-big .cmp-preview {
    width: min(620px, calc(100vw - 32px));
  }

  .share-a-post.cmp-preview-open .cmp-preview .cmp-panel-head {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  .share-a-post.cmp-preview-open .cmp-preview [data-cmp-preview-bar]:not(.d-none) {
    padding-top: 12px;
    background: #f6f9fc;
    border-bottom: 1px solid #edf2f7;
  }

  @media (max-width: 575px) {
    .share-a-post.cmp-preview-open .cmp-preview {
      width: calc(100vw - 20px) !important;
      max-width: calc(100vw - 20px) !important;
      height: calc(100dvh - 24px) !important;
      max-height: calc(100dvh - 24px) !important;
      border-radius: 12px;
    }

    .share-a-post.cmp-preview-open .cmp-preview .cmp-panel-head {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .share-a-post.cmp-preview-open::before,
    .share-a-post.cmp-preview-open .cmp-preview {
      animation: none !important;
    }
  }
  }

/* Large devices desktops */

@media (max-width: 1300px) {
  .connect-account.Profiles-added {
    padding-right: 400px !important;
      }

  .offcanvas.offcanvas-end.AddYourProfiles.ProfilesAddedSuccessfully {
    max-width: 400px !important;
      }

  .offcanvas.offcanvas-end.AddYourProfiles {
    width: 450px;
      }

  .user-info .post-time {
    display: none;
      }

  .post-ctn .nav-tabs .social_tab.nav-link span {
    top: 16px;
    right: 4px;
      }

  ::-webkit-scrollbar {
    width: 5px;
      }

  .RecurPostReviews {
    position: relative;
    left: 0;
      }

  }

@media (max-width: 1199px) {
  .plan-details-table .popular-tag {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    font-size: 12px;
      }

  .main-menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    transform: translateX(-120%);
    transition: 0.2s;
    z-index: 99;
    box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
    -webkit-box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
      }

  .main-menu.collapse.show {
    width: 260px;
    transform: translateX(0);
      }

  .main-menu.collapse.show .logo-full {
    display: block;
    width: 160px;
    margin: auto;
      }

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

  .post-ctn .nav-tabs {
    gap: 5px !important;
    padding-bottom: 6px !important;
  }

  .library-contentlist.show,
  .library-contentlist + .library-time-slots {
    display: none !important;
      }

  .library-contentlist.show + .library-time-slots {
    display: block !important;
    width: 100% !important;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
      }

  .offcanvas.offcanvas-end.create-new-post.offcanvas-medium {
    width: 90%;
      }

  .editschedule {
    position: relative;
    background: #F6F9FB;
    display: flex;
    padding: 3px 0;
    height: auto !important;
    text-align: center;
    gap: 15px;
      }

  .editschedule .text-white {
    color: #6c757d !important;
      }

  .profiles-list-table .td-profile-name {
    width: 200px;
      }

  .library-schedule-box:hover, .select-accounts .account-list .social-account:hover, .inner-social-account .social-account:hover {
    border-color: #DEE2E6;
      }

  .tooltip {
    display: none !important;
      }

  .rpt-stats-grid.cols-3,
  .rpt-stats-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
      }

  .clw-workspace.clw-rail-open .clw-rail {
    transform: translateX(0);
      }

  .clw-workspace.clw-rail-open::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.30);
    z-index: 90;
      }
 
    }

/* Medium devices tablets */

@media (max-width: 991px) {
  .left-container-box {
    height: 70px !important;
    padding: 0 !important;
    text-align: center;
      }

  .recurpost-login-signup .left-container {
    border-radius: 0;
      }

  .recurpost-login-signup .left-container .logo {
    padding: 14px 0 0;
    width: 100%;
      }

  .select-library-box .col-md-6.position-relative {
    border-left: 0 dashed #00000033;
      }

  .select-library-box {
    padding: 20px 0;
      }

  .library-left-block {
    padding: 0;
    border: 0;
      }

  .library-right-block {
    padding: 20px 0;
      }

  .create-libraries .contentlist-ctn .row {
    overflow-y: auto !important;
      }

  .price {
    font-size: 22px;
      }

  .plan-details-table {
    padding: 20px;
      }

  .plan-price .plan-name + p {
    min-height: 100px;
      }

  .plan-price img {
    width: 30px;
    flex: 0 0 30px;
      }

  .plan-price .plan-name {
    font-size: 20px;
      }

  .plan-details-table p {
    font-size: 13px;
      }

  .plan-price a {
    padding: 10px 5px;
      }

  .post-type label {
    width: 95px;
  }

  .datetime-modal .modal-dialog {
    max-width: 700px;
      }

  .accounts-filter {
    position: absolute;
    background: #fff;
    z-index: 91;
    top: 0;
    box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
    -webkit-box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px -1px 15px -1px rgba(0,0,0,0.3);
    transition-duration: .2s;
    transform: translateX(-120%);
      }

  .accounts-filter.show {
    display: flex !important;
    transform: translateX(0);
      }

  /* Open drawer, not the collapsed desktop rail - the group picker belongs here */
  .select-accounts.accounts-filter.show .select-group:not(.d-none) {
    display: flex !important;
      }

  .shared-calendar .queue-history-ctn {
    padding-left: 15px !important;
      }

  .post-scheduled-details {
    padding-left: 0 !important;
      }

  .post-social-tabs {
    width: 100%;
    border-top: 1px solid #dee2e6;
      }

  .library-post-content .post-main-ctn .tab-content,
  .ManageVariations .library-post-content.OriginalUpdate .post-main-ctn .tab-content {
    padding-right: 0 !important;
      }

  .ManageVariations .library-post-content .post-main-ctn .tab-content {
    padding-right: 4rem !important;
      }

  .post-social-tabs ul {
    justify-content: end;
      }

  .library-post-content .more-options-btn {
    position: absolute;
    top: 5px;
    right: 0;
      }

  .UploadContentBulk .post-social-tabs {
    width: auto;
      }

  .post-social-account {
    padding-left: 1rem;
      }

  .library-post-content .post-social-account {
    padding-left: 0;
      }

  .user-msg-details {
    position: absolute;
    top: 85px;
    width: 100%;
    background: #fff;
    z-index: 2;
    padding-bottom: 10px !important;
    padding-right: 60px !important;
      }

  .insta-post-preview.feed-preview .main-img-100,
  .insta-post-preview.feed-preview .main-img-100 img {
    height: 360px;
      }

  .report-card .col-xl-3.border-start {
    padding-top: 15px;
    border-left: 0 !important;
      }

  .manage-social-accounts .social-account-list .account-opt {
    margin-top: 10px;
    width: 100%;
    justify-content: end;
      }

  .URL-shortener-ctn .d-lg-block.active,
  .manage-workspace-ctn .d-lg-block.active,
  .workspace-edit-ctn .d-lg-block.active {
    display: block !important;
      }

  .workspace-edit-ctn .d-lg-flex.active {
    display: flex !important;
      }

  .include-idea {
    overflow: hidden auto !important;
    padding-right: 15px;
      }

  .include-idea .h-100 {
    height: auto !important;
      }

  .holiday-offer {
    flex-direction: column;
    text-align: center;
      }

  .contentlist .select-accounts.accounts-filter.show .icon-collaps::before,
  .publishing-calendar .select-accounts.accounts-filter.show .icon-collaps::before,
  .rp-reports .select-accounts.accounts-filter.show .icon-collaps::before,
  .inbox .select-accounts.accounts-filter.show .icon-collaps::before,
  .plugin-page .select-accounts.accounts-filter.show .icon-collaps::before,
  .rp-dm-automation .select-accounts.accounts-filter.show .icon-collaps::before,
  .manage-social-accounts .select-accounts.accounts-filter.show .icon-collaps::before {
    content: "\e919";
      }

  .create-new-post .offcanvas-body {
    padding-left: 15px !important;
      }

  .create-new-post.AddRecuringTimeSlots .offcanvas-body {
    overflow-y: auto !important;
    padding-top: 0;
      }

  .create-new-post .select-accounts .account-list,
  .chrome-plugin .share-a-post .select-accounts .account-list,
  .bulk-scheduled-one-off-post .account-list {
    display: flex;
    gap: 10px;
    overflow: auto hidden;
    padding-bottom: 5px !important;
      }

  .bulk-scheduled-one-off-post .select-accounts {
    width: 100%;
    flex: 0 0 100%;
    padding: 0 0 10px;
    height: auto !important;
    margin-bottom: 15px;
      }

  .bulk-scheduled-one-off-post .select-accounts .user-info,
  .rp-sa-stats::-webkit-scrollbar {
    display: none;
      }

  .offcanvas.create-new-post .select-accounts,
  .chrome-plugin .share-a-post .select-accounts,
  .offcanvas.create-new-post .select-library {
    width: 100%;
    flex: 0 0 100%;
    padding: 0;
    border: 0;
    height: auto !important;
    margin-left: -15px;
      }

  .post-flex-ctn {
    flex-wrap: wrap;
    gap: 10px;
      }

  /* One-off composer: the profile strip sits above the compose panel, which fills the rest of
     the screen so its Post now / Schedule actions stay at the bottom */
  .share-a-post .dash-post-flex {
    flex-direction: column;
    flex-wrap: nowrap;
      }

  .share-a-post .create-post {
    flex: 1 1 auto;
    min-height: 0;
      }

  /* Stacked, the 100% basis set on .select-accounts above would be its height */
  .offcanvas.share-a-post .select-accounts.cmp-where,
  .chrome-plugin .share-a-post .select-accounts.cmp-where {
    flex: 0 0 auto;
      }

  /* Stacked, the one-off composer keeps its floating panels: Where to post and the compose panel are
     rounded white cards 12px apart on the dimmed page, as on desktop, not one white sheet */
  .offcanvas.offcanvas-end.create-new-post.share-a-post,
  .chrome-plugin .share-a-post {
    padding: 12px !important;
      }

  .offcanvas.offcanvas-end.create-new-post.share-a-post .offcanvas-body {
    padding: 0 !important;
    background: transparent;
      }

  .share-a-post .dash-post-flex {
    gap: 10px;
      }

  .offcanvas.share-a-post .offcanvas-body .select-accounts.cmp-where,
  .chrome-plugin .share-a-post .select-accounts.cmp-where {
    margin-left: 0;
    padding: 0 0 4px !important;
    border-radius: 12px;
    overflow: hidden;
      }

  .share-a-post .cmp-compose {
    border-radius: 12px;
    overflow: hidden;
      }

  /* Responsive / small screen: close button is on top (Where to post) */
  .share-a-post .cmp-where .btn-close-share-post {
    display: inline-block;
      }

  .share-a-post .cmp-compose .btn-close-share-post {
    display: none !important;
      }

  /* Profile names are not shown in the compact horizontal avatar strip on small screens */
  #full_name_toggle_container {
    display: none !important;
  }

  /* The profile chips below are forced to inline-flex; a hidden profile (Reddit for now, or the rows
     the Few profiles state drops) stays hidden */
  .offcanvas.create-new-post .select-accounts .account-list .social-account.d-none,
  .chrome-plugin .share-a-post .select-accounts .account-list .social-account.d-none {
    display: none !important;
      }

  .add-time-slots.post-flex-ctn {
    display: block !important;
      }

  .offcanvas-body .select-accounts {
    padding: 15px 0 0 !important;
      }

  .offcanvas.create-new-post .select-accounts .account-list .social-account,
  .chrome-plugin .share-a-post .select-accounts .account-list .social-account {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    margin-bottom: 5px;
    padding:0 !important;
    flex: 0 0 44px;
      }

  .select-accounts .schedule-pic-box {
    margin: 0 !important;
  }

  .bulk-scheduled-one-off-post .select-accounts .account-list .social-account {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    margin-bottom: 5px;
    padding: 0 !important;
    flex: 0 0 44px;
    justify-content: center;
      }

  .upload-in-bulk.bulk-scheduled-one-off-post {
    display: block !important;
    overflow: hidden auto !important;
      }

  .upload-in-bulk.d-none.bulk-scheduled-one-off-post {
    display: none !important;
      }

  .offcanvas.create-new-post .col-lg-12.pe-4 {
    padding: 15px 15px 200px 0 !important;
      }

  .offcanvas.offcanvas-end {
    width: 100% !important;
    border-radius: 0;
    padding-left: 0 !important;
      }

  .CreateRecurringPost .btn-close, .create-new-post .btn-close, .offcanvas .btn-close {
    left: auto;
    right: 25px;
    background-color: #ffffff;
    top: 15px;
      }

  .publishing-calendar .select-accounts.accounts-filter.show,
  .contentlist .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .publishing-calendar .select-accounts.accounts-filter.show .social-account {
    width: 100%;
      }

  .publishing-calendar .select-accounts.accounts-filter.show .user-info,
  .publishing-calendar .select-accounts.accounts-filter.show .title.b4 {
    display: block;
      }

  .publishing-calendar .select-accounts.accounts-filter.show .search-account:not(.d-none) {
    display: flex !important;
    flex-wrap: nowrap;
      }

  .publishing-calendar .select-accounts.accounts-filter.show .search-account-min {
    display: none !important;
      }

  /* Reports sidebar responsive expand styles */
  .rp-reports .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .rp-reports .select-accounts.accounts-filter.show .social-account {
    width: 100%;
      }

  .rp-reports .select-accounts.accounts-filter.show .user-info,
  .rp-reports .select-accounts.accounts-filter.show .title.b4,
  .rp-reports .select-accounts.accounts-filter.show p.title {
    display: block;
      }

  .rp-reports .select-accounts.accounts-filter.show .search-account {
    display: flex !important;
    flex-wrap: nowrap;
      }

  .rp-reports .select-accounts.accounts-filter.show .menu_sa_status {
    display: flex !important;
      }

  /* Inbox sidebar responsive expand styles */
  .inbox .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .inbox .select-accounts.accounts-filter.show .social-account {
    width: 100%;
      }

  .inbox .select-accounts.accounts-filter.show .user-info,
  .inbox .select-accounts.accounts-filter.show .title {
    display: block;
      }

  .inbox .select-accounts.accounts-filter.show .search-account {
    display: flex !important;
    flex-wrap: nowrap;
      }

  .inbox .select-accounts.accounts-filter.show .menu_sa_status {
    display: flex !important;
      }

  /* Plugin sidebar responsive expand styles */
  .plugin-page .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .plugin-page .select-accounts.accounts-filter.show .title,
  .plugin-page .select-accounts.accounts-filter.show .library-schedule-box p {
    display: block;
      }

  /* DM Automation sidebar responsive expand styles */
  .rp-dm-automation .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .rp-dm-automation .select-accounts.accounts-filter.show .social-account {
    width: 100%;
      }

  .rp-dm-automation .select-accounts.accounts-filter.show .user-info,
  .rp-dm-automation .select-accounts.accounts-filter.show .title,
  .rp-dm-automation .select-accounts.accounts-filter.show p.title {
    display: block !important;
      }

  .rp-dm-automation .select-accounts.accounts-filter.show .search-account {
    display: flex !important;
    flex-wrap: nowrap;
      }

  .frequency-box ul {
    gap: 10px !important;
      }

  .offcanvas-title.d-flex > a {
    width: 100%;
      }

  .offcanvas.create-new-post.FeedManager .select-accounts {
    width: 260px;
    flex: 0 0 260px;
    padding: 15px 0 !important;
    border-right: 1px dashed #1F1F1F33;
    height: 100% !important;
    margin: 0;
      }
   
  .offcanvas.create-new-post.FeedManager .offcanvas-body {
    padding: 0 !important;
  }    

  .offcanvas.offcanvas-end.create-new-post.share-a-post .oneoff-post-div > .full-loader, .offcanvas.offcanvas-end.create-new-post.share-a-thread .twitter_thread_canvas >.full-loader {
    margin-left: 0;
      }

  .personalized-content.overflow-hidden .select-post-format-box.h-100,
  .personalized-content.overflow-hidden .edit-selected-post-format {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 1058;
    height: 100% !important;
      }

  .bulk-scheduled-one-off-post .upload-in-bulk {
    display: block !important;
    overflow: hidden auto !important;
      }

  .rp-sa-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
      }

  .rp-sa-stats::-webkit-scrollbar {
    display: none;
  }

  .rp-sa-stats .rpt-stats-grid.cols-3 {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: max-content;
      }

  .rp-sa-stats .rpt-stat-card {
    min-width: calc((100% - 24px) / 3);
    flex-shrink: 0;
      }

 .clw-cockpit {
    padding: 14px 16px 0;
      }

  .clw-subbar, .clw-filterbar {
    padding-left: 16px;
    padding-right: 16px;
      }

  .clw-content {
    padding: 0 16px 24px;
      }

  .clw-cockpit-title {
    font-size: 18px;
      }

  .clw-col-platforms {
    grid-area: meta;
    flex-wrap: wrap;
      }

  .clw-slots.ts-oc {
    --bs-offcanvas-width: min(100vw, 560px);
      }

  .ts-popup .ts-composer {
    flex-direction: column;
    min-height: auto;
      }

  .ts-popup .ts-composer .ts-composer-left {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px dashed var(--ts-border);
    padding: 0 0 14px;
    margin-bottom: 14px;
      }

  .ts-popup .ts-composer .ts-composer-right {
    padding-left: 0;
      }

  /* Hide the emoji picker button in composer editors on tablet + mobile */
  .textarea-emoji-control {
    display: none !important;
      }

  .post-content:has(.textarea-emoji-control) .textarea-footer {
    padding-left: 10px;
      }

  /* Add time slots: profiles become a horizontal avatar-chip scroller
     (like the create-post composer) to save vertical space. Scoped to
     the composer so the Filter-by-profile modal keeps its list view. */
  .ts-popup .ts-composer .ts-profilelist {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: 8px;
    padding-bottom: 6px;
      }

  .ts-popup .ts-composer .ts-profile {
    position: relative;
    flex: 0 0 auto;
    padding: 6px;
      }

  .ts-popup .ts-composer .ts-profile .user-info {
    display: none;
      }

  .create-new-post .offcanvas-header {
    padding: 20px 15px;
      }
      
   .clw-bulkbar,
   .clw-bulkbar-inner {
    width: 100%;
  }

  .clw-onboard-grid {
    grid-template-columns: repeat(2, 1fr);
      }

  .clw-onboard-title {
    font-size: 20px;
      }

  .clw-onboard-bulk-head,
  .clw-onboard-bulk-row {
    grid-template-columns: 1.5fr 1fr 32px;
      }

  .clw-onboard-bulk-head > :nth-child(3),
  .clw-onboard-bulk-row > :nth-child(3),
  .clw-bulkbar-spacer {
    display: none;
      }

  .clw-bulkbar-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    padding: 8px 12px;
    border-radius: 20px;
    white-space: normal;
      }

  .hashtags-ctn .select-library,
  .custom-fields-ctn .select-library,
  .import-from-social-ctn .select-library {
    width: 100%;
    flex: 0 0 auto;
      }

  .rp-rail-panel .clw-rail-group-body {
    max-height: 45vh;
    overflow-y: auto;
      }

  .rp-rail-pick[aria-expanded="true"] .rp-rail-chev {
    transform: rotate(180deg);
      }

  .custom-fields-ctn,
  .hashtags-ctn,
  .import-from-social-ctn {
    overflow-y: auto !important;
      }

}

@media (min-width: 992px) {
  .custom-fields-ctn .cf-fill,
  .hashtags-ctn .hs-fill {
    min-height: 0;
    flex: 1 1 auto;
      }

  .custom-fields-ctn #cfWorkspace,
  .custom-fields-ctn #cfWorkspace > div,
  .hashtags-ctn #hsWorkspace,
  .hashtags-ctn #hsWorkspace > div {
    min-height: 0;
      }

  .custom-fields-ctn .cf-panel,
  .hashtags-ctn .hs-panel {
    overflow: hidden;
      }

  .custom-fields-ctn .cf-scroll,
  .hashtags-ctn .hs-scroll {
    overflow-y: auto;
    /* the .row gutter hangs 12px past this box on each side, and the columns
       pad the content back inside, so clipping x costs nothing */
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
      }

  .rp-rail-panel.collapse:not(.show),
  .rp-rail-panel.collapse.show {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .import-from-social-ctn .ifs-cols,
  .import-from-social-ctn .ifs-cols > div {
    min-height: 0;
  }

  .import-from-social-ctn .ifs-panel {
    overflow: hidden;
  }

  .import-from-social-ctn .ifs-scroll {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  /* One-off composer: the three panels float on the dimmed page as rounded cards, 12px apart and
     12px in from the screen edges. On the left they start 180px in, and move toward the thin edge
     as the screen narrows, once the three panels at full size (1358px) no longer fit beside that strip */
  .offcanvas.offcanvas-end.create-new-post.share-a-post {
    padding: 12px 12px 12px clamp(12px, calc(100vw - 1358px), 180px);
  }

  .offcanvas.offcanvas-end.create-new-post.share-a-post .offcanvas-body {
    background: transparent;
  }

  .share-a-post .dash-post-flex,
  .share-a-post .cmp-panels {
    gap: 10px;
  }

  .share-a-post .cmp-panel {
    border-radius: 10px;
    overflow: hidden;
  }

  /* The compose panel keeps room for its header buttons; on smaller laptops the preview gives way first */
  .share-a-post .cmp-compose {
    flex: 1 0 630px;
  }

  .share-a-post .cmp-preview {
    flex: 0 1 400px;
    min-width: 240px;
  }

}

/* Small devices landscape phones */

@media (max-width: 767px) {
  /* One-off composer: the compose header wraps, so its buttons (Close among them) drop to a second row
     instead of running off the edge */
  .share-a-post .cmp-compose .cmp-panel-head {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
      }

  /* Sub-bar: stack like the mobile app - tabs on their own scrollable
     row, filter/view actions on a second row */
  .clw-subbar {
    flex-wrap: wrap;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
      }

  .clw-tabs {
    flex: 1 0 100%;
      }

  .clw-subbar-actions {
    flex: 1 0 100%;
    gap: 8px;
    padding: 8px 0;
    justify-content: flex-start;
      }

  .clw-subbar-actions .clw-view-toggle {
    order: 3;
    margin-left: auto;
      }

  /* Search / filter bar: search box (input + toggle) full width, with
     the Search button below it, right-aligned */
  .clw-filterbar {
    flex-direction: column;
    align-items: stretch;
      }

  .clw-filterbar .clw-filter-search {
    flex: 0 0 auto;
    flex-wrap: wrap;
      }

  .clw-filter-search-btn {
    align-self: flex-end;
      }

  /* search-results.html: the search lives in the cockpit header row.
     Stack it - Back on top, full-width search box, Search button below */
  .clw-cockpit-top {
    flex-wrap: wrap;
      }

  .clw-cockpit-top .clw-filter-search {
    flex: 1 1 100%;
    order: 3;
    margin-left: 0 !important;
    flex-wrap: wrap;
      }

  .clw-cockpit-top .clw-filter-search-btn {
    order: 4;
    margin-left: auto;
      }

  /* Time slots panel: let the toolbar wrap instead of overflowing */
  .ts-toolbar {
    flex-wrap: wrap;
      }

  /* Composer caption toolbar: tighten the icon gap and keep the
     "Write with AI" pill on one line so it doesn't wrap on a phone */
  .textarea-footer {
    gap: 8px !important;
      }

  .ai-rephrase a {
    white-space: nowrap;
      }

  /* Time slots grids can't shrink to a phone; scroll them horizontally
     so the day columns stay readable */
  .ts-weekwrap,
  .ts-monthwrap {
    overflow-x: auto !important;
      }

  .clw-slots.ts-oc .timeslots-calendar .ts-weekgrid {
    grid-template-columns: repeat(8, minmax(150px, 1fr));
      }

  .clw-slots.ts-oc .timeslots-calendar .monthly .cal-day-grid {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
      }

  .calendar-change-month .btn {
    padding: 6px !important;
      }

  .queue-history-tabs.nav-tabs .nav-link {
    padding: 5px 12px;
      }

  .inner-header.d-flex.flex-wrap {
    justify-content: space-between;
    row-gap: 10px;
      }

  .btn {
    padding:10px;
    font-size: 14px;
      }

  .b4 {
    font-size: 14px;
      }

  .connect-account.Profiles-added .container {
    padding-left: 30px;
    padding-right: 30px;
      }

  .manage-social-accounts .connect-account.Profiles-added .container {
    padding: 0;
      }

  .connect-account.Profiles-added {
    padding-right: 0 !important;
    padding-bottom: 100px;
      }

  .view-installedprofiles-btn,
  .ProfilesAddedSuccessfully .btn-close {
    display: block;
      }

  .offcanvas.offcanvas-end.AddYourProfiles.ProfilesAddedSuccessfully {
    visibility: hidden;
    transform: translateX(100%);
      }

  .offcanvas.offcanvas-end.AddYourProfiles.ProfilesAddedSuccessfully.show {
    visibility: visible;
    z-index: 1045;
    transform: none;
      }

  .plan-price .plan-name + p {
    min-height: inherit;
      }

  .footer-ctn {
    padding: 10px !important;
    justify-content: center;
      }

  .footer-ctn a {
    width: 100%;
    text-align: center;
      }

  .create-new-post .offcanvas-header {
    padding: 20px 15px;
  }

  .UploadContentBulk .add-new-post {
    padding: 0 !important;
      }

  .edit-post .select-accounts + .create-post {
    display: block;
      }

  .edit-post .select-accounts.show + .create-post {
    display: none;
      }

  .create-new-post.edit-post ul.account-list {
    max-height: fit-content;
    padding: 0 1rem !important;
      }

  .create-new-post.edit-post .social-account .user-info {
    display: block;
      }

  .recurpost-login-signup.share-a-post .upload-in-bulk .select-accounts {
    flex: auto;
      }

  .include-idea .ql-container {
    max-height: 450px;
      }

  .include-idea .ql-editor {
    min-height: 100px;
      }

  .recurpost-login-signup .create-new-post {
    position: relative;
    right: 0;
    padding: 0 15px 15px 0 !important;
      }

  .create-new-post .social-account .user-info,
  .bulk-scheduled-one-off-post .social-account .user-info,
  .select-accounts .account-list .social-account.disabled p.text-danger {
    display: none;
      }

  .select-accounts .account-list .social-account.disabled {
    border-color: #e81313;
    flex-direction: row !important;
      }

  .share-a-post ul.account-list,
  .create-new-post ul.account-list {
    max-height: 90px;
    padding: 0 !important;
    margin-bottom: 15px;
      }

  .link-preview-box {
    flex-wrap: wrap;
      }

  .og-image-container {
    margin-bottom: 15px;
      }

  .nav-tabs .social_preview.nav-link {
    margin: 0 2px;
      }

  .nav-tabs .social_preview.nav-link img {
    height: 30px;
    width: 30px;
      }

  .plan-price img {
    width: 50px;
    flex: 0 0 50px;
      }

  .plan-price .plan-name {
    font-size: 24px;
      }

  .plan-details-table p {
    font-size: 16px;
      }

  .plan-details-table .popular-tag {
    position: relative;
    top: 0;
    left: 0;
    transform: inherit;
    border-radius: 5px 0 0 5px;
    font-size: 12px;
      }

  .price {
    font-size: 32px;
      }

  .select-accounts.accounts-filter {
    height: 100% !important;
      }

  .contentlist .select-accounts.accounts-filter.show,
  .manage-social-accounts .select-accounts.accounts-filter.show {
    width: 260px;
    flex: 0 0 260px;
      }

  .contentlist .select-accounts.accounts-filter.show .text-only,
  .manage-social-accounts .select-accounts.accounts-filter.show .text-only {
    display: inline-block !important;
      }

  .contentlist .select-accounts.accounts-filter.show h4,
  .manage-social-accounts .select-accounts.accounts-filter.show h4 {
    display: inline-block;
      }

  .contentlist .select-accounts.accounts-filter.show .library-schedule-box,
  .manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box {
    text-align: left;
    width: 100%;
      }

  .contentlist .select-accounts.accounts-filter.show .library-schedule-box .text-only, .contentlist .select-accounts.accounts-filter.show .add-library .text-only,
  .manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box .text-only, .manage-social-accounts .select-accounts.accounts-filter.show .add-library .text-only {
    display: inline-block !important;
    text-wrap: nowrap;
      }

  .contentlist .select-accounts.accounts-filter.show .library-schedule-box p,
  .manage-social-accounts .select-accounts.accounts-filter.show .library-schedule-box p {
    justify-content: start;
      }

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

  .select-accounts.accounts-filter .account-list .social-account {
    width: 100%;
    display: flex !important;
    margin: 0 0 15px;
      }

  .select-accounts.accounts-filter ul.account-list {
    max-height: 100%;
    padding: 2px 18px !important;
    margin: 0;
      }

  .post-scheduled-details .user-info {
    display: none;
      }

  .social-tab-list li button {
    padding: 0 6px;
      }

  .social-tab-list img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
      }

  .social-tab-list li span {
    right: 2px;
      }

  .post-social-account .schedule-pic-box {
    height: 26px;
    width: 26px;
    flex: 0 0 26px;
      }

  .post-social-account .schedule-pic-box .schedule-pic {
    width: 30px;
      }

  .small-social-icon {
    height: 16px;
    width: 16px;
      }

  .post-social-account .more-account {
    height: 28px;
      }

  .user-msg-details {
    top: 80px;
      }

  .ApprovalQueue .queue-post-content .post-library {
    padding: 15px 0 0;
    margin: 0 !important;
      }

  .report-card .queue-post-content .post-library {
    right: 0;
    padding-right: 15px;
      }

  .report-card .post-main-ctn .tab-content {
    padding-right: 0 !important;
      }

  .report-card .user-msg-details {
    top: 42px;
    padding-right: 15px !important;
      }

  .post-description .badge {
    font-size: 12px;
      }

  .post-library .badge {
    font-size: 12px !important;
      }

  .insta-post-preview.feed-preview .main-img-100,
  .insta-post-preview.feed-preview .main-img-100 img {
    height: 320px;
      }

  .post-description.pe-5 {
    padding-right: 0!important;
      }

  .edit-post .select-accounts .account-list .social-account {
    width: 100%;
    display: flex !important;
    margin: 0 0 15px;
      }

  .csv-details-ctn .row {
    gap: 20px;
      }

  .csv-details-ctn .row .border-end-dashed {
    border: 0;
      }

  .csv-details-ctn .row .from-group.ps-2 {
    border-top: 1px dashed #1F1F1F33;
    padding: 15px 0 0 !important;
      }

  .FeedManager .select-accounts {
    display: none !important;
      }

  .FeedManager .select-accounts.show {
    display: flex !important;
      }

  /* Rail open on a phone: the round toggle would sit on the rail's own buttons.
     The toggle is not a sibling of the rail, so this reads the open rail from the body. */
  .FeedManager .offcanvas-body:has(#fmFeedsView .select-accounts.show) .btn-accounts-filter {
    display: none !important;
      }

  .FeedManager .offcanvas-body {
    margin: 0;
      }

  .ScheduleNext .create-new-post.ps-4 {
    padding-left: 0 !important;
      }

  .TweetPerformance .col-md-4.border-end {
    border: 0 !important;
      }

  .inbox .accounts-filter:not(.active) {
    display: none !important;
      }

  .inbox-filter select {
    max-width: 140px;
      }

  .recurpost-login-signup .configure_account .text-start {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 15px;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e4e4e4;
      }

  .recurpost-login-signup .configure_account {
    padding-bottom: 100px;
      }

  .Profiles-added .btn-continue {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    width: 100%;
      }

  .FeedManager .post-main-ctn.link-post {
    flex-direction: column;
    gap: 10px;
      }

  .personalized-content.overflow-hidden {
    overflow-y: auto !important;
      }

  .recurpost-login-signup.share-a-post .plan-weekly-posts {
    padding: 0 15px !important;
      }

  .library-post-content .post-library {
    position: relative;
    bottom: 0;
    right: 0;
    padding-top: 5px;
      }

  .Manage-Hashtags-ctn .select-library,
  .CustomFields-ctn .select-library {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 91;
    display: none !important;
    top: 0;
    left: 0;
    border: 0 !important;
    border-radius: 0 !important;
      }

  .Manage-Hashtags-ctn .select-library.show,
  .CustomFields-ctn .select-library.show {
    display: flex !important;
    align-items: start;
      }

  .offcanvas.create-new-post.FeedManager .select-accounts {
    width: 100%;
    flex: 0 0 100%;
    border: 0;
    height: auto !important;
      }

  .rpt-stats-grid.cols-2,
  .rpt-stats-grid.cols-3,
  .rpt-stats-grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .post-opt-divider {
    border-top: 1px solid #dee2e6;
    }

  }

@media (min-width: 768px) {
  .post-opt-divider {
    border-left: 1px solid #dee2e6;
    }
  }

/* Extra small devices portrait phones */

@media (max-width: 576px) {
  .account-settings-dropdown {
    transform: translate(40px, -405px) !important;
      }

  /* The drawer leaves no room beside it on a phone. The rail menus (Share a post, Inbox,
     Team) open inline under their item and push the rest down, so no entry is hidden
     behind the items below or cut off by the scrolling list; the arrow turns up while open */
  .main-menu .menu-list ul li.dropend {
    flex-wrap: wrap;
      }

  .main-menu .menu-list ul li.dropend > .dropdown-menu {
    flex: 0 0 100%;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 2px 0 4px !important;
    min-width: 0;
    box-shadow: none;
    background: transparent;
      }

  .main-menu .menu-list ul li.dropend > a.show .ri-arrow-right-s-line {
    transform: rotate(-90deg);
      }

  /* The workspace list still opens over the rail, under the switcher, the width of the drawer */
  .main-menu .ws-switcher > .dropdown-menu {
    inset: 100% 0 auto 0 !important;
    transform: none !important;
    margin: 4px 0 0 !important;
    width: auto;
    min-width: 0;
    max-width: none;
      }

  .gap-4 {
    gap: 15px !important;
      }

  .offcanvas.offcanvas-end {
    width: 100% !important;
    border-radius: 0;
    padding-left: 0 !important;
      }

  .account-added .user-info .b4,
  .user-info .b4 {
    width: 190px;
      }
   
  .add-on-list {
    flex-wrap: wrap;
      }

  .add-on-name {
    width: 100%;
    flex: 0 0 100%;
      }

  .add-on-name span {
    height: auto;
      }

  .plans-select-tab li a span {
    margin-left: 0;
    bottom: -20px;
    right: -45px;
      }

  .SwitchWorkspace .offcanvas-header .offcanvas-title,
  .offcanvas-title .SelectAll,
  .offcanvas-title.d-flex > a {
    width: 100%;
      }

  .modal-header .btn-close {
    position: absolute;
    top: -10px;
    right: 20px;
      }

  .daterangepicker {
    max-height: 250px;
    overflow-y: auto;
    left: 30px !important;
      }

  .modal .fb-background-picker .fb-bg-list {
    grid-auto-rows: 65px;
      }

  .post-preview .fb-text-bg-post {
    height: 235px;
      }

  .insta-grid .grid-view-container {
    grid-auto-rows: 140px;
      }

  .border-start.select-time {
    border: 0 !important;
      }

  .post-main-ctn {
    min-height: inherit;
    height: auto;
    flex-direction: column;
      }

  .post-message {
    height: auto !important;
    max-height: 78px;
      }

  .AiPostHistory .post-main-ctn {
    min-height: auto;
      }

  .post-main-ctn .tab-content {
    padding-right: 65px !important;
      }

  .post-main-ctn .tab-content .tab-pane {
    flex-direction: column;
    gap: 10px;
      }

  .post-image,
  .post-image img {
    width: 100%;
      }

  .queue-post-content .post-library {
    position: relative;
    bottom: 0;
    right: 0;
    padding: 0 65px 10px 15px;
      }

  .upload-media-dropdown .custom-dropdown {
    max-height: 130px;
    overflow-y: auto;
      }

  .format-box .tab-content .border-top.active {
    flex-wrap: wrap;
      }

  .select-post-format-box .format-list {
    max-width: 100%;
      }

  .boost-post-step .select-post .post-main-ctn {
    flex-direction: row;
      }

  .iga-picker-search {
    max-width: 100%;
    width: 100%;
    order: 2;
      }

  .iga-picker-tabs {
    order: 1;
      }

  .iga-row {
    flex-wrap: wrap;
      }

  .iga-row-use-btn {
    margin-left: auto;
      }

  .iga-vol-label {
    width: 48px;
      }

 .clw-cockpit-actions .clw-btn-add span {
    display: none;
      }

  .clw-empty-card {
    padding: 24px 16px;
      }

  .clw-onboard {
    padding: 20px 14px;
      }

  .clw-onboard-grid {
    grid-template-columns: 1fr;
      }

  .clw-onboard-tpl-sub {
    min-height: 0;
      }

  .clw-onboard-pane-head {
    flex-direction: column;
    align-items: flex-start;
      }

    }

/* ---------------Responsive css end--------------- */