body {
    padding-top: 4.5rem;
}
#bodhiTreeTitle {
    position: relative;
    margin-left: 10%;
    padding-right: 0;
    overflow: visible;
    white-space: nowrap;
    text-align: left;
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 1.1rem;
    color: rgba(112,112,112,1);
}

#exploreButtonParent {
    position: relative;
    white-space: nowrap;
}

.exploreButton {
    font-family: Open Sans;
    font-style: normal;
    text-align: center;
    background-color: rgba(0, 80, 141, 1)
}

.exploreCoursesButton {
    text-align: center;
    font-size: small;
    width: 85%;
    background-color: white;
    color: grey;
    border-color: lightgrey;
    border-style: groove;
    border-radius: 5px;
    margin-bottom: 0;
    margin-top: 20%;
}


#searchGroup{
    position: absolute;
    height: 2rem;
    width: 30%;
    left: 33%;
    z-index: 2000;
    top: 1.2%;
    padding-left: 5%;
}

#loginLink {
    white-space: nowrap;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    color: rgba(0,80,141,1);
}

#loginLinkParent{
    position: absolute;
    right: 12rem;
}
#registerButtonParent{
    position: absolute;
    right: 11%;
}

  .bluebackground {
    background:  rgba(0, 80, 141, 1);
    margin-top: -2%!important;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin: auto;
  }

  .courseIntroParent {
      width: 60%;
      margin-top: 6%;
  }

  .courseInfo {
      color: white;
      margin-top: 8%;
      margin-bottom: 11%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
  }

  #taglineHeader, #tagline {
      margin-top: 2%;
      margin-bottom: 2%;
  }

  #taglineHeader {
      width: 80%;
      min-width: 250px;
  }

  .signupButton {
    /* background-color: white; */
    /* color: rgb(0, 80, 141); */
    margin-top: 0%;
    margin-bottom: 2%;
    font-size: 80%;
    border-radius: 10px;
    width: 25%;
    min-width: 150px;
  }

body {
    text-align: center;
}

.tagline {
    height: 100%;
    margin-left: 29%;
    background: linear-gradient(-75deg, rgba(0, 80, 141, 1) 65%, transparent 65%);
    display: flex;
  }

.font-style {
    text-align: left;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    color: rgba(74,74,74,1);
}


.institutesParent {
    margin-top: 2%;
    width: 80%;
}

.coursesParent {
    width: 80%;
    margin-top: 1%;
    height: auto;
    /* display: flex; */
    flex-direction: row;
    justify-content: center;
    padding-bottom: 3%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightgrey;
}

.institutesHeader {
    text-align: center;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 90%;
    color: rgba(74,74,74,1);
}

.instituteCardsGroup {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-content: space-around;
    align-items: stretch;
}

.institute{
    color: rgba(112,112,112,1);
    display: flex;
    justify-content: center;
    margin: 1%;
    min-width: auto;
}

.course {
    color: rgba(112,112,112,1);
    margin: 1%;
    flex-grow: 1;
    flex-basis: 0;
}



.separator {
    margin-top: 4%;
    margin-bottom: 4%;
    width: 100%;
    height: 1px;
    background-color: lightgray
}

.courseHeader {
    color: rgba(112,112,112,1);
    flex-grow: 1;
    flex-basis: 0;
    margin: 2%;
    margin-right: 3%;
    text-align: left;
    border-color: transparent;
}

.course, .courseHeader {
  min-width: 150px;  
  max-width: 200px;
  padding: 0;
}

.mainBody {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: space-around;
    margin-top: 5%;
    width: 100%;
    height: auto;
}

.footer {
    width: 80%;
}

.coursesFlexForSeparator {
    width: 80%;
}

ul {
    list-style: none;
    padding-left: 0;
  }
.tick {
    text-align: left;
    position: relative;
    padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
.tick:before {
    content: '';  /* placeholder for the SVG */
    position: absolute;
    left: 0;  /* place the SVG at the start of the padding */
    width: 1em;
    height: 1em;
    margin-top: 1%;
    background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}