/*
    ADDITIONAL DEMO STYLE, NOT IMPORTANT TO MAKE THINGS WORK BUT TO MAKE IT A BIT NICER :)
*/
@import
	"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
	
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Source Sans Pro', sans-serif, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Arial Black", "Comic Sans MS", "Courier New",
		"Apple Color Emoji", Helvetica, Impact, Tahoma, "Times New Roman", Verdana,
		"Segoe UI Emoji", "Segoe UI Symbol";
}

* { font-family: "Source Sans Pro" }

p {
	font-family: -apple-system, BlinkMacSystemFont, 'Source Sans Pro', sans-serif, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Arial Black", "Comic Sans MS", "Courier New",
		"Apple Color Emoji", Helvetica, Impact, Tahoma, "Times New Roman", Verdana,
		"Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.1em;
	font-weight: 300;
	line-height: 1.7em;
}

a, a:hover, a:focus {
	color: inherit;
	text-decoration: none;
}

a:hover {
 cursor:pointer;
}

.navbar {
	padding: 15px 10px;
	background: #fff;
	border: none;
	border-radius: 0;
	margin-bottom: 20px;
	z-index: 999;
}

.navbar-btn {
	box-shadow: none;
	outline: none !important;
	border: none;
}

.line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #ddd;
	margin: 40px 0;
}

#footer {
	background: #6E757D;
	color: white;
 	font-size: 25px;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
}

#sidebar {
	min-width: 250px;
	max-width: 250px;
	background: linear-gradient(to bottom, #E5E5E5 0%, #fff 15px); 
	color: #383838;
	transition: all 0.3s;
	min-height: calc( 100vh - 20px );
    height: 100%;
}

#sidebar.active {
	margin-left: -250px;
}

#sidebar .sidebar-header {
	padding: 20px;
	background: #fff;
}

#sidebar ul.components {
	padding: 0 0 0 10px;
}

#sidebar ul p {
	color: #383838;
	padding: 10px;
}

#sidebar ul li a {
	padding: 10px 10px 10px 20px;
	font-size: 1.1em;
	display: block;
}

#sidebar ul li a:hover {
	color: #383838;
	background: #f1f2f5;
}

#sidebar ul li.active>a, a[aria-expanded="true"] {
	color: #383838;
	background: #f1f2f5;
}

#sidebar::-webkit-scrollbar {
    display: none;
}

a[data-toggle="collapse"] {
	position: relative;
}
.sidebar-toggle::after {
	display: block;
	position: absolute;
	right: 20px;
	transform: translateY(-75%);
	border: none;
	font-size: 3em;
	font-weight: 500;
	content: "-";
}
.sidebar-toggle.collapsed::after {
	display: block;
	position: absolute;
	right: 20px;
	transform: translateY(-70%);
	border: none;
	font-size: 2em;
	font-weight: 500;
	content: "+";
}

#sidebar ul ul a {
	padding-left: 40px !important;
	background: #fff;
}

#sidebar ul.CTAs {
	padding: 20px;
}

#sidebar ul.CTAs a {
	text-align: center;
	font-size: 0.9em !important;
	display: block;
	border-radius: 5px;
	margin-bottom: 5px;
}

a.download {
	background: #fff;
	color: #7386D5;
}

a.article, a.article:hover {
	background: #6d7fcc !important;
	color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
	width: 100%;
	min-height: 100vh;
	transition: all 0.3s;
	background: linear-gradient(to bottom, #E5E5E5 0%, #f1f2f5 15px);
	border-image: linear-gradient(90deg, #E5E5E5 0%, #f1f2f5 15px) 0 0 0 15/ 15px ;
	padding: 20px 20px 0 0;
}

.col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
}

.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
}

.container {
	padding-left: 40px;
}

