/*! _orders.scss | Nephos | CSS Ninja */

/* ==========================================================================
Orders pages styles
========================================================================== */

/***
TABLE OF CONTENTS
=============================================================================
0. Order Cards
1. Order List Cards
=============================================================================
***/

/* ==========================================================================
0. Order Cards
========================================================================== */
.sp-menu {
	margin-top: 40px;
}

.invoicing-mh .section {
	min-height: 703px;
}

.min-height-orders {
	min-height: 673px;
}

.order-card {
	position: relative;
	padding: 20px;
	overflow: visible;

	&:hover {
		box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18) !important;
	}
		//Meta info
		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20px;
			text-transform: uppercase;
			&.ring-title {
				padding-bottom: 0;
				padding-top: 20px;
			}
			span {
				display: block;
				a {
					color: $dark-text;
					font-size: 13px;
					&:hover {
						color: $primary;
						text-decoration: underline;
					}
				}
			}
		}
		//Circle Progress
		.circle-chart-wrapper {
			text-align: center;
			position: relative;
		}
		.bn-center {
			text-align: center;
		}
		.circle-chart-circle {
			animation: circle-chart-fill 2s reverse;
			transform: rotate(-90deg);
			transform-origin: center;
		}
		//Icon
		.chart-icon {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 50px;
			margin-top: -20px;
			img {
				position: relative;
				width: 30px;
				height: 30px;

				&.p-icon {
					width: 15px;
					height: 40px; 
				}

				&.c-icon {
					height: 35px; 
				}
			}

			&.bn-company {
				top: 40%;

				img {
					height: 50px;
					width: auto;
				}
			}
		}
		//Ring label
		.ring-title {
			span {
				font-size: 13px;
				color: $title-grey;
				float: left;
				font-weight: 600;
			}

			img {
				float: right;
				height: 30px;
				width: 30px;
			}
		}
		//Tags
		.tag {
			position: relative;
			display: flex !important;
			border-radius: inherit;
			&.is-primary {
				background: $primary !important;
				color: $white !important;
			}
			&.is-success {
				background: $green !important;
				color: $white !important;
			}
			&.is-warning {
				background: $orange !important;
				color: $white !important;
			}
			&.is-danger {
				background: $red !important;
				color: $white !important;
			}
		}
		//circle chart animation
		@keyframes circle-chart-fill {
			to { stroke-dasharray: 0 100; }
		}
	}

/* ==========================================================================
1. Order List Cards
========================================================================== */

