@import "colors";

@mixin lighten-color {
	color: $grey-50 !important;
}

.lighten-text {
	@include lighten-color;
}

@mixin dark-color {
	color: $grey-800 !important;
}

.dark-text {
	@include dark-color;
}

.white-text {
	color: $white !important;
}

.background-brand {
	background-color: $grey;
}

i.material-icons, .btn .material-icons {
	font-size: 24px;
}

.container-fluid .btn-group {
	margin-top: 0;
}

.navbar {
	padding: 0;
}

.navbar.navbar-custom, .navbar.navbar-default.navbar-custom {
	background: $grey-900;
	border-radius: 0;
	color: white;
	z-index: 1050;
	margin: 0 0 45px 0;
}

.navmenu-default .navmenu-nav>li>a:hover, .navbar-default .navbar-offcanvas .navmenu-nav>li>a:hover, .navmenu-default .navmenu-nav>li>a:focus, .navbar-default .navbar-offcanvas .navmenu-nav>li>a:focus {
	color: $primary;
}

.navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus, .navbar.navbar-default .dropdown-menu li > a:hover, .navbar.navbar-default .dropdown-menu li > a:focus {
	background-color: $primary !important;
}

.navmenu-default .navmenu-nav>li>a, .navbar-default .navbar-offcanvas .navmenu-nav>li>a {
	@include lighten-color;
}

.navbar.navbar-custom .navbar-form {
    padding: 0;
}

.navbar.navbar-custom ul.nav.navbar-nav {
	margin: 0;
}

.navbar-toggle {
	display: block;
	margin: 0;
}

.dropdown-menu.dropdown-menu-custom {
	position: absolute !important;
	background-color: white !important;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
}

.navbar.navbar-custom ul.nav.navbar-nav > li {
	float:left;
	margin: 0 10px 0 0;
}

.navbar-nav-custom #search_input {
	margin-top: 15px;
	margin-right: 10px;
}

.navbar-nav-custom {
	position: absolute;
	right: 0;
	top: 15px;
}

#sidemenu {
	background-color: $grey-800;
	color: $white;
	top: 50px;
	width: 250px;
	overflow: initial;


	> .dropdown-menu {
		width: 100%;
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		box-shadow: none;
		-webkit-box-shadow: none;
		border: none;
		background: none;
		top: 0;
		right: 0;
		
		
		li > a {
			margin: 0;
			border-radius: 0;
			color: $white;
			
		}
	}

	.navmenu-nav.dropdown-menu {
		background: $grey-800;
		padding: 0;
		margin: 0;
		position: absolute;
		left: 185px;
		top: 0;
		max-height: 252px;
		overflow-y: auto;

		a:hover {
			background: $primary;
		}
	}
}

.btn-menu i {
	font-size: 26px;
}

.dropdown .dropdown-menu {
	display: none;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.modal-header {
	@include dark-color;
}

.nav .dropdown.open > ul a {
	@include dark-color;
}

.navmenu-default .navmenu-nav>.open>a, .navbar-default .navbar-offcanvas .navmenu-nav>.open>a, .navmenu-default .navmenu-nav>.open>a:hover, .navbar-default .navbar-offcanvas .navmenu-nav>.open>a:hover, .navmenu-default .navmenu-nav>.open>a:focus, .navbar-default .navbar-offcanvas .navmenu-nav>.open>a:focus {
	background-color: $grey-50;
	@include dark-color;
}

.navmenu-default .navmenu-nav>.active>a, .navbar-default .navbar-offcanvas .navmenu-nav>.active>a, .navmenu-default .navmenu-nav>.active>a:hover, .navbar-default .navbar-offcanvas .navmenu-nav>.active>a:hover, .navmenu-default .navmenu-nav>.active>a:focus, .navbar-default .navbar-offcanvas .navmenu-nav>.active>a:focus {
	background-color: $grey-50;
	@include dark-color;
}

.navmenu-default .navmenu-nav.dropdown-menu, .navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
	background-color: $grey-50;
	@include dark-color;

}

