@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%;
}

.mw100 {
   max-width: 100% !important;
}

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

.insert--delete,
.insert--delete_all {
   width: 16px;
   height: 16px;
}

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;
   display: flex;
   flex-direction: column;
   height: 100%;
}

.btn-hover {
   position: relative;
}

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

/* 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-icon {
   position: relative;
   height: 25px;
   width: 25px;
}

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

.header-icon 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;
   box-shadow: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
}

.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;
   transition: .2s;
}

.links-item a:hover {
   color: var(--color-ins-text) !important;
   text-decoration: underline;
}

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;
   gap: 10px;
   cursor: pointer;
   color: #000;
   padding: 0 20px;
}

.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;
   transition: .2s;
   z-index: 25;
   box-shadow: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
}

.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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   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;
   white-space: nowrap;
}

.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;
   height: 100%
}

.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;
   height: 100%;
   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%;
   object-fit: contain;
}

.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,
.btn_close::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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   z-index: 1;
}

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

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

.btn-visibility-off {
   display: none;
}

.btn-visibility-on {
   display: block;
}

.visibility-row .btn-visibility-off {
   display: block;
}

.visibility-row .btn-visibility-on {
   display: none;
}

.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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   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,
.btn_close-modal {
   position: absolute;
   width: 50px;
   height: 50px;
   top: 3px;
   right: 3px;
   display: flex;
   cursor: pointer;
   color: #fff;
   background: var(--color-ins-text);
   border-radius: 50%;
   background-image: url(../img/delete-white.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
}

.btn_close-modal {
   width: 40px;
   height: 40px;
}

.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;
   cursor: pointer;
   background-color: #ffffff;
   width: 30px;
   height: 30px;
   display: flex;
   background-image: url(../img/delete.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 50%;
}

.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,
.btn-deals-search {
   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 {
   display: flex;
   gap: 10px;
   font-size: 14px;
   color: #b1b1b1;
   align-items: center;
}

.input__block_title img {
   width: 20px;
   opacity: .5;
}

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,
#datePicker,
.saved-filter_name {
   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 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;
   min-height: 88px;
}

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

.btn_box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   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,
.title__page .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;
}

/* adjustments-wrapper */
.adjustments-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 10px;
   border: 1px solid #cccccc;
   padding: 10px;
   border-radius: 4px;
}

.adjustments {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.adjustments__item_new {
   display: none;
}

.adjustments__item {
   position: relative;
   width: 100%;
   display: flex;
   gap: 5px;
   background: #ededed;
   align-items: center;
   padding: 10px;
   border-radius: 4px;
   padding-left: 30px;
   transition: all 0.3s ease;
}

.moving__item.moving {
   transform: scale(0.98);
   opacity: 0.8;
   background-color: #2ea32a3b;
}

.moving__item:first-child .btn--move_up,
.moving__item:last-child .btn--move_down {
   visibility: hidden;
}

.moving__item-move {
   position: absolute;
   left: 0;
   visibility: hidden;
   display: flex;
   flex-direction: column;
   transition: .2s;
   scale: 0;
   z-index: 1;
}

.moving__item:hover .moving__item-move {
   visibility: visible;
   scale: 1;
}

.btn--move_up,
.btn--move_down {
   width: 30px;
   height: 30px;
   cursor: pointer;
   transition: .1s;
   border-radius: 50%;
   border: 2px solid transparent;
   background: #ededed;
}

.btn--move_up {
   rotate: 180deg;
}

.btn--move_up:hover,
.btn--move_down:hover {
   /* background: var(--color-ins-text); */
   scale: 1.1;
   border: 2px solid var(--color-ins-text);
}

.adjustments__item-price {
   display: flex;
   background: #fff;
   border-radius: 4px;
   height: 30px;
   padding: 0 6px;
   align-items: center;
   width: 40%;
}

.adjustments__item-price_sign {
   font-size: 50px;
   width: 20px;
   text-align: center;
}

.adjustments__item-price input {
   background: #fff;
   border: none;
   width: 100%;
}

.adjustments__item-values {
   display: flex;
}

.adjustments__item-values span {
   display: none;
   background: var(--color-ins-text);
   border-radius: 4px;
   font-size: 18px;
   text-align: center;
   color: #fff;
   height: 30px;
   width: 40px;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.adjustments__item-values span.active {
   display: flex;
}

.adjustments .adjustments_list {
   border: none !important;
   height: 30px;
   background: #fff !important;
   border-radius: 4px;
}

.adjustments_time {
   position: absolute;
   top: 97%;
   left: 15px;
   color: #ccc;
   font-size: 10px;
   opacity: .8;
}

.btn--adjustment_delete {
   width: 30px;
   height: 30px;
   background-color: red;
   border-radius: 4px;
   cursor: pointer;
}

.btn--adjustment_add {
   background-color: green;
   width: 30px;
   height: 30px;
   cursor: pointer;
   border-radius: 4px;
   align-self: center;
}

#adjustments_price {
   font-size: 16px;
   font-weight: 400;
}


@media (max-width: 900px) {
   .adjustments-wrapper {
      padding: 0 0 10px;
      border-top: none;
   }

   .adjustments {
      gap: 0;
   }

   .adjustments__item {
      background: #e8e8e8;
      padding: 10px 0px 26px;
      border-radius: 0;
      padding-left: 30px;
      transition: none;
      flex-wrap: wrap;
   }

   .adjustments_time {
      top: 105%;
   }

   .adjustments__item-move {
      position: absolute;
      display: flex;
      flex-direction: column;
      left: 0;
   }


   .adjustments-wrapper input,
   .adjustments_list {
      font-size: 20px;
      width: calc(100% - 40px);
   }

   .adjustments__item-price_sign {
      font-size: 36px;
   }

   .adjustments__item-price {
      gap: 5px;
      width: calc(100% - 40px);
   }

   .adjustments__item-values span {
      font-size: 18px;
      width: 30px;
   }

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

   .btn--move_up,
   .btn--move_down {
      width: 30px;
      height: 30px;
      background: #e8e8e8;
      border: 2px solid #000;
      transition: none;
   }

   .btn--move_up:hover,
   .btn--move_down:hover {
      scale: 1;
      border: 2px solid #000;
   }
}

/* adjustments-wrapper END */

.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;
   align-items: center;
}

