@import "variables.css";
@import url("/assets/css/simply/reset.css");
@import url("/assets/css/simply/helpers/all.css");
@import url("/assets/css/simply/ui-components/all.css");
@import url("ui-budget-card.css");

body {
	height: 100vh;
	overflow: hidden;
}

header {
	display: flex;
	justify-content: flex-start;
	padding: 4rem 2.5rem 2rem 2.5rem;
}

header .logo {
	display: flex;
	align-items: center;
	min-width: 20rem;
	font-weight: 700;
	font-size: 2rem;
	color: var(--color-blue);
	margin-top: -1rem;
}

header nav {
	display: none;
	width: 100%;
}

@media only screen and (min-width: 1024px) {
	header nav {
		display: block;
	}
}

/* Boxes */
.box {
	position: relative;
	text-align: center;
	box-shadow: 0 0 2rem 0.3rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
	border: 0;
	border-radius: .4rem;
	background-color: var(--color-white);
	width: 35rem;
	padding: 3rem 2rem;
	cursor: pointer;
	transition: all 250ms ease;
}
.box:hover {
	box-shadow: 0 0 2rem 1rem rgb(8 60 130 / 8%), 0 0 1.25rem rgb(30 34 40 / 4%);
	z-index: 2;
}
.box--width-m {
	width: 50rem;
}

.box .progress-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2rem;
	background-color: var(--color-blue-light2);
	color: white;
	font-weight: 800;
}
.box .progress-container .remaining-time {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
}
.box .progress-container .content {
	height: 2rem;
	width: 100%;
	background-color: var(--color-blue-dark2);
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
}

.box .head img {
	padding-top: 1rem;
	display: inline-block;
	width: 6rem;
}
.box .head .title {
	text-align: center;
	color: var(--color-blue-dark);
	font-size: 2.2rem;
	font-weight: 600;
	margin-bottom: 0;
}
.box .head .price {
	margin-top: 1rem;
	font-size: 3rem;
	font-weight: 600;
}
.box .head .name {
	text-align: center;
	color: var(--color-blue-dark);
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 0;
	margin-top: 2rem;
}
.box .head .email {
	margin-bottom: 4rem;
	font-size: 1.8rem;
	margin-top: 0;
	font-weight: 600;
}
.box .head .price span {
	font-size: 1.6rem;
	font-weight: 400;
}
.box .body ul {
	text-align: left;
}
.box .body ul li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.box .body li i {
	color: var(--color-blue);
}

.box .foot {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

/* Login */
.login {
	background-color: var(--color-lightblue);
	padding-top: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
.login-box {
	padding: 4rem 3rem;
	margin-top: 3rem;
	width: 50rem;
	background-color: var(--color-cream);
	border-radius: 1rem;
	box-shadow: 0 0 2rem 0.3rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
}

/* Admin */
.sidebar {
	min-width: 25rem;
	max-width: 25rem;
	background-color: var(--color-blue-dark);
	min-height: 100vh;
}
.sidebar ul {
	padding-left: 0;
	height: calc(100vh - 6.5rem);
	overflow-y: scroll;
}
.sidebar ul li {
	padding: 0;
	position: relative;
}
.sidebar ul li i {
	margin-right: 1rem;
}
.sidebar ul li a {
	font-weight: 600;
	transition: padding 150ms ease;
	padding: 1.25rem 1rem 1.25rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-cream);
}
.sidebar ul li a:hover,
.sidebar ul li a.active {
	color: var(--color-pink);
}
.sidebar ul li a.client-shared {color: var(--color-blue);}
.sidebar ul li a.client-shared:hover, .sidebar ul li a.client-shared.active {color: var(--color-blue-dark2);}
.label.client-label {
	position: absolute;
	top: 36%;
	right: -4.5rem;
	text-overflow: ellipsis;
	font-size: 1rem;
	width: 40px;
	height: 18px;
	overflow: hidden;
	white-space: nowrap;
	transform: rotate(20deg);
	color: black;
}

.sidebar .has-submenu .submenu {
	display: none;
	opacity: 0;
	height: 0;
	transition: height ease 150ms;
	padding: 0;
	background-color: #232b3a;
	margin-left: -3rem;
}
.sidebar .has-submenu .submenu li {
	max-width: 80%;
}
.sidebar .has-submenu .submenu a {
	font-size: 1.4rem;
	padding-bottom: .5rem;
	padding-right: 0;
}
.sidebar .has-submenu .submenu a .title {
	position: relative;
	padding-left: 2.5rem;
}
.sidebar .has-submenu .submenu a .title  i {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.sidebar .has-submenu:hover .submenu,
.sidebar .has-submenu.opened .submenu {
	display: block;
	height: auto !important;
	opacity: 1;
	padding: 1rem 0 1rem 4rem;
}

main {
	background-color: var(--color-cream-light);
	padding: 0 2rem;
	width: 100%;
	overflow-y: scroll;
}

main .topbar-sticky {
	padding: .5rem 2rem;
	position: fixed;
	top: 0;
	left: 25rem;
	z-index: 4;
	background: var(--color-cream);
	width: calc(100% - 25rem);
	box-shadow: 0 0 1rem rgba(0,0,0,.2);
}

/* Datepicker */
.mx-table-date td, .mx-table-date th {
	text-align: center;
}
.mx-datepicker {width: 100%!important;}

@media (max-width: 1023px)
{
	.sidebar {
		transition: transform 150ms ease;
		position: fixed;
		top: 0;
		left: 0;
		transform: translateX(-100%);
		z-index: 9999;
	}
	.sidebar.opened {
		transform: translateX(0);
	}

	.menu-trigger {
		font-size: 3rem;
		padding: .5rem 1.5rem;
	}
	.menu-trigger .close {display: none}
	.menu-trigger.active .open {display: none;}
	.menu-trigger.active .close {display: block;}

	main {
		max-width: 100vw;
		width: 100vw;
		overflow-x: hidden;
		padding-bottom: 6rem;
	}
	main .topbar-sticky {
		left: 0;
		width: 100vw;
	}

	.mobile-bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 6rem;
		background-color: var(--color-cream);
		z-index: 99999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .5rem .5rem;
		box-shadow: 0 0 1rem rgba(0,0,0,.6);
	}
}

@media (min-width: 1024px) {
	.mobile-bottom-bar {display: none;}
}