/* ==========================================================
   Компоненты 808 Utilities в цветах макета «Аудит»
   ----------------------------------------------------------
   Источник: 808-utilities-admin-dashboard-ui-kit/assets/css/style.css
   (шаблон Preclinic, Bootstrap 5.3.3).

   Взяты только компоненты, которые нужны платформе. Имена классов,
   размеры, отступы, радиусы и шрифт Poppins оставлены как в 808,
   поэтому разметку можно переносить со страниц 808 без изменений.
   Все цвета заменены на токены из theme.css (палитра Figma).

   Номера разделов совпадают с оригинальным style.css 808.
   Раздел «Дополнения» в конце - то, чего в 808 нет.
   ========================================================== */

/*-----------------
	1. General
-----------------------*/

html {
	height: 100%;
}
body {
	font-family: var(--font-main);
	font-size: 16px;
	color: var(--ink);
	background: var(--page-bg);
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h6 { font-size: 0.75rem; }
a {
	color: var(--ink);
	text-decoration: none;
}
a:hover,
a:active,
a:focus {
	text-decoration: none;
	color: var(--accent);
	outline: none;
}
input,
button,
a {
	transition: all 0.4s ease;
}
input,
button {
	outline: none;
}
.form-control {
	box-shadow: none;
	padding: 10px 15px;
	font-size: 14px;
	min-height: 45px;
	color: var(--ink);
	border: 2px solid var(--border);
	border-radius: 10px;
}
.form-control::placeholder {
	font-size: 13px;
	color: var(--muted-2);
}
.form-control:focus {
	border-color: var(--primary);
	box-shadow: none;
	outline: 0 none;
}
.form-control:disabled {
	background-color: var(--muted-bg);
	color: var(--muted);
}
textarea.form-control {
	resize: vertical;
	height: auto;
}
input[type=text],
input[type=password] {
	appearance: none;
}
.input-block {
	margin-bottom: 20px;
}
.display-block {
	display: block;
}
.btn-block {
	width: 100%;
}
.col-form-label {
	font-size: 14px;
	font-weight: 500;
}
.form-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}
.star-red,
.login-danger {
	color: var(--error);
}

/*-----------------
	2. Table
-----------------------*/

.table {
	--bs-table-color: var(--ink);
	--bs-table-bg: var(--paper);
	--bs-table-striped-bg: var(--muted-bg);
	--bs-table-hover-bg: var(--muted-bg);
	color: var(--ink);
	border: 1px solid var(--muted-bg);
}
.table > :not(:first-child) {
	border: 0;
}
table.table td,
table.table th {
	border-color: var(--border);
}
.table > tbody > tr > td {
	font-weight: 300;
}
table.table td h2 {
	display: inline-block;
	font-size: inherit;
	font-weight: 400;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
table.table td h2 a {
	color: var(--ink);
}
table.table td h2 a:hover {
	color: var(--accent);
}
table.table td h2 span {
	color: var(--muted);
	display: block;
	font-size: 12px;
	margin-top: 3px;
}
.table-nowrap td,
.table-nowrap th {
	white-space: nowrap;
}
.custom-table tr {
	background-color: var(--paper);
	white-space: nowrap;
}
.table.custom-table > tbody > tr > td,
.table.custom-table > tbody > tr > th,
.table.custom-table > tfoot > tr > td,
.table.custom-table > tfoot > tr > th,
.table.custom-table > thead > tr > td,
.table.custom-table > thead > tr > th {
	padding: 10px 15px;
	vertical-align: middle;
}
.custom-table tbody tr {
	box-shadow: var(--shadow-soft);
	border: 0;
}
.custom-table tbody tr td,
.custom-table thead tr th {
	border: 0;
}
.custom-table tbody tr td {
	font-size: 14px;
}
.custom-table thead tr th {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
.table.comman-table > thead > tr > th,
.table.comman-table > tbody > tr > td {
	padding: 15px 15px;
}
.card-table .card-body {
	padding: 0;
}
.page-table-header {
	padding: 15px 15px 0px 15px;
}
.doctor-table-blk {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.doctor-table-blk h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 0;
}
.doctor-search-blk {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.doctor-search-blk .top-nav-search {
	margin-left: 15px;
}
.doctor-search-blk .top-nav-search form {
	margin: 0px;
}
.add-group {
	display: flex;
	align-items: center;
}
.add-group .btn-primary {
	background: var(--muted-bg);
	border: 0;
	border-radius: 12px;
	color: var(--ink);
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.5s ease;
}
.add-group .btn-primary:hover,
.add-group .btn-primary:focus {
	border: 0;
	background: var(--primary);
	color: var(--paper);
}
.profile-image a {
	color: var(--ink);
	display: inline-flex;
	align-items: center;
}
.profile-image a:hover {
	color: var(--accent);
}
.download-grp a {
	color: var(--text-2);
	font-size: 20px;
}
.action-icon {
	color: var(--text-2);
	font-size: 14px;
	background: var(--muted-bg);
	border-radius: 10px;
	width: 31px;
	height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.action-icon:hover {
	background: var(--primary);
	color: var(--paper);
}
.dropdown-action .dropdown-toggle::after {
	display: none;
}
.table .dropdown-item {
	padding: 7px 10px;
}
div.dataTables_wrapper div.dataTables_info {
	padding-top: 0.85em;
	padding-bottom: 0.85em;
	color: var(--ink);
}
.card-table .dataTables_info {
	padding-left: 15px;
	font-size: 14px;
}
div.dataTables_wrapper div.dataTables_paginate {
	padding-right: 15px;
}
.dataTables_paginate .pagination {
	margin: 0;
}
.dataTables_paginate .paginate_button.previous .page-link,
.dataTables_paginate .paginate_button.next .page-link {
	background: var(--muted-bg);
	color: var(--text-2);
}
.dataTables_paginate .paginate_button.previous .page-link {
	border-radius: 5px 0 0 5px;
}
.dataTables_paginate .paginate_button.next .page-link {
	border-radius: 0 5px 5px 0;
}
.dataTables_paginate .paginate_button.disabled .page-link {
	color: var(--muted-2);
}

/*-----------------
	3. Helper Class
-----------------------*/

.m-r-5 { margin-right: 5px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-l-5 { margin-left: 5px !important; }
.m-t-0 { margin-top: 0 !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.block { display: block !important; }
.text-ellipsis {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-muted-light {
	color: var(--muted-2);
}
.card-box {
	background-color: var(--paper);
	border-radius: 12px;
	margin-bottom: 30px;
	padding: 20px;
	position: relative;
}
.card-title {
	color: var(--ink);
	font-size: 16px;
	margin-bottom: 20px;
}
.page-title {
	color: var(--ink);
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 25px;
}
.page-sub-title {
	color: var(--text-2);
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 20px;
}
/* В 808 значки - фоновые картинки calendar-icon.svg и clock.png;
   здесь те же места занимают глифы Font Awesome (как .calendar-icon в 808) */
.cal-icon,
.time-icon {
	position: relative;
	width: 100%;
}
.cal-icon:after,
.time-icon:after {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	font-size: 16px;
	color: var(--text-2);
	pointer-events: none;
}
.cal-icon:after { content: "\f133"; }
.time-icon:after { content: "\f017"; }
.cal-icon .form-control,
.time-icon .form-control {
	padding-right: 40px;
}
.comman-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.font-18 {
	font-size: 18px;
}
.border-right {
	border-right: 1px solid var(--border);
}

/*-----------------
	4. Bootstrap Classes
-----------------------*/

.btn {
	font-size: 0.875rem;
}
.btn.focus,
.btn:focus {
	box-shadow: inherit !important;
}
.btn-white {
	background-color: var(--paper);
	border: 1px solid var(--muted-2);
	color: var(--ink);
}
.btn-white:hover,
.btn-white:focus {
	background-color: var(--muted-bg);
	border-color: var(--muted-2);
	color: var(--ink);
}
.rounded,
.circle {
	border-radius: 500px;
}
.btn.btn-rounded {
	border-radius: 50px;
}

/* Цвета кнопок: переменные Bootstrap 5.3 */
.btn-primary {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--ink-hover);
	--bs-btn-hover-border-color: var(--ink-hover);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--ink-press);
	--bs-btn-active-border-color: var(--ink-press);
	--bs-btn-disabled-color: var(--paper);
	--bs-btn-disabled-bg: var(--muted);
	--bs-btn-disabled-border-color: var(--muted);
	--bs-btn-disabled-opacity: 1;
	border-radius: 8px;
}
.btn-secondary {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--accent-dark);
	--bs-btn-hover-border-color: var(--accent-dark);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--accent-dark);
	--bs-btn-active-border-color: var(--accent-dark);
	--bs-btn-disabled-color: var(--paper);
	--bs-btn-disabled-bg: var(--muted);
	--bs-btn-disabled-border-color: var(--muted);
	--bs-btn-disabled-opacity: 1;
}
.btn-success {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--success);
	--bs-btn-border-color: var(--success);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: #357a51;
	--bs-btn-hover-border-color: #357a51;
	--bs-btn-active-bg: #357a51;
	--bs-btn-active-border-color: #357a51;
}
.btn-info {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--info);
	--bs-btn-border-color: var(--info);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: #346796;
	--bs-btn-hover-border-color: #346796;
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: #346796;
	--bs-btn-active-border-color: #346796;
}
.btn-warning {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--warning);
	--bs-btn-border-color: var(--warning);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: #a6772c;
	--bs-btn-hover-border-color: #a6772c;
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: #a6772c;
	--bs-btn-active-border-color: #a6772c;
}
.btn-danger {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--error);
	--bs-btn-border-color: var(--error);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: #b02b1b;
	--bs-btn-hover-border-color: #b02b1b;
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: #b02b1b;
	--bs-btn-active-border-color: #b02b1b;
}
.btn-light {
	--bs-btn-color: var(--ink);
	--bs-btn-bg: var(--page-bg);
	--bs-btn-border-color: var(--page-bg);
	--bs-btn-hover-color: var(--ink);
	--bs-btn-hover-bg: var(--border);
	--bs-btn-hover-border-color: var(--border);
	--bs-btn-active-color: var(--ink);
	--bs-btn-active-bg: var(--border);
	--bs-btn-active-border-color: var(--border);
}
.btn-dark {
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--dark-1);
	--bs-btn-border-color: var(--dark-1);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--ink-hover);
	--bs-btn-hover-border-color: var(--ink-hover);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--ink-press);
	--bs-btn-active-border-color: var(--ink-press);
}
.btn-link {
	--bs-btn-color: var(--ink);
	--bs-btn-hover-color: var(--accent);
	--bs-btn-active-color: var(--accent);
	box-shadow: none;
}
.btn-outline-primary {
	--bs-btn-color: var(--ink);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-color: var(--ink);
	--bs-btn-active-bg: var(--border);
	--bs-btn-active-border-color: var(--muted);
	--bs-btn-disabled-color: var(--muted);
	--bs-btn-disabled-border-color: var(--muted-2);
}
.btn-outline-secondary {
	--bs-btn-color: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: var(--accent);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--accent-dark);
	--bs-btn-active-border-color: var(--accent-dark);
}
.btn-outline-success {
	--bs-btn-color: var(--success);
	--bs-btn-border-color: var(--success);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--success);
	--bs-btn-hover-border-color: var(--success);
	--bs-btn-active-bg: var(--success);
	--bs-btn-active-border-color: var(--success);
}
.btn-outline-info {
	--bs-btn-color: var(--info);
	--bs-btn-border-color: var(--info);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--info);
	--bs-btn-hover-border-color: var(--info);
	--bs-btn-active-bg: var(--info);
	--bs-btn-active-border-color: var(--info);
}
.btn-outline-warning {
	--bs-btn-color: var(--warning);
	--bs-btn-border-color: var(--warning);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--warning);
	--bs-btn-hover-border-color: var(--warning);
	--bs-btn-active-bg: var(--warning);
	--bs-btn-active-border-color: var(--warning);
}
.btn-outline-danger {
	--bs-btn-color: var(--error);
	--bs-btn-border-color: var(--error);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--error);
	--bs-btn-hover-border-color: var(--error);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--error);
	--bs-btn-active-border-color: var(--error);
}
.btn-outline-dark {
	--bs-btn-color: var(--ink);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--ink-press);
	--bs-btn-active-border-color: var(--ink-press);
}
.btn-outline-light {
	--bs-btn-color: var(--paper);
	--bs-btn-border-color: var(--paper);
	--bs-btn-hover-color: var(--ink);
	--bs-btn-hover-bg: var(--paper);
	--bs-btn-hover-border-color: var(--paper);
	--bs-btn-active-color: var(--ink);
	--bs-btn-active-bg: var(--muted-2);
	--bs-btn-active-border-color: var(--muted-2);
}

