/*
	(c)2020 - visuallizard.com

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

/* ! HEADER */

	body.s-clientsite {
		border-top: 6px solid black;
	}

	.s-clientsite header {
		background-color: white;
	}

	.s-clientsite .site-title > a,
	.s-clientsite .site-title > a:hover {
		background-image: url("../../img/header-logo-color-horizontal.svg") !important;
	}

	.s-clientsite .nav-link {
		color: #1F2937;
		font-size: 1rem;
	}

		.s-clientsite .nav-link:hover {
			color: #8E000A;
		}

			.s-clientsite.p-home .clientsite-nav-orders .nav-link,
			.s-clientsite.p-orders .clientsite-nav-orders .nav-link {
				color: #8E000A;
				border-color: #8E000A;
			}

			.s-clientsite.p-messages .clientsite-nav-messages .nav-link {
				color: #8E000A;
				border-color: #8E000A;
			}

			.s-clientsite.p-rewards .clientsite-nav-rewards .nav-link {
				color: #8E000A;
				border-color: #8E000A;
			}

	.s-clientsite .clientsite-nav-orders-new {
		margin-top: 1.45em;
	}

		.main-nav .nav-1 > li.clientsite-nav-orders-new {
			margin-right: 1.5em;
		}

		.s-clientsite .clientsite-nav-orders-new a {
			padding: 0.75em 1.5em 0.6em;
			border: 1.5px solid #B91C1C;
			border-radius: 8px;
			background: transparent;

			color: #B91C1C;
			font-family: "Roboto", "Arial", sans-serif;
			font-size: 0.8rem;
			font-weight: 500;
			line-height: 1;
		}

			.s-clientsite .clientsite-nav-orders-new a:hover {
				border-color: transparent;
				background-color: #FBBF24;

				color: white;
			}

	.s-clientsite .site-header-notifications > a,
	.s-clientsite .site-header-capacity > a,
	.s-clientsite .site-header-profiles > a {
		background-color: #F6F6F6;

		color: #1F2937;
	}

		.s-clientsite .site-header-profiles .profile-figure:empty:after {
			color: #1F2937;
			font-weight: 600;
		}

		.s-clientsite .site-header-notifications:hover > a,
		.s-clientsite .site-header-capacity:hover > a,
		.s-clientsite .site-header-profiles:hover > a,
		.s-clientsite .site-hStyling client-site reward catalog.eader-profiles:hover .profile-figure:empty:after {
			border-color: transparent !important;
			background-color: #F8F0F0 !important;

			color: #8E000A !important;
		}

