@charset "UTF-8";

:root {
	--bs-font-serif: Georgia, serif;
	--bs-font-sans-serif: Arial, Helvetica, sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-link-color: var(--af-primary);
	--bs-link-color-rgb: var(--af-primary-rgb);
	--bs-link-hover-color: var(--af-primary-hover);
	--bs-link-hover-color-rgb: var(--af-primary-hover-rgb);
	--af-primary: var(--vivid-gold);
	--af-primary-rgb: 66, 139, 202;
	--af-primary-hover: var(--darkest-blue);
	--af-primary-hover-rgb: 44, 103, 155;
	--af-primary-dark: #1f4a70;
	--af-primary-dark-rbg: 31, 74, 112;
	--af-border-gray: rgba(255, 255, 255, 0.5);
	--af-light-gray: #f8f9fa;
	--af-light-gray-rbg: rgb(248, 249, 250);
	--af-main-blue: #428bca;
	--costum-color: rgb(15, 71, 97);
	--gray: #e0e0e0;
	--darkest-blue: #101f2f;
	--vivid-gold: #F5BE01;
}

html, body {
	height: 100%;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
}

.main-content {
	display: flex;
	flex: 1;
}

.main-content-area {
	flex: 1;
	padding: 0.8rem;
}

.fo-sidenav {
	white-space: nowrap;
}

/* Sidenav styles for small screens */
@media ( max-width : 768px) {
	.fo-sidenav {
		display: none;
	}
	.sidenav-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	.footer-wrapper {
		padding-bottom: 70px;
	}
	#fo-index-footer .footer-wrapper {
		padding-bottom: 0;
	}
}

/* Sidenav styles for larger screens */
@media ( min-width : 769px) {
	.sidenav-bottom {
		display: none;
	}
	.footer-wrapper {
		padding-bottom: 0;
	}
	#fo-index-footer .footer-wrapper {
		padding-bottom: 0;
	}
}

.bg-main {
	background-color: var(--af-primary);
	color: #fff;
}

.bg-detail {
	background-color: #fff;
	color: #000;
}

.btn-primary {
	--bs-btn-color: var(--darkest-blue);
	--bs-btn-bg: var(--af-primary);
	--bs-btn-border-color: var(--af-primary);
	--bs-btn-hover-color: var(--vivid-gold);
	--bs-btn-hover-bg: var(--af-primary-hover);
	--bs-btn-hover-border-color: var(--af-primary-hover);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--af-primary-hover);
	--bs-btn-active-border-color: var(--af-primary-hover);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--darkest-blue);
	--bs-btn-disabled-bg: var(--af-primary);
	--bs-btn-disabled-border-color: var(--af-primary);
}

.btn-outline-primary {
	--bs-btn-color: var(--af-primary);
	--bs-btn-border-color: var(--af-primary);
	--bs-btn-hover-color: var(--darkest-blue);
	--bs-btn-hover-bg: var(--af-primary);
	--bs-btn-hover-border-color: var(--af-primary);
	--bs-btn-focus-shadow-rgb: 13, 110, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--af-primary);
	--bs-btn-active-border-color: var(--af-primary);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--af-primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--af-primary);
	--bs-gradient: none
}


.custom-link {
	text-decoration: none;
}

.custom-link:hover {
	text-decoration: underline;
}

.nav-link {
	color: var(--af-primary-hover);
}

.nav-link:hover {
	color: var(--af-primary);
}

.nav-link-inverted {
	color: var(--af-primary);
}

.nav-link-inverted:hover {
	color: var(--af-primary-hover);
}

.nav-pills {
	--bs-nav-pills-link-active-bg: var(--darkest-blue);
}

.navbar-nav .nav-link.active {
	--bs-navbar-active-color: var(--af-primary);
}

.nav-link.active:hover {
	color: var(--darkest-blue) !important;
	--bs-nav-pills-link-active-bg: var(--af-primary);
}
.nav-link.active {
	color: var(--af-primary) !important;
}