.log_btns_actions {
   top: 0;
}

.log_btns_actions {
   border: none;
}

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

.notifications--done {
   width: 30px;
   height: 30px;
   background-image: url(../img/checkbox.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;

}

.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;
}

.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 {
   content: '';
   position: absolute;
   filter: invert(1);
   background-image: url(../img/plus.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #fff;
}

.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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
}

#messager .open {
   scale: 1;
}

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

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

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

#messager .btn-min {
   background: #fff;
   margin: 10px auto 0;
   color: #000;
}

/* 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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   border-radius: 4px;
   overflow: hidden;
   z-index: 1001;
}

.logs-wrapper .clue_content,
.table__list .clue_content {
   left: auto;
   right: 0;
   width: 200%;
   min-width: 450px;
}

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

.dialog-wrapper {
   color: #000;
   max-height: 250px;
   overflow: auto;
}

.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;
}

.tr-hover.selected {
   background-color: #dbdbdb;
   color: #000;
}

.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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   background-color: #fff;
   z-index: 10;
   max-height: 175px;
   overflow: auto;
}

.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;
   z-index: 1;
}

.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;
   top: 14px;
   width: 26px;
   height: 26px;
   background: #000;
   background-image: url(../img/add.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   filter: invert(1);
}

.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;
}

.btn-search-contact {
   cursor: pointer;
   width: 25px;
   height: 25px;
}

.search-block-input .spiner {
   display: none;
   position: absolute;
   width: 100%;
   padding: 5px;
   z-index: 1;
   background: #cbcbcbc7;
   border-radius: 4px;
}

.pending .spiner {
   display: block;
}

.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: 10;
}

.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;
}

.deal_blue {
   background: #3f51b538;
}

.deal_blue-red {
   background: linear-gradient(140deg, #f7caca 10%, #3f51b538 30%);
}

.deal_blue-yellow {
   background: linear-gradient(140deg, #f7f6ca 10%, #3f51b538 30%);
}

.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,
.notifications--del {
   position: absolute;
   top: 0;
   right: 3px;
   height: 30px;
   width: 30px;
   background-image: url(../img/delete.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
}

.notifications--del {
   position: initial;
}

.btn-min {
   display: flex;
   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;
   white-space: nowrap;
}

.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;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

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

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

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

.swiper_link {
   position: absolute;
   top: 10%;
   left: 10%;
   width: 40px;
   height: 40px;
   transition: 0.2s ease opacity;
   background-image: url(../img/eye.svg);
   background-size: contain;
   filter: invert(1);
}

.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;
   margin-top: 10px;
}

.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;
}

.fields-wrapper {
   width: 100%;
   padding: 10px 20px;
   border: 1px solid #ccc;
   border-radius: 4px;
   display: flex;
   gap: 2px;
   overflow-x: auto;
   max-width: 1000px;
}

.fields-wrapper .moving__item-move {
   width: calc(100% + 30px);
   left: -15px;
   flex-direction: row;
   justify-content: space-between;
   z-index: 10;
}

.fields-wrapper .btn--move_up {
   rotate: 90deg;
}

.fields-wrapper .btn--move_down {
   rotate: -90deg;
}

.add_item {
   display: flex;
   align-items: center;
   position: relative;
   font-size: 17px;
   padding: 2px 18px;
   transition: .2s;
   cursor: pointer;
   text-align: center;
   justify-content: center;
   max-width: fit-content;
   white-space: nowrap;
   border-right: 1px solid #000;
   background: #d4d4d4;
}

.add_item:hover {
   background: #acacac;
}

.report .multi-select-wrapper {
   background: #fff;
   z-index: 20;
   top: 100%;
   right: 0;
   gap: 4px;
   width: 95%;
   justify-content: flex-start;
   position: absolute;
   overflow: hidden;
   height: 0;
   padding: 20px;
   visibility: hidden;
   transition: .2s;
   padding: 0;
}

.report .open_accordion .multi-select-wrapper {
   height: fit-content;
   visibility: visible;
   padding: 20px;
   box-shadow: 2px 2px 10px #000;
}

/* .report .multi-select-wrapper {
   background: #fff;
   gap: 4px;
   justify-content: flex-start;
} */

.multi-select_item {
   position: relative;
   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,
.linkOut,
.multi-item-wrapper span {
   width: fit-content;
   padding: 2px 4px;
   border-radius: 4px;
   border: 1px solid var(--color-ins-text);
   color: var(--color-ins-text);
   opacity: .5;
}

.reports_table .row-name {
   align-items: flex-start;
   flex-direction: column;
}

.linkOut {
   position: relative;
   z-index: 1;
}

.multi-item-wrapper span {
   cursor: auto;
}

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

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

.accordion {
   display: flex;
   flex-direction: column;
   padding: 8px;
   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;
   transition: .2s;
}

.open_accordion .accordion_title::before {
   rotate: 180deg;
}

.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: none;
   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_done-text {
   color: #62ad3e;
   padding: 2px;
   background: #e6e6e6;
   border-radius: 8px;
}

.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: 2;
}

.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-screen {
   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: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
}

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

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

.btn-update-filter {
   display: none;
}

.update-filter .btn-min {
   display: none;
}

.update-filter .btn-update-filter {
   display: block;
}

.btns-filter_move,
.btns-control {
   display: flex;
   gap: 5px;
}

