/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 3, 2017, 10:29:24 AM
    Author     : Xantec
*/

.widget {
    position: relative;
    clear: both;
    padding-bottom: 30px;
    width: auto;
    overflow: hidden; }

.widget-header {
    position: relative;
    height: 60px;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255,255,255, 0.3); }
.widget-header h3 {
    position: relative;
    top: 2px;
    left: 10px;
    display: inline-block;
    margin-right: 3em;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    line-height: 18px; }
.widget-header [class^="icon-"], .widget-header [class*=" icon-"] {
    display: inline-block;
    margin-left: 13px;
    margin-right: -2px;
    font-size: 16px;
    color: #fff;
    vertical-align: middle; }

.widget-content {
    padding: 20px 15px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255,255,255, 0.3); }
.widget-header+.widget-content {
    border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
.widget-nopad .widget-content {
    padding: 0; }
.widget-content:before, .widget-content:after {
    content: "";
    display: table; }
.widget-content:after {
    clear: both; }
.widget-content {
    zoom: 1; }

.widget-table .widget-content {
    padding: 0; }
.widget-table .table {
    margin-bottom: 0;
    border: none; }
.widget-table .table tr td:first-child {
    border-left: none; }
.widget-table .table tr th:first-child {
    border-left: none; }

.widget-plain {
    background: transparent;
    border: none; }
.widget-plain .widget-content {
    padding: 0;
    background: transparent;
    border: none; }

.widget-box { }
.widget-box .widget-content {
    background: #E3E3E3;
    background: #FFF; }

.error-container {
    margin-top: 4em;
    margin-bottom: 4em;
    text-align: center; }

.error-container h1 {
    margin-bottom: .5em;
    font-size: 120px;
    line-height: 1em;
}

.error-container h2 {
    margin-bottom: .75em;
    font-size: 28px;
}

.error-container .error-details {
    margin-bottom: 1.5em;
    font-size: 16px;
}

.error-container .error-actions a {
    margin: 0 .5em;
}

/* Message layout */

ul.messages_layout {
    position: relative;
    margin: 0;
    padding: 0
}

ul.messages_layout li {
    float: left;
    list-style: none;
    position: relative
}

ul.messages_layout li.left {
    padding-left: 75px
}

ul.messages_layout li.right {
    padding-right: 75px
}

ul.messages_layout li.right .avatar {
    right: 0;
    left: auto
}

ul.messages_layout li.right .message_wrap .arrow {
    right: -12px;
    left: auto;
    background-position: 0 -213px;
    height: 15px;
    width: 12px
}

ul.messages_layout li.by_myself .message_wrap .info a.name {
    color: #fff;
}

ul.messages_layout li a.avatar {
    position: absolute;
    left: 0;
    top: 0
}

ul.messages_layout li a.avatar img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

ul.messages_layout li .message_wrap {
    position: relative;
    padding: 10px;
    margin-bottom: 20px;
    float: left;
    background-color: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255,255,255, 0.2);
}

ul.messages_layout li .message_wrap .arrow {
    background-position: 0 -228px;
    height: 15px;
    width: 12px;
    height: 15px;
    width: 12px;
    position: absolute;
    left: -12px;
    top: 13px
}

ul.messages_layout li .message_wrap .info {
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255, 0.3);
    line-height: 23px
}

ul.messages_layout li .message_wrap .info .name {
    float: left;
    font-weight: bold;
    color: #d8d8d8;
}

ul.messages_layout li .message_wrap .info .time {
    float: left;
    font-size: 11px;
    margin-left: 6px
}

ul.messages_layout li .message_wrap .text {
    float: left;
    width: 100%;
    padding-top: 5px
}

ul.messages_layout .dropdown-menu li {
    width: 100%;
    font-size: 11px;
}

/*------------------------------------------------------------------
[8. Miscellaneous]
*/



.chart-holder {
    width: 100%;
    height: 250px;
}

.dropdown-menu li>a:hover, .dropdown-menu .active>a, .dropdown-menu .active>a:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

.accordion-heading {
    background: #e5e5e5;
}

.accordion-heading a {
    color: #545454;
    text-decoration: none;
    font-weight: bold;
}

.btn-facebook-alt i {
    color: #23386a;
}

.btn-twitter-alt i {
    color: #0098d0;
}

.btn-google-alt i {
    color: #b6362d;
}

.btn-linkedin-alt i {
    color: #0073b2;
}

.btn-pinterest-alt i {
    color: #ab171e;
}

