@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-ExtraLight.woff2') format('woff2');
   font-size: normal;
   font-weight: 200;
}

@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-Light.woff2') format('woff2');
   font-size: normal;
   font-weight: 300;
}

@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-Regular.woff2') format('woff2');
   font-size: normal;
   font-weight: 400;
}

@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-SemiBold.woff2') format('woff2');
   font-size: normal;
   font-weight: 600;
}

@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-Bold.woff2') format('woff2');
   font-size: normal;
   font-weight: 700;
}

@font-face {
   font-family: 'FiraSansExtraCondensed';
   src: url('./fonts/FiraSansExtraCondensed-ExtraBold.woff2') format('woff2');
   font-size: normal;
   font-weight: 800;
}

/* :root {
   --color-ins-text: #4268a9;
   --color-hover: #e3def1;
   --color-ins-bg: #ffead0; */
/* accent-color: #572FED; */
/* } */

.hide {
   display: none !important;
}

a {
   color: var(--color-ins-text);
}

.font_phone {
   font-family: monospace;
}

.w100 {
   width: 100%;
}

hr {
   width: 100%;
   margin: 10px 0;
   border: 1px solid #929292;
}

body {
   background: #fff;
   /* font-family: "Roboto", sans-serif; */
   font-family: 'FiraSansExtraCondensed', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   padding-bottom: 50px;
   overflow: hidden;
}

.main {
   width: 100%;
   padding: 0 20px;
}

/* header */
.header {
   display: flex;
   flex-direction: column;
}

.main-row {
   display: flex;
   gap: 20px;
   align-items: center;
   background: #383637;
   padding: 6px 20px;
   color: #fff;
   font-family: sans-serif;
}

.logo {
   font-size: 30px;
   font-weight: 700;
   display: flex;
   align-items: center;
}

.logo img {
   margin-top: 6px;
   width: 36px;
}

.doc_name_log {
   font-size: 18px;
   font-weight: 600;
}

.search {
   border-radius: 4px;
   padding: 8px 10px;
   height: fit-content;
   font-size: 16px;
   background: #ffffff3b;
   color: #fff;
}

.search::placeholder {
   color: #fff;
   /* Серый цвет */
   opacity: 1;
   /* Убедитесь, что прозрачность 100% (в Firefox по умолчанию может быть меньше) */
}

.search:-ms-input-placeholder {
   color: #fff;
}

in.searchput::-webkit-input-placeholder {
   color: #fff;
}

.expander {
   flex: 1;
}

.system__part {
   display: flex;
   align-items: center;
   gap: 20px;
}

.header__notifications,
.header__messages {
   position: relative;
   height: 25px;
   width: 25px;
}

.header__notifications img,
.header__messages img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.header__notifications span,
.header__messages span,
.messages_no_answer {
   position: absolute;
   top: -5px;
   right: -10px;
   border-radius: 50%;
   font-size: 14px;
   font-weight: 600;
   width: 24px;
   height: 24px;
   display: flex;
   background-color: #ff6c6c;
   color: #fff;
   justify-content: center;
   align-items: center;
}

.label_notification {
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #ccc;
   flex-shrink: 0;
}

.notified-yes {
   background-color: #62ad3e;
}

.user {
   position: relative;
   display: flex;
   gap: 0px;
   align-items: center;
   gap: 10px;
   margin-left: 20px;
}

.clicker-area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   cursor: pointer;
}

.user_icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
}

.user_name {
   font-size: 18px;
   font-weight: 600;
}

.lk_inter,
.enter {
   display: block;
   text-align: end;
}

.btn-el {
   cursor: pointer;
}

.user-menu {
   visibility: hidden;
   position: absolute;
   top: calc(100% + 2px);
   right: 0;
   top: 100%;
   border-radius: 4px;
   background-color: #fff;
   color: #000;
   padding: 10px;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   z-index: 1;
}

.user:hover .user-menu {
   visibility: visible;
}

.links-row {
   padding: 0 10px;
   display: flex;
   gap: 30px;
   font-size: 20px;
   border-radius: 4px;
   background-color: #e7e7e7;
}

.links-item a {
   padding: 8px 20px;
   display: block;
   color: #000;
}

a {
   transition: .3s;
}

a:hover {
   color: var(--color-ins-text);
}

.active a {
   position: relative;
   color: var(--color-ins-text);
   display: flex;
   justify-content: center;
}

.active a::before {
   position: absolute;
   content: '';
   width: calc(100% - 20px);
   height: 3px;
   bottom: 0;
   background-color: var(--color-ins-text);
}

.btn-drop-down-menu {
   position: relative;
   display: flex;
   align-items: center;
   padding: 8px 20px;
   gap: 10px;
   cursor: pointer;
   color: #000;
}

.btn-inner-drop-down-menu {
   position: relative;
   display: flex;
   align-items: center;
   padding: 10px 20px;
   gap: 10px;
   cursor: pointer;
   color: #000;
}

.drop-down-menu {
   position: absolute;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   top: 100%;
   left: 0;
   padding: 5px 0;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   background-color: #fff;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   transition: .2s;
   z-index: 25;
}

.btn-drop-down-menu:hover .drop-down-menu {
   opacity: 1;
   visibility: visible;
}

.inner-drop-down-menu {
   position: absolute;
   width: max-content;
   opacity: 0;
   visibility: hidden;
   top: 0;
   left: 90%;
   padding: 5px 0;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   background-color: #fff;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   transition: .2s;
   z-index: 25;
}

.btn-inner-drop-down-menu:hover .inner-drop-down-menu {
   opacity: 1;
   visibility: visible;
}

/* header END */
/* title__page */
.title__page {
   display: flex;
   padding: 10px 0;
   gap: 20px;
   align-items: center;
}

.title__page_title {
   font-size: 30px;
   font-weight: 300;
}

.btn {
   cursor: pointer;
   border-radius: 4px;
   font-size: 16px;
   background-color: #bbed21;
   padding: 10px 20px;
   text-transform: uppercase;
   transition: .3s;
   font-family: 'FiraSansExtraCondensed', sans-serif;
}

.btn:hover {
   background-color: #95be18;
}

.btn_cancel {
   border: 1px solid #ccc;
   background-color: transparent;
}

.btn_cancel:hover {
   background-color: #ccc;
}

.get_vars {
   background: transparent;
   border: 1px solid #ccc;
}

.get_vars:hover {
   background: #4268a9;
   color: #fff;
}

/* title__page END */
/* table */
.table {
   display: flex;
   flex-direction: column;
   border-radius: 8px;
   overflow: auto;
}

.table-wrapper {
   display: flex;
   flex-direction: column;
   min-width: fit-content;
}

.table__title {
   display: flex;
   padding: 0 10px;
   background-color: #c2c2c2;
   border-radius: 4px 4px 0 0;
   font-size: 15px;
   gap: 20px;
}

.table__title_th {
   padding: 10px 0;
}

.table-content {
   display: flex;
   flex-direction: column;
   max-height: 75vh;
   overflow: auto;
}

.page-chats {
   overflow: visible;
   width: 100%;
}

.table__title_th {
   align-items: start;
}

.table__row {
   display: flex;
   padding: 5px;
   border-bottom: 1px solid #c2c2c296;
   align-items: center;
   transition: .3s;
   gap: 20px;
   padding-left: 10px;
}

.table-avatar-user {
   display: flex;
   gap: 10px;
   align-items: center;
}

.table-avatar-user img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}

.text_col {
   text-align: start;
   margin-top: -2px;
}

.job_title {
   font-size: 12px;
   margin-top: -2px;
   opacity: .5;
}

.table__row:hover {
   background-color: var(--color-hover);
   cursor: pointer;
}

.table__col_1,
.table__col_user_1 {
   display: flex;
   gap: 10px;
   align-items: center;
}

.table__col,
.col_justify {
   display: flex;
   gap: 10px;
   align-items: center;
}

.col_justify {
   justify-content: space-between;
}

.logo-company {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   flex-shrink: 0;
}

.avatar-user {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
}

.logo-company img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.avatar-user img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.row-name {
   position: relative;
   color: var(--color-ins-text);
   display: flex;
   gap: 5px;
   align-items: center;
   cursor: pointer;
}