#fo-navbar .bi, .sidenav-bottom .bi, .fo-sidenav .bi {
	font-size: 1.5rem;
}

@media ( max-width : 992px) {
	#fo-navbar .bi, .sidenav-bottom .bi, .fo-sidenav .bi {
		font-size: 1.4rem;
	}
}

@media ( max-width : 768px) {
	#fo-navbar .bi, .sidenav-bottom .bi, .fo-sidenav .bi {
		font-size: 1.3rem;
	}
}

@media ( max-width : 576px) {
	#fo-navbar .bi, .sidenav-bottom .bi, .fo-sidenav .bi {
		font-size: 1.2rem;
	}
}

.table-wrapper {
	max-height: 500px;
	overflow-y: auto;
}

.table-wrapper table {
	width: 100%;
}

.min-width-100-33 {
	min-width: 100%;
}

@media ( min-width : 576px) {
	.min-width-100-33 {
		min-width: 33.33%;
	}
}

/* FO header */
#img-logo, #img-logo-small-screen {
	background-size: contain;
	background-repeat: no-repeat;
	height: 50px;
}

#fo-navbar, #fo-navbar-small-screen {
	box-shadow: #cccccc 1px 1px 1px 0px;
}

/* FO footer */
#footer-menu-small li a:hover, #footer-menu-large li a:hover {
	text-decoration: underline;
}

/* FO accounts */
#account-detail-container, #account-mov-detail-container {
	display: flex;
	padding: 0;
}

#account-detail-content, #account-mov-detail-content {
	flex: 1;
	position: relative;
}

#account-detail-iframe, #account-mov-detail-iframe {
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
}

.table-wrapper-custom {
	position: relative;
	overflow-y: auto;
}

.table-wrapper-custom thead th {
	position: sticky;
	top: 0;
	background: #fff;
	box-shadow: 0 4px 5px -1px rgba(0, 0, 0, 0.1);
	z-index: 2;
}

.table-wrapper-custom thead {
	display: table-header-group;
}

.table-wrapper-custom table {
	border-collapse: collapse;
}

#account-mov-datepicker-start-span, #account-mov-datepicker-end-span {
	height: 100%;
	padding: 0.375rem 0.75rem;
	box-sizing: border-box;
	cursor: pointer;
}

#account-mov-datepicker-start.is-invalid ~
	#account-mov-datepicker-start-span, #account-mov-datepicker-end.is-invalid 
	 ~ #account-mov-datepicker-end-span {
	display: none;
}

#mov-search-form .bi {
	font-size: 1.2rem;
}

.search-clean-btns .bi {
	font-size: 1.1rem;
}

#accounts-mov-export-btn-group .bi {
	font-size: 1.3rem;
}

.btn-transition-rx-180 .bi {
	font-size: 1.1rem;
	transition: transform 0.35s ease;
}

.btn-transition-rx-180[aria-expanded="true"] .bi {
	transform: rotateX(180deg);
}

.detail_content {
	display: grid;
	grid-template-columns: max-content max-content;
}

.detail_content h6 {
	font-size: clamp(1.1rem, 3vh, 1rem);
	font-weight: bold;
}

.detail_content h6, .detail_content p {
	margin: 0.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
}

.important_info {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column: 1/-1;
	color: rgb(15, 71, 97);
}

.important_info h6:first-of-type {
	grid-column: 1/-1;
	font-size: clamp(1.3rem, 4vh, 1.3rem);
}

.spacing {
	margin-top: 1.5rem;
	grid-column: 1/-1;
}

.detail_content_amount {
	display: flex;
	gap: 0;
}

.detail_content_amount p:first-of-type {
	margin-right: 0;
}

#account-mov-detail-title {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

#account-mov-detail-title h4 {
	color: var(--costum-color);
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}

#account-mov-detail-title i {
	font-size: 1.5rem;
}

#account-mov-detail-title button {
	width: auto;
	justify-self: start;
}

#account-detail-title {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

#account-detail-title h4 {
	color: rgb(15, 71, 97);
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}