/* ! CARDS, orders */

	.order-cards-intro {
		color: #6B7280;
		font-style: italic;
	}

		.order-cards + .order-cards-intro {
			margin-top: 3em;
		}

	.order-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;

		margin-left: -1%;
		margin-right: -1%;
		margin-bottom: -2em;
	}

		.order-cards:after {
			content: "";

			flex-grow: 1;

			display: block;
			margin-bottom: 2em;
			margin-left: 1%;
			margin-right: 1%;

			border-radius: 0.875rem;
			background-color: #eee;
		}

	.order-card {
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 2em;

		color: #7C828A;
	}

		.order-card.start-new-order {
			background: #E5E7EB;

			box-shadow: none;
		}

			.order-card.start-new-order .view-wrapper-content {
				border-color: #D1D5DB;
			}

		@media (min-width: 600px) { .order-card { width: 48%; } }
		@media (min-width: 900px) { .order-card { width: 31%; } }
		@media (min-width: 1200px) { .order-card { width: 23%; } }
		@media (min-width: 1500px) { .order-card { width: 18%; } }
		@media (min-width: 1800px) { .order-card { width: 14.6%; } }
		@media (min-width: 2100px) { .order-card { width: 12.2%; } }
		@media (min-width: 2400px) { .order-card { width: 10.5%; } }
		@media (min-width: 2700px) { .order-card { width: 9.1%; } }
		@media (min-width: 3000px) { .order-card { width: 8%; } }

		.order-card:hover {
			transform-origin: center 100%;
			transition: all 0.1s;
			transform: scale(1.05) rotate(1deg);
		}

		.order-card .status {
			display: block;
			margin: 0;
			padding: 1.5em 1.75em 1em;
			border-radius: 0;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;

			text-transform: uppercase;
		}

			.order-card .status [class*="fa-"] {
				margin-right: 0.5em;
			}

			.order-card .status.invoice-status-green {
				background-color: #22C55E !important;
				color: white !important;
			}

			.order-card .status.invoice-status-yellow {
				background: #FCD34D !important;
				color: #713F12 !important;
			}

			.order-card .status.invoice-status-red {
				background: #F43F5E !important;
				color: #FFF1F2 !important;
			}

			.order-card.start-new-order .status {
				background: #E5E7EB;
			}

				.order-card.start-new-order .status:after {
					content: "";

					display: inline-block;
					height: 0.8em;
					width: 50%;

					background-color: #D1D5DB;
				}

		.order-card .view-wrapper-content {
			font-size: 0.875rem;
		}

			.order-card .status + .view-wrapper-content {
				padding-bottom: 0.5em;
			}

		.order-card .order-card-appraiser {
			display: block;
			margin: 1.75em 0 0;
			border-radius: 6px;

			color: inherit;
		}

			.order-card .order-card-appraiser:after {
				content: '';
				clear: both;
			}

			.order-card .order-card-appraiser figure {
				float: left;
				margin: 0 1em 0 0;
				width: 4.4em;
				height: 4.4em;

				border: 1px solid transparent;
			}

				.order-card .order-card-appraiser figure:after {
					font-size: 2em;
					line-height: 2.3;
				}

				.order-card .order-card-appraiser.unassigned figure {
					background-color: #f6f6f6;
				}

					.order-card.start-new-order .order-card-appraiser.unassigned figure {
						background-color: #D1D5DB;
					}

			.order-card .order-card-appraiser:hover {
				color: #FBBF24;
			}

				.order-card .order-card-appraiser:hover figure {
					border-color: #FBBF24;
				}

				.order-card .order-card-appraiser:hover figure:empty {
					background-color: #FBBF24;
				}

				.order-card .order-card-appraiser:hover h3,
				.order-card .order-card-appraiser:hover .h2 {
					color: inherit;
				}

			.order-card .order-card-appraiser.unassigned p {
				color: #E5E7EB;
				font-style: inherit;
			}

			.order-card:not(.start-new-order) .order-card-appraiser.unassigned p:empty {
				content: '';

				display: inline-block;
				height: 0.8em;
				margin-bottom: -0.2em;
				width: 50%;
				background-color: #f6f6f6 !important;
			}

		.order-card h1,
		.order-card .h1 {
			margin-bottom: 0;
			background: transparent !important;

			font-size: 2.15em;
			font-weight: 600;
		}

			.order-card.start-new-order h1:after,
			.order-card.start-new-order .h1:after {
				content: "";

				display: inline-block;
				height: 2em;
				width: 50%;

				background-color: #D1D5DB;
			}

		.order-card h2,
		.order-card .h2 {
			margin-bottom: 0;
			background: transparent !important;

			color: #6B7280;
			font-size: 1.35em;
		}

			.order-card.start-new-order h2:after,
			.order-card.start-new-order .h2:after {
				content: "";

				display: inline-block;
				height: 1.1em;
				width: 100%;

				background-color: #D1D5DB;
			}

		.order-card h3,
		.order-card .h3 {
			padding-top: 0.2em;

			color: #ccc;
			font-size: inherit;
			font-weight: inherit;
		}

			.order-card.start-new-order h3:after,
			.order-card.start-new-order .h3:after {
				content: "";

				display: inline-block;
				height: 0.8em;
				width: 50%;

				background-color: #D1D5DB;
			}

		.order-card h1,
		.order-card .h1,
		.order-card h2,
		.order-card .h2,
		.order-card h3,
		.order-card .h3,
		.order-card p {
			max-width: 100%;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

			.order-card.start-new-order p:after {
				content: "";

				display: inline-block;
				height: 0.8em;
				width: 60%;

				background-color: #D1D5DB;
			}

		.order-card.start-new-order .with-block-icon > [class*=fa]:first-child {
			background-color: #D1D5DB;

			color: #D1D5DB;
		}

		.order-card .button {
			margin: 0 auto;
		}

			.order-card.start-new-order .button:not(:hover),
			.order-card:hover .button:not(:hover) {
				border-color: transparent;
				background-color: #B91C1C;
				color: white;
			}

	.order-cards-to-archive {
		margin: 3em 0 1em;
	}

		.order-cards-to-archive a {
			text-decoration: underline;
		}

/* ! ORDERS and INVOICE view */

	.view-wrapper-content .flyout-card {}

		.view-wrapper-content .flyout-card:first-child {
		}

		.flyout-summary .flyout-subtitle,
		.flyout-summary .flyout-subtitle dt,
		.flyout-summary .flyout-subtitle dd {
			margin-bottom: 0.5em;

			line-height: 1.2;
		}

	.order-info-people {
		flex-direction: column;
	}

/* ! CARDS, catalog */


	.catalog-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;

		padding-bottom: 40vw;
		margin-bottom: 5vw;

		margin-left: -1%;
		margin-right: -1%;

		background-image: url('/img/clients/street-yellow.svg');
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 80vw auto;
	}

		.catalog-cards:after {
			content: "";

			flex-grow: 1;

			display: block;
			margin-bottom: 2em;
			margin-left: 1%;
			margin-right: 1%;

			border-radius: 12px;
			background-color: #eee;
		}

	.catalog-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 2em;

		color: #7C828A;
	}

		@media (min-width: 600px) { .catalog-card { width: 48%; } }
		@media (min-width: 900px) { .catalog-card { width: 31%; } }
		@media (min-width: 1200px) { .catalog-card { width: 23%; } }
		@media (min-width: 1500px) { .catalog-card { width: 18%; } }
		@media (min-width: 1800px) { .catalog-card { width: 14.6%; } }
		@media (min-width: 2100px) { .catalog-card { width: 12.2%; } }
		@media (min-width: 2400px) { .catalog-card { width: 10.5%; } }
		@media (min-width: 2700px) { .catalog-card { width: 9.1%; } }
		@media (min-width: 3000px) { .catalog-card { width: 8%; } }

		.catalog-card:hover {
			transform-origin: center 100%;
			transition: transform 0.1s;
			transform: scale(1.05) rotate(1deg);
		}

		.catalog-card .catalog-card-title {
			display: block;
			margin: 0;
			padding: 1.5em 1.75em 1em;
			border-radius: 0;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			background: gold;

			color: #843;
			font: 500 0.875rem/1.15 "Roboto", sans-serif;
			white-space: nowrap;
			text-transform: uppercase;
		}

			.catalog-card .catalog-card-title [class*="fa-"] {
				margin-right: 0.5em;

				font-size: 0.875em;
			}

			.catalog-card.catalog-card-unavailable .catalog-card-title {
				background: #E5E7EB;
				color: white;
			}

		.catalog-card .view-wrapper-content {
			flex-grow: 1;

			font-size: 0.875rem;
		}

			.catalog-card .view-wrapper-content.catalog-image {
				flex-grow: 0;

				display: flex;
				flex-direction: column;
				justify-content: center;

				padding: 0;
				border: 0;
				height: 150px;
				background-color: #F9FAFB;
			}

				.catalog-card .view-wrapper-content.catalog-image img {
					display: block;

					max-width: 100%;
					max-height: 150px;
					margin: 0 auto;
					border: 0;
				}

				.catalog-card.catalog-card-unavailable .view-wrapper-content.catalog-image img {
					filter: grayscale(1);
					opacity: 0.25;
				}

		.catalog-card h1,
		.catalog-card .h1 {
			margin-bottom: 0;
			background: transparent !important;

			font-size: 2.15em;
			font-weight: 600;
		}

		.catalog-card h2,
		.catalog-card .h2 {
			margin-bottom: 0;
			background: transparent !important;

			color: #6B7280;
			font-size: 1.35em;
		}

		.catalog-card h3,
		.catalog-card .h3 {
			padding-top: 0.2em;

			color: #ccc;
			font-size: inherit;
			font-weight: inherit;
		}

		.catalog-card h1,
		.catalog-card .h1,
		.catalog-card h2,
		.catalog-card .h2,
		.catalog-card h3,
		.catalog-card .h3,
		.catalog-card p {
			max-width: 100%;
		}

		.catalog-card form,
		.catalog-card button {
			margin: 0 auto;
		}

			.catalog-card:hover .button:not(.disabled):not(:hover) {
				border-color: transparent;
				background-color: #B91C1C;
				color: white;
			}