.row-name::before {
   position: absolute;
   content: '';
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.row_table {
   display: flex;
   align-items: center;
}

.row_table img {
   width: 25px;
   height: auto;
   margin-right: 5px;
}

.row_table span {
   color: #000;
}

.table__col_2 {
   width: 10%;
}

.table__col_3 {
   width: 15%;
}

.table__col_4 {
   width: 10%;
}

.table__col_5 {
   flex: 1;
}

/* .table__col_user_1 {
   width: 25%;
} */

.table__col_user_2 {
   width: 15%;
}

.table__col_user_3 {
   width: 15%;
}

.table__col_user_4 {
   width: 35%;
}

.table__col_user_5 {
   width: 10%;
}

.stage__deal {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.stage__deal_wrapper {
   width: 100%;
   display: flex;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.stage__deal_wrapper span {
   height: 10px;
   border-right: 1px solid #ccc;
   flex: 1;
}

.stage__deal_wrapper span:last-child {
   border-right: none;
}

.list-item-column {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
}

.link-name {
   transition: .3s;
   color: var(--color-ins-text);
}

.link-name:hover {
   text-decoration: underline;
}

/* table END */

/* item-menu */
.item-menu {
   position: fixed;
   display: none;
   flex-direction: column;
   border-radius: 8px;
   background-color: #fff;
   overflow: hidden;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   z-index: 1;
}

.item-menu.open {
   display: flex;
}

.item-menu button {
   transition: .3s;
   padding: 10px 20px;
   font-size: 15px;
   text-align: start;
}

.item-menu button:hover {
   background-color: var(--color-hover);
}

.btn-delete {
   color: red;
}

/* item-menu END */
/* form-editor */
.form-editor {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: fixed;
   background-color: #00000091;
   z-index: 1;
}

.form-wrapper {
   position: absolute;
   min-width: 500px;
   border-radius: 16px;
   top: 50%;
   left: 50%;
   z-index: 1;
   transform: translate3d(-50%, -50%, 0);
   z-index: 100;
   background-color: #fff;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   padding-bottom: 10px;
   overflow: hidden;
}

.deals-service .form-wrapper {
   max-width: none;
   width: max-content;
}

.form_deal {
   display: flex;
   gap: 40px;
}

.logs-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
   border-radius: 20px;
   padding-left: 16px;
   gap: 10px;
}

.logs {
   display: flex;
   flex-direction: column;
   border-radius: 20px;
   gap: 10px;
   align-items: flex-end;
   padding-bottom: 10px;
}

.plus_circle {
   border-radius: 50%;
   background: var(--color-ins-text);
   color: #fff;
   width: 20px;
   height: 20px;
   font-size: 26px;
   line-height: 24px;
   display: flex;
   justify-content: center;
   margin-right: 5px;
   font-weight: 500;
}

.form-wrapper_deal {
   width: 65%;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding-bottom: 30px;
   height: fit-content;
}

.service-container {
   position: relative;
}

.company_form {
   min-width: 600px;
}

.service-container .input-search {
   background-color: var(--color-ins-bg);
}

.form-editor h2 {
   padding: 10px 20px;
   font-size: 30px;
   font-weight: 300;
   color: #fff;
   background-color: var(--color-ins-text);
   display: flex;
   gap: 10px;
   align-items: center;
   border-radius: 16px 16px 0 0;
}

.btn-burger {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.img-url {
   width: 25px;
   height: 25px;
   cursor: pointer;
   border: 1px solid;
   padding: 3px;
   border-radius: 4px;
}

.img-copy {
   width: 30px;
   height: 30px;
   cursor: pointer;
}

.table__row .img-url {
   width: 20px;
   height: 20px;
}

.btn_close,
.btn_emoji-panel_close {
   position: absolute;
   font-size: 50px;
   top: -10px;
   right: 3px;
   display: flex;
   cursor: pointer;
   color: #fff;
}

.btn_emoji-panel_close {
   color: #4268a9;
}

.scroll-container {
   padding: 10px 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 80vh;
   overflow-y: auto;
}

.form-row {
   display: flex;
   gap: 10px;
}

.form_deal .scroll-container {
   display: flex;
   flex-direction: row;
   gap: 10px;
   background-color: #ededed;
   max-height: 70vh;
}

.input__block {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.input_color {
   flex-direction: row;
   align-items: center;
   gap: 20px;
   border-bottom: 1px dashed #ccc;
   padding-bottom: 10px;
}

[readonly] {
   opacity: .5;
}

[type="color"] {
   height: 30px;
   max-width: 60px;
   padding: 0 !important;
   cursor: pointer;
}

.input__block_img {
   display: flex;
   gap: 10px;
   align-items: center;
}

.block_img-wrapper {
   position: relative;
   min-width: 100px;
   width: 100px;
   height: 100px;
   display: flex;
   border: 1px dashed;
   border-radius: 4px;
}

.del-img {
   position: absolute;
   top: -15px;
   right: -10px;
   scale: 0;
   transition: .3s;
   font-size: 30px;
   color: red;
   cursor: pointer;
   background-color: #ffffff;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: normal;
}

.non-foto .del-img {
   display: none;
}

.block_img-wrapper:hover .del-img {
   scale: 1;
}

.block_img-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   cursor: pointer;
}

.no-data {
   text-align: center;
   color: #ff6262;
   padding-top: 5px;
}

.no-data-list {
   text-align: center;
   padding-top: 20px;
   color: #ff6262;
   font-size: 20px;
}

.dadata {
   width: 30px;
   height: auto;
   cursor: pointer;
   opacity: .3;
   border: 1px solid;
   padding: 0 5px;
   border-radius: 4px;
}

.dadata_inn--click,
.dadata_bik--click {
   opacity: 1;
}

.input__block_title {
   font-size: 14px;
   color: #b1b1b1;
}

h2 .deal_create {
   background: transparent;
   opacity: .5;
   filter: invert(1);
}

.title_lable {
   width: fit-content;
   margin: 18px 0 8px 0;
   background: var(--color-ins-text);
   color: #fff;
   padding: 3px 20px 3px 10px;
   clip-path: polygon(0% 0%, calc(100% - 10px) 0.00%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
}

.tr-hover:hover {
   background: #f1f1f1;
}

.alert_text {
   position: relative;
   color: red;
   padding-left: 25px;
}

.alert_text::before {
   position: absolute;
   top: 0;
   left: 0;
   content: '';
   background-image: url(../img/icon-alert.png);
   width: 18px;
   height: 18px;
   background-size: 100%;
}

.block_title {
   font-size: 18px;
   opacity: .5;

}

.input__block_title-h {
   font-size: 14px;
   margin-bottom: 10px;
   opacity: .5;
}

.input__api {
   display: flex;
   gap: 10px;
}

.input__block input,
.input__block textarea,
.input__block select,
.date,
#text_notification,
#text_markProcessed {
   width: 100%;
   padding: 5px 10px;
   font-size: 16px;
   border-radius: 4px;
   border: 1px solid #ccc;
   background: #f0f2f4;
   /* font-family: 'FiraSansExtraCondensed', sans-serif; */
}

#text_notification,
#text_markProcessed {
   margin: 10px 0;
}

.input__block input:focus,
.input__block textarea:focus,
.input__block select:focus {
   border: 1px solid var(--color-ins-text);
   background: #e1e3e9;
}

.form-wrapper input[type="checkbox"] {
   width: 20px;
   height: 20px;
}

h2 input {
   font-size: 20px;
   padding: 4px;
   border-radius: 4px;
}

.icon-warning {
   display: none;
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   background-image: url(../img/warning-icon.svg);
   background-size: contain;
   right: 0;
}

.input-img {
   border: none !important;
   font-size: 14px !important;
}

.input__block textarea {
   resize: none;
   font-family: inherit;
}

.input__block select {
   font-size: 16px;
}

.btn_box {
   display: flex;
   justify-content: space-between;
   gap: 10px;
}

.btn-action {
   position: relative;
   cursor: pointer;
}

.btn-action::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.btn_box.new {
   justify-content: flex-end;
}

.btn_box .btn_delete,
.tabs-content .btn_delete {
   background-color: #ff3900a1;
   color: #000;
}

.tabs-content .btn {
   width: fit-content;
   align-self: self-end;
}

.btn_box.new .btn-delete {
   display: none;

}

.btn_box .btn-delete:hover {
   background-color: #ce2d00a1;
}

.banks_details {
   display: flex;
   flex-direction: column;
   padding: 0 0 10px;
   border-bottom: 1px dashed #ccc;
}

.data_details {
   display: flex;
   flex-direction: column;
   padding: 0 0 10px;
   border-bottom: 1px dashed #ccc;
}

.company-block {
   position: relative;
   margin-top: 10px;
   border: 1px solid #000;
   padding: 8px;
   border-radius: 4px;
}

.bank_details-wrapper {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.data_details-wrapper {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.data_details-wrapper table {
   border-collapse: collapse;
}

.data_details-wrapper td {
   border: 1px solid;
   padding: 2px;
   text-align: center;
}

.table-delete {
   font-size: 25px;
   line-height: 20px;
   width: 20px;
   color: red;
   border: none !important;
}

.btn-add-details {
   padding: 5px 20px;
   border-radius: 4px;
   border: 1px solid #ccc;
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   width: fit-content;
   margin-top: 10px;
}

.social-wrapper {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: calc(100% - 50px);
}

.social_name {
   width: fit-content;
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: 2px 10px;
}

.social-wrapper a {
   max-width: 100%;
   overflow: hidden;
}

.bank_details-wrapper .btn-add-details {
   padding: 0 10px;
   margin: 0;
}

.data_details-wrapper .btn-add-details {
   padding: 0 10px;
   margin: 0;
}

.btnAdd {
   align-self: self-end;
}

.btn-doc {
   position: absolute;
   top: 75px;
   right: 20px;
}

.btn-doc .drop-down-menu {
   right: 0;
   left: unset;
   padding: 10px;
}

.btn-doc .drop-down-menu span {
   text-transform: none;
   font-size: 20px;
   padding: 5px 10px;
   border-radius: 4px;
   background-color: var(--color-ins-text);
   color: #fff;
}

.btn-doc .drop-down-menu ul {
   margin: 10px 0 10px 20px;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.btn-doc li {
   text-transform: none;
   transition: .2s;
   font-size: 18px;
}

.btn-doc li:hover {
   color: var(--color-ins-text);
   text-decoration: underline;
}

.btns_contact_actions,
.log_btns_actions {
   position: absolute;
   top: 4px;
   right: 4px;
   display: flex;
   gap: 4px;
}

.log_btns_actions {
   top: -5px;
}

.log_btns_actions {
   border: none;
}

.log_btns_actions p {
   font-size: 30px;
   cursor: pointer;
}

.notifications--del {
   color: red;
}

.notifications--done {
   color: #31e511;
}

.btns_contact_actions p {
   border: 1px solid #ccc;
   padding: 0 4px;
   border-radius: 4px;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
}

.btns_contact_actions span {
   display: block;
   font-size: 24px;
   line-height: 26px;
}

.el-absolute {
   position: absolute;
   top: 3px;
   right: 10px;
   display: flex;
   align-items: center;
   border-radius: 4px;
   border: 1px solid #ccc;
   z-index: 1;
}

.contacts_data-up {
   padding: 8px 8px 0 8px;
   border: 1px solid #cccccc;
   border-radius: 4px 4px 0 0;
   border-bottom: none;
   background: #f0f2f4;
}

.deal-contacts {
   border: 1px solid #cccccc;
   padding: 8px;
   border-radius: 0 0 4px 4px;
   border-top: none;
   background: #f0f2f4;
}

.new {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   rotate: 45deg;
}

.edit {
   width: 25px;
   height: 25px;
   background-image: url(../img/edit.svg);
   background-size: 75%;
   background-position: center;
   background-repeat: no-repeat;
}

.btn-add-details span::before {
   position: absolute;
   content: '⮿';
}

.type-num-wrapper {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
}

.type-num {
   padding: 4px 10px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   cursor: pointer;
   transition: .2s;
}

.type-num:hover,
.type-num.on {
   color: #fff;
   background-color: var(--color-ins-text);
}

.bank_detail {
   display: flex;
   align-items: center;
   gap: 20px;
   border-radius: 4px;
   background-color: #efefef;
   padding: 5px 10px;
   justify-content: space-between;
}

.data_row {
   display: flex;
   align-items: center;
   gap: 20px;
   border-radius: 4px;
   justify-content: space-between;
}

.data_row-transparent {
   display: flex;
   align-items: center;
   gap: 20px;
}

.data_row select {
   flex: 1;
}

/* form-editor END */

/* messager */
#messager {
   position: fixed;
   right: 20px;
   bottom: 5%;
   z-index: 99999;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-end;
}

.message {
   border-radius: 4px;
   font-size: 16px;
   padding: 10px;
   color: #000;
   scale: 0;
   transition: .3s;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
}

#messager .open {
   scale: 1;
}

.message.info {
   background-color: #b9f500;
}

.message.warring {
   background-color: #f5f00b;
}

.message.attention {
   background-color: #e37070;
}

/* messager END */
.ql-editor {
   font-size: 16px;
   /* background-color: #fff; */
}

.ql-toolbar.ql-snow {
   /* background-color: #fff; */
}

/* clue */
.clue {
   position: relative;
}

.clue_img {
   width: 40px;
   height: 40px;
   cursor: pointer;
}

.clue_content {
   position: absolute;
   top: 100%;
   left: 0;
   width: max-content;
   display: flex;
   flex-direction: column;
   padding: 10px 20px;
   font-size: 16px;
   visibility: hidden;
   opacity: 0;
   transition: .1s;
   background-color: #fff;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   border-radius: 4px;
   overflow: hidden;
   z-index: 5;
}

.clue:hover .clue_content {
   visibility: visible;
   opacity: 1;
}

.clue_content::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 6px;
   height: 100%;
   background-color: var(--color-ins-text);
}

/* clue  END */
/* search */
.search-block-input {}

.search-block-input .input-search {
   display: none;
}

/* .search-block-input::before {
   position: absolute;
   content: '';
   width: 30px;
   height: 30px;
   background-image: url(../img/spinner.svg);
   background-size: cover;
   top: 50%;
   left: 50%;
   z-index: 1;
   transform: translate3d(-50%, -50%, 0);
} */

.search-data {
   position: relative;
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background: #fff;
}

.selected {
   background-color: var(--color-ins-text);
   color: #fff;
}

.search-block-input.input_mode .input-search {
   display: block;
}

.get_option {
   display: block !important;
}

.search-block-input.input_mode .search-data {
   display: none;
}

.search-wrapper {
   position: absolute;
   top: 100%;
   visibility: hidden;
   left: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   border-radius: 4px;
   /* box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset; */
   background-color: #fff;
   z-index: 10;
   max-height: 175px;
   overflow: auto;
   border: 1px solid #ccc;
}

.search-list-close {
   width: 10px;
   height: 10px;
   background-image: url(../img/arrow-down-search.svg);
   background-size: contain;
   cursor: pointer;
   margin-right: 5px;
}

.open .search-wrapper {
   visibility: visible;
   background: #f0f2f4;
}

.btn-search {
   position: relative;
   padding: 5px 10px;
   cursor: pointer;
   border-bottom: 1px solid #ccc;
}

.record--item {
   position: relative;
}

.btn-message-add,
.btn-emoji-add {
   position: relative;
}

.btn-search::before,
.search-data::before,
.record--item::before,
.item_for--input::before,
.btn-message-add::before,
.btn-emoji-add::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.btn-search:hover {
   background-color: var(--color-ins-text);
   color: #fff;
}

/* search END */

.deal-block-wrapper {
   /* padding: 10px;
   background-color: #fff; */
   border-radius: 10px;
   gap: 0;
}

.deal-contact-wrapper .data_row {
   background-color: transparent;
   border: 1px dashed #ccc;
}

/* deals-service */
.deals-service .form-wrapper {
   max-width: 1000px;
   width: 100%;
}

.service-row,
.service-row-input {
   position: relative;
   font-size: 16px;
   transition: .2s;
}

.service-row-input:hover {
   background-color: var(--color-hover);
}

.service-table {
   border-collapse: collapse;
   table-layout: fixed;
}

.cell,
.row_th {
   position: relative;
   padding: 4px 10px;
   border: 1px solid;
}

.current_row {
   background-color: rgb(255, 234, 208);
}

.row_th {
   background-color: #ccc;
}

.add-table-wrapper {
   display: flex;
   flex-direction: column;
}

.table_title {
   position: relative;
   margin: 20px 0 5px;
   font-size: 18px;
   display: flex;
   gap: 10px;
   align-items: flex-end;
   align-items: center;
   width: 98%;
}

.table_title span {
   font-size: 16px;
}

.check_all_price {
   width: 20px;
   height: 20px;
}

.deals-service .scroll-container {
   position: relative;
   gap: 0;
   padding-right: 40px;
   padding-bottom: 25px;
}

.service_name {
   width: 300px;
   max-width: 300px;
   min-width: 300px;
   overflow: hidden;
   white-space: nowrap;
}

.service_table_name {
   flex: 1;
   padding: 2px 10px;
   border-bottom: 1px solid;
}

.table_total-price,
.deals_total-price {
   margin-top: 5px;
   font-size: 18px;
   font-weight: 600;
   padding-left: 10px;
}

.table_total-price {
   padding-bottom: 10px;
   border-bottom: 2px dashed #000;
   font-size: 16px;
}


.service_quantity {
   width: 100px;
}

.service_measurement {
   width: 100px;
}

.service_price {
   width: 150px;
}

.service_taxation {
   width: 150px;
}

.service_total {
   width: 100px;
}

.btn-service {
   position: absolute;
   cursor: pointer;
   transition: .2s;
   scale: 0;
   border-radius: 50%;
   background-color: #fff;
   line-height: 28px;
   font-size: 30px;
   z-index: 1;
}

.input-el-service {
   display: none;
   position: absolute;
   z-index: 200;
}

.btns-wrapper {
   position: relative;
   display: flex;
   margin-bottom: 20px;
   gap: 2px;
}

.btns-wrapper div {
   padding: 5px;
   border-radius: 4px;
   border: 1px solid #ccc;
   cursor: pointer;
   transition: .2s;
   line-height: 16px;
   font-size: 15px;
}

.btns-wrapper div:hover {
   color: var(--color-ins-text);
}

.btns-wrapper .row-del,
.btns-wrapper .table-del {
   padding: 5px 20px;
   background: #e5a2a2;
}

.row-add {
   right: 0;
   rotate: 45deg;
   top: 17px;
}

.service-row-input:hover .row-add,
.service-row:hover .row-add {
   scale: 1;
}

.row-up {
   margin-left: 30px;
   font-size: 16px;
}

.service-row-input:hover .row-up {
   scale: 1;
}

.row-down {
   font-size: 16px;
}

.service-row-input:hover .row-down {
   scale: 1;
}


.input-el-service {
   font-size: 18px;
   padding-left: 8px;
   font-family: 'FiraSansExtraCondensed', sans-serif;
   border: 2px solid var(--color-ins-text);
   background-color: #ffead0;
}

.input-el-service input {
   flex: 1;
   height: 100%;
   font-size: 16px;
   font-family: 'FiraSansExtraCondensed', sans-serif;
}

.deals-service .input-search {
   background-color: #ffead0;
}

.input-el-service .table__col {
   height: 100%;
}

.input-el-service .search-wrapper {
   font-size: 18px;
   font-family: 'FiraSansExtraCondensed', sans-serif;
}

/* deals-service END*/
.stage-wrapper {
   padding: 10px 20px;
   display: flex;
   gap: 5px;
   align-items: center;
   max-width: 87%;
}

.stage__block,
.stage__block_cancel,
.stage-block_log {
   position: relative;
   padding: 5px 20px 5px 10px;
   clip-path: polygon(0% 0%, calc(100% - 10px) 0.00%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
   cursor: pointer;
}

.stage__block {
   max-width: 110px;
   width: fit-content;
   font-size: 15px;
}

.cancel__list .stage__block,
.stage-block_log {
   max-width: none;
}

.stage-block_log {
   cursor: auto;
   background: #ededed;
}

.stage__block_last {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.stage__block_cancel {
   display: block;
   background-color: #ff6262;
}

.cancel_deal {
   position: relative;
}

.cancel__list {
   position: absolute;
   top: calc(100% + 4px);
   width: max-content;
   display: flex;
   flex-direction: column;
   gap: 4px;
   transition: .2s;
   max-height: 0px;
   overflow: hidden;
   z-index: 1;
}

.cancel_deal:hover .cancel__list {
   max-height: 50vh;
}

.stage__block span,
.stage-block_log span {
   position: absolute;
   width: 100%;
   bottom: 0;
   left: 0;
   height: 3px;
}

.stage__block.nonSpan span {
   display: none;
}

.log-item {
   width: 100%;
   position: relative;
   border-radius: 8px;
   background-color: #fff;
   padding: 10px;
}

.log-item-inner {
   border: 1px solid #ccc;
   padding: 5px 10px;
   border-radius: 8px;
   margin-bottom: 5px;
}

.log-doc_create {
   font-weight: 600;
}

.log-doc_create span a {
   color: var(--color-ins-text);
}

.log-doc_create span,
.opacity_05 {
   opacity: .5;
   margin-left: 5px;
   font-weight: 400;
}

.log-item__chat {
   margin-top: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.log-item__chat_img {
   width: 20px;
   margin-right: 10px;
}

.log-doc-wrapper {
   display: flex;
   gap: 10px;
   margin-top: 5px;
   margin-bottom: 10px;
}

.btn-old_version {
   position: absolute;
   top: 5px;
   border-radius: 4px;
   padding: 2px 4px;
   background: var(--color-ins-text);
   color: #fff;
   transition: .2s;
   right: 35px;
   z-index: 1;
}

.btn-mark-processed {
   right: 10px;
   cursor: pointer;
}

.btn-mark-processed::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.btn-mark-processed img {
   width: 20px;
   height: auto;
}

.deal_red,
.call_missed {
   background: #f7caca;
}

.call_no_answer {
   background: #f7f6ca;
}

.deal_red .call_label,
.call_missed .call_label {
   padding: 2px 5px;
   border-radius: 8px;
   background: #F44336;
   margin-right: 10px;
}

.call_no_answer .call_label {
   padding: 2px 5px;
   border-radius: 8px;
   background: #f4de36;
   margin-right: 10px;
}

.block_flex {
   display: flex;
   align-items: center;
}

.doc_title {
   opacity: .5;
   margin-right: 10px;
}

.log-call-img {
   margin-top: 10px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   padding: 10px;
   border: 1px solid #ccc;
   background: #fff;
}

.log-call-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.btn-del-doc {
   position: absolute;
   top: -5px;
   right: 3px;
   font-size: 30px;
   color: red;
   cursor: pointer;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.btn-min {
   width: fit-content;
   align-items: center;
   border-radius: 10px;
   border: 1px solid #ccc;
   padding: 0 10px;
   font-size: 16px;
   color: var(--color-ins-text);
   font-family: 'FiraSansExtraCondensed';
   transition: .2s;
   cursor: pointer;
}

.btn-min:hover {
   color: #fff;
   background-color: var(--color-ins-text);
}

.btn-close-form {
   cursor: pointer;
}

.spiner {
   width: 50px;
   height: 50px;
}

.view-doc {
   background: #e2e2e2;
   width: 80%;
}

#deal_price_text {
   width: 100%;
   font-size: 38px;
   height: 38px;
   display: flex;
   align-items: center;
}

#deal_price_text span {
   padding-left: 10px;
   opacity: .5;
   font-size: 20px;
   padding-top: 12px;
}

#deal_price_hand {
   font-size: 22px;
}

#word-viewer {
   flex: 1;
   background: #fff;
   padding: 20px;
   box-shadow: 2px 2px 5px #000;
}

#word-viewer img {
   max-width: 100px;
   height: auto;
}

.data-save {
   border-radius: 10px;
   background-color: #fff;
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 30%;
   min-width: 390px;
}

.btn-img {
   display: flex;
   color: #000;
   align-items: center;
   gap: 4px;
   border: 1px solid #ccc;
   padding: 0 10px 0 7px;
   border-radius: 4px;
}

.btn-img img {
   width: 30px;
}

.load-pdf {
   pointer-events: none;
   opacity: .3;
}

.row {
   display: flex;
   gap: 5px;
   align-items: center;
}

.comment_text {
   padding: 4px 0;
}

.comment_text a {
   text-decoration: underline;
}

#log_comment {
   font-family: inherit;
}

