/* screen - main-page-template */

.main-page-template {
  align-items: flex-start;
  display: flex;
  width: 100%;
  /*  max-width: 78.75vw; */
  padding: 0 0vw;
  z-index: 5;
}

.main-page-template .overlap-group6 {
  height: 100%;
  margin-top: 1.3vw;
  position: absolute;
  width: 100%;
}

.main-page-template .main-page-layout-component {
  display: flex;
  height: 2.56vh;
  left: .104vw;
  position: absolute;
  top: 1.56vw;
  width: 78.75vw;
}

.main-page-template .scroll-group-15::-webkit-scrollbar {
  display: none;
  background-repeat: no-repeat;
}

.main-page-template .scroll-group-15 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  max-width: 78.85vw;
  overflow: scroll;
  padding: .21vw 0;
}

.main-page-template table {
  position: relative;
  width: 100%;
  border: 0vw solid black;
}

.main-page-template td {
  padding: 0vw;
}

.main-page-template #header-table {
  position: relative;
  width: 100%;
  height: auto;
  border: 0vw solid yellow;
  overflow-x: hidden;
}

.main-page-template .header-table-img {
  position: relative;
  width: 100%;
  height: auto;
  border: 0vw solid red;
}

.main-page-template #module-menu-table {
  position: relative;
  width: 100%;
  border: 0vw solid red;
}

.main-page-template #modules-links-table {
  position: absolute;
  width: 100%;
  border: 0vw solid purple;
  background-color: white;
}


/*
.main-page-template .main-section {
  position: relative;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  padding-top: 0vw;
}

.main-page-template .main-section-outer-table {
  position: relative;
  border: 0vw solid red;
  margin: 0vw;
}

.main-page-template .subcontent-table {
  position: relative;
  margin-top: 2.5vw;
}vw
*/

.main-page-template #main-section-table td {
  padding: 0vw 0vw 1.3vw 0vw``;
}

.main-page-template #footer-table {
  position: relative;
  width: 100%;
  border: 0vw solid red;
}

.main-page-template .page-background-white-center {
  background-color: var(--universal--white--ffffff);
  height: 195vh;
  width: 78.75vw;
}

.main-page-template .overlap-group {
  align-items: center;
  background-color: white;
  /* background-position: 50% 50%; */
  background-size: cover;
  display: flex;
  width: 88%;
  height: 5vw;
  left: 6%;
  /* min-width: 1360px; */
  padding: 3vw 2vw;
  position: absolute;
  top: 0vw;
  border: 0vw solid green;
  border-radius: 0vw 0vw 2.083vw 2.083vw;
}

.main-page-template .header-nav-ccr_logo {
  align-self: flex-start;
  object-fit: contain;
  width: 6vw;
  height: auto;
  max-width: 7.1vw;
}

.main-page-template .meet-our-consellors {
  letter-spacing: 0;
  line-height: .94vw;
  margin-left: 19vw;
  margin-top: 1.0px;
  min-height: 1.04vw;
  white-space: nowrap;
  width: auto;
  text-align: right;
}

.main-page-template .news {
  letter-spacing: 0;
  line-height: .94vw;
  margin-left: 1.5vw;
  margin-top: 1.0px;
  min-height: 1.04vw;
  white-space: nowrap;
  width: 2.3vw;
}

.main-page-template .my-saved-data {
  letter-spacing: 0;
  line-height: .94vw;
  margin-left: 1.5vw;
  margin-top: 1.0px;
  min-height: 1.04vw;
  white-space: nowrap;
}

.main-page-template .overlap-group-bell {
  align-items: flex-start;
  background-color: var(--mercury);
  border-radius: 1.09vw/20.5px;
  display: flex;
  height: 2.1vw;
  width: 2.1vw;
  justify-content: flex-end;
  margin-bottom: .1vw;
  margin-left: 2vw;
  padding: .55vw .55vw;
}

.main-page-template .icon-awesome-bell {
  height: 1.1vw;
  object-fit: contain;
  width: 1.1vw;
}