/* ! TY POINTS, profile */

	@media screen {
		.ty-points-summary {}

			.ty-points-summary .view-wrapper-content {
				background-image: url('/img/clients/background-points-grey.svg');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center top;
			}

			.ty-points-summary h3 {
				margin: 0 auto -0.5em;

				color: white;
				text-align: center;

				font-size: 5rem;
				font-size: 7vw;
				font-weight: 900;
				font-family: "Helvetica", Arial, sans-serif;
				line-height: 1.2;

				text-shadow:
				    0 1px 0 #ccc,
				    0 2px 0 #c9c9c9,
				    0 3px 0 #bbb,
				    0 4px 0 #b9b9b9,
				    0 5px 0 #aaa,
				    0 6px 1px rgba(0,0,0,.1),
				    0 0 5px rgba(0,0,0,.1),
				    0 1px 3px rgba(0,0,0,.3),
				    0 3px 5px rgba(0,0,0,.2),
				    0 5px 10px rgba(0,0,0,.25),
				    0 10px 10px rgba(0,0,0,.2),
				    0 20px 20px rgba(0,0,0,.15);
			}

			.ty-points-summary .ty-points-illustration {
				display: block;
				max-width: 80%;
				margin: 1em auto;
			}

			.ty-points-summary .ty-points-description {
				margin: 2em;

				color: #6B7280;
				text-align: center;
			}

			.ty-points-summary .ty-points-button {
				margin: 1em auto;
				text-align: center;
			}
	}