.bg-checkbox-wrap {
   display: flex;
   justify-content: center;
}

.check_show_tabl_doc {
   display: none;
}

.button-check_tabl_doc {
   width: 10px;
   height: 30px;
   cursor: pointer;
   transition: 0.2s;
   right: 12px;
   top: 20px;
}

.button-check_tabl_doc span {
   display: block;
}

.button-check_tabl_doc span {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   transition: 0.2s ease opacity;
}

.check-not-ok {
   background-image: url(../img/eye.svg);
   background-size: contain;
   opacity: 1;
}

.check-ok {
   background-image: url(../img/eye-blocked.svg);
   background-size: contain;
   opacity: 0;
}

.check_show_tabl_doc:checked+.button-check_tabl_doc .check-ok {
   opacity: 1;
}

.check_show_tabl_doc:checked+.button-check_tabl_doc .check-not-ok {
   opacity: 0;
}

/* === */

.knobs {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   box-shadow: 0px -2px 6px -2px rgb(0 0 0) inset;
   border-radius: 40px;
}

.toggle-button-cover input {
   position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 3;
   -webkit-tap-highlight-color: transparent;
}

/* Button choice */
/* .knobs {
   z-index: 2;
} */

/* .button-choice .toggle-button-cover input:active+.knobs:before {
   width: 46px;
   border-radius: 100px;
}

.button-choice .toggle-button-cover input:checked:active+.knobs:before {
   margin-left: -26px;
} */

