/*
Template Name: Maxton Admin
Author: codervent
Email: codervent@gmail.com
File: main.scss

Table of Index 

  --Genral
  --aligns
  --dropdown animation
  --header
  --mini sidebar
  --main content
  --page footer
  --Metis Menu
  --order offcanvas
  --utilities
  --alerts
  --authentication
  --switcher

*/
/* Genral*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
body {
  position: relative;
  font-size: 14px;
  font-family: "Noto Sans", sans-serif;
  letter-spacing: 0.5px;
  background-color: #eff1f3;
}

a {
  text-decoration: none;
}

/* aligns */
/* dropdown animation */
@keyframes animdropdown {
  from {
    transform: translate3d(0, 6px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/*header*/
.top-header .navbar {
  background-color: #ffffff;
  height: 70px;
  position: fixed;
  left: 260px;
  right: 0;
  top: 0;
  padding: 0 1.5rem;
  z-index: 10;
  transition: ease-out 0.3s;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.044), 0 2px 6px 0 rgba(0, 0, 0, 0.049);
}
.top-header .navbar .search-bar {
  width: auto;
  cursor: pointer;
}
.top-header .navbar .search-bar .search-control:focus, .top-header .navbar .search-bar .mobile-search-control:focus {
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}
.top-header .navbar .search-bar .search-close {
  display: none;
}
.top-header .navbar .search-bar .search-popup {
  display: none;
  position: absolute;
  width: auto;
  height: auto;
  top: 54px;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
}
.top-header .navbar .search-bar .search-popup .card {
  border: 1px solid #dee2e6;
  box-shadow: none;
  margin-bottom: 0;
}
.top-header .navbar .search-bar .search-popup .search-content {
  position: relative;
  height: 24.3rem;
}
.top-header .navbar .search-bar .search-popup .search-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: #939aa0;
  margin-bottom: 1rem;
}
.top-header .navbar .search-bar .search-popup .kewords {
  font-size: 12.5px;
  font-weight: 500;
  color: #606060;
  padding: 0.4rem 0.7rem;
  background-color: #f3f3f3;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  gap: 0.5rem;
}
.top-header .navbar .search-bar .search-popup .kewords:hover {
  color: #efefef;
  background-color: #28292d;
}
.top-header .navbar .search-bar .search-popup .search-list-item {
  padding: 0.4rem 0.7rem;
  border-radius: 0.25rem;
  transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.top-header .navbar .search-bar .search-popup .search-list-item:hover {
  color: #3a3a3a;
  background-color: #f8f8f8;
}
.top-header .navbar .search-bar .search-popup .search-list-item .list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #edecec;
}
.top-header .navbar .search-bar .search-popup .search-list-item .search-list-title {
  font-size: 14px;
}
.top-header .navbar .nav-item {
  height: 70px;
  display: flex;
  align-items: center;
}
.top-header .navbar .nav-item .mega-menu {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #ffffff;
  border-radius: 0%;
}
.top-header .navbar .nav-item .mega-menu::after {
  display: none;
}
.top-header .navbar .nav-item .mega-menu .mega-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #f8f8f8;
}
.top-header .navbar .nav-item .mega-menu .card {
  cursor: pointer;
  transition: 0.2s all;
}
.top-header .navbar .nav-item .mega-menu .card:hover {
  background-color: #f8f8f8;
}
.top-header .navbar .nav-item .dropdown-notify {
  width: 360px;
  border-radius: 1rem;
}
.top-header .navbar .nav-item .dropdown-notify .option {
  font-size: 1rem;
  color: #494949;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-header .navbar .nav-item .dropdown-notify .option:hover {
  background-color: #efefef;
}
.top-header .navbar .nav-item .dropdown-notify .notiy-title {
  font-size: 1rem;
}
.top-header .navbar .nav-item .dropdown-notify .dropdown-option {
  font-size: 14px;
}
.top-header .navbar .nav-item .dropdown-notify .notify-title {
  color: rgba(var(--bs-dark-rgb));
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.top-header .navbar .nav-item .dropdown-notify .notify-desc {
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
  font-size: 13px;
  font-weight: 400;
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-header .navbar .nav-item .dropdown-notify .notify-time {
  color: #939aa0;
  font-size: 12px;
  margin-top: 0.2rem;
}
.top-header .navbar .nav-item .dropdown-notify .user-wrapper, .top-header .navbar .nav-item .dropdown-notify .notify-close {
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 500;
  background-color: #efefef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.top-header .navbar .nav-item .dropdown-notify .notify-close {
  width: 20px;
  height: 20px;
  background-color: #efefef;
  visibility: hidden;
}
.top-header .navbar .nav-item .dropdown-notify .notify-list {
  position: relative;
  height: 390px;
}
.top-header .navbar .nav-item .dropdown-notify .dropdown-item:hover .notify-close {
  visibility: visible;
}
.top-header .navbar .nav-item .dropdown-user {
  width: 260px;
  border-radius: 1rem;
}
.top-header .navbar .nav-item .badge-notify {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 12px;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f01414;
}
.top-header .navbar .dropdown-menu {
  animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
}
.top-header .btn-toggle a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
}
.top-header .btn-toggle a:hover, .top-header .btn-toggle a:focus {
  background-color: #efefef;
}
.top-header .nav-right-links .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
}
.top-header .nav-right-links .nav-link:hover, .top-header .nav-right-links .nav-link:focus {
  background-color: #efefef;
}


