/*
	(c)2020 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/
/* Blocking	widths - disable */

.main-region > a.button {
	margin: 0 0 1em 0;
}


/* ! SQUIRCLES */
.squircle {
	position: relative;
	display: inline-block;
	border-radius: 6px;
	border: 1px solid var(--primary-color);
	background: var(--primary-color-transparent);
}

	a.squircle:hover {
		/* border-color: transparent; */
		border-color: #03570055;
		transition: all .2s;
	}

	.squircle [class*="fa-"] {
		display: block;
		padding: 0.25em;
		width: 1.75em;
		height: 1.75em;

		background-color: transparent;
		border-radius: 8px;
		transition: all .2s;
	}

		.squircle .fa-layers-text {
			font-weight: 600;
			text-transform: uppercase;
		}

		.flyout-link .squircle [class*="fa-"]{
			margin-top: 0;
			transform: scale(1.2);
		}
		.squircle:hover > [class*="fa-"] {
			background-color: hsl(118, 40%, 92%);
			color: #035700;
		}
		/* individual icon adjustments */
		.squircle [class*="link"]{
			width: 2.25rem;
			height: 2.25rem;
		}
		.squircle [class*="paperclip"] {
			width: 2.25rem;
			height: 2.25rem;
		}
		.squircle [class*="envelope"] {
			width: 2.6rem;
			height: 2.6rem;
		}

/* ! STATE colors */
.state {
}

	dt.state [class*="fa-"] {
		margin-right: 0.25em;

		font-size: 0.875em;
	}

    .state.yellow {
        color: #F97316 !important;
    }

	.state.green {
		color: #65A30D !important;
	}

	.state.red {
		color: #FB7185 !important;
	}

/* ! STATUS pills */
.status {
	display: inline-block;
	padding: 0.25em 0.65em 0.25em;
	border-radius: 2em;
	background: #666666;

	color: white;
	font: 600 0.75em/1 "Source Sans Pro", sans-serif;
	text-transform: uppercase;
    text-decoration: none;
	letter-spacing: .02em;

	white-space: nowrap;
}

    .status > svg {
        margin: 0 0.3rem -0.05rem 0.1rem !important;
    }

	.status.grey,
	.status.gray,
	.status-new-order,
	.status-on-hold,
	.status-waiting-on-info,
	.status-waiting-on-information {
		background: #666666 !important;
		/* color: #F1F5F9 !important; */
	}
	.status.red,
	.status-overdue,
	.status-declined-order,
    .status-inactive,
    .status-declined,
    .status-cancelled {
		background: #F43F5E !important;
		/* color: #FFF1F2 !important; */
	}
	.status.yellow {
		background: #FACC15 !important;
		/* color: white !important; */
	}
	.status.green {
		background: #22C55E !important;
		/* color: white !important; */
	}

	.status.orange,
	.status-processing-delivery {
		background: #F97316 !important;
		/* color: #FFF7ED !important; */
	}

	.status.lemon,
	.status-mailing-label-created {
		background: #F59E0B !important;
		/* color: #FEFCE8 !important; */
	}
	.status.lime,
    .status-active,
	.status-complete {
		background: #65A30D !important;
		/* color: #F7FEE7 !important; */
	}
	.status.cyan,
	.status-contact-initiated,
    .status-out-for-delivery {
		background: #06B6D4 !important;
		/* color: #ECFEFF !important; */
	}
	.status.blue,
	.status-pending {
		background: #3B82F6 !important;
		/* color: #EFF6FF !important; */
	}
	.status.purple,
	.status-merged {
		background: #A855F7 !important;
		/* color: #FAF5FF !important; */
	}
	.status.pink,
    .status-faf-assigned,
    .status-faf-confirmed,
    .status-faf-delivered  {
		background: #F472B6 !important;
		/* color: #FDF2F8 !important; */
	}
	.status.rose  {
		background: #FB7185 !important;
		/* color: #FFF1F2 !important; */
	}

    a.status:hover {
        background: black !important;
        color: white;
    }

