p{
  margin-bottom: 0px;
}
button{
    border: none;
}
input{
    border-radius: var(--border-radius) !important;
    border: none !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}
input::placeholder {
    color: var(--color-text-muted) !important;
}
input::-webkit-input-placeholder {
    color: var(--color-text-muted) !important;
}
input::-moz-placeholder {
    color: var(--color-text-muted) !important;
}
input:-ms-input-placeholder {
    color: var(--color-text-muted) !important;
}
input::-ms-input-placeholder {
    color: var(--color-text-muted) !important;
}
select{
    border-radius: var(--border-radius) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: none !important;
}
.form-check-input{
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.top-padding{
    padding-top: 6em !important;
}
@media (max-width: 576px) {
    .top-padding{
        padding-top: 6em !important;
        /* padding-top: 4.5em !important; */
    }
}

/* Контейнер редактора */
.note-editor {
    background-color: var(--color-panel);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* Панель инструментов */
.note-toolbar {
    background-color: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    padding: 6px !important;
}
/* Обычные dropdown меню (шрифты, размер) */
.note-toolbar .note-dropdown-menu {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.note-toolbar .note-dropdown-item {
    color: var(--color-text);
}

.note-toolbar .note-dropdown-item:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/* Цветовой picker */
.note-color-dropdown .note-color-palette .note-color-btn {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    margin: 2px;
}

.note-color-dropdown .note-color-palette .note-color-btn:hover {
    outline: 2px solid var(--color-accent);
}

/* Кнопки тулбара */
.note-btn-group .note-btn {
    background-color: transparent;
    color: var(--color-text) !important;
    border: none !important;
    /* border-radius: 8px !important; */
    transition: background-color 0.2s, color 0.2s !important;
}

.note-btn-group .note-btn:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/* Активная кнопка */
.note-btn-group .note-btn.active {
    background-color: var(--color-accent-light);
    color: #fff;
}

/* Само поле редактирования */
.note-editable {
    background-color: var(--color-panel-transparent);
    color: var(--color-text);
    min-height: 200px;
    padding: 1rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Ссылки и акценты внутри текста */
.note-editable a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Placeholder */
.note-placeholder {
    color: var(--color-text-muted);
}

/* Dropdown меню (например, выбор шрифта/цвета) */
.note-dropdown-menu {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.note-dropdown-item {
    color: var(--color-text);
}

.note-dropdown-item:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/* Прозрачный backdrop */
.modal-backdrop {
    background-color: rgba(0,0,0,0.4); /* можно чуть темнее */
}

/* Иконки и caret */
.note-editor .note-toolbar .note-btn i {
    margin-right: 0 !important;
}
.note-icon-caret {
    display: none;
}

.form-check-input{
    background-color: transparent !important;
    border-color: var(--color-text) !important;
}
.form-check-input:checked{
    background-color: var(--color-accent) !important;
    border-color: transparent !important;
}
.form-check-input:focus {
    border-color: var(--color-accent) !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--color-accent), 0.25);
}

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

.p-32{
    padding: 32px !important;
}
.gap-8{
    gap: 8px !important;
}

@media (min-width: 576px) {
    .w-sm-25  { width: 25% !important; }
    .w-sm-50  { width: 50% !important; }
    .w-sm-75  { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }

    .mxw-sm-300 { max-width: 300px !important; }
}

@media (min-width: 768px) {
  .w-md-25  { width: 25% !important; }
  .w-md-50  { width: 50% !important; }
  .w-md-75  { width: 75% !important; }
  .w-md-100 { width: 100% !important; }

  .mxw-md-300 { max-width: 300px !important; }

  .mf-md-50 {flex: 0 0 calc(50% - 0.75rem) !important;}
}

@media (min-width: 992px) {
  .w-lg-25  { width: 25% !important; }
  .w-lg-50  { width: 50% !important; }
  .w-lg-75  { width: 75% !important; }
  .w-lg-100 { width: 100% !important; }
}

@media (min-width: 1200px) {
  .w-xl-25  { width: 25% !important; }
  .w-xl-50  { width: 50% !important; }
  .w-xl-75  { width: 75% !important; }
  .w-xl-100 { width: 100% !important; }
}

.mt-m2 {
    margin-top: -.5rem !important;
}
.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar {
    display: none;
}
.navbar-toggler-icon {
    background-image: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center/contain no-repeat;
    background-color: var(--color-text);
}
.aspect-16x9{
    aspect-ratio: 16/9;
}
.aspect-9x16{
    aspect-ratio: 9/16;
}
.aspect-1x1{
    aspect-ratio: 1/1;
}
@media (min-width: 768px) {
    .aspect-md-16x9{
        aspect-ratio: 16/9;
    }
    .aspect-md-9x16{
        aspect-ratio: 9/16;
    }
}

@media (min-width: 992px) {
    .aspect-lg-16x9{
        aspect-ratio: 16/9;
    }
    .aspect-lg-9x16{
        aspect-ratio: 9/16;
    }
}

@media (min-width: 1200px) {
    .aspect-xl-16x9{
        aspect-ratio: 16/9;
    }
    .aspect-xl-9x16{
        aspect-ratio: 9/16;
    }
}