/* *******************************/

main.dashboard {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	width: 100%;
}

main.dashboard > section {
	width: calc((100% - 40px) / 3);

	iframe {
		aspect-ratio: 16 / 9;
		border-radius: 10px;
		box-shadow:	0 5px 5px rgba(0, 0, 0, 0.05);
		margin-bottom: 0px;
		width: 100%;
	}

	.title {
		font-weight: 600;

		a {
			color: #444;
		}
	}
}

main.dashboard section.tax-lot-card {
	width: 350px;
}

main.dashboard section .card-body {
	min-height: 300px;
	text-align: center;
}

main.dashboard section .card-image {
	margin-bottom: 20px;
}

main.dashboard section .card-image {
	align-items: center;
	background-color: #ddd;
	border-radius: 100px;
	display: inline-flex;
	height: 100px;
	justify-content: center;
	width: 100px;
}

main.dashboard section .card-image img {
	height: 40px;
	opacity: 0.5;
	width: auto;
}

main.dashboard section .card-body h2 {
	justify-content: center;
}

/* *******************************/

main.list section.main {
	width: 100%;
}

/* *******************************/

main.view,
main.edit {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

main.view section.main,
main.edit section.main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

main.view aside,
main.edit aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

@media (min-width: 1400px) {

	main.view,
	main.edit {
		flex-direction: row;
	}

	main.view section.main,
	main.edit section.main {
		width: calc(100% - 300px);
	}

	main.view aside,
	main.edit aside {
		height: 100%;
		overflow: hidden;
		width: 300px;
	}
}

/* *******************************/

.cols-split {
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

.cols-split > div {
	width: 50%;
}

/* *******************************/

main.view section.main .col-a,
main.edit section.main form,
div.modal-content .col-a {
	display: flex;
	flex-direction: column;
	gap: 40px;
	justify-content: space-between;
}

main.edit section.main .search {
	gap: 10px;
}

main.view section.main .col-a > div,
main.edit section.main form > div {
	width: 100%;
}

@media (min-width: 768px) {

	main.view section.main .col-a,
	main.edit section.main form {
		flex-direction: row;
	}

	main.view section.main .col-a > div,
	main.edit section.main form > div:not(.qs) {
		width: 50%;
	}
}

@media (min-width: 992px) {

	div.modal-content .col-a {
		flex-direction: row;
	}

	div.modal-content .col-a > div {
		width: 50%;
	}
}

/* *******************************/

.modal-activities img.avatar {
	border-radius: 20px;
	height: 40px;
	transition: all ease 0.2s;
	width: auto;
}

.modal-activities .date {
	font-size: 0.9rem;
}

.modal-activities .changes {
	background-color: #fff3cd;
	border-radius: 3px;
	display: inline-block;
	font-size: 0.8rem;
	padding: 0 5px;
}

.modal-activities .changes span {
	font-weight: 600;
}

/* *******************************/

.modal-notes img.avatar {
	border-radius: 20px;
	height: 40px;
	transition: all ease 0.2s;
	width: auto;
}

/* *******************************/

main .notes {
	height: calc(100vh - 130px);
	position: fixed;
	width: 300px;
}

main .notes .card-body {
	overflow: hidden;
	overflow-y: auto;
	padding-top: 0;
}

main .notes .note {
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
}

main .notes .note:last-child {
	border-bottom: 0;
	padding-bottom: 10px;
}

main .notes .note .info {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
	width: 100%;
}

main .notes .note .info img.avatar {
	border-radius: 20px;
	height: 40px;
	transition: all ease 0.2s;
	width: auto;
}

main .notes .note .info .user {
	white-space: nowrap;
}

main .notes .note .info .user .name {
	font-weight: 600;
	line-height: 1rem;
}

main .notes .note .info .user .title {
	font-size: 0.8rem;
	font-style: italic;
}

main .notes .note .info .opts {
	text-align: right;
	width: 100%;
}

main .notes .note .info img {
	height: 15px;
	width: auto;
}

main .notes .note .comment {
	font-size: 0.8rem;
	line-height: 1rem;
}

main .notes .note .comment .date {
	background-color: #666;
	border-radius: 2px;
	color: #fff;
	font-size: 0.8rem;
	padding: 0 5px;
}

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

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


/*  Account Dashboard  ******************************/

.account.dashboard {

	.card, .btn-contact-add {
			width: 100%;
	}
}

.main .mobile {
	text-align: center;

	.account-picker {
		margin-bottom: 20px;
	}
}

.account-picker {
  max-width: 100%;

	.btn, .dropdown-item {
		display: flex;
		align-items: center;
		gap: .5rem;
	}

	.btn {
		justify-content: space-between;
		flex: 0 0 auto;     
		min-width: 0;       
		text-align: left;
	}

	.btn:not(.dropdown-toggle-split) {
		flex: 1 1 auto;
	}

	.btn:not(.dropdown-toggle-split) > span:first-child, .dropdown-item > span:first-child {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.btn > small, .dropdown-item > small, .dropdown-item > .badge {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.dropdown-item > span:first-child {
		overflow-wrap: anywhere;
	}

	.dropdown-menu {
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 500px) {

  .account-picker .btn > small { 
		display: none; 
	}

	main.account.dashboard {
    align-items: center;
		justify-content: center;
}

	section.video {
			width: 100% !important;
	}
}

@media (min-width: 575px) {

	.tax-lot.card{
		label {
			text-align: right;
		}
		.row > div {
			text-align: left;
		}
	}
}

@media (min-width: 768px) {

	.account.dashboard {
		flex-direction: row;
		align-items: flex-start;
		height: calc(100svh - 91px);
	
		.contact.card, .btn-contact-add {
			width: calc((100% - 60px) / 4);
		}

		.tax-lot.card{
			width: calc((100% - 40px) / 3);

			label {
				text-align: right;
			}
			.row > div {
				text-align: left;
			}
		}

		.account-balance.card {
			width: calc((100% - 20px) / 3 * 2);
		}

		.statements.card {
			width: calc((100% - 20px) / 3 * 1);
		}
	}
			.mobile {
			display: none;
		}
}