.bg-primary,
.badge-primary {
	background-color: var(--primary) !important;
}
.bg-secondary {
	background-color: var(--accent) !important;
}
.bg-success,
.badge-success {
	background-color: var(--success) !important;
}
.bg-info,
.badge-info {
	background-color: var(--info) !important;
}
.bg-warning,
.badge-warning {
	background-color: var(--warning) !important;
}
.bg-danger,
.badge-danger {
	background-color: var(--error) !important;
}
.bg-dark {
	background-color: var(--ink-2) !important;
}
.bg-white {
	background-color: var(--paper);
}
.badge-primary {
	color: var(--paper);
}
/* В 808 .text-primary - второй (бирюзовый) цвет темы */
.text-primary,
.dropdown-menu > li > a.text-primary {
	color: var(--accent) !important;
}
.text-success,
.dropdown-menu > li > a.text-success {
	color: var(--success) !important;
}
.text-danger,
.dropdown-menu > li > a.text-danger {
	color: var(--error) !important;
}
.text-info,
.dropdown-menu > li > a.text-info {
	color: var(--info) !important;
}
.text-warning,
.dropdown-menu > li > a.text-warning {
	color: var(--warning) !important;
}
.text-purple {
	color: var(--accent-dark) !important;
}
.text-muted {
	color: var(--muted) !important;
}
.badge.rounded-pill {
	border-radius: 10rem;
}

.pagination {
	--bs-pagination-color: var(--ink);
	--bs-pagination-bg: var(--paper);
	--bs-pagination-border-color: var(--border);
	--bs-pagination-hover-color: var(--ink);
	--bs-pagination-hover-bg: var(--muted-bg);
	--bs-pagination-hover-border-color: var(--border);
	--bs-pagination-focus-color: var(--ink);
	--bs-pagination-focus-bg: var(--muted-bg);
	--bs-pagination-focus-box-shadow: none;
	--bs-pagination-active-color: var(--paper);
	--bs-pagination-active-bg: var(--primary);
	--bs-pagination-active-border-color: var(--primary);
	--bs-pagination-disabled-color: var(--muted-2);
	--bs-pagination-disabled-bg: var(--paper);
	--bs-pagination-disabled-border-color: var(--border);
}
.pagination > li > a,
.pagination > li > span {
	font-size: 14px;
	padding: 5px 15px !important;
}
.page-link:focus {
	box-shadow: unset;
}

.dropdown-menu {
	--bs-dropdown-link-color: var(--ink);
	--bs-dropdown-link-hover-color: var(--ink);
	--bs-dropdown-link-hover-bg: var(--muted-bg);
	--bs-dropdown-link-active-color: var(--paper);
	--bs-dropdown-link-active-bg: var(--primary);
	border: 1px solid var(--border);
	border-radius: 3px;
	transform-origin: left top 0;
	box-shadow: inherit;
	background-color: var(--paper);
	font-size: 13px;
}
.btn-group-xs > .btn,
.btn-xs {
	min-height: 22px;
	min-width: 22px;
}

.card {
	--bs-card-bg: var(--paper);
	margin-bottom: 25px;
	box-shadow: none;
	border: 0;
	border-radius: 12px;
	width: 100%;
}
.card .card-header {
	background-color: rgba(255, 255, 255, 0.1);
	border: 0 none;
	font-size: 16px;
	line-height: 30px;
	padding: 15px;
}
.card .card-header .card-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	margin: 0;
	padding: 5px 0;
}
.card-header {
	padding: 15px;
}

.progress {
	--bs-progress-bg: var(--border);
	--bs-progress-bar-bg: var(--primary);
}
.progress-xs { height: 4px; }
.progress.progress-sm { height: 6px; }
.progress.progress-md { height: 8px; }
.progress.progress-lg { height: 18px; }
.form-control.form-control-sm {
	padding: 0.25rem 0.5rem;
}
.input-group-text {
	height: 45px;
	color: var(--ink);
	background-color: var(--muted-bg);
	border-color: var(--border);
}

/* Флажки и переключатели Bootstrap: выбранное состояние - цвет --ink, как в макете */
.form-check-input {
	border-color: var(--muted-2);
}
.form-check-input:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}
.form-check-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.check-tables .form-check-input {
	border: 2px solid rgba(18, 24, 42, 0.2);
	border-radius: 4px;
	width: 18px;
	height: 18px;
}

.list-group {
	--bs-list-group-color: var(--ink);
	--bs-list-group-border-color: var(--border);
	--bs-list-group-active-bg: var(--primary);
	--bs-list-group-active-border-color: var(--primary);
}
.list-group-item {
	border: 1px solid var(--border);
}

.tooltip {
	--bs-tooltip-bg: var(--ink-2);
	--bs-tooltip-color: var(--paper);
	--bs-tooltip-font-size: 12px;
}
.popover {
	--bs-popover-bg: var(--ink-2);
	--bs-popover-border-color: var(--ink-2);
	--bs-popover-header-bg: var(--ink-2);
	--bs-popover-header-color: var(--paper);
	--bs-popover-body-color: var(--border);
	--bs-popover-header-font-size: 14px;
	--bs-popover-font-size: 12px;
}
.popover .popover-header {
	border-bottom-color: rgba(255, 255, 255, 0.1);
	font-weight: 500;
}

.modal {
	--bs-modal-color: var(--ink);
	--bs-modal-border-color: transparent;
	--bs-modal-header-border-color: var(--border);
	--bs-modal-footer-border-color: var(--border);
}
/* В 808 подложка белая (opacity .9); в макете страница затемняется */
.modal-backdrop {
	background-color: var(--primary);
}
.modal-backdrop.show {
	opacity: 0.25;
}
.modal-footer.text-start {
	text-align: left;
}
.modal-footer.text-center {
	text-align: center;
}
.modal-body label {
	font-size: 13px;
}

/*-----------------
	5. Header
-----------------------*/

.header {
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1039;
	height: 70px;
	background: var(--paper);
	box-shadow: var(--shadow-header);
}
.header .header-left {
	float: left;
	height: 70px;
	padding: 0 20px;
	position: relative;
	text-align: center;
	width: 220px;
	z-index: 1;
}
.logo {
	align-items: center;
	display: flex;
	height: 70px;
	justify-content: start;
}
.logo span {
	color: var(--ink);
	font-size: 20px;
	font-weight: 500;
	margin-left: 10px;
}
#toggle_btn {
	color: var(--ink);
	float: left;
	font-size: 22px;
	line-height: 70px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	height: 70px;
}
.mobile_btn {
	display: none;
}
.top-nav-search {
	float: left;
	margin-left: 22px;
}
.top-nav-search form {
	margin-top: 13px;
	position: relative;
	width: 270px;
}
.top-nav-search .form-control {
	background: var(--muted-bg);
	border-radius: 12px;
	border: 0;
	height: 40px;
	min-height: 40px;
	padding: 10px 15px 10px 40px;
}
.top-nav-search .btn {
	background-color: transparent;
	border-color: transparent;
	color: var(--text-2);
	min-height: 40px;
	padding: 7px 12px;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
}
.top-nav-search .form-control::placeholder {
	color: var(--text-2);
	font-weight: 500;
}
.top-nav-search.table-search-blk .btn {
	min-height: 40px;
	display: flex;
}
.user-menu {
	margin: 0;
	position: relative;
	z-index: 99;
}
.user-menu.nav > li {
	margin-right: 12px;
	position: relative;
}
.user-menu.nav > li > a {
	color: var(--text-2);
	font-size: 20px;
	line-height: 70px;
	padding: 0 5px;
	height: 70px;
	display: flex;
	align-items: center;
	position: relative;
}
.user-menu.nav > li > a:hover,
.user-menu.nav > li > a:focus {
	color: var(--ink);
}
.user-menu .dropdown-toggle:after,
.header .dropdown-toggle:after {
	display: none;
}
.user-profile-list .user-link {
	display: flex;
	align-items: center;
	padding: 0px 10px !important;
}
.user-menu.nav li.user-profile-list a {
	line-height: 20px;
}
.user-names {
	padding-right: 10px;
	text-align: right;
}
.user-names h5 {
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 0;
}
.user-names span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 0;
}
.user-img {
	display: inline-block;
	position: relative;
}
.header .user-img .avatar {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 14px;
	margin: 0;
}
.status {
	background-color: var(--muted-2);
	border-radius: 50%;
	display: inline-block;
	height: 10px;
	width: 10px;
}
.status.online { background-color: var(--success); }
.status.offline { background-color: var(--error); }
.status.away { background-color: var(--warning); }
.pulse {
	display: block;
	position: absolute;
	top: 22px;
	right: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent);
}
.pulse:before {
	content: "";
	top: 0px;
	right: 0px;
	width: 10px;
	height: 10px;
	position: absolute;
	border-radius: 50%;
	background: rgba(51, 65, 78, 0.5);
	cursor: pointer;
	animation: pulse 1s linear infinite;
	z-index: 1;
}
@keyframes pulse {
	100% {
		transform: scale(2.5);
	}
}

