.index {
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	padding: 1.1rem 1rem 1.25rem 1rem;
}

	.index .tit {
		color: #38342C;
		font-size: 1.125rem;
		margin-left: 0.5rem;
	}

	.index .gr-border {
		display: grid;
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		height:100%
	}

	.index .containerT {
		max-width: inherit !important;
	}

		.index .containerT .row {
			padding: 0.625rem 0;
		}

	.index .btn-light:hover:enabled {
		background-color: #f8f9fa !important;
		color: #003C71 !important;
	}


	.index .btnT {
		min-height: 2.5rem;
		color: #003C71 !important;
		font-size: 1em !important;
		font-weight:500;
		background-color:white;
	}
	.index .btnT2 {
		min-height: 2.5rem;
		font-weight: 500;
		color: white !important;
		font-size: 1em !important;
		margin-left:10px;
	}

	.index .tabletit {
		background-color: white;
	}
	.index .tabletit-c {
		background-color: #003C71;
	}

	.index .dropdown-item {
		color: #003C71;
		font-weight:400;
	}

	.index .dismiss {
		color: #EF3340;
		padding: 0 0 5px 0.625rem;
	}

		.index .dismiss span {
			vertical-align: middle;
		}
		.index .dismiss .txt {
			font-weight: 500;
			font-size: 0.75rem
		}
		.index .dismiss .btnD {
			color: #003C71 !important;
			background-color: white;
			font-weight: 500;
			font-size: 0.875rem;
			padding: .1rem .325rem;
			margin-left: 1rem;
		}

	.index .tmaterials {
		margin-bottom: 0;
		min-width: 2200px;
		max-width: 2680px;
	}

		.index .tmaterials td.impact-number {
			text-align: right;
			padding-right: 1rem !important;
		}
		.index .tmaterials td.distance-number {
			text-align: right;
			padding-right: 2rem !important;
		}

.compare-button:disabled {
	color: #B2C4D4 !important;
	border-color: #B2C4D4 !important;
}

.export-button:disabled {
	background-color: #B2C4D4 !important;
	border-color: #B2C4D4 !important;
}

.save-button:disabled {
	background-color: #B2C4D4 !important;
	border-color: #B2C4D4 !important;
}

/*#region Materials table*/
.tmaterials th {
	min-width: 6rem;
	height: 2.5rem;
	font-size: 0.625rem;
	font-weight: 500;
	/*text-align: center;*/
	padding: 0 !important;
	vertical-align: middle !important;
	background-color: #E5EBF1;
	color: #717C7D;
	position: sticky;
	top: 0;
	border-top: none !important;
}

.tmaterials th div{
	cursor:pointer;
	display:grid;
	grid-template-columns: auto auto 1fr;
	/*width:fit-content;*/
	margin:0 auto;
}
.tmaterials th .material-icons{
	vertical-align: middle;
	color:black;
	font-size: 1rem;
	align-self:center;
}
.tmaterials th .s {
	font-size: 0.8rem;
	padding-left: 3px;
}

.tmaterials tbody tr:nth-child(even) {
	background-color: #fafbfb;
}
.tmaterials tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

.tmaterials td {
	color: #101820;
	font-size: 0.75rem;
	/*text-align: center;*/
	padding: 0.5rem 0rem !important;
}

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

.tmaterials .tdr {
	/*text-align: right;*/
}

.tmaterials td .material-icons {
	color: #EF3340;
	font-size: 1rem;
}

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

.tmaterials tbody tr:is(:hover) {
	color: inherit !important;
	background-color: #E6F5F6 !important;
}

.tmaterials > tbody > tr {
	cursor: pointer;
}

.material-selector {
	margin-left: 10px !important;
    margin-right: 8px !important;
	transform: scale(1.2);
}

.disabled-dropdown {
	color: #B2C4D4 !important;
	border-color: #F4F4F4 !important;
}

/*#endregion*/

.cursor-pointer {
	cursor: pointer;
}

.index .footer {
	background-color: white;
	font-size: 0.875rem;
	color: #003C71;
	min-height: 40px;
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: start;
}

	.index .footer select {
		height: 28px;
		color: #003C71;
		border-radius:0.25rem;
		font-size:0.75rem;
	}

	.index .btnF {
		padding: 0 0.25rem;
		height:30px;
		background-color:transparent;
	}

	.index .footer .txthide2 {
		display: none;
	}

	.index .footer .material-icons {
		display: block;
		font-size: 1.2rem;
	}

	.index .footer .notes {
		width: 100%;
	}
		.index .footer .notes .note {
			margin-left: 10px;
			font-size: 0.8em;
		}
	.index .footer .page-selector {
		display: flex;
		align-self: flex-end;
		padding: 5px;
	}


@media (max-width: 992px) {
	.index .btnT, .index .btnT2 {
		font-size: 1.65vw !important;
	}

	.index .dismiss .btnD {
		font-size: 1.5vw !important;
	}
}

@media (max-width: 768px) /* Mobile */
{
	.index .btnT, .index .btnT2 {
		font-size: 2vw !important;
	}

	.index .dismiss {
		padding: 2px 0 5px 0;
		margin:0 auto;
		width:fit-content;
	}

	.index .dismiss .btnD, .index .dismiss .txt {
		font-size: 0.75rem !important;
	}

	.index .containerT .row {
		padding: 0 !important;
	}

	.hideindex {
		display: none;
	}
}

@media (max-width: 520px) {
	.index .dismiss .btnD, .index .dismiss .txt {
		font-size: 0.6rem !important;
	}

	.index .btnT2 {
		margin-left:unset;
	}

	.index .footer .txthide {
		display:none;
	}
	.index .footer .txthide2 {
		display:inline;
	}
}

/* title cols overwrite*/
@media (max-width: 575.98px) {
	.col-2 {
		-ms-flex: 0 0 36% !important;
		flex: 0 0 36% !important;
		max-width: 36% !important;
	}

	.col-10 {
		-ms-flex: 0 0 64% !important;
		flex: 0 0 64% !important;
		max-width: 64% !important;
	}
}
@media (max-width: 412px) {
	.col-2 {
		-ms-flex: 0 0 18% !important;
		flex: 0 0 18% !important;
		max-width: 18% !important;
	}

	.col-10 {
		-ms-flex: 0 0 82% !important;
		flex: 0 0 82% !important;
		max-width: 82% !important;
	}
}