@import "fonts/uni/stylesheet.css";

:root{
    --bg:#F5FAFF;
    --bg1:#EAF3FC;
    --bg2:#CFDEF1;
    --bgor:#F05A22;
    --text:#18304F;
    --text2:#3E5A80;
    --text3:#5E7EA1;
    --text4:#CFDEF1;

    --text-error:#d22b2b;

    --border1:#CFDEF1;
    --border1hover:#7A9AC1;
    --border2:#88ACDB;
    --border3:#A8C3E5;

    --shadow1: 0px 4px 8px -3px rgba(0, 0, 0, 0.15);
    --hover1:#fcf3ea;

}

div::-webkit-scrollbar {
    width: 12px;               /* ширина scrollbar */
}
div::-webkit-scrollbar-track {
    background: #CFDEF1;        /* цвет дорожки */
}
div::-webkit-scrollbar-thumb {
    background-color: #7A9AC1;    /* цвет плашки */
    border-radius: 20px;       /* закругления плашки */
    border: 4px solid #CFDEF1;  /* padding вокруг плашки */
}

* {-webkit-appearance: none !important; -webkit-tap-highlight-color:transparent !important;}

:focus{outline :none; background-color: transparent;}
/*-webkit-tap-highlight-color:transparent;*/
*::placeholder{ color: #88ACDB}
input{ outline: none;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent;
}

DIV, SECTION { position: relative; }

pre {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */}

button, input, optgroup, select, textarea {
    font-family: inherit;  font-size: 100%;  line-height: inherit;  margin: 0;  box-sizing: border-box; }

button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}

[hidden] { display: none;}

a{ text-decoration: none; color: inherit}

HTML {
    min-width: 380px; margin: 0; padding: 0;display: flex;  flex-direction: column; min-height: 100%; min-width: 380px; -webkit-text-size-adjust: 100%;
    line-height: 1.4;
    font-size: 14px;
    color: var(--text);
    font-family: UniSans, "Open Sans";

}

BODY {margin: 0; padding: 0;display: flex; flex: 1;width: 100%;min-width: 380px;
    background: url(img/bg.svg); background-position: center; background-size: cover;}

.__wrapper{display: flex; flex: 1;flex-direction: column;min-width: 380px; margin: 0 auto !important;}
.__container{ width: 100%; max-width: 1260px; margin: auto;}
.__side-padding{ padding: 0 15px;}
main{ padding: 15px;}

header{ box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.18); }
section{  }

h2{ font-size: 20px; margin-bottom: 15px}
p.attention{ font-weight: bold; font-size: 1.1em; color: var(--text-error)}

*.is-remove{transition: all 0.3s ease; overflow: hidden; max-height: 0!important; max-width: 0!important; padding-top:0 !important; padding-bottom:0!important; margin-bottom:0!important; margin-bottom:0!important;opacity: 0 }

