@import "jquery-ui.css";
@import "popup.css";
@import "changeall.css";
@import "dropdown.css";
@import "table.css?v=7";
@import "datetimepicker.css";
@import "periodpicker.css";

@import "phone.css";

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
    font-size: 100%;
    font-family: inherit;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: 400;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    /*color: #263352;*/
}

body {
    background-color: #282923FF;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: scroll;
}

body, input, textarea, button {
    font-size: 13px;
    font-family: Arial, sans-serif;
}

button, input[type="button"] {
    text-shadow: 0 0 1px #000;
}

h2 {
    font-size: 20px;
    margin-bottom: 5px;
    opacity: 0.7;
}

/*CASTOM INPUTS*/
input[type="text"], input[type="number"], input[type="password"] {
    background-color: #fff;
    color: #000;
    display: inline-block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
    border-radius: 2px;
    padding: 0 5px;
    float: left;
    position: relative;
}

.dd_dubl{
    width: 19px;
    height: 19px;
    border-radius: 50%;
    margin: 3px auto 3px !important;
    background-color: rgba(255, 0, 0, 0.2);
    font-size: 12px;
    max-width: 19px;
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center !important;
    padding: 3px 0px !important;
}
.dd_dubl:empty {
    display: none;
}

/*ERRORS MESSAGE*/
input.err, textarea.err {
    border-color: #C50202 #FF0202 #FF0202 !important;
    background-color: rgba(197, 2, 2, 0.12);
}

div span.error {
    display: inline-block;
    width: 100%;
    padding-left: 10px;
    background: rgba(209, 36, 10, 0.7);
    box-sizing: border-box;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    margin-bottom: 7px;
}
div span.error.ageerrors{
    margin-bottom: 0px;
    margin-top: 7px;
}

.tderroabs .error {
    position: absolute;
    top: -24px;
}

span.error:after {
    display: block;
    position: absolute;
    content: "";
    bottom: -6px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(209, 36, 10, 0.7);
}

span.error.ageerrors:after{
    display: block;
    position: absolute;
    content: "";
    top: -6px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(209, 36, 10, 0.7);
    right: 50%;
    transform: rotate(180deg);
}

.class12px li{
    padding: 1px 12px !important;
}

.trig.err{
    border-color: #C50202 #FF0202 #FF0202 !important;
    background-color: rgba(197, 2, 2, 0.12);
}

/*ERRORS MESSAGE*/
input:disabled, textarea:disabled {
    border: none;
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

input[type="button"]:disabled {
    display: none !important;
}

textarea {
    background-color: #fff;
    color: #000;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.6);
    width: 100%;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
    border-radius: 2px;
    padding: 0 5px;
    min-height: 30px;
    resize: none;
    position: relative;
    float: left;
    transition: height 0.2s;
}

/*BUTTONS*/
button, .button, .btn {
    display: inline-block;
    position: relative;
    background-color: #2b2726;
    color: #fff;
    line-height: 20px;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 16px;
    margin: 0;
    border: none;
}

button:hover, .button:hover {
    cursor: pointer;
}

div.wrap {
    display: block;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    width: 1320px;
    position: relative;
    z-index: 1;
    /*left: 100%;*/
    translate: 100vw;
    transition: 600ms translate ease-in-out;
}

div.wrap.ready {
    /*animation-duration: 1.00s;*/
    /*animation-name: slidemodal;*/
    /*animation-timing-function: ease-in-out;*/
    /*left: 0;*/
    translate: 0;
}

div.wrap.slidereload {
    /*animation-duration: .55s;*/
    /*animation-name: slidereload;*/
    /*animation-timing-function: ease-in-out;*/
    /*left: -100%;*/
    translate: -100vw;
}

@keyframes slidemodal {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}

@keyframes slidereload {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

header {
    display: block;
    position: relative;
    /*margin: 0 -10px 0 -10px;*/
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    background-color: #4f4a49;
    height: 40px;
    z-index: 22;
    margin: 0px;
}

/* header:before, header:after {
	display: block;
	position: absolute;
	content: "";
	border-style: solid;
	border-color: transparent;
	bottom: -10px;
}
header:before {
	border-width: 0 10px 10px 0;
	border-right-color: #222;
	left: 0;
} */
header:after {
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
}

header > nav {
    display: inline-block;
    width: 100%;
    height: inherit;
}

header > nav ul {
    position: relative;
    float: left;
    width: 100%;
    list-style: none;
    height: inherit;
}

header > nav > ul li {
    float: left;
    position: relative;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    z-index: 1;
    color: #fff4d6;
    perspective: 1000px;
    transition: all .25s ease-in-out;
}

header > nav > ul li.fright {
    border-left: solid 1px rgba(0, 0, 0, 0.2);
    border-right: none;
    float: right;
}

header > nav > ul li.fright > ul {
    width: 142px;
}

header > nav > ul li#workTime {
    display: block;
    width: 100%;
    height: 120px;
    position: relative;
    text-align: center;
    padding: 10px 0;
}

header > nav > ul li#workTime > span:before {
    content: 'Вы в работе';
    display: block;
    position: relative;
    font-size: 18px;
    font-weight: bold;
}