/* sidebar wrapper */
.sidebar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background-color: #ffffff;
  border-right: 1px solid var(--bs-border-color);
  z-index: 12;
  transition: ease-out 0.3s;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.044), 0 2px 6px 0 rgba(0, 0, 0, 0.049);
  /* Metis Menu */
}
.sidebar-wrapper .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 260px;
  height: 70px;
  padding: 0 1rem;
  gap: 0.5rem;
  z-index: 1;
  position: fixed;
  top: 0;
  background-color: #fff;
  transition: ease-out 0.3s;
  border-right: 1px solid var(--bs-border-color);
}
.sidebar-wrapper .sidebar-header .logo-img {
  width: 45px;
}
.sidebar-wrapper .sidebar-header .logo-name h5 {
  font-size: 24px;
  text-transform: capitalize;
  font-weight: 600;
}
.sidebar-wrapper .sidebar-header .sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
  display: none;
  cursor: pointer;
}
.sidebar-wrapper .sidebar-header .sidebar-close:hover, .sidebar-wrapper .sidebar-header .sidebar-close:focus {
  background-color: #efefef;
}
.sidebar-wrapper .sidebar-nav {
  margin-top: 70px;
  height: 100%;
  background-color: #ffffff;
}
.sidebar-wrapper .sidebar-nav ul {
  padding: 10px;
  margin: 0;
  list-style: none;
  background: 0 0;
}
.sidebar-wrapper .sidebar-nav .metismenu {
  background: 0 0;
  display: flex;
  flex-direction: column;
}
.sidebar-wrapper .sidebar-nav .metismenu li + li {
  margin-top: 5px;
}
.sidebar-wrapper .sidebar-nav .metismenu li:first-child {
  margin-top: 5px;
}
.sidebar-wrapper .sidebar-nav .metismenu li:last-child {
  margin-bottom: 5px;
}
.sidebar-wrapper .sidebar-nav .metismenu > li {
  display: flex;
  flex-direction: column;
  position: relative;
}
.sidebar-wrapper .sidebar-nav .metismenu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 6px 16px;
  font-size: 15px;
  color: #5f5f5f;
  outline-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.5px;
  border-radius: 0.25rem;
  transition: all 0.3s ease-out;
}
.sidebar-wrapper .sidebar-nav .metismenu a .parent-icon {
  line-height: 1;
}
.sidebar-wrapper .sidebar-nav .metismenu a .menu-title {
  margin-left: 10px;
}
.sidebar-wrapper .sidebar-nav .metismenu a:active {
  color: #008cff;
  text-decoration: none;
  background-color: rgba(0, 140, 255, 0.05);
}
.sidebar-wrapper .sidebar-nav .metismenu a:focus {
  color: #008cff;
  text-decoration: none;
  background-color: rgba(0, 140, 255, 0.05);
}
.sidebar-wrapper .sidebar-nav .metismenu a:hover {
  color: #008cff;
  text-decoration: none;
  background-color: rgba(0, 140, 255, 0.05);
}
.sidebar-wrapper .sidebar-nav .metismenu ul {
  background-color: #fff;
  padding: 0;
}
.sidebar-wrapper .sidebar-nav .metismenu ul a {
  padding: 6px 15px 6px 20px;
  font-size: 15px;
  border: 0;
}
.sidebar-wrapper .sidebar-nav .metismenu ul a i {
  margin-right: 5px;
}
.sidebar-wrapper .sidebar-nav .metismenu ul ul a {
  padding: 8px 15px 8px 30px;
}
.sidebar-wrapper .sidebar-nav .metismenu ul ul ul a {
  padding: 8px 15px 8px 45px;
}
.sidebar-wrapper .sidebar-nav .metismenu .mm-active > a {
  color: #008cff;
  text-decoration: none;
  background-color: rgba(0, 140, 255, 0.05);
}
.sidebar-wrapper .menu-label {
  padding: 10px 16px 10px 16px;
  color: #b0afaf;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.toggled .top-header .navbar {
  left: 70px;
}
.toggled .main-wrapper {
  margin-left: 70px;
}
.toggled .page-footer {
  left: 70px;
}

