:root {
    --color-main: #64A82F;
    --color-main-dark: #4A8635;
    --color-main-light: #7EC82A;
    --color-gray: #aaaaaa;
    --color-gray-light: #f5f5f5;
    --color-alt: #9431C8;
    --color-cancel: #484848;
    --color-info: #0193C6;
    --color-bad: #C70003;
    --color-good: #017A32;
    --color-warning: #F58403;
    --color-word: #1558B6;
    --color-excel: #0F763D;
    --color-pdf: #AE0D01;
}

*{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0;font-family: "Roboto", sans-serif;font-weight: 400;font-style: normal;font-size: 14px;line-height: 18px;}
*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0;-webkit-tap-highlight-color:transparent;-webkit-focus-ring-color:transparent;-webkit-touch-callout:none}
.body {
    height: 100%;
    min-height: 100vh;
    background-color: #ffffff;
}
a {
  color: #000000;
  text-decoration: none;
  border-bottom: 2px dashed transparent;
}

b,strong {
    font-weight: 600;
}

.content a:hover {color: var(--color-main);}

.content ul,
.content ol,
.content p,
.content figure {
    margin-bottom: 16px;
}
.content ul li,
.content ol li {margin-bottom: 5px;}

.only-mobile {display: none;}
ul,ol {list-style: none;}
h1, .pagetitle {font-size: 26px;line-height: 30px;font-weight: 400;margin-bottom: 15px;}
h2 {font-size: 20px;line-height: 24px;font-weight: 400;margin-bottom: 15px;}
h2 {font-size: 16px;line-height: 20px;font-weight: 400;margin-bottom: 15px;}

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

.pagetitle .admin {
    color: var(--color-alt);
    font-size: inherit;
}
.admin-tools {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #efefef;
    padding: 5px;
    z-index: 1000;
}

.admin-tools * {
    font-size: 10px;
    line-height: 10px;
}

.welcome-home {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}




.create-resource {
    display: block;
    position: fixed;
    z-index: 10;
    bottom: 5%;
    right: 5%;
    background: radial-gradient(white, white, transparent, transparent);
    border-radius: 50%;
    color:  #484848;
    transition: all 250ms;
}
.create-resource:hover {
    color: #9E4410;
}


/********** БОДИ и МЭЙН **********/


.page-container {min-height: 100vh;}
.main {
    width: 100%;
}

