html,
body {
	height: 100%;
	background-color: #f5f5f5;
}
main {
	padding-bottom: 4rem;
}


/* Modal Styling */
.modal .modal-header {
	/* background-color: #F0F7FD; */
	background-color: #0d73f8;
	color: #fff;
}
.modal .modal-footer {
	/* background-color: #F0F7FD; */
}

	
/* Auth :: Login Form & Change Password */
body#login-page,
body#change-password {
	display: flex;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

body#login-page .form-signin,
body#change-password .form-changepass {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: auto;
}

body#login-page .form-signin .checkbox {
	font-weight: 400;
}

body#login-page .form-signin .form-floating:focus-within,
body#change-password .form-changepass .form-floating:focus-within {
	z-index: 2;
}

body#login-page .form-signin input[type="email"],
body#login-page .form-signin input[type="text"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

body#login-page .form-signin input[type="password"] {
	margin-bottom: 0.625rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

body#change-password .form-changepass input[type="password"] {
	margin-bottom: 0.625rem;
}



/* Header Nav bar */
header a.nav-link i.bi {
	line-height: 1.2;
}

header a.nav-link,
header a.nav-link:visited,
header a.nav-link:active,
header a.nav-link:focus {
	color: #949494;
}

header a.nav-link:hover {
	color: #fff;
}

header div.subnav {
	background-color: #fff;
}


/* body data attribute */
body[data-nav="customers"] header a.nav-link[data-nav="customers"],
body[data-nav="users"] header a.nav-link[data-nav="users"],
body[data-nav="projects"] header a.nav-link[data-nav="projects"],
body[data-nav="sop"] header a.nav-link[data-nav="sop"]
{
	color: #fff !important;
}



#project-list-container .project-list-item,
#user-list-container .user-list-item,
#customer-list-container .customer-list-item {
	border: 1px solid #ebebeb; /* #d3d3d3;*/
	background-color: #fff;
	border-radius: 0.75rem;
	padding: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
#project-list-container div.project-list-item div.project-list-item-start {
	cursor: pointer;
}
#project-list-container div.project-list-item:hover,
#user-list-container div.user-list-item:hover,
#customer-list-container div.customer-list-item:hover {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	background-color: #f5fbff;
}





/* List Items details */

.list-item-block {
	padding-bottom: 0.5rem;
	margin-bottom: -0.5rem;
}

.list-item-block .list-item-title {
	display: block;
}
/* Flex fallback: space-between and allow wrapping, each child at least 200px */
.list-item-block .list-item-details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	font-size: 0.75rem;
	color:     #666666;
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}

.list-item-block .list-item-details > span {
	flex: 1 1 198px; /* grow, shrink, base 200px */
	min-width: 198px;
	margin-top: -0.5rem;
}

.list-item-block .list-item-details span i {
	margin-right: 0.5rem;
}





/* Modal :: User Admin */

/* Hide initial load assuming data-uuid is not empty (editing) */
#userAdminModal #userAdminModal-addTitle, /* Hide Add Title */
#userAdminModal #userAdminModal-addBtn /* Hide Add Button */
{
	display: none;
}

/* If data-uuid is empty then we are adding */
#userAdminModal[data-user-uuid=""] #userAdminModal-addTitle /* Show Add Title */
{
	display: inline;
}
#userAdminModal[data-user-uuid=""] #userAdminModal-addBtn /* Show Add Button */
{
	display: block;
}
#userAdminModal[data-user-uuid=""] #userAdminModal-editTitle, /* Hide Edit Title */
#userAdminModal[data-user-uuid=""] #userAdminModal-editBtn, /* Hide Edit Button */
#userAdminModal[data-user-uuid=""] #userAdminModal-deleteBtn /* Hide Delete Button */
{
	display: none;
}





/* Modal :: Customer Admin */

/* Hide initial load assuming data-uuid is not empty (editing) */
#customerAdminModal #customerAdminModal-addTitle, /* Hide Add Title */
#customerAdminModal #customerAdminModal-addBtn /* Hide Add Button */
{
	display: none;
}

/* If data-uuid is empty then we are adding */
#customerAdminModal[data-customer-uuid=""] #customerAdminModal-addTitle /* Show Add Title */
{
	display: inline;
}
#customerAdminModal[data-customer-uuid=""] #customerAdminModal-addBtn /* Show Add Button */
{
	display: block;
}
#customerAdminModal[data-customer-uuid=""] #customerAdminModal-editTitle, /* Hide Edit Title */
#customerAdminModal[data-customer-uuid=""] #customerAdminModal-editBtn, /* Hide Edit Button */
#customerAdminModal[data-customer-uuid=""] #customerAdminModal-deleteBtn /* Hide Delete Button */
{
	display: none;
}