/*
We put all styling in one file so that it can be cached and reused efficiently, styling goes for landing.php the first page and from there everything is hydrated either fully or in parts.
*/


:root {
  --triadBlue: #2390dc;
  --triadPink: #dc2390;
  --triadGreen: #90dc23;
  --prettyPurple: #9b09f6;
}

.customGradientBg {
  background-image: linear-gradient(
    to right,
    var(--triadBlue),
    var(--triadPink)
  );
}
.customGradientText{
  background: -webkit-linear-gradient(var(--triadBlue), var(--triadPink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
* {
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
  width: 100vw;
}
.dashboardWrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
main .mainNavigation {
  flex: 10%;
  background-color: black;
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  max-height: 100vh;
}

#loginFormSection,
#loginFormSection .border-warning {
  border: 2px solid var(--prettyPurple) !important;
}
#dashboardPage {
  flex: 90%;
  overflow-y: auto;
  overflow-x: hidden;
}
.navigationHeader h1 {
  background: -webkit-linear-gradient(var(--triadBlue), var(--triadPink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.navigationHeader small {
  color: lightgray;
  font-size: 0.69rem;
  margin: 5px;
}
main .mainNavigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 20vh;
  overflow-y: auto;
  overflow-x: hidden;
}
main .mainNavigation ul li {
  color: white;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: row;
  transition: 0.25s ease-in-out;
}
main .mainNavigation .divider {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.dividerLast {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
main .mainNavigation .divider div {
  flex: 33%;
}
main .mainNavigation .navUserIconWrap {
  background-image: linear-gradient(
    to right,
    var(--triadBlue),
    var(--triadPink)
  );
  border-radius: 50%;
  height: 100px !important;
  width: 100px !important;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

main .mainNavigation .navUserIcon {
  border-radius: 50%;
  background-image: url(./"images/icon.png");
  background-size: cover;
  height: 90px;
  width: 90px;
}

main .mainNavigation .navUser {
  background-image: linear-gradient(
    to right,
    var(--triadBlue),
    var(--triadPink)
  );
  color: white;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: row;
}

main .mainNavigation .navUser:hover {
  cursor: pointer;
}

main .mainNavigation .divider .dividerLine {
  position: relative;
  height: 1px;
  background-color: gray;
  border-radius: 1px;
  top: 50%;
}
main .mainNavigation .divider .dividerText {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 0.69rem;
  color: lightgray;
  text-align: center;
}
main .mainNavigation #navSearch {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: darkgray;
}
main .mainNavigation #navSearch:focus {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: white;
}
.navIcon {
  background-size: cover;
  padding: 15px;
  background-image: linear-gradient(
    to right,
    var(--triadBlue),
    var(--triadPink)
  );
  border-radius: 5px;
}
.navLinkTitle {
  margin-left: 5px;
}
main .mainNavigation ul li:hover {
  background-image: linear-gradient(
    to right,
    var(--triadBlue),
    var(--triadPink)
  );
  cursor: pointer;
  transform: scale(0.9);
}
/*Navigation icons these belong to the nav*/
#courseshistoryadmin .navIcon {
  background-image: url("../images/enroll.svg");
  background-size: cover;
}
#home .navIcon {
  background-image: url("../images/home.svg");
  background-size: cover;
}
#moonhowlersvn .navIcon {
  background-image: url("../images/dashboard.svg");
  background-size: cover;
}
#dashboard .navIcon {
  background-image: url("../images/dashboard.svg");
  background-size: cover;
}
#courses .navIcon {
  background-image: url("../images/courses.svg");
  background-size: cover;
}
#foodtable .navIcon {
  background-image: url("../images/enroll.svg");
  background-size: cover;
}
#coursesadmin .navIcon {
  background-image: url("../images/admin.svg");
  background-size: cover;
}
#usersadmin .navIcon {
  background-image: url("../images/adminAcc.svg");
  background-size: cover;
}
#profile .navIcon {
  background-image: url("../images/user.svg");
  background-size: cover;
  padding: 15px;
  width: 0;
  height: 0;
}
.mainNavigation .userName {
  margin-left: 5px;
}
.arrow {
  background-image: url("../images/arrowRight.svg") !important;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to bottom,
    var(--triadBlue),
    var(--triadPink)
  );
  border-radius: 10px;
  transition: 0.5s ease-in-out;
}

@media only screen and (max-height: 750px) {
  main .mainNavigation {
    padding: 5px;
    flex: 15%;
  }
  #dashboardPage {
    flex: 85%;
  }
  main .mainNavigation .divider {
    margin: 0;
  }
  main .mainNavigation ul {
    margin: 0;
  }
  main .mainNavigation h1 {
    font-size: 1.5rem;
  }
  main nav ul li {
    padding: 5px;
  }
}
@media only screen and (max-width: 1050px) {
	/*we resize the font and width so that tablet users can have an easier time logging in*/
  #loginFormSection,
  #loginFormSection button,
  #loginFormSection input {
    font-size: 2rem;
    height: auto;
  }
  #loginFormSection {
    width: 75vw !important;
  }
}
@media only screen and (max-width: 750px) {
	/*we resize the font and width so that phone users can have an easier time logging in*/

  #loginFormSection,
  #loginFormSection button,
  #loginFormSection input {
    font-size: 1rem;
    height: auto;
  }
  #loginFormSection {
    width: 95vw !important;
  }
  main .mainNavigation .divider {
    margin: 0;
  }
  main .mainNavigation ul {
    margin: 0;
  }
  main .mainNavigation ul li {
    padding: 5px;
  }
  .navigationLink {
    font-size: 0.6rem;
  }
  .navigationLink {
    justify-content: center;
  }
  .navLinkTitle {
    display: none;
  }
  .userName {
    display: none;
  }
  .dividerText {
    display: none;
  }
  .navHeader {
    display: none;
  }
  .navDescription {
    display: none;
  }

  main .mainNavigation .navUserIcon {
    height: 20px;
    width: 20px;
  }
  main .mainNavigation .navUserIconWrap {
    height: 30px !important;
    width: 30px !important;
    padding: 5px;
  }
}
#usersAdminWrap {
}