/* NEW STYLING FOR DASHBOARD */

.dashboardContainer {
width: 1000px;
float:left;
}

h2.InventoryH2{
 clear: right;
 float: left;   
 line-height: 0;
 margin-top: 0;
 padding-top: 10px;
 font-size: 20px;
 font-family: Roboto;
 font-weight: 500;
 padding-bottom:10px;
 }
 
 h2 {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 0;
    padding-bottom: 5px;
    margin-top:0;
    padding-top:10px;
 }
 
 h2.titlePage{
 float:left;
 }
 
 .pageTitle{
 width:1000px; 
 margin-bottom:40px;
 }
 
 .calendar {
 float:right;
 margin-bottom: 0;
 }
 
.ButtonsInv{
position: relative;
top: 5px;

padding-left: 10px; 
padding-right: 10px; 
text-align:center;

}
 
.invButton{
height:30px; 
background-color: #00897B;
float:right;
border-radius: 5px;
margin-top:-2px;
margin-bottom:15px; 
}

.invButton2{
height:30px; 
background-color: #E58025;
float:right;
border-radius: 5px;
margin-top:-2px;
margin-bottom:15px; 
}

:hover.invButton{
background-color: #00695C;
}

:hover.invButton2{
background-color: #D67221;
}

#these {
display:none;
}


.ButtonsInv img {
    margin-bottom: 3px;
    margin-right: 3px;
    width: 20px;
}

#syncModal{
width:400px;
}



#Add {
width: 30px; 
height: 30px; 
background-color: #00897B;
margin-right: 15px; 
float: right; 
margin-bottom:15px; 
border-radius: 5px;
margin-top: -2px;
}

#inventoryTile {
width:620px; 
height:730px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px; 
float:left; 
margin-right: 30px; 
margin-bottom: 30px;
padding: 15px;
box-shadow: 0 2px 3px #888;
overflow: auto;

}

#inventoryTiles {
width:485px; 
height:520px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px; 
float:left; 
margin-right: 30px; 
margin-bottom: 30px;
padding: 15px;
box-shadow: 0 2px 3px #888;
overflow: auto;

}

#expiringTile {
width:450px; 
height:380px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px; 
float:left; 
margin-bottom: 30px;
margin-right:30px;
padding: 15px;
box-shadow: 0 2px 3px #888;
overflow: auto;

}

#scheduledTile{
width:490px; 
height:400px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px; 
float:left; 
margin-bottom: 30px;
padding: 15px;
box-shadow: 0 2px 3px #888;
overflow: auto;
}

#donOrg{
width:520px; 
height:380px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px; 
float:left; 
margin-bottom: 30px;
padding: 15px;
box-shadow: 0 2px 3px #888;
overflow: auto;
}

.orgImg {
width: 230px;
float:right;
}

.orgP {
width:280px;
float:left;
}



.panel-group{
float:left;
width:100%;
clear:right;
}

.itemsCenter {
text-align:center;
}

.donutGraph {
width:350px; 
height: 350px; 
background-color: #fff; 
opacity:0.9; 
border-radius: 5px;  
float:left; 
margin-bottom:30px;
box-shadow: 0 2px 3px #888;
}

.donutGraphSales {
width:350px; 
height: 350px; 
background-color: #fff; 
opacity:0.9; 
border-radius: 5px;  
float:left; 
margin-bottom:30px;
margin-right:30px;
box-shadow: 0 2px 3px #888;
}

.donutGraphOrg {

width:480px; 
height: 400px; 
background-color: #fff; 
opacity:0.9; 
border-radius: 5px;  
float:left; 
margin-bottom:30px;
box-shadow: 0 2px 3px #888;
padding:15px;
margin-right:30px;
}

.donutGraphOrg2 {

width:350px; 
height: 350px; 
background-color: #fff; 
opacity:0.9; 
border-radius: 5px;  
float:left; 
margin-bottom:30px;
margin-right: 30px;
box-shadow: 0 2px 3px #888;

}

#trends {

width: 620px; 
height: 350px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px;  
float:left; 
margin-bottom:30px;
box-shadow: 0 2px 3px #888;
}

#top5 {
width: 620px; 
height: 350px; 
background-color: #fff; 
opacity:0.9; 
border-radius:5px;  
float:left; 
margin-bottom:30px;
box-shadow: 0 2px 3px #888;
padding:15px;
}

