@import url("https://fonts.googleapis.com/css?family=Numans");
html,
body {
  font-size: 1rem;
  line-height: 1.2;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}
.h1,
h1 {
  font-size: 1.35rem;
  line-height: 1.1;
}
.h2,
h2 {
  font-size: 1.2rem;
}
.h3,
h3 {
  font-size: 1.1rem;
}
.h4,
h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.h5,
h5 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.h6,
h6 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
p {
  font-size: 1rem;
  line-height: 1.5rem;
}
.required {
  background-color: blanchedalmond;
}
.nav-link {
  font-size: 1rem;
}
.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border: 2px solid orange;
}
ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 1.1rem;
  margin-left: 1rem;
}
ol li {
  padding-bottom: 0.25rem;
}
.site-logo {
  text-shadow: 3px 1px 3px #425e77;
  margin-left: -10px;
  margin-right: 1rem;
  line-height: 0.96;
  margin-top: 0;
}
.logo-text {
  font-size: 1.15rem !important;
  color: white;
  display: block !important;
}
.logo-img {
  width: 43px;
  margin-top: -3px;
  margin-left: -3px;
  height: 43px;
}
.container {
  height: 100%;
  align-content: center;
}
a {
  color: #0062cc;
}
a:hover {
  color: #1083e9;
}
.bg-black {
  background-color: black;
}
.nav-tabs .nav-link.active {
  margin-bottom: -1px;
}
.nav-tabs h3 {
  color: #354c60;
}
button {
  color: #354c60;
}
.btn-primary {
  background-color: #2f5883;
  color: white;
  border-radius: 0.2rem;
  border: 1px solid #4f718f;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #4f718f;
  border-color: #4f718f;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  border: #425e77;
  background-color: #4f718f;
  color: white;
  border-radius: 0.23rem;
}
.btn-primary:hover {
  border-color: #425e77;
  background-color: steelblue;
}
.btn-outline-primary {
  border: 1px solid #35679c;
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #35679c;
  border-color: #425e77;
  color: #4f718f;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: steelblue;
  border: 1px solid steelblue;
}
.btn-outline-primary:hover {
  border-color: #425e77;
  background-color: #4f718f;
}
button,
.btn-link {
  color: #35679c;
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #dee2e6;
  border-color: #dee2e6;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
.social_icon span {
  font-size: 50px;
  margin-left: 10px;
  color: #ffc312;
}
.social_icon span:hover {
  color: white;
  cursor: pointer;
}
.card-header h3 {
  color: white;
}
.social_icon {
  position: absolute;
  right: 20px;
  top: -38px;
}
.input-group-prepend span {
  width: 50px;
  background-color: #ffc312;
  color: black;
  border: 0 !important;
}
input:focus {
  outline: 0 0 0 0 !important;
  box-shadow: 0 0 0 0 !important;
}
.instructions {
  line-height: 0.9;
  padding: 0;
  margin: 1rem -1rem 0 -1rem;
  width: 100%;
  clear: both;
}
.remember {
  color: white;
}
.remember input {
  width: 20px;
  height: 20px;
  margin: 0 5px 0 15px;
}
.signup_btn,
.login_btn {
  color: black;
  background-color: #ffc312;
  width: 100px;
}
.signup_btn:hover,
.login_btn:hover {
  color: black;
  background-color: white;
}
.links {
  color: white;
}
.links a {
  margin-left: 4px;
}
.dropdown-menu-right {
  border-right: 3px solid orange;
}
a.DIYlogo,
a.DIYlogo:hover {
  color: #c02326;
}
.diy-avatar {
  margin-right: -7px;
  margin-top: 2px;
  width: 1.7rem;
}
.grid {
  height: 480px;
}
/*.content-section#services {
    margin-top: 0px;
}*/
.hello {
  padding: auto;
  padding-bottom: 5px;
  border-radius: 5px;
  padding-top: 1.5rem;
}
.hello2 {
  padding: 0.25rem;
  margin: 0.5rem;
  border-radius: 50px;
  line-height: 1.1rem;
  text-align: center;
  font-size: 0.95rem;
  vertical-align: middle;
}
/*.text-content {
    padding: 1rem 0;
    margin: 0;
}

.text-content img {
    width: 200px;
    border-radius: .15rem;
    margin: 0;
}*/

h3.h4 {
  line-height: 1.2;
}
.blue-box1 {
  background-image: url("../images/images_home_page/A-corot-2.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box2 {
  background-image: url("../images/images_home_page/A-HAT-P-32b.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box3 {
  background-image: url("../images/images_home_page/A-Hat-p20.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box4 {
  background-image: url("../images/images_home_page/A-Qatar-1.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box5 {
  background-color: #35679c;
  margin: 1px 2px;
  margin-bottom: 0;
}
h3.blue {
  color: white;
  text-align: center;
}
.blue-box6 {
  background-image: url("../images/images_home_page/A-WASP-11.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box7 {
  background-image: url("../images/images_home_page/A-tres1.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box8 {
  background-image: url("../images/images_home_page/A-WASP-4b.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blue-box9 {
  background-image: url("../images/images_home_page/A-exoplanet-general.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.25rem 0.75rem;
}
.list-group-item {
  font-size: 1.75rem;
}
.community {
  border-left: 2px solid #e9ecef;
  background-color: #f7f7f7;
}
.community h4 {
  font-size: 1.25rem;
}
.progress {
  position: relative;
  display: flex;
}
footer img.star {
  margin-right: -7px;
  margin-top: 0px;
  width: 43px;
}
.star_background {
  background-image: url("../images/star_background.png");
}
.progress-track {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 5px;
  background-color: grey;
  z-index: -1;
}
.progress-step {
  position: relative;
  width: 100%;
  font-size: 12px;
  text-align: center;
}
.progress-step:last-child:after {
  display: none;
}
.progress-step:before {
  content: "\f00c";
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 10px;
  height: 10px;
  background: white;
  border: 4px solid grey;
  border-radius: 100%;
  color: white;
}
.progress-step:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 0%;
  transition: width 1s ease-in;
  height: 5px;
  background: grey;
  z-index: -1;
}
.progress-step.is-active {
  color: blue;
}
.progress-step:before {
  border: 4px solid grey;
  animation: pulse 2s infinite;
}
dt {
  font-weight: 450 !important;
  color: #1b1b1b;
}
dt span {
  color: black;
  font-weight: 550;
  width: 100px;
}
dd span {
  color: #c02326;
  width: 100px;
}
.dropdown-divider {
  border-top: 1px solid #333;
}
.gold {
  color: #051c43;
  margin-bottom: 0.25rem;
}
.nav-link {
  line-height: 1rem;
}
span.break {
  display: inline;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 0;
}
.dropdown-menu {
  margin-top: 0;
  /*background: #000;*/
  background: #333333;
}
.navbar-dark .navbar-nav .active > .nav-link {
  color: white;
}
.navbar-dark .navbar-nav li.dropdown a.nav-link > .dropdown-item {
  color: black;
}
.navbar-dark .navbar-nav .dropdown.active > .nav-link {
  color: white; /**/
}
.dropdown-item:hover,
.dropdown-item:focus {
  /**/
  color: #16181b;
  text-decoration: none;
  background-color: #4f718f;
}
.dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown:hover > .dropdown-menu .dropdown > .dropdown-toggle:active {
  pointer-events: none; /* Add this, to prevent clicking dropdown's default click function */
}
.dropdown-item:hover {
  background-color: none;
}
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
  z-index: 6;
}
.tabset .tab-panel {
  display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}
.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0;
}
.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}
.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}
.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #f7f8fd;
  margin-bottom: -1px;
}
.tab-panel {
  padding: 30px 0;
  padding: 25px 0 10px 0;
  border-top: 1px solid #ccc;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.sci_icons {
  text-align: right;
}
.hello {
  border: 3px solid #fff;
  padding: 5px auto;
  border-radius: 5px;
}
.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: 0;
}
.hello2 {
  padding: 0.25rem;
  margin: 0.5rem;
  border-radius: 50px;
  line-height: 1.1;
  text-align: center;
  font-size: 0.95rem;
  vertical-align: middle;
}
.nav-item .login-button {
  margin-right: 0.1rem;
  text-transform: uppercase;
  font-weight: 600;
}
p.footer-text {
  font-size: 0.78rem;
  line-height: 1.3rem;
  margin-bottom: 0.4rem;
  margin-left: 0.5rem;
}
.logo1 {
  width: 162px;
  height: 41px;
  float: right;
  margin-bottom: 0.5rem;
}
.logo2 {
  width: 168px;
  height: 73px;
  float: right;
  margin-right: 0.5rem;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
.nav-tabs .nav-link {
  padding: 0.4rem 1rem 0.25rem 1rem;
  background-color: aliceblue;
  border-top: 2px solid #dee2e6;
  border-right: 2px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  border-left: 2px solid #dee2e6;
  margin-right: 2px;
}
.keys {
  font-family: "Lato", sans-serif;
  text-align: center;
  width: 100%;
}
small {
  font-size: 0.77rem;
}
.arr {
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #484b4f;
  color: white;
  font-size: 20px;
  border-right: 10px solid darken(grey, 20);
  border-bottom: 10px solid darken(grey, 20);
  border-left: 10px solid darken(grey, 15);
  border-top: 10px solid darken(grey, 10);
  display: inline-block;
  margin: 5px;
  transition: all 0.05s linear;
  user-select: none;
}
.arr:active {
  border-bottom: 8px solid darken(grey, 20);
  text-shadow: 0 0 10px white, 0 0 10px white, 0 0 20px white;
  transform: translate(0, 2px);
}
.up {
  position: relative;
  top: 0px;
}
.pressed {
  border-bottom: 8px solid darken(grey, 20);
  text-shadow: 0 0 10px white;
  transform: translate(0, 2px);
}
.minute ul,
.hour ul {
  list-style: none;
}
.clock,
.filters {
  margin-left: 0;
  padding: 0.5rem;
}
.cur_time,
.time {
  border: 1px solid #483342;
  padding: 1rem;
}
.time {
  margin-top: 0.5rem;
  text-align: center;
}
.hour {
  text-align: center;
}
.hour p,
.minute p {
  text-align: center;
  font-size: 1rem;
  padding: 0;
}
.tab-content > .active {
  display: block;
  background-color: white;
  border-right: 1px solid #f3f3f3;
}
section#cal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: wrap;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  font-size: 0;
}
.th {
  flex: 30px 0 0;
}
section#cal {
  border: 1px solid black;
}
section#cal time {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -webkit-flex: 1 1 14.2857%;
  -ms-flex: 1;
  flex: 1;
  min-width: 14.2857%;
  max-width: 14.2857vw;
  position: relative;
  font-size: 1.4vw;
  line-height: 0;
  -webkit-transition: 0.35s opacity;
  transition: 0.35s opacity;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
section#cal:last-child {
  border-right: none;
}
section#cal time.blank {
  min-height: 12vw;
}
section#cal time a {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: inherit;
  border-bottom: none;
  outline: none;
}
section#cal time span {
  position: absolute;
}
span.caldate {
  top: 10%;
  left: 7px;
  z-index: 2;
}
section#cal time.blank span.caldate {
  color: #333;
}
section#cal time a span.title {
  width: 100%;
  height: 100%;
  line-height: 1.1;
  left: 0;
  top: 0;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 20%;
  opacity: 0;
  -webkit-transition: 0.4s opacity;
  transition: 0.4s opacity;
}
section#cal time:hover a span.title {
  background: rgba(255, 255, 255, 0.98);
  opacity: 1;
}
section#cal time a:hover {
  border-bottom: none;
}
time:not(.blank) span {
  color: #000;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.98);
}
section#cal time a img {
  width: 60%;
  margin: 20%;
}
.hidden {
  opacity: 0;
}
.th {
  flex: 30px 0 0;
}
.week {
  flex: 30px 1 0;
  border-bottom: 1px solid #ccc;
}
/* Calendar rows */
.th,
.week {
  display: flex;
}
.th > span {
  border-bottom: 4px solid rgba(255, 0, 0, 0.3);
  padding: 0 2px 2px 0;
  text-align: right;
}
.week > div {
  border-top: 1px solid #eee;
  padding: 20px 2px 2px;
  min-height: 50px;
  position: relative; /* allow ::after psuedo element absolute positioning */
}
.th > span,
.week > div {
  width: 100%;
  margin-right: 5px;
  color: #333;
}
/* Dates */
.week > div::after {
  content: attr(data-date);
  display: block;
  position: absolute;
  top: 0;
  right: 2px;
  color: #999;
}
/* Weekends */
.th > span:first-child,
.th > span:last-child,
.week > div:first-child,
.week > div:last-child {
  background: #f3f3f3;
}
.th > span:last-child,
.week > div:last-child {
  margin-right: 0;
}
.dropdown-item {
  text-decoration: none;
  color: #ccc;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  text-decoration: none;
  background-color: #35679c;
  color: rgba(255, 255, 255, 0.5);
}
.card-header {
  padding: 0 0.25rem;
}
.card-header h5 button {
  font-weight: 400;
  min-height: 30px;
}
.card {
  position: relative;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 0.25rem;
  display: block;
  border: none;
}
.border-stars {
  border: 2px solid black;
  border-radius: 0.3em;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-bottom: 1px solid white;
}
#myTabContentMD > .active {
  display: block;
  background-color: white;
  border-right: 1px solid #fff;
}
table.target {
  margin-bottom: 3em;
}
table.target td {
  bottom: 0;
  width: 190px;
  min-height: 300px;
  padding: 0.2rem;
  vertical-align: bottom;
  border: 1px solid #eee;
}
table.target td img {
  bottom: 0;
  width: 100%;
}
table.target.btn-sm {
  width: 100%;
  line-height: 0.9rem;
}
h2.h3 {
  word-wrap: break-word;
}
.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: 0px;
}
.accordion.activity > .card > .card-header {
  border-radius: 0;
  margin-bottom: 0px;
  background-color: #35679c;
  color: white;
  font-size: 18px;
}
.accordion.activity > .card > .card-header {
  border-radius: 0;
  margin-bottom: 0px;
  background-color: #35679c;
  color: white;
  font-size: 18px;
}
.bg-orange {
  background-color: #d27e37;
}
.outline-orange {
  border: 3px solid #d27e37;
}
.bg-maroon {
  background-color: #5d2313;
}
.outline-maroon {
  border: 3px solid #5d2313;
}
.signup-links {
  color: #7299c3;
}
select:-internal-list-box option:checked {
  background-color: rgb(170, 218, 255) !important;
  color: rgb(16, 16, 16) !important;
  font-weight: 550;
}
fieldset {
  min-height: 140px;
}
.login-form {
  width: 340px;
  margin: 50px auto;
  font-size: 15px;
}
.login-form form {
  margin-bottom: 15px;
  background: #f7f7f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}
.login-form h2 {
  margin: 0 0 15px;
}
#exposure,
#filter {
  min-height: 140px;
}
/*____________________________*/
#DIY_Buzz {
  position: relative;
  text-align: left;
  margin: 0em auto 0 auto;
  width: 100%;
}
/*____________________________*/
/*____________________________*/
#DIY_Buzz2 {
  position: relative;
  margin: 0em auto 0 auto;
  width: 100%;
}
/*____________________________*/
/*LEFT SIDE
========================*/
.social,
.login_left {
  float: left;
  width: 200px;
  padding: 15px 15px 1000px 15px;
  margin: 1em 0 -1000px 10px;
  background: #444960; /* IE10 Consumer Preview */
  background: -ms-linear-gradient(
    top,
    #48546e 0%,
    #172845 100%
  ); /* Mozilla Firefox */
  background: -moz-linear-gradient(top, #48546e 0%, #172845 100%); /* Opera */
  background: -o-linear-gradient(
    top,
    #48546e 0%,
    #172845 100%
  ); /* Webkit (Safari/Chrome 10) */
  background: -webkit-linear-gradient(
    top,
    #48546e 0%,
    #172845 100%
  ); /* W3C Markup, IE10 Release Preview */
  background: linear-gradient(to bottom, #48546e 0%, #172845 100%);
}
.login_left {
  width: 250px;
}
.bubble {
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}
.bubble img {
  width: 45px;
  height: 45px;
  float: left;
  margin-right: 1em;
}
.bubble p {
  color: #483342;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  padding-bottom: 0;
}
.bubble p.name {
  text-transform: inherit;
  font-size: 1.1em;
  margin-bottom: 0.25em;
  line-height: 1.3;
  padding-top: 0.35em;
}
.bubble span {
  color: #7a7379;
  font-size: 0.7em;
  font-weight: normal;
  margin-top: 1.25em;
  line-height: 1.5;
}
.bubble span.error,
.bubble p.error {
  display: block;
  color: #c00;
  font-size: 0.65em;
  font-weight: normal;
  margin-top: 0em;
}
.bubble ul {
  margin-left: 0.25em;
}
.bubble li {
  line-height: 1.5;
  padding-bottom: 0.25em;
}
.bubble li a {
  display: block;
  text-decoration: none;
  font-size: 0.95em;
  letter-spacing: 0.03em;
}
.bubble li a.glow {
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 0 2px #feff84, 0 0 2px #feff84, 0 0 2px #feff84,
    0 0 2px #feff84, 0 0 2px #feff84, 0 0 2px #feff84, 0 2px 5px #7d7d7d;
  color: #1d436a;
}
.error {
  color: #f1d587;
}
#student_signin_card .input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
#signup_card .input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
.multiplePick {
  min-height: 390px !important;
}
.form-control .selected {
  background-color: aliceblue;
  color: black;
  font-weight: 700;
}
.bg-light {
  background-color: #f7f7f7 !important;
}
.my-custom-scrollbar {
  position: relative;
  height: 400px;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}
.footer-classic p {
  color: rgba(255, 255, 255, 0.5);
}
.card-header h2 button.collapsed:before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left !important;
  margin-right: 1em;
}
.card-header h2 button:before {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left !important;
  margin-right: 1em;
}
/*========================================*/
/*=======   Added by Aladdin =============*/
/*========================================*/
/* The activation__container2 */
.activation__container2 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.activation__container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.activation__container2:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.activation__container2 input:checked ~ .checkmark {
  background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.activation__container2 input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.activation__container2 .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/**************************************/
.activation__container {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  width: 420px;
  height: auto;
  font-family: "Open Sans";
  text-align: center;
  padding: 20px 20px 20px 10px;
}
/**************************************/
/* The recovery__container2 */
.recovery__container2 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.recovery__container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.recovery__container2:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.recovery__container2 input:checked ~ .checkmark {
  background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.recovery__container2 input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.recovery__container2 .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
button.btn-link:before {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left;
  margin-right: 1em;
}
/* ...unless login */
button.login-button.btn-link:before {
  content: none;
}
button.btn-link.collapsed:before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left;
  margin-right: 1em;
}
/**************************************/
/*========================================*/
/*=======   media styles     =============*/
/*========================================*/
@media all and (min-width: 1024px) {
  #schedule main {
    height: auto;
  }
  .modal-dialog {
    max-width: 563px;
    margin: 1.75rem auto;
  }
  .logo1 {
    width: auto;
    height: 2.15rem;
    float: right;
    margin-top: 0.5rem;
    margin-right: 1.5rem;
  }
  .logo2 {
    width: 9.25rem;
    height: 3.8rem;
    float: right;
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
  }
  .blue {
    font-size: 1.25rem;
    margin-top: 0.75rem;
    line-height: 1.36rem;
  }
  .nav-link {
    font-size: 0.98rem;
  }
}
@media all and (max-width: 1023px) {
  #telescope .container-fluid {
    height: 930px;
  }
  #schedule .container-fluid {
    height: 1500px;
  }

  .fc-view,
  .fc-view > table {
    position: relative;
    z-index: 1;
    height: 730px;
  }
  .fc-day-grid-container {
    height: 850px;
  }
  .h5,
  h5 {
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
  }
  .orange-bullet {
    line-height: 0.2rem;
    padding: 0 0.25rem;
  }
  #myTabMD h3 {
    font-size: 0.9rem;
  }
  .logo1 {
    width: auto;
    height: 1.75rem;
    float: right;
    margin-top: 0.75rem;
    margin-right: 1.5rem;
  }
  .logo2 {
    width: auto;
    height: 3rem;
    float: right;
    margin-right: 1rem;
    margin-top: 1.2rem;
  }
  .blue {
    font-size: 1.12rem;
    margin-top: 0.5rem;
    line-height: 1.12rem;
  }
}
@media all and (max-width: 991px) {
  .dropdown-menu {
    margin-top: 0;
    background-color: #3a546b;
  }
  .navbar-nav a.dropdown-item {
    padding-left: 1rem;
    color: white;
  }
  .h5,
  h5 {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
  }
  h3 .orange-bullet {
    line-height: 0.2rem;
  }
  .navbar-nav span.text-secondary {
    display: none;
  }
  .arr {
    font-size: 16px;
  }
  .logo1 {
    width: auto;
    height: 2rem;
    float: right;
    padding-right: 5px;
    margin-top: 1.25rem;
    margin-right: 1.5rem;
    margin-bottom: 0.25rem;
  }
  .logo2 {
    width: auto;
    height: 3.75rem;
    float: right;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
  }
  .blue {
    font-size: 1.12rem;
    margin-top: 0.6rem;
    line-height: 1.12rem;
  }
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 578px) {
}
@media all and (max-width: 414px) {
  .nav-tabs a h3 {
    font-size: 14px;
  }
  .h5,
  h5 {
    font-size: 0.6rem;
    margin-bottom: 0.1rem;
  }
  .navbar-expand .navbar-nav,
  .flex-row {
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .border-warning-l {
    border-left: #ffc107;
  }
  .border-warning-r {
    border-right: #ffc107;
  }
  .nav-tabs .nav-link {
    padding: 0.4rem 0.6rem 0.25rem 0.6rem;
    background-color: aliceblue;
    border-top: 2px solid #dee2e6;
    border-right: 2px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-left: 2px solid #dee2e6;
    margin-right: 2px;
  }
  .logo1 {
    width: auto;
    height: 1.85rem;
    float: right;
    margin-top: 0.78rem;
    margin-right: 1.5rem;
  }
  .logo2 {
    width: auto;
    height: 3rem;
    float: right;
    margin-right: 1rem;
    margin-top: 1rem;
  }
}
@media all and (max-width: 320px) {
  .blue {
    font-size: 0.67rem;
    margin-top: 1rem;
    line-height: 1.02rem;
  }
}
/*========================================*/
/*=======   Aladdin custom styles    ======*/
/*========================================*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  height: 155px;
  /*margin: 1px 2px;
    margin-bottom: 0;*/
  /*width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
  width: 100%;
  border-radius: 5px;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  width: 100%;
  transform: rotateY(180deg);
  /*right:1%;*/
  padding: 5px 5px 0px 5px;
  border-radius: 5px;
}
.flip-card-back p {
  font-size: 0.85rem;
}