/*-----------------
	6. Sidebar
-----------------------*/

.sidebar {
	top: 90px;
	width: 250px;
	z-index: 1039;
	background-color: var(--paper);
	bottom: 0;
	margin-top: 0px;
	position: fixed;
	left: 0;
	transition: all 0.2s ease-in-out;
	border-top-right-radius: 40px;
	box-shadow: var(--shadow-sidebar);
	overflow-x: hidden;
	overflow-y: hidden;
	/* В 808 height: 100vh при top: 90px - низ меню (90 px) уходит за экран.
	   Высота уменьшена, чтобы внизу поместился блок пользователя */
	height: calc(100vh - 90px);
}
.sidebar-inner {
	position: relative;
	height: 100%;
	transition: all 0.2s ease-in-out 0s;
}
.sidebar-menu {
	padding: 10px 0;
}
.sidebar-menu ul {
	font-size: 14px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.sidebar-menu li a {
	color: var(--text-2);
	display: block;
	font-size: 15px;
	height: auto;
	padding: 0 20px;
}
.sidebar-menu li a:hover {
	color: var(--ink);
}
.sidebar-menu li.active a {
	color: var(--ink);
}
.menu-title {
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	padding: 12px 20px;
}
.sidebar-menu > ul > li {
	position: relative;
}
.sidebar-menu > ul > li > a {
	padding: 12px 20px;
	align-items: center;
	display: flex;
	justify-content: flex-start;
	position: relative;
	transition: all 0.2s ease-in-out 0s;
	color: var(--text-2);
	font-weight: 500;
}
/* Место под стрелку подменю: русские подписи длиннее, чем в 808 */
.sidebar-menu > ul > li.submenu > a {
	padding-right: 30px;
}
.sidebar-menu > ul > li.submenu > a .menu-arrow {
	right: 10px;
}
/* «Выбранные проекты» не помещается в меню 808 шириной 250 px - переносим */
.sidebar .sidebar-menu > ul > li > a span:not(.menu-side):not(.menu-arrow) {
	white-space: normal;
	line-height: 1.25;
}
.sidebar .sidebar-menu > ul > li > a span {
	transition: all 0.2s ease-in-out 0s;
	margin-left: 10px;
	white-space: nowrap;
}
.sidebar-menu ul li a span.menu-side,
.sidebar-menu ul li a i {
	font-size: 18px;
	min-height: 24px;
	line-height: 18px;
	transition: all 0.2s ease-in-out 0s;
	background: var(--muted-bg);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	margin-left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--text-2);
}
.sidebar-menu ul li a span.menu-side i {
	background: transparent;
	width: auto;
	height: auto;
	min-height: 0;
}
.sidebar-menu ul li .active,
.sidebar-menu ul li a.subdrop {
	color: var(--ink);
	font-weight: 500;
}
.sidebar-menu ul li .active span.menu-side,
.sidebar-menu ul li a.subdrop span.menu-side,
.sidebar-menu li a:hover span.menu-side {
	color: var(--ink);
}
.sidebar-menu .menu-arrow {
	transition: transform 0.15s;
	position: absolute;
	right: 25px;
	display: inline-block;
	font-family: "FontAwesome";
	text-rendering: auto;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	transform: translate(0, 0);
	line-height: 18px;
	top: 23px;
}
.sidebar-menu .menu-arrow:before {
	content: "\f105";
}
.sidebar-menu li a.subdrop .menu-arrow {
	transform: rotate(90deg);
}
.sidebar-menu ul ul {
	display: none;
}
.sidebar-menu ul ul a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding: 9px 10px 9px 60px;
	position: relative;
	color: var(--text-2);
	font-weight: 500;
}
.sidebar-menu ul ul a.active {
	color: var(--ink);
	font-weight: 500;
}
/* В 808 у активного пункта подменю стрелка-картинка right-icon.svg */
.sidebar-menu ul .submenu ul .active:before {
	content: "\f105";
	font-family: "FontAwesome";
	position: absolute;
	left: 35px;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 14px;
	color: var(--ink);
}
.logout-btn {
	margin: 50px 0px;
}
.logout-btn a {
	padding: 12px 20px;
	align-items: center;
	display: flex;
	justify-content: flex-start;
	position: relative;
	transition: all 0.2s ease-in-out 0s;
	color: var(--ink);
	font-weight: 500;
}
.logout-btn a span {
	margin-left: 10px;
}
.logout-btn a span.menu-side {
	margin-left: 0;
	font-size: 18px;
	background: var(--muted-bg);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/*-----------------
	7. Content
-----------------------*/

.page-wrapper {
	left: 0;
	margin-left: 250px;
	padding-top: 70px;
	position: relative;
	transition: all 0.4s ease;
}
.page-wrapper > .content {
	padding: 30px;
	padding-bottom: 0;
}
.page-header {
	margin-bottom: 1.875rem;
}
.page-header .breadcrumb {
	background-color: transparent;
	color: var(--text-2);
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0;
	padding: 0;
	align-items: center;
}
.breadcrumb-item a {
	color: var(--ink);
}
.breadcrumb-item a:hover {
	color: var(--accent);
}
.breadcrumb-item.active {
	color: var(--text-2);
}
.breadcrumb-item + .breadcrumb-item::before {
	display: none;
}
.breadcrumb-item + .breadcrumb-item i {
	color: var(--ink);
	font-size: 14px;
}

/*-----------------
	12. Login
-----------------------*/

.login-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.login-wrapper .loginbox {
	background: var(--paper);
	box-shadow: 0px 80px 80px rgba(18, 24, 42, 0.03);
	border-radius: 24px;
	display: flex;
	max-width: 830px;
	width: 100%;
}
.login-wrapper .loginbox .login-right {
	padding: 50px;
	width: 100%;
}
.login-wrapper .loginbox .login-right .login-right-wrap {
	max-width: 100%;
	flex: 0 0 100%;
}
.login-wrapper .loginbox .login-right .login-right-wrap .input-block {
	position: relative;
}
.login-wrapper .loginbox .login-right .login-right-wrap .input-block label {
	font-size: 12px;
	color: var(--ink);
	font-weight: 500;
	position: absolute;
	top: -10px;
	left: 10px;
	background: var(--paper);
	margin-bottom: 0;
	padding: 0px 5px;
	z-index: 1;
}
.login-wrapper .loginbox .login-right h2 {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 40px;
}
.account-logo {
	margin-bottom: 40px;
	text-align: left;
}
.account-subtitle {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 0;
	text-align: left;
	font-weight: 500;
}
.account-subtitle a {
	color: var(--ink);
}
.login-wrapper .loginbox .login-right .forgotpass {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
.login-wrapper .loginbox .login-right .forgotpass a {
	color: var(--accent);
	font-size: 14px;
	font-weight: 500;
	margin-left: auto;
}
.login-wrapper .loginbox .login-right .forgotpass a:hover {
	color: var(--ink);
	text-decoration: underline;
}
.login-right .form-control {
	border: 2px solid var(--border);
	border-radius: 10px;
	height: 45px;
}
.login-right .form-control:focus {
	border: 2px solid var(--primary);
}
.profile-views {
	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted-2);
	cursor: pointer;
	font-size: 16px;
}
.profile-views:hover {
	color: var(--ink);
}
.remember-me .custom_check {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 0;
}
.remember-me .custom_check .checkmark {
	width: 18px;
	height: 18px;
	top: 2px;
	left: 2px;
	border: 2px solid rgba(18, 24, 42, 0.2);
	border-radius: 4px;
	background-color: var(--paper);
}

.login-right .btn-primary {
	background: var(--hero-gradient);
	border: 1px solid var(--primary);
	border-radius: 12px;
	font-size: 16px;
	padding: 10px 15px;
	color: var(--paper);
}
.login-right .btn-primary:hover {
	background: var(--ink-hover);
	border: 1px solid var(--ink-hover);
}
.login-right .btn-primary:disabled {
	background: var(--muted);
	border-color: var(--muted);
}
.login-btn {
	margin-bottom: 40px;
}
.next-sign {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*-----------------
	9. Dashboard
-----------------------*/

.dash-widget {
	background-color: var(--paper);
	border-radius: 12px;
	backdrop-filter: blur(2px);
	margin-bottom: 30px;
	padding: 20px;
	position: relative;
}
.dash-boxs {
	background: var(--muted-bg);
	border: 2px solid var(--border);
	border-radius: 12px;
	width: 50px;
	height: 50px;
	margin-bottom: 10px;
	color: var(--ink);
	font-size: 20px;
}
.dash-content h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
}
.dash-content h2 {
	color: var(--ink);
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 20px;
}
.dash-content p {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 0px;
}
.dash-content p .negative-view {
	color: var(--error);
}
.dash-content p .passive-view {
	color: var(--success);
}
.chart-title {
	margin-bottom: 25px;
}
.chart-title h4 {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 20px;
	margin: 0;
	color: var(--ink);
}
.patient-visit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
ul.chat-user-total li {
	display: flex;
	align-items: center;
	color: var(--ink);
	padding-right: 10px;
	font-size: 14px;
	font-weight: 500;
}
ul.chat-user-total li i {
	padding-right: 5px;
	font-size: 8px;
}
ul.chat-user-total li i.current-users { color: var(--ink); }
ul.chat-user-total li i.low-users { color: var(--border); }
ul.chat-user-total li i.old-users { color: var(--accent); }
.patient-views {
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
}
.patient-views:hover {
	color: var(--accent);
}
/* Hero: в 808 белый блок с картинкой, в макете hero-блоки тёмные */
.good-morning-blk {
	background: var(--hero-gradient);
	border-radius: 12px;
	margin-bottom: 25px;
	position: relative;
	z-index: 9;
	color: var(--paper);
}
.morning-user {
	padding: 50px 0px 50px 35px;
}
.morning-user h2 {
	font-size: 28px;
	font-weight: 600;
	color: var(--paper);
}
.morning-user h2 span {
	color: var(--accent);
}
.morning-user p {
	font-size: 15px;
	font-weight: 500;
	color: var(--muted-2);
	margin-bottom: 0;
}
.doctor-list-blk {
	background: var(--paper);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 25px;
}
.doctor-widget {
	display: flex;
	align-items: center;
	position: relative;
}
.doctor-box-icon {
	width: 66px;
	height: 66px;
	background: var(--primary);
	color: var(--paper);
	font-size: 24px;
	border-radius: 12px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.doctor-content {
	width: 100%;
}
.doctor-content h4 {
	font-size: 24px;
	color: var(--ink);
	display: flex;
	align-items: center;
	font-weight: 600;
	margin-bottom: 4px;
}
.doctor-content h5 {
	font-size: 14px;
	margin-bottom: 0;
}
.doctor-content h4 span:nth-child(2) {
	font-size: 14px;
	color: var(--muted-2);
}
.doctor-content h4 span:nth-child(3) {
	font-size: 10px;
	border-radius: 20px;
	margin: auto;
	padding: 5px;
}
.border-right-bg:before {
	content: "";
	position: absolute;
	background: var(--border);
	height: 44px;
	width: 2px;
	right: 0;
}
.card.wallet-widget {
	margin-bottom: 25px;
	padding: 15px;
	width: 100%;
}
.main-limit {
	text-align: center;
}
.main-limit p {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 10px;
}
.main-limit h4 {
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0;
}
.wallet-widget .circle-bar {
	text-align: center;
}
.wallet-widget .circle-bar > div {
	display: inline-block;
	position: relative;
	text-align: center;
}
.wallet-widget .circle-bar > div b {
	left: 0;
	position: absolute;
	top: 50%;
	right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	border-radius: 50px;
	background: var(--accent-soft);
	color: var(--ink);
	font-size: 16px;
	line-height: 1;
	/* У Poppins высокий верхний вынос - без отступа цифры стоят выше центра */
	padding-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* В 808 кольцо рисует плагин circle-progress в <canvas> 100×100;
   здесь то же кольцо - SVG, длина дуги задаётся атрибутом data-value */
.wallet-widget .circle-bar > div svg {
	width: 100px;
	height: 100px;
	display: block;
}
.activity-feed {
	list-style: none;
	margin-bottom: 0;
	margin-left: 5px;
	padding: 0;
	width: 100%;
	position: relative;
}
.activity-feed::after {
	position: absolute;
	content: "";
	background: var(--border);
	width: 2px;
	height: 100%;
	left: -2px;
	top: 10px;
	z-index: 0;
}
.activity-feed .feed-item {
	padding-bottom: 20px;
	padding-left: 20px;
	position: relative;
}
.activity-feed .feed-item:last-child {
	padding-bottom: 0;
}
.activity-feed .feed-item:after {
	content: "";
	display: block;
	position: absolute;
	background-color: var(--primary);
	width: 7px;
	height: 7px;
	top: 10px;
	left: -4px;
	border-radius: 50px;
	z-index: 9;
}

/*-----------------
	10. Activity
-----------------------*/

.activity-box {
	position: relative;
}
.activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.activity-list > li {
	margin-bottom: 10px;
	padding: 10px;
	position: relative;
}
.activity-list > li .activity-user {
	background: var(--paper);
	height: 32px;
	left: -7px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 3px;
	width: 32px;
}
.activity-user .avatar {
	height: 32px;
	line-height: 32px;
	margin: 0;
	width: 32px;
	font-size: 12px;
}
.activity-list > li .activity-content {
	background-color: var(--paper);
	margin: 0 0 20px 40px;
	padding: 0;
	position: relative;
}
.activity-list > li:last-child .activity-content {
	margin-bottom: 0;
}
.activity-list > li .time {
	color: var(--muted);
	display: block;
	font-size: 12px;
	line-height: 1.35;
}
.activity-list::before {
	background: var(--border);
	bottom: 0;
	content: "";
	left: 8px;
	position: absolute;
	top: 8px;
	width: 2px;
}
.timeline-group {
	margin-right: 20px;
	min-width: 100px;
}
.timeline-group h4 {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 0;
}
.timeline-group-blk {
	display: flex;
}
.comman-activitys {
	background: var(--muted-bg);
	border-radius: 0px 16px 16px 16px;
	padding: 20px;
	width: 100%;
}
.comman-activitys h3 {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
}
.comman-activitys h3 span {
	color: var(--text-2);
	font-size: 14px;
	font-weight: 500;
}
.comman-activitys p {
	color: var(--muted);
	margin-bottom: 0px;
	font-size: 12px;
}
.activity-sub-list li {
	margin-right: 10px;
}
.activity-sub-list li img {
	border-radius: 8px;
}

/*-----------------
	11. Select2
-----------------------*/

.select2-container .select2-selection--single {
	border: 2px solid var(--border);
	border-radius: 10px;
	height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: 7px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	left: 50%;
	margin-left: -10px;
	margin-top: -2px;
	position: absolute;
	top: 50%;
	border-top: 0;
	border-left: 0;
	border-bottom: 1px solid var(--primary);
	border-right: 1px solid var(--primary);
	content: '';
	height: 6px;
	display: inline-block;
	pointer-events: none;
	transform-origin: 66% 66%;
	transform: rotate(45deg);
	transition: all 0.15s ease-in-out;
	width: 6px;
	vertical-align: 0px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: rotate(-135deg);
	border-top: 0;
	border-left: 0;
	border-bottom: 1px solid var(--primary);
	border-right: 1px solid var(--primary);
}
.select2-container .select2-selection--single .select2-selection__rendered {
	padding-right: 30px;
	padding-left: 15px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ink);
	font-size: 14px;
	font-weight: normal;
	line-height: 36px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--primary);
}
.select2-dropdown {
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--font-main);
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--muted-bg);
	color: var(--ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--primary);
	color: var(--paper);
}
.select2-results__option {
	font-size: 14px;
}
.select2-container--default .select2-selection--multiple {
	border: 2px solid var(--border);
	border-radius: 10px;
	min-height: 40px;
}