/* Button choice END */

.toggle-button-cover {
   position: relative;
   height: 30px;
   width: 140px;
   display: flex;
   justify-content: center;
}

.toggle-button-cover .knobs {
   border-radius: 4px;
   border: 1px solid #000;
   box-shadow: 0px -2px 3px -2px rgb(0 0 0) inset;
}

.toggle-button-cover .knobs:before,
.toggle-button-cover .knobs:after,
.toggle-button-cover .knobs span {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
   height: 100%;
   font-size: 16px;
   transition: 0.3s ease all;
   border-radius: 4px;
   color: #fff;
}

.toggle-button-cover .knobs:before {
   content: '';
   box-shadow: 0px -2px 3px -2px rgb(0 0 0) inset;
   left: 0;
   background-color: var(--color-ins-text);
}

.toggle-button-cover .knobs:after {
   right: 0;
   content: 'авто';
   color: #969696;
}

.toggle-button-cover input:checked+.knobs span {
   color: #969696;
}


.toggle-button-cover input:checked+.knobs:before {
   left: 50%;
}

.toggle-button-cover input:checked+.knobs:after {
   color: #fff;
}

.setting-block {
   position: relative;
   border: 1px solid #ccc;
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 10px;
}

.setting_title {
   font-size: 18px;
   font-weight: 600;
}

.toggle-button {
   width: fit-content;
   position: relative;
   height: 30px;
   display: flex;
   justify-content: center;
}

.button-swipe {
   width: 100%;
   position: relative;
   display: flex;
}

.toggle-button .button-swipe {
   cursor: pointer;
   border-radius: 4px;
   border: 1px solid #000;
   box-shadow: 0px -2px 3px -2px rgb(0 0 0) inset;
}

.toggle-button.telegram_send {
   width: 330px;
}

.toggle-button input {
   display: none;
   position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 3;
   -webkit-tap-highlight-color: transparent;
}

.button-swipe-check {
   width: 50%;
   position: relative;
   display: flex;
   color: #fff;
   padding: 5px;
   transition: .2s;
   justify-content: center;
}

.button-swipe-check::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--color-ins-text);
   border-radius: 4px;
   transition: .2s;
}

.button-swipe-check span,
.button-swipe-no_check span {
   position: relative;
   z-index: 1;
}

.toggle-button input:checked~.button-swipe-check {
   opacity: 1;
   color: #969696;
}

.toggle-button input:checked~.button-swipe-check::before {
   left: 100%;
}

.button-swipe-no_check {
   width: 50%;
   opacity: 1;
   padding: 5px;
   position: relative;
   display: flex;
   justify-content: center;
   color: #969696;
   transition: .2s;
}

.toggle-button input:checked~.button-swipe-no_check {
   opacity: 1;
   color: #fff;
}

.file_inout-wrapper {
   position: relative;
}

.clicker-fon-file {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   background: #fff;
}

.multi-select-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.multi-select_item {
   padding: 4px 10px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   cursor: pointer;
   transition: .2s;
}

.multi-select_item:hover {
   color: var(--color-ins-text);
   text-decoration: underline;
}

.multi-select_item.selected {
   color: #fff;
   background-color: var(--color-ins-text);
}

.tel-item {
   display: flex;
   flex-direction: column;
   border: 1px solid #ccc;
   padding: 5px;
   border-radius: 4px;
}

.multi-item-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
}

.social_item {
   padding: 2px 4px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   color: var(--color-ins-text);
   opacity: .5;
   cursor: pointer;
}

.social_item:hover {
   background: var(--color-ins-text);
   color: #fff;
}

.tel-item .data_row {
   background-color: transparent;
}

.accordion {
   display: flex;
   flex-direction: column;
   padding: 10px;
   border-radius: 10px;
   background-color: #fff;
}

.accordion_inner {
   padding: 0
}

.accordion_title {
   position: relative;
   font-size: 18px;
   cursor: pointer;
   padding-bottom: 10px;
   margin-bottom: 10px;
   border-bottom: 2px solid #ededed;
   display: flex;
   align-items: center;
   color: #969696;
}

.accordion_title::before {
   position: absolute;
   content: '';
   width: 14px;
   height: 14px;
   background-image: url(../img/arrow-down-search.svg);
   background-size: contain;
   right: 0;
}

.accordion_inner .accordion_title::before {
   width: 10px;
   height: 10px;
}