header > nav > ul li#workTime:after {
    content: '';
    display: inline-block;
    border: solid 30px transparent;
    border-left: solid 40px #fff4d6;
    top: 10px;
    margin-left: 30px;
    position: relative;
    animation-name: workTimeActive;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes workTimeActive {
    0% {
        border-left: solid 40px #fff4d6;
    }
    100% {
        border-left: solid 40px #c0c0c0;
    }
}

header > nav > ul li#workTime[data-pause] > span:before {
    content: 'Вы на паузе';
}

header > nav > ul li#workTime[data-pause]:before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 62px;
    background-color: #3e3a3a;
    z-index: 1;
    top: 30px;
    margin-left: -9px;
}

header > nav > ul li#workTime[data-pause]:after {
    width: 60px;
    height: 60px;
    background-color: #fff4d6;
    border: none;
    margin: 0;
    animation-name: workTimePause;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes workTimePause {
    0% {
        background-color: #fff4d6;
    }
    100% {
        background-color: #c0c0c0;
    }
}

header > nav a {
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 15px;
    text-decoration: none;
    color: inherit;
    line-height: 1;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.05em;
    background: transparent;
    transition: all .25s ease-in-out;
}

header > nav > ul > li:hover > a, header > nav > ul > li.hover > a {
    color: #fff4d6;
    background-color: #3e3a3a;
}

header > nav > ul > li > ul {
    position: absolute;
    left: -1px;
    z-index: 1;
    width: 200px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #3e3a3a;
    overflow: hidden;
    transform-origin: 50% 0;
}

header > nav > ul > li:hover > ul, div.menu > nav > ul > li.hover > ul {
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
    animation-duration: .3s;
    animation-name: swingdown;
    animation-timing-function: ease;
}

header > nav > ul > li:first-child {
    border-left: 1px solid transparent;
}

header > nav > ul > li:hover, div.menu > nav > ul > li.hover {
    cursor: pointer;
    background-color: #3e3a3a;
    /*color: white;*/
}

header > nav > ul > li > ul > li {
    border-bottom: solid 1px transparent;
    border-top: solid 1px transparent;
    float: none;
}

header > nav > ul > li > ul > li > a {
    color: #ddd;
    font-weight: 400;
    padding: 13px 20px 13px 15px;
}

header > nav > ul > li > ul > li > input {
    display: block;
    float: none;
    width: 100%;
}

header > nav > ul > li > ul > li:hover {
    cursor: pointer;
}

header > nav > ul > li > ul > li:hover > a {
    color: rgba(0, 223, 252, 1);
}

/*//////////////////////////*/
@keyframes swingdown {
    0% {
        top: 100%;
        opacity: .99999;
        transform: rotateX(90deg);
    }
    100% {
        top: 100%;
        transform: rotateX(0);
        animation-timing-function: ease-in-out;
    }
}

@keyframes swingup {
    0% {
        top: 100%;
        transform: rotateX(0);
        animation-timing-function: ease-in-out;
    }
    100% {
        top: 100%;
        opacity: .99999;
        transform: rotateX(90deg);
    }
}


@keyframes swingright {
    0% {
        top: -1px;
        left: 100%;
        transform: rotateY(0);
        animation-timing-function: ease-in-out;
    }
    100% {
        top: -1px;
        left: 100%;
        opacity: .99999;
        transform: rotateY(90deg);
    }
}

@keyframes swingleft {
    0% {
        top: -1px;
        left: 100%;
        opacity: .99999;
        transform: rotateY(90deg);
    }
    100% {
        top: -1px;
        left: 100%;
        transform: rotateY(0);
        animation-timing-function: ease-in-out;
    }
}

/*////////////////////*/
div.contents {
    display: inline-block;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    min-height: calc(100% - 88px);
}

div.contents.error {
    height: calc(100% - 88px);
}

div.contents > div#access_denied {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    background-color: #222;
}

div.contents > div#access_denied > div#access_msg {
    display: block;
    width: 100%;
    height: 70px;
    position: absolute;
    top: calc(50% - 40px);
    text-align: center;
    font-size: 52px;
    letter-spacing: -.04em;
    color: rgba(0, 0, 0, 0.6);
    font-weight: bold;
}

div.main {
    display: inline-block;
    width: 100%;
    height: inherit;
}

div.main.records {
    display: block;
    overflow-y: auto;
    padding: 0;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
}

footer {
    display: block;
    background-color: #4f4a49;
    height: 48px;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    position: relative;
}

footer > time {
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    left: 10px;
    top: calc(50% - 5px);
    color: #fff4d6;
    font-size: 10px;
    font-weight: bold;
}

/*MENU*/
div.menu {
    display: block;
    position: relative;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    background-color: #4f4a49;
    height: 40px;
    width: 100%;
    z-index: 11;
}

div.menu > nav {
    display: inline-block;
    width: 100%;
    height: inherit;
}

div.menu > nav ul {
    position: relative;
    float: left;
    width: 100%;
    list-style: none;
}

div.menu > nav > ul li {
    float: left;
    position: relative;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    z-index: 1;
    color: #fff4d6;
    transition: all .25s ease-in-out;
}

div.menu > nav > ul li.dropdown {
    padding: 7px 10px 7px 10px;
}

