EVOLUTION-NINJA

Edit File: main.css

html, body {
	margin:0 !important;
	padding:0 !important;
	color: #333333 !important;
	font-family: 'Roboto', sans-serif !important;
	overflow-x:hidden !important;
	background:#EEEEEE !important;
}
span, label, h1, h2, h3, h4, h5, h6, p, ul, li {
	margin:0 auto;
	padding:0;
}
p {
    margin: 0 0 0px !important; 
}
a
{
	text-decoration:none !important;
	transition:all .5s ease-in-out;
}
.clr {
	clear:both;
}

/*-------------------------------- Header Top--------------------------------------------*/
.page_container
{
	background:#fff;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-bottom: 3px solid #bbb;
}

.header_top
{
	background:#F8F8F8;
	padding-top:5px;
	padding-bottom:5px;
	box-shadow: inset 0 -10px 8px -5px rgba(0,0,0,0.1);
}
.my_left_header
{
	text-align:right;
	padding-top: 20px;
}
.my_left_header ul
{
	background:#EEEEEE;
	border: 1px solid #ccc;
	display: inline-block;
	padding: 5px 10px;
	text-align:right;
}
.my_left_header ul li
{
	display: inline-block;
	text-align:right;
}
.my_left_header ul li a
{
	color:#E65524;
}

@media only screen and (min-width:320px) and (max-width:640px)
{
	.my_logo img
	{
		display:block;
		margin:auto;
	}
	
	.my_left_header
	{
		text-align:center;
	}
}

/*------------------------- nav bar ---------------------------------------*/
.my_nav
{
	border-bottom: 1px solid #c5d9ec;
	background:#EEEEEE;
	padding-top: 5px;
	padding-left: 15px;
    padding-right: 15px;
}

.act
{
	background-color: #f7f7f7;
}

.act a, .navigation nav ul li a:hover
{
	box-shadow: 4px -3px 6px -3px rgba(0,0,0,0.3);
	border-color: #c5d9ec;
	border-radius: 5px 5px 0 0;
	border-width: 1px 1px 0;
	border-style: solid;
	width: auto;
	text-align:center;
}

.navigation nav ul li a
{
	min-width: 95px;
	text-align:center;
	padding: 5px 20px !important;
}

.navigation nav ul li
{
	margin-left:5px;
	margin-right:5px;
}
.act a
{
	color: #004a80 !important;
	font-weight: bold;
}

#dd-menu li a
{
	text-align:left !important;
}

#dd-menu li a:hover
{
	box-shadow: initial !important;
	border: initial !important;
	background-color:transparent !important;
	font-weight:bold;
}

.ion-navicon-round:before {
    color: #333 !important;
}

/*------------------------ nav bar dropdown -------------------*/
.my_dropdown 
{
	background:#F7F7F7;
	border-bottom: 1px solid #bebebe;
	padding-left: 25px;
    padding-right: 25px;
}
.my_dropdown ul
{
	margin-bottom:0px;
	padding-top:5px;
	padding-bottom:5px;
}
.my_dropdown ul li
{
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
}

.my_dropdown ul li a
{
	color:#000;
}

.dd_act a
{
	font-weight:bold;
}
.my_dropdown ul li a:hover
{
	color:#E65524;
}

.my_refresh
{
	background:#F4F4F4;
	padding-bottom:8px;
	padding-top:8px;
	padding-left:10px;
	padding-right:10px;
	margin-left:0px !important;
	margin-right:0px !important;
	box-shadow: inset 0 4px 12px -10px black;
	border-bottom: 1px dotted #aaa;
	border-radius: 0 0 5px 5px;
}

.dropdown-menu
{
	//background:transparent !important;
}
		
