/* CSS Reset */
html,legend{color:#000}html{background:#FFF}blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}sub,sup{vertical-align:baseline}a{text-decoration:none}
:root {
  --color-main: #4338CA;
  --color-main-bg: #E8EEFA;
  --color-secondary-bg: #FFF;
  --color-text-main: #111827; /* gray/900 */
  --color-text-secondary: #FFF;
  --color-text-danger: #DC2626;
  --color-text-3: #374151;
  --color-2: #6B7280; /* gray/500 */
  --color-3: #D1D5DB; /* gray/300 */
  --widget-card-bg: #F8F8F8;

  --text-fs-xs: 12px;
  --text-fs-s: 14px;
  --text-fs-m: 16px;
  --text-fs-l: 18px;
  --text-fs-ml: 20px;
  --text-fs-xl: 24px;

  --pad-xs: 8px;
  --pad-s: 12px;
  --pad-m: 16px;
  --pad-l: 20px;
  --pad-xl: 24px;
  --pad-xxl: 32px;

  --pad-input-v: 9px;
  --pad-input-h: 13px;
  --pad-input-h-2: 15px;
  --pad-input-h-3: 17px;

  --border-color-main: #E5E7EB;

  --border-radius-m: 6px;
  --border-radius-xl: 16px;

  --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  --button-color-main: #4F46E5;
  --button-color-main-hover: #4338CA;
  --button-color-secondary: #EEF2FF;
  --button-color-secondary-hover: #C7D2FE;
  --button-color-white: #fff;
  --button-color-white-hover: #F9FAFB;
  --button-color-green: #17AA2F;
  --button-color-green-hover: #4338CA;
  --button-color-red: #DC2626;
  --button-color-red-hover: #B91C1C;

  --input-focus-color: #6366F1;

  --modal-bg: #13132066;
}
.app {
  position: relative;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-main-bg);
  color: var(--color-text-main);
  padding: 98px var(--pad-l) 98px var(--pad-l);
  box-sizing: border-box;
  overflow: hidden;
}

.op-60 {
  opacity: 0.6;
}

.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-900 {
  font-weight: 900;
}

.mb-xs {
  margin-bottom: 8px;
}
.mb-ms {
  margin-bottom: 12px;
}
.mb-m {
  margin-bottom: 16px;
}
.mb-xl {
  margin-bottom: 24px;
}
.mb-xxl {
  margin-bottom: 32px;
}

.relative {
  position: relative;
}

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

.main-container {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.center-container {
  max-width: 808px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--pad-xxl);
}

.round-container {
  background-color: var(--color-secondary-bg);
  border-radius: var(--border-radius-xl);
  padding: var(--pad-xxl);
}
.round-container_pad_m {
  padding: var(--pad-m);
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-main);
  color: var(--color-text-secondary);
  box-sizing: border-box;
  z-index: 1;
  color: var(--color-text-secondary);
}
.header__center {
  padding: var(--pad-xs) 32px var(--pad-xs) 37px;
  display: flex;
  justify-content: space-between;
}
.header__logo {
  display: flex;
  align-items: center;
}
.header__logo svg, .header__logo .icon {
  margin-right: 29px;
}
.header__logo span{
  opacity: 0.6;
}

.form {
  background-color: var(--color-secondary-bg);
  border-radius: var(--border-radius-m);
  padding: var(--pad-l) var(--pad-m);
}
.form__title {
  font-size: var(--text-fs-l);
  margin-bottom: var(--pad-l);
  line-height: 1.333;
}
.form__lines {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--pad-s);
}

.input {
  border: 1px solid var(--color-3);
  border-radius: var(--border-radius-m);
  padding: var(--pad-input-v) var(--pad-input-h);
  padding: calc(var(--pad-input-v) - 1px) var(--pad-input-h);
  font-size: var(--text-fs-m);
  box-shadow: var(--shadow-1);
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  outline-color: var(--input-focus-color);
}
.input_icon {
  padding-left: 41px;
}
.input_icon + svg, .input_icon + .icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
}
::placeholder {
  color: var(--color-2);
  opacity: 1;
}
::-ms-input-placeholder {
  color: var(--color-2);
}

