.content {
	padding-bottom:0;
}

.flexRow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.flex1 {
	flex: 1;
}

.grid-container {
	display: grid;
	grid-template-columns: minmax(0, 29rem) minmax(0, 30rem) minmax(0, 27rem);
	grid-template-rows: auto;
	grid-template-areas: "colLeft colCenter colRight";
	max-width: 100%;
	overflow-x: auto;
}

.colLeft {
	display: flex;
	flex-direction: column;
}

/*.colLeft {
	grid-area: colLeft;
	background-color: #fff;
	color: #000;
	display: grid;
	grid-template-columns: 14rem 10rem 9rem;
	grid-template-rows: 2.5rem 2.5rem 3.0rem auto;
	column-gap: 1rem;
}*/

#instructionText{
	grid-column: span 2;
	margin-top: 1rem;
	text-align: left;
}

.colCenter {
	grid-area: colCenter;
	overflow: auto;
	max-width: 100%;
}
.spacer {
	grid-area: spacer;
	max-width: 100%;
}

.colRight {
  grid-area: colRight;
  overflow: auto;
  max-width: 100%;
}

.headerText {
	margin: 0 0 0.5rem 0;
}

div.tableContainer {
	max-height: 35%;
	overflow-y: auto;
	border-collapse: collapse;
	max-width:97%;
}
input.dataEntryStretch {
	max-width: auto !important;
}
#calcDatesContainer {
	max-width: 85%;
	margin-left: 10%;
	max-height: 26rem;
}		
#calcDates {
	width:98%;
}
#calcDates th, 
#calcDates td {
	text-align:center;
}
#holidayDates tr:not(:first-child)
td:nth-child(2) {
	text-align:left;
}
#holidayDates tr /*:not(:first-child)*/
td:nth-child(1) {
	padding-left:0.6rem;
}
#holidayDates tr th:nth-child(2) {
	padding-right: 3rem;
}

#holidayDates tr:nth-child(even),
#calcDates  tr:nth-child(even){
	background-color: #f2f2f2;
}
#holidayDates tr:nth-child(odd),
#calcDates  tr:nth-child(odd){
	background-color: #ffffff;
}
#holidayDates tr th,
#calcDates tr th
{
	position:sticky;
	top:0;
	background-color: #333;
	color: #fff;
	text-align:center;
	z-index:1;
}
#holidayDates th span,
#calcDates th span{
	display: inline;
	vertical-align: middle;
}
.align-image {
/*	position: absolute;
*/	left: 5.5%;
}
.row-1 {
	top: 1.9rem;
}
.row-2 {
	top: 3.6rem;
}
a.always-on,
a.always-on:link,
a.always-on:visited,
a.always-on:hover,
a.always-on:active {
	font-size: 1.1rem;
	font-weight: normal;
	color: #0000EE;
	text-decoration: underline;
}
a.hTab {
	margin-left: 1.5rem;
}

img{
	max-width: 1rem;
}

#CalcSchedule {
	background-color: #000063 !important;
	color: white !important;
}


.toolTipText {
	min-width: 18rem;
	max-width: 28rem;
}

details {
	margin-top: 0.5rem;
}

#tableTip {
	color: black;
}

.warning {
	color: #cc0000 !important;
	background-color: #fcfcfc !important;
	border-color: red;
}
.warningMsg {
	margin-left: 0.5rem;
	color: #cc0000 !important;
	background-color: #fcfcfc !important;
}
.warningControlContainer {
   /* display:flex; 
    align-items:self-start; */
    white-space:nowrap;
}
.warningControl {
    border-color: red;
}

/* DueDateCalculator2 experiement */
thead.tr th {
	background-color: green;
	position: relative; /* Anchor for the "?" icon and tooltip */
}

/* Tooltip container */
.ddc2toolTipText {
/*	position: absolute;
*/	top: 2.5rem; /* Below the "?" icon */
	left: -2.8rem; /*0;*/
	background-color: #fff;
	color: #000;
	border-radius: 0.25rem;
	border: 1px solid #888;
	font-size: small;
	max-width: 26rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
	z-index: 100;
	display: none; /* Initially hidden */
}

/* "?" icon styling */
.ddc2tooltip img {
	max-width : 1rem; /* Set icon size */
	height: 1rem; /* Ensure square dimensions */
	vertical-align: middle;
	cursor: pointer;
}

.toolTipPStyle {
	line-height: var(--bs-body-line-height);
	max-width: 28rem;
	position: absolute;
	right: 1rem;
	background-color: white;
	border: 1px solid black;
}


@media screen and (max-width: 1400px) {
	.grid-container {
		display: flex;
		flex-direction: column;
	}

	.subText{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.toolTipText {
		position: relative;
	}
}