/* ===========================
--- version 2.1.5 - 2022-11-30
============================ */

/* Bootstrap icons for version 5.x */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css");

body {
    background-image: url("../img/bk_tile.jpg");
    background-repeat: repeat;
}

/* ===========================
--- Page loader positioning
============================ */

#loader img { margin-top: 25%; }

/* ===========================
--- TOP BAR: Logos and course title
============================ */
#topBar{
    color:#fff;
		background-color:#254061;
		-webkit-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.4);
       -moz-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.4);
            box-shadow: 0 3px 6px 0px rgba(0,0,0,0.4);
}

.title-logos {
  max-width: 1350px;
}

/* ===========================
--- Main Menu styles
============================ */
#menu-container {
  background-color: #fff;
  width: 100%;
  min-height: 720px;
  overflow: hidden;
  display: none;
}
#menu-container h4 { margin-bottom: -0.3rem; }
.menuItem {
	background-color: #fff;
  border-radius: 0.4rem 0.4rem 0 0;
  border-bottom: 0.8rem #aaa solid;
  max-height: 13rem;
	overflow: hidden;
  font-variant-numeric: lining-nums;
}
.menuItem:hover {
	cursor: pointer;
	opacity: 0.75;
}
.menuItem .card { /* remove default border from Bootstrap Card component */
  border: none !important;
}
.menuItem [class^='bi-'] { /* adjust menuItem icon alignment */
  vertical-align: -0.075rem;
}
.menuItem .card-text {  /* menuItem text overlay */
  font-size: 1.1rem;
	font-weight: bold;
  line-height: 1.2;
  padding-top: 0;
}

.menu-overlay-subtitle {
  /* use to style menu item 'subtitle' if desired */
}

.menuItem .card-img-overlay { /* overrides BS default padding of 1rem */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ===========================
--- STEP Button styles
============================ */
.btn-step {
  color:#fff;
  background-color: #254061;
  border-color: #254061;
}
.btn-step:hover,
.btn-step:focus,
.btn-step:active,
.btn-step.active {
  color:#fff;
  background-color: #369;
  border-color: #17283c;
}
.btn-step.disabled:hover,
.btn-step.disabled:focus,
.btn-step.disabled:active,
.btn-step.disabled.active,
.btn-step[disabled]:hover,
.btn-step[disabled]:focus,
.btn-step[disabled]:active,
.btn-step[disabled].active,
fieldset[disabled] .btn-step:hover,
fieldset[disabled] .btn-step:focus,
fieldset[disabled] .btn-step:active,
fieldset[disabled] .btn-step.active {
  color:#fff;
  background-color: #254061;
  border-color: #254061;
}

/* ===========================
--- UI buttons
============================ */
#ui-controls .btn { min-height: 2rem; font-size: 1rem; }
#ui-controls [class^='bi-'] { vertical-align: -0.05rem; }  /* align icons */

/* ===========================
--- Bootstrap slider 'Range' control
============================ */
#bs-slider { cursor: pointer; }
#bs-slider-container .form-range::-moz-range-thumb {
  height: 1.25rem;
  width: 1.25rem;
}
#bs-slider-container .form-range::-webkit-slider-thumb {
  height: 1.25rem;
  width: 1.25rem;
  margin-top: -0.35rem;
}
#bs-slider-container .form-range::-moz-range-track { background-color: #adb5bd; }
#bs-slider-container .form-range::-webkit-slider-runnable-track { background-color: #adb5bd; }

/* ===========================
--- UI Caption Text
============================ */
#ccText {
  white-space: pre-line;
  font-variant-numeric: lining-nums;
}

/* ===========================
--- Utility styles
============================ */
.col-centered {
  float: none;
  margin: 0 auto;
}
.vertical-center {
  min-height: 720px;
  display: flex;
  align-items: center;
}
.align-nums { font-variant-numeric: lining-nums; }
.dropdown-toggle::after { display: none; }

/* ===========================
--Bootstrap 5 breakpoints:
    xs < 576px, sm >= 576px, md >= 768px, lg >= 992px, xl >= 1200px, xxl >= 1400px
============================ */
@media (min-width: 1350px) {
  .container { min-width: 1350px; }
}
@media only screen and (max-width : 1349px) {
  #menu-container, .vertical-center { min-height: 618px; }
}
@media only screen and (max-width : 1200px) {
  #menu-container, .vertical-center { min-height: 506px; }
}
@media only screen and (max-width : 991px) {
  #menu-container, .vertical-center { min-height: 382px; }
  #courseTitleText{ font-size: 1.5rem; }
  #courseStatusText { font-size: 0.9rem; }
  #slides-text{ display: none; }
  .menuItem { max-height: 10rem; }
  .menuItem .card-text { font-size: 1rem; }
}
@media only screen and (max-width : 767px) {
  #menu-container h4 { font-size: 1.1rem; }
  .menuItem { max-height: 7rem; }
  .menuItem .card-text { font-size: 0.9rem; }
}