@import url('custom.css');


/*------------------------Dashboard Page-------------------------*/
.new_dashboardPage .NewdashboardPage_INR{
	background: #F9F9F9;
	height: calc(100% - 48px);
	border: 1px solid #a5a5a5;
}
/*==================================*/
.new_dashboardPage .NewdashboardPage_INR .mCSB_container{
	min-height: 100%;
	background: #e6e6e6;
	padding: 0;
}
.dashBoardBlockTable{
	width: 100%;
	height: 100%;
}
.dashBoardBlockCell{
	padding:30px 15px;
	text-align: center;
}
.dashboardPlate{
	display: inline-block;
	text-align: left;
}
.minDashNamePnl{
	text-align: right;
	margin: 35px 0;
}
.minDashNamePnl h3{
	font-family: 'Helvetica-Neue';
	font-size: 48px;
	margin: 0;
	color: #010101;
}
.minDashNamePnl h3 span{
	color: #af3238;
}
.minDashNamePnl p{
	margin: 15px 0 0 0;
	font-size: 18px;
	font-family: 'open_sanslight';
}
.dashboardPlate ul{
	display: block;
	padding: 0;
	margin: 0 -5px;
}
.dashboardPlate ul:after{
	display: table;
	clear: both;
	content: "";
}
.dashboardPlate ul li{
	display: block;
	float: left;
	width: 200px;
	height: 200px;
	position: relative;
	margin: 10px 5px 0;
}
.dashboardPlate ul li ul.subMenu{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 5px 15px;
	background: rgba(0,0,0,0.8);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.dashboardPlate ul li ul.subMenu li{
	display: block;
	float: none;
	height: auto;
	width: auto;
}
.dashboardPlate ul li ul.subMenu li a{
	display: block;
	height: auto;
	width: auto;
	position: relative;
	color: #fff;
	margin: 10px 0;
}
.dashboardPlate ul li:hover ul{
	opacity: 1;
}
/*-----*/

.dashboardPlate ul li a{
	display: block;
	height: 100%;
	width: 100%;
	position: relative;
	transition: transform 1s linear;
	transform-style: preserve-3d;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.dashboardPlate ul li a img{
	position:relative;
	z-index: 2;
}
.dashboardPlate ul li a .front {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.dashboardPlate ul li a .back{
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dashboardPlate ul li a.flipY{
    transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);;
}
.dashboardPlate ul li.active a.flipY {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.dashboardPlate ul li a.flipY .front{
	  transform: rotateY(0deg);
	 -webkit-transform: rotateY(0deg);
}
.dashboardPlate ul li a.flipY .back{
	  transform: rotateY(180deg);
	 -webkit-transform: rotateY(180deg);
}

.dashboardPlate ul li a.flipX{
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}
.dashboardPlate ul li.active a.flipX {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}
.dashboardPlate ul li a.flipX .front{
	 transform: rotateX(0deg);
	 -webkit-transform: rotateX(0deg);
}
.dashboardPlate ul li a.flipX .back{
	 transform: rotateX(180deg);
	 -webkit-transform: rotateX(180deg);
}


/*-----*/
.dashboardPlate ul li:hover a,
.dashboardPlate ul li.active:hover a{
	transform: rotateX(0deg );
	-webkit-transform: rotateX(0deg );
}


.dashboardPlate .dashboardPlateRow{
	display: inline-block;
	white-space: nowrap;
}
.dashboardPlate .dashboardPlateRow h3{
	margin: 0;
	padding: 5px 10px;
	background: #fff;
	font-family: 'open_sanslight';
}
/*-----*/
.dashboardPlate ul li a.addCardHolder figure{
	background: #e0922e;
}
.dashboardPlate ul li a.addCardtoCardHolder figure{
	background: #e64343;
}
.dashboardPlate ul li a.addCcessGroup figure{
	background: #149ca8;
}
.dashboardPlate ul li a.addTimeSchedules figure{
	background: #7a7a7a;
}
.dashboardPlate ul li a.cardHolder figure{
	background: #3b76cf;
}
.dashboardPlate ul li a.accessGroup figure{
	background: #d33962;
}
.dashboardPlate ul li a.timeSchedule figure{
	background: #b42ee0;
}
.dashboardPlate ul li a.hardware figure{
	background: #75b531;
}
.dashboardPlate ul li a.reports figure{
	background: #d58646;
}
.dashboardPlate ul li a.vms figure{
	background: #746386;
}
.dashboardPlate ul li a.diagnostics figure{
	background: #01bb96;
}
/*-----*/
.dashboardPlate ul li a figure p.imgBack{
	position: absolute;
	left: 0;
	bottom: 18px;
	right: 0;
	text-shadow:2px 1px 1px rgba(0,0,0,0.3);
	color: #fff;
	font-size: 12px;
	font-family: 'Helvetica-Neue';
	padding: 5px 10px;
	margin: 0;
	z-index: 3;
	text-transform: uppercase;
}

.dashboardPlate ul li a.addCardHolder figure p{
	background: rgba(224,146,46,0.9);
}
.dashboardPlate ul li a.addCardtoCardHolder figure p{
	background: rgba(230,67,67,0.9);
}
.dashboardPlate ul li a.addCcessGroup figure p{
	background: rgba(20,156,168,0.9);
}
.dashboardPlate ul li a.addTimeSchedules figure p{
	background: rgba(122,122,122,0.9);
}
.dashboardPlate ul li a.cardHolder figure p{
	background: rgba(59,118,207,0.9);
}
.dashboardPlate ul li a.accessGroup figure p{
	background: rgba(211,57,98,0.9);
}
.dashboardPlate ul li a.timeSchedule figure p{
	background: rgba(180,46,224,0.9);
}
.dashboardPlate ul li a.hardware figure p{
	background: rgba(117,181,49,0.9);
}
.dashboardPlate ul li a.reports figure p{
	background: rgba(213,134,70,0.9);
}
.dashboardPlate ul li a.vms figure p{
	background: rgba(116,99,134,0.9);
}
.dashboardPlate ul li a.diagnostics figure p{
	background: #01bb96;
}

/*================================*/
/*.dashboardPlate ul li a figure p{
    z-index:3;
}
.dashboardPlate ul li a figure img{
    position:relative;
    z-index:2;
}*/


.dashboardPlate ul li a figure:after{
     font: normal normal normal 14px/1 FontAwesome;
    font-size: 60px;
    display: block;
    text-align: center;
    color: #4c4b4b;
    top: 60px;
    position: absolute;
    line-height: 60px;
		left: 0;
		right: 0;
		z-index: -1;
}

.dashboardPlate ul li a.addCardHolder figure:after{
    content: "\f234";
}
.dashboardPlate ul li a.addCardtoCardHolder figure:after{
	 content: "\f2c2";
}
.dashboardPlate ul li a.addCcessGroup figure:after{
	 content: "\f0c0";
}
.dashboardPlate ul li a.addTimeSchedules figure:after{
	 content: "\f017";
}
.dashboardPlate ul li a.cardHolder figure:after{
	 content: "\f2ba";
}
.dashboardPlate ul li a.accessGroup figure:after{
	 content: "\f0c0";
}
.dashboardPlate ul li a.timeSchedule figure:after{
	 content: "\f0c0";
}
.dashboardPlate ul li a.hardware figure:after{
	 content: "\f084";
}
.dashboardPlate ul li a.reports figure:after{
	 content: "\f0f6";
}
.dashboardPlate ul li a.vms figure:after{
	 content: "\f03d";
}
.dashboardPlate ul li a.Events figure:after{
	 content: "\f133";
}






/*========screen 1500px=========*/
@media(max-width:1600px){
	/*Dashbord Page New Added*/
	.dashboardPlate ul li{width: 162px; height: 162px;}
	.dashboardPlate ul li a figure p.imgBack{bottom: 15px; font-size: 10px;}
	.minDashNamePnl { margin: 15px 0;}
	.minDashNamePnl h3 {font-size: 35px;}
	.minDashNamePnl p {margin: 7px 0 0 0; font-size: 14px;}
	.dashBoardBlockCell {padding:15px;}
    .dashboardPlate ul li a figure:after {top: 13px; line-height: 60px;}

}
/*========screen 1365px=========*/
@media(max-width:1365px){
	.dashboardPlate ul li {width: 160px; height: 160px;}
	.dashboardPlate ul li a figure p.imgBack{bottom: 10px;font-size: 12px;}
	.dashboardPlate .dashboardPlateRow h3 {padding: 4px 8px; font-size: 18px;}
}
/*========screen 1024px=========*/
@media(max-width:1024px){
	.dashBoardBlockTable { min-height: calc(100vh - 147px);}
	.new_dashboardPage .NewdashboardPage_INR{height:auto; margin-bottom:15px;} /*defalt scroll*/
	.mainCTNPnlINR.new_dashboardPage{padding-bottom:0;}
	.dashboardPlate .dashboardPlateRow {display: block; width: 670px;  max-width: 100%; white-space: normal;}
	.dashboardPlate .dashboardPlateRow ul{white-space: normal;}
}

/*========screen 768px=========*/
@media(max-width:768px){
	.dashboardPlate .dashboardPlateRow{width:500px; white-space: normal;}
	.minDashNamePnl h3 {font-size: 30px;}
	.minDashNamePnl {text-align: left;}

}
@media(max-width:610px){
	.dashboardPlate .dashboardPlateRow{width: 330px;}
}
/*========screen 480px=========*/
@media(max-width:480px){
	.minDashNamePnl{text-align: center;}
	.dashboardPlate .dashboardPlateRow{width: auto;}
	.dashboardPlate{display: block;}
	.dashboardPlate ul li{float: none; margin:5px auto;}
	.dashboardPlate .dashboardPlateRow h3{text-align: center; background: none;}
}