/* Demand more contrast for the navbar */
.navbar-dark .navbar-nav .nav-item .nav-link {
  color: #ffffff;
}

/*========================================*/
/*=======   End of custom styles    ======*/
/*========================================*/

.index-hero-image {
  background-image: linear-gradient(
      180deg,
      rgb(255 255 255) 30%,
      rgb(0 0 0) 100%
    ),
    url(../images/design/transit_hero@2x.webp);

  background-blend-mode: multiply;
  background-size: cover;
  background-position: top 100% left 50%;
  min-height: 370px;
}

/* Data Labs */
/* Laura "general" colors */
:root {
  --gen-white: #ffffff; /* ffffff is also Smithsonian white */
  --gen-black: #000000;
  --gen-gold: #ffcd00; /* ffcd00 is also Smithsonian gold */
  --gen-grey: #a8a8b4;

  /* Data Labs colors */
  --dl-bright-purple: #3a3b75;
  --dl-dark-purple: #291a56;
  --dl-chartreuse: #d8f354;

  /* Speclab colors */
  --sl-slate-blue: #3a678a;
  --sl-royal-blue: #00456c;
  --sl-navy: #153353;
  --sl-light-blue: #3ad4ed;
  --sl-med-blue: #63d4ed;
  --sl-lighter-blue: #8ce7ff;

  /* Teacher resources */
  --tr-light-brown: #774e2b;
  --tr-dark-brown: #422a16;
  --tr-dark-grey: #5c5c64;
  --tr-light-grey: #edecf2;
  --tr-med-grey: #ccccd4;

  /* DIY planet search */
  --diy-brown: #594a40;
  --diy-blue: #36679c;
  --diy-red: #c02325;
}

.bg-gen-black {
  background-color: var(--gen-black) !important;
}

.bg-diy-brown {
  background-color: var(--diy-brown) !important;
}

.bg-gen-black {
  background-color: var(--gen-black) !important;
}

.text-gen-grey {
  color: var(--gen-grey) !important;
}

.open-sans-stack {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.link-gen-gold {
  color: var(--gen-gold) !important;
}

.link-gen-gold:hover {
  color: #ffe680 !important;
}

/* From Bootstrap 5 */
.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.4;
}