.list-card {
	.list-card-header {
		font-family: 'Quicksand', sans-serif;
		font-weight: 500;
		padding: 15px 20px;
		background: $smoke-white;
		border-bottom: 1px solid $fade-grey;
		color: $muted-grey-bold;
	}
		//List
		ul {
				//List Item
				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px 20px;
					cursor: pointer;
					color: $muted-grey;
					font-size: 0.75rem;
					font-weight: 500;
					border-top: 1px solid $fade-grey;
					&:first-child {
						border-top: none;
					}
					&:hover {
						background: $light-grey;
						color: $dark-text;
						.order-indicator {
							opacity: 0.8;
						}
					}
						//Active State
						&.is-active {
							color: $primary;
							.order-indicator {
								opacity: 1;
							}
						}
						//Indicator
						.order-indicator {
							height: 8px;
							width: 8px;
							border-radius: 50%;
							opacity: 0;
							&.is-progress {
								background: $primary;
							}
							&.is-preparing {
								background: $green;
							}
							&.is-warning {
								background: $orange;
							}
							&.is-issue {
								background: $red;
							}
						}
					}
				}
			}
			.dom-pad {
				padding: .75rem;
			}

			.information-padtop {
				padding-top: 35px;

				&.comp-non {
					padding-top: 0;

					.inner.company-register-select {
						display: flex;
						justify-content: center;
						align-items: center;

						.select:not(.is-multiple) {
							height: 3.85em!important;
							width: 400px;
						}
					}

					&.back-continue {
						justify-content: space-between;
					}

					&.continue-btn {
						justify-content: flex-end;
					}
				}

				.inp-sc {
					padding-right: 0;

					.btn-forms {
						button {
							display: inline-block !important;
							width: 150px;
							border: 1px solid #64ab4c;
							background-color: transparent;
							color: grey;
							&:focus {
								background-color: $brand-orange;
								color: #fff;
							}
						}
					}
					ul { 
						margin: 20px 0;
						li {
							&:first-child {
								font-weight: 600;
								margin-bottom: 10px;
							}
						}
					}
				}

				.chosen-container-active.chosen-with-drop .chosen-single {
					border: 1px solid #b5b5b5;
					border-radius: 0;
				}

				.chosen-container .chosen-results li.highlighted  {
					color: $brand-orange;
				}

				.chosen-container-single .chosen-single div:after {
					color: #4a4a4a; 
				}

				.select-domen {
					padding-left: 0;

					.select {
						height: 43px!important;
						border: 1px solid #b5b5b5;
						border-radius: 0;

						.styledSelect {
							background-color: inherit;
						}

						ul {

							li {
								&:hover {
									color: $brand-orange;
									background-color: inherit;
								}
							}
						}

						span {
							color: #4a4a4a;
						}
					}
				}

				.an-ABN {
					background-color: #d9edf6;
					padding: 20px;
					border: 1px solid #cee8ee;

					div {
						margin-bottom: 20px;
						color: #357098;
						font-weight: 700;
					}

					p {
						color: #357098;
						font-weight: 400;
					}

					button {
						margin-top: 10px;
					}
				}

				.color-ddd {
					color: #aaa;
				}

				&.associate {

					.b-mw {
						min-width: 150px;
					}

					.b-bottL {
						padding-right: 20px;

						&-R {
							padding-left: 20px;
							padding-right: 12px;
						}

						.details {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border: 1px solid #dbdbdb;
							padding: 20px;

							i {
								margin-bottom: 10px;
								font-size: 80px;
								color: #59686f;
							}
						}
					}
				}

				.b-b {
					span {
						font-size: 15px;
						font-weight: 600;
						color: #777;
					}
					i {
						&:before {
							color: $brand-orange;
						}
					}
					border-bottom: 1px solid #dbdbdb;
					margin-bottom: 15px;
					color: $brand-orange;
					font-size: 23px;
					line-height: 1.2;
					padding-bottom: 15px;
				}

				.button-one {
					padding-right: 5px;

					&-two {
						padding-left: 0;
					}
				}

				.is-flex {
					justify-content: flex-end;
					align-items: center;

					&.icon-com {
						position: relative;

						em {
							color: #98a6ad;
						}

						i {
							position: absolute;
							right: 0;
							top: 15px;
						}

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

			.fz-h {
				font-size: 20px;

				&.pay-business {
					// padding-left: 0;
					font-size: 25px;
				}
			}
//List Card
.order-list-card {
	padding: 40px;

	&.invoicing {
		padding: 0;
		margin-top: 35px;

		.total {
			padding: 0 28px;
			background-color: $smoke-white;
			font-size: 18px;
			color: $brand-orange;
			border-bottom: 1px solid #dbdbdb;

			&-user {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.subscriptions {
					padding: 20px 0;
				}
			}
		}

		.table-block {
			margin-top: 0;
		}

		.btn-pop {
			margin: 15px;
			position: relative;

			i {
				position: absolute;
				z-index: 10;
				top: 15px;
				left: 12px;
				color: #828282;
				font-size: 14px;
			}

			a {
				min-width: 130px!important;
				background: #fff;
				color: #828282;
				border: 1px solid #ededed;
				height: 40px;
				padding-left: 30px;
			}
		}
	}
		//Progress block
		.progress-block {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			h3 {
				font-size: .85rem;
				font-weight: 500;
			}
				//Progress bar
				progress {
					max-width: 120px;
						//Color Modifiers
						&.primary-progress {
							&::-webkit-progress-value {
								background-color: $primary;
							}
							&::-moz-progress-bar {
								background-color: $primary;
							}
							&::-ms-fill {
								background-color: $primary;
							}
						}
						&.success-progress {
							&::-webkit-progress-value {
								background-color: $green;
							}
							&::-moz-progress-bar {
								background-color: $green;
							}
							&::-ms-fill {
								background-color: $green;
							}
						}
						&.warning-progress {
							&::-webkit-progress-value {
								background-color: $orange;
							}
							&::-moz-progress-bar {
								background-color: $orange;
							}
							&::-ms-fill {
								background-color: $orange;
							}
						}
						&.danger-progress {
							&::-webkit-progress-value {
								background-color: $red;
							}
							&::-moz-progress-bar {
								background-color: $red;
							}
							&::-ms-fill {
								background-color: $red;
							}
						}
					}
				}
		//Order block layout
		.order-block {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10px 0;
			img {
				height: 40px;
				width: 40px;
				border-radius: 50%;
			}
				//handled by
				.handled-by, .status, .date, .total {
					margin: 0 10px;
					div:first-child {
						font-size: .65rem;
						text-transform: uppercase;
						font-weight: 600;
					}
					div:nth-child(2) {
						color: $muted-grey-bold;
						&.is-date {
							font-size: .85rem;
							font-weight: 500;
						}
						&.is-price {
							font-size: 1rem;
							font-weight: 500;
							color: $primary;
							&:before {
								content: '$';
								font-size: 80%;
								position: relative;
								top: -3px;
							}
						}
					}
				}
				//Total
				.total {
					.tag {
						margin: 0 5px;
						font-weight: 400;
					}
				}
				//Icon
				.order-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 40px;
					width: 40px;
					svg {
						stroke: $muted-grey;
						stroke-width: 1.4px;
						height: 20px;
						width: 20px;
					}
				}
				//Tag
				.tag {
					&.primary-tag {
						background: $primary;
						color: $white;
					}
					&.success-tag {
						background: $green;
						color: $white;
					}
					&.warning-tag {
						background: $orange;
						color: $white;
					}
					&.danger-tag {
						background: $red;
						color: $white;
					}
				}
			}
		//Table
		.table-block {
			margin-top: 20px;
			table {
				border-collapse: collapse;
				margin: 0;
				padding: 0;
				width: 100%;
				table-layout: fixed;
				th {
					font-size: .9rem !important;
					font-weight: 700;
					color: #565656;
				}
				td {
					font-size: .85rem;
					font-weight: 600;
					color: $muted-grey-bold;
					padding: .9rem 2em !important;
				}
			}
			table tr {
				border-bottom: 1px solid $fade-grey;
				padding: .35em;
			}
			table th,
			table td {
				padding: .9em 2em;
				letter-spacing: 0.7px;
				position: relative;
				vertical-align: middle;

				.file {
					justify-content: center;
				}

				.user-span {
					background-color: #5cb85c;
					color: #fff;
					padding: .2em .6em .3em;

					&.order-span {
						text-align: center;
						display: block;
						border-radius: 7px;
						font-size: 12px;

						&.c-order {
							background-color: $brand-orange;
						}

						&.span-red {
							background-color: #e4201d;
						}

						&.span-blue {
							background-color: #2490b1;
						}
					}
				}

				.open-folder {
					width: 40px;
				}

				&.download {
					i {
						cursor: pointer;
						font-size: 22px;

						&:hover {
							color: $brand-orange;
						}
					}
				}

				.bg-status {

					&.bg-r {
						background-color: #f2dedf;
					}

					&.bg-g {
						background-color: #def0d8;
					}

					svg {
						position: absolute;
						color: #a44544;
						font-weight: 600;

						&.available {
							color: #3b7642;
						}
					}

					span {
						margin-left: 25px;
						color: #a44544;

						&.available-s {
							color: #3b7642;
						}
					}
				}

				.button-block {
					margin-top: 0;
				}
			}
			table th {
				font-size: .85em;
				letter-spacing: .1em;
				text-transform: uppercase;
			}
				//responsive settings
				@media screen and (max-width: 767px) {
					table td {
						.inner {
							width: 100%; 
						}
					}
				}

				@media screen and (max-width: 767px) {
					table {
						border: 0;
					}
					table caption {
						font-size: 1.3em;
					}
					table thead {
						border: none;
						clip: rect(0 0 0 0);
						height: 1px;
						margin: -1px;
						overflow: hidden;
						padding: 0;
						position: absolute;
						width: 1px;
					}
					table tr {
						border-bottom: 3px solid #ddd;
						display: block;
					}
					table td {
						border-bottom: 1px solid #ddd;
						display: block;
						font-size: .8em;
						text-align: right;

						.inner {
							width: 50%; 
						}
					}
					table td:before {
						content: attr(data-label);
						float: left;
						font-weight: bold;
						text-transform: uppercase;
					}
					table td:last-child {
						border-bottom: 0;
					}
				}
			}
			.button-block {
				margin-top: 20px;
			}
		}

		.footer-grey {
			background-color: #363636;
			color: #fff;
			padding: 30px 50px;

			ul {
				li {
					padding: 3px 0;
				}
			}

			&.columns {
				margin-bottom: 0;
				font-size: 15px;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
			}

			.title-bott {
				margin-bottom: 20px;
				font-weight: 600;

				&.font-xs {
					font-size: 10px;
				}
			}

			a {
				color: #fff;

				&.link-email {
					color: $brand-orange;

					&:hover {
						color: #fff;
					}
				}
			}

		}

		.icon-abn {
			position: relative;

			i {
				font-size: 28px;
				color: #59686f;
				position: absolute;
				left: 15px;
				top: 23px;

				&.icon-p {
					top: 12px;
				}
			}

			p {
				margin-left: 50px;

				&.p-sm {
					color: #777;
					font-size: 12px;
				}
			}
		}

		.account-mt {
			margin-top: 25px;
		}
		.c-entities-director, 
		.company-location {

			.information-padtop .inp-sc {
				&.button-center {
					margin: 0 auto;
					padding-left: 0;
				}
			}

			.information-padtop .is-flex {
				align-items: center;

				.input-check {
					margin-top: 20px;
				}
			}

			.select:not(.is-multiple) {
				height: 43px !important;
				border-radius: 10px;
				.styledSelect {
					background-color: transparent;
					font-size: 15px;
				}
				.options {
					background-color: #ededed;
					margin-top: 0;
					li {
						font-size: 15px;
						&:first-child {
							margin-bottom: 0;
						}
					}
				}
			}

			.checkbox-red label {
				display: flex;
				align-items: end;
				margin-top: 0;
			}
			.checkbox-wrap.is-small input + span {
				margin-top: 5px;
			}


			.information-padtop {
				.is-flex {
					&.icon-com {
						div {
							padding-right: 10px;
						}
					}
				}
			} 
		}

		.company-entities, .what-is-done {

			.icon-question-m {
				margin: 5px;
			}
			.information-padtop i {
				&.fa.fa-question-circle:before {
					font-size: 23px;
					color: $brand-orange;

				}
			}
			.explanation {
				padding: 15px;
				background-color: #d9edf6;
				border: 1px solid #cee8ee;
				color: #357098;
			}
		}

		.company-entities-left {

			.information-padtop .is-flex {
				align-items: inherit;
				padding-right: 18px;
			}
			.information-padtop .is-flex.icon-com i {
				right: 5px;
			}
			.control.has-addon.has-block .input-block {
				right: inherit;
				width: 43px;
				height: 43px;
				top: 12px;
				border: 1px solid #b5b5b5;
			}

			.green-letters {
				color: #1b6b00;
				div {
					padding-bottom: 4px;
				}
			}

			.what-is-done {

				.table {
					line-height: 1.6;
				}
				.table-block {
					margin-top: 0;
					table tr {
						border: none;
					}
					td {
						div { 
							&:first-child {
								margin-top: 20px;
							}
						}
					}
					h3 {
						font-size: 20px;
						margin: 15px 0;
					}
				}
				.flat-card {
					margin-top: 40px;
				}
				.info-block {
					&.info-b-green {
						color: #1b6b00;
					}
					&.info-b-red {
						color: #a44544;
					}
					svg {
						position: absolute;
					}
					span {
						margin-left: 30px;
					}
				}

				.checkbox-red label {
					display: flex;
					align-items: end;
					margin-top: 0;
				}



				.add-cart {
					padding-left: 0;
				}
				.table-position {
					display: inline-block;
					padding: 3px 10px;
					border: 1px solid #565656;
					border-radius: 5px;
					background-color: #565656;
					color: #fff;
					i {
						margin-right: 10px;
					}
				}
			}
		}