@font-face {
	font-family: 'Questrial';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/questrial-regular-28e07ad1dae1e334a65707bd93a5d840.woff2") format('woff2');
}

@font-face {
	font-family: 'Avant Garde Gothic';
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/avantgardelt-bold-fb3ad4d7f19e2d46d74f15efee219ca8.woff2") format('woff2');
}

:root {
	--border-light: 1px solid var(--color-faint-black);
	--border-radius: 0.375em;
	--box-shadow: 4px 4px 30px -10px var(--color-faint-black);
	--color-blue: #003366;
	--color-faint-black: rgba(0, 0, 0, 0.20);
	--color-light-gray: #f9fafb;
	--color-red: #ff0000;
	--color-red-alt: #b83434;
	--color-green: #1ba864;
	--max-logical-width: 440px;
}

.alert-danger {
	color: var(--color-red);
}

.btn {
	display: inline-block;
	padding: 0.5em 1em;
	color: white;
	background-color: var(--color-blue);
	border: none;
	border-radius: var(--border-radius);
	font: 400 1.25rem/1.5 'Questrial', sans-serif;
	min-width: 100px;
}

.btn-sm {
	font-size: clamp(12px, 3.33vw, 14.66px);
	font-weight: 500;
	min-width: unset;
	width: fit-content;
	color: var(--color-blue);
	background-color: white;
	border: var(--border-light);
	padding: 0.33em 1em;
}

.btn-sm--mini {
	font-size: clamp(10px, 2.77vw, 12px);
}

.btn-lg {
	font-size: 1.625rem;
	padding: 1em;
}

.btn-icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em 1em;
}

.btn-icon [class^="icon-"] {
	aspect-ratio: 1;
	width: 16%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
	color: white;
}

.btn-group {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.btn-group-vertical {
	flex-direction: column;
}

.fs-6 {
	font-size: clamp(36px, 10svw, 43px);
}

.fs-5 {
	font-size: clamp(20px, 5.55svw, 24px);
}

.fs-4 {
	font: 700 1.25rem 'Avant Garde Gothic', sans-serif;
}

.fs-3 {
	font-size: 16px;
}

.fs-2 {
	font-size: clamp(12px, 3.33svw, 14px);
}

.fs-1 {
	font-size: 10px;
}

.h2 {
	font: 700 1.375rem 'Avant Garde Gothic', sans-serif;
}

.h4 {
	font-size: clamp(16px, 4.44svw, 19px);
}

.h5 {
	font-size: clamp(12px, 3.33svw, 14px);
}

.invisible {
	visibility: hidden;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 1rem;
}

.mb-4 {
	margin-bottom: 1.5rem;
}

.mb-5 {
	margin-bottom: 2rem;
}

.mt-3 {
  margin-top: 1rem;
}

.blue {
	color: var(--color-blue);
}

.red {
	color: var(--color-red);
}

.green {
	color: var(--color-green);
}

.pointer {
	cursor: pointer;
}

.semibold {
	font-weight: 600;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-nowrap {
	text-wrap: nowrap;
}

.uppercase {
	text-transform: uppercase;
}

.underline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body {
/*	background-color: lightgray;*/
	font-family: Questrial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.page {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: min(100%, var(--max-logical-width));
	min-height: 100svh;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem 1rem;
	background-color: white;
}

.page--auth {
	justify-content: center;
	gap: 4rem;
}

.page-overlay {
	position: fixed;
	width: 100svw;
	height: 100svh;
	top: 0;
	left: 0;
	padding: 1rem;
	background: white;
	color: var(--color-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	z-index: -10;
	opacity: 0;
}

@media (orientation: landscape) {

	/* safari only selector */

	_::-webkit-full-page-media, _:future, :root .page-overlay--landscape {
		z-index: 20;
		opacity: 1;
	}
}

.site-header {
	display: flex;
	flex-direction: column;
}

.site-header__title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-header__title .logo {
	width: 30%;
}

.nav {
	position: relative;
	z-index: 10;
}

.page#lease .site-header__title {
	margin-top: -2rem;
}

.page#lease .site-header__title .logo {
	width: 20%;
}

.page--auth .site-header__title .logo {
	width: 40%;
}

.main {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
}

#front > .main > .btn-group {
	display: flex;
	flex-grow: 1;
	justify-content: flex-start;
}

.box {
	padding: 1.5em;
	background-color: white;
	border: var(--border-light);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}

.step-list {
	padding-left: 2.5em;
	list-style-type: decimal;
}

.step-list samp {
	color: #b6b6b6;
	font-family: Questrial, sans-serif;
}

.step-list em {
	color: #008fc5;
	font-style: normal;
}

.form-control {
	appearance: none;
	width: 100%;
	padding: 2em 1.25em;
	border: var(--border-light);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-blue);
}

.form-control::placeholder {
	font-family: Questrial, sans-serif;
	text-transform: uppercase;
	color: currentColor;
}

.form-control-search {
	font-size: 0.8125rem;
	font-weight: 400;
	color: #9ca5b2;
	background-color: var(--color-light-gray);
	box-shadow: none;
}

.form-control-search::placeholder {
	text-transform: none;
	font-weight: 300;
}

.input-group {
	display: flex;
}

