/*----------------------------------------------------
Created by Hardeep Asrani
Don't remove credits and you're free to use this
Blog - hardeepasrani.blogspot.com
Download This At - css-box.blogspot.com
----------------------------------------------------*/


span.start {
	color:white;
	font-size:2em;

}

.credits {
	color:white;
	text-align:right;
	text-decoration:none;
	font-weight: bold;
}


.metro-surface{
	padding: 40px 40px 0px 0px;
}


.metro-tile {
	background-color: #D8512B;
	border-color: #DC6241;
	width: 232px;
	height: 104px;
	padding: 5px;
	color: #FFF;
	font-family: sans-serif;
	font-size: 16px;
	border-width: 5px;
	border-style: solid;
	cursor: default;
	-webkit-transition: 0.1s all;
	-moz-transition: 0.1s all;
	-ms-transition: 0.1s all;
	transition: 0.1s all;
	cursor: auto;
}


.metro-tile-small {
	position: relative;
	width: 104px;
	min-width: 52px;
	max-width: 104px;
	height: 104px;
	min-height: 52px;
	max-height: 104px;
}

.metro-tile-big {
	width: 232px;
	height: 232px;
	
}

.tile-content {
width: 100%;
height: 100%;
padding: 0;
padding-bottom: 30px;
vertical-align: top;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 9pt;
font-smooth: always;
line-height: 11pt;
color: #000000;
color: #ffffff;
line-height: 16px;
}

.metro-tile-admin {
	background: url(../img/System.png);
	background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;
	background-position: 28px 38px;
}


.metro-tile-fare {
	color: #000;
	background: url(../img/blueprint4.png);
	background-position: 28px 38px;
    background-color:#8CC63F;
    border-color:#8CC63F;
	background-repeat:no-repeat;
}


.metro-tile-device {
	background: url("../img/Hard drive.png");
	background-color: #009719;
	border-color: #009719;
	background-repeat:no-repeat;
	background-position: 88px 38px;
}


.metro-tile-accounts {
	background: url("../img/Wallet2.png");
	background-position: 88px 38px;
    background-color:#2C4E16;
    border-color:#2C4E16;
	background-repeat:no-repeat;
}


.metro-tile-help {
	background: url('../img/Ticket.png');
    background-color: #2C4E16;
	border-color: #2C4E16;
	background-repeat:no-repeat;
	background-position: 28px 38px;
}


.metro-tile-tools {
	background: url('../img/Tools.png');
    background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;
	background-position: 28px 38px;	
}


.metro-tile-depot {
	color: #000;
	background: url('../img/Shop.png');
	background-color: #8CC63F;
	border-color: #8CC63F;
	background-repeat:no-repeat;
	background-position: 88px 38px;		
}


.metro-tile-inventory {
	background: url('../img/Credit card 2.png');
	background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;
	background-position: 88px 38px;		
}


.metro-tile-recon {
	background: url(../img/Billing.png);
	background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;
	background-position: 88px 38px;	
}


.metro-tile-fraud {
	background: url('../img/Zoom.png');
	background-color: #2C4E16;
	border-color: #2C4E16;
	background-repeat:no-repeat;
	background-position: 88px 38px;	
}


.metro-tile-kms {
	background: url(../img/Keychain2.png);
	background-color: #009719;
	border-color: #009719;
	background-repeat:no-repeat;
	background-position: 38px 38px;		
}


.metro-tile-product {
	background: url(../img/Cabinet.png);
	background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;	
	background-position: 38px 38px;		
}


.metro-tile-report{
	background: url('../img/Statistics.png');
	background-color: #009719;
	border-color: #009719;
	background-repeat:no-repeat;
	background-position: 88px 38px;
}


.metro-tile-settlement {
	color: #000;
	background: url(../img/Cash.png);
	background-color: #8CC63F;
	border-color: #8CC63F;
	background-repeat:no-repeat;
	background-position: 88px 38px;	
}


.metro-tile-user {
	background: url('../img/Identification card.png');
	background-color: #0A4062;
	border-color: #0A4062;
	background-repeat:no-repeat;
	background-position: 38px 38px;		
}


.metro-tile-eod {
	background: url(../img/Power.png);
	background-color: #2C4E16;
	border-color: #2C4E16;
	background-repeat:no-repeat;
	background-position: 38px 38px;		
}

.metro-tile-merchant {
	background: url(../img/ShoppingBag.png);
	background-color: #009719;
	border-color: #009719;
	background-repeat:no-repeat;
	background-position: 38px 38px;
}


div.metro-tile:hover {
	-webkit-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
	-moz-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
	-ms-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
	transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
	border-width: 5px;
	border-style:solid; 
	-moz-box-shadow: 15px 15px 15px #000;
	-webkit-box-shadow: 15px 15px 15px #000;
	box-shadow: 15px 15px 15px #000;
	z-index: 99999;
}

.metro-tile-disable {
	/* changing z-index from 99999 to auto because disabled tiles are overlapping footer bar
	z-index: 99999; */
	z-index: auto;
	color: #000;
	pointer-events: none;
	background-color: #e2e2e2;
	cursor: pointer;

}