.btns-filter_move {
   scale: 1;
   transition: .2s;
}

.scale0 {
   scale: 0;
}

.btns-control {
   flex: 1;
   gap: 2px;
   justify-content: flex-end;
}

.btn-filter_move,
.btn-control_move,
.btn--positioning {
   display: block;
   width: 28px;
   height: 28px;
   padding: 5px;
   border: 1px solid #ccc;
   cursor: pointer;
   transition: .2s;
   border-radius: 4px;
}

.btn-filter_move:hover,
.btn-control_move:hover,
.btn--positioning:hover {
   background: var(--color-ins-text);
}

.btn-filter_move img,
.btn-control_move img,
.btn--positioning img {
   width: 100%;
   object-fit: contain;
   opacity: .5;
}

.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-markProcessed {
   position: absolute;
   top: 0;
   right: 0;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   overflow: hidden;
   cursor: pointer;
   background-color: var(--color-ins-text);
   color: #fff;
   background-image: url(../img/delete-white.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 1;
}

.btn_close-messager {
   position: absolute;
   cursor: pointer;
   width: 24px;
   height: 24px;
   top: -12px;
   right: -13px;
   background: #fff;
   border: 2px solid #000;
   border-radius: 50%;
   padding: 2px;
}

.btn_close-messager img {
   filter: invert(1);
}

.btn_close-modal {
   padding: 4px;
}

.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,
.item_row {
   position: relative;
   padding: 4px 10px;
   border-radius: 4px;
   transition: .2s;
   border: 1px solid transparent;
}

.item_row {
   padding: 0;
}

.setting-block .item_row {
   flex-direction: row !important
}

.setting-block .input__block_title {
   max-width: 29%;
}

.btn_block--add,
.btn_block--delete {
   position: absolute;
   font-size: 24px;
   line-height: 0;
   scale: 0;
   width: 24px;
   height: 24px;
   display: block;
   bottom: calc(100% - 10px);
   left: calc(100% - 10px);
   visibility: hidden;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   transition: visibility, scale 0.3s ease, visibility 0s linear 2.3s;
   z-index: 1;
   cursor: pointer;
   overflow: hidden;
}

.item_connent:hover {
   border: 1px solid #ccc;
}

.delete {
   transform: scale(0.98);
   opacity: 0.8;
   background-color: red;
}

.btn_block--add {
   background: var(--color-ins-text);
   left: 50%;
   top: calc(100% - 12px);
}

.item_connent:hover .btn_block--delete,
.item_connent:hover .btn_block--add {
   scale: 1;
   visibility: visible;
   transition: visibility, scale 0.3s ease 2s, visibility 0s linear;
}

.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: 22px;
}

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

.pagination {
   position: relative;
   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-calculate-deals {
   position: absolute;
   top: 10px;
   left: 0;
}

.count_all_row {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 15px;
   color: var(--color-ins-text);
}

.btn-more-list,
.btn-calculate-deals {
   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;
   align-items: center;
}

.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: 15;
   flex-direction: column;
   gap: 5px;
   box-shadow: 5px 5px 8px 0px rgb(0 0 0 / 47%);
   border: 1px solid #e7e7e7;
   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;
   width: 20px;
   height: 20px;
   position: relative;
   z-index: 1;
   background-image: url(../img/delete-white.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
}

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

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

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

.btn-delete-filter {
   scale: 0;
   width: 24px;
   height: 24px;
   position: absolute;
   bottom: calc(100% - 10px);
   left: calc(100% - 10px);
   visibility: hidden;
   background: #fff;
   border-radius: 50%;
   transition: visibility, scale 0.3s ease, visibility 0s linear 2.3s;
   overflow: hidden;
   background-image: url(../img/delete.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   /* Задержка перед скрытием */
}

.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;
   height: 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__response-AI {
   display: flex;
   gap: 5px;
   font-size: 13px;
   align-items: center;
   color: #aaa;
}

.chat__response-AI img {
   width: 30px;
}

.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;
   align-items: center;
}

.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;
}

.btn--microphone {
   width: 20px;
}

.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%;
}

.select--custom_wrapper.open {
   z-index: 99999;
}

.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--custom_item.selected:hover {
   background-color: var(--color-ins-text);
}

.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;
   border: 1px solid var(--color-ins-text);
}

.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.today {
   background-color: #a94242;
   border: 2px solid #a94242 !important;
}

.deal__date_item.last_day {
   background-color: #6d6d6d;
   border: 2px solid #6d6d6d !important;
}

.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.archive {
   filter: opacity(0.5);
}

.btn-admin {
   font-size: 16px;
   border-radius: 4px;
   background-color: #f5f00b;
   padding: 4px 16px;
   width: fit-content;
   display: block;
   align-self: self-end;
}

#deals_search {
   font-size: 18px;
   padding: 4px 5px;
   border-radius: 4px;
   background-color: #f0f2f4;
   border: 1px solid #cccccc;
   flex: 1;
}

.deals_page .controls {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   margin-bottom: 0;
   row-gap: 10px;
   justify-content: flex-end;
}

.controls .row {
   flex: 1;
}

.deals-search-wrapper {
   width: 100%;
   display: flex;
   gap: 5px;
}

.deal__card-main_body {
   position: relative;
   padding: 10px;
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.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;
   display: flex;
   align-items: center;
   gap: 10px;
}

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

.deal__card-block_title {
   font-size: 18px;
   font-weight: 600;
   max-width: 33%;
   min-width: 33%;
}

.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;
   flex-direction: column;
   align-items: 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;
}

.deal__card-main_body .input__block_title {
   font-size: 18px;
   color: #fff;
   border-top: 1px dashed;
   margin-top: 10px;
   padding-top: 10px;
}

.deal__card-main_body .job_title {
   display: none;
}

.deal__card-main_body .btn-search {
   color: #000;
   background-color: #fff;
}

