#display_content {
	padding-bottom: 4em;	
}

/* ======================================== */
/* ========== DASHBOARD OVERVIEW ========== */
/* ======================================== */

.grid-dashboard-overview {
	display: grid;
	grid-template-columns: 50px repeat( var(--teams), minmax(180px, 1fr)) minmax(30px, 50px) minmax(30px, 50px);
	grid-template-rows: minmax(25px, auto) minmax(50px, auto) repeat( var(--exercises), minmax(50px,auto));
	grid-gap: 10px;
	overflow-x: auto;
}

.grid-notification {
	display: grid;	
	grid-template-columns: 30px auto 1fr;
	grid-template-rows: minmax(0, auto);
	grid-gap: 10px;
}
.grid-notification > div:nth-child(1) { margin-left: 10px; }
.grid-notification > div:nth-child(2) { text-align: center; }

.icon-center {
	display: grid;
	justify-items: center;
	align-items: center;	
}

.icon-vertical-align {
	margin-top: auto;
	margin-bottom: auto;
}

.overview-button {
	position: relative;
    border: 1px solid grey;
    border-radius: 2px;
	cursor: pointer;
}

.grid-icon-and-number-and-users {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 5px;	
}
.grid-icon-and-number {
	display: grid;		   
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 5px;					 
}


/* Introduction overview item */
.grid-dashboard-overview-item-introduction {
	display: grid;	
	grid-template-columns: 1fr 3fr 1fr 3fr 1fr 3fr;
	grid-template-rows: 22px 22px;
	grid-gap: 2px;
	grid-template-areas:
		"doif-status doif-status doif-status doif-status doif-rest-time-icon doif-rest-time"
		"doif-status-indicator doif-status-indicator doif-status-indicator doif-status-indicator doif-status-indicator doif-status-indicator"
}
.doif-status {
    grid-area: doif-status;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doif-rest-time-icon { grid-area: doif-rest-time-icon; }
.doif-rest-time { grid-area: doif-rest-time; }
.doif-status-indicator { grid-area: doif-status-indicator; }

.introduction-box {
    padding: 5px 10px;
    border-radius: 2px;
}

.grid-dashboard-introduction-status {
	display: grid;	
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: 22px;
	grid-column-gap: 5px;
}
.grid-dashboard-introduction-status > div {
	margin: 5px 0;
	border-radius: 2px;
}

.task-done { background: #808080; }
.task-undone { background: #fff; }

.introduction-inprogress {
	background: #1b77d7;
	color: #fff;
}
.introduction-completed {
	background: #808080;
	color: #808080;
}

/* Test For Understanding overview item */
.grid-dashboard-overview-item-tfu {
	display: grid;	
	grid-template-columns: 1fr 3fr 1fr 3fr 1fr 3fr;
	grid-template-rows: 22px 22px;
	column-gap: 2px;
	grid-template-areas:
		"doit-status doit-status doit-status doit-status doit-rest-time-icon doit-rest-time"
		"doit-tfu-status doit-tfu-status doit-tfu-status doit-tfu-status doit-tfu-status doit-tfu-status"
}

.doit-status {
    grid-area: doit-status;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doit-rest-time-icon { grid-area: doit-rest-time-icon; }
.doit-rest-time { grid-area: doit-rest-time; }
.doit-tfu-status { grid-area: doit-tfu-status; }
.doi-status:first-letter { text-transform: uppercase; }

.tfu-box {
    padding: 5px 10px;
    border-radius: 2px;
}

.tfu-inprogress {
	background: #1b77d7;
	color: #fff;
}
.tfu-completed {
	background: #808080;
	color: #fff;
}

/* Exercise overview item */
.grid-dashboard-overview-item {
	display: grid;	
	grid-template-columns: 1fr 3fr 1fr 3fr 1fr 3fr;
	grid-template-rows: 22px 22px;
	column-gap: 2px;
	grid-template-areas:
		"doi-status doi-status doi-status doi-status doi-rest-time-icon doi-rest-time"
		"doi-risk-icon doi-risk doi-time-icon doi-time doi-cost-icon doi-cost"
}
.doi-status {
    grid-area: doi-status;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doi-rest-time-icon { grid-area: doi-rest-time-icon; }
.doi-rest-time { grid-area: doi-rest-time; }
.doi-risk-icon { grid-area: doi-risk-icon; }
.doi-risk { grid-area: doi-risk; }
.doi-time-icon { grid-area: doi-time-icon; }
.doi-time { grid-area: doi-time; }
.doi-cost-icon { grid-area: doi-cost-icon; }
.doi-cost { grid-area: doi-cost; }
.doi-status:first-letter { text-transform: uppercase; }

.exercise-box {
    padding: 5px 10px;
    border-radius: 2px;
}
.exercise-inprogress {
	background: #1b77d7;
	color: #fff;
}
.exercise-completed {
	background: grey;
	color: #fff;
}

/* Broadcast standard buttons */
.broadcast-btn-bar {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap onto the next line */
    gap: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.broadcast-std, .broadcast {
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.broadcast-std:hover, .broadcast:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.broadcast-std:active, .broadcast:active {
    background-color: #004085;
    transform: translateY(0);
}

#broadcast-clear {
    background-color: #dc3545;
}

#broadcast-clear:hover {
    background-color: #c82333;
}

#broadcast-clear:active {
    background-color: #bd2130;
}

/* Force close exercise */
.grid-force-close-exercise {
	display: grid;
	grid-template-columns: 1fr minmax(0, auto);
	grid-template-rows: auto;
	margin-top: 20px; 
}
.force-close-exercise {
	padding: 20px;
	text-align: center;
	color: red;
	font-size: 20px;
	transition: all .2s ease-in-out;
}
.force-close-exercise:hover { transform: scale(1.2); }