.main-container {
    min-height: calc(100vh - 32px);
    padding: 16px;
}
.main.with-aside .main-container {
    padding-left: 66px;
}
.main-container.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.crumbs {
    margin: 10px 0;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.breadcrumb-item:hover a {
    color: var(--color-main);    
}


/********** АВТОРИЗАЦИЯ **********/

.loginMessage .error {
    color: var(--color-bad);
    text-align: center;
    font-size: 0.9em;
    line-height: 1.25em;
}
.forgot-password {
    text-align: center;
    color: var(--color-cancel);
}


/********** САЙДБАР **********/

.aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 50px;
    z-index: 999;
    background: var(--color-main-dark);
    box-shadow: 5px 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.aside-header {
    width: 100%;
    padding: 15px 5px;
    background: #ffffff;
}
.header__logo img {display: block;width: 100%;}
.header__logo .min {display: none;}


.scroll-aside {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}
.aside-nav {
    display: flex;
    flex-direction: column;
}
.aside-nav li {
    transition: all 250ms;
}
.menu-user-mobile {display: none;background-color: #ab4410;}
.aside-nav li .caption {
    display: none; font-size: 12px; line-height: 14px;text-align: center;font-weight: 300;
    position: absolute;
    top: 11px;
    left: 50px;
    background: #292929;
    padding: 6px 8px;
    border-radius: 5px;
}
.aside-nav li .caption:before {
    position: absolute;
    content: "";
    left: -5px;
    top: 9px;
    border-right: 5px solid #292929;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.aside-nav li a .icon {
    transition: all 250ms;
    width: 36px;
    height: 36px;
    display: flex;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    
}
.aside-nav li:hover .icon, .aside-nav li.active .icon {
    background-color: #ffffff;
}
.aside-nav li:hover .icon,.aside-nav li.active .icon  {
    color: var(--color-main);
}
.aside-nav li:hover .caption {display: flex;}
.aside-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px;
    color: #ffffff;
    border-bottom: 1px solid var(--color-main);
    position: relative;
}
.aside-down {
    margin-top: auto;
    padding: 10px 7px;
}
.aside-down * {font-size: 13px;}
.aside-user {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #ffffff;
}
.aside-user__avatar img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
}
.aside-user__name {margin-bottom: 3px;}
.aside-user__name a {border-bottom: 2px dashed transparent;} 
.aside-user__name a:hover {border-color: #ffffff;} 
.aside-user__role {color: #eee;}

.aside-logout {display: inline-block; color: #ffffff; margin: 25px 0 0;border-bottom: 2px dashed transparent;}
.aside-logout:hover {border-color: #ffffff;} 


/********** СТРАНИЦА ОШИБКИ *************/

.error-image img {
    display: block;
    width: 75%;
    max-width: 400px;
    margin: 0 auto 25px;
    
}



/********** ФОРМЫ **********/
.status_tab_content {
    display: flex; 
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}
.form {
    display: flex;
    flex-direction: column;
    gap: 15px 10px ;
}
.form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.form .resource__btns,
.form .status__btns {
    display: none;
    flex-direction: row;
    justify-content: start;
    gap: 15px;
}
.form .status__btns {
    display: flex;
    margin: 15px auto;
    width: 100%;
    gap: 20px;
    justify-content: center;
}
.form fieldset.checkbox {
    border: none;
    display: flex;
    /*flex-direction: row;*/
    gap: 5px;
}
.form fieldset.create_deals_all {
    margin: 5px 0;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
}
.form fieldset legend {
    color: #aaaaaa;
    font-size: 0.9em;
    margin-left: 10px;
}
.form fieldset.checkbox label {margin-left: 0;}
.form fieldset input[type="text"],
.form fieldset input[type="email"],
.form fieldset input[type="tel"],
.form fieldset input[type="url"],
.form fieldset input[type="number"],
.form fieldset input[type="password"],
.form fieldset input[type="date"],
.form fieldset input[type="datetime-local"],
.form fieldset textarea,
.form fieldset select {
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    padding: 8px;
}
.form fieldset.crm-value *:disabled,
.form fieldset.crm-value *[readonly] {
    border: 1px solid transparent!important;
    background: transparent!important;
    padding: 4px 8px!important;
}
.form fieldset.crm-value *[readonly]:hover,
.form fieldset.crm-value *[readonly]:focus{
    box-shadow: none;
}
.form fieldset.crm-value.crm-value-hidden {display: none;}
.form.is-editing fieldset.crm-value.crm-value-hidden {display: flex;}


.form fieldset.crm-value.with-link .tomSelect,
.form fieldset.crm-value.with-link input,
.form fieldset.crm-value.with-link select {display: none;}
.form fieldset.crm-value.with-link .value_text {margin: 9px 11px;}
.form fieldset.crm-value.with-link .value_link {margin: 9px 11px;}
.form fieldset.crm-value.with-link .value_link:hover {color: var(--color-main);}
.form.is-editing fieldset.crm-value.with-link .value_link {display: none;}
.form.is-editing fieldset.crm-value.with-link .value_link.ever {display: flex;}
.form.is-editing fieldset.crm-value.with-link .tomSelect,
.form.is-editing fieldset.crm-value.with-link input,
.form.is-editing fieldset.crm-value.with-link select {display: flex;}

.form fieldset input.error {border-color: var(--color-bad);}
.document-upload-error {font-size: 0.8em; color: var(--color-bad);}
.form-resource .crm-value__groupe {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 10px 50px;
}
.form.form-resource-status .crm-value.radio .radio__container {padding: 0;}
.crm-value.contract-deal-object {width: 300px;}
.crm-value.contract-deal-servise {width: 200px;}
.contract-deal-save, .contract-deal-delete {margin-top: 18px;}
.crm-value__groupe-title {
    font-weight: 500;
    margin: 0 0 10px 10px;
}
.tomSelect.disabled .ts-control {
    border: none;
    background: transparent;
    opacity: 0.75;
}
.tomSelect.disabled .ts-control input {
    padding: 0;
}
.tomSelect.disabled .ts-control input:disabled {
    padding: 0!important;
}
.tomSelect.disabled .ts-control input {
    font-size: 14px;
}
.tomSelect .ts-control .item {
    color: #000!important;
}

.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Стилизация метки чекбокса */
.checkbox label {
    position: relative;
    padding-left: 2em; 
    cursor: pointer;
    user-select: none;
}
/* Иконка для неотмеченного состояния */
.checkbox label::before {
    content: "\f0c8"; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 400; 
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25em;
    color: #aaa;
}
/* Иконка для отмеченного состояния */
.checkbox input[type="checkbox"]:checked + label::before {
    content: "\f14a"; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; 
    color: var(--color-main);
}
.form .crm-value.checkbox label {margin: 8px 10px 0 8px;}
th.table-row-checkbox input[type="checkbox"]:checked + label::before {
    color: var(--color-cancel);
}
.table-row-checkbox {
    width: 34px;
}
.table-row-checkbox label {
    padding: 0;
    display: block;
    width: 12px;
} 

.form .crm-value.radio {}
.form .crm-value.radio .radio__container {
    display: flex;
    gap: 10px;
    padding: 10px;
    flex-wrap: wrap;
}
.form .crm-value.radio .radio__container input {display: none;}
.form .crm-value.radio .radio__container label {color: var(--color-gray);cursor: pointer; border-bottom: 2px solid transparent;}
.form .crm-value.radio .radio__container input:checked + label {color: var(--color-main);font-weight: 500;border-color: var(--color-main);}
.form .crm-value.radio .radio__container input:disabled + label {cursor: default}

.form .crm-value.radio .radio__container.buttons label {
    border: none; 
    padding: 5px 10px;
    color: #ffffff !important;
    text-align: center;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 5px 10px;
    border-radius: 5px;
    transition: all 250ms;
    background: var(--bgcolor);
}
.form .crm-value.radio .radio__container.buttons input:disabled + label,
.form .crm-value.radio .radio__container.buttons input:disabled + label:hover {pointer-events: none; background: #ddd !important;}
.form .crm-value.radio .radio__container.buttons input:disabled:checked + label {background: var(--bgcolor) !important;}
.form .crm-value.radio .radio__container.buttons input:not(:checked) + label {background: #ddd !important;}
.form .crm-value.radio .radio__container.buttons input:not(:checked) + label:hover {background: var(--bgcolor) !important;}


.form fieldset input:focus,
.form fieldset select:focus,
.form fieldset .focus .ts-control,
.form fieldset textarea:focus{
    box-shadow: 0 0 10px 0 var(--color-main);
}

.btn {
    background: var(--color-main);
    border: 1px solid var(--color-main);
    color: #ffffff;
    padding: 8px 16px;
    text-align: center;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 250ms;
}
.btn:hover {box-shadow: 0 0 10px rgba(0,0,0,0.25);color: #ffffff;}
.btn:active {box-shadow: inset 0 0 10px rgba(0,0,0,0.25);}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--color-main);
    padding: 5px;
    cursor: pointer;
    transition: all 250ms;
}
.btn-icon:hover {transform: translateY(-2px);}
.btn-icon.bad {color: var(--color-bad);}
.btn-icon.gray {color: var(--color-gray);}
.btn-icon.cancel {color: var(--color-cancel);}
.btn-icon.alt {color: var(--color-alt);}
.btn-icon.info {color: var(--color-info);}

.dev-tree li {display: flex;gap: 5px;flex-direction: column;} 
.dev-tree li > div {display: flex;gap: 5px;flex-wrap: wrap;align-items: center;} 
.dev-tree li div >  .btn-icon {visibility: hidden;}
.dev-tree li div:hover >  .btn-icon {visibility: visible;}
.dev-tree .color_maker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-bottom: 4px;
}
.btn.bad {
    background: var(--color-bad);
    border: 1px solid var(--color-bad);
    color: #ffffff;
}
.btn.gray {
    background: var(--color-gray);
    border: 1px solid var(--color-gray);
    color: #ffffff;
}
.btn.cancel {
    background: var(--color-cancel);
    border: 1px solid var(--color-cancel);
    color: #ffffff;
}
.btn.alt {
    background: var(--color-alt);
    border: 1px solid var(--color-alt);
    color: #ffffff;
}
.btn:disabled {
    background: #ffffff;
    border: 1px solid var(--color-gray);
    color: var(--color-gray);
}
.btn:disabled:hover {
    box-shadow: none;
    cursor: default;
}

.form__title {
    text-align: center;
    font-weight: 500;
    color: #555555;
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.form__description {
    text-align: center;
    margin-bottom: 10px;
}

.authorization-form-container {
    width: 100%;
    max-width: 350px;
    margin: auto;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 25px
}
.authorization-logo img {
    display: block;
    width: 75%;
    margin: auto;
}
.authorization-checkbox-container {
    display: flex;
    justify-content: space-between;
}


/* Стилизация для контейнера загрузчика */
.file-uploader {
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
}
.file-uploader input[type="file"] {
  display: none;
}
.file-uploader .upload-btn {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}
/* Стилизация для списка файлов */
.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}
.file-list li span {color: var(--color-gray);}
.file-list li:last-child {
  border-bottom: none;
}
.delete-btn,
.delete-attached-btn {
  background: none;
  color: var(--color-bad);
  border: none;
  cursor: pointer;
  margin-left: 10px;
}


/*********** СДЕЛКИ В ДОГОВОРЕ *************/
#contractDeals {}

.contractDeals_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 15px 0;
}
.contractDeals_item {
    display: flex;
    gap: 15px;
}

/*********** КП В ПРОДАЖАХ *************/
#saleOffers {}

.saleOffers_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 15px 0;
}
.so-object {width: 250px;}
.so-service {width: 150px;}
.so-amount {width: 100px;}

.so-extra {width: 100%;}
.so-extra-fields {}
.so-extra-field {
    margin-bottom: 10px;
}
.so-extra-field label {width: 150px;margin-right: 10px;display: inline-block;}




.saleOffer_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--color-main);
    padding: 0 0 10px 0;
    margin-bottom: 10px;
    gap: 10px 15px;
}
.so-head {
    display: flex;
    width: 100%;
    gap: 10px 20px;
}
.so-head * {font-weight: 500;}
.so-row {
    display: grid;
    gap: 10px 20px;
}
.so-row:nth-of-type(2) {width: 250px;}
.so-row:nth-of-type(3) {width: 150px;}
.so-row:nth-of-type(4) {width: 100px;}
.so-actions {
    display: flex;
    gap: 10px;
    align-items: end;
}
/********** ТАБЛИЦЫ **********/