label {
	display: inline-block;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

input[type=submit] {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
}

input[type=submit]:hover {
	background-color: #45a049;
}

.programheader {
	background: #fff;
	background-color:#fff;
	margin: 0 0 10px 0;
}

.toggler .lessonheader {
	margin: 10px;
	padding: 2px 10px 5px 10px;
}
.toggler:hover .lessonheader {
	margin: 10px;
	padding: 2px 10px 5px 10px;
}

.lessonlist {
	padding: 0 0px 0 0px;
	max-width: 100%;
	background: #fefaf4;
	border-top: 1px solid #c0c0c0;
	margin: 0px 0px 10px 0px;
}

.toggler {
	cursor: pointer;
}
.toggler:hover {
	cursor: pointer;
	text-decoration:none;
}

.toggleboardhide {
	background: #fff;
	cursor:pointer;
	text-decoration:none;
}
.toggleboardhide h5::before {
	content: '+';
    margin-right: 10px;
}

.toggleboardshow{
	cursor:pointer;
	text-decoration:none;
	margin-bottom: 0;
	background: linear-gradient(to top, #fff 0%, #E5E5E5 5px, #fafafa 6px);
}
.toggleboardhide:hover {
	background: #dce7eb;
}
.toggleboardshow:hover {
	background: #dce7eb;
}

.toggleboardshow h5::before {
	content: '-';
    margin-right: 10px;
}

.toggleboardshow .green {
	color: green;
}
.toggler:hover .green {
	color: green;
}
.toggleboardshow .red {
	color: red;
}
.toggler:hover .red {
	color: red;
}
.toggleboardshow .lessonheader {
	margin: 10px;
	padding: 2px 10px 5px 10px;
}


.togglecategoryhide {
	padding: 10px 0 10px 10px;
	margin: 10px 0 10px 0;
	cursor:pointer;
	text-decoration:none;
	background: #dce7eb;
}


.togglecategoryhide h3:before {
	content: '+';
    margin-right: 20px;
}

.togglecategoryshow {
	padding: 10px 0 10px 10px;
	margin: 10px 0 0 0;
	cursor:pointer;
	text-decoration:none;
	background: linear-gradient(to top, #fff 0%, #E5E5E5 8px, #cee3e8 9px);
}


.togglecategoryshow h3::before {
	content: '-';
    margin-right: 20px;
}

.whitebutton {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #68dbe8;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-size:15px;
	font-weight:bold;
	padding:3px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.whitebutton:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.whitebutton:active {
	position:relative;
	top:1px;
}
.buttonArea{
	background-color:#f1f2f5;
	height: 80px;
}

.bluebutton {
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
}
.bluebutton:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
.bluebutton:active {
	position:relative;
	top:1px;
}
.redbutton {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
	background-color:#fe1a00;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.redbutton:hover {
	background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
	background-color:#ce0100;
}
.redbutton:active {
	position:relative;
	top:1px;
}

.orangeButton {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:15px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size:15px;
	font-weight:bold;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.orangeButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.orangeButton:active {
	position:relative;
	top:1px;
}

.grayButton {
	box-shadow:inset 0px 1px 0px 0px #c0c0c0;
	background:linear-gradient(to bottom, #e0e0e0 5%, #919191 100%);
	background-color:#e0e0e0;
	border-radius:15px;
	border:1px solid #919191;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c0c0c0;
}
.grayButton:hover {
	background:linear-gradient(to bottom, #919191 5%, #e0e0e0 100%);
	background-color:#919191;
}
.grayButton:active {
	position:relative;
	top:1px;
}

.weekdayheader {
	padding: 0px 20px 0px 20px;
}

.course {
	cursor: pointer;
}
.course:hover {
	color: #0080ff;
	cursor: pointer;
}

.borderbottom {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #0080ff;
	padding: 10px 10px 10px 10px;
	border-radius: 0px;
}

.greenbutton {
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	background-color:#77d42a;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
}
.greenbutton:hover {
	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	background-color:#5cb811;
}
.greenbutton:active {
	position:relative;
	top:1px;
}

.darkbluebutton {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:6px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.darkbluebutton:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.darkbluebutton:active {
	position:relative;
	top:1px;
}

.orangebutton {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.orangebutton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.orangebutton:active {
	position:relative;
	top:1px;
}
#error-message {
	margin: 20px 0px 0px;
	background: #c6fbc7;
	padding: 10px;
	border-radius: 4px;
	line-height: 25px;
	font-size: 0.9em;
	color: #ff0000;
	display:none;
}
.newRegister {
	color: #ffffd5;
	background-color: #6666ff;
}
.form-group > .inline-group {
  display: inline;
}


nav > .nav.nav-tabs{

  border: none;
    color:#fff;
    background:#808080;
    border-radius:0;

}
nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active
{
  border: none;
    padding: 18px 25px;
    color:#fff;
    background:#808080;
    border-radius:0;
}

nav > div a.nav-item.nav-link.active:after
 {
  content: "";
  position: relative;
  bottom: -60px;
  left: -10%;
  border: 15px solid transparent;
  border-top-color: #3d94f6 ;
}
.tab-content{
  background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top:5px solid #3d94f6;
    border-bottom:5px solid #3d94f6;
    padding:30px 25px;
}

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus,
nav > div a.nav-item.nav-link.active:not(:focus)
{
  border: none;
    background: #3d94f6;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
}

span.circle {
  background: #ff0000;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.4em;
  margin-right: 5px;
  text-align: center;
  width: 1.4em; 
}

.box {
	width: 100%;
	height: 12vh;
	padding: 0 30px;
	overflow: hidden;
}

.box p {
	line-height: 1em;
	color: #000;
}
.animate {
	color: #000;
	display: inline-block;
	white-space: wrap;
	animation: 9s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
	0% {
                transform: translateY(100px);
                -webkit-transform: translateY(100px);
            }
            100% {
                transform: translateY(-100%);
                -webkit-transform: translateY(-100%);
            }
        }
 
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateY(100px);
                -webkit-transform: translateY(100px);
            }
            100% {
                transform: translateY(-100%);
                -webkit-transform: translateY(-100%);
            }
        }

.externalLink {
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #fff;
	border-radius: 100px;
	border: 4px solid #c93;
	border-width: 4px 4px 4px 4px;
	padding: 5px 20px 5px 20px;
	color: #c93;
	font-size: 16px;
	font-weight: 900;
	font-style: normal
}

.externalLink>div {
	color: #999;
	font-size: 10px;
	font-weight: initial;
	font-style: normal;
	text-align: center;
	margin: 0px 0px 0px 0px
}

.externalLink>i {
	font-size: 1em;
	border-radius: 0px;
	border: 0px solid transparent;
	border-width: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: static
}

.externalLink>.ld {
	font-size: initial
}

.goldbutton {
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: linear-gradient(180deg, #f1e9c4 0%, #fffce2 38%, #debf4d
		92.99676086228081%, #efebcf 100%);
	border-radius: 100px;
	border: 0.5px solid rgba(0%, 0%, 0%, 0.2);
	border-width: 0.5px 0.5px 0.5px 0.5px;
	padding: 4px 22px 5px 22px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6), 0px 0px 5px
		rgba(255, 255, 255, 1), 0px 1px 0px 3px rgba(0, 0, 0, 0.2), inset 0px
		1px 0px rgba(255, 255, 255, 1);
	color: #574317;
	font-size: 14px;
	font-weight: 900;
	font-style: normal
}

.goldbutton>div {
	color: #999;
	font-size: 10px;
	font-weight: initial;
	font-style: normal;
	text-align: center;
	margin: 0px 0px 0px 0px
}

.goldbutton>i {
	font-size: 1em;
	border-radius: 0px;
	border: 0px solid transparent;
	border-width: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: static
}

.goldbutton>.ld {
	font-size: initial
}

.trialcourse {
	margin-top: 5px;
	margin-bottom: 5px;
}
.trialcourse:hover {
	color: #0080ff;
}

.overlayDiv {
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 90px;
	height: 100%;
	width: 100%;
	z-index: 2000;
	overflow-x: hidden;
	overflow-y: auto;
}
.overlayDiv .modal-dialog {
	top: 20px;
}

.splitDiv {
	backface-visibility: hidden;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	background: linear-gradient(90deg, #176c31 0%, #176c31 50%, #4dde76 50%);
	border-radius: 10px;
	border: 0px solid #444444;
	border-width: 0px 0px 0px 0px;
	padding: 10px 24px 10px 50px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 100;
	font-style: normal
}

.splitDiv>div {
	color: #000000;
	font-size: 16px;
	font-weight: initial;
	font-style: normal;
	text-align: center;
	margin: 0px 0px 0px 0px
}

.splitDiv>i {
	color: #6ec286;
	font-size: 1em;
	background: #ffffff;
	border-radius: 88px;
	border: 0px solid #6ec286;
	border-width: 0px 0px 0px 0px;
	padding: 4px 4px 4px 4px;
	margin: 0px 010px 0px 0px;
	position: absolute;
	top: 9px;
	left: 17px;
	width: 24px;
	height: 24px
}

.splitDiv>.ld {
	font-size: initial
}
.reportcard-header {
  background-color: #c0c0c0!important;
  font-size: 1rem;
}
.bordered {
	  border: 2px solid #000000;
}
.blue {
	color: #0080ff;
}
.red {
	color: #ff0000;
}
.green {
	color: #008c00;
}

.surveysection {
	background: #fff;
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	padding: 10px 20px 10px 20px;
}
.surveytitle {
	border-top: 10px solid #5b5bff;
	border-radius: 10px 10px 10px 10px;
	margin: 0px 0px 10px 0px;
}
.surveysectionheader {
	background: #5b5bff;
	color: white;
	border-radius: 10px 10px 0px 0px;
}
.surveysectionheaderdesc {
	background: #fff;
	border-radius: 0px 0px 10px 10px;
	margin: 0px 0px 10px 0px;
}
.surveysectioncontent {
	background: #fff;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 10px 0px;
}
.surveysectioncontenterror {
	border-top: 10px solid #ff0000;
	border-left: 1px solid #ff0000;
	border-right: 1px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	border-radius: 10px 10px 10px 10px;
	margin: 0px 0px 10px 0px;
}

.graybg {
	background: #ddddee;
}

.contestsection {
	background: #fff;
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	padding: 10px 20px 10px 20px;
}
.contesttitle {
	border-top: 10px solid #0065ca;
	border-radius: 10px 10px 10px 10px;
	margin: 0px 0px 10px 0px;
}
.contestsectionheader {
	background:linear-gradient(to bottom, #cecece 1%, #fff 50%, #cecece 100%);
	background-color:#fff;
	color: black;
	border-radius: 10px 10px 10px 10px;
	margin: 0px 0px 10px 0px;
}
.contestsectionheaderselected {
	background:linear-gradient(to bottom, #1d5bc5 1%, #4a9cf7 50%, #1d5bc5 100%);
	background-color:#4a9cf7;
	cursor:pointer;
	text-decoration:none;
	color: white;
	border-radius: 10px 10px 0px 0px;
}

.contestsectionheaderdesc {
	background: #feffe8;
	border-top: 1px solid #0065ca;
	border-left: 1px solid #0065ca;
	border-right: 1px solid #0065ca;
	border-bottom: 5px solid #0065ca;
	border-radius: 0px 0px 10px 10px;
	margin: 0px 0px 10px 0px;
}

.contestsectioncontent {
	background: #fff;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 10px 0px;
}
.contestsectioncontenterror {
	border-top: 10px solid #ff0000;
	border-left: 1px solid #ff0000;
	border-right: 1px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	border-radius: 10px 10px 10px 10px;
	margin: 0px 0px 10px 0px;
}
.contestsectionheader:hover {
 cursor:pointer;
}
.contestsectionheaderselected:hover {
 cursor:pointer;
}
.contestgroupheader {
	border-radius: 10px 10px 10px 10px;
	color: red;
	padding: 10px 15px 10px 15px;
}
.contestgroupheader:hover {
	background: #0079ff;
	color: white;
	cursor:pointer;
}
.contestsectionheader:hover {
	background:linear-gradient(to bottom, #1d5bc5 1%, #4a9cf7 50%, #1d5bc5 100%);
	background-color:#4a9cf7;
	color: white;
	border-radius: 10px 10px 10px 10px;
}

.detailExpand {
	color: #0080ff;
	cursor: pointer;
}
.detailExpand:hover {
	color: #ff0000;
	cursor: pointer;
}
.text-top {
	vertical-align: top;
}

.coachInfo {
	color: black;
	text-decoration: none;
	background-position-y: -0%;
	background-image: linear-gradient(white 50%, gold 50%);
	transition: background 500ms ease;
	background-size: 2px;
	background-size: auto 175%;
	cursor: pointer;
}

.coachInfo:hover {
	background-position-y: 100%;
	cursor: pointer;
}

.coachDetailContainer {
	position: relative;
}

/* Bottom left text */
.coachDetail-bottom-left {
	position: absolute;
	bottom: -8px;
	left: 0px;
}

/* Top left text */
.coachDetail-top-left {
	position: absolute;
	top: 0px;
	left: 0px;
}

/* Top right text */
.coachDetail-top-right {
	position: absolute;
	top: 0px;
	right: 0px;
}

/* Bottom right text */
.coachDetail-bottom-right {
	position: absolute;
	bottom: -8px;
	right: 0px;
}

/* Centered text */
.coachDetail-centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalClose {
	border: none;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	background: #49cbc1;
	color: white; height : 40px;
	width: 40px;
	height: 40px;
}

.modalClose:hover {
	background: #0080c0;
	color: yellow;
	cursor: pointer;
}

.modalCloseTransparent {
	border: none;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.2);
	color: white; height : 30px;
	width: 30px;
	height: 30px;
}

.modalCloseTransparent:hover {
	background: #ff8040;
	color: white;
	cursor: pointer;
}

.modal-coach {
	max-width: 600px;
}

.inputerror {
	border-top: 1px solid #ff0000;
	border-left: 1px solid #ff0000;
	border-right: 1px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	border-radius: 1px 1px 1px 1px;
	margin: 0px 0px 10px 0px;
}

.courseIntro {
	color: black;
	text-decoration: none;
	background-position-y: -0%;
	background-image: linear-gradient(white 50%, #80ff80 50%);
	transition: background 500ms ease;
	background-size: 2px;
	background-size: auto 175%;
	cursor: pointer;
}

.courseIntro:hover {
	background-position-y: 100%;
	cursor: pointer;
}

.courseIntroContainer {
	position: relative;
}
/* Top left text */
.courseIntro-top-left {
	position: absolute;
	top: 0px;
	left: 0px;
}
/* Top right text */
.courseIntro-top-right {
	position: absolute;
	top: 0px;
	right: 0px;
}

.modal-courseIntro {
	max-width: 642px;
}
.round-img {
  border-radius: 50%;
}

.fixed {
    position: -webkit-sticky; /* Safari */
	position: sticky;
    top: 0;
}
.bottomcorner{
	width: 280px;
	position: fixed;
	bottom:0;
	right:10px;
	z-index: 9999;
	border:1px solid black;
	background-color: white;
	background: white;
}
.bottomcorner:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.topcorner{
	width: 300px;
	position: absolute;
	text-align: left;
	top: 90px;
	right: 20px;
	z-index: 9999;
}
.topcorner:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.topmiddle{
	width: 80%;
	position: absolute;
	top:0;
	z-index: 9999;
}
.topmiddle:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.banner {
  display: flex;
  align-items: center;
  height: 100px;
}
.word-wrap {
	white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #383838 !important;
  border: 1px solid transparent;
  background-color: #d4e9ee;
  background: #d4e9ee;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #6c757d !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  background: #e2edf1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #383838 !important;
  border: 1px solid transparent;
  background-color: #d4e9ee;
  background: #d4e9ee;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: #d4e9ee;
  background: #d4e9ee;
}
.loginDiv {
	background: url(/resources/images/student-class-looking-course.jpeg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: 1;
}
.loginDiv:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: inherit;
	filter: blur(20px);
	z-index: 2;
}
.loginBGCover {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: auto;
	z-index: 10;
}
.form-signin{
	background-color: #fff;
	background: #fff;
	padding: 40px 80px 40px 80px;
	border-radius: 0;
}
.highlightLabel {
	color: #e99d23;
	font-size: 1.25rem;
	padding: 10px 0 0 0;
}
.loginInput {
	color: #383838;
	background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    border-radius: 0;
    font-size: 1.25rem;
}
.loginInput:focus {
	background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    box-shadow: 0 0 0 0 
}
.loginInput:focus-visible {
	text-shadow: 0 0 0 0;
}
#btn_login {
	cursor: pointer;
	color: #fff;
	background-color: #e99d23;
	border-color: #e99d23;
	padding: .1rem .1rem;
	display: block;
	font-size: 1.25rem;
	font-weight: 400;
	text-align: center;
	border: 1px solid transparent;
	width: 60%;
}
#btn_signup {
	cursor: pointer;
	color: #6c757d;
	background-color: #fff;
	border-color: #383838;
	margin-top: 10px;
	padding: .1rem .1rem;
	display: block;
	font-size: 1.25rem;
	font-weight: 400;
	text-align: center;
	border: 2px solid;
	width: 60%;
}

.btn_signup {
	cursor: pointer;
	color: white;
	background-color: #e99d23;
	border-color: #383838;
	margin-top: 10px;
	padding: .1rem .1rem;
	display: block;
	font-size: 1.25rem;
	font-weight: 400;
	text-align: center;
	border: 2px solid;
	width: 60%;
}
.btn_signup:disabled{
	cursor: no-drop;
	color: #6c757d;
	background-color: #fff;
}

.modal-content {
	border-radius: 0;
}

.title{
	font-weight: 700;
	text-transform: uppercase;
}

.sectionlabel{
	padding-top: 20px;
	color: #6c757d;
	text-transform: uppercase;
}
.signupContainer{
	padding: 40px;
}
pre {
    font-size: 100%;
    color: #000000;
	 white-space: pre-wrap;       /* css-3 */
	 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	 white-space: -pre-wrap;      /* Opera 4-6 */
	 white-space: -o-pre-wrap;    /* Opera 7 */
	 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.register_progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 20px;
    font-size: .75rem;
    background-color: #e9ecef;
}
.bg-orange {
  background-color: #ff9933!important;
}
.text-small{
	font-size: 90%;
}

/* for new website*/
.menu-container {
  display: flex;
  align-items: center;
  background: #ffffff;
  color: #000000;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.menu-container a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
}

.menu-container a:hover {
  color: #4a90e2;
}

.menu-container input {
  display: block;
  width: 35px;
  height: 25px;
  margin: 0;
  position: absolute;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/* Burger menu */
.menu-container span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #000000;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.menu-container span:first-child {
  transform-origin: 0% 0%;
}

.menu-container span:nth-child(3) {
  transform-origin: 0% 100%;
}

.menu-container input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(3px,-1px);
  background: #ffffff;
}

.menu-container input:checked ~ span:nth-child(4) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.menu-container input:checked ~ span:nth-child(3) {
  transform: rotate(-45deg) translate(-5px,11px);
}

/* desktop styles */
.menu-container {
	width: 100%;
}

.menu-container a {
	color: #000000;
}

.menu-container input {
	display: none;
}

/* Burger menu */
.menu-container span {
	display: none;
}

.top-menu {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.top-menu ul {
  	list-style: none;
	display: flex;
	padding: 0;
}

.top-menu li {
  padding: 10px 20px 0 20px;
  font-size: 20px;
}

.top-menu ul li.active>a, a[aria-expanded="true"] {
	padding: 0px 10px 30px 10px;
	background-image: linear-gradient(white 90%, #138FB3 10%);
}

.top-menu ul li.active>div {
	padding: 0px 10px 30px 10px;
	background-image: linear-gradient(white 90%, #138FB3 10%);
}

.section-title {
	padding: 30px 0px 30px 0px;
 	font-size: 40px;
	font-weight: 700;
	text-align: center;
	line-height: .95;
}
.box-shadow {
	-webkit-box-shadow: 2px 2px 7px 5px #E2E2E2;
	box-shadow: 2px 2px 7px 5px #E2E2E2;
}
.poster {
	padding: 20px;
}
h3.poster-title {
	margin: 30px 0 20px 0;
 	font-size: 25px;
	font-weight: 600;
	text-align: center;
	line-height: .95;
}

.course-category {
  border-top-left-radius: 0.8em;
  border-top-right-radius: 0.8em;
  -moz-border-top-left-radius: 0.8em;
  -moz-border-top-right-radius: 0.8em;
  -webkit-border-top-left-radius: 0.8em;
  -webkit-border-top-right-radius: 0.8em;
}
h4.course-category-title {
	margin: 30px 0 20px 0;
 	font-size: 25px;
	font-weight: 600;
	text-align: center;
	line-height: .95;
	text-transform: uppercase;
}

#btn_subscribe {
	cursor: pointer;
	color: #fff;
	background-color: #D88B23;
	padding: .1rem .1rem;
	display: block;
	text-align: center;
	width: 100%;
	height: 50px;
	border-radius: 10px; 
	outline: none; 
	border-style: hidden;
}

.round {
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
}
.up-round {
  border-top-left-radius: 0.8em;
  border-top-right-radius: 0.8em;
  -moz-border-top-left-radius: 0.8em;
  -moz-border-top-right-radius: 0.8em;
  -webkit-border-top-left-radius: 0.8em;
  -webkit-border-top-right-radius: 0.8em;
}

.lesson-title {
	margin: 10px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
}

.lesson {
	overflow: hidden;
	position: relative;	
}
.btn-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.collapsible_filter {
  cursor: pointer;
  padding: 5px 18px 5px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  background-color: white;
}

.collapsible_filter:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active_filter:after {
  content: "\2212";
}

.collapsible_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible_content_sub {
  padding: 0 10px;
  font-size: 14px;
  background-color: white;
}

#sidebar_filter {
	min-width: 300px;
	max-width: 300px;
	background: linear-gradient(to bottom, #E5E5E5 0%, #fff 15px); 
	transition: all 0.3s;
	min-height: calc( 99vh );
    max-height: calc( 99vh );
    overflow-y: scroll;
}

#sidebar_filter.active {
	margin-left: -250px;
}

#sidebar_filter .sidebar-header {
  padding: 30px 20px 10px 20px ;
  font-weight: bold;
}

#sidebar_filter .components {
	padding: 0 0 0 10px;
}

#sidebar_filter::-webkit-scrollbar {
    display: none;
}

.button {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  cursor:pointer;
  color: white;
  display: inline-block;
  text-align: center;
  font-weight: 400;
  border-style: hidden;
  outline: none; 
}
.btn-blue {
  background-color: #138FB3;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
}
.btn-blue-outline {
  border: 1px solid #138FB3;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
  color: #138FB3;
}
.btn-gray {
  background-color: #c0c0c0;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
}

.btn-yellow {
  background-color: #D88B23;
  padding: .375rem .75rem;
  height: 40px;
  font-size: 1.2rem;
}
.btn-red {
  background-color: #ff0000;
  padding: .375rem .75rem;
  height: 40px;
  font-size: 1.2rem;
}
.btn-green {
  background-color: #4DA300;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
}

.div-footer {
  height: 80px;
  width: 100%;
  bottom: 0;
}

.cart-counter {
	min-width: 8px;
	height: 20px;
	width: 20px;
	line-height: 19px;
	margin-top: -40px;
	margin-left: 15px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-shadow: 0 1px rgb(0 0 0 / 20%);
	background: #e23442;
	border: 1px solid #911f28;
	border-radius: 10px;
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
	-webkit-box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
	box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
}
.cart-counter-blue {
	background: #e8616c;
	border: 1px solid #dd202f;
	background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
}

.menu-dropbtn {
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.menu-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.menu-dropdown-content {
  background-color: #ffffff;
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  font-size: 0.9em;
}

/* Links inside the dropdown */
.menu-dropdown-content a {
  padding: 6px 16px;
  text-decoration: none;
  display: block;
}

.fullcalendar {
  z-index: 999; /* Set a lower z-index for the fullcalendar div */
}
/* Change color of dropdown links on hover */
.menu-dropdown-content a:hover {background-color: #ffffff;}

/* Show the dropdown menu on hover */
.menu-dropdown:hover .menu-dropdown-content {display: block;}

.teacherThumbnail{
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
}

.teacher-name {
	margin: 10px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
}
.teacher-title {
	margin: 10px;
	font-size: 95%;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	color: #D88B23;
}

.faqsection {
	background: #fff;
	padding: 10px 20px 10px 20px;
}
.faqsectionheader {
	background-color:#E2E2E2;
	color: black;
	margin: 0px 0px 2px 0px;
}
.faqsectionheaderselected {
	background-color:#D88B23;
	cursor:pointer;
	text-decoration:none;
	color: white;
}

.faqsectionheaderdesc {
	background: #fff;
	border-top: 1px solid #E2E2E2;
	border-left: 1px solid #E2E2E2;
	border-right: 1px solid #E2E2E2;
	border-bottom: 2px solid #E2E2E2;
	margin: 0px 0px 1px 0px;
}

.faqsectioncontent {
	background: #fff;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 10px 0px;
}
.faqsectionheader:hover {
 cursor:pointer;
}
.faqsectionheaderselected:hover {
 cursor:pointer;
}
.faqsectionheader:hover {
	background-color:#D88B23;
	color: white;
}
.faqsectionheader::after {
	display: block;
	position: absolute;
	right: 20px;
	transform: translateY(-75%);
	border: none;
	font-size: 2em;
	font-weight: 200;
	content: "+";
}
.faqsectionheaderselected::after {
	display: block;
	position: absolute;
	right: 20px;
	transform: translateY(-70%);
	border: none;
	font-size: 2em;
	font-weight: 200;
	content: "\00D7";
}
.divcenter {
	position: relative;
	width: 100%;
	height: auto;
}

.lessonblock {
	width: 33%; 
	padding: 20px;
}
.assessblock {
	width: 50%; 
	padding: 20px;
}
/* ---------------------------------------------------
   Tablet
----------------------------------------------------- */
/* iPad Landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) {
/* CSS */
	#sidebar {
		margin-left: -250px;
	}
	#sidebar.active {
		margin-left: 0;
	}
	#sidebarCollapse span {
		display: none;
	}
	.lessonblock {
		width: 50%; 
		padding: 20px;
	}
	.assessblock {
		width: 50%; 
		padding: 20px;
	}
}

/* iPad Portrait */
@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: portrait) {
/* CSS */
	#sidebar {
		margin-left: -250px;
	}
	#sidebar.active {
		margin-left: 0;
	}
	#sidebarCollapse span {
		display: none;
	}
	.lessonblock {
		width: 100%; 
		padding: 20px;
	}
}
/* ---------------------------------------------------
   Mobile
----------------------------------------------------- */
@media only screen and ( max-width : 414px) {
	#sidebar {
		margin-left: -250px;
	}
	#sidebar.active {
		margin-left: 0;
	}
	#sidebarCollapse span {
		display: none;
	}
	.lessonblock {
		width: 100%; 
		padding: 20px;
	}
}
.btn-blue {
  background-color: #138FB3;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
}
.btn-gray {
  background-color: #c0c0c0;
  padding: .375rem .75rem;
  height: 40px; 
  font-size: 1.2rem;
}
/* Custom CSS to style the checkbox as a button */
.form-check-input[type="checkbox"] {
  display: none; /* Hide the actual checkbox */
}