/*-----------------
	12. Nav tabs
-----------------------*/

.nav-tabs {
	--bs-nav-tabs-border-color: var(--border);
	--bs-nav-tabs-link-active-color: var(--ink);
	--bs-nav-tabs-link-active-bg: var(--paper);
	--bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--paper);
	--bs-nav-link-color: var(--text-2);
	--bs-nav-link-hover-color: var(--ink);
}
.nav-tabs > li > a {
	margin-right: 0;
	color: var(--text-2);
	border-radius: 0;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
	border-color: transparent;
	color: var(--ink);
}
.nav-tabs .nav-link {
	border-radius: 0;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
	background-color: var(--muted-bg);
	border-color: transparent;
}
.nav-tabs.nav-justified > li > a {
	border-radius: 0;
	margin-bottom: 0;
}
.nav-tabs.nav-tabs-solid {
	background-color: var(--muted-bg);
	border: 0;
}
.nav-tabs.nav-tabs-solid > li {
	margin-bottom: 0;
}
.nav-tabs.nav-tabs-solid > li > a {
	color: var(--text-2);
	border-color: transparent;
}
.nav-tabs.nav-tabs-solid > li > a:hover,
.nav-tabs.nav-tabs-solid > li > a:focus {
	background-color: var(--border);
	color: var(--ink);
}
.nav-tabs.nav-tabs-solid > li > a.active,
.nav-tabs.nav-tabs-solid > li > a.active:hover,
.nav-tabs.nav-tabs-solid > li > a.active:focus {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--paper);
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded {
	border-radius: 50px;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a,
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active,
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active:hover,
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active:focus {
	border-radius: 50px;
}
.nav-tabs.nav-tabs-bottom > li {
	margin-bottom: -1px;
}
.nav-tabs.nav-tabs-bottom > li > a.active,
.nav-tabs.nav-tabs-bottom > li > a.active:hover,
.nav-tabs.nav-tabs-bottom > li > a.active:focus {
	border-bottom-width: 2px;
	border-color: transparent;
	border-bottom-color: var(--primary);
	background-color: transparent;
	transition: none;
}
.nav-tabs.nav-tabs-top > li {
	margin-bottom: 0;
}
.nav-tabs.nav-tabs-top > li > a,
.nav-tabs.nav-tabs-top > li > a:hover,
.nav-tabs.nav-tabs-top > li > a:focus {
	border-width: 2px 0 0 0;
}
.nav-tabs.nav-tabs-top > li > a.active,
.nav-tabs.nav-tabs-top > li > a.active:hover,
.nav-tabs.nav-tabs-top > li > a.active:focus {
	border-top-color: var(--primary);
}
/* Вкладки с иконкой - страница профиля врача (doctor-profile.html) */
.tab-content-set {
	border-bottom: 4px solid var(--muted-bg);
	padding-bottom: 25px;
	margin-bottom: 25px;
}
.tab-content-set li {
	padding-right: 20px;
}
.tab-content-set li a {
	display: flex;
	align-items: center;
	color: var(--muted);
	font-size: 15px;
	font-weight: 600;
	position: relative;
}
.tab-content-set ul li a.active::after,
.tab-content-set ul li a:hover::after {
	position: absolute;
	content: "";
	background: var(--primary);
	width: 100%;
	height: 4px;
	left: 0;
	bottom: -29px;
}
.tab-content-set ul li a.active,
.tab-content-set ul li a:hover {
	color: var(--ink);
}
.set-about-icon {
	background: var(--muted-bg);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	font-size: 18px;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tab-content-set ul li a.active .set-about-icon,
.tab-content-set ul li a:hover .set-about-icon {
	color: var(--ink);
}
/* Кнопки-вкладки настроек (settings.html) */
.settings-menu-links .nav-tabs.menu-tabs {
	border: none;
	margin-bottom: 20px;
	margin-top: 20px;
}
.nav-tabs.menu-tabs .nav-item {
	padding-right: 10px;
	margin-bottom: 10px;
	display: inline-block;
}
.nav-tabs.menu-tabs .nav-link {
	position: relative;
	border: none;
	outline: none;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 5px;
	color: var(--paper);
	background: var(--muted);
}
.nav-tabs.menu-tabs .nav-link:hover {
	color: var(--paper);
	background: var(--text-2);
}
.nav-tabs.menu-tabs .nav-item.active .nav-link,
.nav-tabs.menu-tabs .nav-link.active {
	color: var(--paper);
	background: var(--primary);
}

/*-----------------
	16. Focus Label
-----------------------*/

.local-forms.input-block {
	position: relative;
	margin-bottom: 30px;
}
.local-forms label {
	font-size: 12px;
	color: var(--ink);
	font-weight: 500;
	position: absolute;
	top: -10px;
	left: 10px;
	background: var(--paper);
	margin-bottom: 0;
	padding: 0px 5px;
	z-index: 9;
}
.local-forms .select2-container .select2-selection--single {
	height: 45px;
}
.local-forms .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 41px;
}
.local-forms .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
}
.form-heading h4 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 30px;
}
.doctor-submit .btn-primary {
	min-width: 131px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 12px;
	padding: 10px 15px;
}
.doctor-submit .cancel-form {
	background: var(--muted-bg);
	border: 1px solid var(--muted-bg);
	color: var(--ink);
}
.doctor-submit .cancel-form:hover,
.doctor-submit .cancel-form:focus {
	background: var(--primary);
	color: var(--paper);
	border: 1px solid var(--primary);
}
.submit-btn {
	border-radius: 50px;
	color: var(--paper);
	font-size: 15px;
	font-weight: 500;
	min-width: 200px;
	padding: 8px 20px;
	text-transform: uppercase;
}