.input-group-text {
	display: flex;
	align-items: center;
	background-color: var(--color-blue);
	color: white;
	font-size: 1.125rem;
	padding: 0.4em;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.input-group-text + .form-control {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.search {
	font-size: clamp(13px, 3.611vw, 15.88px);
	position: relative;
}

.separator {
	display: block;
	width: 40%;
	height: 5px;
	margin: 3rem auto;
	border: none;
	border-radius: var(--border-radius);
	background-color: black;
}

select#form_leases:not(.tomselected) {
	opacity: 0;
}

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 1.5em;
}

.page-header > *:nth-child(2) {
	width: calc(56% - 1em);
}

.page-header > .nav-item {
	width: 22%;
}

.nav-item {
	display: flex;
	flex-direction: column;
	font-size: 0.625rem;
	font-size: clamp(10px, 2.77vw, 12.22px);
}

.nav-item-left {
	align-items: flex-start;
}

.nav-item-right {
	align-items: flex-end;
}

.nav-item [class^="icon-"]::before {
	margin: 0;
	font-size: 2em;
	width: auto;
}

.lease-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lease {
	font-size: clamp(15px, 4.166vw, 18.33px);
	border: var(--border-light);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}

.lease.alert {
	border-color: var(--color-red-alt);
}

.lease a {
	display: block;
	padding: 1em 1.25em;
}

.lease__title {
	font: 700 1em 'Avant Garde Gothic',sans-serif;
	margin-bottom: 0.5em;
}

.lease__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.75em;
	font-weight: 500;
}

.lease__text > span {
	line-height: 1.25;
	padding-right: 0.4em;
}

.lease__text > span + span {
	padding-left: 0.4em;
	border-left: 1px solid currentColor;
}

.lease__alert,
.lease__date {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(10px, 2.77svw, 12px);
	color: #898989;
}

.lease__alert {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.lease__alert::before{
	display: inline-block;
	content: '';
	width: 2.2em;
	aspect-ratio: 1;
	border: 1px solid var(--color-blue);
	border-radius: 50%;
	background: url("../images/alert-e5fe1ca51cda488ac54e721306881da0.svg") no-repeat center/50% auto;
}

.lease__date {
	padding: 0.5em;
	background-color: var(--color-light-gray);
	border: var(--border-light);
	border-radius: var(--border-radius);
}

.card-group {
	padding: 0 4%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.card {
	--card-color: rgba(0, 0, 0, 0.20);
	font-size: clamp(12px, 3.2vw, 14px);
	padding: 1.5em;
	border: var(--border-light);
	border-radius: var(--border-radius);
	border-color: var(--card-color);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: var(--box-shadow);
}

.card--container {
	padding: 0;
}

.card--icon {
	position: relative;
}

.card--icon:not(:first-child) {
	margin-top: 1.5rem;
}

.card--icon::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	width: 10%;
	background-color: white;
	border-radius: 50%;
	border-width: 1px;
	border-style: solid;
	border-color: currentColor;
	color: var(--card-color);
	font-family: icons;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: clamp(20px, 5.55svw, 24px);
}

.card--contact {
	--card-color: #f7801a;
}

.card--main {
	--card-color: #8850b7;
}

.card--money {
	--card-color: #1ba864;
}

.card--date {
	--card-color: #3772ff;
}

.card--info {
	--card-color: var(--color-red-alt);
}

.card--contact.card--icon::after {
	content: '\e80b';
}

.card--main.card--icon::after {
	content: '\e80f';
}

.card--money.card--icon::after {
	content: '\e80e';
}

.card--date.card--icon::after {
	content: '\e80d';
}

.card--info.card--icon::after {
	content: '\e80c';
}

.card__title {
	font-family: 'Avant Garde Gothic', sans-serif;
	font-size: 700;
}

.card__subtitle {
	display: block;
	font-weight: 400;
	font-family: Questrial, sans-serif;
}

.card__text__toggle,
.card__text__show:checked ~ .card__text__toggle--less {
	display: block;
	height: auto;
}

.card__text__hidden,
.card__text__toggle--less {
	display: none;
	height: 0;
}

.card__text__show:checked ~ .card__text__dots,
.card__text__show:checked ~ .card__text__toggle--more {
	display: none;
}

.card__text__show:checked ~ .card__text__hidden {
	display: inline;
}

.card__grid {
	display: grid;
	grid-template-columns: 50% 50%;
	padding: 0;
}

.card__grid>div {
	padding: 1.25rem;
}

.card__grid > div:not(:nth-last-child(-n+2)) {
	border-bottom: 1px solid var(--card-color);
}

.card__grid > div:nth-child(odd) {
	border-right: 1px solid var(--card-color);
}

.card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card:has(.card__row + .card__row) {
	padding: 0;
	gap: 0;
}

.card:has(.card__row + .card__row) .card__row {
	padding: 1.5em;
	border-bottom: var(--border-light);
}

.card--contact .card__rich_text {
	line-height: 2;
}

.card__rich_text a {
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.scroll2top {
	border: 1px solid var(--color-blue);
	border-radius: 50%;
	width: clamp(31px, 8.61vw, 37px);
	aspect-ratio: 1;
	display: block;
	background: url("../images/back-to-top-e8ddb6fc6a0da59ae98b47504d6ea3da.svg") no-repeat center/74%;
	position: sticky;
	bottom: calc(1em);
	left: calc(100% - 1em);
	opacity: 0;
	transition: opacity 300ms ease-in-out;
}

.scroll2top.visible {
	opacity: 1;
}

#webauth-link {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#webauth-link .icon-fingerprint {
	font-size: 44px;
	color: var(--color-blue);
}

#webauth-link em {
	color: var(--color-blue);
	font-style: normal;
}