/*
	(c)2020 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/

@media not print {
	.print-only { display: none; }
}

/* ! SQUIRCLES */

.squircle {
	position: relative;
	display: inline-block;
}

	.squircle [class*="fa-"] {
		padding: 0.275em;
		width: 2.85rem;
		height: 2.85rem;

		background-color: transparent;
		border-radius: 8px;

		line-height: 0.9;
	}

		.squircle .fa-layers-text {
			padding-top: 0.45em;
		}

		.flyout-link .squircle [class*="fa-"]{
			margin-top: 0;
			transform: scale(1.2);
		}

		.squircle:hover > [class*="fa-"] {
			background-color: #FFFBEB;
			color: #FACC15;
		}

		/* individual icon adjustments */

		.squircle [class*="link"]{
			width: 2.3rem;
			height: 2.3rem;
		}

		.squircle [class*="paperclip"] {
			width: 2.3rem;
			height: 2.3rem;
		}

		.squircle [class*="envelope"] {
			width: 2.6rem;
			height: 2.6rem;
		}

		button.squircle {
			border: none;
			padding: 0;
			background-color: transparent;
		}
		button.squircle.button:hover{
			background-color: transparent;
		}

/* ! STATUS pills */

.status.status {
	display: inline-block;
	padding: 0.175em 0.75em 0.15em;
	background: #F1F5F9;

	color: #6B7280;
	font: 500 0.8rem/1.15 "Roboto", sans-serif;

	white-space: nowrap;
}

	:not(.order-card) > :not(.view-wrapper-figure).status.status {
		border-radius: 2em;
	}

	.status.status.blank { /* used as placeholder for EMPTY/NULL values */
		background-color: #F9FAFB;
        border-color: #F9FAFB;

		color: #E5E7EB;
	}

    .status.status.keywords {
        margin-right:0.25rem;
        border-radius: 0.5rem;
        background: #3B82F6;
        border-color: #3B82F6;

        color: #f0f7ff;
        font: inherit;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
    }

	.status.status.grey,
	.status.status.gray,
	.status-grey.status-grey,
	.status-gray.status-gray,
	.status-neutral.status-neutral,
	.status-new-order.status-new-order,
	.status-on-hold.status-on-hold,
	.status-waiting-on-info.status-waiting-on-info,
	.status-waiting-on-information.status-waiting-on-information {
		background: #F1F5F9;
        border-color: #F1F5F9;

		color: #6B7280;
	}

	.status.red.status.red,
	.status-red.status-red,
	.status-overdue.status-overdue,
	.status-cancelled.status-cancelled,
	.status-declined-order.status-declined-order {
		background: #F43F5E;
        border-color: #F43F5E;

		color: #FFF1F2;
	}

	.status.status.yellow,
	.status-yellow.status-yellow {
		background: #FCD34D;
        border-color: #FCD34D;

		color: #713F12;
	}

	.status.status.green,
	.status-green.status-green {
		background-color: #22C55E;
        border-color: #22C55E;

		color: white;
	}

	.status.status.orange,
	.status-writing-report.status-writing-report {
		background: #fef5e8;
        border-color: #fef5e8;

		color: #F97316;
	}

	.status.status.lemon,
	.status-capacity-medium.status-capacity-medium,
	.status-final-review.status-final-review {
		background: #fcf9e2;
        border-color: #fcf9e2;

		color: #cda20a;
	}

	.status.status.lime,
	.status-capacity-low.status-capacity-low,
	.status-completed.status-completed {
		background: #f4fde2;
        border-color: #f4fde2;

		color: #65A30D;
	}

	.status.status.cyan,
	.status-contact-initiated.status-contact-initiated {
		background: #ECFEFF;
        border-color: #ECFEFF;

		color: #06B6D4;
	}

	.status.status.blue,
	.status-order-assigned.status-order-assigned {
		background: #f0f7ff;
        border-color: #f0f7ff;

		color: #3B82F6;
	}

	.status.status.purple,
	.status-appointment-set.status-appointment-set {
		background: #fbf4ff;
        border-color: #fbf4ff;

		color: #de55d5;
	}

	.status.status.pink,
	.status-inspection-complete.status-inspection-complete  {
		background: #fdf5f9;
        border-color: #fdf5f9;

		color: #EC4899;
	}

	.status.status.rose,
	.status-capacity-high.status-capacity-high  {
		background: #fef2f2;
        border-color: #fef2f2;

		color: #FB7185;
	}


/* ! BADGES */

	.badge {
		position: absolute;
		top: -0.25em;
		left: 60%;

		padding: 0.175em 0.35em 0.15em 0.45em;
		min-width: 18px;
		min-height: 18px;

		font-size: 0.85rem;
		line-height: 1.2;
		text-align: center;
	}

/* ! CAPACITY icons */

	.capacity-level > [class*="fa"] {
		display: none;
	}

		.capacity-level.capacity-level-1 > [class*="fa"]:nth-child(1),
		.capacity-level.capacity-level-2 > [class*="fa"]:nth-child(2),
		.capacity-level.capacity-level-3 > [class*="fa"]:nth-child(3),
		.capacity-level.capacity-level-4 > [class*="fa"]:nth-child(4),
		.capacity-level.capacity-level-5 > [class*="fa"]:nth-child(5) {
			display: inline-block;
		}

			main .capacity-level-1 {
				background-color: #F1F5F9;

				color: #6B7280;
			}

		.site-header-capacity .capacity-level-2 {
			background: rgba(195,255,255,0.2);

			color: #99F6E4;
		}

			main .capacity-level-2 {
				background-color: #ECFEFF;

				color: #06B6D4;
			}

		.site-header-capacity .capacity-level-3 {
			background-color: rgba(250, 241, 155, 0.35);

			color: #FDE047;
		}

			main .capacity-level-3 {
				background-color: #fbf7d0;

				color: #e0bc00;
			}

		.site-header-capacity .capacity-level-4 {
			background-color: #FFEDD5;

			color: #FB923C;
		}

			main .capacity-level-4 {
				background-color: #FFEDD5;

				color: #F97316;
			}

		.site-header-capacity .capacity-level-5 {
			background-color: #F43F5E;

			color: #FFF1F2;
		}

			main .capacity-level-5 {
				background-color: #F43F5E;

				color: white;
			}

		.site-header-capacity .capacity-level-title {
			margin-bottom: 0;
			background-color: transparent;
		}

			.site-header-capacity .capacity-level-title.capacity-level-5 {
				color: #F43F5E;
			}

			.site-header-capacity a:hover .capacity-level-title {
				color: inherit;
			}

			main .capacity-level-title {
				background-color: transparent;
			}

				main .capacity-level-title.capacity-level-1 {
					color: #111827;
				}

				main .capacity-level-title.capacity-level-5 {
					color: #F43F5E;
				}


/* ! ANIMATION efefcts */

.updated-flash {
	animation: animationupdatedflash 0.5s linear 1;
}

	@keyframes animationupdatedflash {
	  50% {
	    background-color: #faffd7;
	  }
	}

/* ! LOADING rings */

.loading-ring,
.loading-rings {
  display: block;
  width: 5.7rem;
  height: 5.7rem;
}

	.loading-ring:after,
	.loading-rings:after {
	  content: " ";

	  display: block;
	  width: 4.6rem;
	  height: 4.6rem;
	  margin: 0 auto;

	  border-radius: 50%;
	  border: 6px solid pink;
	  border-color: pink transparent pink transparent;

	  animation: animationloadingrings 1.2s linear infinite;
	}

	@keyframes animationloadingrings {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}