@media screen and (min-width: 1199px) {
  body.toggled .sidebar-wrapper:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  body.toggled .sidebar-wrapper:hover .sidebar-header .sidebar-close {
    display: flex;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper {
    width: 70px;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
    width: 70px;
    justify-content: center;
    width: 70px;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-name {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
    justify-content: center;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-bottom {
    width: 70px;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-bottom .dropdown-laungauge {
    display: none;
  }
  body.toggled:not(.sidebar-hovered) .sidebar-bottom .dropdown-help {
    display: none;
  }
}
.chip {
  display: inline-block;
  height: 32px;
  padding: 0 12px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  background-color: #f1f1f1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  transition: all 0.3s linear;
  box-shadow: none;
}
.chip img {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 8px 0 -12px;
  border-radius: 50%;
}

.chip.chip-md {
  height: 42px;
  line-height: 42px;
  border-radius: 21px;
}
.chip.chip-md img {
  height: 42px;
  width: 42px;
}

/* main content */
.main-wrapper {
  margin-top: 70px;
  padding-bottom: 32px;
  margin-left: 260px;
  transition: ease-out 0.3s;
}
.main-wrapper .main-content {
  padding: 1.5rem;
}
.main-wrapper .main-content .page-breadcrumb .breadcrumb li.breadcrumb-item {
  font-size: 16px;
}
.main-wrapper .main-content .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  font-family: "Material Icons Outlined";
  content: "\e88a";
}
.main-wrapper .main-content .page-breadcrumb .breadcrumb .breadcrumb-item:first-child {
  display: none;
}
.main-wrapper .main-content .badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #f2f2f3;
  cursor: pointer;
}
.main-wrapper .main-content .badge-icon .badge-number {
  width: 20px;
  height: 20px;
  background-color: #ff1717;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  padding: 1px;
}
.main-wrapper .main-content .sharelink {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
}
.main-wrapper .main-content .sharelink:hover, .main-wrapper .main-content .sharelink:focus {
  background-color: #efefef;
}
.main-wrapper .main-content .options {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
  width: 30px;
  height: 30px;
}
.main-wrapper .main-content .options:hover, .main-wrapper .main-content .options:focus {
  background-color: #efefef;
}
.main-wrapper .main-content .dropdown-menu-share {
  width: -moz-max-content;
  width: max-content;
}
.main-wrapper .main-content .vertical-pills button {
  width: 100%;
  text-align: left;
  border-radius: 0%;
}
.main-wrapper .main-content .vertical-pills .nav-link {
  border-bottom: 1px solid #dee2e6;
  color: #5d5d5d;
}
.main-wrapper .main-content .vertical-pills .nav-link:last-child {
  border-bottom: 0px solid #dee2e6;
}
.main-wrapper .main-content .vertical-pills .nav-link.active {
  color: #ffffff;
}
.main-wrapper .main-content .customer-notes {
  height: 480px;
  position: relative;
  overflow-y: scroll;
}
.main-wrapper .main-content .lable-table {
  text-transform: uppercase;
  padding: 1px 8px;
}
.main-wrapper .main-content .customer-table table thead {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 400;
}
.main-wrapper .main-content .customer-table table .customer-name {
  color: #000000;
}
.main-wrapper .main-content .product-table table thead {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 400;
}
.main-wrapper .main-content .product-table table .product-category {
  font-size: 0.8rem;
  color: #878d96;
}
.main-wrapper .main-content .product-table table .product-title {
  font-size: 0.97rem;
  color: #2f353c;
}
.main-wrapper .main-content .product-table table .product-tags {
  max-width: 220px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.main-wrapper .main-content .product-table table .product-tags .btn-tags {
  font-size: 0.75rem;
  background-color: #f6f6f6;
  color: #000000;
  padding: 2px 10px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
}
.main-wrapper .main-content .product-table table .product-rating {
  font-size: 0.8rem;
  background-color: #ffffff;
  padding: 2px 5px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  font-weight: 500;
}

.separator {
  display: flex;
  align-items: center;
}
.separator .line {
  height: 1px;
  flex: 1;
  background-color: #dee2e6;
}
.separator p {
  padding: 0 1rem;
}

.review-desc {
  width: 400px;
}

.auth-cover-left, .auth-cover-right {
  display: flex;
  background-color: #ffffff;
  min-height: 100vh;
}

.auth-cover-right {
  background-color: #ffffff;
}

.auth-social-login {
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: start;
}

.order-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
}
.order-delete:hover, .order-delete:focus {
  background-color: #efefef;
}

/*page footer*/
.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem 1.5rem;
  position: absolute;
  left: 260px;
  right: 0;
  bottom: 0;
  transition: ease-out 0.3s;
}

.user-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
  position: absolute;
  right: -50px;
  top: 16px;
  background-color: #050505;
}

/* order offcanvas */
.order-title {
  font-size: 15px;
}

/* utilities */
.primaery-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #494949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s;
}
.primaery-menu-close:hover, .primaery-menu-close:focus {
  background-color: #efefef;
}

.dropdown-toggle-nocaret:after {
  display: none;
}

.dropup .dropdown-toggle-nocaret:after {
  display: none;
}

.w-260 {
  width: 300px !important;
}

.h-70 {
  height: 70px !important;
}

.h-370 {
  height: 370px;
}

.f-14 {
  font-size: 14px;
}

.raised {
  box-shadow: var(--mdc-protected-button-container-elevation, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));
}

.wh-42 {
  width: 42px;
  height: 42px;
}

.wh-48 {
  width: 48px;
  height: 48px;
}

.wh-64 {
  width: 64px;
  height: 64px;
}

.wh-120 {
  width: 120px;
  height: 120px;
}

.font-22 {
  font-size: 45px;
}

.font-text1 {
  font-size: 0.8rem;
}

.font-text2 {
  font-size: 0.7rem;
}

