﻿.poContainer
{
    min-height:500px;
    background-color:white;
      position:relative;
    left:0px;
    z-index:29;
padding-left:300px;
width:100%;
}

.filterMenu
{
    position:absolute;
    left:0px;
    z-index:99;
    width:300px;
    padding-left:35px;
    padding-top:50px
}

.filterMenu-Menu{
    display: none;
}
.filterMenu .title
{
    font-weight:800;
    font-size:20px;
    display:block;
}

.filterMenu input[type=text]
{
    padding:4px;
    font-size:20px;
    margin-top:15px;
     -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
     width:80%;

}

.headerFields
{
    background-color:#5d5d5d;
    color:white;
   
-webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.67);
-moz-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.67);
box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.37);
z-index: 33;
position: relative;
height:50px;
padding-top:10px;
}


.newPurchaseOrderButton{
    background-color:#25b0fc;
    color:white;
    font-size:18px;
    border-radius:6px;
    display:none;
    width:200px;
    float:right;
    margin-right:30px;
    text-align:center;
    padding:10px;
    
}
.newPurchaseOrderButton:hover{
    background-color:#64c6fc;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.67);
-moz-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.67);
box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.37);
    cursor:pointer;
}

.filterMenu .status
{
    margin-top:30px;

}

.filterMenu .status ul
{
    padding-left:10px;
    padding-top:10px;

}


.filterMenu .status ul > li{
    padding-top:10px;
}

.filterMenu .status ul > li:first-child{
    padding-top:0px;
}

.switchery-small {
margin-right: 10px;
}

.filterMenu .vendor{
    margin-top:30px;
}


.filterMenu .employee{
    margin-top:10px;
}
ul.poList{
    width:100%;
}

ul.poList > li
{
  width:100%;
}


ul.poList .fields > li
{
    float:left;
    width:auto;
  
  padding-top:5px;
  width:14.2%;
}

.poList  .poRow
{
  height:60px;
     border-bottom:1px solid #6A6A6A;
     color:#6a6a6a;
     font-size:14px;
     padding-top:15px;
}

.poList  .poRow:hover
{
    background-color:#e3e3e3;
cursor:pointer;
border:1px solid gray;
}

.poList  .poRow:nth-child(2n+1)
{
  background-color:#f2f2f2;

}

.poList  .poRow:nth-child(2n+1):hover
{
  background-color:#e3e3e3;

}

.vendor select
{
    width:200px;
}

.employee select
{
    width:200px;
}

/*Media Queries*/

@media only screen and (max-width: 750px) {
    .filterMenu {
        position:relative;
        width: 300px;
        padding: 16px 0;
        padding-left: 19.63610208322238px;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        transition: max-height 2s ease;
    }
 
    .filterMenu input[type=text] {
      padding: 4px;
      font-size: 20px;
      margin: 10px 0 10px 0;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      width: 80%;
    }
    .filterMenu .title{
        font-size: 16px;
    }

    .filterMenu .status ul
    {
        padding-left:10px;
        padding-top:10px;
        padding-bottom: 10px;
    }
    .filterMenu .status li{
        font-size: 14px;
    }
    .filterMenu .vendor, .filterMenu .employee, .filterMenu .status{
        width: 100%;
        margin-top: 10px;
    }
    .filterMenu-Open {
        max-height: 500px;
    }
    .filterMenu-Close{
        display: none;
        height: 0;
        padding: 0;
    }
    .filterMenu-Menu{
        display: block;
        margin-top: 10px;
    }
    .filterMenu-Menu .basicButton {
        float:left;
        font-size: 16px;
        margin-right: 20px;
    }
    .poContainer {
        padding-left: 0;
    }
    .poList .poRow {
        height: 100px;
        padding-top: 11px;
        /*border: 1px solid green;*/
    }
    .poList .poRow .fields li:first-child div {
        padding-left: 19.63610208322238px;
    }
    .poList .poRow .fields li:first-child {
        width: 100%;
        font-weight: bold;
        font-size: 18px;
    }
    .poList .poRow .fields li:nth-child(1n+2) {
        width: 50%;
        padding-left: 29.63610208322238px;
        height:auto;
        /*border: 1px solid red;*/
    }
    .newPurchaseOrderButton {
        margin-right: 30px;
        padding: 6px;
        width:auto;
        position:relative;
        top: -6px;
    }
}