/* ! TY POINTS, catalog */

	@media screen {
		.p-rewards .main-region {
			background-image: url('/img/clients/bookshelves-yellow.svg');
			background-position: 90% 2em;
			background-repeat: no-repeat;
			background-size: 45% auto;
		}

			.p-rewards .main-region > h2 {
				margin: -0.25em auto 0;
				padding-bottom: 7rem;

				background-image: url('/img/clients/background-points-grey.svg');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center left;

				color: white;
				font-size: 5rem;
				font-size: 8vw;
				font-weight: 900;
				font-family: "Helvetica", Arial, sans-serif;
				line-height: 2;

				text-shadow: 0 1px 0 #ccc,
				0 2px 0 #c9c9c9,
				0 3px 0 #bbb,
				0 4px 0 #b9b9b9,
				0 5px 0 #aaa,
				0 6px 1px rgba(0,0,0,.1),
				0 0 5px rgba(0,0,0,.1),
				0 1px 3px rgba(0,0,0,.3),
				0 3px 5px rgba(0,0,0,.2),
				0 5px 10px rgba(0,0,0,.25),
				0 10px 10px rgba(0,0,0,.2),
				0 20px 20px rgba(0,0,0,.15);
			}

			.p-rewards .main-region > .cke {
				width: 50vw;
				margin: -7rem 0 4em 1em;
			}

			.p-rewards .main-region > .cke p {
				margin-bottom: 1.5em;
			}

			.p-rewards .main-region > .cke > * > *:nth-child(n+2) {
				color: #6B7280;
				font-size: 0.875em;
			}
	}

/* ! TY POINTS, redeem */

	.p-rewards.a-redeem main {
		background-image: url('/img/clients/background-points-grey.svg');
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 60vw auto;
	}

		.p-rewards.a-redeem main .container {
			background-image: url('/img/clients/gift-redeem-yellow.svg');
			background-repeat: no-repeat;
			background-position: 115% 2em;
			background-size: 50vw auto;
		}

			.p-rewards.a-redeem main .view-top {
				width: 50vw;
			}

				.p-rewards.a-redeem main .view-top .cke > * > *:nth-child(n+2) {
					color: #6B7280;
					font-size: 0.875em;
				}

		.p-rewards.a-redeem .catalog-preview {
			margin-bottom: 1.5em;

			box-shadow: 0 3px 12px rgba(0,0,0,0.2);
		}

			.p-rewards.a-redeem .catalog-card-title {
				display: block;
				margin: 0;
				padding: 1.5em 1.75em 1em;
				background: gold;

				color: #843;
				font: 500 0.875rem/1.15 "Roboto", sans-serif;
				white-space: nowrap;
				text-transform: uppercase;
			}

				.p-rewards.a-redeem .catalog-card-title [class*="fa-"] {
					margin-right: 0.5em;

					font-size: 0.875em;
				}

			.p-rewards.a-redeem .catalog-image {
					flex-grow: 0;

					display: flex;
					flex-direction: column;
					justify-content: center;

					padding: 0;
					border: 0;
					height: 10em;
					background-color: #F9FAFB;
				}

					.p-rewards.a-redeem .catalog-image img {
						display: block;

						max-width: 100%;
						max-height: 10em;
						margin: 0 auto;
						border: 0;
					}

		.p-rewards.a-redeem .form-wrapper {
			background: rgba(0,0,0,0.05);
		}

			.p-rewards.a-redeem .form-wrapper-content {
				padding: 2em 2em 0;
			}

				.p-rewards.a-redeem .form-wrapper-content > .view-wrapper-block {
					padding: 0;
					margin-left: 5%;
				}

					.p-rewards.a-redeem .form-wrapper-content .with-block-icon {
						padding-left: 3.1rem;
					}

						.p-rewards.a-redeem .form-wrapper-content .with-block-icon:before,
						.p-rewards.a-redeem .form-wrapper-content .with-block-icon > [class*=fa]:first-child {
							width: 2.3rem;
							height: 2.3rem;
							background-color: gold;

							color: #843;
						}

					.p-rewards.a-redeem .form-wrapper-content button {
						margin: 1.25em auto 0.5em;

						transform: scale(1.2);
					}

					.p-rewards.a-redeem .form-wrapper-content button:not(:hover) {
						background-color: white;
					}

		.p-rewards.a-redeem .back {
			font-size: 0.875em;
		}