.btn-github-alt i {
    color: #333;
}

.all-icons li {
    list-style: none;
}





/*mailbox css*/


.mailbox {    position: relative;	border:1px solid rgba(255,255,255,0.3);	margin:0;	padding:0;}
.mailbox p {    font-size: 14px;    margin: 0 0 0.2em;}
.mailbox time {    color: #333333;    font-size: 11px;}
.self .mailbox time {    color: #FFFFFF;}
.mini-stats {    border-left: 1px solid #DDDDDD;    list-style: none outside none;    margin: 0;    padding: 0;}
.mini-stats li {    border-left: 1px solid #FFFFFF;    border-right: 1px solid #DDDDDD;    padding-bottom: 6px;    text-align: center;}
.mini-stats .sparkline_bar_good, .mini-stats .sparkline_bar_neutral, .mini-stats .sparkline_bar_bad {    font-size: 12px;    font-weight: bold;    text-align: center;}
.mini-stats li:last-child {    border-right: 0 none;}
.mini-stats .values {    font-size: 12px;    padding: 10px 0;}
.mini-stats .values strong {    display: block;    font-size: 18px;    margin-bottom: 2px;}
.mini-stats .sparkline_bar_good, .mini-stats .sparkline_bar_neutral, .mini-stats .sparkline_bar_bad {    font-size: 12px;    font-weight: bold;    text-align: center;}
.mini-stats .sparkline_bar_good {    color: #459D30;}
.mini-stats .sparkline_bar_neutral {    color: #757575;}
.mini-stats .sparkline_bar_bad {    color: #BA1E20;}


.mailbox-list {    background-color: rgba(0,0,0,0.3);    border-right: 1px solid rgba(255, 255, 255, 0.2);    float: left;    height: 620px;    list-style: none outside none;    padding: 0;
                   margin:0;    width: 260px;}
.mailbox-list .mailbox-item {    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    padding: 25px 15px 20px 25px;    position: relative;}
.mailbox-list .mailbox-item span {    color: #fff;    display: block;}
.mailbox-list .mailbox-item .mailbox-item-star, .mailbox-list .mailbox-item .mailbox-item-attachment, .mailbox-list .mailbox-item .mailbox-item-time, .mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions {    position: absolute;}
.mailbox-list .mailbox-item .mailbox-item-star {    left: 7px;    opacity: 0;    transition: opacity 0.2s ease-in-out 0s;}
.ie8 .mailbox-list .mailbox-item .mailbox-item-star {    display: none;}
.ie8 .mailbox-list .mailbox-item:hover .mailbox-item-star {    display: block;}
.mailbox-list .mailbox-item .mailbox-item-attachment {    left: 7px;    top: 45px;}
.mailbox-list .mailbox-item .mailbox-item-avatar {    border-radius: 4px 4px 4px 4px;    float: left;    height: 40px;    width: 40px;}
.mailbox-list .mailbox-item .mailbox-item-from, .mailbox-list .mailbox-item .mailbox-item-subject {    margin-left: 45px;}
.mailbox-list .mailbox-item .mailbox-item-from {    font-weight: bold;    margin-top: 2px;}
.mailbox-list .mailbox-item .mailbox-item-time {    opacity: 1;    right: 15px;    top: 8px;    transition: opacity 0.2s ease-in-out 0s;}
.mailbox-list .mailbox-item .mailbox-item-time .text {    color: #ccc;    font-size: 12px;}
.mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions {    opacity: 0;    right: 0;    top: 0;    transition: opacity 0.2s ease-in-out 0s;    width: 75px;}
.ie8 .mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions {    display: none;}
.mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions > a, .mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions .dropdown > a {    color: #ccc;    margin-left: 5px;}
.mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions > div {    display: inline-block;}
.mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions .dropdown-menu {    margin-top: 0;}
.mailbox-list .mailbox-item .mailbox-item-time .mailbox-item-actions .tag-icon {    border-radius: 3px 3px 3px 3px;    display: inline-block;    height: 11px;    margin: 0 5px 0 -13px;    width: 11px;}
.mailbox-list .mailbox-item .mailbox-item-time:hover .text {    opacity: 0;}
.mailbox-list .mailbox-item .mailbox-item-time:hover .mailbox-item-actions {    opacity: 1;}
.mailbox-list .mailbox-item .mailbox-item-subject {    font-size: 12px;    margin-bottom: 4px;}
.mailbox-list .mailbox-item .mailbox-item-preview {    color: #ccc;    font-size: 12px;}
.mailbox-list .mailbox-item:hover {    background-color: rgba(0, 0, 0, 0.3);    cursor: pointer !important;}
.mailbox-list .mailbox-item:hover .mailbox-item-star {    opacity: 0.2;}
.mailbox-list .mailbox-item.active {    background-color: rgba(0, 0, 0, 0.3);}
.mailbox-list .mailbox-item.starred .mailbox-item-star {    display: block;    opacity: 1;}
.mailbox-content {    background-color: rgba(0, 0, 0, 0);    height: auto;    margin-left: 260px;    position: relative;    width: auto;}
.mailbox-content .message-header {    background-color: rgba(0,0,0,0.5);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    padding: 31px 25px;}
.mailbox-content .message-header .message-from {    font-weight: bold;}
.mailbox-content .message-header .message-to {    color: #999999;}
.mailbox-content .message-header .message-time {    color: #999999;    position: absolute;    right: 15px;    top: 10px;}
.mailbox-content .message-header .message-actions {    left: 50%;    margin-left: -65.7px;    position: absolute;    width: 115px;	margin-top: 16px;}
.mailbox-content .message-header .message-actions a {    background-color: rgba(0,0,0,0.5);    border-bottom: 1px solid rgba(255,255,255,0.25);    border-left: 1px solid rgba(255,255,255,0.25);    border-top: 1px solid rgba(255,255,255,0.25);    color: #CFCAE0;    margin: 0 0 0 -4px;    padding: 4px 7px;}
.mailbox-content .message-header .message-actions a:hover {    color: #5E518D;}
.mailbox-content .message-header .message-actions a:first-child {    border-bottom-left-radius: 15px;    border-top-left-radius: 15px;    padding-left: 10px;}
.mailbox-content .message-header .message-actions a:last-child {    border-bottom-right-radius: 15px;    border-right: 1px solid rgba(255,255,255,0.25);    border-top-right-radius: 15px;}
.mailbox-content .message-content {    padding: 25px;}

/*mailbox css end*/





.stats-container{    display: block;    margin: 0 0 20px;}
.stats-heading {    background-color:rgba(0,0,0,0.3);    border-top-left-radius: 2px;    border-top-right-radius: 2px;    letter-spacing: 0.04em;    padding: 5px 10px;    text-align: center;    text-transform: uppercase;}
.stats-body-alt {    background-color:rgba(0,0,0,0.4);    border-bottom-left-radius: 0;    border-bottom-right-radius: 0;    font-size: 20px;    font-weight: 300;    padding: 10px;}
.stats-body-alt .text-center {    margin-top: -5px;}
.stats-body-alt .text-top {    font-size: 24px;    vertical-align: super;}
.stats-body-alt div + small {    display: block;    font-size: 14px;    font-weight: 400;    margin-bottom: 4px;    margin-top: -7px;    opacity: 0.7;    text-align: center;}
.stats-body-alt div + small {    display: block;    font-size: 14px;    font-weight: 400;    margin-bottom: 4px;    margin-top: -7px;    opacity: 0.7;    text-align: center;}
.stats-footer {    border-bottom-left-radius: 2px;    border-bottom-right-radius: 2px;    color: rgba(255, 255, 255, 0.4);    padding: 5px 10px; 	background-color:rgba(0,0,0,0.5);}

.thumb img, .thumb-xs img, .thumb-sm img, .thumb-md img, .thumb-lg img {    height: auto;    max-width: 100%;    vertical-align: middle;}
.thumb {    display: inline-block;    width: 64px;}
.m-r {    margin-right: 15px;}


.timeline-messages:before {    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);    bottom: 0;    top: 0;    width: 2px;}
.timeline-messages:before, .msg-time-chat:before, .msg-time-chat .text:before {    content: "";    left: 58px;    position: absolute;    top: -2px;}
.timeline-messages, .msg-time-chat, .timeline-messages .msg-in, .timeline-messages .msg-out {    position: relative;}
.timeline-messages .msg-in .arrow {    border-right: 8px solid rgba(0,0,0,0.2) !important;}
.timeline-messages .msg-in .arrow {    border-bottom: 8px solid rgba(0, 0, 0, 0);    border-top: 8px solid rgba(0, 0, 0, 0);    display: block;    height: 0;    left: -8px;   position: absolute;    top: 13px;    width: 0;}
.timeline-messages .msg-out .arrow {    border-right: 8px solid rgba(0,0,0,0.5) !important;}
.timeline-messages .msg-out .arrow {    border-bottom: 8px solid rgba(0, 0, 0, 0);    border-top: 8px solid rgba(0, 0, 0, 0);    display: block;    height: 0;    left: -8px;    position: absolute;    top: 13px;    width: 0;}
.msg-time-chat:first-child:before {    margin-top: 16px;}
.msg-time-chat:before {    background:rgba(255,255,255,0.2);    border: 2px solid rgba(255,255,255,0.55);    border-radius: 100px 100px 100px 100px;    height: 10px;    margin: 23px 0 0 -4px;   width: 10px;}
.msg-time-chat:hover:before {   background:rgba(0,0,0,0.5);}
.msg-time-chat:first-child {    padding-top: 0;}
.message-img {    float: left;    margin-right: 30px;    overflow: hidden;}
.message-img img {    display: block;    height: 44px;    width: 44px;}
.message-body {    margin-left: 80px;}
.msg-time-chat .msg-in .text {    background: rgba(0,0,0,0.2);    padding: 10px;}
.msg-time-chat .msg-out .text {    background:rgba(0,0,0,0.5);    padding: 10px;}
.msg-time-chat p {    color: #fff;    margin: 0;}
.msg-time-chat .attribution {    color: #ccc;    font-size: 11px;    margin: 0 0 5px;}
.msg-time-chat {    overflow: hidden;    padding: 8px 0;}
.msg-in a, .msg-in a:hover {    background:rgba(255,255,255,0.2);    color: #FFFFFF;    padding: 2px 4px;    text-decoration: none;}
.msg-out a, .msg-out a:hover {    background:rgba(0,0,0,0.3);    color: #FFFFFF;    padding: 2px 4px;    text-decoration: none;}

.chat-form {    background-color: rgba(0,0,0,0.2);    clear: both;    margin-top: 15px;    padding: 10px;}
.chat-form .input-cont {    margin-right: 55px;}
.chat-form .input-cont input {    margin-bottom: 0;}
.chat-form .input-cont input {    border: 1px solid rgba(255,255,255,0.2) !important;    border-radius: 0 0 0 0;    margin-top: 0;    width: 94%;}
.chat-form .input-cont input {    background-color:rgba(0,0,0,0.2) !important;}
.chat-form .input-cont input:focus {    border: 1px solid rgba(255,255,255,0.2) !important;}
.chat-form .btn-cont {    float: right;    margin-top: -38px;    position: relative;}
.chat-form .btn-cont .btn {    border-radius: 0 0 0 0;    margin-top: 8px;}


.users-list.user-list-no-hover li:hover {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: default;
}
.users-list li {
    -moz-box-sizing: content-box;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    margin: 0 -50px;
    padding: 12px;
    list-style:none;
}
.users-list li:hover {
    background: none repeat scroll 0 0 rgba(51, 51, 51, 0.25);
}
.users-list li:last-child {
    margin-bottom: -10px;
}
.users-list img {
    height: 50px;
    width: 50px;
}
.users-list .user-info {
    margin-left: 62px;
}
.users-list .name, .users-list .time, .users-list .position {
    line-height: 16px;
}
.users-list .name {
    text-transform: uppercase;
}
.users-list .name a {
    text-decoration: none;
}
.users-list .name a:hover {
    color: #9BD0F6;
}
.users-list .time {
    color: #D2D2D2;
    font-size: 11.05px;
}
.users-list .options {
    margin-top: 5px;
}
.users-list .comment {
    color: #F8F8F8;
    font-size: 11.05px;
    line-height: 2.3em;
}

/*------------------------------------------------------------------------------
# Xantec
------------------------------------------------------------------------------*/

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: #fff; }

.header {
    background: #fff;
    padding: 0; }
.header .brand {
    padding: 0; }
.header .brand a {
    padding: 6px 0 0 30px;
    width: 500px;
    display: block; }
.header .brand a img {
    width: 100%; }

.header .contact {
    float: right; }
.header .contact a {
    display: block;
    font-size: 18px;
    font-family: 'Play', sans-serif;
    font-weight: bold;
    padding: 38px 30px 0 0;
    color: #333; }
.header .contact a:hover {
    color: #efba32; }
.header .contact a i {
    margin-right: 6px;
    color: #efba32; }

.navigation {
    color: #fff;
    padding: 0 30px;
    overflow: hidden;
    background: #545451; }
.navigation span {
    color: #ccc;
    display: block;
    font-size: 16px;
    padding: 20px 0;
    float: left; }
.navigation span b {
    color: #fff;
    font-family: 'Play', sans-serif; }
.navigation ul {
    margin: 0;
    margin-right: -20px;
    list-style: none;
    float: right; }
.navigation ul li {
    float: left; }
.navigation ul li a {
    color: #ccc;
    padding: 20px;
    display: block;
    font-size: 16px; }
.navigation ul li a i {
    margin-right: 10px;
    color: #efba32; }
.navigation ul li a:hover{
    color: #fff;
    background: #333; }

.footer {
    padding: 15px 30px;
    background: #fff;
    color: #333;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.wrapper {
    background: #f4f4f1;
    padding: 30px;
    overflow: visible;
    display: block; }

.page-content {
    color: #333;
    display: block;
    padding: 0; }

.widget {
    overflow: visible;
    padding-bottom: 60px; }

.widget-header {
    height: auto;
    color: #000;
    background: transparent; }
.widget-header [class^="icon-"],
.widget-header [class*=" icon-"] {
    margin-left: 0;
    font-size: 30px;
    color: #efba32; }
.widget-header h3 {
    color: #333;
    font-weight: bold;
    font-family: 'Play', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0; }

.widget-content {
    padding: 30px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    background: #fff; }

.widget-content .dataTable thead th {
    font-weight: bold;
    font-family: 'Play', sans-serif;
    font-size: 16px;
    color: #000;
    padding: 6px 15px;
    border-bottom: 1px #000 solid; }
.widget-content .dataTable tbody td {
    background: #fff;
    padding: 6px 15px;
    border-bottom: 1px #ccc solid;
    color: #333; }
.widget-content .dataTable tbody td:first-child {
    font-weight: bold; }
.widget-content .dataTable tbody td.up span {
    font-weight: bold;
    color: #00d400 !important; }
.widget-content .dataTable tbody td.down span {
    font-weight: bold;
    color: #d40000 !important; }
.widget-content .dataTable tbody tr:nth-child(odd) td {
    background: #f4f4f1; }

.jqplot-target {
    color: #333 !important; }
	
.jqplot-highlighter-tooltip{
	background-color:#ffffff!important;
	color:#000000!important;
	padding:5px!important;
}

.jqplot-highlighter-tooltip span{
	color:#000000!important;
}

@media (max-width:700px) {
	.header .brand a img {
		width:auto!important;
	}
}

@media (max-width:600px) {
	
	.header .contact a {
		font-size:12px!important;
	}
	
	.navigation {
		padding: 0 10px!important;
	}
	
	.navigation span {
		font-size:12px!important;
		padding: 10px 0!important;
	}
	
	.navigation ul{
		margin-right: 0px!important;
	}
	
	.navigation ul li a {
		font-size:12px!important;
		padding:10px!important;
	}
	
	.header .brand a img {
		width:auto!important;
	}
	
	.top-navbar img
	{
		height: 40px!important;
	}
	
	.header .brand a{
		padding: 6px 0 0 15px!important;
	}
	
	.header .contact a {
		padding: 15px 15px 0 0!important;
	}
	
	body {
		font-size: 12px!important;	
	}
	
	.widget-content .dataTable thead th{
		font-size: 14px!important;
		padding: 6px 10px!important;
	}
	
	.widget-header h3{
		font-size: 16px!important;
	}

	.widget-content{
		padding:15px!important;
	}
	
	.wrapper{
		padding:15px!important;
	}
}


@media (max-width:400px) {
	.header .contact a {
		font-size:11px!important;
	}
	
	.navigation {
		padding: 0 10px!important;
	}
	
	.navigation span {
		font-size:11px!important;
		padding: 10px 0!important;
	}
	
	.navigation ul{
		margin-right: 0px!important;
	}
	
	.navigation ul li a {
		font-size:11px!important;
		padding:10px!important;
	}
	
	.header .brand a img {
		width:auto!important;
	}
	
	.top-navbar img
	{
	height: 40px!important;
	}
	
	.header .brand a{
		padding: 6px 0 0 15px!important;
	}
	
	.header .contact a {
		padding: 15px 15px 0 0!important;
	}
	
	body {
		font-size: 12px!important;	
	}
	
	.widget-content .dataTable thead th{
		font-size: 14px!important;
		padding: 6px 10px!important;
	}
	
	.widget-header h3{
		font-size: 14px!important;
	}
	
	.widget-content{
		padding:10px!important;
	}
	
	.wrapper{
		padding:10px!important;
	}
}