.piechart-legend {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cursor-pointer {
  cursor: pointer;
}

.theme-icons {
  background-color: #fff;
}

.user-list {
  position: relative;
  height: 400px;
}

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

.error {
  color: #fe1010;
}

.dash-lable {
  font-size: 14px;
  padding: 2px 7px;
  background-color: #f3f3f3;
  width: -moz-max-content;
  width: max-content;
}

form select.error,
form textarea.error,
form input.error,
form input.error:focus,
form textarea.error:focus,
form select.error:focus {
  border-color: #fe1010 !important;
}

/* alerts */
.alert-border-primary {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #008cff;
}

.alert-border-secondary {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #6c757d;
}

.alert-border-success {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #02c27a;
}

.alert-border-danger {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #fc185a;
}

.alert-border-warning {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #fbb513;
}

.alert-border-info {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #0dcaf0;
}

.alert-border-dark {
  border: 1px solid var(--bs-gray-400);
  border-left: 5px solid #212529;
}

.bg-error {
  background-image: url("../assets/images/auth/error-bg.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.error-title {
  font-size: 140px;
  line-height: 140px;
  text-transform: uppercase;
  font-weight: bold;
}

.error-sub-title {
  font-size: 30px;
  line-height: 30px;
  text-transform: uppercase;
}

.contacts-social a {
  font-size: 16px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: #fff;
  border: 1px solid #eeecec;
  text-align: center;
  border-radius: 50%;
  color: #2b2a2a;
}

.chart-container1 {
  position: relative;
  height: 350px;
}

.chart-container2 {
  position: relative;
  height: 138px;
}

.gmaps,
.gmaps-panaroma {
  height: 400px;
  background: #eee;
  border-radius: 3px;
}

/* authentication */
.border-gradient-1 {
  -o-border-image: linear-gradient(to right, #7928ca, #ff0080, #04e09a, #e0d504) 1;
     border-image: linear-gradient(to right, #7928ca, #ff0080, #04e09a, #e0d504) 1;
}

.auth-basic-wrapper {
  width: auto;
  height: auto;
}
@media (min-width: 1024px) {
  .auth-basic-wrapper {
    height: 100vh;
  }
}

.bg-login, .bg-reset-password, .bg-forgot-password, .bg-register {
  background-image: url(../assets/images/auth/bg-login.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-register {
  background-image: url(../assets/images/auth/bg-register.png);
}

.bg-forgot-password {
  background-image: url(../assets/images/auth/bg-forgot.png);
}

.bg-reset-password {
  background-image: url(../assets/images/auth/bg-reset-password.png);
}

/* email box */
.email-wrapper {
  width: auto;
  height: 600px;
  overflow: hidden;
  border-radius: 0.25rem;
  position: relative;
  background: #fff;
  box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
}

.email-sidebar {
  width: 250px;
  height: 100%;
  position: absolute;
  background: #fff;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.email-sidebar-header {
  width: auto;
  height: auto;
  position: relative;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-right: 0 solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 0.25rem;
  padding: 15px;
}

.email-navigation {
  position: relative;
  padding: 0;
  height: 345px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.email-navigation a.list-group-item {
  color: #404142;
  padding: 0.35rem 1.25rem;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  transition: all 0.3s ease-out;
}
.email-navigation a.list-group-item:hover {
  background-color: rgba(13, 110, 253, 0.12);
}
.email-navigation a.list-group-item.active {
  color: #0b5ed7;
  font-weight: 600;
  background-color: rgba(13, 110, 253, 0.12);
}

.email-header {
  position: absolute;
  height: 70px;
  left: 250px;
  right: 0;
  top: 0;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top-right-radius: 0.25rem;
  z-index: 1;
}

.email-content {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  top: 70px;
  height: auto;
  margin-left: 250px;
  padding: 0;
  background: #fff;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.email-meeting {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.email-meeting a.list-group-item {
  color: #404142;
  padding: 0.35rem 1.25rem;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.email-meeting a.list-group-item:hover {
  background-color: rgba(0, 123, 255, 0.15);
  transition: all 0.3s ease-out;
}

.email-hangout .chat-user-online:before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 45px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  background: #16e15e;
}

.email-toggle-btn {
  width: auto;
  height: auto;
  margin-right: 10px;
  text-align: center;
  font-size: 24px;
  color: #404142;
  border-radius: 0;
  cursor: pointer;
  background-color: #fff;
  border: 0 solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 1280px) {
  .email-toggle-btn {
    display: none;
  }
}

.email-actions {
  width: 230px;
}

.email-time {
  font-size: 13px;
  color: #6c757d;
}

.email-list {
  position: relative;
  height: 530px;
}
.email-list div.email-message {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #383a3c;
}
.email-list div.email-message:hover {
  transition: all 0.2s ease-out;
  background-color: #eceef1;
}

.email-star {
  color: #6c757d;
}

.email-read-box {
  position: relative;
  height: 530px;
}

.compose-mail-popup {
  width: 42%;
  position: fixed;
  bottom: -30px;
  right: 30px;
  z-index: 15;
  display: none;
}

.compose-mail-toggled {
  display: block;
}

.compose-mail-title {
  font-size: 16px;
}

.compose-mail-close {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0);
}
.compose-mail-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* chat box */
/* Чат занимает ровно окно, поэтому документу прокручиваться нечем. Без этого
   любое переполнение (min-height на низком экране, округление) уводит весь чат
   под фиксированную верхнюю панель — прокручивается страница, а не лента.
   Класс стоит только на chat.html. */
body.chat-page {
  overflow: hidden;
}

/* Поверхности панели чата — по макету Techmin. Панель это карточка во всю
   рабочую область, поэтому фон и рамка берутся прямо из content-techmin.css
   (--ct-card-*, объявлены там на :root и на [data-bs-theme=dark]) — второго
   источника правды для цвета карточки заводить незачем. Остальное — значения,
   которые макет определяет, но наружу токенами не отдаёт: нейтральная
   поверхность ховера (она же фон композера), текст, приглушённый текст, акцент
   и зелёный статуса.

   Раньше здесь стояли --bs-body-bg / --bs-border-color от Maxton: в тёмной теме
   это #212529 и #495057, то есть панель чата была единственной поверхностью
   в CRM, не совпадающей с карточками (#0a0a0a). Тёмная тема продублирована
   в dark-theme.css селекторами (0,2,2) — она читает ровно эти же токены,
   поэтому цвета правятся здесь и только здесь. */
:root {
  --ch-surface: var(--ct-card-bg, #fff);
  --ch-border: var(--ct-card-border, rgba(0, 0, 0, 0.2));
  --ch-neutral: #f2f2f2;
  --ch-text: #000;
  --ch-muted: rgba(0, 0, 0, 0.75);
  --ch-accent: #007aff;
  --ch-on-accent: #fff;
  --ch-online: #47ad77;
}

[data-bs-theme=dark] {
  --ch-neutral: #171717;
  --ch-text: #f1f1f1;
  --ch-muted: #d4d4d4;
}

.chat-wrapper {
  width: auto;
  /* --hd-height (76px, header-techmin.css) — реальный отступ .main-wrapper;
     main.css:551 с его 70px перебит именно им. --ct-* — поля .main-content. */
  height: calc(100vh - var(--hd-height, 76px) - var(--ct-gutter, 24px) - var(--ct-gutter-bottom, 36px));
  /* min-height здесь был 520px и на ноутбучном окне давал прокрутку документа.
     Внутренности — flex, они ужимаются сами. */
  /* Углы прямые, тени нет, рамка 1px — ровно как у .card в content-techmin.css. */
  border-radius: 0;
  position: relative;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  box-shadow: none;
}

.chat-sidebar {
  width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  background: var(--ch-surface);
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  border-right: 1px solid var(--ch-border);
  border-radius: 0;
}

.chat-sidebar-header {
  width: auto;
  height: auto;
  position: relative;
  background: var(--ch-surface);
  border-bottom: 1px solid var(--ch-border);
  border-right: 0;
  border-radius: 0;
  padding: 15px;
}
.chat-sidebar-header .chat-user-online:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 40px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ch-surface);
  background: var(--ch-online);
}

.chat-sidebar-content {
  padding: 0;
  /* min-height:0 обязателен: flex-потомок по умолчанию min-height:auto и не
     сжимается ниже контента — список выдавил бы сайдбар, а скролла бы не было. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.chat-user-online {
  position: relative;
}

.chat-list {
  position: relative;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.chat-list .chat-user-online:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 36px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ch-surface);
  background: var(--ch-online);
}
.chat-list .list-group-item {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: transparent;
}
.chat-list .list-group-item:hover {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: var(--ch-neutral);
}
/* Выбранный контакт — сплошной акцент с белым текстом: так макет рисует
   .list-group-item.active, и lists-techmin.css того же и хочет. Ховер при этом
   обязан остаться нейтральным, иначе выбранная и наведённая строки сравняются.
   Подписи и время внутри строки несут собственный цвет, поэтому перекрываются
   поимённо — (0,4,0) против (0,2,1) у dark-theme.css, специфичности хватает. */
.chat-list .list-group-item.active {
  background-color: var(--ch-accent);
  color: var(--ch-on-accent);
}
.chat-list .list-group-item.active .chat-title,
.chat-list .list-group-item.active .chat-msg,
.chat-list .list-group-item.active .chat-time {
  color: var(--ch-on-accent);
}
/* Аватар и бейдж на акценте инвертируются: цветной кружок и синий бейдж на синей
   строке сливаются с ней. */
.chat-list .list-group-item.active .chat-avatar {
  background-color: var(--ch-on-accent);
  color: var(--ch-accent);
}
.chat-list .list-group-item.active .chat-unread {
  background-color: var(--ch-on-accent);
  color: var(--ch-accent);
}

/* Правая колонка — шапка, лента и композер одной flex-колонкой.
   Раньше все три были absolute, а лента резервировала под них место двумя
   числами: margin-top 70px и height: calc(100% - 140px). С реальной высотой
   шапки они не совпадали — имя (h4 24px) плюс строка статуса выше 70px, и
   шапка наезжала на первые сообщения. Во flex-колонке лента берёт ровно
   остаток, какой бы ни выросла шапка, и наехать друг на друга им нечем. */
.chat-main {
  margin-left: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-content {
  flex: 1 1 auto;
  /* min-height:0 — та же причина, что у .chat-sidebar-content: без него flex-потомок
     не сжимается ниже контента, лента выдавила бы композер за пределы обёртки. */
  min-height: 0;
  padding: 15px;
  position: relative;
  width: auto;
  overflow-y: auto;
}

.chat-header {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 15px;
  background: var(--ch-surface);
  border-bottom: 1px solid var(--ch-border);
  border-radius: 0;
}

.chat-footer {
  /* relative, а не static: .chat-attach-bar висит абсолютом от его верхней кромки. */
  position: relative;
  flex: 0 0 auto;
  min-height: 70px;
  padding: 15px;
  /* Нейтральная поверхность, та же, что у ховера строки: композер отделяется
     от ленты заливкой, а не второй рамкой. */
  background: var(--ch-neutral);
  border-top: 1px solid var(--ch-border);
  border-radius: 0;
}

.chat-footer-menu {
  display: none;
}
.chat-footer-menu a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #6c757d;
  text-align: center;
  border-radius: 50%;
  margin: 3px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 1280px) {
  .chat-footer-menu {
    display: block;
  }
}

.chat-tab-menu li a.nav-link {
  padding: 0.3rem 0.2rem;
  line-height: 1.2;
  color: #4a4b4c;
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show > .nav-link {
  color: #008cff;
  background-color: rgba(0, 123, 255, 0);
}

.chat-title {
  font-size: 14px;
  color: var(--ch-text);
}

.chat-msg {
  font-size: 13px;
  color: var(--ch-muted);
}

.chat-time {
  font-size: 13px;
  color: var(--ch-muted);
}

.chart-online {
  color: #16e15e;
}

.chat-top-header-menu {
  display: none;
}
.chat-top-header-menu a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #6c757d;
  text-align: center;
  border-radius: 50%;
  margin: 3px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 1280px) {
  .chat-top-header-menu {
    display: block;
  }
}

/* Пузыри сообщений по палитре макета Techmin, а не по градиентам Maxton
   (в blue-theme.css они были #7928ca→#ff0080 и #00c6fb→#005bea). Чата в макете
   нет, поэтому взяты ближайшие по смыслу элементы: своё сообщение — заливка
   выбранной строки списка (#007aff с белым текстом, одинаково в обеих темах,
   как .list-group-item.active и активная ячейка пагинации), чужое — нейтральная
   поверхность ховера (#f2f2f2 / #171717) в рамке карточки. Углы прямые: во всей
   системе (кнопки, поля, карточки, вкладки, пагинация) скруглений нет.
   Тёмная тема — dark-theme.css, там продублирована геометрия, а не только цвет. */
.chat-content-leftside .chat-left-msg {
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--ch-neutral);
  border: 1px solid var(--ch-border);
  padding: 0.8rem;
  border-radius: 0;
  max-width: 480px;
  text-align: left;
  color: var(--ch-text);
}

.chat-content-rightside .chat-right-msg {
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--ch-accent);
  border: 1px solid var(--ch-accent);
  padding: 0.8rem;
  border-radius: 0;
  float: right;
  max-width: 480px;
  text-align: left;
  color: var(--ch-on-accent);
}

.chat-toggle-btn {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  text-align: center;
  font-size: 24px;
  color: var(--ch-text);
  border-radius: 0;
  cursor: pointer;
  background-color: var(--ch-surface);
  border: 1px solid var(--ch-border);
}
@media (min-width: 1280px) {
  .chat-toggle-btn {
    display: none;
  }
}

/* file manager */
.fm-menu .list-group a {
  font-size: 16px;
  color: #5f5f5f;
  display: flex;
  align-items: center;
}
.fm-menu .list-group a i {
  font-size: 23px;
}
.fm-menu .list-group a:hover {
  background: #008cff;
  color: #fff;
  transition: all 0.2s ease-out;
}

.fm-file-box {
  font-size: 25px;
  background: #e9ecef;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.fm-icon-box {
  font-size: 32px;
  background: #fff;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.user-plus {
  width: 33px;
  height: 33px;
  margin-left: -14px;
  line-height: 33px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
  border: 1px dotted #a9b2bb;
  color: #404142;
}

.user-groups img {
  margin-left: -14px;
  border: 1px solid #e4e4e4;
  padding: 2px;
  cursor: pointer;
}

/* switcher */
.form-check-img {
  max-width: 100%;
  height: auto;
}

.form-check-label-highlighter .form-check-input:checked[type=checkbox] ~ .form-check-label,
.form-check-label-highlighter .form-check-input:checked[type=radio] ~ .form-check-label {
  border-color: #377dff;
}

.welcome-back-img {
  position: relative;
}
@media (min-width: 1280px) {
  .welcome-back-img {
    position: absolute;
    bottom: 0;
    right: 2rem;
  }
}

/* Sidebar logo link */
.sidebar-logo-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
}

/* ==========================================================================
   Chat / file manager / list + table defaults.
   Moved here from sass/blue-theme.css, where they were never scoped to a
   theme and therefore applied on every page. The blue-theme stylesheet was
   dropped when the app was reduced to the light and dark themes.
   ========================================================================== */

.chat-header {
  background-color: var(--ch-surface);
  border-bottom: 1px solid var(--ch-border);
}

.chat-footer {
  background-color: var(--ch-neutral);
  border-top: 1px solid var(--ch-border);
}

/* Ниже — мёртвые селекторы Maxton: .chat-footer-menu, .chat-top-header-menu,
   .chat-tab-menu и .chart-online не встречаются ни на одной странице (в chat.html
   .chat-footer-menu упомянут только в комментарии, объясняющем, почему скрепка
   стоит в .input-group). Поэтому они намеренно оставлены на старых --bs-*: на
   палитру макета переведено то, что действительно рисуется. Появится разметка —
   переводить вместе с ней. */
.chat-footer-menu a {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
}

.chat-tab-menu li a.nav-link {
  color: var(--bs-body-color);
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show > .nav-link {
  color: #008cff;
  background-color: rgba(0, 123, 255, 0);
}

.chat-title {
  color: var(--ch-text);
}

.chat-msg {
  color: var(--ch-muted);
}

.chat-time {
  color: var(--ch-muted);
}

.chart-online {
  color: #16e15e;
}

.chat-top-header-menu a {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg-2);
  border: 1px solid var(--bs-border-color-translucent);
}

.chat-toggle-btn {
  color: var(--ch-text);
  background-color: var(--ch-surface);
  border: 1px solid var(--ch-border);
}

/* file manager */
.fm-menu .list-group a {
  color: var(--bs-body-color);
}
.fm-menu .list-group a i {
  font-size: 23px;
}
.fm-menu .list-group a:hover {
  background: #008cff;
}

.fm-file-box {
  background-color: var(--bs-body-bg-2);
}

.fm-icon-box {
  background-color: var(--bs-body-bg-2);
}

.user-plus {
  background-color: var(--bs-body-bg-2);
  border: 1px dotted var(--bs-border-color-translucent);
  color: var(--bs-body-color);
}

.user-groups img {
  border: 1px solid var(--bs-border-color-translucent);
}

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-table-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
  border-color: var(--bs-table-border-color);
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-card-bg) ;
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  border-radius: var(--bs-list-group-border-radius);
}

.card-lable {
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
  width: -moz-max-content;
  width: max-content;
}

/*# sourceMappingURL=main.css.map */

/* Chat page additions: avatar placeholders, connection state, message states.
   The CRM has no avatar images (users.avatar does not exist) and the stock
   Maxton faces are not real people, so contacts are drawn as initials on a
   per-user tint. Colours come from Bootstrap tokens so both themes follow. */
.chat-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  background-color: hsl(var(--chat-avatar-hue, 210) 45% 45%);
  user-select: none;
}

