/* General container styles */
.container {
	display: flex;
	height: 85vh;
	margin-left: -18px;
}

/* Column styles */
.column {
	width: 40%;
	display: flex;
	flex-direction: column;
}

/* Card styles */
.card {
	border: 1px solid #ccc;
	box-sizing: border-box;
	box-shadow: 1px 2px 4px 0px grey;
}

/* First column: Cards 1 and 2 */
.column-left .card-1 {
	margin-bottom: 5px;
	margin-top: 5px;
	height: 60%;
}

.column-left .card-2 {
	height: 33%;
}

/* Second column: Card 3 */
.column-right {
	width: 60%;
	display: flex;
	align-items: stretch;
	margin-top: 5px;
}

	.column-right .card-3 {
		width: 100%;
		height: 51vh;
		margin-left: 5px;
	}
	.column-right .card-4 {
		width: 100%;
		height: 28vh;
		margin-top: 6px;
		margin-left: 1%;
	}
.card-3-data {
	padding: 8px 5px 0px 5px;
}
.card-4-data {
	padding: 8px 5px 2px 5px;
}

.call-list-data-grid {
	width: 100%;
	height: 100%;
	border: none;
	box-sizing: border-box;
	overflow-y: auto;
}

.call-back-grid {
	width: 104%;
	height: 90%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.call-back-grid-item {
	flex: 1;
	overflow: hidden;
}

.call-back-data-grid {
	height: 100%;
	overflow-y: auto;
}

.search-list-grid {
	height: calc(100% - 40px);
}

.mud-tabs-vertical, .mud-tabs-vertical .mud-tabs-toolbar-inner {
	height: 100%;
}

 .mud-table.mud-data-grid .mud-table-container{
	height: 100%;
 }
.hide-footer{
	display:none !important;
}
.button-toogle{
	display:inline-block;
}
.button-toogle-off{
	display:none;
}
.move-button {
	background: #d2d2d2;
	font-weight: 700;
}

.strike td {
	text-decoration: line-through;
	color: black;
}

.call-list-data-grid > .mud-table-container {
	overflow-x: unset !important;
	overflow-y: unset !important;
}

.call-back-data-grid > .mud-table-container {
	overflow-x: unset !important;
	overflow-y: unset !important;
}


.button-grid-padding {
	padding-left: 42% !important;
	padding-top: 0% !important;
}

.container-event-code {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.column-event-code {
	padding: 10px;
	height: 100px;
}

.Event-code-margin {
	margin-top: -30px !important;
}

.Event-Code-Label {
	padding-top: 25px;
}

.Event-Code-Note-Label {
	float: left
}

.Event-Code-Note {
	width: 85%;
	margin-left: 15%;
}

.grid-show{
	display:inline-block;
}

.grid-hide {
	display: none;
}

.Grid-Cell {
	width: 100%;
	font-size: 8pt;
}

.Event-code-note-show {
	display: inline-flex;
}

.Event-code-note-hide{
	display:none;
}

.mud-tabs-panels.mud-tabs-vertical{
	width: calc(100% - 160px);
}

.mud-tabs-vertical .mud-tabs-panels .mud-tabs-panels{
	height: calc(100% - 110px);
}
.mud-grid-item .mud-input-control-boolean-input {
	flex: auto;
}
.mud-grid-item .mud-input-control-boolean-input .mud-button-root.mud-readonly{
	margin: 0!important;
	padding: 0!important;
}

/* Responsive design */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
		height: 218vh;
		margin-left: -18px;
	}
	.column {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.card {
		width: 100%;
		height: auto;
	}
	.column-left .card-1 {
		margin-bottom: 5px;
		margin-top: 5px;
		height: 93%;
	}

	.column-left .card-2 {
		height: 46vh;
	}
	.column-right {
		width: 100%;
		display: flex;
		align-items: stretch;
		margin-top: 6px;
	}
		.column-right .card-3 {
			width: 100%;
			height: 64vh;
			margin-left: 0px;
		}
		.column-right .card-4 {
			width: 100%;
			height: 39vh;
			margin-left: 0px;
		}
	.card-3-data {
		padding: 4px 5px 40px 5px
	}

	.call-list-data-grid {
		height: auto;
	}
	.table-design {
		margin-left: 1pt;
		height: 268px;
		overflow-y: auto;
	}
	.table-content {
		font-size: 12px;
		font-weight: 700;
		padding: 5px 0px 5px 4px !important;
	}
	.hide-footer {
		display: none !important;
	}
	.call-back-queue-text {
		margin-left: 2pt;
	}

}

@media (max-width: 425px) {
	.container {
		flex-direction: column;
		height: 218vh;
		margin-left: -18px;
	}

	.card {
		width: 100%;
		height: auto;
	}

	.column-left .card-1 {
		margin-bottom: 5px;
		margin-top: 5px;
		height: 90%;
	}

	.column-left .card-2 {
		height: 38vh;
	}

	.column-right {
		display: flex;
		align-items: stretch;
		margin-top: 5px;
	}

		.column-right .card-3 {
			width: 100%;
			height: 82vh;
			margin-left: 0px;
		}
		.column-right .card-4 {
			width: 100%;
			height: 34vh;
			margin-left: 0px;
		}

	.card-3-data {
		padding: 4px 5px 40px 5px
	}

	/* .case-viewer-button {
		width: 100%;
		margin-top: 5pt;
		margin-left: -3px !important;
	} */

	/* .call-list-grid {
		width: 103%;
		height: auto;
	} */

	.call-list-data-grid {
		height: auto;
	}

	.table-design {
		margin-left: 1pt;
		height: 256px;
		overflow-y: auto;
	}

	.table-content {
		font-size: 12px; 
		font-weight: 700;
		padding: 5px 0px 5px 4px !important;
	}
	.call-back-queue-text {
		position: relative;
		top: -1px;
		left: 4%;
	}
	.hide-footer {
		display: none !important;
	}
}