/* Instructor-paced CSS */
/* Version 1.0.13 */

/* ================================ */
/* ========== PAGE SETUP ========== */
/* ================================ */

.grid-setup {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: minmax(300px, 500px);
	grid-template-rows: minmax(0, auto);
}
.setup-box-style {
	padding: 2em;
	background: var(--main-background-box);
	border-radius: var(--main-border-radius-canvas-box);
}
#feedback_msg { margin-top: 20px; }
.setup-lable {
	font-size: 70%;
    width: auto;
    margin: 0 0 0 1em;
    padding: 0 2px;
    color: #6F6F6F;
    letter-spacing: 0.2em;
    text-transform: uppercase;	
}
.setup-input {
	border: 1px solid #ced4da;
    border-radius: .25rem;
	padding: 10px;
    height: 44px;
    cursor: text;	
}
.setup-select {
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .10px 10px;
    font-weight: 400;
    height: 44px;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;	
}

/* ====================================== */
/* ========== TRAINING OUTLINE ========== */
/* ====================================== */

.grid-outline {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
	grid-template-rows: minmax(0, auto) minmax(0, auto);
	grid-gap: 20px;
}
.grid-outline-box {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(0, 42px) minmax(0, auto);
	grid-gap: 10px;
	border-radius: var(--main-border-radius-canvas-box);
	background: var(--main-background-box);
	padding: 40px;
}
.grid-outline-box > div:nth-child(1) {
	border-bottom: 1.5px solid #d3d3d3;
	padding-bottom: 20px;
	font-size: 1.1rem;
	letter-spacing: .1rem;
}
.grid-outline-item {
	display: grid;
	grid-template-columns: 3fr 2fr 1fr;
	grid-template-rows: minmax(0, auto);
	grid-gap: 5px;
	padding: 20px;
	border-bottom: 0.75px solid #d3d3d3;
	grid-template-areas:
		"item-exercise item-status item-lock"
		"item-format item-format item-format"
}
.outline-item-exercise {
	grid-area: item-exercise;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .1rem;
}
.outline-item-status {
	grid-area: item-status;
}
.outline-item-lock {
	grid-area: item-lock;
	text-align: right;
}
.outline-item-format {
	grid-area: item-format;
	letter-spacing: .1rem;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
.markOutline {
	color: white !important;
	padding: 2px 5px 2px 5px;
	margin-left: 10px;
	font-size: 65%;
}
.pending{ background: #a6001a !important; }
.in-progress{ background: #ee9600 !important; }
.completed{ background: #004d33 !important; }