.table-easy {
    width: fit-content;
    border-collapse: collapse;
    border: none;
    text-align: left;
}
.table-easy th {font-weight: 500;}
.table-easy th,
.table-easy td {
    padding: 5px 10px;
}
.table-easy th {background-color: var(--color-gray-light);}
.table-easy tr:nth-child(even) {background: rgba(0,0,0,0.05);}


.table-container {
    display: flex;
    max-width: 100%;
    overflow: auto;
    position: relative;
}
.table-listing {
    width: 100%;
    border-collapse: collapse;
    border: none;
}
.table-listing th,
.table-listing td {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
}
.table-listing tr:nth-child(even) {
    background-color: #eee;
}
.table-listing tr.unpublished, .table-listing tr.unpublished a {color: #ccc;}
.table-listing thead {
    position: sticky;
    top: 0;
    z-index: 20;
}
.table-listing thead th {
    background: #64A82F;
    position: sticky;
    color: #ffffff;
    z-index: 5;
}
.table-listing tbody a:hover {
    border-bottom: 2px dashed var(--color-cancel);
}
.table-listing .fixed {
    position: sticky;
    background: #fff;
}
.table-listing th.fixed {background: #64A82F;}
.table-listing .fixed::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background-color: #fff;
    pointer-events: none;
}
.table-listing .fixed::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 1px;
    height: 100%;
    background-color: #ccc;
    pointer-events: none;
}
.table-listing tr:nth-child(even) td.fixed {background-color: #eee;}
.table-listing tr:nth-child(even) td.fixed::before {background-color: #eee;}
.table-listing th.fixed::before {background-color: #64A82F;}



/** DIV TABLE **/

.div-table-container {
    display: flex;
    max-width: 100%;
    overflow: auto;
    position: relative;
}
.div-table-listing {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.div-table-listing .row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
}
.div-table-listing tr:nth-child(even) {
    background-color: #eee;
}
.div-table-listing thead {
    position: sticky;
    top: 0;
    z-index: 20;
}
.div-table-listing thead th {
    background: #64A82F;
    position: sticky;
    color: #ffffff;
    z-index: 5;
}
.div-table-listing tbody a:hover {
    border-bottom: 2px dashed var(--color-cancel);
}
.div-table-listing .fixed {
    position: sticky;
    background: #fff;
}
.div-table-listing th.fixed {background: #64A82F;}
.div-table-listing .fixed::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background-color: #fff;
    pointer-events: none;
}
.div-table-listing .fixed::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 1px;
    height: 100%;
    background-color: #ccc;
    pointer-events: none;
}
.div-table-listing tr:nth-child(even) td.fixed {background-color: #eee;}
.div-table-listing tr:nth-child(even) td.fixed::before {background-color: #eee;}
.div-table-listing th.fixed::before {background-color: #64A82F;}


/********** ФИЛЬТРЫ **********/


.table-filter {
    display: flex;
    flex-direction: row-reverse;
    gap: 15px;
    margin-bottom: 15px;
}
.table-filter-btns {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 15px;
    margin-top: 18px;
}
.table-filter-btns * {white-space: nowrap;}
#open-filter {display: none;}

.filter-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 15px;
}


/********* СУЩНОСТЬ ****************/

.resource__container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.page-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 0 0 15px 0;
    align-items: center;
}

.edit-resource {margin-left: 10px;}


/********* ТАБЫ *******************/

.tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--color-main-dark);
}

.tab-header {
    padding: 6px 20px;
    border: 1px solid var(--color-main-dark);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    transition: all 250ms; 
}
.tab-header:hover {
    border-color: transparent!important;
    background: #484848;
    color: #ffffff;
}

.tab-header.active {background: var(--color-main-dark);color: white;}
.tab-title {font-weight: bold;white-space: nowrap;display: flex;}
.tab-container {display: none;}
.tab-container.active {display: flex;}
.tab-container .tab-content {background: #ffffff;width: 100%;}



/** Дерево настроек документов **/
/* Класс UL обертка дерева */
.outerClass {
}

/* Класс LI  любого элемента списка */
.rowClass {
}

/* Класс LI элемента списка если в нем есть потомки*/
.parentClass {
}

/* Класс UL для обёртки потомков*/
.innerClass {}

.dev-tree {margin: 20px 0;}
.dev-tree .outerClass .parentClass .innerClass {
    margin: 0 0 5px 30px;
}

.dev {color: var(--color-alt);}

/************ ЗАГРУЗКА ДОКУМЕНТОВ ************/

.form-document-upload {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 5px solid var(--color-gray);
}
.form-document-upload legend {display: flex;gap: 10px;align-items: center;}

.form-document-upload input[type="url"] {width: 100%;}
.document-uploader__dropzone {
    border: 2px dashed var(--color-gray);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    background: var(--color-gray-light);
    transition: all 250ms;
}
.document-uploader__dropzone:hover,
.document-uploader__dropzone.dragover {
    border-color: var(--color-main);
    background: #ffffff;
    box-shadow: 0 0 10px 0 var(--color-main);
}
.document-uploader__previews .preview {margin: 5px 0; display: flex;align-items: center;}
.document-uploader__previews .preview .button {border}

.doc-source-switch {}
.doc-source-switch__btn {color: var(--color-gray);}
.doc-source-switch__btn.is-active {color: var(--color-main);}

.doc-source-panel {}
.doc-source-panel--file {}
.doc-source-panel--link {}
.doc-source-panel--file.is-hidden,
.doc-source-panel--link.is-hidden {display: none;} 






.doc-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px 20px;
}
.doc-info__data {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 10px 2%;
}
.doc-info__versions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 4px solid var(--color-gray);
    padding-top: 10px;
}
.doc-version {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 2%;
}
/************ МОДАЛЬНЫЕ ОКНА *****************/
body.modal-open {
  overflow: hidden;
}
.modal {
  display: none;                /* Скрыта по умолчанию */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;      /* Центрирование по горизонтали */
  align-items: center;          /* Центрирование по вертикали */
  z-index: 1000;
}
.modal.show {
  display: flex;                /* Показать как flex-контейнер */
}
.modal-content {
  background: #fff;
  margin: 30px;
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-width: 500px;
  width: 100%;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}