/*-----------------
	20. Profile
-----------------------*/

/* В 808 шапка профиля светлая (подложка 5%); в макете hero-блок тёмный */
.doctor-profile-head {
	background: var(--hero-gradient);
	border-radius: 10px;
	color: var(--paper);
	padding: 30px 0;
}
.profile-user-box {
	display: flex;
	align-items: center;
	padding-left: 30px;
}
.profile-user-img {
	margin-right: 20px;
	position: relative;
}
.profile-user-img .avatar {
	margin: 0;
}
.profile-edit-icon {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 28px;
	height: 28px;
	border-radius: 50px;
	background: var(--paper);
	color: var(--ink);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 0 2px var(--primary);
}
.profile-edit-icon input[type=file] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.names-profiles h4 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 3px;
}
.names-profiles h5 {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 0;
}
.doctor-profile-head .names-profiles h4 {
	color: var(--paper);
}
.doctor-profile-head .names-profiles h5 {
	color: var(--muted-2);
}
.follow-group {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.doctor-follows {
	text-align: center;
}
.doctor-follows h5 {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 0;
}
.doctor-follows h4 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 0;
}
.doctor-profile-head .doctor-follows h5 {
	color: var(--muted-2);
}
.doctor-profile-head .doctor-follows h4 {
	color: var(--paper);
}
.follow-btn-group {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 15px;
}
.follow-btn-group .btn-info {
	min-width: 127px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 10px;
	padding: 9px 15px;
}
.follow-btn-group .follow-btns {
	background: var(--primary);
	border: 1px solid var(--primary);
	color: var(--paper);
}
.follow-btn-group .follow-btns:hover {
	background: var(--accent);
	border: 1px solid var(--accent);
}
.follow-btn-group .message-btns {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: var(--paper);
}
.follow-btn-group .message-btns:hover {
	background: var(--accent-dark);
	border: 1px solid var(--accent-dark);
}
/* На тёмной шапке: основная кнопка белая, вторая - контурная белая */
.doctor-profile-head .follow-btn-group .follow-btns {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}
.doctor-profile-head .follow-btn-group .follow-btns:hover {
	background: var(--border);
	border-color: var(--border);
}
.doctor-profile-head .follow-btn-group .message-btns {
	background: transparent;
	border-color: var(--paper);
	color: var(--paper);
}
.doctor-profile-head .follow-btn-group .message-btns:hover {
	background: rgba(255, 255, 255, 0.1);
}
.personal-activity {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}
.views-personal {
	margin-left: 10px;
}
.views-personal h5 {
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 0;
}
.views-personal h4 {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 0;
}
.personal-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--muted-bg);
	font-size: 18px;
}
.personal-icons i {
	color: var(--ink);
}
/* Глиф Telegram в Font Awesome стоит выше центра своего квадрата */
.personal-icons .fa-telegram {
	margin-top: 2px;
}
.doctor-personals-grp .card {
	border-radius: 10px;
	box-shadow: none;
}
.heading-detail h4 {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 25px;
}
.heading-detail p {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}
.skills-head {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.skills-head h5 {
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
}
.skills-head p {
	margin-bottom: 0;
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
}
.skill-statistics {
	margin-bottom: 25px;
}
.skill-statistics .progress {
	height: 4px;
}
.about-info {
	margin-bottom: 25px;
}
.about-info h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 500;
}
.about-info h4 i {
	color: var(--text-2);
	background: var(--muted-bg);
	border-radius: 10px;
	width: 31px;
	height: 31px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list-space {
	padding: 0;
	margin: 0;
}
.about-me-list ul li {
	list-style: none;
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.about-me-list ul li:last-child {
	margin-bottom: 0;
}
.about-me-list ul li h4 {
	min-width: 50%;
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 500;
}
.about-me-list ul li span {
	min-width: 50%;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
.detail-personal h2 {
	font-size: 15px;
	font-weight: 500;
}
.detail-personal h3 {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	margin-bottom: 0;
}
.personal-list-out {
	margin-bottom: 30px;
}

/*-----------------
	21. Notifications
-----------------------*/

.notifications {
	padding: 0;
}
.notifications .drop-scroll {
	height: 290px;
	width: 400px;
}
.notification-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.notifications ul.notification-list > li {
	margin-top: 0;
	border-bottom: 1px solid var(--muted-bg);
}
.notifications ul.notification-list > li:last-child {
	border-bottom: none;
}
.notifications ul.notification-list > li a {
	display: block;
	padding: 12px;
	border-radius: 2px;
}
.notifications ul.notification-list > li a:hover {
	background-color: var(--muted-bg);
}
.drop-scroll {
	overflow-y: auto;
	position: relative;
}
.topnav-dropdown-header {
	border-bottom: 1px solid var(--border);
	text-align: center;
}
.topnav-dropdown-header,
.topnav-dropdown-footer {
	font-size: 12px;
	height: 32px;
	line-height: 32px;
	padding-left: 12px;
	padding-right: 12px;
}
.topnav-dropdown-footer {
	border-top: 1px solid var(--border);
}
.topnav-dropdown-footer a {
	display: block;
	text-align: center;
	color: var(--ink);
}
.media {
	display: flex;
	align-items: flex-start;
}
.media .avatar {
	flex-shrink: 0;
	margin-top: 0;
}
.media-body {
	flex: 1;
	min-width: 0;
}
.noti-details {
	color: var(--muted);
	margin: 0;
	font-size: 13px;
}
.noti-time {
	margin: 0;
}
.notification-time {
	font-size: 12px;
	color: var(--muted-2);
}
.noti-title {
	color: var(--ink);
	font-weight: 500;
}
/* 39. Notification settings: список настроек с переключателем */
.notification-list .list-group-item {
	padding: 15px;
}
.notification-list .status-toggle {
	float: right;
}

/*-----------------
	24. Invoice: флажки, радиокнопки, «Загрузить ещё»
-----------------------*/

.custom_check {
	color: var(--ink);
	display: inline-block;
	position: relative;
	font-size: 13px;
	margin-bottom: 15px;
	padding-left: 30px;
	cursor: pointer;
	font-weight: 400;
	user-select: none;
	min-height: 20px;
	line-height: 20px;
}
.custom_check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.custom_check .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border: 1px solid var(--muted-2);
	background-color: transparent;
	border-radius: 0;
	transition: all 0.3s ease-in-out;
}
/* В 808 галочка сдвинута на подобранные пиксели (left: 5px; top: 2px) и съезжает
   при другом размере квадрата. Здесь она центрируется по квадрату */
.custom_check .checkmark::after {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--paper);
	font-size: 10px;
	line-height: 1;
}
.custom_check input:checked ~ .checkmark {
	background-color: var(--primary);
	border-color: var(--primary);
}
.custom_check input:checked ~ .checkmark:after {
	display: flex;
}
.custom_check input:disabled ~ .checkmark {
	background-color: var(--muted-bg);
	border-color: var(--border);
}
.custom_radio {
	color: var(--ink);
	display: inline-block;
	position: relative;
	font-size: 14px;
	padding-left: 30px;
	margin-bottom: 0px;
	cursor: pointer;
	user-select: none;
	min-height: 20px;
	line-height: 20px;
}
.custom_radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.custom_radio .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: var(--paper);
	border: 1px solid var(--primary);
	border-radius: 50%;
}
.custom_radio .checkmark:after {
	display: block;
	content: "";
	position: absolute;
	opacity: 0;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--primary);
	transform: scale(0.1);
	transition: all 0.3s ease-in-out;
}
.custom_radio input:checked ~ .checkmark::after {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}
.invoice-load-btn {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}
.invoice-load-btn .btn {
	font-weight: 700;
	font-size: 14px;
	color: var(--accent);
	min-width: 170px;
	padding: 10px 15px;
	background: var(--paper);
	border: 2px solid var(--accent);
	border-radius: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.invoice-load-btn .btn:hover {
	background: var(--accent);
	color: var(--paper);
}
.invoice-load-btn .btn span {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 8px;
	vertical-align: 0;
	border: 3px solid rgba(51, 65, 78, 0.35);
	border-right-color: var(--accent);
	border-radius: 50%;
	animation: 0.75s linear infinite spinner-border;
}
.invoice-load-btn .btn:hover span {
	border-color: rgba(255, 255, 255, 0.5);
	border-right-color: var(--paper);
}

/*-----------------
	25. Doctors: статусы и модалка удаления
-----------------------*/

.custom-badge {
	border-radius: 8px;
	display: inline-block;
	font-size: 12px;
	min-width: 115px;
	padding: 5px 15px;
	text-align: center;
	border: 0;
}
.status-red,
a.status-red {
	background-color: var(--error-bg);
	color: var(--error);
}
.status-green,
a.status-green {
	background-color: var(--success-bg);
	color: var(--success);
}
.status-orange,
a.status-orange {
	background-color: var(--warning-bg);
	color: var(--warning);
}
.status-blue,
a.status-blue {
	background-color: var(--info-bg);
	color: var(--info);
}
/* В 808 фиолетовый и розовый - дополнительные цвета; в макете их нет,
   поэтому они переведены на акцентный и цвет ошибки */
.status-purple,
a.status-purple {
	background-color: var(--accent-soft);
	color: var(--accent-dark);
}
.status-pink,
a.status-pink {
	background-color: var(--error-bg);
	color: var(--error);
}
.status-grey,
a.status-grey {
	background-color: var(--muted-bg);
	color: var(--text-3);
}
.btn-grey {
	background-color: var(--muted-2);
	border: 1px solid var(--muted-2);
}
/* В 808 ширина ровно 90 px под «Close / Delete»; для русских слов - минимальная */
.delete-modal .modal-body .btn {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	min-width: 90px;
	color: var(--ink);
}
.delete-modal .modal-body .btn.btn-danger {
	color: var(--paper);
}
.delete-modal .modal-body > h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 0;
}
.custom-modal .modal-content {
	border: 0;
	background-color: var(--paper);
}
.custom-modal .modal-body {
	padding: 30px;
}