div.menu > nav a {
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 26px;
    text-decoration: none;
    color: inherit;
    line-height: 1;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.05em;
    text-align: center;
    background: transparent;
    transition: all .25s ease-in-out;
}

div.menu > nav a:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    width: 100%;
    bottom: 3px;
    left: 0;
    font-size: 7pt;
    text-align: center;
}

div.menu > nav > ul li.hover > a,
div.menu > nav > ul li:hover > a {
    color: #fff4d6;
    background-color: #3e3a3a;
}

div.menu.shotitem > nav a {
    letter-spacing: -.06em;
    padding: 13px 13px;
}

div.menu > nav > ul > li > ul,
div.menu > nav > ul > li > ul > li > ul {
    position: absolute;
    width: auto;
    min-width: 250px;
    left: -1px;
    top: -10000px;
    z-index: 1;
    padding: 0;
    background-color: #3e3a3a;

    transform-origin: 50% 0;
    /*animation-duration: .3s;*/
    /*animation-name: swingup;*/
    animation-timing-function: ease;
}

div.menu > nav > ul > li > ul > li > ul {
    transform-origin: 0 50%;
    animation-duration: .3s;
    animation-name: swingright;
    animation-timing-function: ease;
}

div.menu > nav > ul > li.hover > ul {
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
    top: 100%;
    animation-duration: .3s;
    animation-name: swingdown;
    animation-timing-function: ease;
}

div.menu > nav > ul > li > ul > li:hover > ul {
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
    top: -1px;
    left: 100%;
    padding-left: 1px;
    animation-duration: .3s;
    animation-name: swingleft;
    animation-timing-function: ease;
}


div.menu > nav > ul li.current:after,
div.menu > nav > ul li[data-type="utmf"]:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #3e3a3a;
    bottom: -8px;
    content: "";
    display: block;
    height: 0;
    left: 47%;
    position: absolute;
    width: 0;
}

div.menu > nav > ul > li:first-child {
    border-left: 1px solid transparent;
}

div.menu > nav > ul > li.hover, div.menu > nav > ul > li:hover {
    cursor: pointer;
}

div.menu > nav > ul > li > ul > li,
div.menu > nav > ul > li > ul > li > ul > li {
    float: none;
}

div.menu > nav > ul > li > ul > li a {
    color: #ddd;
    font-weight: 400;
    padding: 13px 20px 13px 15px;
    text-align: left;
}

div.menu > nav > ul > li > ul > li > input {
    display: block;
    float: none;
    width: 100%;
}

div.menu > nav > ul > li > ul li:hover {
    cursor: pointer;
    z-index: 2;
}

div.menu > nav > ul > li > ul li:hover > a {
    color: rgba(0, 223, 252, 1);
    text-decoration: underline;
}

div.menu > nav > ul > li[data-column="2"] > ul {
    min-width: 500px;
}

div.menu > nav > ul > li[data-column="3"] > ul {
    min-width: 750px;
}

div.menu > nav > ul > li[data-column="4"] > ul {
    min-width: 1000px;
}

div.menu > nav > ul > li[data-column="2"] > ul > li,
div.menu > nav > ul > li[data-column="3"] > ul > li,
div.menu > nav > ul > li[data-column="4"] > ul > li {
    min-width: 250px;
    float: left;
}

/*//////////////////////////*/
div.login {
    background-image: linear-gradient(to bottom, rgba(248, 248, 249, 1) 23%, rgba(230, 231, 232, 1) 100%);
    border: solid 1px #cfcfcf;
    display: block;
    height: 210px;
    padding: 24px 74px;
    width: 360px;
    position: fixed;
    margin: -105px auto 24% -180px;
    left: 50%;
    top: 50%;
}

div.login div {
    display: inline-block;
    margin: 15px 0 0;
    position: relative;
    width: 100%;
}

div.login div input {
    color: #000 !important;
    padding: 0 0 0 3px;
    width: 100%;
}

div.login form div span {
    display: block;
    float: left;
    height: 16px;
    left: -22px;
    position: absolute;
    top: 4px;
    width: 16px;
    /*background-image: url(../images/elements.png);*/
    /*background-repeat: no-repeat;*/
}

div.login button {
    width: 100%;
}

div.login form div:nth-child(2) span {
    background-position: -16px -65px;
}

div.login form div:nth-child(3) span {
    background-position: -16px -82px;
}

div.wrap.login_page div.contents {
    box-shadow: none;
    display: inline-block;
    height: 100%;
    padding: 0;
    background-color: transparent;
}

h4.head_table {
    color: #333;
    float: left;
    font-size: 24px;
}

div.menu + div.main {
    margin-top: 42px;
}
.wrapper_product{
    margin-top: -32px;
}

div#hntemplates, div.hntemplates {
    display: none !important;
}

.lntable .line > div span[data-action="fullinfo"],
.lntable .line > td span[data-action="fullinfo"] {
    background-image: url(../images/edit.png);
    background-repeat: no-repeat;
    background-position: 50%;
    display: block;
    height: 100%;
    width: 100%;
    min-height: 19px;
    min-width: 19px;
}