.chat-unread {
  background-color: var(--ch-accent);
  color: var(--ch-on-accent);
}

/* A portrait instead of initials (users' avatars, see window.crmUsers in main.js).
   The tint stays behind as a placeholder while the picture loads. */
.chat-avatar > img,
.chat-ring-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.chat-avatar-lg {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 16px;
}

/* The green dot lives on .chat-user-online and is unconditional, so the class is
   toggled per contact rather than baked into the markup. */
.chat-user-state {
  position: relative;
  display: inline-flex;
}

.chat-conn {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--ch-neutral);
  color: var(--ch-text);
}

.chat-conn.is-offline {
  background-color: #d03f3f;
  color: #fff;
}

.chat-conn.is-connecting {
  background-color: #edc755;
  color: #0a0a0a;
}

/* In flight: shown immediately, confirmed once the server answers. */
.chat-content-leftside .is-pending,
.chat-content-rightside .is-pending,
.is-pending .chat-right-msg,
.is-pending .chat-left-msg {
  opacity: .55;
}

.is-failed .chat-right-msg,
.is-failed .chat-left-msg {
  outline: 1px solid #d03f3f;
}

.chat-deleted {
  opacity: .7;
}

.min-w-0 {
  min-width: 0;
}

.chat-title,
.chat-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Поля чата не подсвечиваются синим на фокусе — ни композер, ни поиск по контактам.
   forms-techmin.css даёт полю border-color:#007aff плюс кольцо rgba(0,122,255,.25);
   композер занимает всю ширину подвала и находится в фокусе почти всё время, так
   что это читается как постоянная синяя рамка вокруг нижней части страницы.
   Селектор (0,2,1) бьёт `.form-control:focus` (0,1,1) по специфичности, а не по
   порядку: forms-techmin.css подключается ПОСЛЕ main.css. Рамка остаётся своего
   обычного цвета — --fc-border объявлена в forms-techmin.css на :root и
   [data-bs-theme=dark], поэтому обе темы берут её сами и dark-theme.css не нужен. */