/** ГЛОБАЛЬНЫЙ ЛОАДЕР**/

.loader {
  position: fixed;
  inset: 0;
  display: none;               /* по умолчанию скрыт */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loader.is-active { display: flex; }

.loader__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: saturate(80%) blur(2px);
}

.loader__spinner {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: currentColor;
  color: #0ea5e9;              /* акцент (можно поменять) */
  animation: spin .9s linear infinite;
  z-index: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }

/************ FIX *****************/

@media (max-width: 1024px) {
    .table-filter {flex-direction: column;}
    .table-filter-btns {justify-content: start;}
    #open-filter {display: block;}
    .filter-form {display: none;}
}

@media (max-width: 650px) {}



/********************* TIMELINE **************************/

/* ============================================================
   LAYOUT: общая сетка и адаптив
   ============================================================ */
.generalFieldsWithTimeline{
  display:grid;
  grid-template-columns:1fr 1fr;
    gap: 20px;
}

@media (max-width:1024px){
  .generalFieldsWithTimeline{ grid-template-columns:1fr; }
  .crmTimeline{
    border:none;
    border-top:1px solid #e6e6e6;
    padding:20px 0 0;
    margin-top:20px;
  }
}

/* ============================================================
   TIMELINE WRAPPER
   ============================================================ */
