.grid-container-lg {
	height: calc(100dvh - 100px);
	width: 100%;
	display: grid;
	grid-template:
		'welcome welcome module-boxes' auto
		'map map module-boxes' 2fr
		'map map last-load-entries' auto
		'calculator chat last-load-entries' auto / 1fr 1fr 1fr;
	gap: 20px;
}

.grid-container-md {
	height: auto;
	width: 100%;
	display: grid;
	grid-template:
		'welcome welcome' auto
		'map module-boxes' 150px
		'map module-boxes' 2fr
		'calculator last-load-entries' auto
		'chat last-load-entries' auto / 2fr 2fr;
	gap: 20px;
}

.grid-container-sm {
	height: fit-content;
	width: 100%;
	display: grid;
	grid-template:
		'welcome' auto
		'module-boxes' auto
		'map' 300px
		'calculator' auto
		'last-load-entries' auto
		'chat' auto / 1fr;
	gap: 20px 0;
}

.welcome {
	width: 100%;
	grid-area: welcome;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	color: #4f4b4b;
}

.welcome > h1 {
	color: var(--main-color);
	font-size: 2em;
	font-weight: bold;
	margin-top: 10px;
}

.module-boxes {
	width: 100%;
	grid-area: module-boxes;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.last-load-entries {
	width: 100%;
	grid-area: last-load-entries;
	background-color: white;
	border-radius: 10px;
}

.map {
	grid-area: map;
	background-color: white;
	box-shadow: var(--widget-box-shadow);
	border-radius: 10px;
}

.module-box {
	display: flex;
	width: calc(50% - 10px);
	/* flex: 1 1 calc(50% - 10px); */
	margin: 5px;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	height: calc(100% / 4 - 10px);
	flex-direction: column;
}

.module-box .module-box-container {
	position: relative;
	width: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: end;
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.module-box .module-box-container h2 {
	margin: 0;
	font-size: 3em;
	font-weight: bold;
}

.module-box .module-box-container p {
	font-size: 1em;
}

.module-box-container .icon {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 0;
	font-size: 60px;
	color: rgba(0, 0, 0, 0.15);
}

.module-box .icon:hover {
	font-size: 70px;
}

.bg-users {
	background-color: #588157;
	color: white;
}
a.bg-users:hover,
a.bg-users:active,
a.bg-users:focus {
	color: white;
}
.bg-load {
	background-color: #0073b7;
	color: white;
}
a.bg-load:hover,
a.bg-load:active,
a.bg-load:focus {
	color: white;
}
.bg-brokers {
	background-color: #2a9d8f;
	color: white;
}
a.bg-brokers:hover,
a.bg-brokers:active,
a.bg-brokers:focus {
	color: white;
}
.bg-shippers {
	background-color: #e9c46a;
	color: #4f4b4b; /* #7b7070 */
}
a.bg-shippers:hover,
a.bg-shippers:active,
a.bg-shippers:focus {
	color: #4f4b4b;
}
.bg-consignees {
	background-color: #ee9b00;
	color: white;
}
a.bg-consignees:hover,
a.bg-consignees:active,
a.bg-consignees:focus {
	color: white;
}
.bg-questions {
	background-color: #e9d8a6;
	color: #4f4b4b;
}
a.bg-questions:hover,
a.bg-questions:active,
a.bg-questions:focus {
	color: #4f4b4b;
}
.bg-reviews {
	background-color: #c0c0c0;
	color: #6a6767;
}
a.bg-reviews:hover,
a.bg-reviews:active,
a.bg-reviews:focus {
	color: #6a6767;
}
.bg-places {
	background-color: #bc4749;
	color: white;
}
a.bg-places:hover,
a.bg-places:active,
a.bg-places:focus {
	color: white;
}
.bg-chat {
	background-color: #1ba2f1;
	color: white;
}
a.bg-chat:hover,
a.bg-chat:active,
a.bg-chat:focus {
	color: white;
}

h2.widget-title {
	margin: 0;
	text-align: center;
	border-top-left-radius: var(--border-radius-measure);
	border-top-right-radius: var(--border-radius-measure);
	padding: 5px;
	font-weight: 500;
}

.load-entry {
	padding: 5px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.load-entries {
	padding: 15px;
}

.widget-add-button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 10px;
	color: white;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid white;
}

.widget-add-button:hover {
	color: white;
}

.load-entry h3 {
	width: 100px;
	font-size: 1em;
	font-weight: bold;
	padding: 5px;
	border-radius: var(--border-radius-measure);
	background: rgb(229, 231, 233);
	color: rgb(99, 99, 99);
	height: fit-content;
	text-align: center;
	margin: 0;
}

.load-entry .load-info {
	display: grid;
	grid-template-columns: 1fr 70px 1fr;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.load-info > .step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 		align-items: center; */
}

.load-info > .step p {
	margin: 0;
}

.load-info > .step p:first-child {
	font-size: 14px;
	font-weight: bold;
}

.load-info > .step p.date {
	padding: 5px;
	border-radius: var(--border-radius-measure);
	font-size: 12px;
}

.load-info > .delivery-load {
	border-right: 3px solid #ee9b00;
	padding-right: 10px;
/*  align-items: flex-end; */
	background-color: var(--widget-bg-color);
	z-index: 1000;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
}

.load-info > .source-load {
	border-left: 3px solid #2a9d8f;
	padding-left: 10px;
	background-color: var(--widget-bg-color);
	z-index: 1000;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}

.load-info > .shipping {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: fit-content;
	font-size: 2em;
	width: 70px;
	padding-bottom: 15px;
	border-bottom: 3px solid rgb(231, 231, 231);
}

.load-info > .shipping > h3 {
	font-size: 14px;
	width: 50px;
}

.load-info > .shipping i {
	position: absolute;
	left: -70px;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	animation: move-and-fade 4s infinite;
	color: #e9c46a;
}

@keyframes move-and-fade {
	0% {
		left: -50px;
		opacity: 1;
	}
	45% {
		left: 200%;
		opacity: 1;
	}
	50% {
		left: 200%;
		opacity: 0;
	}
	55% {
		left: -50px;
		opacity: 0;
	}
	100% {
		left: -50px;
		opacity: 1;
	}
}

.discussions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
}

.discussions .discussion {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 10px;
	border: none;
	padding-bottom: 0;
	margin-bottom: 10px;
}

.discussion .user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	color: #fff;
	vertical-align: top;
	background-color: var(--avatar-bg);
	font-weight: normal;
	--size: 48px;
	width: var(--size);
	height: var(--size);
	border-radius: 100%;
	font-size: calc(var(--size) / 2);
}