.logs
{
	background: url(../images/logs.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.teams
{
	background: url(../images/teams.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.users
{
	background: url(../images/user.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.departments
{
	background: url(../images/list_departments.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}
.ticket
{
	background: url(../images/open_tickets.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.newTicket
{
	background: url(../images/new_ticket.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.kb
{
	background: url(../images/kb.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.faq-categories
{
	background: url(../images/faq-categories.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.canned
{
	background: url(../images/canned.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.overdueTickets
{
	background: url(../images/overdue_tickets.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

.closedTickets
{
	background: url(../images/closed_tickets.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	padding-left: 20px;
}

@media only screen and (min-width:320px) and (max-width:640px)
{
	.navigation nav ul li a
	{
		text-align:left !important;
	}
	.navigation nav ul li a:hover
	{
		width: 100% !important;
	}
}
/*---------------------- line chart ------------------------*/
.line_chart
{
	padding-top:15px;
	padding-bottom:15px;
	margin-left:0px !important;
	margin-right:0px  !important;
	border-bottom:1px solid #555;
}
.line_chart h3
{
	color:#0A568E;
	font-weight:bold;
	margin-top:0px;
	font-size:20px;
}

/*--------------------------- statistics ------------------------*/
.statistics
{
	padding-top:15px;
	padding-bottom:15px;
	margin-left:0px !important;
	margin-right:0px  !important;
}

.statistics h3
{
	color:#0A568E;
	font-weight:bold;
	margin-top:0px;
	font-size:20px;
}

.sta_tabs
{
	margin-top:15px;
	background:#EEF3F8;
	border-bottom: 1px solid #aaa !important;
	padding-top:5px;
	padding-left: 15px !important;
    padding-right: 15px !important;
	
}
.sta_tabs>li.active>a, .sta_tabs>li.active>a:focus, .sta_tabs>li.active>a:hover
{
	border-top: 2px solid #81a9d7 !important;
	box-shadow: 4px -1px 6px -3px rgba(0,0,0,0.2) !important;
	font-weight:bold !important;
}

.sta_tabs>li
{
	min-width: 130px;
	text-align: center;
}

.sta_tabs>li>a
{
	color: rgba(0,0,0,0.6);
	background: #F5F7FA;
	padding:5px 10px !important;
}

.sta_content
{
	padding-top:15px;
}

.my_table>tbody>tr>td, .my_table>tbody>tr>th, .my_table>tfoot>tr>td, .my_table>tfoot>tr>th, .my_table>thead>tr>td, .my_table>thead>tr>th
{
	border-top: initial !important;
	
}

.my_table>thead>tr>th
{
	border-bottom: initial !important;
	color:#000;
	text-align:right;
}

.my_table>tbody
{
	border-top: 1px dashed #ddd !important;
	border-bottom: 2px solid #ddd !important;
}

.my_table>tbody>tr:hover
{
	background:#FFFFDD !important;
}
.my_table>tbody>tr>td
{
	border-right: 1px solid #ddd !important;
	padding-top:5px !important;
	padding-bottom:5px !important;
	text-align:right;
}

/*--------------------- agents page ----------------------*/
.agents
{
	padding-top:15px;
	padding-bottom:15px;
	margin-left:0px !important;
	margin-right:0px  !important;
}

.agents h3
{
	color:#0A568E;
	font-weight:bold;
	margin-top:0px;
	font-size:20px;
}

.table_agents>tbody>tr:nth-of-type(odd)
{
	background-color: #F0FAFF !important;
}
.table_agents>tbody>tr:hover {
	background-color: #FFFFDD !important;
}
.table_agents>thead
{
	background:#eee !important;
	color:#000;
}
.table_agents>tbody>tr>td
{
	color:#000;
}

.no_row
{
	margin-left:0px !important;
	margin-right:0px !important;
}

.profile_img img
{
	border-radius:10px;
}

.pr_name1
{
	width:200px !important;
	float:left;
	margin-right:10px;
}
.pr_name2
{
	width:200px !important;
}
.pr_email
{
	width:410px !important;
}
.pr_phone1
{
	width:200px !important;
	float:left;
}
.pr_phone2
{
	float:left;
	padding:7px 5px 0px;
}
.pr_phone3
{
	width:50px !important;
}
.pr_mobile
{
	width:200px !important;
}
.pr_username
{
	width:400px !important;
	float:left;
	margin-right:10px;
}

@media only screen and (min-width:320px) and (max-width:640px)
{	
	.pr_name1
	{
		margin-bottom:15px;
	}
	
	.pr_email, .pr_username
	{
		width:200px;
	}
}
@media only screen and (min-width:641px) and (max-width:991px)
{
	.pr_username
	{
		width:360px;
	}
}

/*---------------------- user page ---------------------*/
.my_user
{
	background:#F4F4F4;
	padding-left:10px;
	padding-right:10px;
	margin-left:0px !important;
	margin-right:0px !important;
	box-shadow: inset 0 4px 12px -10px black;
	border-bottom: 1px dotted #aaa;
	border-radius: 0 0 5px 5px;
}

.our_user
{
	padding-top: 15px;
}

.our_user h3
{	
	color:#0A568E;
	font-weight:bold;
	margin-top: 5px;
	font-size:20px;
	margin-bottom:0px;
}
.right_button
{
	text-align:right;
}

.user_table
{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left:0px !important;
	margin-right:0px !important;
}

.user_table
{
	padding-top: 15px;
}

.user_table h3
{	
	color:#0A568E;
	font-weight:bold;
	margin-top: 5px;
	font-size:20px;
	margin-bottom:0px;
	padding-bottom:15px;
}
.btn_sort
{
	float:right;
	padding-top:6px;
}
		
@media only screen and (min-width:320px) and (max-width:640px)
{
	.right_button
	{
		text-align:left;
		padding-top:5px;
	}
	.btn_sort
	{
		float:none;
		padding-top:0px;
		padding-bottom: 15px;
	}
	
	.btn_icon
	{
		float: left !important;
		margin-bottom:15px !important;
	}
}