.main-page-template .overlap-group2 {
  /* align-self: flex-start; */
  height: 3.1vw;
  margin-left: 1vw;
  /*2vw;*/
  position: relative;
  width: 8.3vw;
}

.subscribe-now {

  position: absolute;
  text-align: center;
  vertical-align: middle;
  top: 2.5vw;
}

.subscribe-now a {
  color: #264081;
  font-family: var(--font-family-mr_eaves_xl_mod_ot);
  font-size: var(--font-size-ml);
  font-weight: 400;
}

.main-page-template .welcome-john-smith {
  color: var(--universal--black--000000);
  font-family: var(--font-family-mr_eaves_xl_mod_ot);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 0;
  letter-spacing: 0;
  line-height: 0.9vw;
  position: absolute;
  text-align: center;
  top: 0.52vw;
  width: 5.3vw;
}

.main-page-template .span0 {
  font-family: var(--font-family-mreaves_xl_mod_ot-heavy);
}

.main-page-template .footer {
  align-items: center;
  background-color: #2e9b74;
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 15vw;
  /*36.46vw;*/
  padding: 1.46vw 1.56vw;
  position: relative;
  width: 100%;
}

.main-page-template .ccr_logo_white_on_green {
  height: auto;
  object-fit: cover;
  width: 5vw;
}

.main-page-template .ccr-tag-line {
  align-self: flex-end;
  letter-spacing: 0;
  line-height: 1.04vw;
  margin-top: .3125vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 75.52vw;
}

.main-page-template .infoccrcom-0987654321 {
  align-self: flex-end;
  letter-spacing: 0;
  line-height: 1.04vw;
  margin-top: .21vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 75.52vw;
}

.main-page-template .line {
  height: .365vw;
  margin-top: 1.35vw;
  object-fit: cover;
  width: 62.5vw;
}

.main-page-template .flex-row {
  align-items: flex-start;
  display: flex;
  margin-top: 1.46vw;
  min-width: 55.89vw;
}

.main-page-template .flex-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 6.3vw;
  width: 9.84vw;
}

.main-page-template .main-links {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  white-space: nowrap;
  width: 5.36vw;
}

.main-page-template .about-ccr {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .47vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .flex-col-item {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .625vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .saved-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 4.9vw;
  min-height: 6.3vw;
  width: 11.8vw;
}

.main-page-template .my-saved-data-1 {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-right: 1.0px;
  min-height: 1.15vw;
  white-space: nowrap;
}

.main-page-template .saved-colleges {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .47vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 11.8vw;
}

.main-page-template .saved-s {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .625vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 11.8vw;
}

.main-page-template .flex-col-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  /* JH 1/13/23: temporarily changing this while we have footer columns commented out
  margin-left: 3.18vw;
  */
  margin-left: 10vw;
  min-height: 6.3vw;
  width: 12.66vw;
}

.main-page-template .modules {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 93px;
}



.main-page-template .x-planning {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .625vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 12.66vw;
}

.main-page-template .flex-col-2 {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 5.1vw;
  ;
  min-height: 6.3vw;
  width: 8.4vw;
}

.main-page-template .user-profile {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-right: 1.0px;
  min-height: 1.15vw;
  white-space: nowrap;
}

.main-page-template .my-profile {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .47vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 8.4vw;
}

.main-page-template .flex-col-item-1 {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  margin-top: .625vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 8.4vw;
}

.main-page-template .flex-row-1 {
  align-items: flex-start;
  display: flex;
  height: 1.15vw;
  margin-left: 2.4vw;
  min-width: 42.4vw;
}