.buttons{ display: flex; justify-content: center; flex-wrap: wrap}
.button{ border-radius: 30px; height: 46px; width: 100%;  display: flex; align-items: center; justify-content: center;  background-color:rgb(22 100 182 / 100%); color: #fff; border: none; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15); letter-spacing: .5px; padding: 0 15px;  cursor: pointer;  transition: all 0.3s ease; box-sizing: border-box;  }
.button:hover{ background-color:rgb(22 100 182 / 80%);}
.button.icons{background-repeat: no-repeat;  background-size: 22px; background-position: 15px center; padding-left: 45px;}
.button.add{ background-color: var(--bgor);  background-image: url(img/icons.svg#add);  }
.button.remove{ background-color: #d2362b;    }
.button.cancel{ background-color: #868686;   }
.button.ordertype{background-color: transparent; border: 1px solid var(--border2);  width: 180px; max-width: none;color: inherit; }
.buttons .button{ min-width: 120px}
.field-button{font-size: 0; border: none; flex-shrink: 0; width: 32px;height: 32px; background-repeat: no-repeat;
    background-position: center; background-size: 22px;   transition: all 0.3s ease; cursor: pointer; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);}
.button.clear{ background-color: #9ab2cb;     }


.field-button-edit{ background-image: url(img/icons.svg#edit); background-size: 16px 16px}
.field-button-edit.success{ background-color: #90B546;  background-image: url(img/icons.svg#check); }
.field-button-save{  background-image: url(img/icons.svg#save);}
.field-button-remove{ background-color: #f9f9f9; background-image: url(img/icons.svg#profile-menu-remove); background-position:center !important; min-width: 32px; padding: 0 !important}
.field-button-remove:hover{ background-color: var(--hover1)}
.field-button-print{ background-image: url(img/icons.svg#print); background-color: #F05A22; background-size: 20px 20px}
.field-button-info{ background-image: url(img/icons.svg#info); background-color: #7A9AC1; background-size: 20px 20px}
.field-button-arrived{ background-image: url(img/icons.svg#arrived); background-color: #16b6a3; background-size: 20px 20px}

.header-items{display: flex; justify-content: space-between; align-items: center; flex: 1; margin-left: 15px;}
.header-items .header-links{ display: flex; justify-content: center; flex: 1}
.header-items .header-item-link{ margin: 0 5px;}
.header-items .header-item-link a{ display: block; background-position: left center; background-repeat: no-repeat; background-size: 22px 22px;
    padding-left: 28px; line-height: 22px }
.header-items  a.header-link-orders{background-image: url(img/icons.svg#orders);}
.header-items  a.header-link-options{background-image: url(img/icons.svg#sets);}
/**************/



.icon{ display: block; background-repeat: no-repeat; background-size: contain; background-size: 28px; background-position: center;  height: 28px; width: 28px; }
.input-error{ transition: all 0.5s linear;max-height: 0; overflow: hidden}
.input-error.is-show{ max-height: 100px;}
.input-error span{ display: block; padding-top: 3px; padding-left: 20px; font-size: 13px; color: var(--text-error) }
.input-wrapper{width: 100%; box-sizing: border-box;   background-color: #FFFFFF; border: 1px solid rgba(136, 172, 219, 0.4); border-radius: 10px; min-height: 44px;   }
.input-wrapper input{ border: none; background-color: transparent; padding: 10px; display: block; width: 100%; box-sizing: border-box; height: 44px; color: inherit;
    border-radius: 10px;}
input[type="checkbox"]:checked{ background: #000}
input[readonly]{background: #f5f5f5; opacity: .8}
.input-wrapper textarea{width: 100%;min-height: 80px;max-width: 100%;max-height: 200px;background: border-box; border: none; padding: 10px}

.type-image .input-wrapper{border:none}
.type-image .attachment{ padding: 0}

.type-checkbox .input-container{justify-content:center !important}
.type-checkbox .input-wrapper{  min-height:unset; width: auto; border-radius: 50%; order: 0}
.type-checkbox .checkbox-wrap, .type-checkbox .input-wrapper input{width: 22px; height: 22px; min-height: unset; border-radius: 50%; order: 0; padding: 0; margin: 0}
.type-checkbox  .input-wrapper input[type="checkbox"]:checked{ background:  #1664B6;  border: 4px solid #fff}

.xform .row.type-checkbox .label{order: 1; text-align: left; margin: 0; margin-left: 10px}

.xform{ width: 100%;  }
.xform h2{ font-size: 16px;margin: 0 0 7px 0; font-weight: 600}
.xform .rows-group{border: 1px solid var(--border1);border-radius: 10px;padding: 15px 10px; margin-bottom: 20px}
.xform .row-line{ display: flex; gap: 10px; align-items: flex-end; margin-bottom: 20px}
.xform .row-line >  div{ margin-bottom: 0}
.xform .row{margin-bottom: 20px; z-index: 1; transition: z-index 0s .1s}
.xform .row .input-container{z-index: 10}
.xform .row:last-child, .xform .rows-group:last-child{margin-bottom: 0px;}
.xform .row .label{margin-bottom: 3px;}
.xform .row .desc{ font-size: 12px; padding-top: 5px; padding-left: 10px}
.xform .shipment-form .row .input-container{ justify-content: center}
.xform .shipment-form .row .label{ min-width: 200px;}
.xform .shipment-form .row .error { text-align: center}
.xform .row.type-checkbox .input-container{ display: flex}

.xform .row.readonly .input-wrapper{ background-color: #f4f5f7}

.xform .row.small .input-container{ justify-content: flex-start; display: flex; align-items: center;  gap: 15px;}
.xform .row.small .input-wrapper{ width: 120px; }
.xform .row.small .label{ flex-basis: 50%; text-align: right}

.xform .row.small-start .input-container{justify-content: flex-start;}
.xform .row.small-start .input-wrapper{ max-width: 160px; }

.xform .row.button-row{margin-bottom: 0px;}
.form-desc{ max-width: 80%; text-align: center; padding: 15px 0; margin: auto}
.xform .row .error{ display: block; padding-top: 3px; padding-left: 20px; font-size: 13px; color: var(--text-error); text-align: right}

.xform .row.type-hidden{ display: none}
.xform .row.is-show{ z-index: 1000;  transition: z-index 0s 0s;}
.xform .icon{ padding-left: 45px;}
.xform .row.icons { background-repeat: no-repeat; background-size: contain; background-size: 24px; background-position: center;}
.xform .row.icons .input-wrapper{ display: flex; justify-content: space-between; align-items: center}
.xform .row.icons .input-wrapper::before{display: block; content: "";   height: 24px; width: 24px; margin-left:10px;  }
.xform .row.icons.icon-user .input-wrapper::before{  background-image: url(img/icons.svg#user); }
.xform .row.icons.icon-pass .input-wrapper::before{  background-image: url(img/icons.svg#pass); }
.xform .row.icons.icon-mail .input-wrapper::before{  background-image: url(img/icons.svg#mail); }
.xform .buttons{ margin-top: 20px;}

.xform .select-input{ cursor: pointer;}
.xform .select-input:after{display:block; position:absolute; content: ""; top: 0; bottom: 0; right: 10px; width: 14px; height: 14px; margin: auto;
    background-repeat: no-repeat; background-position: right center; background-size: contain;  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNCAxTDcuNzg0MDkgNy45OTk5NE03LjIxNTkxIDhMMSAxLjAwMDA2IiBzdHJva2U9IiMzRTVBODAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K);}
.xform .is-show .select-input:after{transform: rotate(180deg)}
.xform .select-input .select-value{ width: 100%; min-height: 44px; line-height: 44px; padding-right: 20px; box-sizing: border-box; white-space: nowrap; overflow: hidden; padding: 0 30px 0 10px ;}
.xform .select-input .select-items{ position:absolute; top: 100%; left: 0; width: 100%;  box-sizing: border-box; max-height: 0px; overflow: hidden; border-radius: 0 0 10px 10px; transition: all .2s ease; opacity: 0 }
.xform .select-input .select-items.is-show{max-height: 170px; opacity: 1 }
.xform .select-input .select-options{ overflow: auto; max-height: 170px; background: var(--bg2);  transition: all 0.3s ease; margin: 0 5px 7px 5px;
    box-shadow: 0px 3px 6px -2px rgb(112 133 161 / 50%);}
.xform .select-input .select-items.is-show  .select-options{ }
.xform .select-input .select-options span{ display:block;   font-size:14px; border-bottom: 1px dashed #7A9AC1; padding: 7px 15px}
.xform .select-input .select-options span:last-child{ border: none}
.xform .select-input .select-options span:hover{  cursor:pointer; background: #becee3}

.xform .select-input .select-options span.add-consignee-select{text-align: center;font-size: 24px; line-height: 18px; background: #97b1d2; color: #fff;}
.xform .select-input .select-options span.add-consignee-select:hover{background: #7a9ac1}


.rows-group-tabs-header{display: flex; align-items: flex-end; justify-content: space-between; }
.rows-group-tabs-header > div{ flex: 1; border-radius: 10px 10px 0 0; border: 1px solid var(--border1); border-bottom:none; padding: 10px 5px;font-size: 12px; line-height:1; text-align: center; cursor: pointer}
.rows-group-tabs-header > div.is-active{ background: var(--bg1)}
.rows-group-tabs-content{border: 1px solid var(--border1); border-top: none; border-radius: 0 0 10px 10px;   min-height: 100px; background: var(--bg1); overflow: hidden;  }
.rows-group-tabs-content-inner{position: absolute; width: 100%; box-sizing: border-box; overflow: hidden; padding: 20px;
    transition: opacity 0.3s ease, max-height .3s ease, position  0s .3s;
    opacity: 0;  max-height: 0px;  }
.rows-group-tabs-content-inner.is-active{ position: relative; max-height: 500px;   opacity: 1;  transition: opacity 0.3s ease, max-height .3s ease, position  0s 0s;}
.rows-group-tabs-content-inner .pickup-desc{ text-align: center; padding: 20px 10px}
/***************/

.auth-container{ height: 100%;  display: flex; margin: auto; justify-content: center; width: 100%; max-width: 560px; flex-direction: column; padding-top: 20px; padding-bottom: 50px;  }
.auth-container header{border-radius: 15px; background: var(--bg); padding: 15px 20px;  margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.auth-container header img{ width: 100px}

.auth-container section{border-radius: 15px; background: var(--bg); padding: 20px 10px; z-index: 100;box-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.15); }
.auth-body{ padding: 10px;}
.auth-body h2{ text-align: center}
.auth-form{ max-width: 300px; margin: auto}
.auth-form, form{   margin: auto; display: flex; flex-direction: column   }
.auth-form .button{ max-width: none}
.auth-container .button{font-size: 16px;}
.auth-body input[type="text"], .auth-body input[type="password"]{ }
.auth-links{ display: flex; justify-content: space-between; color: var(--text2); width: 100%;    margin: 40px auto 20px;}
.auth-links.items-center{ justify-content: center}
.auth-links.items-center .auth-link-item{ display: flex; flex-direction: column; align-items: center}

.registration-message {max-width: 420px; margin: auto}

.auth-link-item p{ font-size: 12px; margin: 0}
.auth-link-item a{ font-weight:600; font-size: 16px; text-decoration: underline}
.auth-message{transition: all 0.5s linear;max-height: 0px; overflow: hidden;  }
.auth-message.is-show{ max-height: 100px; }
.auth-message{transition: all 0.5s linear;max-height: 0px; overflow: hidden;  }
.auth-message span{ display: block; text-align: center; font-size: 14px; color: var(--text-error); padding-bottom: 20px}


.message-block{}
.message{ padding: 15px; text-align: center}
.message-title{ font-size: 1.3rem; font-weight: bold; text-align: center}
.message-text{ text-align: center; margin: 10px 0}
.message-attention{ color: var(--text-error)}
.message-text p{ margin: 0}
.message-links{ display: flex; justify-content: space-around; align-items: center; padding: 15px 0}
.message-link{ display: flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 10px; min-width: 110px; border: 1px solid var(--border1); border-radius: 30px; color: var(--text3); background: #fff; box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; }
.message-link:hover{box-shadow: 0px 7px 4px -3px rgba(0, 0, 0, 0.15); border-color: var(--border1hover); cursor: pointer }
.popup-body .message-block{ margin-bottom: 20px;}

.cabinet{ box-sizing: border-box;  margin: auto;  width: 100%; min-height: 100%; max-width: 1320px; padding-top: 70px; padding-bottom: 30px }
.cabinet header{ position:fixed; z-index: 1000; top:0; left:0; width:100%; background: var(--bg); padding: 0px 15px; height: 70px; box-sizing: border-box;  display: flex; justify-content: space-between; align-items: center; }
.cabinet header img{ width: 80px;}
.cabinet section{margin: 0px; z-index: 10  }

.section-body{  background: #fff; padding: 25px 15px; z-index: 100;box-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.15); min-height: 100px;  }
.section-body.has-tabs{ }
.section-tabs{ display: flex; z-index: 10}
.section-tab-item{ border-radius: 15px 15px 0 0; background: #B2CDE9;   margin-right: 2px; box-shadow: inset 0px -4px 6px -3px rgba(0, 0, 0, 0.15);}
.section-tab-item a{padding: 10px 15px; display: block }
.section-tab-item.active{ background: var(--bg);  box-shadow:unset}

.header-profile .login{ display: none}
.header-profile .icon-profile{ position: relative; display: block;   height: 28px; width: 28px;}
.header-profile .icon-profile:before, .header-profile .icon-profile:after{display: block; content: ''; position: absolute; top:0; left: 0; width: 100%;
    height:100%; background-repeat: no-repeat; background-size: 28px; background-position: center; transition: all 0.3s ease; }
.header-profile .icon-profile:before{ background-image: url(img/icons.svg#profile); z-index: 100; opacity: 1 }
.header-profile .icon-profile:after{ background-image: url(img/icons.svg#profile-menu-close); z-index: 200; opacity: 0 }
.header-profile .is-show .icon-profile:before{ opacity: 0}
.header-profile .is-show .icon-profile:after{ opacity: 1}

.breadcrumbs{ color: var(--text4); padding: 15px 30px; font-size: 13px; }

/**/
.profile-menu{position: fixed; right: 0; top:70px; transform: translateX(100%); background: var(--bg); border-radius: 0 0 0 15px;
    transition: all 0.6s ease; overflow: hidden; }
.profile-menu.is-show{  transform: translateX(0); box-shadow:-2px 6px 8px 0px rgba(0, 0, 0, 0.18);}
.profile-menu-row{ background: #fff; padding: 15px 20px;}
.profile-menu-body{box-shadow: inset 0px 0px 10px -5px rgba(0, 0, 0, 0.5);padding: 15px 20px;margin: 0 -5px;}
.profile-menu .profile-login{ background-repeat: no-repeat; background-size: 26px; background-position: left center; background-image: url(img/icons.svg#profile); padding-left: 35px; height: 28px; line-height: 28px;  }
.profile-menu .profile-exit{ display: block; background-repeat: no-repeat; background-size: 26px; background-position: left center; background-image: url(img/icons.svg#profile-exit); padding-left: 35px; height: 28px; line-height: 28px;}
.menu-item-profile{ background-repeat: no-repeat; background-size: 22px; background-position: left center; padding-left: 30px; height: 22px; line-height: 22px; margin: 10px}
.menu-item-profile.item-profile{background-image: url(img/icons.svg#profile-edit); }
.menu-item-profile.item-consignees{background-image: url(img/icons.svg#profile-consignees); }


.border-block{ width: 100%; padding:20px 10px; border-radius: 10px; border: 1px solid var(--border2); margin: auto; box-sizing: border-box; margin-bottom: 20px}

.profile-block{ }
.profile-block .list-items{ margin-bottom: 20px}
.profile-form .profile-field{margin-bottom: 20px}
.profile-form .profile-field:last-child{margin-bottom: 0px}
.profile-form .profile-field-label{ font-size: 14px;   padding-left: 15px; margin-bottom: 5px}
.profile-form .profile-field-input { display: flex; justify-content: space-between; flex: 1; gap:10px; align-items: center }
.profile-form .profile-field-input input{ height: 44px; border-radius:30px; border: 1px solid var(--border1); display: block; width: 100%; font-size: 13px; background: #fff; padding-left: 15px; padding-right: 50px }
input[disabled]{ cursor: not-allowed; opacity: .7}
.profile-form .profile-field-description{ font-size: 13px; opacity: .7; padding-left: 15px; padding-top: 10px}

.profile-form .profile-field-code .profile-field-input {  max-width: 280px !important;  }
.profile-form .profile-field-code .profile-field-input input{   padding-right: 15px !important;  font-weight: 600}

.profile-form .field-button {position: absolute;right: 5px;}

.profile-block.user-link{ margin-top: 15px; display: flex; flex-wrap: wrap; align-items: flex-start}
.profile-block.user-link span{ font-weight: bold; margin-right: 15px}
.profile-block.user-link a{   cursor: pointer}

.personal-orders{}
.personal-orders .order-item{background: #F7F7F7; box-shadow: -5px 3px 15px rgba(0, 0, 0, 0.15);border-radius: 20px; padding: 15px; margin-bottom: 25px;}
.personal-orders .order-item-head{ display: flex; justify-content: space-between; flex-wrap: wrap; color:#004F38}
.personal-orders .order-item-head > *{ margin-bottom: 15px;}
.personal-orders .order-item h2{ font-size: 20px; flex: 1; text-transform: none;  color:#004F38; flex-basis: 100%; text-align: left }
.personal-orders .order-item-summ{ text-align: right; flex-basis: 100%}
.personal-orders .order-item-summ .summ{ font-weight: bold; font-size: 18px; margin-left: 20px;}
.personal-orders .order-item-action .button{ max-width: 180px; height: 42px; font-size: 13px}
.personal-orders .order-item-pay-status{ color: #FFAB2C; font-weight: bold;}
.personal-orders .order-item-pay-status.is-paid{ color: #90B546}

.acms_popup_window{ flex-basis:100%; max-width: 480px}
.acms_popup_wrapper{ border-radius: 15px; overflow: hidden; background: var(--bg) }
.acms_popup_content{ min-width: 300px;}
.acms_popup_wrapper_close{ top:12px;}
.acms_popup_case .popup-header{ padding: 15px 10px; text-align: center; font-weight: bold; background: var(--bg2)}
.acms_popup_case .popup-body{ padding: 20px}

.popup-body .buttons{display: flex; align-items: center; gap: 20px}

.text-link, .text-status{ border: 1px solid var(--border3);    padding: 4px 10px; border-radius: 5px;}
.text-link{cursor: pointer;   transition: all 0.3s ease;}
.text-link:hover{ background-color: var(--hover1)}
.text-link-confirm{ border-color: var(--bgor);}
.text-link-confirm:hover{background: var(--bgor); color: #fff;}

.status-on{ background: #16b6a3; color: #fff}
.text-link.status-on:hover{ background: #66cdc1; color: #fff}

.list-items{ box-sizing: border-box}
.list-item-cont{width: 100%; padding:25px 10px; border-radius: 10px; background: #fff; margin: auto; box-sizing: border-box; margin-bottom: 20px;
    border: 1px solid var(--border1);}
.list-item-cont:last-child{ margin-bottom: 0px;}

.list-item-inner{ display: flex;  flex-direction: column}
.list-item-inner.select-item{flex-direction: row}
.list-item-field{display: flex; align-items: center; margin-bottom: 10px  }
.list-item-field:last-child{margin-bottom: 0px  }
.list-item-field .list-item-title{  text-align: left; padding-right:10px; color: var(--text3); font-size: 13px; line-height: 1.2}
.list-item-field .list-item-value{  font-weight: 600;  }
.list-item-actions{  border-radius: 10px;  display: flex;   flex-direction: column}
.list-item-actions .field-button{ font-size: 0; margin: 3px;}
.list-item-field.field-actions{ gap:10px}

.pos-items.products .list-item-cont{ padding: 0; overflow: hidden}
.pos-items.products .list-item-inner{padding: 30px 15px 0px 15px;}
.pos-items.products  .list-item-title{ text-align: left}



.list-item-field img{ display: block; width: 60px; height: 60px; border-radius: 5px; cursor: zoom-in;}
.list-item-field.pos-item-num{ position: absolute; padding: 3px 10px 3px 20px; top: 0; left: 0; background: #eaf3fc; border-radius: 0 0 10px 0; font-size: 14px}
.list-item-field.pos-item-num .list-item-title{ font-weight: bold}
.list-item-field.pos-item-name{ flex-grow: 1}
.list-item-field.pos-item-name .list-item-title{ flex-basis: 25px; justify-content: flex-start; text-align: left; align-self: flex-start}
.list-item-field.pos-item-name .list-item-value{display: flex; align-items: center;  }
.list-item-field.pos-item-name .list-item-value-name{ padding-left: 10px; }
.list-item-field.pos-item-link .list-item-value-link a{display:block; margin: 15px;  width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(img/icons.svg#href)}

.list-item-field.pos-item-image { margin-right: 10px}


.list-item-field.pos-item-props {  align-items: flex-start;  margin: 5px 0; flex-direction: column  }
.list-item-field.pos-item-props .list-item-title{ text-align: left;   }
.list-item-field.pos-item-props .list-item-field-row{ display: flex; align-items: baseline}
.list-item-field.pos-item-summ{ background: #eaf3fc; justify-content: space-between; gap: 5px; padding: 10px 20px; margin: 0 -20px; margin-bottom: 0 !important; a}
.list-item-field.pos-item-summ .list-item-field-col{ flex-basis: 25%; flex-grow: 1; }
.list-item-field.pos-item-summ .list-item-field-col:last-child{  }
.list-item-field.pos-item-summ .list-item-title{ text-align: left; height: 22px; display: flex; align-items: center; font-size: 12px; padding: 0; border-bottom: 1px solid #cdd5dd;margin-bottom: 3px}
.list-item-field.pos-item-summ .list-item-value{font-size: 14px}

.pos-items.products .pos-item-comment{}
.pos-items.products .list-item-cont-total .list-item-inner{ padding: 0; flex-direction: row; justify-content: flex-end}
.pos-items.products .pos-item-total{ justify-content: flex-end; align-items: stretch; gap: 1px;  overflow: hidden; margin-bottom: 20px; max-width: 580px; flex-basis: 100%}
.pos-items.products .pos-item-total .list-item-field-col{ background: #d4e0ed; padding: 10px 12px; flex-basis: 50%; display: flex
;flex-direction: column;justify-content: flex-end;}
.pos-items.products .pos-item-total .list-item-field-col:first-child{ border-top-left-radius: 10px; border-bottom-left-radius:  10px}
.pos-items.products .pos-item-total .list-item-field-col:last-child{border-top-right-radius: 10px; border-bottom-right-radius:  10px}
.pos-item-total .list-item-title, .pos-item-total .list-item-value{ flex-basis: auto}

.list-item-value sup{font-size: .7em; font-weight: 100; padding-left: 1px}
.select-items .list-item-cont{padding:15px 10px;}
.list-item-inner.select-item{flex-direction: row; justify-content: space-between}
.list-item-inner.select-item .list-item-action{margin-left: 20px; }

.list-item-button{ }
.list-item-button a{border: 1px dashed var(--border3); text-align: center; display: block; font-size: 32px; line-height: 40px; border-radius: 10px;
    font-family: serif; transition: all 0.3s ease; }
.list-item-button a:hover{ background: var(--hover1)}

.orders-list .list-item-inner{flex-direction: row; justify-content: space-between; margin-right: 45px}
.orders-list .list-item-cont{ padding: 15px}
.orders-list .list-item-field{ margin-bottom: 5px;}

.orders-list .order-item-status{  }
.orders-list .list-item-actions{ position: absolute; right: 0; top:0; bottom: 0; background: var(--bg); padding: 10px 5px; align-items: center; justify-content: space-between}
.orders-list .list-item-actions .field-button-edit{ order: 10}

.orders-list .list-item-field.order-item-ship{ flex-direction: column; align-items: flex-start}
.orders-list .list-item-field .list-item-values{ padding-left: 20px;}

.delivery-list .list-item-title{ flex-basis: 150px; }

.more-block{ min-height:32px; min-width: 42px; position: absolute; top:0; right: 0; z-index: 100 }
.more-block::before{ display: block; position: absolute; content: ""; width: 100%; height: 32px; top: 0; right: 0; left: 0; margin: auto;  background-position: center; background-repeat: no-repeat; background-size: 20px; background-image: url(img/icons.svg#more-dots); z-index: 10}
.more-block > div{ max-height: 0px;  overflow: hidden; transition: height, max-height, opacity 0.5s ease ; opacity: 0}
.more-block.is-show >div{ margin-top:28px; max-height: 500px; width: 100%; padding: 5px; box-sizing: border-box; opacity: 1;   overflow: hidden}



.body-header{ position: fixed; bottom: 0; left: 0; width: 100%;  background: #D1DFEC; z-index: 1000 }
.body-header-inner{padding: 10px 15px; display: flex; justify-content: space-between; align-items: center}
.body-header-inner .filter{ display: flex; align-items: center; justify-content: space-between; flex: 1;}
.body-header-inner .buttons{ margin-left: 15px;}

.filter-button{ display: block; width: 28px; height: 28px; background-repeat:no-repeat; background-position: center; background-size: 22px 22px; background-image: url(img/icons.svg#search); background-color: transparent; border: none }

.filter .over-container{padding-top: 70px; padding-bottom: 70px}
.filter .over-container .over-content{  background: #D1DFEC;}
.filter .over-container .overheight_close_button {width: 24px;height: 24px;position: fixed;top: 90px;right: 15px;}

.filter-inner{display: none; }
.filter-inner form{width: 100%; max-width: 420px; margin: auto }
.over-content .filter-inner{display: flex;align-items: center;min-height: 100%;padding: 20px;box-sizing: border-box; padding-bottom: 70px;}
.filter .filter-item{ display: flex; flex-direction: column; align-items: stretch; margin-bottom: 15px }
.filter .filter-item span{ margin: 0 5px}
.filter .filter-item-label{ min-width: 60px;    margin: 3px 0 3px 15px}
.filter .filter-item-input{ flex-basis: 100%; display: flex; align-items: center}
.filter .filter-item.buttons{ margin:15px 0;}
.filter  input:not(.button), .filter select{ border: 1px solid var(--border3); width: 100%; box-sizing: border-box; padding: 5px 10px; font-size: 14px; color: inherit; background: #F5FAFF; height: 44px;  }
.filter  input, .filter select{ border-radius:30px;   }
.filter  input[type="date"]{ width: 125px; }
.filter-buttons{margin: 15px 0; display: flex; gap: 15px;  justify-content: space-between}
.filter-buttons .button { flex-basis: 40%; max-width: 200px; margin: 0;}
.filter-buttons .button.button-clear{  background: var(--bg1); color: #3e5a80; }

.order-container{}
.order-container:nth-child(2){margin-top: 20px}
.container-header{ border-radius: 10px 10px; background: var(--bg2); display: flex; align-items: flex-start;   padding: 15px 10px;
    flex-wrap: wrap; justify-content: space-between; margin-bottom: 25px;  }
.block-header{ border-radius: 10px 10px 0 0; background: var(--bg1); display: flex; align-items: center;   padding: 15px 10px;
    flex-wrap: wrap; justify-content: space-between;  }
.order-container > .block-header{ border-radius: 15px; margin-bottom: 15px}
.order-header-block{ display: flex; align-items: flex-start; padding: 0 10px;  flex-basis: 50%; flex-shrink:1; flex-grow: 1; box-sizing: border-box;  flex-direction: column; order: 1}
.order-header-block.block-title{flex-basis: 60%}
.order-header-block.block-status{flex-basis: 40%}
.order-header-block.block-action{flex-basis: 100%; margin-top: 10px;  flex-direction: row; justify-content: flex-end;gap: 20px;}

.order-header-item{ margin-bottom: 5px; display: flex; align-items: center; }
.order-header-item:last-child{ margin-bottom: 0}
.order-header-block:last-child .order-header-item{flex-direction: column }
.order-header-item-name{ font-size: .8em; line-height: 1; margin-right: 5px;}

.order-header-status{ align-items:flex-end; width: 100%;     justify-content: flex-end;}
.order-header-status .order-header-item-name{ display: none}

.block-inner{ padding: 15px; padding-bottom: 0;}
.block-inner:last-child{padding-bottom: 15px;}

.block-header-title{ font-size: 16px; font-weight: 700}
.block-header-item.block-header-tariff{display: flex; align-items: center}
.block-header-item.block-header-tariff .text span{font-weight: bold}

.order-header-item-val{ font-weight: 600; }
.order-status{ padding: 5px; width: 100px; text-align: center; border-radius: 20px; background: #eaf3fc; font-weight: 100; font-size: 12px}
.order-status.status-admin{ cursor: pointer}
.order-status.status-20{background: #F05A22; color: #fff}
.order-status.status-30{background: #1D99FE; color: #fff}
.order-status.status-40{background: #CA61CC; color: #fff}
.order-status.status-50{background: #16B6A3; color: #fff}

.order-status-pay{ padding: 5px; width: 90px; text-align: center; border-radius: 20px;  font-weight: 100; font-size: 12px; border: 1px dashed  #b5b5b5; opacity: .8}
.order-status-pay.status-admin{ cursor: pointer}
.order-status-pay.status-10{border-color: #1D99FE; font-weight: 600; color: #1D99FE; opacity: 1 }
.order-status-pay.status-20{border-color: #16B6A3; font-weight: 600; color:#0b6258; opacity: 1  }


.order-action-link{ display: flex; align-items: center; cursor: pointer }
.order-action-link span{  margin-left: 5px;}
.order-action-link:before{display: block; content:""; width: 26px; height: 26px; border-radius: 50%; background-color: var(--bgor);  background-repeat: no-repeat;background-position: center;  }
.order-action-link.print_link:before{  background-image: url(img/icons.svg#print);  background-size: 18px 18px; background-color: #1e6ec1}
.order-action-link.pay_link:before{  background-image: url(img/icons.svg#paid);  background-size: 18px 18px; }
.order-action-link.export_link:before{  background-image: url(img/icons.svg#xlsexp);  background-size: 16px 16px; background-color: #1e6ec1}



.order-block{ border-radius: 10px; border: 1px solid var(--border1); margin-bottom: 25px; box-shadow: 0px 5px 10px -4px rgba(0, 0, 0, 0.10); background: var(--bg)}
.order-block .buttons{ margin: 20px;}

.order-files-block{  background: #ffffff ;border-radius: 15px;margin-top: 20px; }

.column-row{ display: flex}
.order-form-row  {margin-bottom: 20px }
.order-form-row:last-child  {margin-bottom: 0px}
.order-form-col  {margin-bottom: 20px}
.order-form-col.is-show{ z-index: 1000}
.order-form-col:last-child  {margin-bottom: 0px}
.order-field-label{ font-size: 13px;   padding-left: 15px; margin-bottom: 5px; opacity: .8}
.order-field-input { display: flex; justify-content: space-between; flex: 1; gap:10px; align-items: center }
.order-field-input input, .order-field-input div{ height: 40px; border-radius:30px; border: 1px solid var(--border1); display: block; width: 100%;  font-size: 14px;  background: #fff; padding: 0px 15px; }
.order-form-row  .input-wrapper{ border-radius: 30px}
.order-form-row  .xform .select-input .select-options{ margin: 0 15px 7px 15px}
.order-field-input div{ line-height: 40px; border: 1px solid rgb(207 222 241 / 50%); background: rgb(255 255 255 / 50%); overflow: auto   }

.order-form-col.field-options .order-field-input { display: flex; flex-wrap: wrap;justify-content: flex-start }
.order-form-col.field-options .order-field-input div{ width: unset; }
.not-input-values{ }

.order-form-row .select-input{ z-index: 100}

.order-block.comments-block{ min-height: 65px; background: #fcf3ea}
.order-block.comments-block .list-item-actions{ position: absolute; top: 10px; right: 10px;}
.order-block.comments-block .comments-content{ padding: 15px; padding-right: 70px;}

.pos-items{ padding: 15px;}
.pos-items .list-item-fields{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px}
.pos-items .list-item-cont { padding: 20px 15px; border: none;  box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.15);}
.pos-items .list-item-field { margin-bottom: 5px;}
.pos-items .pos-item-comment{ }
.pos-items .pos-item-comment-icon{ width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(img/icons.svg#comment)}

.block-footer p{ text-align: center; margin: 0;}
.block-footer .buttons{ margin: 20px; }
.block-footer .button{ min-width: 220px}

.shipment-items .shipment-header{ display: flex; padding: 5px 10px;background: #eaf3fc;border-bottom: 2px solid #f5faff; justify-content: space-between; align-items: center }
.shipment-items .list-item-field{ margin-bottom: 5px;}
.shipment-items .list-item-field .list-item-title{ flex-basis: 50%; background: var(--bg1); line-height: 24px;  }
.shipment-items .list-item-field .list-item-value{ flex-basis: 50%; background: var(--bg); padding-left: 10px; line-height: 24px;  }
.shipment-items .list-item-cont{ padding-bottom: 10px;}
.shipment-items .shipment-header .code{ font-weight: 600;}
.shipment-items .shipment-header .arrived{ padding: 3px 10px; font-size: 12px; border-radius: 6px; border: 1px dashed var(--border2); color: var(--text3); cursor: pointer;  }
.shipment-items .shipment-header .arrived.is-true{  border: 1px dashed #16B6A3;  color: #0c897a; cursor: default;}

.options-container .block-header{ padding: 10px}
.options-row{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 0}
.options-row .options-field-label{text-align: right; flex-basis: 50%}
.options-row .options-field-val{ font-weight: bold;  flex-basis: 50%}

.xform .currency-form .row .input-container{justify-content: center; align-items: center; display: flex; flex-direction: row; font-weight: bold }
.xform .currency-form .row .input-container > div{ min-width: 0;  width: 50% !important; max-width:120px;}
.xform .currency-form .row .input-container .label{ text-align: right; margin-right: 10px; }
.currency-form .currency-cny .input-wrapper:after{ content: "CNY"; display: block; position: absolute; top: 50%; left: calc(100% + 5px); margin: auto; transform: translateY(-50%) }
.currency-form .currency-rub .input-wrapper:after{ content: "RUB"; display: block; position: absolute; top: 50%; left: calc(100% + 5px); margin: auto; transform: translateY(-50%) }

.filter-item.buttons{gap: 15px}

.popup-body .status-form{ min-height: 180px}
.xform .status-form .select-input .select-options{ max-height: 120px}

.payform{  max-width: 600px; margin: auto;}
.payform .paydata{ border: 1px solid var(--border1); border-radius: 10px;}
.payform .paydata:first-child{   margin-bottom: 20px}
.payform .paydata p{ text-align: center; padding: 5px 15px;}
.payform .paydata .bank-block{ background: #C5D8EB; padding: 20px 0; font-size: 13px}
.payform .paydata .options-block .options-row{ padding: 3px 0;}

.payform .summ-blocks{}
.payform .summ-block{ border-radius: 10px; margin-bottom: 20px;}
.payform .summ-block-head{background:  var(--bg1); padding: 5px 10px;  border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: space-between}
.payform .summ-inner{ background: var(--bg1); border-radius: 10px; padding: 10px; }
.payform .summ-block-title{  font-weight: bold;}
.payform .summ-block .total-row{ margin: 15px 0}
.payform .summ-block .text-link{ font-size: 13px}
.payform .summ-block .text-link.dload{ padding: 0; width: 28px; height: 28px; background-image: url(img/icons.svg#dload);  background-size: 22px 22px;background-repeat: no-repeat;background-position: center; border: none }
.payform .summ-title{ display: flex; justify-content: space-between; padding: 10px; font-weight: 600; font-size: 16px}
.payform .summ-val{ font-weight: bold; font-size: 18px;}
/*
.paydata .summ-block{ padding-top: 20px}
.paydata .summ-block .options-row.total-row{ background: #C5D8EB; padding: 10px 0; margin-top: 10px  }
*/
.paydata .summ-block .options-row.total-row{  padding: 20px 0; font-size: 16px }

.paydata .options-block .options-field-label{ flex-basis: 30%}
.pay-chek{ display: flex;  flex-direction: column; gap: 15px; margin-bottom: 20px; flex-basis: 100%}
.pay-chek .upload-container{ display: block; }
.pay-chek .upload-file-preview{ height: auto; display: block; padding: 5px; min-height: 30px; min-width: 100px; flex-basis: 100%}
.pay-chek .uploadfile-button { height: 20px; width: auto; padding: 10px 20px; margin: 0 10px;}
.pay-chek .uploadfile-button:before{ left: auto; right: 0;}
.pay-chek .upload-container{ flex: 1;}
.pay-chek .upload-file{ width: 100%; max-width: none; min-width: unset; max-height: unset;  height: auto; padding:0px; font-size: 12px;
    cursor: unset; margin-bottom: 15px; background: var(--bg) }
.pay-chek .upload-file:last-child{margin-bottom: 0}
.pay-chek .upload-file-preview  a{ cursor: pointer;  display:block; padding: 8px 5px; background-image: url(img/icons.svg#attach);  background-size: 22px 22px;background-repeat: no-repeat;background-position: 5px center; padding-left: 35px }
.pay-chek .upload-file-actions{     border-top: 1px solid var(--border1); padding: 8px 10px;    display: flex; justify-content: space-between; align-items: center}
.pay-chek .field-button-remove{ min-width: 22px; width: 22px; height: 22px; box-shadow: none; border:  1px solid var(--border1);}
.upload-progress.loaded{z-index: -1;}

.fancybox__container{z-index: 20000 !important}
.orders-list .block-link{ display: none}

.shipment-info textarea{ display: block; width: 100%; max-width: 100%; height: 200px;}

.nav-pages{ margin-top: 20px; padding: 10px; border-radius: 10px; background: var(--bg)}
.nav-pages .pages_num{ display: flex; gap:7px; }
.nav-pages .pages_num > *{ min-width: 32px; height: 32px; box-sizing: border-box;  border: 1px solid var(--border1); text-align: center; line-height: 32px; padding: 0 5px; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px}
.nav-pages .pages_num > *.current{background: rgb(22 100 182 / 100%); color: #fff}

@media only screen and (min-width: 768px) {
    .acms_popup_window{ max-width: 680px}
    .acms_popup_content{ min-width: 460px; }
    .acms_popup_case .popup-body{ padding: 20px 40px}

    .header-items  .header-item-link a{ background-size: 32px 32px; padding-left: 38px; line-height: 32px }

    .xform .rows-group{ padding: 20px;}

    .body-header{ position: relative; border-radius: 15px 15px 0 0;}
    .section-body{border-radius: 15px;}
    .section-body.has-header{border-radius: 0px 0px 15px 15px;}
    .section-body.has-tabs{border-radius: 0px 15px 15px 15px;}

    .cabinet section{margin: 0 10px;   }

    .list-item-field .list-item-title{ font-size: inherit;}
    .delivery-list .list-item-title{ flex-basis: 50%;  }


    .list-item-inner .list-item-row{ display: flex; margin:5px 0}
    .list-item-inner .list-item-row .list-item-field{ margin-right: 15px;   }

    .orders-list .list-item-inner{ flex-direction: column}
    .orders-list .list-item-field.field-col{ flex-direction: column; align-items: flex-start}
    .orders-list .list-item-row .list-item-field{ margin-right: 30px;   }
    .orders-list .list-item-field .list-item-values{ padding-left: 0}


    .block-inner{ padding: 20px; padding-bottom: 0;}
    .block-inner:last-child{padding-bottom: 20px;}

    .order-header-block{  flex-direction: row; flex: 1; flex-basis: auto}
    .order-header-block.block-title{ flex-basis: 100%; margin-bottom: 12px;}
    .order-header-block:last-child{flex: 0}
    .order-header-item{ margin-right: 20px; margin-bottom: 0}
    .order-header-item:last-child{ margin-right: 0; align-items: center}
    .order-header-block:last-child .order-header-item {flex-direction: row; align-items: center}
    .order-header-status .order-header-item-name{ display: block}
    .order-header-block.block-action{ order:1; margin: 0}
    .order-header-block.block-status{ order:2; margin: 0}

    .order-block .block-inner{ display:flex; flex-direction: column; gap: 20px; padding: 20px;}
    .order-block .block-inner.column-rows{ flex-direction: column}
    .order-block .message{ margin: auto}

    .order-form-row{ display: flex; justify-content: space-between; flex-basis: 100%; gap: 20px; margin-bottom: 0; flex-wrap: wrap}
    .order-form-col  { margin-bottom: 0; flex: 1 1 33.33%;}
    .full-size-row { flex-basis: 100%}
    .order-form-col.field-phone, .order-form-col.field-code{max-width: 200px;}
    .form-row-name { min-width: 350px;}



    .xform .row.small .input-container{ justify-content: flex-start; display: flex; align-items: center;   gap: 15px;}
    .xform .small-group{ display: flex; justify-content:space-around; align-items: flex-start; gap: 15px; }
    .xform .small-group .row.small .input-container{ flex-direction: column;  justify-content:flex-start;  align-items: flex-start; gap:0px; }
    .xform .small-group .row.small .label{ text-align: left  }

    .paydata .bank-block{   font-size: 16px}
    .paydata .options-block .options-field-label{ flex-basis: 50%}

    .payform.paytype-1 { max-width: 480px }
    .payform.paytype-1 .summ-blocks > div{ width: 100%}

    .pay-chek .upload-container{ margin: 0}

    .nav-pages{   padding: 15px;}
    .nav-pages .pages_num{ display: flex; gap:10px; }
    .nav-pages .pages_num > *{ min-width: 36px; height: 36px; line-height: 36px; padding: 0 10px; font-size: 14px}

    .profile-block.user-link{  font-size: 15px; letter-spacing: .5px }

}


@media only screen and (min-width: 1100px) {

    .acms_popup_window{ max-width: 720px}

    .cabinet section{margin: 0 15px;}

    .cabinet{padding-top: 80px; }
    .cabinet header{border-radius: 15px; top:15px; left: 15px; right: 15px; width: auto; max-width: 1290px; margin: auto; }

    .button{max-width: 240px; max-width: max-content; padding: 0 20px }

    .header-profile .menu-button{ display: flex; align-items: center;  height: 70px; padding: 0 15px; transition: all 0.3s ease }
    .header-profile .icon-profile{ margin-right: 10px}
    .header-profile .login { display: block;}
    .header-profile .menu-row-login{display: none}
    .header-items{ flex-basis: 100%; height: 100%; align-items: center; display: flex}
    .header-items .header-profile{    position: absolute;  right: 0;  top: 0;    margin: auto; display: flex;  flex-direction: column; overflow: hidden; transition: all 0.3s ease;}

    .container-header{ align-items: center}

    .profile-menu{ max-height: 0px;   position: relative; top: auto;  right: auto; left: auto;  transform: unset;box-shadow:unset; border-radius: 0 0 15px 15px; transition: all 0.3s ease; box-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.15);}
    .header-items .header-profile:hover{background: #fff; border-radius: 15px; top:-10px; padding-top: 10px; box-shadow: 0px 4px 10px -5px rgba(0, 0, 0, 0.15)}
    .header-items .header-profile:hover .profile-menu{ max-height: 500px;}
    .header-items .header-links{ gap:20px}

    .section-tab-item a{ padding: 10px 25px;}
    .section-body{padding: 30px 20px}
    .profile-block{ padding: 25px}
    .profile-form .profile-field{display: flex; align-items: center; gap: 20px}
    .profile-form .profile-field-label{ width: 150px; text-align: right}
    .profile-form .profile-field-input input{padding-right: 150px}
    .profile-form .field-button{font-size: 14px; width: 140px; background-position: 15px; text-align: left; padding-left: 45px;}

    .acms_popup_content{ min-width: 700px;}
    .acms_popup_case .popup-body{ padding:30px 50px}

    .xform .row .input-container{ display: flex; align-items: center; justify-content: space-between}
    .xform .row .label{ width: 25%; min-width: 180px; text-align: right; margin-right: 15px; margin-bottom: 0 }
    .xform .row.small .label{ min-width: unset; width: 100%; flex-basis: 100%}
    .xform .row .desc{ margin-left: calc(25% + 45px); font-size: 14px;}


    .xform .currency-form .row .input-container{ justify-content: center; align-items: center;  }

    .xform .shipment-form .row .label{ width: 230px;}
    .xform .shipment-form .row .input-wrapper{ max-width: 230px;}
    .xform .shipment-form .row .error{padding-left: calc(50% + 20px); text-align: left}

    .list-item-inner{ display: flex; align-items: center; justify-content: space-between}
    .list-items{ max-width: none;}
    .list-item-cont{ display: flex; justify-content: space-between; padding: 15px }
    .list-item-inner{flex-direction: row; align-items: stretch; flex: 1}
    .list-item-field { justify-content: flex-start; margin: 0 10px; flex-grow: 1}

    .list-item-field.field-id{ max-width: 100px;}
    .list-item-field.field-code{ max-width: 130px;}
    .list-item-field.field-name{flex-basis: 40%;  flex-grow: 1}
    .list-item-field.field-email{flex-basis: 35%;  }

    .list-item-field.field-phone{flex-basis: 25%; }
    .list-item-field.field-city{ max-width: 200px;}
    .list-item-field.field-actions{ justify-content: flex-end; gap: 10px; flex-grow: 0; flex-shrink: 0}
    .list-item-field.field-userlink{ min-width: 100px}

    .list-item-field:last-child{margin-bottom: 0px  }
    .list-item-field .list-item-title, .list-item-field .list-item-value{flex-basis: auto;  text-align: left }



    .pos-items .list-item-fields{ flex: 1; margin-bottom: 0}

    .pos-items.products .list-item-inner{ padding: 0 }
    .pos-items.products .list-item-cont{ padding: 0 15px;}
    .list-item-field.pos-item-name .list-item-title{align-self: center}
    .list-item-field.pos-item-props{ flex-basis: 160px;}
    .pos-items.products .pos-item-comment{    bottom: auto;}
    .list-item-field.pos-item-num{ position: relative; padding:0; background: none; border-radius: 0; width: 35px; flex-grow: 0}
    .list-item-field.pos-item-num .list-item-title{ font-weight: normal}
    .list-item-field.pos-item-name{ flex: 1; flex-basis: 240px}
    .list-item-field.pos-item-summ{ flex: 1; flex-basis: 340px; flex-shrink: 0; flex-grow: 0}

    .list-item-field.pos-item-props { flex-direction: column; gap: 0;justify-content: center; font-size: 13px; }

    .pos-items.products .list-item-field{ padding: 0}
    .pos-items.products .list-item-field img { margin: 10px 10px 10px 0}

    .pos-items.products .list-item-field.pos-item-summ {width: 340px; margin-right: 15px; padding-left:10px; padding-right: 10px; height: 100% }

    .list-item-field.pos-item-summ .list-item-title{ border: none; margin: 0}

    .orders-list .list-item-cont{ padding: 0}
    .orders-list .list-item-inner{ flex-direction: row; margin: 0; padding: 10px 5px}
    .orders-list .list-item-field.field-col{ flex-direction: column; align-items: flex-start}
    .orders-list .order-item-status { }
    .orders-list .order-item-ship{ flex-basis: 170px; flex-shrink: 0}
    .orders-list .list-item-actions{ position: relative}
    .orders-list .list-item-actions .field-button-edit{ order: 0}
    .orders-list .block-link{ display: block; position: absolute; top: 0;  left: 0; right: 0; bottom: 0;  box-sizing: border-box; z-index: 50}
    .orders-list .list-item-row .list-item-field {margin-right: 15px;}

    .more-block{ width: auto; height: auto; background: none; position: relative; top: auto; right: auto; display: flex; align-items: center;}
    .more-block::before{ display: none; }
    .more-block > div, .more-block.is-show >div{ max-width: unset; max-height: unset; opacity: 1;  overflow: visible; margin-top:0}

    .list-item-actions{ flex-direction: row; }
    .list-item-actions .field-button{font-size: 13px; background-position: 15px; padding-left: 45px; margin: 0 5px; width: auto}
    .list-item-actions .field-button-remove{}

    .filter-inner{display: block; }
    .filter-inner form{ max-width: none; display: flex; justify-content: space-between;  flex-direction: row; align-items: center; }
    .filter .filter-item{ flex-direction: row; align-items: center; flex-basis: calc(50% - 20px);}
    .filter .filter-item-label{ margin: 0 12px 0 0; min-width: unset;  padding-left: 15px;}
    .filter .filter-item-input{ flex-basis: auto; flex-grow: 1  }
    .filter .filter-item-input.search-input{ min-width: 280px;}
    .filter-buttons{ display: flex; gap: 15px; flex-wrap: wrap; }
    .filter-buttons .button{ margin: 0; max-width: unset;  }
    .filter-buttons .button.button-search{ padding: 0 30px}
    .filter-buttons .button.button-clear{ padding: 0 10px}

    .filter.search{ justify-content: center}
    .filter.search .filter-item{flex-basis: unset;}
    .filter.search .filter-buttons { flex-direction: row; display: flex; gap: 15px}
    .filter.search .filter-buttons { flex-direction: row; display: flex}

    .filter-items{display: flex; flex-wrap: wrap; gap: 10px;   margin: 0 15px; }
    .filter-items .filter-item-label{   line-height: 1.2}

    .filter-button{ display: none}

     .filter .filter-item, .filter .filter-item.buttons { margin: 0; margin-right: 15px;  box-sizing: border-box;
         padding: 5px;background: #3e5a8014;border-radius: 30px;}
    .filter-item.buttons .button {   box-shadow: unset}
    .filter  input, .filter select{ height: 32px !important;}

    .order-header-block.block-title{ flex-basis: auto; flex-grow: 1; margin-bottom: 0}
    .order-header-block.block-action{ order: 2; margin-top: 12px; flex-basis: 100%; }
    .order-header-block.block-status{ flex: unset;  order: 1}

    .order-header-item{ margin-right: 30px;}
    .order-header-item:last-child{ margin-right: 0}
    .order-header-item-name{ font-size: .9em;margin-right: 10px;}

    .block-action .order-header-item{ margin-right: 10px;}

    .order-form-row{ }
    .orders-list .list-item-field{ margin-bottom: 0}
    .orders-list .list-item-field.order-item-code{z-index: 100}
    .orders-list .list-item-field.order-item-type{ min-width: 120px;}
    .orders-list .list-item-field a:hover{ text-decoration: underline }

    .order-form-col{ display: flex; align-items: center; justify-content: flex-start}
    .order-form-col.field-phone{max-width: 240px;}
    .order-form-col.field-code{max-width: 320px;}

    .order-form-col.w1100-20{flex-basis: 20%}
    .order-form-col.w1100-30{flex-basis: 30%}

    .order-field-label{  margin-bottom: 0px; padding-right: 10px; padding-left: 0; font-size: 14px;}
    .order-field-input input, .order-field-input div{ font-size: 15px; padding: 0 20px}

    .pos-items{ padding:  20px;}
    .pos-items .list-item-cont{ padding: 12px 20px }

    .pos-items .list-item-field{margin: 0 5px;}
    .pos-items .pos-item-tracknum{ flex: 1}
    .pos-items .pos-item-summ{  width: 160px;}
    .pos-items .pos-item-pack{  width: 160px;}
    .pos-items .pos-item-check{  width: 140px;}
    .pos-items .pos-item-comment{position: relative; width: 60px; cursor: pointer}
    .pos-items .pos-item-comment .list-item-value{ margin: auto}
    .pos-items .button { padding: 0; min-width: 38px; height: 38px; background-position: center}

    .consignee-block .input-wrapper{width: auto; flex-basis: 60%}
    .shipment-items .list-item-cont{ flex-direction: column; padding: 0; overflow: hidden;}
    .shipment-items .list-item-inner{gap: 1px}
    .shipment-items .list-item-field{ flex-direction: column; margin: 0; align-items: stretch}
    .shipment-items .list-item-field .list-item-title{ flex-basis: auto; line-height: 1.2; padding: 0 3px; text-align: center; justify-content: center;
        font-size: 12px; height: 50px; display: flex; align-items: center}
    .shipment-items .list-item-field .list-item-value{ flex-basis: auto; line-height: 1; padding: 0; text-align: center; padding: 10px 0; font-size: 14px; }
    .shipment-items .list-item-actions{padding: 15px; justify-content: flex-end; gap: 10px;}

    .pay-chek .upload-file-preview{ display: flex; justify-content: space-between}
    .pay-chek .upload-file-actions{ border: none;}
    .pay-chek .upload-file-actions > *{ margin: 0 10px;}
    .pay-chek .upload-file-name { max-width: 50%}


    }


@media only screen and (min-width: 1280px) {

    .section-body {padding: 40px 30px}

    .order-header-block.block-status{ order: 3}
    .order-header-block.block-action{ order: 1; margin-top: 12px; flex-basis: auto; }
    .order-header-block.block-action{   margin-top: 12px; margin-top: 0 }
    .order-header-block.block-status{margin: 0 }

    .orders-list .list-item-inner .list-item-row .list-item-field{ margin-right: 30px}

    .shipment-items .list-item-field .list-item-title{ font-size: 13px; padding: 0 5px;}
    .shipment-items .list-item-field .list-item-value{font-size:16px;}
    .shipment-items .list-item-field.shipment-item-itog{ min-width: 70px}
}