.lntable .line > div span[data-action="fullview"],
.lntable .line > td span[data-action="fullview"] {
    background-image: url(../images/search.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 90%;
    display: block;
    height: 100%;
    width: 100%;
    min-height: 19px;
    min-width: 19px;
}

div.inp {
    display: inline-block;
    font-size: 14px;
    position: relative;
    text-align: center;
    padding: 0;
    overflow: hidden;
    height: 24px;
    width: 24px;
    cursor: pointer;
    margin-top: 3px;
}
.listshow{
    max-height: 31px;
    overflow: auto;
    text-align: justify;
    word-break: normal;
    width: 99.9%;
    padding-right: 35px;
    font-size: 13px;
    padding-left: 0px;
}
.inputmyselect .selectresult{
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
    min-height: 32px;
}
.selectresult img {
    margin-right: 10px;
    position: absolute;
    right: 0px;
}

div.inp > input[type="checkbox"],
div.inp > input[type="radio"] {
    display: inline-block;
    height: inherit;
    opacity: 0;
    position: relative;
    width: inherit;
    z-index: 10;
}

div.inp > input[type="checkbox"] + label,
div.inp > input[type="radio"] + label {
    display: inline;
    position: relative;
    font-size: inherit;
    line-height: inherit;
    height: inherit;
}

div.inp > input[type="checkbox"] + label:after, div.inp > input[type="checkbox"] + label:before,
div.inp > input[type="radio"] + label:after, div.inp > input[type="radio"] + label:before {
    height: inherit;
    position: absolute;
    width: 24px;
    font-size: 24px;
    line-height: 24px;
    z-index: 5;
    perspective: 1000px;
    transition: all .25s ease-in-out;
    color: #fff4d6;
    background: #4f4a49;
    border-radius: 3px;
}


div.inp > input[type="checkbox"] + label:before,
div.inp > input[type="radio"] + label:before {
    content: attr(data-on);
    left: -48px;
    background-color: rgba(118, 186, 0, 1);
    color: #444;
}

div.inp > input[type="checkbox"] + label:after,
div.inp > input[type="radio"] + label:after {
    content: attr(data-off);
    left: -24px;
    background-color: #555;
    color: #fff4d6;
}

div.inp > input[type="checkbox"]:checked + label:before,
div.inp > input[type="radio"]:checked + label:before {
    left: -24px;
}

div.inp > input[type="checkbox"]:checked + label:after,
div.inp > input[type="radio"]:checked + label:after {
    left: 0 !important;
}

div.inp.medium {
    width: 100px;
}

div.inp.medium > input[type="checkbox"] + label:after,
div.inp.medium > input[type="checkbox"] + label:before {
    width: 100px;
}

div.inp.medium > input[type="checkbox"] + label:before {
    left: -200px;
}

div.inp.medium > input[type="checkbox"] + label:after {
    left: -100px;
}

div.inp.medium > input[type="checkbox"]:checked + label:before {
    left: -100px;
}

div.inp.big {
    width: 200px;
}

div.inp.big > input[type="checkbox"] + label:after,
div.inp.big > input[type="checkbox"] + label:before {
    width: 200px;
}

div.inp.big > input[type="checkbox"] + label:before {
    left: -400px;
}

div.inp.big > input[type="checkbox"] + label:after {
    left: -200px;
}

div.inp.big > input[type="checkbox"]:checked + label:before {
    left: -200px;
}

div.inp.big > input[type="checkbox"] + label:after, div.inp.big > input[type="checkbox"] + label:before,
div.inp.big > input[type="radio"] + label:after, div.inp.big > input[type="radio"] + label:before {
    font-size: 18px;
}

div.inp > input[type="hidden"]:disabled + input[type="radio"] + label:before,
div.inp > input[type="hidden"]:disabled + input[type="radio"] + label:after,
div.inp > input[type="hidden"]:disabled + input[type="checkbox"] + label:before,
div.inp > input[type="hidden"]:disabled + input[type="checkbox"] + label:after {
    color: #444;
    background: transparent;
}

div.trbl > input[type="checkbox"] + label:before {
    background-color: #555;
    color: #fff4d6;
}

div.trbl > input[type="checkbox"] + label:after {
    background-color: rgba(118, 186, 0, 1);
    color: #444;
}

div.pager {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}

div.pager > div[data-action] {
    display: none;
    width: calc(50% - 5px);
    height: 40px;
    margin-top: 10px;
    background-color: #4f4a49;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all .25s ease-in-out;
}

div.pager > div[data-page] {
    display: inline-block;
    width: auto;
    height: 28px;
    margin-top: 20px;
    margin-right: 5px;
    padding: 0 5px;
    line-height: 28px;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background-color: #4f4a49;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: all .25s ease-in-out;
}

div.pager > div[data-page].active {
    background-color: #3e3a3a;
    color: rgba(255, 0, 0, 0.8);
}

div.pager > div[data-action="prev"] {
    float: left;
    background-image: url(../images/prevmini.png);
}

div.pager > div[data-action="next"] {
    float: right;
    background-image: url(../images/nextmini.png);
}

div.pager > div[data-action]:hover {
    cursor: pointer;
    background-color: #3e3a3a;
}

div.lastcomm,
div.commlist {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
}

div.commlist {
    padding: 3px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

div.commlist.comm_main {
    background-color: rgba(255, 0, 0, 0.2);
}

div.commlist.comm_main:after {
    content: 'Из основной CRM';
    display: block;
    position: absolute;
    top: 0;
    right: 70px;
    font-weight: bold;
}

div.commlist:last-child {
    border-bottom: none;
}

div.lastcomm div.text,
div.commlist div.text {
    display: inline-block;
    width: 100%;
    text-align: left;
}

div.lastcomm p,
div.commlist p {
    display: inline-block;
    position: relative;
    width: 100%;
}

div.lastcomm p span:first-child,
div.commlist p span:first-child {
    display: block;
    float: left;
    color: rgba(79, 74, 73, 0.7);
    font-size: 12px;
}

div.lastcomm p span:nth-child(2),
div.commlist p span:nth-child(2) {
    display: block;
    float: right;
    color: rgba(79, 74, 73, 0.7);
    font-size: 10px;
}

div.commlist p span:nth-child(3) {
    position: absolute;
    top: 10px;
    right: 0;
    background-image: url(../images/remove.png);
    background-size: 100%;
    width: 12px;
    height: 12px;
    cursor: pointer;
    opacity: 0.6;
    transition: all .25s ease-in-out;
}

div.commlist p span:nth-child(3):hover {
    opacity: 1;
}

.tabs {
    display: inline-block;
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
}

.tabs.outshadow {
    box-shadow: none;
}

.tabs ul.tabs {
    display: block;
    width: 100%;
    height: 40px;
    list-style: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    background-color: #4f4a49;
}

.tabs ul.tabs > li {
    display: block;
    position: relative;
    float: left;
    padding: 12px 26px;
    color: #fff4d6;
    height: inherit;
    font-size: 14px;
    font-weight: bold;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    letter-spacing: -.05em;
    text-shadow: 0 0 2px #000;
    cursor: pointer;
    box-sizing: border-box;
    transition: all .25s ease-in-out;
}

.tabs ul.tabs > li.active {
    background-color: #3e3a3a;
}

.tabs ul.tabs > li.active:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #3e3a3a;
    bottom: -8px;
    content: "";
    display: block;
    height: 0;
    left: calc(50% - 4px);
    position: absolute;
    width: 0;
    z-index: 2;
}

.tabs ul.tabs > li.active:after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid rgba(50, 46, 46, 1);
    bottom: -10px;
    content: "";
    display: block;
    height: 0;
    left: calc(50% - 4.5px);
    position: absolute;
    width: 0;
    z-index: 1;
}