.form-control, .form-group .form-control, .form-group.is-focused .form-control {
    border: 0;
    background-image: linear-gradient($primary, $primary), linear-gradient($grey, $grey);
}

.page-title {
	@include lighten-color;
	font-size:20px;
	font-weight:bold;
	margin: 10px 0 0 10px;
}

body {
	background-color: $body-bg;
	height: 100%;

	&#loginpage {
		background-color: $body-login-bg;
	}
}

html {
	height: 100%;
}

.primary-content {
	margin-bottom: 25px;
}

.main-table, .primary-content {
	@include lighten-color;
	padding: 15px;
	background: $grey;
}

.horizontal dt {
	width: 13em;
	float: left;
}

.horizontal dd {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.card-title {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-image a {
	display:block;
}

.header-filter::before {
	background-color: $white !important;
}

.card-signup {
	 background-color: #adc0cb !important;
     max-width: 300px;
     display: block;

	.header {
		padding:0;
		margin:0;
		box-shadow: none;
		border: none;
	}

	.content {
		padding-top: 40px;
		border:none;
	}

}

.card {
	border-radius: 0;
	box-shadow: none;
    background-color: white;
    border: solid 1px #b8b8b8;

	&.carousel {
		position: relative;
	}
	.carousel-control.right {
		right: 25px;
	}
	.header {
		padding: 0px;
	}

	.header, .nav-tabs {
		border-radius: 0;
	}

	.header-primary-content, .content-primary-content {
		background: linear-gradient(60deg, #263238, #607d8b);
	}

	.card-background {
		height: 280px;
	}

	.content {
		overflow-x: hidden;
	}
}

.artwork-actions, .motives-actions {
	margin-bottom: 14px;
}
.artwork-actions .dropdown-toggle, .motives-actions .dropdown-toggle {
	display: block;
	margin: 0;
}

.btn-group-table-actions {
	white-space: nowrap;

	.btn {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.main-table {
	th:last-child, td:last-child {
		text-align: right;
	}
}

.no-margin {
	margin: 0 !important;
}

.text-brand {
	color: $grey;
}

.card-image .carousel-inner {
	max-height: 158px;
	border-radius: 6px;
}

.table-responsive {
	border: 0;
}

.hide-slide-controls {
	.carousel-indicators {
		display:none;
	}
	.carousel-control {
		display:none;
	}
}

.company-dropdown {
	display: inline-block;
	width: 85%;
}

.card-no-shadow {
	box-shadow: none !important;
}

.card-no-shadow:hover {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.card-no-radius {
	border-radius: 0;
}

.card.card-artwork-form {
	padding: 20px;
	margin: 15px 0 0 0 !important;

	&.hidden {
		visibility:hidden;
		display: none;
	}
}

.card.artwork-card {
	.header {
		padding: 0;
		margin: 0;
		border: none;
		box-shadow: none;
	}

	&:hover {
		box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 27px -2px rgba(0, 0, 0, 0.26), 0 1px 47px 0 rgba(0, 0, 0, 0.18);
	}

	&.sold {
		background-color: $artwork-card-sold-bg;
	}
	&.consigned_in {
		background-color: $grey-200;
	}
	&.on_consignment, &.on_loan {
		background-color: $artwork-card-on-loan-bg;
	}
	&.reserved {
		background-color: $artwork-card-reserved-bg;
	}
	&.inactive, &.not_for_sale {
		background-color: $black;
	}
}

.card.primary {
	background: $blue-grey-500;
	color: $white;

	.panel {
		color: $black;
	}

	.checkbox label, .radio label, label {
		color: $white;
	}
}

.row.artwork-view-container {
	margin-left: -7px;
	margin-right: -7px;

	.card {
		margin-bottom: 14px;

		.content {
			padding: 7px 15px;
		}
	}

	.col {
		padding-left: 7px;
		padding-right: 7px;
	}
}

.people-checkboxes .checkbox {
	margin-right: 10px;
	margin-top: 10px;
}

.complex-form-entities .form-group {
	margin: 0;
}

.complex-form-remove {
	margin-top: 35px;
}

.mac-finder, .project-tree {
	background: $grey-200;
}

.mac-finder ul, .project-tree ul {
	height: 350px;
	padding: 0;
	list-style: none;
	background: $grey;
	@include lighten-color;
	margin: 0;
	overflow: auto;
}

.mac-finder li.selected, .project-tree li.selected {
	background: $grey-700;
}

.mac-finder li, .project-tree li {
	padding: 5px 25px 5px 5px;
	border-top: 1px solid white;
	cursor: pointer;
	white-space: nowrap;

	i {
		vertical-align: middle;
	}
}

.mac-finder li:last-child, .project-tree li:last-child {
	border-bottom: 1px solid white;
}

.mac-finder-path, .project-tree-path  {
	padding: 5px;
}

.mac-finder ul.minimized, .project-tree ul.minimized {
	width: 33px;
}

.path-title {
	cursor: pointer;
}

.selected-location i.selected-location-icon {
	font-size: 72px;
}

.selected-location {
    padding: 25px;
    margin: 25px;
    color: white;
    background: $grey;
}

div.artwork-scanner {
	width: 200px;
	height: 220px;
	float: left;
}

div.artwork-search {
	float: right;
	width: 300px;
}

div.artwork-scanner video {
	border: 2px solid blue;
	background-color: grey;
	width: 100%;
	height: 100%;
}

.spinner {
	display: inline-block;
	opacity: 0;
	width: 0;
	-webkit-transition: opacity 0.25s, width 0.25s;
	-moz-transition: opacity 0.25s, width 0.25s;
	-o-transition: opacity 0.25s, width 0.25s;
	transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
	cursor: progress;
}

.has-spinner.active .spinner {
	opacity: 1;
	width: auto;
}

.has-spinner.btn-mini.active .spinner {
	width: 10px;
}

.has-spinner.btn-small.active .spinner {
	width: 13px;
}

.has-spinner.btn.active .spinner {
	width: 16px;
}

.has-spinner.btn-large.active .spinner {
	width: 19px;
}

.card-actions {
	position: absolute;
    left: 15px;
    top: 15px;

    .dropdown {
		margin-right: 5px;

		li a {
			font-size: 13px;

			i {
				margin-right: 10px;
			}
		}
    }
}

.main-table .table-responsive {
	overflow-x: visible;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}

#circleG{
	width:146px;
	position: relative;
}

.circleG{
	background-color:rgb(255,255,255);
	float:left;
	height:31px;
	margin-left:17px;
	width:31px;
	animation-name:bounce_circleG;
		-o-animation-name:bounce_circleG;
		-ms-animation-name:bounce_circleG;
		-webkit-animation-name:bounce_circleG;
		-moz-animation-name:bounce_circleG;
	animation-duration:2.24s;
		-o-animation-duration:2.24s;
		-ms-animation-duration:2.24s;
		-webkit-animation-duration:2.24s;
		-moz-animation-duration:2.24s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	border-radius:20px;
		-o-border-radius:20px;
		-ms-border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
}

#circleG_1{
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#circleG_2{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#circleG_3{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}



@keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(0,0,0);
	}

	100%{}
}

@-o-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(0,0,0);
	}

	100%{}
}

@-ms-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(0,0,0);
	}

	100%{}
}