.crmTimeline{
  border-left:1px solid #e6e6e6;
  padding:0 0 0 22px;
  background:#fff;
}

/* ============================================================
   ACCESSIBILITY: фокус для клавиатуры
   ============================================================ */
.crmTimeline :where(button, [role="button"], a, input, textarea, select):focus{
  outline:none;
}
.crmTimeline :where(button, [role="button"], a, input, textarea, select):focus-visible{
  outline:2px solid rgba(0,0,0,.55);
  outline-offset:2px;
  border-radius:10px;
}

/* ============================================================
   TOP BAR: табы
   ============================================================ */
.crmTimeline__top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}

.crmTimeline__tabs{
  display:flex;
  gap:12px;               /* табы не “слипаются” */
  flex-wrap:wrap;
}

.crmTimeline__tab{
  border:1px solid #ddd;
  background:#f7f7f7;
  padding:10px 14px;       /* крупнее */
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  line-height:1.1;
}

.crmTimeline__tab.is-active{
  background:#fff;
  border-color:#cfcfcf;
  font-weight:600;
}

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

/* ============================================================
   BUTTONS (общие)
   ============================================================ */
.crmTimeline__btn{
  border:1px solid #ddd;
  background:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  line-height:1.1;
}

.crmTimeline__btn.is-primary{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* ============================================================
   COMPOSER: форма создания
   ============================================================ */
.crmTimeline__composer{
  border:1px solid #eee;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}

.crmTimeline__input{
  width:100%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  line-height:1.35;
  resize:vertical;
}

.crmTimeline__row--bottom{
  margin-top:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.crmTimeline__attach{
  display:inline-flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  border:1px solid #ddd;
  background:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.1;
}

.crmTimeline__attach input{ display:none; }
.crmTimeline__attach.is-disabled{ opacity:.5; cursor:not-allowed; }

.crmTimeline__submit{
    border: none;
  background: var(--color-good);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  line-height:1.1;
}

.crmTimeline__submit[disabled]{ opacity:.5; cursor:not-allowed; }

.crmTimeline__hint{ font-size:13px; color:#666; }

.crmTimeline__uploads{ margin-top:12px; }
.crmTimeline__upload{ font-size:13px; color:#333; padding:4px 0; }

.crmTimeline__error{
  margin-top:12px;
  background:#fff2f2;
  border:1px solid #ffd2d2;
  color:#9b1c1c;
  padding:12px;
  border-radius:12px;
  font-size:14px;
}

/* Цитата/ответ (верх формы комментария) */
.crmTimeline__replyBox.is-hidden{ display:none; }
.crmTimeline__quote{
  padding:10px 12px;
  margin:0 0 12px;
  border-left:3px solid #cfd6e4;
  background:#f6f8fc;
  border-radius:10px;
}
.crmTimeline__quoteLabel{ font-size:12px; opacity:.75; margin-bottom:6px; }
.crmTimeline__quoteText{ font-size:13px; line-height:1.35; }

/* ============================================================
   FEED: заголовок и список
   ============================================================ */
.crmTimeline__feedHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}

.crmTimeline__feedTitle{ font-weight:700; }
.crmTimeline__feedMeta{ color:#666; font-size:13px; }

.crmTimeline__list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.crmTimeline__more{ margin-top:12px; }

/* ============================================================
   ITEM: новая структура (head/body/meta/files/edit)
   ============================================================ */
.crmTimeline__item{
  border:1px solid #eee;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

.crmTimeline__item.is-pinned{
  border-color:#d9d9d9;
  background-color:rgba(0,0,0,0.03);
}

/* HEAD */
.crmTimeline__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.crmTimeline__headLeft{
  display:flex;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.crmTimeline__typeIcon{
  width:18px;
  height:18px;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.crmTimeline__headText{ min-width:0; display: flex; align-items: center;}

.crmTimeline__titleRow{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.crmTimeline__title{
  font-weight:700;
  font-size:14px;
}

.crmTimeline__dot{
  opacity:.4;
}

.crmTimeline__date{
  opacity:.85;
  font-size:13px;
}

/* META (под заголовком) */
.crmTimeline__metaRow{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;          /* больше “воздуха” */
  font-size:13px;
  line-height:1.35;
}

.crmTimeline__meta b{
  font-weight:600;
}

/* RIGHT SIDE (tools + avatar) */
.crmTimeline__headRight{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:0 0 auto;
}

.crmTimeline__tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.crmTimeline__tool{
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  padding:0;
}

.crmTimeline__tool:hover{
  background:#f4f4f4;
  border-color:#ededed;
}

.crmTimeline__tool.is-danger{ color:#9b1c1c; }
.crmTimeline__tool.is-danger:hover{
  background:#fff1f1;
  border-color:#ffd6d6;
}

/* DONE checkbox */
.crmTimeline__done{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  cursor:pointer;
}

.crmTimeline__done input{ display:none; }

.crmTimeline__done span{
  width:16px;
  height:16px;
  border-radius:5px;
  border:1px solid #cfcfcf;
  background:#fff;
  display:inline-block;
}

.crmTimeline__done input:checked + span{
  background: var(--color-good);
  border-color: var(--color-good);
}

/* Avatar (ответственный/автор) */
.crmTimeline__avatar{
  width:24px;
  height:24px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #eee;
  flex:0 0 auto;
}

.crmTimeline__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* BODY */
.crmTimeline__body{
  margin-top:12px;
}
.crmTimeline__body a {color: var(--color-main);}

.crmTimeline__message{
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
}

/* Reply view under head */
.crmTimeline__replyView{
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid #dedede;
  background:#fafafa;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
}

/* Files */
.crmTimeline__files{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.crmTimeline__att {
    display: flex;
    align-items: center;
}

/* Image thumbnail for Fancybox */
.crmTimeline__thumb{
  width:36px;
  height:36px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eee;
  display:inline-flex;
}

.crmTimeline__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Non-image file link chip */
.crmTimeline__fileLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  font-size:13px;
  line-height:1.1;
}

.crmTimeline__fileLink:hover{
  background:#f7f7f7;
}

/* Result block */
.crmTimeline__result{
  margin-top:12px;
  padding:10px 12px;
  border:1px dashed #e8e8e8;
  border-radius:12px;
  background:#fff;
}

/* Inline edit */
.crmTimeline__edit{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #e8e8e8;
}
.crmTimeline .is-hidden{ display:none; }

.crmTimeline__editGrid{
  display:grid;
  gap:12px;
}

.crmTimeline__editActions{
  margin-top:12px;
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

/* кнопки удаления вложений видны только при редактировании конкретного элемента */
.crmTimeline__item [data-att-del] { display: none; }
.crmTimeline__item.is-editing [data-att-del] { display: inline-flex; }

/* системные события выглдят компактнее */
.crmTimeline__item--system {}
.crmTimeline__item--system .crmTimeline__message {font-size: 13px;line-height: 15px;color: #8f8f8f;font-style: italic;}

/* ============================================================
   LEGACY: поддержка старых классов (чтобы ничего не отвалилось)
   ============================================================ */
.crmTimeline__itemHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.crmTimeline__itemTitle{ font-size:14px; }

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

.crmTimeline__itemTools{
  display:flex;
  gap:8px;
  margin-left:auto;
}

.crmTimeline__itemText{ font-size:14px; white-space:pre-wrap; }

.crmTimeline__itemFiles{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.crmTimeline__file{
  display:inline-block;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:13px;
  text-decoration:none;
}

.crmTimeline__itemFoot{
  margin-top:8px;
  color:#666;
  font-size:13px;
}

/* Pin badge legacy */
.crmTimeline__pinBadge{
  display:inline-flex;
  margin-left:8px;
  font-size:12px;
  opacity:.75;
}

/* loader timeline Лоадер на таймлайн */
.crmTimeline.block-loader{ position:relative; }

.crmTimeline.block-loader.is-loading::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
  z-index:50;
}

.crmTimeline.block-loader.is-loading::after{
  content:"\f110"; /* fa-spinner */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:51;
  font-size:30px;
  animation:crmSpin .8s linear infinite;
}

@keyframes crmSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }



/************************/

.form-resource .contactChannels {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-resource .contactChannels fieldset {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.form-resource .contactChannels fieldset.is-deleted *{
    opacity: 0.3;
}
.form-resource .contactChannels fieldset.is-deleted .undo_contact_channel {
    opacity: 1;
}
.form-resource .contactChannels .addContactChannels,
.form-resource .contactChannels .del_contact_channel,
.form-resource .contactChannels .undo_contact_channel {display: none;}

.form-resource.is-editing .contactChannels .addContactChannels,
.form-resource.is-editing .contactChannels .del_contact_channel,
.form-resource.is-editing .contactChannels .undo_contact_channel{display: flex;}

.contactChannels__title {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #aaaaaa;
    font-size: 0.9em;
    margin-left: 10px;
}
.contactChannels__title .frontendName {width: 60px;}

.checkContactMessage {font-size: 12px; color: var(--color-info);}
.checkContactMessage a {font-weight: 500; font-size: 12px; color: var(--color-info);}

.js-phone,.js-email {min-width: 205px;}
.form fieldset.crm-value .js-phone:disabled {padding-left: 40px!important;}

.form fieldset.counterpartyContactsAdd {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin: 10px 0px 20px;
    border-bottom: 1px solid var(--color-main-dark);
    padding-bottom: 20px;
}
.counterpartyContactsAdd .ts-wrapper {min-width: 250px;}
.counterpartyContactsAdd input[data-new-role] {min-width: 200px;}
.counterpartyContactsAdd input[data-new-comment] {min-width: 200px;}



/**************************************************/
/***********//******* LOADER **********************/
/**************************************************/

/********************/

.helpers-hidden {display: none;}




/**************************************************/
/******************** PDF CALC ********************/
/**************************************************/

.pdf-calc {
    width: 100%;
}

.pdf-calc-form {margin-top: 15px;}

.pdf-calc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pdf-calc-description {
    color: var(--color-gray);
    margin: 0;
}

.pdf-calc-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pdf-calc-item {
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
}

.pdf-calc-item__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.pdf-calc-item__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-cancel);
}

.pdf-calc-item__title i {
    color: var(--color-bad);
}

.pdf-calc-grid {
    display: grid;
    gap: 15px;
    align-items: end;
}

.pdf-calc-grid.print {
    grid-template-columns: minmax(200px, 1fr) 110px minmax(250px, 1fr) 170px 200px;
}
.pdf-calc-grid.print-drop {
    grid-template-columns: 60px minmax(300px, 1fr) 110px 120px 100px;
}
.pdf-calc-grid.scan {
    grid-template-columns: minmax(200px, 1fr) minmax(250px, 1fr);
}

.pdf-calc-file input[type="file"] {
    width: 100%;
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    padding: 6px;
    background: #ffffff;
}
.pdf-calc-grid input[type="number"] {width: 100%;}

.pdf-calc-grid .checkbox {margin-bottom: 9px;}

.pdf-calc-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.pdf-calc-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.pdf-calc-card,
.pdf-calc-file-result {
    border-top: 4px solid var(--color-main);
    padding-top: 15px;
}

.pdf-calc-card h4,
.pdf-calc-file-result h3 {
    margin-bottom: 10px;
    font-weight: 500;
}

.pdf-calc-details {
    margin-top: 15px;
}

.pdf-calc-details summary {
    cursor: pointer;
    color: var(--color-main-dark);
    font-weight: 500;
    margin-bottom: 10px;
}

.pdf-calc-log {
    margin-top: 25px;
    border-top: 4px solid var(--color-gray);
    padding-top: 15px;
}

.pdf-calc-log summary {
    cursor: pointer;
    color: var(--color-cancel);
    font-weight: 500;
}

.pdf-calc-log__body {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-gray-light);
    border-radius: 10px;
    font-family: monospace;
    overflow: auto;
}

.pdf-calc-log__item {
    margin-bottom: 10px;
}

.pdf-calc-log pre {
    margin-top: 5px;
    white-space: pre-wrap;
    font-family: monospace;
}

.pdf-calc-errors {
    margin: 15px 0;
    padding: 12px;
    border: 1px solid var(--color-bad);
    border-radius: 10px;
    background: #fff3f3;
    color: var(--color-bad);
}

.pdf-calc .table-container {
    margin-bottom: 15px;
}

.pdf-calc .table-listing td,
.pdf-calc .table-listing th {
    white-space: nowrap;
}

.pdf-calc-total-row td {
    font-weight: 600;
}

@media (max-width: 1024px) {
    .pdf-calc-head {
        flex-direction: column;
    }

    .pdf-calc-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .pdf-calc-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {
    .pdf-calc-grid {
        grid-template-columns: 1fr;
    }

    .pdf-calc-head .btn,
    .pdf-calc-actions .btn {
        width: 100%;
    }
}

.pdf-calc-file-results {
    margin-top: 20px;
    border-top: 4px solid var(--color-gray);
    padding-top: 15px;
}

.pdf-calc-file-results > summary {
    cursor: pointer;
    color: var(--color-cancel);
    font-weight: 500;
    margin-bottom: 15px;
}

.pdf-calc-file-results__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/********************************************************/
.pdf-calc-dropzone {
    border: 2px dashed var(--color-gray);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    background: var(--color-gray-light);
    transition: all 250ms;
}

.pdf-calc-dropzone:hover,
.pdf-calc-dropzone.is-dragover {
    border-color: var(--color-main);
    background: #ffffff;
    box-shadow: 0 0 10px 0 var(--color-main);
}

.pdf-calc-dropzone input[type="file"] {
    display: none;
}

.pdf-calc-dropzone__icon,
.pdf-calc-dropzone__icon i {
    color: var(--color-main);
    font-size: 34px;
}

.pdf-calc-dropzone__icon {
    margin-bottom: 10px;
}

.pdf-calc-item__title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 8px;
    overflow: hidden;
    color: var(--color-cancel);
}

.pdf-calc-item__title span {
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-calc-item__title i {
    position: relative;
    z-index: 2;
}

.pdf-calc-item__pdf-icon {
    color: var(--color-bad);
}

.pdf-calc-item__ready-icon {
    display: none;
    color: var(--color-good);
}

.pdf-calc-item[data-status="uploading"] .pdf-calc-item__title {
    background: linear-gradient(
        110deg,
        rgba(100, 168, 47, 0.12) 0%,
        rgba(100, 168, 47, 0.35) 25%,
        rgba(100, 168, 47, 0.12) 50%
    );
    background-size: 220% 100%;
    animation: pdfCalcTitleLoading 1.1s linear infinite;
}

.pdf-calc-item[data-status="uploading"] .pdf-calc-item__pdf-icon {
    color: var(--color-bad);
}

.pdf-calc-item[data-status="ready"] .pdf-calc-item__title {
    background: rgba(1, 122, 50, 0.08);
}

.pdf-calc-item[data-status="ready"] .pdf-calc-item__pdf-icon {
    color: var(--color-bad);
}

.pdf-calc-item[data-status="ready"] .pdf-calc-item__ready-icon {
    display: inline-flex;
    color: var(--color-good);
}

.pdf-calc-item[data-status="error"] .pdf-calc-item__title {
    background: rgba(199, 0, 3, 0.08);
    color: var(--color-bad);
}

.pdf-calc-item[data-status="error"] .pdf-calc-item__pdf-icon {
    color: var(--color-bad);
}

.pdf-calc-item[data-status="error"] .pdf-calc-item__ready-icon {
    display: none;
}

.pdf-calc-item[data-status="error"] .pdf-calc-item__title::after {
    content: attr(data-status-text);
    margin-left: 8px;
    color: var(--color-bad);
    font-weight: 400;
}

.pdf-calc-item[data-status="queued"] .pdf-calc-item__title {
    background: rgba(245, 132, 3, 0.08);
}

.pdf-calc-item[data-status="queued"] .pdf-calc-item__pdf-icon {
    color: var(--color-warning);
}

.pdf-calc-retry {
    display: none;
    color: var(--color-warning);
}

.pdf-calc-item[data-status="error"] .pdf-calc-retry {
    display: inline-flex;
}

@keyframes pdfCalcTitleLoading {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -120% 0;
    }
}

.pdf-calc-history {margin: 15px 0;}


/**************************************************/
/***************** Генерация СИП ******************/
/**************************************************/


.sip-gen {}
.sip-gen__enter {display: flex; gap: 15px 30px;}
.sip-gen__search {
    flex-direction: row!important;
    justify-content: start!important;
    gap: 10px;
}
.sip-gen__search .sip-gen__input {width: 200px;}
.sip-gen__search .sip-gen__button {width: 100px;}
.sip-gen__file {
    flex-direction: row!important;
    justify-content: start!important;
    gap: 10px;
}
.sip-gen__file .sip-gen__input {width: 100px;}
.sip-gen__file .sip-gen__button {width: 250px;}
.sip-gen__result {}
.sip-gen__map-wrap {
    width: 100%;
    margin: 0;
}
.sip-gen__map {
    width: 100%;
    min-height: 100px;
    max-width: 800px;
    aspect-ratio: 17/13;
    border-radius: 10px;
    overflow: hidden;
}
.sip-gen__map-field-container {
    display: flex;
    gap: 15px;
}
.sip-gen__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}
@media (max-width: 1024px) {
    .sip-gen__map-field-container {
        flex-direction: column-reverse;
    }
}
.sip-gen__btns {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 15px;
}
a.btn-word-download,
.btn-word-download {background-color: var(--color-word); color: #fff;border-color: var(--color-word);}
a.btn-word-download:hover,
.btn-word-download:hover {background-color: var(--color-word); color: #fff;border-color: var(--color-word);}

a.btn-image-download,
.btn-image-download {background-color: var(--color-pdf); color: #fff;border-color: var(--color-pdf);}
a.btn-image-download:hover,
.btn-image-download:hover {background-color: var(--color-pdf); color: #fff;border-color: var(--color-pdf);}