@import "//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css";

body{
	background: #f6f6f6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.btn, .btn-large{
	background-color: #55626f;
	margin-right: 15px;
}

.pagination li.active{
	background-color: #55626f;
}

.btn:hover, .btn-large:hover{
    background-color: #3d454d;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating){
	color: #999;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover{
	color: #666;
}

ul#slide-out {
    width: 250px;
    background: #3d454d;
}

.side-nav a,
.side-nav ul a,
.side-nav ul li a,
.side-nav ul li a i,
.side-nav li>a>i.material-icons{
	color: #eee;
	height: 38px;
    line-height: 38px;
}

.side-nav .sub a {
    padding: 0 20px 0 53px;
}

.side-nav .sub a:hover, .side-nav .sub li.active a{
	background-color: rgba(0, 0, 0, 0.25);
}

/*.side-nav .subheader{
	color: rgba(0,0,0,0.8);
}*/

.side-nav .divider {
	background-color: #55626f;
}

.dropdown-content li>a,
.dropdown-content li>a>i.material-icons,
.dropdown-content li>span{
	font-size: 14px;
}

.dropdown-content li>a>i.material-icons{
	height: 56px;
	line-height: 56px;
}

.side-nav li>a>i.material-icons,
.dropdown-content li>a>i.material-icons{
	font-size: 18px;
}

main{
	padding-top: 20px;
	padding-right: 25px;
}

main,
nav{
	padding-left: 275px;
}

nav{
	background-color: #fafafa;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.08), 0 1px 5px 0 rgba(0,0,0,0.08), 0 3px 1px -2px rgba(0,0,0,0.01);
}

nav a,
nav ul a{
	color: #888;
}

nav .nav-wrapper{
	padding-left: 20px;
}

nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i, .side-nav li.heading{
	height: 56px;
	line-height: 56px;
}

nav form{
	float: left;
	width: 60%;
}

nav .input-field label i{
	color: #888
}

nav form .input-field input[type=search] {
    /*width: 500px;*/
}

nav .button-collapse {
    float: right;
}

.side-nav a{
	padding: 0 20px;
}

.side-nav .dropdown-content li > a,
.side-nav .dropdown-content li > a > i.material-icons{
	color: #666;
}

.side-nav li.heading{
	color: white;
	font-weight: bold;
	/*background: #ff888d;*/
	background-color: #55626f;
	/*padding-left: 20px;*/
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.08), 0 1px 5px 0 rgba(0,0,0,0.08), 0 3px 1px -2px rgba(0,0,0,0.01);
}

/*.side-nav li.heading a,
.side-nav li.heading a.dropdown-button > i.material-icons{
	color: white;
}*/

.side-nav li.heading a.dropdown-button,
.side-nav li.heading .dropdown-content li>a,
.side-nav li.heading .dropdown-content li>span{
	height: 56px;
	line-height: 56px;
	padding: 0 20px;
}

.side-nav li.heading a.dropdown-button i.material-icons{
	margin-right: 10px;
	height: 56px;
	line-height: 56px;
}

.side-nav li>a>i.material-icons{
	margin-right: 10px;
}

th.orderno{ width:80px; }
th.status{ width:110px; }
th.price{ width:110px; }

@media only screen and (max-width: 992px){
	main,
	nav{
		padding-left: 0;
	}

	main{
		padding-top: 5px;
		padding-right: 0;
	}

	th.orderno{ width: auto; }
	th.status{ width: auto; }
	th.price{ width: auto; }
}

@media only screen and (min-width: 993px){
	.container {
		width: 85%;
	}
}

@media only screen and (min-width: 601px){
	nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i{
		height: 56px;
		line-height: 56px;
	}
}

td, th{
	padding: 7px 10px;
	font-size: 14px;
}

table.striped>tbody>tr:nth-child(odd),
table.highlight>tbody>tr:hover{
	background-color: #f8f8f8;
}

a i.material-icons{
	color: #55626f;
}

.disabled a i.material-icons {
    color: #ccc;
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav{
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.06), 0 3px 1px -2px rgba(0,0,0,0.02);
}

.side-nav .subheader{
	color: rgba(255, 255, 255, 0.34);
}

.side-nav a{
	font-weight: 400;
}

.side-nav span.badge{
	margin-top: calc(19px - 11px);
}

span.badge{
	min-width: 1.8rem;
}

span.badge.new{
	background-color: #617182;
	font-weight: 500;
    font-size: 11px;
}

.side-nav a:hover,
.side-nav li.active a{
	background-color: rgba(0, 0, 0, 0.10);
}

.side-nav li.active a{
	color: lightblue;
	font-weight: 600;
}

.card .card-title {
    font-size: 20px;
    font-weight: 400;
    color: #989898;
}

nav.tabbar {
    padding: 0;
    background: #55626f;
    height: 48px;
}

.tabs .indicator{
	height: 3px;
}

.tabs .tab.disabled a, .tabs .tab.disabled a:hover{
	color: rgba(255,255,255,0.3) !important;
}

.breadcrumbs {
    margin-bottom: 3px;
}

.breadcrumbs a.breadcrumb {
    color: rgba(0,0,0,0.8);
    font-size: 13px;
}

.breadcrumbs a.breadcrumb:before{
	font-size: 16px;
	color: rgba(0,0,0,0.3);
	margin: 0 4px 0 2px;
}

.breadcrumbs a.breadcrumb:last-child {
    color: rgba(0,0,0,0.3);
	cursor: default;
}

#dropzone {
    padding: 30px;
    text-align: center;
    background: #f6f6f6;
    border: dashed 2px #ccc;
    border-radius: 4px;
    font-weight: 600;
    font-size: 22px;
    color: #aaa;
}

/*
	TOOLTIP
*/

.tt {
	/*background: #e9e9e9;
	border-bottom: dashed 1px rgba(0,0,0,0.8);
	padding: 0 0.4em;
	cursor: help;
	font-style: normal;*/
	position: relative;
}
.tt::after {
	content: attr(data-info);
	display: inline;
	position: absolute;
	bottom: -45px; right: calc(50% - 20px);
	opacity: 0;
	/*width: 230px;*/
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5em;
	padding: 0.5em 0.8em;
	background: rgba(0,0,0,0.8);
	color: #fff;
	pointer-events: none; /* This prevents the box from apearing when hovered. */
	transition: opacity 250ms, bottom 250ms;
}
.tt::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -13px;
	right: 50%;
	margin-right: -5px;
	opacity: 0;
	width: 0; height: 0;
	border: solid transparent 5px;
	border-bottom-color: rgba(0,0,0,0.8);
	transition: opacity 250ms, bottom 250ms;
}

.tt.ttl:before{
	left: 20px;
	right: inherit;
	margin-right: -5px;
}

.tt.ttl:after{
	left: 0px;
	right: inherit;
}

.tt:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
.tt:hover::after,
.tt:hover::before {opacity: 1;}
.tt:hover::after {bottom: -35px;}
.tt:hover::before {bottom: -3px;}

.card-content ul.pagination {
    margin: 3px 0 0 0;
}

.heading span{
	line-height: normal;
    margin: 11px 0;
    display: inline-block;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.heading span strong{
	display: block;
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.dropdown-content li>a, .dropdown-content li>span{
	color: #3d454d;
}

input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
	border-bottom: 1px solid #3d454d;
    box-shadow: 0 1px 0 0 #3d454d;
}

/*
	TICKETS
*/

.ticket-label{
	font-weight: bold;
	margin-bottom: 20px;
}

/*
	CKEDITOR
*/

body.cke_editable{
	background: white;
	padding: 5px 20px;
}

.cke_chrome{
	margin-bottom: 10px;
}

.tabbar a.btn{
	margin-top: 6px;
	margin-right: 6px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	background-color: white;
	color: #55626f;
}

blockquote{
	border-color: #55626f;
}

@media only screen and (max-width: 992px){
	.tabbar a.btn{
		top: 60px;
		right: 10px;
		background-color: inherit;
		color: inherit;
	}
}