.button {
  position: relative;
  display: inline-block;
  border: none;
  border-radius: var(--border-radius-m);
  padding: var(--pad-input-v) var(--pad-input-h);
  font-size: var(--text-fs-m);
  box-shadow: var(--shadow-1);
  box-sizing: border-box;
  background-color: var(--button-color-main);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
}
.button_icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-input-v) var(--pad-input-h-2) var(--pad-input-v) var(--pad-input-h-3);
}
.button_icon svg, .button_icon .icon {
  margin-left: 12px;
}
.button_icon_left {
  padding: var(--pad-input-v) var(--pad-input-h-3) var(--pad-input-v) var(--pad-input-h-2);
}
.button_icon_left svg, .button_icon_left .icon {
  margin-left: 0;
  margin-right: 14px;
}
.button_full-width {
  width: 100%;
}
.button:not([disabled]):hover {
  background-color: var(--button-color-main-hover);
}
.button_color_secondary {
  background-color: var(--button-color-secondary);
  color: var(--color-main);
}
.button_color_secondary:not([disabled]):hover {
  background-color: var(--button-color-secondary-hover);
}
.button_color_green {
  background-color: var(--button-color-green);
  color: var(--color-text-secondary);
}
.button_color_green:not([disabled]):hover {
  background-color: var(--button-color-green-hover);
}
.button_color_red {
  background-color: var(--button-color-red);
  color: var(--color-text-secondary);
}
.button_color_red:not([disabled]):hover {
  background-color: var(--button-color-red-hover);
}
.button_color_transparent {
  background-color: transparent;
  color: var(--color-text-main);
  box-shadow: none;
}
.button_color_transparent:not([disabled]):hover {
  background-color: var(--button-color-white-hover);
}
.button_color_white {
  background-color: var(--button-color-white);
  color: var(--color-text-3);
}
.button_color_white::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-3);
  border-radius: var(--border-radius-m);
  box-sizing: border-box;
}
.button_color_white:not([disabled]):hover {
  background-color: var(--button-color-white-hover);
}
.button[disabled] {
  opacity: 0.4;
  cursor: default;
}
.button_s {
  font-size: var(--text-fs-s);
  padding: var(--pad-input-v) var(--pad-input-h-3) var(--pad-input-v) var(--pad-input-h-2);
  line-height: 1.286;
}
.button_s.button_icon_left svg, .button_s.button_icon_left .icon {
  margin-right: 8px;
}
.button_actions-list {
  position: relative;
  height: 36px;
  width: 36px;
}
.button_actions-list svg, .button_actions-list .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.head {
  font-weight: 700;
}
.head_h1 {
  letter-spacing: -0.4px;
  font-size: var(--text-fs-xl);
  line-height: 1.333;
}
.head_h2 {
  font-size: var(--text-fs-ml);
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.table {
  width: 100%;
}
.table__head {
  display: flex;
  padding-bottom: 7px;
}
.table__head-cell {
  text-transform: uppercase;
  font-size: var(--text-fs-xs);
  color: var(--color-2);
  line-height: 1.333;
}
.table__head-cell:nth-child(1) {
  width: 100%;
  max-width: 280px;
}
.table__row {
  display: flex;
  border-top: 1px solid var(--color-3);
}
.table__cell {
  display: flex;
  align-items: center;
  padding: var(--pad-m) 0 calc(var(--pad-m) - 1px) 0;
}
.table__cell:nth-child(1) {
  width: 100%;
  max-width: 280px;
  font-weight: 500;
}
.table__cell:nth-child(2) {
  font-size: var(--text-fs-s);
  color: var(--color-2);
}
.table__cell:nth-child(3) {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: var(--pad-xs);
}

.data-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.data-placeholder__img {
  position: relative;
  width: 120px;
  height: 120px;
}
.data-placeholder__img svg, .data-placeholder__img .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.data-placeholder__text {
  color: var(--color-2);
}

.message-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--modal-bg);
  z-index: 1;
}
.message-modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 344px;
  background-color: var(--color-secondary-bg);
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius-m);
}
.message-modal__body {
  text-align: center;
  padding: var(--pad-l) var(--pad-m) var(--pad-m) var(--pad-m);
}
.message-modal__icon {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FEE2E2;
}
.message-modal__icon svg, .message-modal__icon .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.message-modal__title {
  font-size: var(--text-fs-l);
  line-height: 1.333;
  font-weight: 500;
  margin-bottom: var(--pad-s);
}
.message-modal__text {
  font-size: var(--text-fs-s);
  line-height: 1.42857;
  color: var(--color-2);
}
.message-modal__buttons {
  display: grid;
  gap: var(--pad-s);
  padding: var(--pad-s) var(--pad-m) var(--pad-s) var(--pad-m);
  background-color: #F9FAFB;
  border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

.widget-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--modal-bg);
  z-index: 1;
}
.widget-modal__container {
  position: absolute;
  display: grid;
  grid-template-columns: 392px 1fr;
  grid-template-rows: 100%;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  width: calc(50% + 612px);
  max-width: calc(100% - 108px);
  background-color: var(--color-secondary-bg);
}
.widget-modal__left-panel {
  background-color: var(--color-main-bg);
  padding: var(--pad-xl) var(--pad-xl) 0 var(--pad-xl);
}
.widget-modal__right-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--pad-m) var(--pad-xl) var(--pad-xl) var(--pad-xl);
}
.widget-modal__right-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget-modal__right-panel-content {
  position: relative;
}
.widget-modal__widget-save {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--color-3);
  padding: var(--pad-m) var(--pad-xxl);
  box-sizing: border-box;
}