.chat-wrapper .form-control:focus {
  border-color: var(--fc-border, rgba(0, 0, 0, 0.2));
  box-shadow: none;
}

/* Chat attachments. Colours come from Bootstrap tokens so both themes follow without
   touching dark-theme.css; the bubbles set their own text colour, so anything placed
   next to them has to set its own colour explicitly too. */
.chat-attach-bar {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;
  overflow-y: auto;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  background-color: var(--ch-surface);
  color: var(--ch-text);
  z-index: 3;
}

.chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 4px 8px;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.4;
}

.chat-attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attach-chip-size {
  opacity: .7;
  white-space: nowrap;
}

.chat-attach-chip-remove {
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

/* clear:both is load-bearing: the bubbles float, so without it the tiles would sit
   beside the bubble instead of under it, and the row would collapse. */
.chat-attachments {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 480px;
  padding-top: 6px;
}

.chat-content-leftside .d-flex > .flex-grow-1,
.chat-content-rightside .d-flex > .flex-grow-1 {
  /* Contains the floated bubble so the message box keeps its height. */
  display: flow-root;
}

.chat-thumb-wrap {
  position: relative;
  cursor: zoom-in;
  line-height: 0;
}

/* A fixed box is what replaces storing image dimensions: the tile never changes size
   as the thumbnail arrives, so the feed does not jump. */
.chat-thumb {
  width: 120px;
  height: 120px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0;
  background-color: var(--ch-neutral);
  display: block;
}

.chat-thumb-failed {
  width: 120px;
  height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ch-border);
  border-radius: 0;
  font-size: 12px;
  color: var(--ch-text);
  cursor: default;
}