.main-page-template .news-1 {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .saved-a {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
}

.main-page-template .personal-social-growth {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 12.66vw;
}

.main-page-template .flex-col-item-2 {
  align-items: flex-start;
  display: flex;
  height: 1.15vw;
  margin-left: 2.4vw;
  margin-top: .625vw;
  min-width: 42.4vw;
}

.main-page-template .resources {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .assessments {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 12.66vw;
}

.main-page-template .careers {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .data-reports {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 12.66vw;
}

.main-page-template .terms-conditions {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 9.84vw;
}

.main-page-template .communication {
  letter-spacing: max(.0328vw, .4px);
  line-height: 1.04vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  width: 12.66vw;
}

.main-page-template .flex-row-2 {
  align-items: flex-start;
  align-self: center;
  display: flex;
  /* margin-right: .677vw; */
  margin-top: 2.8vw;
}

.main-page-template .facebook {
  height: 2.4vw;
  object-fit: cover;
  width: 2.4vw;
}

.main-page-template .flex-row-item {
  height: 2.4vw;
  margin-left: 1.82vw;
  object-fit: cover;
  width: 2.4vw;
}

.main-page-template .copyright-ccr-2020 {
  align-self: center;
  line-height: 1.04vw;
  margin-right: .625vw;
  margin-top: 1.51vw;
  min-height: 1.15vw;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
}

.main-page-template .help-section {
  align-items: center;
  background-color: var(--light--f8f9fa);
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 13vw;
  padding: 2.34vw 33.7vw;
  position: relative;
}

.main-page-template .title {
  -webkit-text-stroke: .052vw var(--mercury);
  letter-spacing: 1.00px;
  line-height: 1.67vw;
  margin-left: .104vw;
  min-height: 1.77vw;
  min-width: .456vw;
  text-align: center;
  white-space: nowrap;
}

.main-page-template .help-text-here {
  margin-top: 1.41vw;
  min-height: 1.15vw;
  min-width: 6.98vw;
  text-align: center;
  white-space: nowrap;
}

.main-page-template .button-default-primary {
  align-items: flex-start;
  display: flex;
  height: 2.5vw;
  justify-content: center;
  margin-top: 1.41vw;
  min-width: 11.3vw;
}

.main-page-template .overlap-group-1 {
  align-items: flex-start;
  background-color: #21c087;
  border: 0vw solid var(--mercury);
  border-radius: 1.56vw;
  display: flex;
  height: 2.8vw;
  margin-top: -0.156px;
  min-width: 11.6vw;
  padding: .833vw 1.67vw;
}

.main-page-template .get-in-touch-with-us {
  color: var(--universal--white--ffffff);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .833vw;
  min-height: .94vw;
  white-space: nowrap;
  margin-top: .156vw;
}

.main-page-template .square-module-links-component {
  align-items: flex-start;
  display: flex;
  height: .4vw;
  min-width: 67.4vw;
  position: absolute;
}

.main-page-template .planning-module-link-grpup-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: .4vw;
  width: 20.83vw;
}


.module-menu {
  padding: 1.04vw 0.52vw 1.04vw .52vw;
  position: relative;
  top: -1.2vh;
}

.module-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
}

.module-menu li {
  display: inline;
}

.module-menu li a {
  color: white;
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
}

.module-menu li .active {
  color: black;
  font-family: var(--font-family-mreaves_xl_mod_ot-heavy);
}

.menu-admin {
  background: linear-gradient(131.59deg, #1757c6 4.48%, #769bdb 95.92%);
}

.menu-college-planning {
  background: linear-gradient(131.59deg, #fcb0bc 4.48%, #d196ef 95.92%);
}

.menu-academic-planning {
  background: linear-gradient(132.49deg, #ffe481 9.84%, #ff9f67 90.59%);
}

.menu-career-planning {
  background: linear-gradient(131.99deg, rgba(116, 202, 252, 0.99) 10.57%, #80d0c9 90.06%);
}

.menu-self-assessments {
  background: linear-gradient(131.63deg, #96e3d1 6.18%, #d1ef98 95.69%);
}

.menu-data-reports {
  background: linear-gradient(132.51deg, #9aadfd 9.9%, #c996ef 91.29%);
}

.menu-communication {
  background: linear-gradient(132.32deg, #e39696 4.37%, #ffd38d 94.17%);
}

/* Beginning of css for dropdown menu that appears when hovering */
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  opacity: 0;
  position: absolute;
  background-color: white;
  width: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1.7vw;
  z-index: 1;
  top: 10vh;
  padding: 0px 20px 0px 20px;
  nowrap;
}

/* Links inside the dropdown */
.dropdown-content ul li a {
  color: var(--main-gray-text);
  font-family: var(--font-family-mr_eaves_xl_mod_ot);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 20px 0px 20px 0px;
  text-decoration: none;
  text-align: center;
  display: block;
}

.dropdown-content ul li:not(:last-child) {
  border-bottom: 1px solid var(--main-gray-text);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  opacity: 1;
}

/* Show the dropdown menu on hover */
.dropdown-content:hover {
  opacity: 1;
}

.main-page-template .avatar {
  height: 3.07vw;
  left: 5.2vw;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 3.2vw;
}

.main-page-template .arrow-small-down {
  height: 0.68vw;
  margin-bottom: .105vw;
  /* margin-left: 8.5vw; */
  width: 1.04vw;
  position: absolute;
  margin-top: 2.4vh;
}

/* end of css for dropdown menu that appears when hovering over user's avatar */

.header-table-menu td {
  vertical-align: middle;
}

/* Start of css for language tab */
.language-tab-container {
  position: absolute;
  right: 0;
  top: 5vh;
  width: 5.21vw;
  /* overflow-x: hidden; */
}

/* Style the links inside the sidenav */
.side-nav a {
  position: absolute;
  /* Position them relative to the browser window */
  right: -40px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Add transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 5.21vw;
  /* Set a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: white;
  /* White text color */
  border-radius: .78vw 0 0 .78vw;
  /* Rounded corners on the top right and bottom right side */
  overflow-x: hidden;
}

.side-nav a:hover {
  right: 0;
  /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
.side-nav .lang-tab {
  top: 20px;
  background-color: white;
  border: 1px solid var(--mercury);
  overflow-x: hidden;
}

/* End of css for language tab */

.notvisible {
  display=none;
}

@media only screen and (max-width: 999px) {
  .main-page-template .header-nav-ccr_logo {
    width: 10vw;
    max-width: 10vw;
  }

  .main-page-template .overlap-group {
    border-radius: 0 !important;
    width: 100%;
    height: 10vw;
    left: 0;
  }

  .main-page-template .overlap-group2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    position: relative;
    margin-left: 1vw;
    height: 2.1vw;
    width: 25.3vw;
  }

  .main-page-template .welcome-john-smith {
    position: relative;
    width: auto;
    top: 0;
  }

  .main-page-template .welcome-john-smith span {
    white-space: nowrap;
  }

  .main-page-template .avatar {
    margin-left: 1vw !important;
  }

  .main-page-template .avatar,
  .main-page-template .arrow-small-down {
    position: relative;
    left: unset;
    top: 0;
    right: 0;
    margin: 0;
  }

  .dropdown-content {
    right: 0;
    top: 7vw;
  }

  .dropdown.profile-dropdown {
    z-index: 11;
  }

  .dropdown.profile-dropdown .dropdown-content ul li a {
    padding: 12px 0;
    font-size: var(--font-size-s);
    font-weight: 500;
    z-index: 11;
  }

  .main-page-template .footer .flex-row {
    margin-top: 5vw;
    margin-bottom: 5vw;
    width: 100%;
    gap: 0 10vw;
    justify-content: center;
  }

  .main-page-template .footer .flex-row .flex-col-1 {
    margin-left: 0;
    width: auto;
  }

  .main-page-template .footer .flex-row .flex-col-1 .link-item {
    font-size: var(--font-size-mml);
    line-height: var(--font-size-l);
    width: auto;
  }
}

@media only screen and (max-width: 600px) {
  .module-menu li {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5vw;
  }

  .module-menu li a {
    font-size: var(--font-size-m);
    text-align: center;
  }
}