#account-detail-title i {
	font-size: 1.5rem;
}

#account-detail-title button {
	width: auto;
	justify-self: start;
}

/* FO documents */
#documents-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

#documents-list-table-body .bi {
	font-size: 1.25rem;
	color: var(--af-primary);
}

#documents-list-table-body .bi:hover {
	color: var(--af-primary-hover);
	cursor: pointer;
}

#documents-list-table-body .bi:active {
	color: var(--af-primary-dark);
}

/* FO transfers */
#transfers-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

/* FO requests */
#requests-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

/* FO home */
#home-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

/* security area */
#security-area-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

/* personal area */
#personal-area-content .bi {
	font-size: 2.2rem;
	color: var(--af-primary);
}

/* footer */
#footer_tag {
	background-color: var(--darkest-blue);
	color: var(--white);
	padding-left: 2rem;
	padding-right: 2rem;
	font-size: clamp(0.83rem, 1vw, 1rem);
	line-height: 0.5;
}

#footer_tag a:hover {
	color: var(--vivid-gold) !important;
}
/* Tablet (768px – 991px) */
@media ( min-width : 768px) and (max-width: 991px) {
	#footer_tag {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

/* Desktop (992px and up) */
@media ( min-width : 992px) {
	#footer_tag {
		padding-left: 6rem;
		padding-right: 6rem;
	}
}

#footer-img-logo {
	background-size: contain;
	background-repeat: no-repeat;
	height: clamp(8px, 8vw, 40px);
}

#footer-slogan {
	font-size: clamp(0.83rem, 1.8vw, 2rem);
	line-height: 1.1;
	white-space: normal;
}

#footer-menu-small li a:hover, #footer-menu-large li a:hover {
	text-decoration: underline;
}

.marketing-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	isolation: isolate;
}

.marketing-wrapper p {
	font-size: clamp(0.83rem, 1.7vw, 2.3rem);
	max-width: 80%;
}

.img-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.img-wrapper {
	position: absolute;
	top: 58%;
	left: 50%; /* center horizontally */
	transform: translate(-50%, -50%); /* center both directions */
	width: 95%;
	height: 60%;
}

/* Tablet (768px – 991px) */
@media ( min-width : 768px) and (max-width: 991px) {
	.img-wrapper {
		position: absolute;
		top: 58%;
		right: 0;
		left: auto;
		transform: translateY(-50%);
		width: 60%;
		height: 60%;
		transform: translateY(-50%);
	}
}

/* Desktop (992px and up) */
@media ( min-width : 992px) {
	.img-wrapper {
		position: absolute;
		top: 58%;
		right: 0;
		left: auto;
		transform: translateY(-50%);
		width: 45%;
		height: 60%;
	}
}

.img-foreground {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	z-index: 2;
}

.content-over-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
	align-items: center;
	color: white;
	text-align: center;
	z-index: 3;
	align-items: center;
}

#login-espiral-logo {
	position: absolute; /* required for left/bottom to work */
	left: 0;
	bottom: 0;
	background-size: contain;
	background-repeat: no-repeat;
	height: clamp(8px, 8vw, 40px);
	margin: 1rem;
}

#login-kash-logo {
	background-size: contain;
	background-repeat: no-repeat;
	height: clamp(8px, 8vw, 50px);
}

#index-login-btn:focus {
	box-shadow: none !important;
}

#index-login-btn:disabled {
	background-color: transparent !important;
	border: 1px solid white !important;
	color: white !important;
}

/* Enabled button */
#index-login-btn:enabled {
	background-color: var(--vivid-gold); /* Bootstrap primary color */
	border-color: var(--vivid-gold);
	color: var(--darkest-blue);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-inputs .form-control {
	background-color: transparent;
	border: 1px solid #fff;
	color: #fff;
}

.login-inputs .form-control::placeholder {
	color: white;
}

.login-inputs .form-control:focus {
	border-color: var(--vivid-gold);
	outline: none;
	box-shadow: none;
}