.tabs div.tab {
    display: none;
    float: left;
    width: 100%;
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow-x: visible;
    overflow-y: auto;
}

iframe#filesframe {
    display: none;
}

div#wasteTime,
div#wasteInfo {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(204, 255, 204, 1);
    padding: 20px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    z-index: 99999999;
    animation-name: wasteTime;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes wasteTime {
    0% {
        box-shadow: 0 1px 40px rgba(79, 74, 73, 0.8);
    }
    100% {
        box-shadow: 0 1px 40px rgba(255, 244, 214, 0.8);
    }
}

div#workTimePause {
    background: rgba(0, 0, 0, 0.7);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    text-align: center;
    cursor: pointer;
}

div#workTimePause > span {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #fff4d6;
    top: 20%;
    position: relative;
}

div#workTimePause > div.pic {
    display: block;
    width: 156px;
    height: 120px;
    position: relative;
    top: 30%;
    left: calc(50% - 78px);
}

div#workTimePause > div.pic:before,
div#workTimePause > div.pic:after {
    content: '';
    display: block;
    width: 54px;
    height: 120px;
    background-color: #fff4d6;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: workTimePause;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

div#workTimePause > div.pic:after {
    left: unset;
    right: 0;
}

div#workTimePause > div.timer {
    display: none;
    position: relative;
    top: 42%;
    font-weight: bold;
    color: #fff4d6;
}

div#workTimePause > div.timer:before {
    content: 'Оставшееся время на перерыв:';
    display: block;
    font-size: 32px;
}

div#workTimePause > div.timer > span {
    font-weight: bold;
    display: inline-block;
    position: relative;
    font-size: 72px;
}

div#workTimePause > div.timer > span:first-child {
    padding-right: 12px;
}

div#workTimePause > div.timer > span:nth-child(2) {
    padding-left: 12px;
}

div#workTimePause > div.timer > span:first-child:after {
    content: ':';
    display: block;
    position: absolute;
    top: -5px;
    right: -14px;
    animation-name: workTimePauseTime;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes workTimePauseTime {
    0% {
        color: #fff4d6;
    }
    100% {
        color: transparent;
    }
}

*[data-currency^="{{"], *[data-id^="{{"], *[data-key^="{{"], *[data-mode^="{{"], *[data-item_id^="{{"], *[data-page^="{{"] {
    max-width: 100dvh;
    position: relative;
    /*display: none !important;*/
}

*[data-currency^="{{"]::after, *[data-id^="{{"]::after, *[data-key^="{{"]::after, *[data-mode^="{{"]::after, *[data-item_id^="{{"]::after, *[data-page^="{{"]::after {
    content: '';
    font-size: 2rem;
    font-weight: 900;
    place-content: center;
    place-items: center;
    position: absolute;
    display: grid;
    inset: 0;
    background-color: #fff;
    z-index: 10;
}