.source-list__sources {
  display: grid;
  gap: var(--pad-xs);
}

.source-buttons {
  display: grid;
  gap: var(--pad-xs);
}

.source-button {
  display: flex;
  gap: var(--pad-xs);
  justify-content: center;
  padding: var(--pad-m) var(--pad-xl);
  border-radius: var(--border-radius-m);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.source-button:hover {
  opacity: 0.8;
}
.source-button_youtube {
  background: #ffeeef;
  color: #f00;
}
.source-button_facebook{
  background: rgba(24, 119, 242, 0.08);
  color: #1877F2;
}
.source-button_instagram {
  background: linear-gradient(259deg, rgba(255, 240, 97, 0.08) 0%, rgba(246, 136, 38, 0.08) 32.45%, rgba(239, 38, 116, 0.08) 69.42%, rgba(105, 45, 145, 0.08) 100.51%);
  color: #932B89;
}

.accounts-list {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: calc(100% - 16px);
}

.accounts-list__top {
  position: relative;
  width: 100%;
  left: -16px;
  top: -16px;
  padding: 8px 24px 8px 8px;
  border-bottom: 1px solid var(--color-3);
}
.accounts-list__scrollable {
  display: grid;
  gap: var(--pad-xs);
  overflow-y: auto;
  margin-bottom: 96px;
}
.accounts-list__scrollable {
  scrollbar-width: auto;
  scrollbar-color: #D1D5DB #fff;
}
.accounts-list__scrollable::-webkit-scrollbar {
  width: 18px;
}
.accounts-list__scrollable::-webkit-scrollbar-track {
  background: #fff;
}
.accounts-list__scrollable::-webkit-scrollbar-thumb {
  background-color: #D1D5DB;
  border-left: 10px solid #fff;
}
.accounts-list__button {
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 100%;
  padding: var(--pad-m);
  background: var(--color-secondary-bg);
  border-top: 1px solid var(--color-3);
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.account-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--pad-xs);
  border: 1px solid var(--color-3);
  border-radius: var(--border-radius-m);
  padding: var(--pad-m);
  cursor: pointer;
}
.account-item__w-buttons {
  padding-right: var(--pad-xs);
}
.account-item > div {
  display: flex;
  height: 100%;
  align-items: center;
}
.account-item__img {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.account-item__img img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.account-item__text h6{
  font-size: var(--text-fs-s);
  line-height: 1.2;
  font-weight: 600;
}
.account-item__text p {
  display: -webkit-box;
  font-size: var(--text-fs-xs);
  font-weight: 400;
  letter-spacing: -0.24px;
  color: var(--color-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 1.3;
}

.round-check {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-3);
  cursor: pointer;
}
.round-check_active {
  cursor: default;
}
.round-check::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  border-radius: 50%;
  border: 5px solid var(--button-color-main);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.round-check_active::after {
  opacity: 1;
}

.radio-buttons {
  display: flex;
}
.radio-buttons > .radio-button{
  margin-left: 24px;
}
.radio-buttons > .radio-button:first-of-type{
  margin-left: 0;
}

.radio-button {
  display: flex;
  align-items: center;
}
.radio-button > div {
  margin-right: 8px;
}

.widget-code {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.widget-code__img {
  padding: 12px;
}
.widget-code__text {
  text-align: center;
  color: var(--color-2);
}
.widget-code__source {
  position: relative;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--border-radius-m);
  border: 1px solid var(--button-color-main);
  background: rgba(67, 56, 202, 0.04);
}
.widget-code__copy-button {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.widget-code__source:hover .widget-code__copy-button{
  opacity: 1;
  pointer-events: all;
}

.toasts {
  position: fixed;
  display: grid;
  top: 32px;
  right: 32px;
  gap: 24px;
  z-index: 1;
  max-width: 320px;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  background-color: var(--color-secondary-bg);
  border-radius: var(--border-radius-m);
  padding: var(--pad-m);
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
}
.toast__text-block {
  padding-right: 4px;
}
.toast__title {
  font-size: var(--text-fs-s);
  line-height: 1.42857;
  font-weight: 500;
}
.toast__text {
  font-size: var(--text-fs-s);
  line-height: 1.42857;
  font-weight: 400;
  margin-top: 4px;
  color: var(--color-2);
}
.toast__close {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.toast__close:hover {
  opacity: 0.6;
}

.widget-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto; 
  box-sizing: border-box;
  border-radius: 16px;
  background-color: #F8F8F8;
}

.widget-card__header {
  display: flex;
  padding: 16px 16px 8px 16px;
  align-items: center;
}
.widget-card__account-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
}
.widget-card__account-icon {
  width: 24px;
  height: 24px;
  margin-left: auto;
}

.widget-card__account-name {
  margin: 0;
  padding: 0;
  line-height: 1.42857;
  font-size: 14px;
  font-weight: 500;
}
.widget-card__text-block {
  padding: 0 16px 16px 16px;
  min-height: 75px;
  box-sizing: border-box;
}

.widget-card__text {
  display: -webkit-box;
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.42857;
  margin-bottom: 4px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.widget-card_big-text .widget-card__text {
  -webkit-line-clamp: 6;
}
.widget-card__link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42857;
}

.widget-card__link a {
  color: #111827;
  font-weight: 500;
  text-decoration: none;
}
.widget-card__img {
  position: relative;
  height: 220px;
}

.widget-card__img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.widget-card__footer {
  position: absolute;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00000066;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 0 0 16px 16px;
}
.widget-card__footer > img {
  margin-left: 16px;
}
.widget-card__footer > img:first-of-type {
  margin-left: 0;
}
.widget-card__footer-date {
  margin-left: auto;
  color: #fff;
  opacity: 0.7;
  line-height: 1.42857;
  font-weight: 400;
  font-size: 14px;
}

.dropdown-button {
  position: relative;
}
.dropdown-button:hover .dropdown {
  opacity: 1;
}

.dropdown {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.dropdown__inner {
  position: relative;
  background-color: var(--color-secondary-bg);
  border-radius: var(--border-radius-m);
  padding: 4px 0 4px 0;
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
}
.dropdown__line {
  display: flex;
  text-align: left;
  padding: 8px 16px 8px 16px;
  color: var(--color-text-3);
  font-size: var(--text-fs-s);
  line-height: 1.42857;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.dropdown__line:hover {
  opacity: 0.6;
}
.dropdown__line_color_red {
  padding: 8px 16px 8px 16px;
  color: var(--color-text-danger);
}
.dropdown__line svg, .dropdown__line .icon {
  position: relative;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  margin-right: 12px;
}

/* === Current block styles === */

.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 376px;
  width: 100%;
  box-sizing: border-box;
  width: calc(100% - var(--pad-l) * 2);
}

.search-button-block {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: var(--pad-m);
}

.empty-list {
  padding: 60px 0 112px 0;
}

.preview-data-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* === Fake slider === */

.fake-slider {
  position: relative;
}
.fake-slider__slides {
  display: flex;
  gap: 24px;
}
.fake-slider__slide {
  position: relative;
  width: 368px;
  height: 496px;
}
.fake-slider__pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
}
.fake-slider__pagination-items {
  display: flex;
  gap: 4px;
  margin: 0 auto;
}
.fake-slider__pagination-item {
  position: relative;
  width: 16px;
  height: 16px;
}
.fake-slider__pagination-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background-color: #111827;
  opacity: 0.2;
  border-radius: 50%;
}
.fake-slider__pagination-item_prev::after, .fake-slider__pagination-item_next::after {
  width: 10px;
  height: 10px;
}
.fake-slider__pagination-item_active::after {
  width: 12px;
  height: 12px;
  opacity: 1;
}
.fake-slider__button {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: 50%;
  background-color: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(5px);
  transform: translateY(-100%);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.fake-slider__button:hover {
  background-color: rgba(17, 24, 39, 0.92);
}
.fake-slider__button svg, .fake-slider__button .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fake-slider__button_prev {
  left: 8px;
}
.fake-slider__button_next {
  right: 8px;
}
.hidden {
  display: none;
}

.post-selected {
  outline: 2px solid green;
}
.widget-card__selection-indicator {
  font-weight: bold;
  color: green;
  text-align: right;
}

.post-selected {
  outline: none !important;
}

.post-selected .widget-card {
  background-color: #e6ffe6 !important;
  transition: background-color 0.3s ease;
  border: 1px solid #a6d8a8; 
}

.custom-post-selected {
  background-color: #e6ffe6;
  transition: background-color 0.3s ease;
  border: 1px solid #a6d8a8;
}

.button_wide {
  width: 80%;       
  display: block;
  margin: 0 auto;   
}

.button_color_disabled {
  background-color: grey;
  pointer-events: none; 
  opacity: 0.6;        
}

.button_color_green {
  background-color: #34D399; 
}

.selected-posts-scrollable {
  max-height: 90vh;
  margin-top: 1rem;
  overflow-y: auto;
}

.widget-modal__right-panel-top {
  margin-bottom: 1rem;
}

.widget-modal__right-panel--flex {
  display: flex;
  flex-direction: column;
}

.widget-modal__scrollable-content {
  flex: 1;           
  overflow-y: auto;  
  min-height: 0;     
}

.widget-modal__button-bar {
  margin-top: 1rem; 
}

.preview-post-item {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 1px solid #ccc;

  padding-right: 2.5rem;
}

.preview-post-item__link {
  word-wrap: break-word;       
  overflow-wrap: break-word;   
  white-space: normal;         
}

.preview-post-item__remove {
  position: absolute;
  bottom: 5px;
  right: 5px;
  text-decoration: none; 
  color: inherit;        
}

  .account-item {
    transition: background-color 0.3s ease;
  }

  .account-item.selected {
    background-color: #e6ffe6; 
  }

  .round-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4CAF50; 
    position: relative;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  .round-check::after {
    content: '\2713'; 
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .social-network {
    color: #888; 
    font-size: 12px;
  }

  .final-widget-footer {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 8px 16px;
    background-color: #F8F8F8; 
    border-top: 1px solid #eee;
    border-radius: 0 0 16px 16px;
  }
  
  .final-widget-actions {
    display: flex;
    gap: 10px; 
    align-items: center;
  }
  
  .final-widget-like-link, .final-widget-comment-link {
    display: flex;
    align-items: center;
    color: #111827;
    text-decoration: none;
  }

  .final-widget-like-icon, .final-widget-comment-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    fill: #6B7280; 
  }
  
  .final-widget-like-count {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
  }
  
  .widget-card__footer-date {
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap; 
  }

.widget-modal__preview {
  text-align: center;
  margin: 2rem 0;
}

.widget-modal__widget-save {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.edit-page-section {
  background-color: var(--color-secondary-bg);
  width: 100%;
  min-height: calc(100vh - 98px - 98px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.edit-page-container {
  max-width: auto;
  width: 100%;
  padding: var(--pad-xl);
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.edit-page-widget-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: var(--pad-m);
}

.edit-page-exit-button {
  display: inline-block;
  margin-top: var(--pad-m);
}

.edit-page-note {
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
  line-height: 2;
  margin-bottom: 20px;
  text-align: center;
}

.final-widget-carousel {
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
}

.final-widget-carousel {
  width: calc(100% - 40px);
  margin: 0 auto; 
}

.splide__track {
  overflow: hidden;
}

.splide__list {
  display: flex;
  align-items: stretch; 
}

.rename-modal .modal-content {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.rename-modal .modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.rename-modal .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.rename-modal .form-control {
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.rename-modal .form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.rename-modal .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.rename-modal .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

.rename-modal .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.rename-modal .btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

.custom-list {
  list-style: none;
  padding-left: 20px;
}

.custom-list__item {
  position: relative;
  font-size: var(--text-fs-m);
  line-height: 1.5;
  color: var(--color-text-main);
  margin-bottom: var(--pad-xs);
  padding-left: 20px;
}

.custom-list__item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-2);
  font-size: 20px;
  line-height: 1.5;
}

.custom-list--numbered {
  list-style: none;
  counter-reset: custom-counter;
  padding-left: 20px;
}

.custom-list--numbered .custom-list__item {
  counter-increment: custom-counter;
}

.custom-list--numbered .custom-list__item::before {
  content: counter(custom-counter) ".";
  font-weight: 500;
  color: var(--color-text-main);
  font-size: var(--text-fs-m);
}

.custom-link {
  color: var(--button-color-main);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.custom-link:hover {
  opacity: 0.8;
}

.header__link {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  transition: font-weight 0.3s ease;
}

.header__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
}

.header__link:hover {
  font-weight: bold;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */