/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 4.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

body {
	/* COLOR */
	--main-color : #193532;
	--bg-color : #101f1d;
	--second-color : #32c5c5;
	--red-color: #ff5252;
	--orange-color: #ffa500;
	--green-color : #10b368;
	--grey-color : #a0a0a0;

	--box-shadow : 0 0 7px rgba(0,0,0,0.4);

	background-color: var(--bg-color);
	color: white;
}

hr.clear {
	border:none;
	margin:0;
	clear: both;
}

a,
.btn-tab {
	color: var(--second-color);
	transition: 150ms;
}

a:hover,
.btn-tab:hover {
	text-shadow: 0 0 1px var(--second-color);
	text-decoration: none!important;
}

.margin-bottom {
	margin-bottom: 50px;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

span.mini {
	font-size: 14px!important;
}

/*---------------------------------------------------------------------------*/
/* NAVIGATION */
/*---------------------------------------------------------------------------*/
nav {
    color: #fff;
    background-color: var(--main-color);
    width: 100%;
    height: 56px;
    line-height: 56px;
}

.nav-expanded .brand-sidebar {
	background: var(--main-color) !important;
	box-shadow: none;
	height: 56px;
}

.brand-sidebar {
	box-shadow: none;
}

.brand-sidebar .logo-wrapper {
    padding: 7px 10px;
    font-size: 23px;
}

ul.side-nav.leftside-navigation {
	background-color: var(--main-color);
	top: 94px;
	border-radius: 0 3px 0 0;
}

.side-nav li > a,
#slide-out li a i {
	color: white;
	transition: 150ms;
}

.side-nav li > a:hover,
#slide-out li a:hover i,
#slide-out li a.active,
#slide-out li a.active i {
	color: var(--second-color);
	transition: 150ms cubic-bezier(.63,.84,.18,1.49);
}

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

.side-nav li > a:hover i,
.side-nav li > a.active i {
	margin-right: 0.5em!important;
}

ul.right.hide-on-med-and-down,
ul.right.hide-on-med-and-down li,
ul.right.hide-on-med-and-down li a,
ul.right.hide-on-med-and-down li a li i {
	height: 56px !important;
	color: white;
	transition: 150ms;
}

ul.right.hide-on-med-and-down li a:hover i {
	color: var(--second-color);
}

.avatar-status {
	line-height: 40px;
}

/*---------------------------------------------------------------------------*/
/* TOOLTIP */
/*---------------------------------------------------------------------------*/
.material-tooltip {
	background-color: transparent;
	color: var(--main-color)!important;
}
.material-tooltip .backdrop {
	background-color: var(--second-color)!important;
}

/*---------------------------------------------------------------------------*/
/* BUTTON */
/*---------------------------------------------------------------------------*/
.fixed-action-btn ul li a,
.fixed-action-btn a {
	background: var(--second-color)!important;;
	box-shadow: 0 0 0px var(--second-color) !important;
	transition: 250ms;
}

.fixed-action-btn a:hover {
	background: var(--second-color);
	text-shadow: 0 0 1px white;
	box-shadow: 0 0 7px var(--second-color)!important;
}

.add-btn {
	position: relative;
	top: 5px;
}

.container {position: relative;}
.btn-back {
	position: fixed;
	top: 6px;
    	left: 287px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	padding-top: 8px;
	z-index: 9999;
	color: white;
	font-size: 21px;
	background: var(--second-color)!important;;
	box-shadow: 0 0 0px var(--second-color) !important;
	transition: 250ms;
}

.btn-1  {
	padding: 10px 20px;
	margin-top: 15px;
	background-color: var(--second-color);
	color: var(--main-color);
	transition: 200ms;
	border:none;
	float: right;
	border-radius: 3px;
}

.btn-1:focus,
.btn-1:hover {
	background-color: var(--second-color);
	color: white;
	box-shadow: 0 0 7px var(--second-color);
}

.btn-tab {
	font-size: 30px;
	position: relative;
	top: 6px;
	cursor: pointer;
}

.btn-tab.active {
	transform: rotate(90deg);
}

h5 {
	cursor: default;
}

[data-tab-item]{
	display: none;
}

[data-tab-item].active {
	display: block;
}

/*---------------------------------------------------------------------------*/
/* LED */
/*---------------------------------------------------------------------------*/
.led {
	width:10px;
	height:10px;
	display:inline-block;
	margin-right:5px;
	border-radius: 50%;
}

.critical-led,
.red-led {
	background-color: var(--red-color);
	box-shadow: 0 0 7px var(--red-color);
}
.warning-led,
.orange-led {
	background-color: var(--orange-color);
	box-shadow: 0 0 7px var(--orange-color);
}
.normal-led,
.green-led {
	background-color: var(--green-color);
	box-shadow: 0 0 7px var(--green-color);
}
.default-led,
.grey-led {
	background-color: var(--grey-color);
	box-shadow: 0 0 7px var(--grey-color);
}
/*---------------------------------------------------------------------------*/
/* LIST */
/*---------------------------------------------------------------------------*/
.scrollable-list.border {
	background-color: transparent;
	border: none!important;
	border-radius: 0;
	overflow: hidden;
	/*border-bottom: 1px solid var(--second-color);
	border-top: 1px solid var(--second-color);*/
}

.scrollable-list.border:hover {
	overflow: auto;
}

.scrollable-list.border li {
	background-color: var(--main-color);
	padding: 5px 10px;
	margin-bottom: 10px;
	box-shadow: var(--box-shadow);
}

#critical-list li span,
#warning-list li span,
#alert-list li span {
	border-radius: 50%;
}

#critical-list li,
#alert-list li {
	border-left: 3px solid var(--red-color);
}
#warning-list li {
	border-left: 3px solid var(--orange-color);
}

/*---------------------------------------------------------------------------*/
/* CARD */
/*---------------------------------------------------------------------------*/
.card-margin {
	padding: 15px;
	float: left;
}
.card {
	background-color: var(--main-color);
	box-shadow: var(--box-shadow);
	padding: 15px;
	overflow: visible;
}

.card-header {
	margin-bottom: 10px;
}

.row.relative {
	position: relative;
}

.fixed-right {
	position: absolute;
	right: 0!important;
}

.dropzone {
    border:none!important;
    background: #ffffff30!important;
}

/*---------------------------------------------------------------------------*/
/* FORM */
/*---------------------------------------------------------------------------*/
.crud-form {
	max-width: 600px;
	margin-bottom: 150px;
	overflow: visible;
}

.crud-form label {
	transition: 150ms;
	display: inline-block;
	transform: translate(0px,0px);
}

.crud-form input[type="checkbox"] ~ label {
	transform: translate(0px,0px);
}

.crud-form .input-field .prefix.active,
.crud-form label.active {
	color: var(--second-color)!important;
}

.crud-form input:focus {
	border-bottom: 1px solid var(--second-color)!important;
	box-shadow: 0 1px 0 0 var(--second-color)!important;
}

.crud-form textarea {
	max-width: 100%;
	min-width: 100%;
	height: 150px;
	transition: 150ms;
	padding: 7px 10px;
	max-height: 600px;
}

.crud-form textarea:focus {
	border-color: var(--second-color)!important;
	box-shadow: 0 0px 0 1px var(--second-color)!important;
	outline: none;
}

.crud-form input[type="submit"] {
	padding: 10px 20px;
	margin-top: 15px;
	background-color: var(--second-color);
	color: var(--main-color);
	transition: 200ms;
	border:none;
	float: right;
	border-radius: 3px;
}

.crud-form input[type="submit"]:hover {
	background-color: var(--second-color);
	color: white;
	box-shadow: 0 0 7px var(--second-color);
}

.crud-form .confirm-delete {
	padding-left: 6px;
	display: inline-block;
	width: 80%;
}

[type="checkbox"]:checked + label:before {
	border-right: 2px solid var(--second-color);
	border-bottom: 2px solid var(--second-color);
}

.help-info {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	border:1px solid rgba(255,255,255,0.7);
	padding: 7px;
	border-radius: 2px;
}

.help-info i {
	font-size: 13px;
}

/*---------------------------------------------------------------------------*/
/* SHOPS */
/*---------------------------------------------------------------------------*/
#profile-page-about-details {
	margin-top: 30px;
	position: relative;
}

#profile-page-about-details .img-shop {
	z-index: 2;
	position: relative;
	border:10px solid var(--main-color);
	box-shadow: -7px 0 10px rgba(0,0,0,0.4);
	width: 200px;
	height: 200px;
	display: block;
	border-radius: 50%;
	margin-right: 25px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#profile-page-about-details .text {
	padding: 0 15px;
	background-color: var(--main-color);
	position: absolute;
	top: 100px;
	left: 180px;
	padding-left: 21px;
	border-radius: 2px;
	transform: translateY(-50%);
	box-shadow: var(--box-shadow);
}

#profile-page-about-details p {

}

.card-container.shop-info h4,
.card-container.shop-info p {
	margin:0;
}

table.shop-detail td {
	padding: 7px 3px!important;
}

select {
	border:1px solid white;
	border-radius: 0px;
	padding: 3px 3px;
	height: 2rem;
}

.select-wrapper {
	float: none;
	margin-bottom: -20px;
	margin-top: -6px;
}

.select-wrapper span.caret{
	color: white;
}

.select-dropdown {
	background-color: var(--second-color);
}

.select-dropdown li span{
	color: var(--main-color)!important;
}

table.turnover > tbody > tr:hover td {
	background-color: var(--second-color)!important;
}

/*---------------------------------------------------------------------------*/
/* TABLE */
/*---------------------------------------------------------------------------*/
.striped.highlight {
	font-size: 14px;
}

.striped.highlight tr {
	background-color: transparent !important;
	border-bottom: 10px solid var(--bg-color);
}

.striped.highlight tr td{
	background-color: var(--main-color) !important;
	padding: 10px 15px;
}

.striped.highlight tr:nth-child(odd) td {
	background-color: #1b3b3954!important;
}

table.dataTable {
	border-collapse: collapse;!important;
}

table.dataTable th {
	border:3px solid var(--bg-color);
	border-top: 10px solid var(--bg-color);
}

table.dataTable tr.even td {
	background-color: #132725!important;
}

table.dataTable tr {
	border-bottom: none;
}

table.dataTable td {
	background-color: var(--main-color) !important;
	padding: 5px 5px!important;
	border:3px solid var(--bg-color);
}

.card-panel {
	box-shadow: none;
	background-color: transparent;
}

.dataTables_wrapper .dataTables_filter input {
	margin-left: 0;
}

.dataTables_wrapper input:focus {
    border-bottom: 1px solid var(--second-color)!important;
    box-shadow: 0 1px 0 0 var(--second-color)!important;
}

.dataTables_info {
	color: white !important;
}

.dataTables_paginate .paginate_button{
	color: white!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background:none!important;
	background-color: var(--second-color)!important;
	border:1px solid transparent!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: white!important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
	color: white;
}

/*---------------------------------------------------------------------------*/
/* TICKETING */
/*---------------------------------------------------------------------------*/
#ticketing .tag{
	color: var(--red-color);
	transform: translateY(3px);
}

#ticketing .prio-green {
	color: var(--green-color);
}
#ticketing .prio-orange {
	color: var(--orange-color);
}
#ticketing .prio-red {
	color: var(--red-color);
}

#ticketing h2 {
	margin:0!important;
}



#ticketing .card-header-2 {
	color: var(--second-color);
	margin-bottom: 20px;
}

#ticketing .card-header-2 i{
	transform: translateY(6px);
}

#ticketing  .alert-info p{
	margin: 0;
}

#ticketing .message-container {
	padding: 30px;
	border-radius: 0 30px 30px 30px;
	background-color: #245656;
}

#ticketing .message-container textarea {
	border:none;
	background-color: #245656;
	max-width: 100%;
	min-width: 100%;
	min-height: 100px;
}

#ticketing .message-container textarea:focus {
	outline: none;
	box-shadow: none;
	height: 26px;
}

#ticketing button[type="submit"] {
	margin-top: 15px;
	background-color: var(--second-color);
	color: var(--main-color);
	transition: 200ms;
	border:none;
	float: right;
	border-radius: 3px;
}

#ticketing button[type="submit"]:hover {
	background-color: var(--second-color);
	color: white;
	box-shadow: 0 0 7px var(--second-color);
}

#ticketing span.badge {
	float: none;
	color: white;
	padding: 0 2px;
	opacity: 0.8;
}

#clear-dropzone.btn-1 {
	width: 100%;
	margin: 0;
	margin-bottom: 15px;
	text-align: center;
	cursor: pointer;
}

.dropzone .dz-preview {
	margin:7px!important;
}

.dropzone.dz-clickable {
	text-align: center;
}

#ticketing .row-badge .badge{
	margin: 0;
	padding: 0;
}

#ticketing .profile-picture {
	width: 100%;
	display: block;
	border-radius: 50%;
	border: 5px solid #276060;
}

#ticketing .profile-username {
	text-align: center;
}

.indice-info {
	/*transform: translate(-16px,-14px);*/
	font-size: 14px!important;
	font-weight: lighter;
	opacity: 0.5;
}

#ticketing #DataTables_Table_active_info {
	opacity: 0.5;
}

/*---------------------------------------------------------------------------*/
/* CONTENT */
/*---------------------------------------------------------------------------*/
#content {
	padding: 0px 27px;
}

#profile-dropdown{
	overflow: hidden;
	background-color: var(--main-color);
}
#profile-dropdown:hover{
	background-color: var(--main-color);
}

#profile-dropdown:hover li {
	background-color: var(--main-color);
}

#profile-dropdown li a {
	color: white!important;
}

#profile-dropdown li a:hover {
	color: var(--second-color)!important;
	background-color: rgba(0,0,0,0.2);
}


/*---------------------------------------------------------------------------*/
/* ALERT - FLASH MESSAGE */
/*---------------------------------------------------------------------------*/
.alert {
	padding: 21px;
	border-radius: 3px;
	border:2px solid;
	margin-bottom: 25px;
	animation: alertIn 550ms;
}

.alert-error {
	background-color: #ff52527a;
	border-color: var(--red-color);
}

.alert-warning {
	background-color: #ffa50066;
	border-color: var(--orange-color);
}

.alert-success {
	background-color: #10b36861;
	border-color: var(--green-color);
}

.alert-info {
	background-color: #a0a0a042;
	border-color: var(--grey-color);
}

@keyframes alertIn {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	25% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

/*---------------------------------------------------------------------------*/
/* RESPONSIVE */
/*---------------------------------------------------------------------------*/
@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;
	}
}