*[data-currency^="{{"]::before, *[data-id^="{{"]::before, *[data-key^="{{"]::before, *[data-mode^="{{"]::before, *[data-item_id^="{{"]::before, *[data-page^="{{"]::before {
    content: '◌';
    font-weight: 900;
    place-content: center;
    place-items: center;
    position: absolute;
    display: grid;
    aspect-ratio: 1/1;
    font-size: 2rem;
    line-height: 2rem;
    width: 2rem;
    height: 2rem;
    inset: 0;
    z-index: 20;
    transform-origin: center;
    animation: text-rotating 5s linear infinite;
}

@keyframes text-rotating {
    100% {
        transform: rotate(360deg);
    }
}

.wrapper_apanel{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.wrapper_apanel .divl{
    font-size: 24px;
    font-weight: bold;
}
.divr.menu{
    width: 115px;
    height: 40px;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 140, 240, 1) 1%, rgba(0, 109, 203, 1) 99%);
    color: white;
    border-radius: 3px;
}

.divr.menu > nav > ul li{
    border-right:  0px;
}
.divr.menu > nav > ul > li a:hover {
    background: linear-gradient(to bottom, rgba(0, 140, 240, 1) 1%, rgba(0, 109, 203, 1) 99%);
    color: white;
}

.menu.report{
    height: 80px;
}

.divr .a{
    color: white;
}
.blacklist_ip,.blacklist_phone,.blacklist_words{
    height: 150px;
}
#sms_profile th,#sms_profilebalance th span b{
    font-weight: bold;
}

.datashema{
    color: white !important;
    opacity: 0.7;
    border-radius: 4px;
    /*margin-right: 1px;*/
    padding-left: 2px;
    padding-right: 2px;
}
.datashema.active{
    opacity: 1;
}
.shema{
    border-radius: 4px;

    background: rgb(117, 112, 111) !important;
    padding: 10px 13px 10px 13px !important;
    margin: 3px 0px 3px 0px !important;
    font-size: 15px !important;
    font-weight: 100 !important;
}
.crmmain.shema.active{
    border-radius: 4px;
    background: rgb(222, 80, 46) !important;
    padding: 10px !important;
    margin: 4px;
}
.crmcold.shema.active{
    border-radius: 4px;
    padding: 10px !important;
    margin: 4px;
    border-radius: 4px;
    background: rgb(18, 78, 199) !important;
}

.psevdoico[data-show="0"] {
    display: contents;
}
.psevdoico[data-show="1"] {
    display: none;
}
.setpsevdo{
    position: absolute;
    right: 0px;
    cursor: pointer;
    top: -2px;
    display: none;
}
[data-status="6"].setpsevdo,
[data-status="66"].setpsevdo {
    display: block; /* Или любой стиль, который вам нужен */
}
.trpsevdo[data-psevdophone="0"] {
    display: none !important;
}

.result_ttn{
    background: linear-gradient(to bottom, rgba(255, 100, 0, 1) 1%, rgba(255, 0, 0, 1) 99%);
    right: 0;
    text-align: center;
    font-size: 14px;
    padding: 3px 15px;
    border-radius: 5px 0 0 5px;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.4) inset;
    z-index: 20;
    position: fixed;
    bottom: 50px;
}
.result_ttn.hide{
    display: none;
}
.result_ttn.green{
    background: green;
    color: white;
}
.result_ttn.red{
    background: red;
    color: white;
}

.spinner {
    position: absolute;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 5px solid;
    border-color: #dbdcef;
    border-right-color: #008cf0;
    animation: spinner-d3wgkg 1s infinite linear;
}

.spinner.hide {
    display: none;
}