.chat-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  background-color: var(--ch-surface);
  color: var(--ch-text);
}

.chat-file-icon {
  font-size: 20px;
  flex: 0 0 auto;
}

.chat-file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-file-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file-size {
  font-size: 11px;
  opacity: .7;
}

.chat-file-download {
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.chat-drop-target {
  outline: 2px dashed var(--ch-accent);
  outline-offset: -8px;
}

/* ── Звонки ──────────────────────────────────────────────────────────────────
   Панель звонка — обычный flex-ребёнок .chat-main между шапкой и лентой, а не
   абсолютный оверлей: колонка только что переведена на flex без magic-чисел, и
   позиционирование поверх неё вернуло бы ровно ту болезнь, от которой её лечили.

   Поверхность намеренно тёмная в обеих темах — так выглядит любой видеомессенджер,
   и именно поэтому dark-theme.css трогать не нужно: ни одного токена темы здесь
   не читается, а значит селектору (0,2,2) оттуда нечего перебивать. */
.chat-call-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #121417;
  color: #f1f1f1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0;
}

/* Видеозвонок занимает место ленты (её скрывает d-none из скрипта), аудиозвонок
   остаётся полосой, и переписываться во время разговора можно. */
.chat-call-panel.is-video {
  flex: 1 1 auto;
}

.chat-call-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  background: #000;
}

.chat-call-panel.is-video .chat-call-stage {
  display: block;
}

.chat-call-remote {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Своё изображение — картинкой в картинке. object-fit: cover, потому что кадр
   собеседника важнее полноты своего. */
.chat-call-local {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #000;
}

/* «Микрофон выключен» у собеседника. Без этой подписи выключенный микрофон
   неотличим от сломавшегося соединения: SDP при track.enabled не меняется, и
   никакого другого сигнала у второй стороны нет. */
.chat-call-peerstate {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

.chat-call-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
}

.chat-call-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-call-name {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-call-status {
  font-size: 12px;
  opacity: .7;
  /* Таймер — моноширинным, иначе строка дёргается на каждой секунде. */
  font-variant-numeric: tabular-nums;
}

.chat-call-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.chat-call-btn {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #f1f1f1;
  background: rgba(255, 255, 255, 0.14);
}

.chat-call-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.chat-call-btn.is-off {
  background: #525252;
  color: #d4d4d4;
}

.chat-call-btn.is-hangup {
  background: #d03f3f;
  color: #fff;
}

.chat-call-btn.is-hangup:hover {
  background: #bb3939;
}

.chat-call-btn.is-answer {
  background: #47ad77;
  color: #fff;
}

.chat-call-btn.is-answer:hover {
  background: #409c6b;
}

/* Модалка входящего звонка. */
.chat-ring-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background-color: hsl(var(--chat-avatar-hue, 210) 45% 45%);
}

/* Запись о звонке в ленте: не пузырь одной из сторон, а заметка про обеих,
   поэтому по центру и без аватара. */
.chat-msg-call {
  clear: both;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.chat-msg-call-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  font-size: 13px;
  /* Явный цвет, а не наследуемый: свой пузырь несёт color на акценте, и без
     этого подпись утащила бы его цвет. */
  color: var(--ch-text);
  background: transparent;
}

.chat-msg-call-chip.is-missed {
  border-color: rgba(208, 63, 63, 0.5);
  color: #d03f3f;
}

.chat-msg-call-time {
  opacity: .6;
  font-size: 11px;
}

/* Системная запись группы («X added Y») — как запись о звонке: заметка про весь
   чат, а не реплика одной из сторон, поэтому по центру и без пузыря. */
.chat-msg-system {
  clear: both;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.chat-msg-system-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  font-size: 12px;
  /* Явный цвет по той же причине, что у записи о звонке: плашка может оказаться
     рядом со своим пузырём, который несёт color на акценте. */
  color: var(--ch-muted);
  background: transparent;
}

/* Кружок группы. Оттенок считается от id треда, а инициалы — из названия, поэтому
   отдельного цвета не нужно: отличает его квадратная форма, единственная в системе
   с прямыми углами, как у всего остального в макете. */
.chat-avatar-group {
  border-radius: 0;
}

/* Список выбора участников. Те же имена классов, что в users-groups.html и
   users-all.html: там правила лежат в локальном <style> страницы, а у chat.html
   своего <style> нет вовсе. Это осознанно НЕ <select multiple> — select-techmin.js
   такие пропускает (селектор `select.form-select:not([multiple])`), и список
   рисовала бы ОС мимо макета. */
.picker-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--ch-border);
  border-radius: 0;
  padding: 12px;
}