.accordion__box {
   max-height: 0;
   transition: .2s;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.open_accordion>.accordion__box {
   max-height: 300vh;
   overflow: visible;
}

.comment_send {
   position: absolute;
   bottom: 15px;
   right: 10px;
}

.notification-wrapper {
   max-height: 0;
   transition: .2s;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.notification_open .notification-wrapper {
   max-height: 300px;
   padding-bottom: 10px;
}

.notification_time-select,
.notification_of-select {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
}

.notification-wrapper span {
   padding: 2px 4px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   color: var(--color-ins-text);
   cursor: pointer;
}

.notification-wrapper .active {
   background: var(--color-ins-text);
   color: #fff;
}

.comment_send {
   display: block;
}

.notification_send {
   display: none;
}

.notification_open>.comment_send {
   display: none;
}

.notification_open>.notification_send {
   display: block;
}

.table__list {
   border-radius: 8px;
   border-collapse: collapse;
}

/* .table__list tr:nth-child(1) {
   background: #c2c2c2;
} */

.table__list tr {
   border-bottom: 1px solid #ccc;
}

.table__list th {
   text-align: left;
   padding: 10px 5px;
   font-size: 15px;
   font-weight: 400;
   position: sticky;
   top: 0;
   background: #c2c2c2;
   z-index: 1;
}

.table__list td {
   text-align: left;
   padding: 10px 5px;
   max-width: 400px;
}

.table__list img {}

.user_avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}

.user_block {
   display: flex;
   align-items: center;
   gap: 10px;
}

.time_no_overdue {
   /* font-size: 20px;
   font-weight: 600;
   color: #31e511; */
}

.time_overdue {
   /* font-size: 20px;
   font-weight: 600; */
   color: #e51111;
}

.log-notifications {
   position: relative;
}

.log-notifications::before {
   position: absolute;
   content: '';
   width: 40px;
   height: 60px;
   background-image: url(../img/notification_img.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   rotate: 337deg;
   top: 10px;
   right: 30px;
   opacity: .5;
}

.no-overdue::before {
   filter: drop-shadow(0px 0px 0px #31e511);
}

.overdue::before {
   filter: drop-shadow(0px 0px 0px red);
}

.log-notifications .target--timer {
   position: absolute;
   bottom: 0;
   right: 10px;
   color: #31e511;
   font-size: 20px;
   font-weight: 600;
}

.overdue .target--timer {
   color: #e51111;
}

.form-notification,
.form-markProcessed,
.modal-filters {
   position: fixed;
   width: 400px;
   right: -100%;
   padding: 10px 20px;
   border-radius: 4px;
   transition: .2s;
   display: flex;
   flex-direction: column;
   background-color: #FFF;
   border: 1px solid var(--color-ins-text);
   z-index: 10000;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
}

.modal-filters {
   visibility: hidden;
   opacity: 0;
   transition: opacity .2s;
   display: flex;
   gap: 10px;
   flex-direction: column;
}

.modal-filters.open {
   visibility: visible;
   opacity: 1;
}

.form-markProcessed.open {
   right: 50px;
}

.form-notification.open {
   right: 50px;
}

.form-notification_title {
   color: var(--color-ins-text);
   font-size: 18px;
   font-weight: 600;
}

.btn_close-form-notification,
.btn_close-form-audio,
.btn_close-screen-filters,
.btn_close-modal,
.btn_close-markProcessed {
   position: absolute;
   top: 0;
   right: 0;
   width: 35px;
   height: 35px;
   line-height: 28px;
   border-radius: 50%;
   overflow: hidden;
   font-size: 29px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--color-ins-text);
   color: #fff;
   border: 3px solid #fff;
}

.context {
   margin: 4px 0;
   font-size: 16px;
   opacity: .5;
   padding: 3px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.enter-wrapper {
   width: 100vw;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
}

.enter_form {
   width: 500px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   padding: 10px;
}

.enter_logo {
   width: 50px;
   height: 50px;
}

.enter_title {
   font-size: 36px;
   font-weight: 600;
   font-family: sans-serif;
   display: flex;
   align-items: center;
}

.enter_title svg {
   width: 50px;
   margin-left: 16px;
}

.enter_logo img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.enter_form input {
   width: 100%;
   border-radius: 4px;
   font-size: 20px;
   border: 2px solid var(--color-ins-text);
   padding: 10px 20px;
}

.btn_enter {
   padding: 10px 20px;
   border-radius: 4px;
   background-color: var(--color-ins-text);
   color: #fff;
   font-size: 18px;
   transition: .2s;
}

.btn_enter:hover {
   background-color: #5989dc;
}

@media screen and (max-width: 680px) {
   .enter_title {
      font-size: 28px;
   }

   .enter_title img {
      width: 38px;
      margin-left: 8px;
   }
}

.item_connent {
   padding: 4px 10px;
   border-radius: 4px;
}

.btn-connect,
.btn-connect-off {
   padding: 4px 10px;
   border-radius: 4px;
   border: 1px solid #ccc;
   background: #fff;
   min-width: 100px;
   display: flex;
   justify-content: center;
}

.btn-connect {
   color: #62ad3e;
}

.btn-connect-off {
   color: red;
}

.connecting {
   background: #52ff0045;
}

.logo-mini {
   width: 30px;
   height: 30px;
   object-fit: contain;
}

.select_item_for--input {
   display: flex;
   flex-direction: column;
   gap: 4px;
   background-color: #f0f2f4;
   border-radius: 4px;
   border: 1px solid #ccc;
   padding: 6px;
   max-height: 180px;
   overflow-y: auto;
}

.item_for--input {
   position: relative;
   display: flex;
   gap: 10px;
   align-items: center;
   cursor: pointer;
   transition: .2s;
}

.btn--clear {
   top: 16px;
}

.item_for--input:hover {
   background-color: #5989dc86;
}

.pagination {
   padding: 10px;
   display: flex;
   border-bottom: 1px solid #ccc;
   flex-direction: column;
   gap: 10px;
   align-items: center;
}

.pages-wrapper {
   position: relative;
   width: 100%;
   display: flex;
   gap: 10px;
   justify-content: center;
}

.pages {
   display: flex;
   gap: 5px;
   justify-content: center;
   flex-wrap: wrap;
}

.page,
.btn-more-list,
.pagination_count select {
   padding: 8px 16px;
   color: var(--color-ins-text);
   border-radius: 4px;
   border: 1px solid #ccc;
   transition: .2s;
   cursor: pointer;
   background-color: transparent;
}

.btn-more-list {
   padding: 5px 20px;
   border-radius: 20px;
}

.page:hover,
.btn-more-list:hover,
.page-current {
   background-color: var(--color-ins-text);
   color: #fff;
}

.pagination_count {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: flex-end;
}

/* filters */
.filters {
   position: relative;
   flex: 1;
   padding: 4px;
   border-radius: 4px;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 5px;
}

.filters-wrapper {
   position: relative;
   display: flex;
   gap: 2px;
   width: 50%;
   align-items: center;
   flex-wrap: wrap;
   min-height: 25px;
   transition: .2s;
   cursor: pointer;
   border-radius: 4px;
}

.filters-wrapper:hover {
   background-color: #f0f2f4;
}

#filterInput {
   border: 1px solid #ccc;
   background: #f0f2f4;
   padding: 0 5px;
   font-size: 18px;
   border-radius: 4px;
   flex: 1;
   min-height: 26px;
}

.btn-search-bd {
   margin: 0 5px;
   width: 20px;
   cursor: pointer;
}

.filters-wrapper .el-filter {
   padding: 2px 6px;
   border-radius: 4px;
   background-color: var(--color-ins-text);
   border: 1px solid #ccc;
   color: #fff;
   display: flex;
   gap: 5px;
}

.filters_clear {
   font-size: 24px;
   line-height: 24px;
   cursor: pointer;
}

.btn.filters_clear,
.btn.filters_save {
   font-size: 16px;
   background-color: #fff;
   border: 1px solid #ccc;
   line-height: 1;
}

.screen-filters {
   display: none;
   max-width: 1200px;
   position: absolute;
   left: 0;
   top: 100%;
   padding: 20px;
   border-radius: 8px;
   background-color: #fff;
   border: 1px solid #ccc;
   z-index: 10;
   flex-direction: column;
   gap: 5px;
   box-shadow: 0 1px 4px rgb(0 0 0), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
   max-height: 600px;
   overflow-y: auto;
}

.screen-filters.open {
   display: flex;
}

.filter-block {
   display: flex;
   flex-direction: column;
   gap: 5px;
   border-bottom: 1px solid #ccc;
   padding: 0 0 8px;
   border-radius: 0;
   background: transparent;
}

.screen-filters_title {
   opacity: .5;
   font-size: 16px;
   margin: 0;
   border: none;
   padding-bottom: 5px;
   color: initial;
}

.filter-select-wrepper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 5px;
}

.filter-item,
.filter-date-item {
   position: relative;
   padding: 4px 6px;
   border-radius: 4px;
   border: 1px solid #ccc;
   transition: .2s;
   background-color: #fff;
   cursor: pointer;
}

.filter-item::before,
.filters-wrapper::before,
.save-filters__item::before,
.chat::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.filter-item:hover,
.filter-date-item:hover {
   background-color: #ccc;
}

.filter-item.active,
.filter-date-item.active {
   background-color: var(--color-ins-text);
   color: #fff;
}

.screen-filters .btn_box {
   padding-top: 10px;
}

.filters-wrapper .btn-drop-down-menu {
   z-index: 15;
   padding: 0 10px;
}

.filters-wrapper .count-num {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-ins-text);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.filter-date {
   display: flex;
   gap: 20px;
}

.btn-del-item-filter {
   cursor: pointer;
   font-size: 20px;
   line-height: 20px;
   position: relative;
   z-index: 1;
}

.save-filters-wrapper {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   padding-bottom: 10px;
}

.save-filters__item {
   position: relative;
   padding: 5px;
   border-radius: 4px;
   border: 1px solid #ccc;
   cursor: pointer;
   transition: .2s;
}

.save-filters__item:hover {
   background-color: var(--color-ins-text);
   color: #fff;
}

.btn-delete-filter {
   color: red;
   font-size: 24px;
   line-height: 0;
   scale: 0;
   width: 24px;
   height: 24px;
   position: absolute;
   display: block;
   bottom: calc(100% - 10px);
   left: calc(100% - 10px);
   visibility: hidden;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: visibility, scale 0.3s ease, visibility 0s linear 2.3s;
   overflow: hidden;
   /* Задержка перед скрытием */
}

.save-filters__item:hover .btn-delete-filter {
   scale: 1;
   visibility: visible;
   transition: visibility, scale 0.3s ease 2s, visibility 0s linear;
   /* Задержка перед появлением */
}

span,
.save-filters__item,
.clue,
.btn {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

/* filters END */

#inputPrice::-webkit-outer-spin-button,
#inputPrice::-webkit-inner-spin-button,
#inputQuantity::-webkit-outer-spin-button,
#inputQuantity::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

#inputPrice,
#inputQuantity {
   -moz-appearance: textfield;
}

#deal_name {
   background: transparent;
   color: #fff;
   width: 50%;
   border-bottom: 2px solid #fff;
   border-radius: 0;
}