/*-----------------
	33. UI Kit: бейджи и аватары
-----------------------*/

.badge-soft-primary {
	color: var(--ink);
	background-color: rgba(18, 24, 42, 0.08);
}
.badge-soft-secondary {
	color: var(--accent-dark);
	background-color: var(--accent-soft);
}
.badge-soft-success {
	color: var(--success);
	background-color: var(--success-bg);
}
.badge-soft-info {
	color: var(--info);
	background-color: var(--info-bg);
}
.badge-soft-warning {
	color: var(--warning);
	background-color: var(--warning-bg);
}
.badge-soft-danger {
	color: var(--error);
	background-color: var(--error-bg);
}
.badge-soft-dark {
	color: var(--muted);
	background-color: var(--page-bg);
}
.badge-outline-primary {
	color: var(--ink);
	border: 1px solid var(--primary);
	background-color: transparent;
}
.badge-outline-secondary {
	color: var(--accent);
	border: 1px solid var(--accent);
	background-color: transparent;
}
.badge-outline-success {
	color: var(--success);
	border: 1px solid var(--success);
	background-color: transparent;
}
.badge-outline-warning {
	color: var(--warning);
	border: 1px solid var(--warning);
	background-color: transparent;
}
.badge-outline-danger {
	color: var(--error);
	border: 1px solid var(--error);
	background-color: transparent;
}
.badge-outline-dark {
	color: var(--ink-2);
	border: 1px solid var(--ink-2);
	background-color: transparent;
}
.avatar {
	background-color: var(--muted);
	border-radius: 50%;
	color: var(--paper);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 13px;
	width: 34px;
	height: 34px;
	margin: 0 10px 0 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	flex-shrink: 0;
}
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.avatar-xs {
	width: 1.65rem;
	height: 1.65rem;
	font-size: 10px;
}
.avatar-sm {
	width: 2.5rem;
	height: 2.5rem;
}
.avatar-lg {
	width: 3.75rem;
	height: 3.75rem;
	font-size: 18px;
}
.avatar-xl {
	width: 5rem;
	height: 5rem;
	font-size: 24px;
}
.avatar-xxl {
	width: 8rem;
	height: 8rem;
	font-size: 36px;
}
.avatar.shape {
	border-radius: 6px;
}
.avatar.avatar-online,
.avatar.avatar-offline,
.avatar.avatar-away {
	overflow: visible;
}
.avatar.avatar-online::before,
.avatar.avatar-offline::before,
.avatar.avatar-away::before {
	width: 25%;
	height: 25%;
	border-radius: 50%;
	content: "";
	border: 2px solid var(--paper);
	position: absolute;
	right: 0;
	bottom: 0;
}
.avatar.avatar-online::before { background-color: var(--success); }
.avatar.avatar-offline::before { background-color: var(--error); }
.avatar.avatar-away::before { background-color: var(--warning); }
.avatar-group {
	display: inline-flex;
	align-items: center;
}
.avatar-group .avatar {
	margin-right: 0;
	margin-left: -10px;
	border: 2px solid var(--paper);
}
.avatar-group .avatar:first-child {
	margin-left: 0;
}

/*-----------------
	42. Settings: загрузка файла и переключатель
-----------------------*/

.settings-form {
	margin-top: 20px;
}
.settings-label {
	margin-bottom: 10px;
	font-size: 13px;
}
.settings-btn {
	border: 1px solid var(--border);
	border-radius: 5px;
	color: var(--ink);
	cursor: pointer;
	font-weight: 400;
	padding: 15px 15px;
	position: relative;
	width: 100%;
	height: 46px;
}
.settings-btn .hide-input {
	position: relative;
	z-index: 1;
	cursor: pointer;
	min-height: auto;
	padding-left: 4px;
	padding-top: 0;
	line-height: 10px;
	width: 100%;
	opacity: 0;
}
.settings-btn .upload {
	position: absolute;
	z-index: 11;
	background: var(--primary);
	border-radius: 5px;
	right: 2px;
	top: 1.5px;
	width: 41px;
	height: 41px;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--paper);
}
.settings-btn:hover .upload {
	background: var(--ink-hover);
}
.settings-btn .file-name {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--muted-2);
	pointer-events: none;
}
.settings-btn .file-name.has-file {
	color: var(--ink);
}
.settings-size {
	font-size: 13px;
	color: var(--muted);
	font-style: italic;
	margin-top: 10px;
	margin-bottom: 0;
}
.settings-size span {
	font-weight: 700;
	color: var(--ink);
}
.upload-images {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--border);
	border-radius: 5px;
	display: flex;
	margin-top: 30px;
	width: 196px;
	height: 78px;
	justify-content: space-around;
	align-items: center;
	position: relative;
	margin-bottom: 24px;
}
.upload-images .btn-icon {
	color: var(--error);
	font-size: 16px;
	position: absolute;
	padding: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	right: 0px;
	top: 0px;
	background: transparent;
	border: 0;
}
.check {
	display: block;
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}
.checktoggle {
	background-color: var(--paper);
	border: 1px solid var(--muted-2);
	border-radius: 12px;
	cursor: pointer;
	display: block;
	font-size: 0 !important;
	height: 24px;
	margin-bottom: 0;
	position: relative;
	width: 48px;
}
.checktoggle:after {
	content: ' ';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(5px, -50%);
	width: 16px;
	height: 16px;
	background-color: var(--muted-2);
	border-radius: 50%;
	transition: left 300ms ease, transform 300ms ease;
}
.check:checked + .checktoggle {
	background-color: var(--primary);
	border: 1px solid var(--primary);
}
.check:checked + .checktoggle:after {
	background-color: var(--paper);
	left: 100%;
	transform: translate(calc(-100% - 5px), -50%);
}

/*-----------------
	Мастер по шагам (form-wizard.html)
-----------------------*/

.wizard .nav-tabs {
	flex-wrap: nowrap;
	position: relative;
	margin-top: 20px;
	border: 0;
	margin-bottom: 30px;
}
.wizard .nav-item {
	position: relative;
	min-height: 56px;
}
.wizard .nav-item .nav-link {
	width: 56px;
	height: 56px;
	position: absolute;
	background: var(--paper);
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	color: var(--muted);
	font-size: 20px;
	border: 1px solid var(--border);
	z-index: 2;
}
.wizard .nav-item .nav-link.active {
	background: var(--muted-bg);
	color: var(--ink);
	border: 1px solid var(--primary);
}
.wizard .nav-tabs li:after {
	content: "";
	width: 75%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: var(--border);
	height: 2px;
	left: -37.5%;
	top: 27px;
	z-index: 1;
}
.wizard .nav-tabs li:first-child::after {
	display: none;
}

/*-----------------
	Bootstrap Tagsinput (seo-settings.html)
-----------------------*/

.bootstrap-tagsinput {
	display: block;
	width: 100%;
	min-height: 45px;
	height: auto;
	padding: 6px 8px;
	color: var(--ink);
	background-color: var(--paper);
	border: 2px solid var(--border);
	border-radius: 10px;
	box-shadow: inherit;
	line-height: 30px;
	cursor: text;
}
.bootstrap-tagsinput input {
	border: none;
	box-shadow: none;
	outline: none;
	background-color: transparent;
	padding: 0 6px;
	margin: 0;
	width: auto;
	max-width: inherit;
	font-size: 14px;
}
.bootstrap-tagsinput input::placeholder {
	font-size: 14px;
	color: var(--muted-2);
}
/* Плагин вешает на тег .badge.badge-primary - как в 808, перекрываем фон через !important */
.bootstrap-tagsinput .tag {
	margin-right: 5px;
	color: var(--ink);
	background: var(--border) !important;
	border-radius: 0px;
	font-size: 14px;
	font-weight: 500;
	padding: 4px 10px;
	display: inline-block;
	line-height: 22px;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
	margin-left: 8px;
	cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
	content: "×";
	padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
	color: var(--error);
}