.picker-list .form-check {
  margin-bottom: 6px;
}

.picker-empty {
  color: var(--ch-muted);
  font-size: 14px;
}

/* ── Групповой звонок ────────────────────────────────────────────────────────
   Панель звонка и без того тёмная в обеих темах и не читает ни одного токена
   темы, поэтому эти правила тоже живут только здесь: близнеца в dark-theme.css
   им не нужно.

   Плитка одна на участника и умеет два состояния. Пока камер нет — полоса имён
   с пометкой «микрофон выключен», и лента переписки под панелью остаётся
   рабочей. Появилась хоть одна камера — скрипт вешает .is-grid на панель, и та
   же полоса становится сеткой кадров во всю высоту.

   .is-grid, а не .is-video: второй класс принадлежит звонку один-на-один и
   открывает .chat-call-stage с единственным кадром собеседника. Здесь кадров
   много, и лежат они в плитках. */
.chat-call-peers {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 15px;
  min-height: 0;
}

.chat-call-peer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100%;
  min-width: 0;
}

.chat-call-peer-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* В полосе кадр не показывается вовсе: строка высотой с аватар, а видео в ней
   было бы маркой. Сетка ниже это переопределяет. */
.chat-call-peer-media video {
  display: none;
}

.chat-call-peer-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.chat-call-peer-name {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-call-peer-note {
  font-size: 12px;
  opacity: .7;
  white-space: nowrap;
}

/* ── Сетка кадров ──────────────────────────────────────────────────────────
   auto-fit с minmax, а не фиксированное число колонок: состав меняется на ходу,
   и пересчитывать раскладку из скрипта значило бы дублировать в JS то, что grid
   считает сам. */
.chat-call-panel.is-grid {
  flex: 1 1 auto;
}

.chat-call-panel.is-grid .chat-call-peers {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  align-content: start;
  overflow-y: auto;
}

.chat-call-panel.is-grid .chat-call-peer {
  position: relative;
  display: block;
  padding: 0;
  background: #000;
  min-height: 120px;
}

.chat-call-panel.is-grid .chat-call-peer-media {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.chat-call-panel.is-grid .chat-call-peer-media video {
  display: block;
  width: 100%;
  height: 100%;
  /* cover, а не contain: в сетке одинаковых клеток письмо по краям кадра
     читается как пустота, а не как соотношение сторон камеры. */
  object-fit: cover;
}

/* Камера выключена — в клетке остаются инициалы, крупнее обычного аватара,
   иначе в кадре 200px они теряются. */
.chat-call-panel.is-grid .chat-call-peer:not(.has-video) .chat-avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

/* Подпись поверх кадра, а не под ним: иначе строка имени съедала бы высоту
   клетки, и на четырёх участниках кадры стали бы полосками. */
.chat-call-panel.is-grid .chat-call-peer-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 4px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

/* Плашка «в треде идёт звонок». Такой же flex-ребёнок .chat-main, как панель
   звонка, и по той же причине: колонка держится на flex без magic-чисел, и
   абсолютный оверлей вернул бы болезнь, от которой её лечили. */
.chat-call-joinbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: var(--ch-neutral);
  border-bottom: 1px solid var(--ch-border);
}

.chat-call-joinbar-text {
  font-size: 14px;
  color: var(--ch-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Настройки: линейки и блоки моноширинного текста ─────────────────────────
   Страницы settings-*.html своего <style> не имеют, а правила нужны трём из них
   — поэтому сюда, тем же приёмом, что .picker-list выше. Правишь этот файл —
   правь и main.scss, иначе пересборка SCSS затрёт. */

/* Бутстраповский <hr> — это currentColor с opacity:.25, мимо палитры макета:
   в тёмной теме получается rgba(255,255,255,.25), заметно светлее линейки
   карточки. --ct-card-border объявлен в content-techmin.css на :root и на
   [data-bs-theme=dark], поэтому обе темы берутся сами и близнец в
   dark-theme.css не нужен. Порядок подключения роли не играет: var()
   резолвится по каскаду на элементе, а не по тому, в каком файле он записан. */
hr.crm-rule {
  color: var(--ct-card-border);
  opacity: 1;
}

/* Блок моноширинного текста на карточке: recovery-коды и сгенерированная
   инструкция по домену. Поверхность — нейтральная заливка ховера строки
   таблицы (#f2f2f2 / #171717), единственная, которую система определяет для
   обеих тем (та же в пагинации, вертикальных вкладках и списках). bg-light
   сюда не годится: dark-theme.css красит его в #32363b с !important, то есть
   в цвет Maxton, и перебить это можно было бы только вторым !important.
   Паддинг 16px = прежний p-3, чтобы геометрия блока кодов не поехала. */
.code-box {
  background-color: #f2f2f2;
  border: 1px solid var(--ct-card-border);
  border-radius: 0;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

[data-bs-theme=dark] .code-box {
  background-color: #171717;
}