/* IMPORT FONTS */
@font-face {
	font-family: "Bungee";
	src: url("../fonts/Bungee-Regular.ttf");
}
@font-face {
	font-family: "HostGrotesk";
	src: url("../fonts/HostGrotesk-Regular.ttf");
}
/* ROOT */
:root {
	/* FONT */
	--bungee: "Bungee", sans-serif;
	--hostgrotesk: "HostGrotesk", sans-serif;
	/* COLOR */
	--purple: var(--bs-purple);
	--orange: var(--bs-orange);
	--white: var(--bs-white);
	--dark: var(--bs-dark);
	--yellow: var(--bs-yellow);
}
/* ALL */
body { font-family: var(--hostgrotesk); }
.text-purple { color: var(--purple); }
.text-orange { color: var(--orange); }
.text-yellow { color: var(--yellow); }
.word-wrap {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-all;
}
.btn-custom-purple {
	font-family: var(--bungee);
	background-color: var(--purple);
	color: var(--white);
	border-color: var(--purple);
	border-radius: 0px;
}
.btn-custom-orange {
	font-family: var(--bungee);
	background-color: var(--orange);
	color: var(--white);
	border-color: var(--orange);
	border-radius: 0px;
}
.btn-custom-purple:hover {
	background-color: var(--orange);
	color: var(--white);
	border-color: var(--orange);
}
.btn-custom-orange:hover {
	background-color: var(--purple);
	color: var(--white);
	border-color: var(--purple);
}
.btn-custom-purple:focus {
	background-color: var(--orange);
	color: var(--white);
	border-color: var(--orange);
}
.btn-custom-orange:focus {
	background-color: var(--purple);
	color: var(--white);
	border-color: var(--purple);
}
.alert {
	border: none;
	border-radius: 0px;
}
.form-error {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--bs-red);
	margin-top: 15px;
	margin-bottom: 15px;
}
.form-control,
.form-select {
	background-color: transparent;
	border: 1px solid #ddd;
	border-radius: 0px;
}
.input-group-text {
	background-color: var(--purple);
	border: 1px solid var(--purple);
	color: var(--white);
	border-radius: 0px;
}
.topnav .topnav-items .topnav-item .brand-name {
	font-size: 2.5rem;
	font-weight: bold;
	text-decoration: none;
}
.topnav .topnav-items .topnav-item .topnav-link {
	font-size: 1.125rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--white);
	margin-left: 15px;
	margin-right: 15px;
}
.topnav .topnav-items .topnav-item .topnav-link:hover { color: var(--orange); }
.topnav .topnav-items {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.topnav {
	background-color: var(--dark);
	padding-top: 25px;
	padding-bottom: 25px;
}
@media screen and (min-width: 1039px) {
	.topnav .topnav-items #topnav-item3 { display: none; }
}
@media screen and (max-width: 1039px) {
	.topnav .topnav-items #topnav-item2 { display: none; }
}
@media screen and (max-width: 639px) {
	.topnav .topnav-items .topnav-item .brand-name {
		font-size: 1.625rem;
	}
}
.sidenav .offcanvas .offcanvas-header .offcanvas-header-items .offcanvas-header-item .brand-name {
	font-size: 1.625rem;
	font-weight: bold;
	text-decoration: none;
}
.sidenav .offcanvas .offcanvas-header .offcanvas-header-items {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sidenav .offcanvas .offcanvas-header {
	background-color: var(--dark);
	padding-top: 25px;
	padding-bottom: 25px;
}
.sidenav .offcanvas .offcanvas-body .offcanvas-body-items .offcanvas-body-item .offcanvas-body-link {
	font-size: 1.125rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--purple);
}
.sidenav .offcanvas .offcanvas-body { background-color: var(--white); }
/* GUEST (HOME AND CONTACT) */
.home section h1 .brand-name { font-weight: bold; }
.home .hero {
	background-image: url("../images/city.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	padding-top: 200px;
	padding-bottom: 200px;
	text-align: center;
}
.home section .card .card-body { background-color: #e7d9fb; }
.home section .card {
	border-radius: 0px;
	height: 100%;
}
.home .cta {
	background-image: url("../images/man.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	padding-top: 200px;
	padding-bottom: 200px;
	text-align: center;
}
.home .footer .brand-name {
	font-size: 2.5rem;
	font-weight: bold;
}
.home .footer .col-group .col-group-item a {
	text-decoration: none;
	text-transform: uppercase;
}
.home .footer .col-group .col-group-item {
	margin-top: 15px;
	margin-bottom: 15px;
}
.home .footer {
	background-color: var(--dark);
	padding-top: 245px;
	padding-bottom: 245px;
}
.contact .hero {
	background-color: var(--purple);
	padding-top: 215px;
	padding-bottom: 215px;
	text-align: center;
}
.contact section .row .col-box-icon {
	font-size: 3rem;
	color: var(--orange);
}
.contact section .row .col-box {
	background-color: var(--dark);
	text-align: center;
	padding-top: 45px;
	padding-bottom: 45px;
}
.contact section .row .card .card-header {
	background-color: var(--purple);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom: none;
}
.contact section .row .card .card-body { background-color: #e7d9fb; }
.contact section .row .card form input[type="email"] {
	background-color: var(--white); 
	border: 1px solid #7c70fa;
}
.contact section .row .card form textarea {
	resize: none;
	background-color: var(--white);
	border: 1px solid #7c70fa;
}
.contact section .row .card {
	border: none;
	border-radius: 0px;
}
.contact .footer { background-color: var(--purple); }
/* CUSTOMER */
.customer-register section .card .card-body h2,
.customer-login section .card .card-body h2,
.customer-reset section .card .card-body h2,
.customer-deposit section .card .card-body h2,
.customer-withdraw section .card .card-body h2,
.customer-transfer section .card .card-body h2,
.customer-edit-phonenumber section .card .card-body h2,
.customer-edit-password section .card .card-body h2,
.customer-recovery section .card .card-body h2 {
	font-size: 2.5rem;
	font-weight: bold;
	cursor: pointer;
}
.customer-register section .card .card-body h4,
.customer-login section .card .card-body h4,
.customer-reset section .card .card-body h4,
.customer-deposit section .card .card-body h4,
.customer-withdraw section .card .card-body h4,
.customer-transfer section .card .card-body h4,
.customer-edit-phonenumber section .card .card-body h4,
.customer-edit-password section .card .card-body h4,
.customer-recovery section .card .card-body h4 {
	font-family: var(--bungee);
}
.customer-register section .card .card-body p a,
.customer-login section .card .card-body p a {
	text-decoration: none;
	color: var(--orange);
}
.customer-register section .card,
.customer-login section .card,
.customer-reset section .card,
.customer-deposit section .card,
.customer-withdraw section .card,
.customer-transfer section .card,
.customer-edit-phonenumber section .card,
.customer-edit-password section .card,
.customer-recovery section .card {
	background-color: var(--white);
	border-radius: 0px;
	margin-top: 65px;
	margin-bottom: 65px;
}
@media screen and (min-width: 799px) {
	.customer-register section .card,
	.customer-login section .card,
	.customer-reset section .card,
	.customer-deposit section .card,
	.customer-withdraw section .card,
	.customer-transfer section .card,
	.customer-edit-phonenumber section .card,
	.customer-edit-password section .card,
	.customer-recovery section .card {
		width: 45%;
		margin-left: auto;
		margin-right: auto;
	}
}
.customer-register,
.customer-login,
.customer-reset,
.customer-deposit,
.customer-withdraw,
.customer-transfer,
.customer-edit-phonenumber,
.customer-edit-password,
.customer-recovery,
.customer-verify {
	background-color: var(--purple);
}
.customer-dashboard section .customer-info .display-photo {
	font-size: 3rem;
	color: #ddd;
}
.customer-dashboard section .customer-info { text-align: center; }
.customer-dashboard section .row #col-box-1 { background-color: var(--dark); }
.customer-dashboard section .row #col-box-2 {
	background-color: var(--purple);
	cursor: pointer;
}
.customer-dashboard section .row #col-box-3,
.customer-dashboard section .row #col-box-4,
.customer-dashboard section .row #col-box-5 {
	background-color: var(--orange);
}
.customer-dashboard section .row #col-box-6,
.customer-dashboard section .row #col-box-7,
.customer-dashboard section .row #col-box-8 {
	background-color: var(--purple);
	cursor: pointer;
}
.customer-dashboard section .row .col-box {
	padding-top: 55px;
	padding-bottom: 55px;
	text-align: center;
}
.customer-dashboard .footer { background-color: var(--orange); }
.customer-profile section .list-group .list-group-item {
	background-color: #e7d9fb;
	margin-top: 5px;
	margin-bottom: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.customer-profile section .list-group .list-group-item .flex-items {
	padding-top: 25px;
	padding-bottom: 25px;
}
@media screen and (min-width: 639px) {
	.customer-profile section .list-group .list-group-item .flex-items {
		font-size: 1.375rem;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.customer-profile section .list-group .list-group-item .flex-items .data {
		margin-left: 15px;
		margin-right: 15px;
	}
}
@media screen and (max-width: 639px) {
	.customer-profile section .list-group .list-group-item .flex-items {
		font-size: 1.125rem;
	}
	.customer-profile section .list-group .list-group-item .flex-items .data {
		text-align: inherit;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
.customer-transactions section .pane .pane-item {
	margin-top: 15px;
	margin-bottom: 15px;
}
.customer-transactions section .pane {
	background-color: var(--dark);
	padding: 15px;
	margin-top: 25px;
	margin-bottom: 25px;
}
@media screen and (min-width: 639px) {
	.customer-transactions section .pane .pane-items .pane-item {
		font-size: 1.375rem;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.customer-transactions section .pane .pane-items .pane-item .data {
		margin-left: 15px;
		margin-right: 15px;
	}
}
@media screen and (max-width: 639px) {
	.customer-transactions section .pane .pane-items .pane-item {
		font-size: 1.125rem;
	}
}
.customer-settings section .panes .pane .pane-icon {
	font-size: 2.5rem;
	color: var(--orange);
}
.customer-settings section .panes .pane {
	background-color: #e7d9fb;
	padding: 15px;
	margin-top: 45px;
	margin-bottom: 45px;
}
/* ADMIN */
.admin-login .row #col-1 { background-color: #e7d9fb; }
.admin-login .row #col-2 { background-color: var(--white); }
.admin-dashboard .header .header-item .title,
.admin-accounts .header .header-item .title,
.admin-transactions .header .header-item .title,
.admin-update-bal .header .header-item .title,
.admin-update-trans .header .header-item .title {
	font-family: var(--bungee);
	font-size: 1.5rem;
	text-transform: uppercase;
	text-decoration: none;
}
.admin-dashboard .header .header-items,
.admin-accounts .header .header-items,
.admin-transactions .header .header-items,
.admin-update-bal .header .header-items,
.admin-update-trans .header .header-items {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.admin-dashboard .header,
.admin-accounts .header,
.admin-transactions .header,
.admin-update-bal .header,
.admin-update-trans .header {
	background-color: var(--dark);
	padding-top: 25px;
	padding-bottom: 25px;
}
.admin-dashboard section .card .card-header { background-color: var(--yellow); }
.admin-dashboard section .card .card-body .card-body-item .avatar {
	font-size: 3rem;
	color: var(--yellow);
}
.admin-dashboard section .card .card-body .card-body-items {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.admin-dashboard section .card {
	border: none;
	background-color: var(--dark);
	margin-top: 35px;
}
.admin-dashboard section .row .col-box .col-box-icon { font-size: 3rem; }
.admin-dashboard section .row .col-box h4 { font-family: var(--bungee); }
.admin-dashboard section .row .col-box-1 { background-color: var(--yellow); }
.admin-dashboard section .row .col-box-2,
.admin-dashboard section .row .col-box-3 {
	background-color: var(--dark);
	cursor: pointer;
}
.admin-dashboard section .row .col-box {
	text-align: center;
	padding-top: 45px;
	padding-bottom: 45px;
}
.admin-dashboard,
.admin-accounts,
.admin-transactions {
	background-color: var(--bs-light);
}
.admin-update-bal,
.admin-update-trans {
	background-color: var(--purple);
}
.admin-accounts section .table thead tr th,
.admin-transactions section .table thead tr th {
	font-weight: normal;
	text-transform: uppercase;
	color: var(--yellow);
	background-color: var(--dark);
}
.admin-accounts section .table tbody tr .data-1,
.admin-transactions section .table tbody tr .data-1 {
	color: var(--purple);
}
.admin-accounts section .table tbody tr .data-2,
.admin-transactions section .table tbody tr .data-2 {
	color: var(--orange);
}
.admin-accounts section .table tbody tr .data-3,
.admin-transactions section .table tbody tr .data-3 { color: var(--bs-primary); }
.admin-transactions section .table tbody tr .data-4 { color: sienna; }
.admin-transactions section .table tbody tr .data-5 { color: var(--purple); }
.admin-accounts section .table tbody tr .data-4 { color: limegreen; }
.admin-transactions section .table tbody tr .data-6 { color: var(--bs-info); }
.admin-transactions section .table tbody tr .data-7 .pending { color: var(--bs-pink); }
.admin-transactions section .table tbody tr .data-7 .failed { color: var(--bs-red); }
.admin-transactions section .table tbody tr .data-7 .completed { color: limegreen; }
.admin-update-bal section .card .card-body h4,
.admin-update-trans section .card .card-body h4 { font-family: var(--bungee); }
.admin-update-bal section .card,
.admin-update-trans section .card {
	background-color: var(--white);
	border-radius: 0px;
	margin-top: 65px;
	margin-bottom: 65px;
}
@media screen and (min-width: 799px) {
	.admin-update-bal section .card,
	.admin-update-trans section .card {
		width: 45%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 479px) {
	.admin-dashboard .header .header-item .title,
	.admin-accounts .header .header-item .title,
	.admin-transactions .header .header-item .title,
	.admin-update-bal .header .header-item .title,
	.admin-update-trans .header .header-item .title {
		font-size: 1.125rem;
	}
}