.deal__card-main_body .select--custom {
   width: 100%;
   background: #56565626;
   border-radius: 4px;
   max-width: calc(67% - 10px);
}

.deal__card-block .table-avatar-user img {
   display: none;
}

.deal__card-main_body .select--add_wrapper {
   border: none;
   flex-wrap: nowrap;
   font-size: 18px;
   overflow: hidden;
   min-height: auto;
   padding: 1px 4px;
}

.deal__card-main_body .select--custom_wrapper {
   color: #000;
   z-index: 15;
}

.deal__card-main_body .select--custom_btn-open {
   background: transparent;
   background-image: url(../img/arrow-down-search.svg);
   background-repeat: no-repeat;
   background-position: center;
   filter: invert(1);
   background-size: 10px;
   right: -2px;
   top: 7px;
}

.deal__card-main_body .select--add_wrapper .select--custom_item {
   color: #fff;
   white-space: nowrap;
   border-bottom: 1px solid #ccc;
}

.forecast_time {
   width: calc(67% - 10px);
   color: #fff;
   font-size: 19px;
   background: #56565626;
   border-radius: 4px;
   height: fit-content;
   padding: 4px;
}

.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;
}

button[disabled="yes"] {
   opacity: .5;
}

.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;
}

.do-phone-wrapper {
   display: flex;
   gap: 10px;
}

.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;
}

.btn--payment_method_send,
.btn--user_implementation_send,
.btn--deal_forecast_time_send {
   bottom: 5px;
   right: 5px;
   top: auto;
   background: #fff;
   border-radius: 50%;
   z-index: 10;
}

.deal__comment {
   position: relative;
}

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

.do-deal .btn-min {
   padding: 4px 14px;
   font-size: 18px;
}

.do-deal .comment_send,
.do-deal .notification_send,
.adjustments_send {
   position: absolute;
   bottom: 10px;
   right: 5px;
   width: 40px;
   height: 40px;
   border-radius: 2px;
   opacity: 1;
}

.adjustments_send {
   bottom: 5px;
}

.do-payment_method {
   width: 100%;
   font-size: 18px;
   padding: 2px;
   color: #fff;
   background: #56565626;
   border-radius: 4px;
}

.no_send {
   opacity: .2 !important;
}

/* Шкала времени */
.controls {
   margin-bottom: 15px;
   display: flex;
   gap: 10px;
   align-items: center;
}

.controls button {
   padding: 4px 6px;
   border-radius: 4px;
   border: 1px solid #ccc;
   transition: .2s;
   background-color: #fff;
   cursor: pointer;
   transition: .2s;
}

.controls button:hover {
   background-color: #ccc;
}

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

.controls .btn-today {
   border: 1px solid #d73a3a;
}

.controls .btn-today.active {
   background-color: #d73a3a;
}

.stages__colors {
   display: flex;
   gap: 30px;
   margin-left: 10%;
}

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

.stages__colors-item-bk {
   width: 25px;
   height: 25px;
   border-radius: 4px;
   border: 1px solid #ccc;
}

.timeline-container {
   overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   flex: 1;
   padding-bottom: 20px;
}

.timeline-header {
   display: flex;
   position: relative;
   border-bottom: 1px solid #333;
   border-top: 1px solid #333;
}

.hour-mark,
.day-mark {
   position: relative;
   flex: 1;
   min-width: 0;
   box-sizing: border-box;
   font-size: 14px;
   background-color: #e3e3e3;
}

.hour-mark::before,
.day-line::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: 1000px;
   border-left: 1px dashed #ccc;
}

.hour-mark,
.hour-mark::before {
   background-color: #9d9d9d45;
}

.hour-mark.working-hours,
.hour-mark.working-hours::before {
   background-color: #ffffff00;
}

.day-mark {
   font-weight: bold;
   background-color: #f5f5f5;
   display: flex;
   align-items: center;
   justify-content: center;
}

.day-mark {
   font-weight: bold;
   background-color: #e3e3e3;
}

.current-day-mark {
   background-color: #e6f2ff;
}

.timeline-body {
   position: relative;
   padding-top: 10px;
   overflow-y: auto;
   height: 100%;
}

.deal-row {
   position: relative;
   display: flex;
   align-items: center;
   height: 85px;
   border-bottom: 1px solid #eee;
}

.deal-block {
   position: absolute;
   display: flex;
   flex-direction: column;
   height: auto;
   max-height: 80px;
   border-radius: 4px;
   padding: 5px;
   box-shadow: none;
   font-size: 16px;
   color: #fff;
   min-width: 30px;
   box-sizing: border-box;
   cursor: pointer;
   transition: all .2s;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: fit-content;
}

.deal-block.week-mode {
   font-size: 14px;
   padding: 1px;
   overflow: visible;
   color: #1a1a1a;
}

.deal-block:hover {
   filter: brightness(0.9);
   z-index: 10;
}

.deal-block.expand {
   color: #fff;
   overflow: visible;
   max-width: fit-content;
}

.current-time-line {
   position: absolute;
   top: 0;
   width: 2px;
   background-color: var(--color-ins-text);
   height: 100%;
}

.maxWidth {
   max-width: fit-content !important;
}

.current-time-label {
   position: absolute;
   background-color: var(--color-ins-text);
   color: white;
   padding: 2px 5px;
   border-radius: 3px;
   font-size: 12px;
   transform: translateY(-50%);
   white-space: nowrap;
   z-index: 10;
}

.deal-id {
   font-weight: bold;
   margin-bottom: 2px;
}

.deal-name {
   margin-bottom: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.deal-price {
   color: #2a6496;
   font-weight: bold;
}

.deal-time {
   font-size: 10px;
   color: #666;
}

.week-mode .deal-time {
   font-size: 7px;
}

.row-label {
   position: absolute;
   width: 95px;
   padding-right: 5px;
   text-align: right;
   font-size: 12px;
   line-height: 60px;
   color: #666;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.date-controls {
   display: flex;
}

#datePicker {
   padding: 0 10px;
}