.form-check-label {
  padding: 0px 10px; /* Adjust padding for button appearance */
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  margin: 5px;
}

/* Style the label when the checkbox is checked */
.form-check-input:checked + .form-check-label {
  background-color: #0080c0;
  color: #fff;
  border-color: #0080c0;
}

#studentListDiv {
	display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

.menuitem{
	white-space: nowrap;
}

.campusBoxContainer {
    display: flex;
    justify-content: space-between; /* Even spacing */
    gap: 10px; /* Space between boxes */
    padding: 20px;
}
.campusBox {
    width: 180px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    border: 3px solid #d0e7ee;
    padding: 10px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 999;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.password-container {
	position: relative;
	display: inline-block;
}

.toggle-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 16px;
	color: #666;
}

.campus-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color-box {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #804000; /* Add black border */
}

/* ═══════════════════════════════════════════════════════════
   Teacher Profile Modal — App-style (desktop)
═══════════════════════════════════════════════════════════ */
.modal-coach-new { max-width: 680px; }

.modal-content-coach {
  border-radius: 0;
  border: none;
  overflow: hidden;
}

/* Hero card */
.coach-hero-card {
  position: relative;
  background: #FFFFFF;
  height: 280px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.coach-hero-logo {
  position: absolute;
  top: 10px;
  left: 8px;
  width: 130px;
  height: 45px;
  object-fit: contain;
  z-index: 2;
}
.coach-hero-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  line-height: 32px;
  text-align: center;
  padding: 0;
}
.coach-hero-close:hover { background: #e53935; }

/* Left info pane */
.coach-hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 12px 20px 12px;
  min-width: 0;
}
.coach-hero-name-wrap {
  background: #A8A7B0;
  padding: 10px 14px;
  margin-bottom: 12px;
  margin-right: -12px;
  z-index: 2;
}
.coach-hero-name {
  font-size: 30px;
  font-weight: 700;
  color: #233A73;
  line-height: 1.4;
  display: block;
}
.coach-title-badge {
  background: #B4720F;
  padding: 6px 14px;
  margin-right: -24px;
  z-index: 2;
}
.coach-title-badge span {
  color: #581B00;
  font-size: 18px;
  line-height: 1.4;
}

/* Right photo pane */
.coach-hero-photo-wrap {
  width: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.coach-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coach-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #233A73;
}
.coach-photo-initial {
  font-size: 64px;
  font-weight: 700;
  color: #FFFFFF;
}

/* Introduction header strip (navy, left half) */
.coach-intro-header-section {
  background: #112D77;
  padding: 16px 20px 36px 20px;
  margin-top: -44px;
  margin-right: 50%;
  position: relative;
  z-index: 1;
}
.coach-intro-header-text {
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: #FFFFFF;
  letter-spacing: 1.5px;
}

/* Introduction body (full-width navy) */
.coach-intro-section {
  background: #112D77;
  padding: 28px 28px 36px 28px;
  position: relative;
  margin-top: -38px;
}
.coach-amber-accent {
  position: absolute;
  top: -22px;
  right: 28px;
  width: 40px;
  height: 40px;
  background: #C9962A;
  z-index: 2;
}
.coach-info-detail {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.75;
  letter-spacing: 0.4px;
  margin-top: 10px;
  z-index: 3;
}
.coach-info-detail p,
.coach-info-detail ul,
.coach-info-detail ol,
.coach-info-detail li { color: rgba(255, 255, 255, 0.9); }
.coach-info-detail a { color: #C9962A; }