/**
 * Основные стили в системе
 *
 * @file    public/app/skin/css/default.css
 *
 * @package Base System
 * @author  Fred Melnychuk <fredeveloper@gmail.com>
 * @version 0.3.16
 */

body {background-color: #CCCCCC; font-family: Tahoma; font-size: 12px; height: 100%; overflow-y : scroll;}
body.noscroll {overflow-y: hidden; padding-right: 18px;}
body,td,th {}

html.wait, html.wait * {cursor: wait !important;}
label span:hover {text-decoration: underline; cursor: pointer;}

a {color: #488DCD; text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
.no-underline, .no-underline * {text-decoration: none !important;}
.info-tooltip {text-decoration: none !important;}
.info-tooltip:hover {border-bottom: 1px dashed; cursor: help;}
.info-tooltip-html {text-decoration: none !important;}
.info-tooltip-html:hover {border-bottom: 1px dashed; cursor: help;}
.info-tooltip-interactive {text-decoration: none !important;}
.info-tooltip-interactive:hover {border-bottom: 1px dashed; cursor: help;}
.tooltipster-row {padding: 0px; margin: 0px;}

.dark-links {}
.dark-links a {color: #000;}
.green {color: green !important;}
.gray {color: #CCC; !important;}

.underline-links a {text-decoration: underline;}

.style1 {color: #FFFFFF; font-weight: bold;}
.style2 {color: #FF9900}
.style3 {color: #000000; font-weight: bold; font-style: italic;}

.logo {padding: 3px 20px 5px 10px;}

.clear {clear: both;}
div.clear {height: 0px; line-height: 0px;}

.template {display: none;}
.hidden {display: none !important;}

.page-heading {display: block; font-size: 20px; font-weight: bold; margin-bottom: 25px; text-align: center; width: auto; margin-top: 0; padding-top: 10px;}

.inp_cancel {/*color: #7B7B7B;*/}
.inp_button {cursor: pointer;}
.inp_button:disabled {cursor: default;}
.inp:disabled {background-color: rgb(235, 235, 228); color: rgb(84, 84, 84);}
a .inp_button {text-decoration: none !important;}
.button-build {font-family: verdana; /*font-size: 18px;*/ font-weight: bold; height: 33px;}
.button-reset {}

.btn-save {
  background-color: #28a745;
  color: #ffffff;
  font-size: 16px;
  padding: 12px 26px;
  border: 1px solid #1e7e34;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-save:hover {
  background-color: #218838;
}

.btn-save:active {
  transform: scale(0.97);
}

.custom_ico {position: relative}
.custom_ico .button-add {margin-top: 0px; text-indent: -999px; border: none; width: 14px; height: 15px; padding: 0; background: url("../images/icon/add.png") 0 0 no-repeat; position: absolute; left: 0px; top: 50%; margin-top: -7.5px; }
.custom_ico .button-edit, .custom_ico  .button-delete {text-indent: -999px; border: none; width: 9px; height: 9px; padding: 0; margin: 2px 0 0 14px;}
.custom_ico .button-edit {background: url("../images/icon/edit.png") 0 0 no-repeat;}
.custom_ico .button-edit.button-copy {background: url("../images/icon/copy-1.png") 0 0 no-repeat; width: 15px; height: 12px;}
.custom_ico .button-delete {background: url("../images/icon/delete2.png") 0 0 no-repeat;}
.del-placeholder {display:inline-block; width: 23px;}
.index-wrapper {display:inline-block; height: 9px;}

.pbody {background: #000 url("../images/bg.jpg") repeat-x scroll 0 0;}

SMALL {font-size: 10px;}

.header {font-size: 16px;}
.header_message {background: none repeat scroll 0 0 #fef4f4; border: 1px dashed green; font-size: 16px; margin-bottom: 18px; padding: 15px; width: 615px; margin-top: 10px;}
.header_message.success {background: #dfedde none repeat scroll 0 0; border: 1px dashed #12cb10;}
.header_message.error {background: #efcdcd none repeat scroll 0 0; border: 1px dashed #ff0008;}
.header_message.information {background: #F9F9E9 none repeat scroll 0 0; border: 1px dashed #e8d211;}
.header_message.information.auto {width: auto; margin: 10px; display: inline-block;}

.disabled-header {color: #CCC;} 
.disabled-header * {text-decoration: none !important; cursor: default !important;}

.cursor-pointer {cursor: pointer;}

.inner-td-padding-off td {padding-bottom: 0px !important;}

.border-dashed-red {border: 1px dashed red;}

.layout-root {min-width: 1300px;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
span.required {color: red; font-size: 14px;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* AUTOCOMPLETE FIELD ------------------------------------------------------------------------------------------------------------------------------------- */
.f-acl-container {}
.f-acl-container .buttons-container {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #FFF; border: 1px solid #CCC; padding: 4px 4px 0; min-height: 28px; cursor: text; position: relative;}
.f-acl-container .buttons-container .placeholder {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 0; line-height: 24px; color: #626969; display: none;}
.f-acl-container.inactive *, .f-acl-container .buttons-container.inactive {cursor: default}
.f-acl-container .buttons-container .inp_text {background: none repeat scroll 0 0 #fff; border: 0 none; font-family: courier new; height: 22px; margin: 0; padding: 0; width: 20px;}
.f-acl-container .buttons-container .button {background: url("../images/f-acl-button-bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #707070; border-radius: 5px; display: inline-block; height: 22px; line-height: 22px; padding: 0 3px; white-space: nowrap; cursor: pointer; position: relative; margin-right: 5px; margin-bottom: 4px;}
.f-acl-container .buttons-container .button .close {background: url("../images/f-acl-button-close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; height: 7px; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 7px;}
.f-acl-container .buttons-container .button .label {padding-right: 6px; white-space: nowrap; font-size: 11px;}
.f-acl-container.disabled {}
.f-acl-container.disabled .buttons-container {background: #EDEDED;}
.f-acl-container.disabled .buttons-container * {display: none;}

.f-acl-container .inp_autocomplete {background: transparent; border: 0 none; margin: 0; padding: 0; width: 100%; height: 1px; line-height: 1px; position: relative; top: -4px; color: #FFF; padding-top: 1px;}

.ui-autocomplete.f-acl {background: none repeat scroll 0 0 #fff !important; -webkit-border-radius: 0 0 5px 5px !important; -moz-border-radius: 0 0 5px 5px !important; border-radius: 0 0 5px 5px !important;	-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #fff; border-color: -moz-use-text-color #ccc #ccc; border-image: none; border: 1px solid #ccc; border-style: none solid solid; border-width: 0 1px 1px; padding-top: 5px; z-index: 10000; max-height: 370px; overflow-x: hidden; overflow-y: auto;}
.ui-autocomplete.f-acl li {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.ui-autocomplete.f-acl .f-acl-item-with-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.ui-autocomplete.f-acl .f-acl-item-with-count__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-autocomplete.f-acl .f-acl-item-with-count__count {
  display: block;
  flex: 0 0 auto;
  color: #666;
  text-align: right;
  min-width: 24px;
}

.ui-autocomplete.f-acl .f-acl-item-cold .f-acl-item-with-count__label,
.ui-autocomplete.f-acl .f-acl-item-cold .f-acl-item-with-count__count {
  color: #999;
}

.ui-autocomplete .f-acl-loader-item,
.ui-autocomplete .f-acl-loader-item *,
.ui-autocomplete .f-acl-loader-item .ui-menu-item-wrapper {
  cursor: default !important;
}

.ui-autocomplete .f-acl-loader-item.ui-state-focus,
.ui-autocomplete .f-acl-loader-item.ui-state-active,
.ui-autocomplete .f-acl-loader-item:hover,
.ui-autocomplete .f-acl-loader-item > .ui-menu-item-wrapper,
.ui-autocomplete .f-acl-loader-item.ui-state-focus > .ui-menu-item-wrapper,
.ui-autocomplete .f-acl-loader-item.ui-state-active > .ui-menu-item-wrapper,
.ui-autocomplete .f-acl-loader-item:hover > .ui-menu-item-wrapper {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* ТАБЛИЦЫ ------------------------------------------------------------------------------------------------------------------------------------------------ */
.data-table {}
.data-table.simple {}
.data-table.simple th {background-color: #CCCCCC; padding: 2px 5px;}
.data-table.simple th a.section-url {text-decoration: none; color: #000; font-size: 14px;}
.data-table.simple.inner {margin-top: 4px;}
.data-table.simple.inner td {padding: 3px 5px;}
.data-table.simple .buttons-container {padding: 15px 0 0px 0;}
.data-table.simple .f-acl-container .buttons-container {padding: 4px 4px 0;}
.data-table.simple .f-acl-container .buttons-container.inactive, #geos textarea.inactive {background-color: #EEE; border: 1px solid #CCC;}
.data-table.simple .f-acl-container .buttons-container.inactive input {border: none; margin: 3px 0 0 3px}
.data-table.simple.manage .inp_textarea, 
.data-table.simple.manage .inp_text, 
.data-table.simple.manage .inp_select {width: 350px;}
.page-spot-edit .data-table.simple.manage .inp_text,
.page-spot-edit .data-table.simple.manage .inp_select {width: 100%; padding: 1px 2px;}
.inner-subtable {}
.inner-subtable td {padding: 3px 10px 3px 0 !important;}
.data-table.simple.manage .inp_textarea,
.data-table.simple.manage .inp_text,
.data-table.simple.manage .select {padding: 1px 2px;}
#popunder-include-switcher {margin: 4px 0;}
#popunder-include-switcher label {margin-right: 10px;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */


.notification-count {
  background-color: red; /* Фоновый цвет кружка */
  color: white; /* Цвет текста */
  border-radius: 50%; /* Делает фон круглым */
  padding: 0 5px; /* Паддинги для формирования круга */
  font-size: 12px; /* Размер шрифта */
  height: 20px; /* Высота кружка */
  line-height: 20px; /* Выравнивание текста по вертикали */
  display: inline-block; /* Делает элемент строчным с возможностью задавать ширину и высоту */
  text-align: center; /* Горизонтальное выравнивание текста */
  min-width: 11px; /* Минимальная ширина, чтобы обеспечить круглую форму даже при одной цифре */
}

li.active .notification-count {
}

/* Profile avatar and account menu --------------------------------------------------------- */
.account-menu {position: relative; display: inline-block; vertical-align: middle; font-style: normal;}
.account-menu > summary {display: grid; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 50%; cursor: pointer; list-style: none;}
.account-menu > summary::-webkit-details-marker {display: none;}
.account-menu > summary:hover,
.account-menu > summary:focus-visible,
.account-menu.active > summary,
.account-menu[open] > summary {border-color: #aebdea; background: #edf1ff; outline: none;}
.account-menu-popover {position: absolute; top: calc(100% + 7px); right: 0; z-index: 100; display: grid; min-width: 230px; padding: 7px; border: 1px solid #d7dce5; border-radius: 11px; background: #fff; box-shadow: 0 18px 44px rgba(30,45,75,.2); text-align: left;}
.account-menu-person {display: grid; gap: 2px; margin: 2px 3px 6px; padding: 7px 9px 10px; border-bottom: 1px solid #e2e5ea;}
.account-menu-person strong,
.account-menu-person span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-menu-person strong {color: #222; font-size: 13px;}
.account-menu-person span {color: #777; font-size: 11px; font-weight: normal;}
.account-menu-popover > a {padding: 9px 11px; border-radius: 8px; color: #555; font-size: 13px; font-weight: bold; text-decoration: none;}
.account-menu-popover > a:hover,
.account-menu-popover > a:focus-visible,
.account-menu-popover > a.active {background: #edf1ff; color: #3157d5;}
.account-settings-menu {display: grid;}
.account-settings-menu > summary {display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 8px; color: #555; font-size: 13px; font-weight: bold; cursor: pointer; list-style: none;}
.account-settings-menu > summary::-webkit-details-marker {display: none;}
.account-settings-menu > summary:hover,
.account-settings-menu > summary:focus-visible,
.account-settings-menu.active > summary {background: #edf1ff; color: #3157d5; outline: none;}
.account-settings-arrow {margin-left: 15px; font-size: 18px; font-weight: normal; line-height: 10px; transition: transform .15s ease;}
.account-settings-menu[open] .account-settings-arrow {transform: rotate(90deg);}
.account-settings-list {display: grid; margin: 2px 0 3px 12px; padding-left: 7px; border-left: 2px solid #e2e7f5;}
.account-settings-list > a {padding: 7px 9px; border-radius: 7px; color: #667085; font-size: 12px; font-weight: bold; text-decoration: none;}
.account-settings-list > a:hover,
.account-settings-list > a:focus-visible,
.account-settings-list > a.active {background: #f2f5ff; color: #3157d5; outline: none;}
.account-menu-divider {height: 1px; margin: 5px 4px; background: #e2e5ea;}
.account-menu-popover > a.account-menu-logout:hover,
.account-menu-popover > a.account-menu-logout:focus-visible {background: #fff1f0; color: #b42318;}

.user-avatar {box-sizing: border-box; display: inline-grid; flex: 0 0 auto; overflow: hidden; place-items: center; border: 1px solid rgba(49,87,213,.14); border-radius: 50%; background: linear-gradient(145deg,#e9efff,#dce5ff); color: #2546aa; font-weight: bold; line-height: 1; text-transform: uppercase; box-shadow: 0 1px 3px rgba(16,24,40,.08);}
.user-avatar img {display: block; width: 100%; height: 100%; object-fit: cover;}
.user-avatar-sm {width: 24px; height: 24px; font-size: 9px;}
.user-avatar-xl {width: 104px; height: 104px; font-size: 26px;}

.profile-page {width: min(680px, calc(100% - 30px)); margin: 0 auto 35px; color: #252525;}
.profile-page .page-heading {margin: 10px 0 18px;}
.profile-alert {margin-bottom: 15px; padding: 12px 14px; border-radius: 7px; font-size: 13px;}
.profile-alert-error {border: 1px solid #efb4b4; background: #fff1f0; color: #8d1f17;}
.avatar-uploader-card {display: flex; align-items: center; gap: 20px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid #d7dce5; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(30,45,75,.08);}
.avatar-uploader-preview {display: grid; flex: 0 0 auto; place-items: center;}
.avatar-uploader-copy {display: grid; gap: 5px; min-width: 0;}
.avatar-uploader-copy > strong {font-size: 16px;}
.avatar-uploader-copy > p {margin: 0; color: #667085; font-size: 13px; line-height: 1.45;}
.avatar-uploader-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 5px;}
.avatar-upload-feedback {color: #667085; font-size: 12px;}
.avatar-upload-feedback.is-error {color: #b42318;}
.avatar-upload-feedback.is-success {color: #19733a;}
.profile-form-card {display: grid; gap: 14px; padding: 20px; border: 1px solid #d7dce5; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(30,45,75,.08);}
.profile-form-card label {display: grid; gap: 6px; color: #3a3a3a; font-size: 13px; font-weight: bold;}
.profile-form-card input {box-sizing: border-box; width: 100%; padding: 8px 9px; border: 1px solid #bfc5cf; border-radius: 5px; background: #fff; font: inherit; font-weight: normal;}
.profile-form-card input:disabled {background: #f2f3f5; color: #666;}
.profile-form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.profile-hint {color: #777; font-size: 11px; font-weight: normal;}
.profile-button {justify-self: start; padding: 8px 14px; border: 1px solid #2546aa; border-radius: 6px; background: #3157d5; color: #fff; font: inherit; font-weight: bold; cursor: pointer;}
.profile-button:hover {background: #2546aa;}
.profile-button:disabled {cursor: wait; opacity: .65;}
.profile-button-secondary {border-color: #aeb6c3; background: #fff; color: #344054;}
.profile-button-secondary:hover {background: #f3f5f8;}
.profile-notification-settings {display: grid; gap: 13px; margin-top: 2px; padding-top: 18px; border-top: 1px solid #e2e5ea;}
.profile-notification-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;}
.profile-notification-heading h2 {margin: 0 0 4px; color: #252525; font-size: 17px;}
.profile-notification-heading p {margin: 0; color: #667085; font-size: 12px; font-weight: normal; line-height: 1.45;}
.profile-telegram-state {flex: 0 0 auto; padding: 5px 8px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: bold; white-space: nowrap;}
.profile-telegram-state.is-connected {border-color: #a9d8b9; background: #edf9f1; color: #19733a;}
.profile-telegram-state.is-disconnected {border-color: #e2c389; background: #fff8e8; color: #8a5a00;}
.profile-notification-list {overflow: hidden; border: 1px solid #d7dce5; border-radius: 9px;}
.profile-notification-columns,
.profile-notification-row {display: grid; grid-template-columns: minmax(0,1fr) 86px 96px; align-items: center; gap: 10px;}
.profile-notification-columns {padding: 8px 12px; background: #f5f7fa; color: #667085; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.profile-notification-columns span:not(:first-child) {text-align: center;}
.profile-notification-row {padding: 12px; border-top: 1px solid #e2e5ea;}
.profile-notification-copy {display: grid; gap: 3px; min-width: 0;}
.profile-notification-copy strong {color: #252525; font-size: 13px;}
.profile-notification-copy span {color: #667085; font-size: 11px; font-weight: normal; line-height: 1.35;}
.profile-form-card label.profile-notification-toggle {display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: normal; cursor: pointer;}
.profile-form-card label.profile-notification-toggle input[type="checkbox"] {width: 17px; height: 17px; margin: 0; padding: 0; accent-color: #3157d5; cursor: pointer;}
.profile-form-card label.profile-notification-toggle span {display: none;}
.profile-notification-empty {margin: 0; padding: 12px 13px; border-radius: 8px; background: #f5f7fa; color: #667085; font-size: 12px; line-height: 1.45;}
.profile-notification-note {margin: 0; color: #667085; font-size: 11px; line-height: 1.4;}

body.avatar-crop-open {overflow: hidden;}
.avatar-crop-modal {position: fixed; inset: 0; z-index: 220; display: grid; overflow: auto; place-items: center; padding: 24px; background: rgba(15,23,42,.68);}
.avatar-crop-modal[hidden] {display: none;}
.avatar-crop-dialog {box-sizing: border-box; width: min(520px,100%); padding: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.32);}
.avatar-crop-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px;}
.avatar-crop-heading h2 {margin: 0; font-size: 21px;}
.avatar-crop-heading p {margin: 0 0 3px; color: #3157d5; font-size: 11px; font-weight: bold; text-transform: uppercase;}
.avatar-crop-close {display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 8px; background: #f2f4f7; color: #667085; font: inherit; font-size: 21px; line-height: 1; cursor: pointer;}
.avatar-crop-stage {display: grid; width: min(360px,100%); margin: 0 auto; overflow: hidden; place-items: center; border-radius: 10px; background: #111827;}
.avatar-crop-stage canvas {display: block; width: min(360px,100%); height: auto; cursor: grab; touch-action: none;}
.avatar-zoom-control {display: grid; gap: 6px; margin: 14px auto 0; width: min(360px,100%); font-size: 13px; font-weight: bold;}
.avatar-crop-note {margin: 9px auto 0; width: min(360px,100%); color: #667085; font-size: 12px; line-height: 1.4;}
.avatar-crop-actions {display: flex; gap: 10px; margin-top: 16px;}

@media (max-width: 600px) {
  .account-menu-popover {position: fixed; top: 48px; right: 10px;}
  .avatar-uploader-card {align-items: center; flex-direction: column; text-align: center;}
  .avatar-uploader-actions {align-items: stretch; flex-direction: column; width: 100%;}
  .profile-form-row {grid-template-columns: 1fr;}
  .profile-notification-heading {align-items: stretch; flex-direction: column;}
  .profile-telegram-state {align-self: flex-start;}
  .profile-notification-columns {display: none;}
  .profile-notification-row {grid-template-columns: 1fr 1fr; gap: 12px;}
  .profile-notification-copy {grid-column: 1 / -1;}
  .profile-form-card label.profile-notification-toggle {justify-content: flex-start; padding: 7px 9px; border-radius: 7px; background: #f5f7fa;}
  .profile-form-card label.profile-notification-toggle span {display: inline;}
  .avatar-crop-modal {padding: 12px;}
  .avatar-crop-dialog {padding: 15px;}
  .avatar-crop-actions {display: grid;}
  .avatar-crop-actions .profile-button {justify-self: stretch;}
}