/* MAIN css */
.clear { clear:both;}
a, a:hover, :hover { -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out;}
BODY { position:relative; margin:0px; padding:0px;}
BODY, HTML { overflow-x: hidde; font-family: 'Poppins', sans-serif; font-weight:200; font-size:14px; letter-spacing:1.5px;}
FORM { display:flex;}


/* USEFULL css */
.metric-row-10 { height:10vh;}
.metric-row-20 { height:20vh;}
.metric-row-30 { height:30vh;}
.metric-row-40 { height:40vh;}
.metric-row-50 { height:50vh;}

/* GLOBAL css */
.content { padding:0px 0px 0px 350px;}
.content .inner { padding:60px;}

.global-cell-link { position:relative; display:block; margin:0px 15px 15px 15px; padding:30px; background:#fff; border-radius:4px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1); text-decoration:none;}
.global-cell-link:after { content:"+"; position:absolute; top:0px; right:0px; width:60px; height:100%; color:#fff; font-size:30px; line-height:80px; background:#e91d25; border-radius:0px 4px 4px 0px; text-align:center;}
.global-cell-link SPAN { display:block; color:#555; font-size:12px; font-weight:400;}
.global-cell-link.disactive { background:#ddd;}
.global-cell-link.disactive SPAN { color:#ccc;}
.global-cell-link.disactive:after { background:#ccc; color:#ddd;}

.global-cell { display:block; margin:0px 15px 15px 15px; padding:30px; background:#fff; border-radius:4px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1);}
.global-cell .odd { display:block; width:100%; height:1px; margin:15px 0px 15px 0px; border-bottom:1px dashed #eee;}
.global-cell H2 { display:block; margin:0px; padding:0px; color:#777; font-size:18px; font-weight:600;}
.global-cell H3 { display:block; margin:0px; padding:0px; color:#e91d25; font-size:14px; font-weight:600;}
.global-cell H4 { display:block; margin:0px; padding:0px; color:#333; font-size:12px; font-weight:200;}
.global-cell-red { display:block; margin:0px 15px 15px 15px; padding:30px; background:#e91d25; color:#fff; border-radius:4px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1);}
.global-cell-black { display:block; margin:0px 15px 15px 15px; padding:30px; background:#353535; color:#fff; border-radius:4px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1);}

.message { display:block; margin:0px 15px 15px 15px; padding:30px; background:#fff; border-radius:4px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1); border:1px dotted #777;}
.message P { font-size:12px;}
.message P B { font-size:14px;}

FORM INPUT[type="text"] { border:2px solid #ccc; border-radius:2px;}
FORM SELECT { border:2px solid #ccc; border-radius:2px;}
FORM BUTTON { display:inline-block; margin:0px; padding:10px 20px; color:#fff; font-size:9px; line-height:9px; font-weight:400; letter-spacing:1px; background:#999; border-radius:4px; border:2px solid #999; text-decoration:none;}
FORM BUTTON:hover, FORM BUTTON:focus { color:#999; background:#fff;}
.button-red { display:inline-block; margin:0px; padding:15px 30px; color:#fff; font-size:12px; line-height:14px; font-weight:400; letter-spacing:1px; background:#e91d25; border-radius:4px; border:2px solid #e91d25; text-decoration:none;}
.button-red:hover, .button-red:focus { color:#e91d25; background:#fff;}
.button-red-small { display:inline-block; margin:0px; padding:12px 20px; color:#fff; font-size:10px; line-height:12px; font-weight:400; letter-spacing:1px; background:#e91d25; border-radius:4px; border:2px solid #e91d25; text-decoration:none;}
.button-red-small:hover, .button-red-small:focus { color:#e91d25; background:#fff;}
.button-white-small { display:inline-block; margin:0px; padding:12px 20px; color:#e91d25; font-size:10px; line-height:12px; font-weight:400; letter-spacing:1px; background:#fff; border-radius:4px; border:2px solid #fff; text-decoration:none;}
.button-white-small:hover, .button-red-small:focus { color:#fff; background:#e91d25;}
.button-white-small-2 { display:inline-block; margin:0px; padding:12px 20px; color:#444; font-size:10px; line-height:12px; font-weight:400; letter-spacing:1px; background:#fff; border-radius:4px; border:2px solid #fff; text-decoration:none;}
.button-white-small-2:hover, .button-red-small-2:focus { color:#fff; background:#444;}
.button-yes { display:inline-block; margin:0px; padding:15px 30px; color:#fff; font-size:12px; line-height:14px; font-weight:400; letter-spacing:1px; background:#e91d25; border-radius:4px; border:2px solid #e91d25; text-decoration:none;}
.button-yes:hover, .button-yes:focus { color:#e91d25; background:#fff;}
.button-no { display:inline-block; margin:0px; padding:15px 30px; color:#fff; font-size:12px; line-height:14px; font-weight:400; letter-spacing:1px; background:#777; border-radius:4px; border:2px solid #777; text-decoration:none;}
.button-no:hover, .button-no:focus { color:#777; background:#fff;}
.buttons-right { text-align:right;}
.buttons-right A { margin:15px 15px 0px 0px;}

.pop-up { position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:888;}
.pop-up .pop-up-window { position:absolute; display:block; top:200px; left:50%; width:500px; margin:0px 0px 0px -250px; padding:60px; background:#fff; border-radius:4px;}
.pop-up .pop-up-window H2 { margin:0px 0px 30px 0px; font-size:30px; line-height:34px; color:#333; font-weight:600;}
.pop-up .pop-up-window P { display:block; margin:0px 0px 30px 0px; padding:0px; font-size:12px; line-height:18px; color:#777; font-weight:400;}




/* LOGIN css */
.login { display:block; width:100vw; height:100%; margin:0px; padding:0px; background-image:url(../images/main-background-red.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; text-align:center;}
.login .logo { display:block; width:200px; height:auto; margin:0px auto 0px auto; text-align:center;}
.login .logo IMG { display:block; width:100%; margin:0px auto;}
.login .number { position:relative; display:inline-block; width:60px; margin:0px 5px; padding:20px 0px; color:#fff; font-size:60px; line-height:60px;}
.login .number:after { content:""; position:absolute; bottom:0px; left:0px; width:100%; height:2px; background:#fff;}
.login P { display:block; margin:30px 0px 0px 0px; color:#fff;}
.login .numbers { position:relative; display:inline-block; width:80px; height:80px; margin:8px 5px; padding:0px; color:#fff; font-size:40px; line-height:80px; border:2px solid #fff; border-radius:100%; opacity:0.8;}

/* HEADER css */
HEADER { display:block; position:absolute; top:0px; left:0px; width:30%; max-width:350px; height:100%; margin:0px; padding:0px; background:#231f20; z-index:999;}
HEADER NAV { display:block; width:100%; padding:80px 0px; border-top:1px solid #383032; border-bottom:1px solid #383032; text-align:right;}
HEADER NAV UL { display:block; margin:0px; padding:0px 30px 0px 30px; list-style:none; }
HEADER NAV UL LI { display:block; margin:50px 0px; padding:0px 30px 0px 0px; border-right:1px solid #ccc;}
HEADER NAV UL LI A { color:#fff; font-size:22px; line-height:26px; text-decoration:none; }
HEADER NAV UL LI UL { margin:10px 0px 0px 0px; padding:0px;}
HEADER NAV UL LI UL LI { margin:0px 0px; padding:5px 0px; border:0px;}
HEADER NAV UL LI UL LI A { color:#eee; font-size:12px;}
HEADER NAV UL LI UL LI:hover A, HEADER NAV UL LI:focus A { font-weight:600;}
HEADER NAV UL LI UL LI A.active { color:#e91d25; font-weight:600;}


/* ADD MATERIAL css */
.system { display:block; width:100vw; height:100%; min-height:100vh; margin:0px; padding:0px 0px 0px 0px; background-image:url(../images/main-background-white.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; text-align:left; z-index:555;}
.system .add { padding:30px 30px 60px 30px;}
.system .add H2 { margin:12px 0px 0px 0px;}
.system .add H3 { margin:30px 0px 15px 0px;}
.system .add H4 { margin:30px 0px -15px 0px;}
.system .add FORM INPUT[type="text"] { width:90%; height:50px; padding:0px 0px 0px 15px;}
.system .add FORM INPUT[type="checkbox"] { margin:0px 10px 10px 0px;}
.system .add FORM INPUT[type="number"] { width:70px; height:35px; margin:0px 0px 2px 10px; padding:0px 5px 0px 15px; vertical-align:top;}
.system .add FORM SPAN { vertical-align:top;}
.system .add FORM LABEL { margin:-1px 0px 0px 0px; vertical-align:top;}
.system .add FORM SELECT { width:90%; height:50px; padding:0px 0px 0px 15px;}
.system .add FORM BUTTON { margin:25px 0px 0px 0px;}
.system .add .button-red { float:right; margin:0px 0px 0px 0px;}
.system .add TABLE { width:100%;}
.system .add TABLE TR { background:#f6f6f6;}
.system .add TABLE TR:nth-child(odd) { background:#eee;}
.system .add TABLE TR TD { padding:5px 0px 5px 10px;}
.system .add TABLE TR TD:first-of-type { padding:0px 0px 0px 15px;}
.system .add TABLE TR TD:last-of-type { padding:0px 15px 0px 15px;}

.system .product { position:relative;}
.system .product.urgent:before { content:""; position:absolute; top:0px; left:0px; width:10px; height:100%; background:red; border-radius:2px 0px 0px 2px;}
.system .product.kurier:before { content:""; position:absolute; top:0px; left:0px; width:10px; height:100%; background:orange; border-radius:2px 0px 0px 2px;}
.system .product H2 { margin:0px 0px 0px 15px; font-size:24px; line-height:24px; color:#333; font-weight:600;}
.system .product H2 SPAN { display:block; font-size:18px; font-weight:200;}
.system .product TABLE P { display:block; margin:8px 30px 0px 0px; padding:0px; font-size:10px; color:#777; font-weight:400;}
.system .product TABLE SPAN { display:block; padding:0px 0px 0px 20px; color:#e91d25; font-size:12px; font-weight:600;}
.system .product .icons { display:block; margin:0px; padding:0px; vertical-align:top; text-align:right;}
.system .product .icons .icon { display:inline-block; width:50px; margin:0px; padding:0px; opacity:0.2;}
.system .product .icons .icon:hover { opacity:1;}
.system .product .icons .icon IMG { display:block; width:100%;}
.system .product .col-md-3:last-of-type { text-align:right;}

.system .material { padding:40px 0px 0px 0px;}
.system .material H2 { margin:0px 0px 20px 40px; font-size:30px; line-height:24px; color:#333; font-weight:600;}
.system .material H2 SPAN { display:block; font-size:18px; font-weight:200;}
.system .material TABLE P { display:block; margin:0px 0px 0px 40px; padding:0px; font-size:10px; color:#555; font-weight:400;}
.system .material TABLE SPAN { display:block; padding:0px 0px 0px 10px; font-size:12px; color:#333; font-weight:600;}
.system .material TABLE SPAN.have { color:limegreen;}
.system .material TABLE SPAN.musthave { color:orange;}
.system .material A { display:block; width:100%; margin:40px 0px 0px 0px; padding:25px 0px 25px 40px; background:#e91d25; color:#fff; font-size:10px; line-height:12px; font-weight:400; text-decoration:none; border-radius:0px 0px 4px 4px;}

.system .material-2 { padding:35px 0px 0px 0px; border:1px dashed #e91d25; border-radius:6px;}
.system .material-2.expedicia { border:0px}
.system .material-2.trouble { background:#e91d25; border:none;}
.system .material-2.trouble H2, .system .material-2.trouble TABLE P, .system .material-2.trouble TABLE SPAN { color:#fff;}
.system .material-2 H2 { margin:0px 0px 20px 35px; font-size:20px; line-height:20px; color:#333; font-weight:600;}
.system .material-2 H2 SPAN { display:block; font-size:14px; font-weight:200;}
.system .material-2 TABLE P { display:block; margin:0px 0px 0px 35px; padding:0px; font-size:10px; color:#555; font-weight:400;}
.system .material-2 TABLE SPAN { display:block; padding:0px 0px 0px 10px; font-size:10px; color:#333; font-weight:600;}
.system .material-2.expedicia TABLE P { display:block; margin:0px 0px 0px 35px; padding:0px; font-size:12px; color:#555; font-weight:300;}
.system .material-2.expedicia TABLE SPAN { display:block; padding:0px 0px 0px 10px; font-size:12px; color:#333; font-weight:600;}
.system .material-2 TABLE SPAN.have { color:limegreen;}
.system .material-2 TABLE SPAN.musthave { color:orange;}
.system .material-2 A { display:block; width:100%; margin:30px 0px 0px 0px; padding:20px 0px 20px 35px; background:#e91d25; color:#fff; font-size:10px; line-height:12px; font-weight:400; text-decoration:none; border-radius:0px 0px 4px 4px;}
.system .material-2.trouble A { display:block; width:100%; margin:30px 0px 0px 0px; padding:20px 0px 20px 35px; background:#333; color:#fff; font-size:10px; line-height:12px; font-weight:400; text-decoration:none; border-radius:0px 0px 4px 4px;}


/* HOME */
.homescreen .global-cell H3, .homescreen .global-cell-red H3, .homescreen .global-cell-black H3 { font-weight:400; font-size:12px; margin:0px 0px 2px 0px;}
.homescreen .global-cell H2 { font-size:28px; color:#333;}
.homescreen .global-cell-red H2, .homescreen .global-cell-black H2 { font-size:28px; color:#fff; font-weight:600;}
.homescreen TABLE { width:100%; margin:30px 0px 40px 0px;}
.homescreen TABLE TR { border-bottom:1px solid #eee;}
.homescreen TABLE TR TD { padding:8px 0px 8px 0px; text-align:right; font-size:12px;}
.homescreen TABLE TR TD B { color:#e91d25;}
.homescreen .global-cell-red TABLE TR TD B, .homescreen .global-cell-black TABLE TR TD B { color:#fff; font-weight:600;}
.homescreen .global-cell-red TABLE TR TD SPAN, .homescreen .global-cell-black TABLE TR TD SPAN { font-size:10px; letter-spacing:0.5px;}
.homescreen TABLE TR TD:first-of-type { text-align:left;}
.homescreen TABLE TR TD H4 { font-size:15px; font-weight:600; margin:0px;}
.homescreen FORM { display:block;}
.homescreen FORM TEXTAREA { display:block; width:100%; height:168px; margin:20px 0px 20px 0px; padding:20px; border:2px solid #ccc;}
.homescreen FORM INPUT[type="text"] { width:95%; height:50px; margin:20px 0px 0px 5%; padding:0px 0px 0px 15px;}
.homescreen FORM SELECT { width:95%; height:50px; margin:10px 0px 0px 5%; padding:0px 0px 0px 15px;}
.homescreen FORM BUTTON { display:block !important; width:95%; margin:10px 0px 0px 5%;}


/* SKLAD */
.sklad H1 { display:block; margin:30px 0px 30px 15px; padding:0px; color:#333; font-size:24px; font-weight:400;}
.sklad .navigacia H2 { font-weight:400; font-size:12px; margin:0px 0px 15px 0px; color:#e91d25;}
.sklad .navigacia-2 H2 { font-weight:400; font-size:12px; margin:0px 0px 15px 0px; color:#e91d25;}
.sklad .navigacia-2 FORM INPUT[type="text"] { width:95%; height:50px; padding:0px 0px 0px 15px;}
.sklad .navigacia-2 FORM BUTTON { display:inline-block; width:95%; margin:0px 0px 0px 0px;}
.sklad .navigacia-2 FORM SELECT { width:95%; height:50px; padding:0px 0px 0px 15px; border:2px solid #ccc;}
.sklad FORM INPUT[type="text"] { width:70%; height:50px; padding:0px 0px 0px 15px;}
.sklad FORM BUTTON { display:inline-block; width:30%; margin:0px 0px 0px 10px;}
.sklad FORM SELECT { width:100%; height:50px; padding:0px 0px 0px 15px; border:2px solid #ccc;}

.sklad .non-expedicion H1 { color:#999;}
.sklad .non-expedicion H1 SPAN { display:inline-block; margin:-2px 0px 0px 0px; padding:5px 15px; background:#e91d25; color:#fff; font-size:18px; border-radius:4px; vertical-align:top;}
.sklad .non-expedicion .material-2 H2 { color:#ccc;}
.sklad .non-expedicion .material-2.expedicia TABLE P { color:#ccc;}
.sklad .non-expedicion .material-2.expedicia TABLE SPAN { color:#ccc;}
.sklad .non-expedicion .material-2 A { background:#999; color:#ccc;}

/* VYROBA */
.factory H1 { display:block; margin:30px 0px 30px 15px; padding:0px; color:#333; font-size:24px; font-weight:400;}
.factory .navigacia H2 { font-weight:400; font-size:12px; margin:0px 0px 0px 0px; color:#e91d25;}
.factory FORM INPUT[type="text"] { width:70%; height:50px; margin:20px 0px 0px 0px; padding:0px 0px 0px 15px;}
.factory FORM BUTTON { display:inline-block; width:30%; margin:20px 0px 0px 10px;}
.factory FORM SELECT { width:100%; height:50px; margin:20px 0px 0px 0px; padding:0px 0px 0px 15px;}
.factory .add { padding:30px 30px 60px 30px;}
.factory .add H2 { margin:12px 0px 0px 0px;}
.factory .add H3 { margin:30px 0px 15px 0px;}
.factory .add FORM INPUT[type="text"] { width:90%; height:50px; margin:0px; padding:0px 0px 0px 15px;}
.factory .add FORM INPUT[type="number"] { width:90%; height:50px; margin:0px; padding:0px 0px 0px 15px;}
.factory .add FORM SELECT { width:90%; height:50px; margin:0px; padding:0px 0px 0px 15px;}
.factory .add FORM BUTTON { margin:25px 0px 0px 0px;}
.factory .add .button-red { float:right; margin:0px 0px 0px 0px;}

/* TABLES */
.settings { display:block; width:100vw; height:100%; min-height:100vh; margin:0px; padding:0px 0px 0px 0px; background-image:url(../images/main-background-white.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; text-align:left; z-index:555;}
.settings H2 { margin:30px 0px 0px 15px; padding:0px 0px 15px 0px; border-bottom:1px solid #ccc;}
.user { display:block; margin:30px 15px 0px 15px; padding:40px; background:#fff; border-radius:8px; box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1); text-align:center; border:1px solid #fafafa;}
.user .avatar { display:block; width:120px; height:120px; margin:0px auto; background:#777; border-radius:100%; overflow:hidden;}
.user .avatar IMG { display:block; width:100%;}
.user H3 { display:block; margin:30px 0px; padding:0px; color:#333; font-size:14px; font-weight:600; text-align:center;}
.user .icon-edit { display:inline-block; width:60px; height:60px; margin:0px 5px; padding:0px; background-color:yellowgreen; border-radius:100%;}
.user .icon-edit IMG { display:block; width:20px; margin:20px auto 0px auto;}
.user .icon-delete { display:inline-block; width:60px; height:60px; margin:0px 5px; padding:0px; background-color:red; border-radius:100%;}
.user .icon-delete IMG { display:block; width:20px; margin:20px auto 0px auto;}
.settings TABLE { width:100%;}
.settings TABLE TR { background:#f6f6f6;}
.settings TABLE TR:nth-child(odd) { background:#eee;}
.settings TABLE TR TD { padding:15px;}



@media (min-width: 1400px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
@media (min-width: 576px) {
}


/* css */