/*-----------------
	Toastr (toastr.html)
-----------------------*/

#toast-container > div,
.toast-container > div {
	opacity: 1;
	font-family: var(--font-main);
	font-size: 14px;
	box-shadow: none !important;
}
.toast {
	background-color: var(--primary);
}
.toast-success { background-color: var(--success); }
.toast-error { background-color: var(--error); }
.toast-info { background-color: var(--info); }
.toast-warning { background-color: var(--warning); }

/*-----------------
	43. Responsive (шапка и меню)
-----------------------*/

@media only screen and (min-width: 992px) {
	.mini-sidebar .header-left .logo span {
		display: none;
	}
	.mini-sidebar .header .header-left {
		padding: 0 10px;
		width: 60px;
	}
	.mini-sidebar .sidebar {
		width: 60px;
	}
	.mini-sidebar .menu-title {
		visibility: hidden;
		white-space: nowrap;
		overflow: hidden;
	}
	.mini-sidebar .sidebar .sidebar-menu ul > li > a span:not(.menu-side) {
		display: none;
	}
	.mini-sidebar .sidebar .sidebar-menu ul > li > a .menu-arrow,
	.mini-sidebar .sidebar .sidebar-menu ul ul {
		display: none !important;
	}
	.mini-sidebar .page-wrapper {
		margin-left: 60px;
	}
	.mini-sidebar .sidebar-menu > ul > li > a,
	.mini-sidebar .sidebar-menu .logout-btn a {
		padding: 12px 10px;
	}
	.mini-sidebar .sidebar-menu .logout-btn a span:not(.menu-side) {
		display: none;
	}
}
@media only screen and (max-width: 991.98px) {
	.header .header-left {
		position: absolute;
		width: 100%;
	}
	.mobile_btn {
		display: block;
	}
	a.mobile_btn {
		color: var(--ink);
		font-size: 24px;
		height: 70px;
		left: 0;
		line-height: 70px;
		padding: 0 20px;
		position: absolute;
		top: 0;
		width: 60px;
		z-index: 10;
	}
	#toggle_btn {
		display: none;
	}
	.header .top-nav-search {
		display: none;
	}
	.sidebar {
		margin-left: -225px;
		width: 225px;
		transition: all 0.4s ease;
	}
	.slide-nav .sidebar {
		margin-left: 0;
	}
	.page-wrapper {
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		transition: all 0.4s ease;
	}
	.slide-nav .page-wrapper {
		left: 225px;
		margin-left: 0;
	}
	.user-names {
		display: none;
	}
	.morning-user {
		padding: 30px;
	}
}
@media only screen and (max-width: 575.98px) {
	.page-wrapper > .content {
		padding: 15px;
	}
	.pagination {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	.pagination > li > a,
	.pagination > li > span {
		padding: 5px 10px !important;
	}
	.login-wrapper .loginbox .login-right {
		padding: 30px 20px;
	}
	.follow-group,
	.follow-btn-group {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.profile-user-box {
		padding-left: 20px;
	}
}

/*-----------------
	Дополнения платформы «Аудит»
	Элементы макета, которых в 808 нет в готовом виде.
	Собраны из тех же примитивов, размеров и цветов 808.
-----------------------*/

/* Иконка внутри статусного бейджа: «Регулярно», «Отложено» */
.custom-badge i {
	margin-right: 6px;
	vertical-align: -1px;
}

/* Плитка категории: в 808 есть контурная .dash-boxs и залитая .doctor-box-icon.
   В макете плитки категорий - акцентного цвета проекта. */
.dash-boxs.dash-boxs-accent {
	background: var(--accent-bg);
	border-color: var(--accent);
	color: var(--accent);
}
.doctor-box-icon.doctor-box-accent {
	background: var(--accent);
}
.dash-boxs.dash-boxs-sm,
.doctor-box-icon.doctor-box-sm {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 18px;
	margin: 0;
}

/* Цвета проекта: в 808 .theme-colors li span - квадраты 28×28 в настройке темы.
   В макете выбранный цвет отмечен галочкой. */
.theme-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.theme-colors li span {
	width: 28px;
	height: 28px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--muted-2);
	cursor: pointer;
	transition: all 0.4s;
	color: var(--paper);
	font-size: 14px;
}
.theme-colors li span:hover {
	transform: scale(1.1);
}
.theme-colors li span i {
	visibility: hidden;
}
.theme-colors li span.active {
	box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent-dark);
}
.theme-colors li span.active i {
	visibility: visible;
}
.theme-colors li span.theme-colors-add {
	background: var(--border);
	color: var(--muted);
	border-color: var(--border);
}

/* Шаги мастера: пройденный шаг (в 808 есть только «текущий») */
.wizard .nav-item .nav-link.done {
	background: var(--success);
	border-color: var(--success);
	color: var(--paper);
}
.wizard .nav-item .wizard-label {
	display: block;
	padding-top: 64px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
.wizard .nav-item .nav-link.active + .wizard-label,
.wizard .nav-item .nav-link.done + .wizard-label {
	color: var(--ink);
}

/* Аккордеон категорий: в 808 (accordions.html) заголовок - просто текст-ссылка.
   В макете в строке ещё плитка категории, счётчик тестов и шеврон. */
.custom-faq .card {
	margin-bottom: 8px;
}
.custom-faq .card-header {
	padding: 15px 20px;
}
.accordion-faq {
	font-size: 15px;
	font-weight: 500;
}
.accordion-faq a {
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--ink);
	min-width: 0;
}
.accordion-faq__title {
	flex: 1;
	min-width: 0;
}
.accordion-faq__count {
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
}
.accordion-faq__chevron {
	color: var(--muted);
	font-size: 18px;
	transition: transform 0.2s ease;
	transform: rotate(180deg);
}
.accordion-faq a.collapsed .accordion-faq__chevron {
	transform: rotate(0deg);
}
.custom-faq .activity-feed .feed-item {
	font-size: 14px;
	display: flex;
	align-items: center;
}
.custom-faq .activity-feed .feed-item:after,
.card .activity-feed.activity-feed-check .feed-item:after {
	display: none;
}

/* Отступ сверху в .circle-bar b нужен цифрам; иконку возвращаем в центр */
.wallet-widget .circle-bar > div b > i {
	margin-top: -2px;
}

/* Кольцо прогресса на тёмном hero */
.good-morning-blk .wallet-widget .circle-bar > div b {
	background: rgba(255, 255, 255, 0.08);
	color: var(--paper);
}

/* Нижнее меню мобильной версии: в 808 на телефоне меню выезжает слева,
   в макете - панель снизу. Пункты собраны из квадратов .menu-side. */
.mobile-tabbar {
	display: flex;
	justify-content: space-around;
	background: var(--paper);
	border-radius: 20px 20px 0 0;
	box-shadow: var(--shadow-sidebar);
	padding: 12px 8px 20px;
}
.mobile-tabbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-2);
}
.mobile-tabbar .menu-side {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--muted-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.mobile-tabbar a.active {
	color: var(--ink);
}
.mobile-tabbar a.active .menu-side {
	background: var(--primary);
	color: var(--paper);
}

/* Пользователь внизу меню: разделитель + аватар и имя.
   Ссылка оформлена как .logout-btn из 808 (у него там «Logout») */
.sidebar-user {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	border-top: 1px solid var(--border);
}
.sidebar-user .logout-btn {
	margin: 15px 0 20px;
}
.sidebar-user .logout-btn a {
	padding: 0;
}
.sidebar-user .avatar {
	width: 40px;
	height: 40px;
	margin: 0;
}
@media only screen and (min-width: 992px) {
	.mini-sidebar .sidebar-user {
		left: 10px;
		right: 10px;
	}
	/* Правило 808 прячет подписи только внутри .sidebar-menu,
	   а блок пользователя лежит вне его - прячем имя отдельно */
	.mini-sidebar .sidebar-user .logout-btn a span:not(.avatar) {
		display: none;
	}
}

/* Заголовок страницы: в 808 вместо него только хлебные крошки.
   Начертание - как у заголовков 808 (.morning-user h2), справа - кнопки */
.page-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 25px;
}
.page-heading-main {
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 0;
}
.page-heading h1 {
	font-size: 28px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.page-heading p {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.page-heading p a {
	color: var(--text-2);
}
.page-heading-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Кнопка-иконка: квадрат 40 из .add-group 808, с .btn-rounded - круг.
   Контурный вариант - для стрелки «Открыть» */
.btn-icon-only {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.btn-icon-only.btn-sm {
	width: 31px;
	height: 31px;
	font-size: 14px;
}
.add-group .btn-primary.btn-rounded {
	border-radius: 50%;
}

/* Фильтр-выпадашка с флажками: выглядит как select2 из 808
   (рамка 2 px, радиус 10, высота 40, уголок-стрелка) */
.dropdown-select {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	height: 40px;
	padding: 0 15px;
	font-size: 14px;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid var(--border);
	border-radius: 10px;
	text-align: left;
}
.dropdown-select:hover,
.dropdown-select:focus,
.dropdown-select.show {
	color: var(--ink);
	background: var(--paper);
	border-color: var(--primary);
}
.dropdown-select::after {
	content: "";
	width: 6px;
	height: 6px;
	border: 0;
	border-bottom: 1px solid var(--primary);
	border-right: 1px solid var(--primary);
	transform: rotate(45deg);
	margin: -3px 2px 0 0;
	transition: transform 0.15s ease-in-out;
}
.dropdown-select.show::after {
	transform: rotate(-135deg);
	margin-top: 3px;
}
.dropdown-select + .dropdown-menu {
	border-radius: 10px;
	padding: 15px;
	min-width: 100%;
}
/* Маленький фильтр (в попапе «Все действия»): серая подложка, как .add-group */
.dropdown-select.dropdown-select-sm {
	height: 30px;
	width: auto;
	gap: 10px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 500;
	background: var(--muted-bg);
	border-color: var(--muted-bg);
	border-radius: 8px;
}

/* Пароль скрыт точками + кнопка «Изменить» (страница профиля) */
.form-control.pass-hidden {
	letter-spacing: 3px;
	background: var(--muted-bg);
	border-color: var(--muted-bg);
}

/* Подложка внутри карточки: панели «Дата / Время / Подтвердить»,
   «Время проверки 17:00 / Изменить». Цвет и радиус - как у .comman-activitys 808 */
.card-box.card-box-tint {
	background: var(--muted-bg);
	border-radius: 16px;
	margin-bottom: 0;
}
.card-box-tint .form-control {
	border-color: var(--paper);
}
.card-box-tint .local-forms label {
	background: transparent;
	position: static;
	padding: 0;
	margin-bottom: 8px;
	display: block;
	color: var(--muted);
}

/* Мастер с номерами шагов, как в макете: пройден - зелёный с галочкой,
   текущий - с обводкой, следующий - серый */
.wizard .nav-item .nav-link {
	font-weight: 600;
	font-size: 18px;
}
.wizard .nav-item .nav-link:not(.active):not(.done) {
	background: var(--muted-2);
	border-color: var(--muted-2);
	color: var(--paper);
}
.wizard .nav-item .nav-link.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--paper);
	box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--primary);
}
.wizard.wizard-sm .nav-tabs {
	margin: 0;
}
.wizard.wizard-sm .nav-item {
	min-height: 32px;
}
.wizard.wizard-sm .nav-item .nav-link {
	width: 32px;
	height: 32px;
	font-size: 13px;
}
.wizard.wizard-sm .nav-item .nav-link.active {
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--primary);
}
.wizard.wizard-sm .nav-tabs li:after {
	top: 15px;
}
.wizard.wizard-sm .nav-item .wizard-label {
	padding-top: 40px;
	font-size: 11px;
	line-height: 1.3;
}

