/* Vertical Menu CSS START */ 
.vmnu {display:flex;width:180px;padding:10px;color:white;background:rgba(0, 0, 0, 0.705);border-right:2px solid rgba(219, 219, 219, .33);transition:all 0.9s;overflow:hidden;overflow-y:auto;} 
.vmenu {margin:0;padding:0;list-style-type: none;text-transform: capitalize;width:100%;display:block;}
.vmenu div {display:inline-block;}
.vmenu span {display:block;padding-bottom:5px;white-space:nowrap;color:rgb(255, 255, 0);opacity:.75;}
.vmenu img {height:18px;vertical-align:middle;padding:0px;padding-right:7px;filter:invert(100%);}
.vmenu li {cursor:pointer;padding:7px;white-space:nowrap;opacity:.55;transition:all 0.9s;}
.vmenu li:hover {opacity:1;border-right:2px solid rgba(0, 0, 255, 0.562);}
.oluc {position:absolute;bottom:4px;left:4px;font-size:9px;color:rgba(127,127,127,0.75);display:block;/*width:160px;text-align:center;*/}
/* Vertical Menu CSS END */

.vdta {display:inline-block;width:100%;background: rgba(223, 223, 223, 0.281);padding:0 25px;overflow: hidden;overflow-y: auto;}
.panel {visibility:hidden;position:absolute;top:40px;right:0px;height:calc(100% - 40px);width:0px;padding:0px;margin:0px;background:white;overflow:hidden;overflow-y:auto;opacity:0;transition:all 0.9s;}
.panel.open{visibility:visible;width:61%;box-shadow: -5px 0px 5px rgba(0,0,0,.2);opacity:1.0;z-index:10;}

/*  BOX CSS START */ 
.dtaBox {
    width: 100%;
    height: auto;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: wrap;
}
.dtaBox.FH {
    display:flex;
    height:calc(100% - 100px);
    width:100%;
    overflow:hidden;
}
.area {
    height: 200px;
    background:white;
    padding:10px;
    margin-bottom:20px;
    /*box-sizing: border-box;*/
	border: 1px solid rgba(122, 122, 122, 0.332);
	border-radius: 3px;
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);	
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    overflow:hidden;
    overflow-y: auto;
}
.area.small {width:calc(32% - 15px);}
.area.med {width:calc(48.5% - 15px);}
.area.large {width:99%;}
.area.high {height:100%;}
.area h3, .area h4 {padding:0; margin:0; padding-bottom:5px;transition:all 1s;border-bottom:1px solid blue;}
.area h4 img {padding-right:5px;height:12px;float:right;filter: invert(50%);}
.area h4 img:hover {cursor:pointer;filter:none;}
.dta {display:block;height:calc(100% - 24px);border:0px solid blue;overflow:hidden;overflow-y:auto;overflow-x:auto;}
/* BOX CSS END */

.pg-title img {padding-right:7px;height:18px;float:right;filter: invert(50%);}
.pg-title img:hover {cursor:pointer;filter:none;}

.tbStrip {
    display:block;
    margin:0;
    padding:10px; 
    height:24px;
    overflow:hidden;
    /*border:1px solid rgba(128,128,128,.25);*/
    transition: all 0.5s;
}
.tbSeg {
    font-size:10px;
    color: rgba(128,128,128,.5);
    padding:4px;
}
.tbButton {
    cursor: pointer;
    width:60px;
    padding:4px;
    margin-right:4px;
    background: white;
    border: 1px solid rgba(128,128,128,.25);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    transition: all 0.6s;
}
.tbButton:hover, .tbButton:active {
    box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
    background: rgb(128, 128, 128);
    color:black;
    filter:invert(100%);
}
.tbButton img {vertical-align: middle;height:15px;padding-right:5px;}
.tbButton.left {float:left;}
.tbButton.right {float:right;}

.dta-table {padding:0;margin:0;width:100%;font-size:10px;border-collapse:separate;border-spacing:0;}
.dta-table th {vertical-align:top;text-align:left;background:white;padding:8px 4px;margin:0px;white-space:nowrap;}
.dta-table tr:first-child>th {border-bottom:1px solid rgba(128,128,128,0.2);position:sticky; top:0;}
.dta-table tr:hover{cursor:pointer;background:rgba(194, 194, 194, 0.2);}
.dta-table td {vertical-align:top;border-bottom:1px solid rgba(128,128,128,0.2);padding:4px;}


/* NEXT AREA DEFINES TEXT COLOR PER STATUS */
.Pending {color:rgb(129, 129, 0);}
.Pending.Backorder {color:rgb(180, 0, 0);}
.Suspended, .Unreleased, .Quoted {color:rgb(157, 102, 0);}
.Waved, .Unallocate {color:rgb(2, 117, 0);}
.Being.Picked {color:rgb(3, 156, 0);}
.Rating, .Active, .Approved {color:rgb(0, 187, 0);}

.New {color:rgb(170,170,0);}
.RFQ {color:rgb(10,100,100);}
.Customer {color:rgb(150,100,150);}

.Backorder, .In-Active, .Declined {color:rgb(180, 0, 0);}

.Phase.Out {color:rgb(143, 143, 0);}


/* NEXT AREA STYLES HR ELEMENT */
hr {border:none; border-top:1px solid #e0e0e0;}
hr.fancy-line { 
    border: 0; 
    height: 1px;
    position: relative;
    margin: 0.5em 0; /* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;   /* half the height of :before */
    top: 1px;        /* height of hr*/
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
    background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,rgba(0,0,0,0.1)), color-stop(75%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

hr.fancy-line:after {
    background: #f4f4f4;
}

/* NEXT AREA CLOSURE */
.br {clear:both;}

@media screen and (max-width:1500px) {
    .area.small {width:30.5%;}
}
@media screen and (max-width:1300px) {
    .area.small {width:30%;}
}
@media screen and (max-width:1200px) {
    .area.small {width:calc(49% - 20px);}
}
@media screen and (max-width:1100px) {
    .area.med {width:calc(49% - 20px);}
    .panel.open {width:66%;}
}
@media screen and (max-width:1000px) {
    .panel.open {width:70%;}
}
@media screen and (max-width:950px) {
    .panel.open {width:76%;}
}
@media screen and (max-width:850px) {
    .area.small {width:99%;}
    .area.med {width:99%;}
}
@media screen and (max-width:750px) {
    .panel.open {width:calc(100% - 155px);}
}
@media screen and (max-width:740px) {
    .vmnu {width:30px;}
    .vmnu span, .vmnu div {visibility:hidden;}
    .vmenu {width:30px;}
    .vmenu li {padding:4px;z-index: -10;}
    .oluc {visibility:visible;width:30px;}
    .panel.open {width:calc(100% - 48px);}
}