#controls_date {
   font-weight: 600;
   color: #d73a3a;
}

.deal-block .select--custom {
   min-width: 200px;
   padding-right: 20px;
   background: #ffffff5e;
   border-radius: 4px;
}

.deal-block .select--add_wrapper {
   min-height: auto;
   border: none;
   flex-wrap: nowrap;
   font-size: 14px;
   padding: 0;
   background: none;
}

.deal-block .select--add_wrapper .select--custom_item {
   padding: 3px;
   color: #fff;
}

.deal-block .job_title {
   display: none;
}

.deal-block .select--custom_btn-open {
   top: 3px;
   right: 0px;
   background: none;
   background-image: url(../img/arrow-down-search.svg);
   background-size: 12px;
   background-repeat: no-repeat;
   background-position: center;
}

.deal-block .select--custom_wrapper {
   background: #ffffff;
   z-index: 15;
   color: #000;
}

.deal-block .table-avatar-user img {
   width: 20px;
   height: 20px;
}

.deal-block .table__col input {
   color: #fff;
   background: #ffffff5e;
   border-radius: 4px;
   padding: 4px;
   position: relative;
   z-index: 2;
}


.deal-block a {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.save--deal {
   display: none;
   position: absolute;
   top: 2px;
   left: 2px;
   z-index: 1;
   color: #000;
}

.save--deal.active {
   display: block;
}

.week-mode .table__col {
   display: none;
}

.week .deal-row {
   height: 40px;
}

.btn_expand--deal {
   position: absolute;
   top: 5px;
   right: 5px;
   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%;
   rotate: -90deg;
   transition: .2s;
}

.expand .btn_expand--deal {
   rotate: 90deg;
}

/* Шкала времени END */
.example {
   font-size: 16px;
   opacity: .5;
}

.example span {
   background-color: #6fff5b;
   border-radius: 4px;
}

.report .filters-btn_box,
.report .filters_get,
.report #filterInput {
   display: none;
}

.report .filters {
   flex-direction: column;
   padding: 0;
   border: none;
}

.report .screen-filters {
   padding: 0px;
}

.form .accordion {
   padding: 5px;
   background: #ebebeb;
   border-radius: 8px;
   border-bottom: 1px solid #ccc;
}

.report .filters-wrapper {
   width: 100%;
}

.report .screen-filters {
   position: relative;
   box-shadow: none;
   max-height: none;
}

.report_filters {
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
}

.report_filters .el-filter {
   padding: 2px 4px;
   border-radius: 4px;
   font-size: 15px;
   background: var(--color-ins-text);
   color: #fff;
}

.setting_title-table {
   margin-top: 10px;
   padding: 0 10px;
   display: flex;
}

.deal_fields-wrapper {
   display: flex;
   flex-direction: column;
   max-height: 20vh;
   overflow: auto;
   border-bottom: 1px solid #ccc;
}

.item_row {
   position: relative;
}

.width_col {
   width: 15% !important;
}

.visible_col {
   width: 10% !important;
}

.btn--colName_delete {
   position: absolute;
   width: 20px;
   height: 20px;
   opacity: 0;
   scale: 0;
   background-color: red;
   border-radius: 50%;
   right: 10px;
   cursor: pointer;
   padding: 2px;
   transition: .2s;
}

.item_row:hover .btn--colName_delete {
   opacity: 1;
   scale: 1;
}

.btn--colName_add {
   position: relative;
   background-color: green;
   width: 30px;
   height: 30px;
   cursor: pointer;
   border-radius: 4px;
   align-self: center;
   transition: .2s;
   display: flex;
   align-items: center;
}

.btn--colName_add::before,
.btn--colName_add::after {
   position: absolute;
   content: '';
   height: 2px;
   background: green;
   width: 0;
   right: 115%;
   transition: .2s;
   opacity: .5;
}

.btn--colName_add::after {
   right: auto;
   left: 115%;
}

.var__name_col {
   position: relative;
   width: 30%;
   display: flex;
}

.deal_fields-wrapper .var_name {
   border: none;
   color: red;
   background: none;
   font-size: 14px;
}

.deal_fields-wrapper .th_name {
   width: 45%;
}

.btn--colName_add:hover::before,
.btn--colName_add:hover::after {
   width: 150px;
}

.table_items-scroll {
   padding-top: 10px;
   display: flex;
   gap: 5px;
   flex-wrap: nowrap;
   overflow: auto;
   height: 50px;
   max-width: 33vw;
}

.table_items-scroll .el-filter,
.table_items-scroll .el-item {
   padding: 2px 4px;
   border-radius: 4px;
   font-size: 15px;
   background: var(--color-ins-text);
   color: #fff;
   white-space: nowrap;
   height: fit-content;
   position: relative;
}

.span-add {
   position: absolute;
   right: 0;
   top: -9px;
   border-radius: 50%;
   font-size: 8px;
   z-index: 1;
   padding: 2px 4px;
   border: 1px solid #fff;
   color: #fff;
}

.query-span {
   background-color: #d95050;
}

.FX-span {
   background-color: green;
}

.example_block {
   background: #0080001f;
   border-radius: 4px;
   padding: 5px 10px;
}

/* custom-block__choice */
.custom-block__choice {
   display: flex;
   border-radius: 4px;
   border: 1px solid #000;
   box-shadow: 0px -2px 3px -2px rgb(0 0 0) inset;
}

.custom-block__choice_item {
   position: relative;
   width: 50%;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
   transition: .2s;
   text-align: center;
   overflow: hidden;
}

.custom-block__choice_item:first-child::before {
   position: absolute;
   content: '';
   top: 0;
   right: 0;
   transition: .2s;
   background: var(--color-ins-text);
   width: 0;
   height: 100%;
   z-index: -1;
}