.showinfo_not_time{
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 22;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.showinfo_not_time .wrapper_info{
    background: white;
    padding: 10px;
    width: 255px;
    height: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}
.showinfo_not_time .wrapper_info.ok{
    background: darkgreen;
    color: white;
}
.showinfo_not_time .wrapper_info.error{
    background: darkred;
    color: white;
}

.showinfo_not_time .wrapper_info .close_info{
    position: absolute;
    top: -10px;
    left: -8px;
    cursor: pointer;
    background-image: url(/images/cross.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 22px;
    height: 22px;
}
.psevdophone-textarea{
    overflow: auto;
    resize: auto;
}
.psevdoico{

}
input[name="phone_psevdo"][readonly] {
    border: none;
    background-color: transparent;
    color: inherit; /* Наследует цвет текста */
    font-size: inherit; /* Наследует размер шрифта */
    padding: 0; /* Убирает внутренние отступы */
    outline: none; /* Убирает обводку при фокусе */
    pointer-events: none; /* Отключает взаимодействие с полем */
    padding-left: 10px;
    border: 1px solid rgb(0 0 0 / 60%);
}
.icosave{
    color: #26d82f;
    font-size: 19px;
    margin-right: 8px;
    margin-top: 1px;
}
.icosave.hide{
    display: none !important;
}
.fa-solid.fa-floppy-disk.icosave.hide{
    display: block;
}


.orangText{
    color: orange;
    text-align: center !important;
}
.greenText{
    color: green;
    text-align: center !important;
}
.redText{
    color: red;
    text-align: center !important;
}
.tablereport{
    border-collapse: collapse;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);

}
.tablereport table, .tablereport th, .tablereport td {
    border: 1px solid #b5b5b5 !important;
}

.tablereport th, .tablereport td {
    padding: 4px; /* Опционально: отступ внутри ячеек */
    text-align: left; /* Выравнивание текста */
}
.grey-btn{
    margin-left: 10px !important;
    background: grey !important;
}
.transparent {
    opacity: 0.5; /* Делает элемент полупрозрачным */
    pointer-events: none; /* Отключает взаимодействие */
}

@keyframes spinner-d3wgkg {
    to {
        transform: rotate(1turn);
    }
}


.wrapper_modal_table{
    position: fixed;
    background: #000000b0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.crad_table_wraper{
    width: 80%;
    background: white;
    padding: 12px;
    height: 100%;
    max-height: 500px;
    overflow: auto;
    position: relative;
}
.crad_table_wraper .tablereport{
    width: 98%;
    margin-top: 35px;
}
.headtr td{
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.close_modal_filterff{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: red;
    background-image: url(/images/cross.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: 7px;
    position: absolute;
    top: 4px;
}

.modal_wrapper_ffreestr{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    background: #000000b3;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.modal_wrapper_ffreestr.hide{
     display: none !important;
}
.modal_wrapper_ffreestr .card_ffreestr{
    background: white;
    width: 100%;
    max-width: 1024px;
    height: 100%;
    max-height: 555px;
    padding: 23px;
    position: relative;
    overflow: auto;
}

#table_ffrr {
    display: table;
    height:auto;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
}

#table_ffrr td, #table_ffrr th {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-left: none;
    border-top: none;
    font-size: 13px;
    line-height: 2;
    height: 45px;
}


#table_ffrr tr:nth-child(even){background-color: #f9f9f9;;}

.tdffreestr{
    font-size: 13px !important;
    text-align: center;
}

.pagin_ff{
    margin-top: 11px;
}
.filterff{
    cursor: pointer;
}
.filter_ff{
    -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);

    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
    position: absolute;
    background: white;
    width: 100%;
    z-index: 9;
    left: 0;
    top: 54px;
}
.filter_ff.hiden_ff{
    display: none;
}
.selectff{
    cursor: pointer;
}
.activeff {
    background-color: #4f4a49;
    color: white;
    margin: 2px;
}
.grid.table{
    background-color: #0003 !important;
    /*border: -1px solid #0003 !important;*/
}
.ff-records{
    box-shadow: 0 1px 10px rgba(79, 74, 73, 0.8);
}
.textStep3{
    margin-bottom: 20px;
}
.boldB{
    font-weight: bold !important;
}
.step3td1{
    width: 60px;
    text-align: center !important;
}
.step3td2{

}
.step3td3{
    width: 50px;
    text-align: center !important;
}
.step3td4{
    width: 140px;
    text-align: center !important;
}
.step3td5{
    width: 170px;
    text-align: center !important;
}
.step3td6{
    width: 190px;
    text-align: center !important;
}
.step3td7{
    text-align: center !important;
}
.step3td8{
    width: 190px;
    text-align: center !important;
}

.tdffreestr a{
    color: black;
}
.tdff_head{
    font-weight: 600;
}
#infomodalbalance{
    position: fixed;
    top: 30px;
    position: fixed;
    background: linear-gradient(to bottom, rgba(255, 100, 0, 1) 1%, rgba(255, 0, 0, 1) 99%);
    right: 0;
    text-align: center;
    font-size: 10px;
    padding: 3px 15px;
    border-radius: 5px 0 0 5px;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.4) inset;
    z-index: 20;
    max-width: 240px;
    min-height: 80px;
    display: none;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}
.listrefus{
    width: 100% !important;
    z-index: 6 !important;
}
.errduble{
    color: red;
}
.errduble.hide{
    display: none;
}
.w125px{
    width: 125px !important;
    min-width: 125px;
    max-width: 125px;
}
.w220px{
    width: 220px !important;
    min-width: 220px;
    max-width: 220px;
}
li[data-id=""] {
    display: none !important;
}

.activetrg{
    height: 20px;
    width: 33px;
    top: -2px;
    position: relative;
}

.w90px{
    width: 90px;
}
.w160px{
    width: 163px;
}
.w350px{
    width:350px;
}
.w320px{
    width: 320px;
}
.hideselect{
    display: none;
}
.item_new_tupe_time{
    background: white;
    border: 2px solid #6c6c6c;
    border-radius: 3px;
    margin-left: 10px;
    margin-right: 10px;
}
.xdsoft_datetimepicker{
    margin-top: 4px;
    margin-left: -5px;
    border-radius: 5px;
}

.input-container {
    position: relative;
    display: inline-block;
}

.input-container input {
    padding-left: 35px; /* Отступ для иконки */
    height: 35px;
}