@-webkit-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(0,0,0);
	}

	100%{}
}

@-moz-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(0,0,0);
	}

	100%{}
}

.btn.btn-primary.btn-status.active {
	background-color: #ff573a;
}

.modal-dialog.modal-artwork {
	position: fixed;
}

.status-row {
	margin-top: 5px;
	margin-bottom: 5px;
}

.hidden-price {
	display: none;
}

.fix-ap {
	margin-top: 55px;
}

.table_img {
	max-width: 200px;
	width: 100%;
	height: auto;
}

.transaction--invalid {
	background: rgb(255, 106, 0);
}
.company--no-owner {
	background: rgb(255, 106, 0);
}
.company--many-owners {
	background: rgb(255, 47, 52);
}

table.row-sorter {
	tbody td {
		cursor: n-resize;
	}

	th.media, td.media {
		width: 250px;
	}

	tr.sorting-row td {
		background-color: #ccc;
	}

	&.sorting-table tbody tr:not(.sorting-row) td {
		opacity: 1;
		color: #bbb;
	}

	th:last-child, td:last-child {
		text-align: left;
	}

	th.text-right:last-child, td.text-right:last-child {
		text-align: right;
	}
}

.loader {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.5);

	.circular {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -50px;
		height: 100px;
		width: 100px;
		animation: rotate 2s linear infinite;
	}

	.path {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
		animation:
						dash 1.5s ease-in-out infinite,
						color 6s ease-in-out infinite;
		stroke-linecap: round;
	}
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;
	}
}
@keyframes color {
	100%, 0% { stroke: #d62d20; }
	40% { stroke: #0057e7; }
	66% { stroke: #008744; }
	80%, 90% { stroke: #ffa700; }
}

.loader--projects, .loader--task {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load--projects3 1.4s infinite linear;
  animation: load--projects3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  overflow: hidden;
}
.loader--projects:before, .loader--task:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader--projects:after, .loader--task:after {
  background: #ddd;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load--projects3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load--projects3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
	.last-col {
		float: right;
	}
}

@media (min-width: 992px) {
	.page-content, .page-content > .container-fluid {
		height: 100%;
	}
}

@media screen and (max-width: 767px) {
	ul.nav a.btn {
		height: 40px !important;
		min-width: 40px !important;
		width: 40px !important;
	}

	ul.nav a.btn i {
		transform: translate(-10px, -12px) !important;
		font-size: 20px !important;
	}

	.navbar-nav-custom {
		top: 24px;
	}


	.navbar.navbar-custom ul.nav.navbar-nav > li {
		margin: 0 !important;
	}
}

.error-message {
  color: red;
}

.label.sellable {
	background-color: red;
}

.sellable .label.sellable {
	background-color: green;
}

.reserved .label.sellable {
	background-color: yellow;
}


.label.consignable {
	background-color: red;
}
.consignable .label.consignable {
	background-color: green;
}

.label.loanable {
	background-color: red;
}
.loanable .label.loanable {
	background-color: green;
}

.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.fix-dt-width {
	width: 10em !important;
}
.full-height {
	height: 100% !important;
}

.notification {
	position: absolute;
	top: -8px;
	right: 0px;
	background-color: red;
}

#modal-scan-disable {
	width: 800px;
	height: 600px;
	padding-right: 0 !important;
	overflow: hidden;

	.modal-content {
		position: relative;
	}

	.modal-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		.close {
			color: #555;
			width: 26px;
			height: 26px;
			border-radius: 13px;
			background: #fff;
			opacity: 0.8;
			padding-top: 2px;
		}
	}

	.modal-body {
		padding: 0;
	}

	.modal-footer {
		position: absolute;
		bottom: 35px;
		left: 10px;
		right: 10px;
		z-index: 9999;
	}
}

.modal-backdrop.in {
	background: #fff;
	opacity: 0.85;
}
.modal-dialog span.select2-container, .modal span.select2-container {
    z-index:30050;
}

.price-list-item {
  font-weight: bold;
}

table.colorized-rows tr:nth-child(even) {
  color: #31708f;
  background-color: #d9edf7;
}


table.colorized-rows tr:nth-child(even) a {
  color: #31708f;
}