/* ! BADGES */
.badge {
	position: absolute;
	top: -0.25em;
	left: 60%;

	padding: 0.25em;
	min-width: 18px;
	min-height: 18px;

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



/* !form content styles */
.dynamic-input-item div.applicant-adult,
.dynamic-input-item div.applicant-child {
	display: flex;
	position: relative;
	justify-content: flex-start;
	flex-wrap: wrap;
}
	.dynamic-input-item div.applicant-adult > div,
	.dynamic-input-item div.applicant-child > div {
		display: block;
		position: relative;
		flex-grow: 1;
		padding: 0 0.25em;
		margin: 0 0 0.25em 0;
	}
	.dynamic-input-item div.applicant-adult > h3 + div.form-wrapper { flex-basis: 100%; max-width: 100%; }

    .dynamic-input-item div.applicant-adult ~ .entity-handle { display:none; } /* catalyst helper adds this AUTOMATCIALLY without a way to disable it in CODE, so we're HIDING it instead */

.form-wrapper-content div.w100.inblock div.input-select {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0;
	/* margin: 0; */
}
	.form-wrapper-content div.w100.inblock div.input-select div.input-check-option {
		display: flex;
		position: relative;
		flex-wrap: nowrap;
		flex-basis: 24%;
		max-width: 32%;
		padding: 0.25em;
		margin: 0 0 0.25em 0;
	}
		.form-wrapper-content div.w100.inblock div.input-select div.input-check-option > input[type="checkbox"] {
			display: block;
			float: none;
			width: auto;
			margin: 5px 10px 0 0;
			order: 1;
		}
		.form-wrapper-content div.w100.inblock div.input-select div.input-check-option > label {
			display: block;
			position: relative;
			order: 0;
			width: 20%;
			margin: 0 1em 0 0;
			font-size: 0.875rem;
			text-align: center;
			line-height: 1.5;
		}


.controls-group {
	display: flex;
	position: relative;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
	.controls-group > .button,
	.controls-group > .button + .button {
		margin: 0;
		margin-right: 1rem;
	}

.plaintext-password {
    font-family: monospace;
    font-size: 3em;
    letter-spacing: 0.25em;
    margin: 0.25em 0.25em 0.5em;
}



/* ! ANIMATION effects */
.updated-flash {
	animation: animationupdatedflash 0.5s linear 1;
}
	@keyframes animationupdatedflash {
	  50% {
	    background-color: #faffd7;
	  }
	}



/* ! LOADING rings */
div[data-controller="ajax-actions"] {
	min-height: 10em;
	/* background-color: #fff; */
}
.loading-ring,
.loading-rings {
  display: block;
  width: 80px;
  height: 80px;
}
	.loading-ring:after,
	.loading-rings:after {
	  content: " ";

	  display: block;
	  width: 64px;
	  height: 64px;
	  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); }
	}

/* !MAP infowindows */

.marker-content {
    margin: 1em auto;
}

    .marker-title {
        margin: 0 0 0.5em;

        font-size: 1.25em;
        font-weight: bold;
        font-weight: 600;
    }

    .marker-size {
        margin-bottom: 0.5em;

        font-weight: normal;
        line-height: 1.4em;
    }

    .marker-delivery {
        margin-bottom: 0.5em;

        font-weight: 600;
        line-height: 1.4em;
    }

    .marker-button {
        display: block;
        margin: 1em 0 0;
        padding: 0.5em 0.75em 0.4em;
        border-radius: .25em;
        border: 1.5px solid var(--primary-color);
        background: white;

        color: var(--primary-color);
        font-size: 0.675rem;
        font-weight: bold;
        text-decoration: none;

        transition: all .2s;
        outline: 0;
    }

        .marker-button:hover {
            border-color: transparent;
            background-color: #035700;

            color: white;
        }