/* Hero профиля как в макете: аватар с инициалами, имя, почта, кнопки справа */
.doctor-profile-head.profile-head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 30px;
}
.doctor-profile-head .profile-user-box {
	padding-left: 0;
}
.doctor-profile-head .profile-user-img .avatar {
	background: var(--muted-bg);
	color: var(--text-2);
}
.doctor-profile-head .follow-btn-group {
	width: auto;
}

/* Форма входа как в макете: карточка по центру страницы, заголовок по центру,
   «Я не робот» в рамке поля. Детали - из login.html 808 */
.login-wrapper.login-center {
	min-height: 100vh;
	padding: 30px 15px;
	background: var(--page-bg);
}
.login-center .loginbox {
	max-width: 480px;
}
.login-wrapper.login-center .loginbox .login-right h2 {
	text-align: center;
	margin-bottom: 8px;
}
.login-center .account-subtitle {
	text-align: center;
	margin-bottom: 30px;
}
.login-center .input-block > label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 8px;
}
.login-center .input-block .position-relative {
	position: relative;
}
.captcha-box {
	display: flex;
	align-items: center;
	min-height: 45px;
	padding: 10px 15px;
	border: 2px solid var(--border);
	border-radius: 10px;
	margin-bottom: 20px;
}
.captcha-box .custom_check {
	margin-bottom: 0;
}

/* Мобильная версия по макету: шапка с логотипом слева, навигация - панель снизу.
   Меню 808, выезжающее слева, остаётся для экранов без панели */
@media only screen and (max-width: 991.98px) {
	.has-tabbar .mobile_btn {
		display: none;
	}
	.has-tabbar .header .header-left {
		position: relative;
		width: auto;
	}
	.has-tabbar .page-wrapper {
		padding-bottom: 100px;
	}
	.has-tabbar .mobile-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
	}
}
@media only screen and (min-width: 992px) {
	.mobile-tabbar {
		display: none;
	}
}
@media only screen and (max-width: 575.98px) {
	.page-heading h1 {
		font-size: 22px;
	}
	.doctor-profile-head.profile-head-row {
		padding: 20px;
	}
}

/*-----------------
	Тема «808 Checker»: основной градиент и тёмное меню
	Правила ниже перекрывают цвета разделов выше там, где макет
	заливает элемент градиентом, а не одним цветом.
-----------------------*/

/* Кнопки */
.btn-primary,
.btn-secondary {
	background-image: var(--primary-gradient);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-image: var(--primary-hover-gradient);
}
.btn-primary:active,
.btn-primary.active,
.btn-secondary:active,
.btn-secondary.active {
	background-image: none;
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
	background-image: none;
}
/* Кнопки на основе .btn-primary, у которых в 808 своя светлая заливка */
.add-group .btn-primary,
.doctor-submit .cancel-form {
	background-image: none;
}
.add-group .btn-primary:hover,
.doctor-submit .cancel-form:hover {
	background-image: var(--primary-gradient);
}
/* Контурная кнопка макета: серая рамка #A4AAB7, тёмный текст */
.btn-outline-primary {
	--bs-btn-color: var(--ink);
	--bs-btn-border-color: var(--muted-2);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-color: var(--ink);
	--bs-btn-active-bg: var(--muted-bg);
	--bs-btn-active-border-color: var(--muted-2);
}
.btn-outline-primary:hover {
	background-image: var(--primary-gradient);
}
/* «Активировать сценарий» в макете - сплошной тёмный #12182A */
.btn-dark {
	--bs-btn-bg: var(--ink);
	--bs-btn-border-color: var(--ink);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-bg: var(--primary-press);
	--bs-btn-active-border-color: var(--primary-press);
}

/* Активные вкладки, страница, шаг, тумблер, плитки */
.nav-tabs.nav-tabs-solid > li > a.active,
.nav-tabs.nav-tabs-solid > li > a.active:hover,
.nav-tabs.nav-tabs-solid > li > a.active:focus,
.nav-tabs.menu-tabs .nav-item.active .nav-link,
.nav-tabs.menu-tabs .nav-link.active,
.page-item.active .page-link,
.wizard .nav-item .nav-link.active,
.check:checked + .checktoggle,
.doctor-box-icon,
.bg-primary,
.mobile-tabbar a.active .menu-side,
.settings-btn .upload,
.follow-btn-group .follow-btns {
	background-image: var(--primary-gradient);
}
.check:checked + .checktoggle {
	border-color: var(--primary);
}
/* Выключенный тумблер в макете - серая дорожка #A8AFB9 и белый кружок */
.checktoggle {
	background-color: var(--toggle-off);
	border-color: var(--toggle-off);
}
.checktoggle:after {
	background-color: var(--paper);
}

/* Плитки категорий: залитая - градиент, контурная - рамка основного цвета */
.dash-boxs.dash-boxs-accent {
	background: var(--paper);
	border-color: var(--primary);
	color: var(--primary);
}
.doctor-box-icon.doctor-box-accent {
	background-color: var(--primary);
}

/* Статус «Не регулярно» */
.status-grey,
a.status-grey {
	background-color: var(--neutral-bg);
	color: var(--text-3);
}

/* Хлебные крошки: путь серый, текущая страница тёмная */
.breadcrumb-item a {
	color: var(--muted);
}
.breadcrumb-item a:hover {
	color: var(--ink);
}
.breadcrumb-item.active {
	color: var(--ink);
}
.breadcrumb-item + .breadcrumb-item i {
	color: var(--muted);
}

/* Боковое меню: в макете залито градиентом, пункты белые,
   неактивные - с прозрачностью 60% */
.sidebar {
	background: var(--primary-gradient);
	box-shadow: none;
}
.sidebar .menu-title {
	color: rgba(254, 254, 254, 0.6);
}
.sidebar .sidebar-menu li a,
.sidebar .sidebar-menu > ul > li > a,
.sidebar .sidebar-menu ul ul a {
	color: rgba(254, 254, 254, 0.6);
}
.sidebar .sidebar-menu li a:hover,
.sidebar .sidebar-menu li.active > a,
.sidebar .sidebar-menu ul li .active,
.sidebar .sidebar-menu ul li a.subdrop,
.sidebar .sidebar-menu ul ul a.active {
	color: var(--paper);
}
.sidebar .sidebar-menu ul li a span.menu-side {
	background: rgba(254, 254, 254, 0.08);
	color: inherit;
}
.sidebar .sidebar-menu ul li .active span.menu-side,
.sidebar .sidebar-menu ul li a.subdrop span.menu-side,
.sidebar .sidebar-menu li a:hover span.menu-side {
	background: rgba(254, 254, 254, 0.16);
	color: var(--paper);
}
.sidebar .sidebar-menu ul .submenu ul .active:before {
	color: var(--paper);
}
.sidebar .avatar.shape,
.sidebar .avatar.bg-secondary {
	background-color: rgba(254, 254, 254, 0.16) !important;
	background-image: none;
}
.sidebar-user {
	border-top-color: rgba(255, 255, 255, 0.2);
}
.sidebar-user .logout-btn a {
	color: var(--paper);
}
.sidebar-user .avatar {
	background-color: rgba(254, 254, 254, 0.2);
}

/* Hero сводки: градиент; подзаголовок - вторичный цвет макета */
.morning-user h2 span {
	color: var(--paper);
}
.morning-user p {
	color: var(--muted);
}

/* Шапка профиля: в новом макете это белая карточка с тёмной кнопкой */
.doctor-profile-head {
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-card);
}
.doctor-profile-head .names-profiles h4 {
	color: var(--ink);
}
.doctor-profile-head .names-profiles h5 {
	color: var(--muted);
}
.doctor-profile-head .doctor-follows h5 {
	color: var(--muted);
}
.doctor-profile-head .doctor-follows h4 {
	color: var(--ink);
}
.doctor-profile-head .follow-btn-group .follow-btns {
	background-color: var(--primary);
	background-image: var(--primary-gradient);
	border-color: var(--primary);
	color: var(--paper);
}
.doctor-profile-head .follow-btn-group .follow-btns:hover {
	background-image: var(--primary-hover-gradient);
	border-color: var(--primary-hover);
}
.doctor-profile-head .follow-btn-group .message-btns {
	background: transparent;
	border-color: var(--muted-2);
	color: var(--ink);
}
.doctor-profile-head .follow-btn-group .message-btns:hover {
	background: var(--muted-bg);
}
.doctor-profile-head .profile-edit-icon {
	box-shadow: 0 0 0 2px var(--primary);
}

/* Карточки макета - с мягкой тенью */
.card,
.card-box,
.dash-widget,
.doctor-list-blk {
	box-shadow: var(--shadow-card);
}