/* chats */
.chats-page {
   display: flex;
   height: 75vh;
   border: 1px solid #ccc;
   border-radius: 10px;
   overflow: hidden;
}

.chats-wrapper {
   padding-top: 15px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 30%;
   padding-right: 5px;
   /* border-right: 2px solid var(--color-ins-text); */
   overflow-y: auto;
}

.chat {
   position: relative;
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 8px;
   border-radius: 5px;
   /* border: 1px solid #efefef; */
   cursor: pointer;
   transition: .2s;
   margin-left: 5px;
}

.messages_no_answer {
   bottom: 0;
   top: auto;
   right: 0;
}

.logs .messages_no_answer {
   top: 5px;
   bottom: auto;
   right: 5px;
}

.chat.active {
   background: #4268a930;
}

.chat:hover {
   /* border: 1px solid var(--color-ins-text); */
   background: #e8e8e8;
}

.chat_integration {
   width: fit-content;
   color: #fff;
   font-weight: 400;
   background-color: var(--color-ins-text);
   padding: 0 5px;
   border-radius: 4px;
   font-size: 14px;
}

.avatar {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   background: #c1c1c1;
   border-radius: 50%;
}

.avatar_img {
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

.social_img {
   position: absolute;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   bottom: -5px;
   right: -5px;
   background: #fff;
   border: 2px solid #fff;
}

.mini_chat_logo {
   width: 20px;
   height: 20px;
   object-fit: contain;
}

.chat__data-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
   gap: 4px;
}

.chat__data-row {
   display: flex;
   justify-content: space-between;
}

.chat__data_name {
   font-weight: 600;
   font-size: 18px;
   display: flex;
   align-items: center;
   gap: 4px;
}

.message_body {
   display: flex;
   gap: 5px;
   align-items: center;
   opacity: .5;
}

.messages-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   background: #f1f1f1;
   height: 75vh;
   border-radius: 5px;
   overflow: hidden;
   background: url(../img/background.jpg);
}

.messages-list {
   flex: 1;
   border-radius: 10px;
   padding: 10px;
   display: flex;
   gap: 4px;
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
   padding: 20px 10%;
   scroll-behavior: smooth;
}

.message_status {
   position: absolute;
   right: 5px;
   bottom: 5px;
}

.start_dialog,
.break-message {
   text-align: center;
   margin-bottom: 10px;
   opacity: .5;
   font-style: italic;
}

.break-message {
   color: red;
}

.break-message img {
   margin-right: 10px;
}

.chat-message {
   position: relative;
   padding: 2px 10px;
   display: flex;
   flex-direction: column;
   background-color: #fff;
   color: #000;
   font-size: 16px;
   width: fit-content;
   /* max-width: calc(100% - 120px); */
   max-width: 570px;
   will-change: box-shadow;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px -1px, rgba(0, 0, 0, 0.11) 0px 1px 1px -1px, rgba(0, 0, 0, 0.11) 0px 1px 2px -1px;
   border-radius: 8px;
   padding: 6px 9px 3px;
   /* white-space: pre-line; */
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sender_name {
   border-radius: 4px;
   background: var(--color-ins-text);
   font-size: 14px;
   color: #fff;
   width: fit-content;
   margin-bottom: 5px;
   padding: 2px 5px;
}

.initiator_user {
   background-color: #ccf2cf;
   align-self: self-end;
}

.unsent_message {
   background-color: #f2cccc;
}

.message__body_footer {
   display: flex;
   align-items: center;
   gap: 5px;
   justify-content: flex-end;
}

.message__body_footer svg {
   width: 18px;
}

.message__body_date {
   opacity: .5;
   font-size: 13px;
}

.initiator_user .table-avatar-user {
   position: absolute;
   right: calc(100% + 20px);
}

.message__body {
   display: flex;
   flex-direction: column;
   white-space: pre-line;
   word-wrap: break-word;
}

.message__body video {
   max-width: 250px;
}

.message__img-wrapper {
   position: relative;
   width: 250px;
   height: 250px;
}

.message__video-wrapper {
   position: relative;
}

/* .btns_block {
   width: 100%;
   height: 100%;
   position: absolute;
   display: flex;
   bottom: 0;
   gap: 10px;
   visibility: hidden;
   transition: .2s;
   align-items: flex-end;
   justify-content: flex-end;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid var(--color-ins-text);
} */
.btns_block {
   position: absolute;
   width: max-content;
   bottom: 0;
   left: 100%;
   visibility: hidden;
   border-radius: 4px;
   background: #fff;
   box-shadow: 0 2px 2px -4px #0000001a, 0 2px 2px 1px #0000001f, 0 1px 8px 1px #0000001f;
   flex-direction: column;
   z-index: 1;
   font-size: 18px;
   display: flex;
}

.initiator_user .btns_block {
   right: 100%;
   left: auto;
}

.btns_block::before {
   position: absolute;
   content: '';
   bottom: 0;
   right: 0;
   width: 250px;
   height: 250px;
   z-index: -1;
}

.message__img-wrapper:hover .btns_block,
.message__video-wrapper:hover .btns_block {
   visibility: visible;
}

.message__video-wrapper .btns_block::before {
   display: none;
}

.message_img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   cursor: pointer;
}

.btn-save-img {
   width: 30px;
   height: 30px;
   cursor: pointer;
}

.message_input-wrapper {
   position: relative;
   width: 100%;
   padding: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
   background: #f1f1f1;
}

#files_preview {
   background: #f1f1f1;
   border-radius: 10px;
   display: flex;
   flex-wrap: wrap;
   max-height: 50vh;
   overflow-y: auto;
}

#files_preview .file-preview {
   position: relative;
   display: flex;
   gap: 5px;
   margin: 10px;
   align-items: center;
   height: 150px;
   width: 150px;
}

.file-preview-container {
   overflow: hidden;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   border: 1px dashed;

}

.file-preview-container img,
.file-preview video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.file-icon {
   width: 100%;
   height: 100%;
   padding: 40px;
}

.file-preview .file-name {
   position: absolute;
   bottom: 0;
   color: #fff;
   background: var(--color-ins-text);
   padding: 0 5px;
   font-size: 14px;
   border-radius: 4px;
}

#files_preview .file-preview button {
   color: red;
   font-size: 24px;
   line-height: 18px;
   border: 2px solid red;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   position: absolute;
   top: -10px;
   right: -10px;
   background: #f1f1f1;
   z-index: 1;
}

.video-icon {
   cursor: pointer;
}