th {
font-family: Roboto;
font-weight: 300;

}

p.ButtonsInv{
font-family: Roboto;
font-weight: 500;
color: white;
}

#Legend {
width: 310px;
margin-bottom: 10px;
height:15px;
padding-left: 5px;
}


.Legend {
height:15px; 
width:15px;
background-color: #00897B;
float:left;
border-radius: 2px;
margin-top:-2px;
}



p.legendList {
float:left;
padding-left:10px;
padding-right: 20px;
font-family: Roboto;
font-weight: 400;
font-size: 12px;
line-height: 10px;
}

button {
border:none;
padding: 0;
}

h2 > a:hover {
text-decoration: underline;
}

.sideNav {
background-color: #00897B; 
width:30px; 
height:30px; 
margin-right:30px; 
float:left; 
clear:right; 
border-radius:5px;
box-shadow: 0 1px 2px #888;
}

#menu {
position:absolute;
top:130px;
bottom:0;
width:165px;
left:-165px;
height:81.6%;
background-color:#00897B;
border-top-right-radius:5px;
box-shadow: 1px 1px 5px #888;

-webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
}

#menu.active {
        -webkit-transform: translate(165px, 0px);
        -moz-transform: translate(165px, 0px);
        -o-transform: translate(165px, 0px);
        -ms-transform: translate(165px, 0px);
        transform: translate(165px, 0px);
}

.container {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.25s ease;
       -moz-transition: 0.25s ease;
       -o-transition: 0.25s ease;
       transition: 0.25s ease;  
}

.container.active {
       -webkit-transform: translate(120px, 0px);
       -moz-transform: translate(120px, 0px);
       -o-transform: translate(120px, 0px);
       -ms-transform: translate(120px, 0px);
       transform: translate(120px, 0px);
}

.menu-link {
   position:absolute;
   top:15px;
   left:-50px;
}

.menuOptions {
border-top: 1px solid #fff;
cursor: pointer;
font-size: 15px;
font-weight: 400;
padding: 22px 0px 22px 35px;
position: relative;
list-style: none;
box-shadow:0 2px 0 #00695c;
width:100%;
text-align:left;
background-color:#00897B;
}

#sideMenuActive {
background-color: #00695C;
}

.menuOptions:hover {
background-color: #00695C;
text-decoration:none;
}

.tabletImg2{
width:25px;
margin-bottom:5px;
}

.ui-datepicker-trigger {
display:none;
}


@media (min-width:1100px) {
.tabletImg {
display:none;
}

#menuTablet {
display:none;
}

}

@media (max-width: 1024px) {

.navbar{
margin-bottom:0;
}

#menuTablet {
padding-left:0; 
width:50px; 
background-color:#00897B;
height:83.4%;
position:absolute;
top:102px;
box-shadow: 1px 1px 5px #888;
z-index:-1;
}

.tabletOption {
border-top: 1px solid #fff;
cursor: pointer;
font-size: 15px;
font-weight: 400;
padding-top:15px;
padding-bottom:15px;
padding-left:10px;
position: relative;
list-style: none;
box-shadow:0 2px 0 #00695c;
width:100%;
text-align:left;
background-color:#00897B;
color:#fff;
background-image:url("http://mgainza.com/inventorium/img/overview.png") no-repeat;
background-size:30px;
}


.tabletImg {
width:30px;
}

.tabletImg3 {
background-size:30px;
background:url("http://mgainza.com/inventorium/img/overview.png") no-repeat;
}

.tabletImg4 {
background-size:30px;
background:url("http://mgainza.com/inventorium/img/inventory.png") no-repeat;
}

.tabletImg5 {
background-size:30px;
background:url("http://mgainza.com/inventorium/img/sales.png") no-repeat;
}

.tabletImg6 {
background-size:30px;
background:url("http://mgainza.com/inventorium/img/donate.png") no-repeat;
}

.sideNav {
display:none;
}

.container {
margin-left:80px;
margin-top:20px;
}

#inventoryTile {
width:530px;
}

.pageTitle{
width:910px;
}

#trends{
width:530px;
}

#canvas {
width:500px;
height:250px;
}

.rowDate{
width:110px;
}

.dashboardContainer {
width:910px;
}

#inventoryTiles {
width:440px;
}

}