.discussion .discussion-link {
	text-decoration: none;
	color: inherit;
}

.discussion-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.discussion-details .discussion-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.discussion-details .discussion-info h3 {
	margin: 0;
	font-size: 1em;
}

.discussion-details .discussion-info p {
	margin: 0;
	font-size: 0.8em;
}

.discussion-category {
	padding: 0.1em 0.5em;
	border-radius: 4px;
	color: white;
}
.discussion-creation i {
	margin: 0 5px;
}

.discussion-creation .username {
	font-weight: bold;
}

.discussion-creation .answer-date {
	font-weight: normal;
}

.discussion-answers {
	background-color: #f6e6e4;
	color: #996c66;
	padding: 5px;
	border-radius: 10px;
}

.discussion .user {
	width: 40px;
	height: 40px;
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.calculator {
	width: 100%;
	grid-area: calculator;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	color: #4f4b4b;
}

.calculator h2 {
	color: var(--main-color);
	font-size: 2em;
	font-weight: bold;
	margin: 0;
}

.calculator-header {
	display: flex;
	justify-content: space-between;
	align-items: start;
}

.calculator-actions {
	display: flex;
	gap: 10px;
}

.calculator-header button {
	border-radius: 5px;
	padding: 5px;
	border: none;
	font-size: 1.5rem;
}

.calculator-form {
	display: grid;
	grid-template-columns: 2fr 2fr 3fr;
	gap: 10px;
}

.calculator-input-group > input {
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.calculator-input-group {
	margin-bottom: 5px;
}

.price-for-miles {
	background-color: rgb(249, 249, 249);
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	width: 100%;
}

.price-for-miles > p {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100% - 40px);
	font-size: 30px;
	padding: 10px;
}

@media (max-width: 799px) and (orientation: portrait) {
	.welcome {
		overflow: hidden;
		padding: 10px 20px;
	}

	.welcome h1 {
		font-size: 1.5em;
		margin: 10px 0;
	}

	.module-boxes {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
		justify-content: unset;
	}

	.module-box {
		width: 100%;
		height: calc(100% - 10px);
	}

	.module-box .module-box-container {
		width: calc(100dvw / 2 - 10px);
	}

	.load-entries {
		padding: 5px;
	}

	.load-info > .step p:first-child {
		font-size: 13px;
	}

	.load-info > .step p.date {
		padding: 5px;
		font-size: 12px;
	}

	.load-entry .load-info {
		grid-template-columns: 1fr 50px 1fr;
	}

	.load-info > .shipping {
		width: 50px;
	}

	.load-info > .shipping i {
		position: absolute;
		left: -50px;
		top: 70%;
		transform: translateY(-50%) scaleX(-1);
		animation: move-and-fade 5s infinite;
		color: #e9c46a;
	}

	@keyframes move-and-fade {
		0% {
			left: -50px;
			opacity: 1;
		}
		45% {
			left: 200%;
			opacity: 1;
		}
		50% {
			left: 200%;
			opacity: 0;
		}
		55% {
			left: -50px;
			opacity: 0;
		}
		100% {
			left: -50px;
			opacity: 1;
		}
	}

	.calculator-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.cost-block,
	.total-block {
		width: calc(50% - 5px);
	}

	.price-for-miles p {
		margin: 0;
	}
}

@media (max-width: 1100px) and (orientation: portrait){
	.grid-container-md {
		height: calc(100dvh - 100px);
		grid-template:
			'welcome welcome' auto
			'map map' 1fr
			'map map' 1fr
			'module-boxes last-load-entries' 1fr
			'calculator chat' auto / 1fr 1fr;
	}
}

@media (min-width: 1930px) {
	.module-box .module-box-container h2 {
		font-size: 5em;
	}

	.module-box-container .icon {
		font-size: 80px;
	}

	.module-box-container .icon:hover {
		font-size: 100px;
	}
}