.custom-block__choice_item:last-child::before {
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   transition: .2s;
   background: var(--color-ins-text);
   width: 0;
   height: 100%;
   z-index: -1;
}

.custom-block__choice_item.choice--selected::before {
   width: 100%;
}


.custom-block__choice_item.choice--selected {
   color: #fff;
}

/* custom-block__choice END */

.sorting_type {
   min-width: 360px;
}

.report .filters-wrapper,
.report .btn_close-modal {
   display: none;
}

.report .screen-filters {
   border: none;
   background: transparent;
}

.report .accordion_title {
   padding-bottom: 0;
   margin-bottom: 0;
}

.report .input__block,
.template_doc_form .input__block {
   padding-bottom: 10px;
   border-bottom: 3px solid #a2a2a2;
}

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

.block_col .input__block_title {
   width: 100%;
   line-height: 15px;
}

.answer {
   width: fit-content;
   padding: 5px;
   background: #b7e7b7;
   border-radius: 4px;
   align-self: self-end;
   max-width: 90%;
}

.question {
   width: fit-content;
   padding: 5px;
   background: #d1d1d1;
   border-radius: 4px;
   max-width: 90%;
}

.main-setting .accordion {
   padding: 0 5px 10px;
   background: #f5f5f5;
   border-bottom: 1px solid #ccc;
}

.main-setting .accordion_title {
   padding: 6px;
   border-radius: 4px;
   margin-bottom: 0;
}

.main-setting .accordion__box {
   border-radius: 0 0 4px 4px;
   gap: 4px;
}

#pre-load {
   display: none;
   position: fixed;
   z-index: 99999;
   bottom: 10px;
   right: calc(50% - 35px);
   width: 70px;
   height: 70px;
}

#pre-load.on {
   display: flex;
}

/* AI-setting */
.logo_ai {
   width: 30px;
   height: 30px;
}

.AI-btn {
   width: fit-content;
   position: relative;
   margin-top: 10px;
   padding: 2px 5px 2px 30px !important;
   display: flex;
   cursor: pointer;
   color: var(--color-ins-text);
   border-radius: 8px !important;
   border: 1px solid #ccc !important;
   transition: .2s;
}

.message_input-wrapper .AI-btn {
   margin-top: 0;
   padding: 10px 5px 10px 30px;
   border-radius: 10px;
}

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

.openAI_message {
   position: absolute;
   right: calc(100% + 180px);
}

.AI-btn::after,
.openAI_message::after {
   position: absolute;
   content: '';
   top: auto;
   left: 3px;
   width: 20px;
   height: 20px;
   background-image: url(/img/logo-openai.svg);
   background-repeat: no-repeat;
   background-size: contain;
}

.openAI_message::after {
   left: 0;
   width: 28px;
   height: 28px;
}

.label-name-AI {
   z-index: 1;
   position: absolute;
   top: -10px;
   right: -10px;
   border-radius: 5px;
   padding: 2px 5px !important;
   font-size: 10px;
   background: #000;
   color: #fff;
}

.AI-setting {
   display: flex;
   height: 100%;
   overflow: hidden;
}

.AI-setting__dialog-wrapper {
   width: 40%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.AI-setting-wrapper {
   width: 60%;
   border-left: 2px solid #ccc;
   margin-left: 20px;
}

.AI-setting-wrapper .setting-block {
   border: none;
   gap: 5px;
}

.AI-setting-wrapper .scroll-container {
   padding: 0 0 0 10px;
   max-height: calc(75vh - 49px);
   height: 100%;
   margin-bottom: 10px;
}

#messageBlock {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
   background: #f1f1f1;
   border-radius: 5px;
   overflow-y: auto;
   background: url(../img/background.jpg);
   padding: 10px;
}

.btn--i_am_responsible {
   width: 180px;
   position: relative;
   padding: 2px 5px 2px 32px;
   display: flex;
   font-size: 14px;
   border-radius: 4px;
   border: 1px solid #ccc;
   transition: .2s;
   align-items: center;
}

.btn--i_am_responsible:hover {
   background-color: #ccc;
}

.btn--i_am_responsible::before {
   position: absolute;
   content: '';
   top: auto;
   left: 3px;
   width: 25px;
   height: 25px;
   background-image: url(/img/checkbox-circle.svg);
   background-repeat: no-repeat;
   background-size: contain;
   opacity: .5;
}

.AI-setting .tab-wrapper {
   height: fit-content;
   gap: 2px;
}

.AI-setting .btn--tab {
   font-size: 16px;
}

.red_text {
   color: #ff3636;
}