.input-container .fa-calendar-days {
    position: absolute;
    right: 10px;
    top: 57%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
    z-index: 999;
}
#datetimepicker{
    height: 20px !important;
    padding-top: 4px !important;
    padding-left: 4px !important;
}
#datetimepicker::placeholder {
    color: black;
    opacity: 1;
}
.cardexprot{
    position: relative;
}
.close_divmodalexport{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.close_divmodalexport img{
    width: 20px;
    height: 20px;
}
.nothover:hover > a{
    color: #fff4d6;
    background-color: rgba(0, 255, 50, 0.5) !important;
}
.nothover:hover{
    color: #fff4d6;
    background-color:rgba(0, 255, 50, 0.5) !important;
}
.calltovar{
    white-space: nowrap;
}

.sortdatatrg{
    position: absolute;
    top: calc(90% - 5px);
    right: calc(50% - 8px);
    cursor: pointer;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #3e3a3a;
    width: 14px;
    height: 8px;
}
.sortdata{
    cursor: pointer;
}

.sortdatatrg  {
    transition: transform 0.3s ease-in-out;
}

.sortdatatrg[data-sort="asc"]  {
    transform: rotate(180deg);
}

.sortdatatrg[data-sort=""]{
    display: none;
}
.exportreport{
    position: absolute !important;
    right: 0;
    padding: 6px;
    border-left: solid 1px rgba(0, 0, 0, 0.2);
    padding-left: 9px;
    cursor: pointer;
}
.waybillRet{
    position: absolute;
    right: 25px;
    top: 3px;
    z-index: 2;
    font-size: 19px;
    cursor: pointer;
    display: none;
}
.waybillRet[data-status="6"][data-ttn]:not([data-ttn=""]) {
    display: block;
}
.returnSpan{
    color: red;
    padding-left: 10px;
}
.returnSpan[data-returndoc=""]:not(:has(*)) {
    display: none !important;
}
.returnSpan[data-returndoc=""] {
    display: none;
}
.returnSpan:not([data-returndoc=""]) {
    display: block; /* или inline, если нужно */
}

.tab_group.hide{
    display: none;
}
.group_filter{
    width: 100%;
    padding: 2px;
}
.group_filter .title_group{
    width: 100%;
    text-align: left;
    padding: 5px 0 5px;
    position: relative;
    color: #ffffff;
    font-weight: 600;
}
.group_filter .title_group.opened .trig::before{
    border-bottom: 9px solid #ffffff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: none;
    top: -2px;

}
.group_filter  .title_group .trig{
    cursor: pointer;
    position: absolute !important;
    display: block;
    height: 25px !important;
    padding: 0 !important;
    position: absolute;
    right: -2px;
    width: 100% !important;
    z-index: 5;
    top: 0;
}
.group_filter  .title_group .trig:before {

    border-left: 8px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffff;
    content: " ";
    display: block;
    height: 0;
    margin: 9px 0 0 4px;
    position: absolute;
    right: 12px;
    width: 0;
}
.fa-rotate-left:before{
    font-size: 19px;
    content: "\f2ea";
    right: 4px !important;
    position: absolute;
    top: 0px;
}
.wrapper_product,
.wrapper_arhhive,
.wrapper_stocktakinglist,
.wrapper_storage{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wrapper_product .newtovar,
.wrapper_arhhive .new_arhive,
.wrapper_stocktakinglist .newinvent,
.wrapper_storage .newstorage{
    display: inline-block;
    position: relative;
    background: linear-gradient(to bottom, #008cf0 1%, #006dcb 99%);
    color: #fff;
    line-height: 1.5;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 16px;
    margin: 0;
    border: none;
    text-shadow: 0 0 1px #000;
    cursor: pointer;
    transition: .3s box-shadow ease-in-out;
}
.tr_time_1_1,.tr_time_1_2,.tr_time_1_3,
.tr_time_2_1,.tr_time_2_2,.tr_time_2_3,
.tr_time_3_1,.tr_time_3_2,.tr_time_3_3,
.tr_time_4_1,.tr_time_4_2,.tr_time_4_3,
.tr_time_5_1,.tr_time_5_2,.tr_time_5_3{
    display: flex;
    width: 50px;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
}
.timer_3_1_check,.timer_3_2_check{
    margin-right: 10px;
}
.timer_3_2_1_vlaue,.timer_3_2_2_vlaue,.timer_3_2_3_vlaue{
    margin-right: 5px;
    margin-left: 5px;
}
.modal_prixod,.modal_inventor,.modal_storages{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    z-index: 9;
    background: #000000a3;
    justify-content: center;
    align-items: center;
}
.modal_prixod.hide, .modal_inventor.hide, .modal_storages.hide{
    display: none;
}
.wrap_card{
    background: white;
    width: 90vw;
    height: 70vh;
}


.selectdiv .trig{
    cursor: pointer;
    display: block;
    height: 25px !important;
    padding: 0 !important;
    position: absolute;
    right: 0;
    width: 30px !important;
    z-index: 5;
}
.selectdiv .trig:before{
    border-left: 8px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #4d4d4d;
    content: " ";
    display: block;
    height: 0;
    margin: 9px 0 0 4px;
    position: absolute;
    right: 12px;
    width: 0;
}
.selectdataul{
    position: absolute;
    background: white;
    width: 100%;
    top: 26px;
    z-index: 99;
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}
.selectdataul.hide{
    display: none;
}
.selec_ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.prodopen[data-prod="1"]{
    display: none;
}
.prodarhive[data-prod="0"]{
    display: none;
}