.video-icon .btn-play {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.message_input {
   padding: 8px;
   border-radius: 10px;
   font-size: 18px;
   flex: 1;
   resize: none;
   overflow-y: hidden;
   min-height: 40px;
   height: 40px;
}

.btn-message {
   cursor: pointer;
   transition: .2s;
}

.notification-btn-wrapper {
   display: flex;
   gap: 10px;
}

.comment_file-wrapper {
   position: relative;
   display: flex;
   gap: 5px;
   align-items: center;
   cursor: pointer;
   max-width: 140px;
   overflow: hidden;
}

.comment_file-wrapper svg {
   flex-shrink: 0;
}

.comment_file-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.comment_file_name {
   font-size: 13px;
   opacity: .5;
   white-space: nowrap;
}

.notification_open .comment_file-wrapper {
   display: none;
}

.comment_file-wrapper input {
   display: none;
}

.btn-message:hover {
   scale: 1.1;
}

.btn-message-send svg {
   fill: #ccc;
}

.btn-message-send.active svg {
   fill: var(--color-ins-text);
}

.btn-message-send {
   margin-top: 2px;
}

.btn-no-answer {
   margin-top: 20px;
   display: block;
   align-self: center;
   border-radius: 20px;
   color: red;
   border: 1px solid;
   padding: 5px 20px;
   cursor: pointer;
   transition: .2s;
}

.btn-no-answer:hover {
   background-color: red;
   color: #fff;
}

.chat-message .table-avatar-user {
   position: absolute;
   width: max-content;
   top: 0;
   right: calc(100% + 0px);
   font-size: 14px;
   padding: 5px;
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px -1px, rgba(0, 0, 0, 0.11) 0px 1px 1px -1px, rgba(0, 0, 0, 0.11) 0px 1px 2px -1px;
}

.btn-download_doc {
   display: flex;
   flex-direction: column;
   margin-bottom: 5px;
   gap: 5px;
   color: #000;
   align-items: center;
   text-align: center;
}

.btn-download_doc span {
   padding: 2px 5px;
   border-radius: 4px;
   color: #fff;
   background: var(--color-ins-text);
}

.messages__info_block {
   width: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: .5;
   margin: 20px 0;
}

.messages__info_data {
   border-radius: 4px;
   text-align: center;
   margin: 10px auto;
   font-size: 16px;
   padding: 4px 50px;
   background: #d7e6ff;
   box-shadow: 0 1px 1px -1px #0000001a, 0 1px 1px -1px #0000001c, 0 1px 2px -1px #0000001c;
}

.messages__info_block span {
   width: fit-content;
   font-size: 14px;
   background: #c5c5c5;
   padding: 2px 20px;
   border-radius: 10px;
   z-index: 1;
   color: var(--color-ins-text);
}

.messages__info_block::before {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   border-top: 1px dashed var(--color-ins-text);
}

.message_delete {
   opacity: .5;
   display: flex;
   align-items: center;
   gap: 5px;
}

.chats__screen {
   position: relative;
   display: flex;
}

.wait_spinner {
   position: absolute;
   display: none;
   justify-content: center;
   width: 100%;
   height: 100%;
   z-index: 10;
   align-items: center;
   background: #99999987;
}

.wait_spinner.open {
   display: flex;
}

.message_reaction {
   background: #ccf2cf;
   border-radius: 10px;
   padding: 5px;
   width: fit-content;
}

.initiator_user .message_reaction {
   background: #fff;
}

.message-sub-menu {
   position: absolute;
   top: -25px;
   right: 0;
   visibility: hidden;
   display: flex;
   align-items: center;
   gap: 5px;
   border-radius: 10px;
   background: #ccc;
   padding: 0 5px 4px;
   z-index: 5;
}

.message__menu,
.chat__menu {
   display: none;
   position: fixed;
   border-radius: 4px;
   background: #fff;
   box-shadow: 0 2px 2px -4px #0000001a, 0 2px 2px 1px #0000001f, 0 1px 8px 1px #0000001f;
   flex-direction: column;
   z-index: 5;
   overflow: hidden;
   font-size: 18px;
}

.menu_item-my {
   display: none;
}

.for-my .menu_item-my {
   display: block;
}

.chat--visible {
   display: none;
}

.chat--hidden {
   display: block;
}

.chat_hide .chat--visible {
   display: block;
}

.chat_hide .chat--hidden {
   display: none;
}

.message__menu.open {
   display: flex;
}

.chat__menu.open {
   display: flex;
}

.message__menu_item,
.btns_block a,
.btns_block span {
   cursor: pointer;
   padding: 6px 20px;
   transition: none;
   border-radius: 4px;
}

.btns_block a {
   color: var(--color-ins-text);
}

.message__menu_item:hover,
.btns_block a:hover,
.btns_block span:hover {
   background: #f0f0f0;
}

.chat-message .btn-emoji-add {
   filter: grayscale(1);
   cursor: pointer;
   font-size: 20px;
   z-index: 1;
}

.btn-message__menu {
   margin-top: 3px;
   z-index: 1;
   width: 23px;
   height: 23px;
   background-image: url(../img/arrow-down-search.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
   border-radius: 50%;
   padding: 5px;
   border: 1px solid;
}

.message__edited {
   cursor: pointer;
}

.chat-message:hover .message-sub-menu {
   visibility: visible;
}

.social_id-3 .message-sub-menu {
   display: none;
}

.message__edited img {
   width: 14px;
}

.message__edited_text {
   max-width: 50%;
   width: 100%;
   position: absolute;
   left: 80%;
   transition: .2s;
   opacity: 0;
   visibility: hidden;
   top: 0;
   background: #ccc;
   padding: 6px;
   border-radius: 8px;
   white-space: pre-line;
}

.initiator_user .message__edited_text {
   left: auto;
   right: 80%;
}

.message__edited_text.open {
   opacity: 1;
   visibility: visible;
   left: calc(100% - 10px);
}

.initiator_user .message__edited_text.open {
   left: auto;
   right: calc(100% - 10px);
}

.message_input-header {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: 100%;
   border-bottom: 1px solid #ccc;
   z-index: 10;
}

.link-reply_message {
   position: relative;
   background: #cccccc0a;
   color: #000000b5;
   border-radius: 4px;
   margin-bottom: 5px;
   padding: 0 5px 0 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.link-reply_message::before {
   position: absolute;
   content: '';
   z-index: 1;
   top: 0;
   width: 100%;
   left: 0;
   height: 100%;
   background: #0000001a;
}

.link-reply_message::after {
   position: absolute;
   content: '';
   z-index: 1;
   top: 0;
   width: 4px;
   left: 0;
   height: 100%;
   background: var(--color-ins-text);
}

#block__reply_message {
   position: absolute;
   padding: 5px;
   width: 100%;
   left: 0;
   display: none;
   bottom: 100%;
   background: #f1f1f1;
   border-bottom: 1px solid #ccc;
   align-items: center;
   justify-content: space-between;
   z-index: 1;
}

#block__reply_message.open {
   display: flex;
}

.block__reply_message-close {
   font-size: 40px;
   font-weight: 200;
   border-radius: 50%;
   border: 1px solid;
   width: 25px;
   height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 25px;
   cursor: pointer;
}

.deal-block__messages {
   position: relative;
   display: flex;
   gap: 20px;
   align-items: center;
   padding: 10px;
   background: #f1f1f1;
   border-bottom: 1px solid #ccc;
   justify-content: flex-end;
}

.deal-block__messages_link {
   cursor: pointer;
   padding: 2px 6px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   color: var(--color-ins-text);
}

.btn-all--stages {
   color: #000;
   clip-path: polygon(0% 0%, calc(100% - 10px) 0.00%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
   padding: 3px 20px 4px 10px;
   cursor: pointer;
}

.deal-block__messages .stage-wrapper {
   top: 100%;
   position: absolute;
   padding: 10px 20px;
   display: none;
   gap: 3px;
   align-items: flex-start;
   flex-direction: column;
   z-index: 15;
   background: #f1f1f1;
   right: 0px;
}

.deal-block__messages .stage__block {
   padding: 3px 20px 4px 10px;
   font-size: 15px;
   max-width: none;
}

.deal-block__messages .stage-wrapper.open {
   display: flex;
}

.deal-block__messages .cancel_deal {
   font-size: 15px;
}

.deal-block__messages .cancel__list {
   position: absolute;
   background: #f1f1f1;
   top: -100px;
   right: 100%;
}

.deal-block__messages .cancel_deal:hover .cancel__list {
   max-height: 50vh;
   padding: 10px 20px 10px 20px;
}

/* chats END */
.placeholder_block {
   padding-left: 10px;
   opacity: .5;
}

/* header-time-container */
.header-time-container {
   display: flex;
   gap: 20px;
   font-family: sans-serif, Arial;
}

#current-time {
   font-size: 36px;
   font-weight: 200;
   font-family: 'FiraSansExtraCondensed', sans-serif;
   width: 100px;
}

.time_col {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* header-time-container END */

/* select--custom */
.select--custom {
   position: relative;
}

.select--custom_wrapper {
   display: flex;
   flex-direction: column;
   max-height: 0;
   overflow: hidden;
   background: #f0f2f4;
   border-radius: 4px;
   transition: .2s;
   border-right: 1px solid #ccc;
   border-left: 1px solid #ccc;
   z-index: 1;
   box-shadow: 1px 1px 5px #8e8e8e;
   width: 100%;
}

.style_absolute {
   position: absolute;
}

.select--custom_item {
   position: relative;
   transition: .2s;
   cursor: pointer;
   padding: 5px 10px;
   border-bottom: 1px solid #ccc;
}

.select--custom_item.selected {
   background-color: var(--color-ins-text);
   color: #fff;
}

.select--custom_item:hover {
   background-color: #ccc;
}

.select--add_wrapper {
   position: relative;
   min-height: 42px;
   border-radius: 4px;
   border: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
   gap: 2px;
   font-size: 14px;
   align-items: center;
   padding: 2px;
   cursor: pointer;
}

.select--add_wrapper .select--custom_item {
   background-color: transparent;
   color: var(--color-ins-text);
   border-radius: 4px;
   border-bottom: none;
   z-index: 0;
}

.select--add_wrapper .table-avatar-user {
   gap: 5px;
}


.select--add_wrapper .select--custom_item {
   width: fit-content;
   padding: 3px;
}

.select--custom_btn-open {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 20px;
   background: #ffffff;
   height: 20px;
   background-image: url(../img/arrow-down-search.svg);
   cursor: pointer;
   z-index: 5;
   background-size: 12px;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 50%;
}

.select--custom_item::before,
.select--add_wrapper::before {
   content: '';
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* select--custom END */

/* ====================================== */
/* deals_page */
.deals_page {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0 auto;
   max-width: 500px;
   padding: 10px;
}

.date-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
}

.deal__date_item {
   padding: 5px;
   border-radius: 8px;
   font-size: 18px;
   background-color: var(--color-ins-text);
   color: #fff;
   cursor: pointer;
   text-align: center;
   border: 2px solid transparent;
}

.deal__date_item.selected {
   border: 2px solid var(--color-ins-text);
   color: var(--color-ins-text);
   background-color: #fff;
}

/* deal__card */
.deal__card {
   position: relative;
   display: flex;
   flex-direction: column;
   position: relative;
   max-width: 500px;
   width: 100%;
   border-radius: 8px;
   margin-bottom: 10px;
   color: #fff;
   font-size: 18px;
   cursor: pointer;
   overflow: hidden;
}

.deal__card-main_body {
   position: relative;
   padding: 10px;
   color: #fff;
}

.form__deal .deal__card-main_body {
   border-radius: 14px;
}

.deal__card::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.deal__card-date {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

.deal__card-date_time {
   font-size: 30px;
   width: fit-content;
   margin-bottom: -3px;
   font-weight: 600;
   text-transform: uppercase;
}

.deal__card-date_date {
   font-size: 30px;
   width: fit-content;
   font-weight: 600;
}

.deal__card-date_time {
   margin-bottom: 0;
   font-weight: 400;
}

.deal__card_name {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   align-items: center;
   margin-top: 5px;
}

.deal__card_address {
   font-size: 22px;
   display: flex;
   gap: 20px;
   text-decoration: underline;
   color: #fff;
}

.deal__card_comment {
   font-size: 18px;
}

.deal__card_service {
   font-size: 22px;
   display: flex;
   gap: 10px;
   align-items: center;
}

.deal__card_service img {
   width: 30px;
   height: 30px;
}

.deal__card_price {
   font-size: 22px;
   font-weight: 600;
}

.deal-wrapper .deal__card_address {
   color: var(--color-ins-text);
}

.deal__card_address img {
   width: 30px;
   height: 30px;
}

.deal__card_name a {
   font-size: 24px;
   width: fit-content;
   color: #fff;
   text-decoration: underline;
}

.deal_tel {
   font-size: 24px;
   position: relative;
   z-index: 1;
   width: fit-content;
   display: flex;
   align-items: center;
   gap: 5px;
}

.deal_tel img {
   width: 20px;
   height: auto;
   object-fit: cover;
}

.deal__card_action-circle {
   width: 15px;
   height: 15px;
   display: block;
   border-radius: 50%;
   border: 1px solid;
   flex-shrink: 0;
}

.deal__card-stage_name {
   font-size: 30px;
   flex: 1;
   text-align: end;
   font-weight: 600;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 10px;
}

.form__deal .deal__card-stage_name {
   display: flex;
   align-items: center;
   gap: 10px;
}

.deal__card_user {
   width: fit-content;
   border-radius: 4px;
   top: calc(100% - 30px);
   padding: 5px;
   font-size: 16px;
}

.deal__card_brand {
   position: absolute;
   top: calc(100% + 5px);
   right: 10px;
   font-size: 20px;
   cursor: pointer;
   border-radius: 50%;
   z-index: 1;
}

.deal__card-end_log {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
}

.deal__card-end_log img {
   height: 18px;
   width: 18px;
}

.deal__card_brand::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.deal__card_brand.open {
   background: #3c3434;
   border-radius: 8px;
   padding: 5px;
   color: #fff;
}

.deal__card_brand-img {
   width: 40px;
   height: auto;
   object-fit: cover;
   cursor: pointer;
}

.deal__card_brand.open .deal__card_brand-img {
   display: none;
}

.deal__card_brand span {
   display: none;
}

.deal__card_brand.open span {
   display: block;
}

/* deals_page END */
#form_deal {
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   width: 100vw;
   height: 100%;
   z-index: 100;
   background: #000000cf;
}

#form_deal.open {
   display: flex;
   justify-content: center;
}

.deal-wrapper {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
   background-color: #e8e8e8;
   max-width: 500px;
   font-size: 18px;
   padding: 10px 10px 50px 10px;
   overflow: auto;
}

.btn-do-wrapper {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.btn--close-form-deal {
   width: 40px;
   height: 40px;
   position: absolute;
   cursor: pointer;
   top: 16px;
   right: 16px;
   background: var(--color-ins-text);
   border-radius: 50%;
   z-index: 1;
}

.btn-do {
   margin: 0 auto;
   padding: 10px;
   font-size: 26px;
   text-transform: uppercase;
   width: 100%;
   background: var(--color-ins-text);
   border-radius: 8px;
   color: #fff;
   font-family: 'FiraSansExtraCondensed', sans-serif;
   font-weight: 600;
}

.deal__block {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.deal__block .img-copy {
   position: absolute;
   top: 0;
   right: 10px;
}

.block_row {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

.deal__block_title {
   font-weight: 600;
}

.set--start {
   background-color: #2ea32a;
}

.set--end {
   background-color: #093302;
}

.set--reschedule {
   background-color: #ffd900;
}

.set--cancel {
   background-color: #f76666;
}

.deal__card_action {
   width: fit-content;
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 16px;
}

.deal__card_action img {
   display: none;
}

.status__block {
   position: relative;
   opacity: .8;
   padding: 5px;
   font-size: 16px;
}

/* deal__card END*/
.do-main .form-notification {
   bottom: 20px;
   max-width: 500px;
   width: calc(100vw - 40px);
}

.do-main main {
   height: 100%;
   overflow: auto;
}

.do-main #text_notification {
   font-size: 18px;
   resize: none;
}

.btn-change-action {
   align-self: self-end;
   padding: 10px 20px;
   font-size: 20px;
}

.do-main .btn_close-form-notification {
   width: 50px;
   height: 50px;
}

.do-main .form-notification.open {
   right: 20px;
}

.do-main .btn_close-form-notification::before {
   position: absolute;
   z-index: 1;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.do-main .btn_close-form-notification img {
   width: 100%;
   height: auto;
}

.stages__list-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.stages__list_item {
   border-radius: 4px;
   font-size: 20px;
   padding: 6px;
   cursor: pointer;
}

.stages__list_item.selected {
   background: var(--color-ins-text) !important;
}

.non-deals {
   font-size: 20px;
   text-align: center;
}

.do-main .user {
   margin: 0;
}

.logo_img {
   width: 90px;
   height: auto;
   opacity: .3;
   position: absolute;
   right: 0;
}

.deal__card .text_col {
   font-size: 16px;
}

.deal__card .job_title,
.deal__card .deal__card_user img {
   display: none;
}

.do-main .main-row {
   padding: 3px 10px;
}

.do-main .user-menu {
   position: inherit;
   visibility: visible;
   max-width: 100px;
   background-color: transparent;
   box-shadow: none;
   padding: 0;
}

.user-menu img {
   width: 40px;
   height: auto;
}

.lk_exit {
   position: relative;
}

.lk_exit::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.do-main .user_login {
   width: min-content;
}

.do-main .logo img {
   margin: 0;
}

.reload-page {
   padding: 2px;
   background: #1a58ba !important;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   font-family: 'FiraSansExtraCondensed', sans-serif;
   padding: 2px 0 !important;
}

.do-main .main-row {
   gap: 10px;
}

.do-main .swiper-button-next,
.do-main .swiper-button-prev {
   background: transparent;
}

.do-main .plus_circle {
   width: 30px;
   height: 30px;
   font-size: 35px;
   line-height: 30px;
   position: absolute;
   left: 6px;
}

.do-main .title_lable {
   margin: 0 0 0 -10px;
}

.do-main .accordion_title {
   padding-bottom: 5px;
   margin-bottom: 0;
}

.copy-deal {
   position: absolute;
   top: 17px;
   right: 100px;
   width: 40px;
   height: auto;
   z-index: 1;
}

.form-editor .copy-deal {
   top: 8px;
   cursor: pointer;
}


.deal__block-icon {
   display: flex;
   gap: 10px;
   padding: 10px;
   border-radius: 14px;
   background: #e8e8e8;
}

.deal__block-icon_img {
   width: 40px;
   height: 40px;
   background: #fff;
   display: flex;
   border-radius: 50%;
   flex-shrink: 0;
   padding: 6px;
   align-items: center;
   justify-content: center;
}

.deal__block-icon_img img {
   width: 100%;
   height: auto;
}

.deal__block-icon_content {
   display: flex;
   flex-direction: column;
   flex: 1;
   font-size: 16px;
}

.deal__block-icon_text {
   opacity: .5;
}

.deal__block-icon_content a {
   color: #000;
   text-decoration: underline;
}

.deal__block-bk {
   padding: 8px;
   border-radius: 14px;
   background: #fff;
}

.deal__block-bk .accordion {
   background: transparent;
   padding: 0;
}

.deal__block-bk .accordion_title {
   border: none;
   padding-bottom: 0;
   margin-bottom: 0;
   font-size: 16px;
   color: #000;
}

.deal__block-bk .accordion_title span {
   font-weight: 400;
   text-align: end;
   flex: 1;
   text-decoration: underline;
}

.form__deal .accordion_title::before {
   top: 0;
   width: 100%;
   height: 100%;
   right: 0;
   background: none;
   z-index: 1;
}

.deal__different-data {
   position: relative;
}

.deal__different-data .deal__card_brand {
   top: 0;
}

.deal__different-data .deal__card-end_log {
   justify-content: start;
}

.accordion-btn-img .accordion_title {
   background-color: #1a58ba;
   align-items: center;
   color: #fff;
   text-transform: uppercase;
   padding-top: 6px;
   gap: 5px;
   border-radius: 8px;
   justify-content: center;
}

.accordion-img {
   width: 30px;
   height: auto;
}

.deal__block-icon_content p {
   display: flex;
   gap: 5px;
}

.deal__block-icon .btn-img {
   border: none;
   padding: 0;
   margin-right: 5px;
   font-size: 18px;
}

.deal__block-bk li {
   margin-left: 20px;
   background: transparent;
}

.copy-text-deal {
   right: 60px;
}

.deal__comment {
   position: relative;
}

#comment_executor {
   width: 100%;
   border-radius: 4px;
   border: 1px solid;
   resize: none;
   font-size: 18px;
   padding: 4px;
}

.send_comment {
   position: absolute;
   bottom: 10px;
   right: 5px;
   width: 40px;
   height: 40px;
   border-radius: 2px;
   opacity: 1;
}

.no_send {
   opacity: .2;
}