.form-AI-body {
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.form-AI_description {
   font-size: 18px;
   color: #2d2d2d;
   padding: 6px;
   border-radius: 4px;
   background: #ebebeb;
}

.form-AI .form-wrapper {
   min-width: 900px;
}

.form-AI .btn--tab {
   font-size: 16px;
}

.form-AI .tab-wrapper {
   border: none
}

.form-AI .accordion_title {
   padding-bottom: 0;
   margin-bottom: 0;
   border: none;
}

.form-AI .open_accordion .accordion_title {
   margin-bottom: 10px;
}

.answer-block {
   transition: .2s;
   overflow: hidden;
}

.btn--transcription {
   width: 20px;
   height: 20px;
}

.link__docs {
   display: flex;
   flex-direction: column;
   margin: 10px 0;
   gap: 5px;
}

.btn--delete-doc {
   scale: 0;
   width: 30px;
   height: 30px;
   position: absolute;
   top: -15px;
   right: 0;
   visibility: hidden;
   background: #fff;
   transition: visibility, scale 0.3s ease, visibility 0s linear 2.3s;
   border-radius: 50%;
   background-image: url(/img/delete.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
   z-index: 10;
   cursor: pointer;
}

.link__document {
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.link__document:hover .btn--delete-doc {
   scale: 1;
   visibility: visible;
   transition: visibility, scale 0.3s ease 2s, visibility 0s linear;
}

.btn--add_link {
   position: relative;
}

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

.AI-btn---delete {
   position: absolute;
   top: -14px;
   right: -8px;
   width: 24px;
   height: 24px;
   background: #fff;
   background-image: url(../img/delete.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
   scale: 0;
   visibility: hidden;
   z-index: 200;
   border-radius: 50%;
   transition: scale .3s ease, visibility 0s linear 5s;
}

.clue:hover .AI-btn---delete {
   visibility: visible;
   scale: 1;
   transition: scale .3s ease 5s, visibility 0s linear;
}

/* AI-setting END */

/* links-block */
.links-block {
   align-items: baseline;
}

.folder {
   position: relative;
   display: flex;
   padding: 8px 0 8px 30px;
   cursor: pointer;
}

.folder::after {
   position: absolute;
   content: '';
   left: 0;
   width: 24px;
   height: 24px;
   background-image: url(../img/folder.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.links-block .btn-inner-drop-down-menu {
   padding: 0 10px;
}

.links-block .links-item a {
   padding: 2px 10px;
   display: block;
   color: #000;
   font-size: 18px;
   padding-left: 2px;
}

.drop-down-menu .folder {
   position: relative;
   padding: 4px 0 3px 30px;
   cursor: pointer;
   font-size: 18px;
   width: 100%;
   justify-content: space-between;
}

.control__menu {
   padding: 0;
   margin-top: 0;
   border-top: 1px dashed transparent;
   transition: .2s;
   overflow: hidden;
   max-height: 0;
}

.btns-control-open.control__menu {
   border-top: 1px dashed #ccc;
   padding: 10px;
   margin-top: 10px;
   max-height: 100px;
}

.links-block .links-item {
   list-style: none;
   display: flex;
   justify-content: space-between;
   padding: 8px 10px;
   border-radius: 4px;
   border: 1px dashed transparent;
}

.select--link {
   visibility: hidden;
   transition: .2s;
   width: 0;
   overflow: hidden;
}

.links-block .drop-down-menu:hover .select--link,
.open .select--link {
   width: 16px;
   transition: width .2s linear 5s;
   visibility: visible;
   z-index: 1;
   flex-shrink: 0;
}

.links-block .control__menu:hover {
   transition: visibility 0s linear 5s;
}

.btn--positioning.btn--delete_link {
   padding: 0;
}

.control__menu .btn--positioning {
   rotate: 90deg;
}

.control__menu .btn--add-forder {
   rotate: 0deg;
}

.chosen {
   background: #c1c1c1;
   border: 1px dashed #373737 !important;
}

/* .chosen>a,
.chosen>.folder {
   color: #fff !important;
} */
.hover_list {
   padding: 0;
}

.hover_list.open,
.open ul {
   opacity: 1;
   visibility: visible;
}

.links-block .inner-drop-down-menu {
   left: 100%;
}

.folder span {
   position: relative;
   width: 100%;
   margin-right: 10px;
   padding-right: 20px;
}

.folder span::before {
   position: absolute;
   content: '';
   right: 0;
   top: 5px;
   width: 12px;
   height: 12px;
   background-image: url(../img/arrow-down-search.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   rotate: -90deg;
}

.player-btn,
.audio-link {
   position: relative;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-ins-text);
   border-radius: 50%;
}

.player-btn::before,
.audio-link::before {
   position: absolute;
   content: '';
   width: 16px;
   height: 16px;
}

.message__body .audio-link {
   width: auto;
   height: auto;
   background: transparent;
}

.btn_play::before,
.audio-link::before {
   background-image: url(../img/audio-play.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.container-100 .cases__col:first-child {}

.message__body .audio-link::before {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: none;
}

.btn_pause::before {
   background-image: url(../img/audio-pause.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.btn_stop::before {
   background-image: url(../img/audio-stop.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.btn--delete_link img {
   width: 28px;
   height: 28px;
}

.modal-link.open {
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
}

.links-item .favicon {
   width: 20px;
   height: 20px;
   margin-right: 5px;
}

/* links-block END */

/* action */
.point-wrapper {
   border-bottom: 2px solid #ccc;
   padding-bottom: 5px;
}

.action_title {
   position: relative;
   font-size: 20px;
   padding-left: 30px;
}

.action_title::before {
   content: '';
   position: absolute;
   width: 25px;
   height: 25px;
   top: -3px;
   left: 0;
   border-radius: 50%;
   background: var(--color-ins-text);
   background-image: url(../img/hook.svg);
   background-size: 80%;
   background-position: center;
   background-repeat: no-repeat;
}

.emphasize {
   text-decoration: underline;
}

.action-form .example_block {
   width: fit-content;
}

.action-form .accordion {
   border: 1px solid #ccc;
   box-shadow: 2px 2px 4px #ccc;
}

.action-form .accordion_title {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

.action-form .accordion_title::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.actions__point {
   padding: 5px 0;
   gap: 5px;
}

.action__item {
   position: relative;
   display: flex;
   flex-direction: column;
   /* background: #eafee4; */
   border-radius: 8px;
}

.condition-wrapper {
   position: relative;
   display: flex;
   gap: 5px;
   flex-direction: column;
   border: 1px solid #ccc;
   padding: 4px;
   border-radius: 8px;
   background: #f5f5f5;
}

.condition_item {
   position: relative;
   display: flex;
   gap: 20px;
   padding-top: 20px;
   padding-left: 50px;
   flex-direction: row;
   align-items: center;
   padding-top: 10px;
}

.condition_item .select--custom_wrapper {
   flex-wrap: wrap;
   flex-direction: row;
   width: 500px;
}

.condition_item .select--custom_item {
   border: 1px solid #ccc;
   border-radius: 4px;
}

.condition_item:first-child .condition_item-operator {
   display: none;
}

.condition_item:first-child {
   padding-top: 30px;
}

.condition_item:first-child .btn-delete--condition {
   display: none;
}

.action__item .condition-wrapper label {
   position: absolute;
   top: 8px;
   left: 10px;
   display: flex;
   gap: 5px;
}

.change--action {
   position: absolute;
   bottom: 5px;
   right: 10px;
   cursor: pointer;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: #fff;
   background-image: url(../img/arrow-down-search.svg);
   background-size: 70%;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 50%;
   box-shadow: 0px 0px 6px #999;
}

.action__item select {
   width: fit-content;
   height: fit-content;
}

.action__item .clue_content {
   left: auto;
   right: 0;
   width: 400px;
}

.action__item .clue_img {
   width: 30px;
   height: 30px;
}

.action-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 0;
   gap: 10px;
   align-items: flex-start;
   max-height: 0;
   overflow: hidden;
   transition: .3s;
   border-radius: 8px;
   width: 95%;
   align-self: self-end;
   border: none;
   background: #f5f5f5;
}

.open .action-wrapper {
   max-height: none;
   padding: 10px;
   border: 1px solid #ccc;
   overflow: visible;
}

.parameters-block,
.actions-block {
   width: 100%;
}

.actions-block {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.action-btns-wrapper {
   justify-content: flex-end;
   padding: 10px;
   transition: .3s;
   border: 1px solid #ccc;
   background: #f5f5f5;
   border-radius: 8px;
   align-self: self-end;
   width: 100%;
}

.btn_action--delete {
   background-color: #ff3900a1;
}

.btn_action--delete:hover {
   background-color: #ff3900a1;
}

.bg_main .select--add_wrapper {
   min-height: 32px;
   min-width: 250px;
   max-width: 490px;
}

.name_function {
   position: relative;
   padding: 4px 10px 4px 28px;
   border-radius: 20px;
   color: #fff;
   background: #3562b1;
   font-size: 16px;
   display: block;
   width: fit-content;
   border: 1px solid #fff;
}

.name_function::before {
   content: '';
   left: 4px;
   position: absolute;
   top: 3px;
   width: 20px;
   height: 20px;
   background-image: url(../img/function.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   filter: invert(1);
   border-radius: 50%;
   border: 1px solid #000;
}

.fields-block .select--custom_btn-open {
   top: 6px;
   left: 102%;
}

.parameters-block .input__block {
   gap: 0;
   flex-direction: row;
}

.parameters-block .input__block_title {
   width: 100%;
   max-width: 30%;
}

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

.btn-add--condition {
   position: absolute;
   top: 5px;
   right: 5px;
   z-index: 1;
}

.condition_item-operator {
   position: absolute;
   top: -10px;
   left: 0%;
   border-radius: 4px !important;
   font-weight: 700;
   background: #edde2157 !important;
   padding: 2px 10px !important;
}

.btn-delete--condition {
   position: absolute;
   width: 18px;
   height: 18px;
   left: 30px;
   background: red;
   border-radius: 50%;
   padding: 2px;
   cursor: pointer;
}

.names-block {
   z-index: 1;
}

/* action END */

[data-block="text-AI"] {
   position: relative;
   padding: 5px 5px 5px 10px;
   border-radius: 8px;
   overflow: hidden;
}

[data-block="text-AI"]::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 6px;
   height: 100%;
   background-color: #e5e5e5;
}

[data-block="text-AI"]::after {
   content: '';
   position: absolute;
   top: calc(50% - 25px);
   right: 0;
   width: 50px;
   height: 50px;
   background-image: url(/img/logo-openai.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   opacity: .1;
}

/* calendar */
.calendar {
   width: 100%;
   display: flex;
   flex-direction: column;
   color: #ccc;
   margin: 10px 0;
}

.calendar-wrapper {
   margin-top: 10px;
   overflow-x: auto;
   padding-bottom: 10px;
}

.cr__row {
   display: flex;
}

.cr__row_day {
   min-width: 20px;
   max-width: 20px;
   font-size: 15px;
   display: flex;
   align-items: center;
   border-right: 1px solid #ccc;
}

.calendar-wrapper .cr__row:nth-child(1) .cr_time {
   border-top: 1px solid #ccc;
}

.calendar-wrapper .cr__row:first-child .cr__row_day:first-child {
   border: none;
}

.cr_time {
   min-width: 20px;
   min-height: 20px;
   border-bottom: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   cursor: pointer;
   transition: .1s;
}

.calendar-wrapper .cr__row:nth-child(2) .cr_time {
   border-top: 1px solid #ccc;
}

.cr_time:hover {
   border: 1px solid var(--color-ins-text);
   opacity: .5;
}

.cr_time-title {
   min-width: 20px;
   font-size: 13px;
   padding: 0 0 0 4px;
}

.cr_time-title:nth-child(odd) {
   margin-top: 5px;
   font-size: 10px;
}

/* calendar END */
.inner-letter {
   visibility: collapse;
}

.inner-letter td:first-child {
   padding-left: 20px;
   position: relative;
}

.inner-letter td:first-child::before {
    position: absolute;
    content: '';
    top: 1px;
    left: 12px;
    height: calc(100% - 2px);
    width: 1px;
    border-left: 1px dashed;
}

.inner-letter.open {
   visibility: visible;
}

.btn--get_all_letters {
   padding: 2px 20px;
   margin-left: 10px;
   border-radius: 8px;
   border: 1px solid var(--color-ins-text);
   color: #fff;
   background: var(--color-ins-text);
   font-weight: 400;
   cursor: pointer;
   transition: .2s;
}

.btn--get_all_letters.active {
   color: var(--color-ins-text);
   background: transparent;
}