/* ! INVOICE colors */

	.invoice-status-green { color: #65A30D !important; }
	.invoice-status-yellow { color: #F59E0B !important; }
	.invoice-status-red { color: #F43F5E !important; }

/* ! FOOTER */

    .t-plain .site-footer,
    .s-clientsite .site-footer {
		margin: 0;
		padding: 2em 0;
		width: 100%;
		border-top: none;
		background-color: #F8F0F0;

		color: #95111E;
	}

		.t-plain .site-footer a,
        .s-clientsite .site-footer a {
			color: inherit;
		}

			.t-plain .site-footer a:hover,
            .s-clientsite .site-footer a:hover {
				color: black;
			}

		.t-plain .site-footer span,
        .s-clientsite .site-footer span{
			display: inline-block;
			margin: 0 0.5em;
		}

/* ! FORMS */

	.s-clientsite input,
	.s-clientsite select,
	.s-clientsite textarea, output {
		background-color: #F6F6F6;

		font-weight: 500;
	}

/* ! PLAIN */

    body.t-plain {
        background: white;
    }

        .t-plain header {}

            .t-plain .site-title > a,
            .t-plain .site-title > a:hover {
                background-image: url("../../img/header-logo-color-vertical.svg");
            }

            .t-plain .site-title > a {
                opacity: 1;
            }

    .t-plain main,
    .t-plain .main-region {
        color: #334155;
    }

    .t-plain h2 + h3 {
        margin-top: -0.25em;
        margin-bottom: 1.5em;

        font: 500 1.8rem/1.1 "Roboto Condensed", 'Roboto', sans-serif;
    }

    .t-plain h2.receipt-title {
        margin-top: 0.5em;

        font-size: 2.1em;
    }

    .t-plain h4 {
        text-wrap: balance;
    }

    .t-plain table {
        margin: 0.5em 0 2em;
        border-bottom: 1px solid #EEF0F2;
    }

        .t-plain table p {
            margin: 0.25em 0;
        }

    .t-plain form {
        margin: 1em 0 6em;
    }

        .t-plain label {
            color: #4C5664;
        }

        .t-plain input,
        .t-plain select,
        .t-plain textarea, output {
            background-color: #F6F6F6;

            font-weight: 500;
        }

        .t-plain .input-currency {
            margin-bottom: 2rem;
        }

            .t-plain .input-currency input {
                width: 85%;
            }

        .t-plain #cc_form {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            margin: 2rem auto;
        }

            .t-plain #cc_form .card-block {
                width: 100%;
            }

            .t-plain #cc_form .expiry-block {
                width: 30% !important;
            }

            .t-plain #cc_form .cvd-block {
                width: 30% !important;

                order: 2;
            }

            .t-plain #cc-form .card-block {
                width: 100%;
            }

        .t-plain .g-recaptcha {
            display: flex;
            justify-content: center;

            margin: 3rem auto 2rem;
        }

    .t-plain .button {
        background-color: #95111E;
    }

        .t-plain .button:not([type="submit"]):hover {
            color: black;
        }

    .t-plain .invoice-disclaimer {
	    font-style: italic;
    }

    	.t-plain table + .invoice-disclaimer {
	    	margin-top: 3rem;
	    }