/* CSS for the Lynden High School IT Website */
:root {
  --light: #f8f9fa;
  --light-hover: #e9e9e9;
  --dark: #3b3b3b;
  --dark-hover: #474747;
  --primary: #56cf55;
  --primary-hover: #78e478;
  --secondary: #ffca09;
  --secondary-hover: #ffe176;
}

.hidden {
  display: none !important;
  height: 0px !important;
  opacity: 0 !important;
}

html {
  scroll-behavior: smooth !important;
  user-select: none;
  overflow-x: hidden;
}

/* Body */
@media (prefers-color-scheme: light) {
  body {
    background-color: #dddddd;
    color: black !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #2e2e2e;
    color: white !important;
  }
}

/* Text */
@media (prefers-color-scheme: light) {
  .text-muted {
    color: rgba(0, 0, 0, 0.5) !important;
  }
}
@media (prefers-color-scheme: dark) {
  .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

.clickable {
  cursor: pointer;
}
.clickable:hover {
  text-decoration: underline !important;
}
tr.clickable:hover p {
  color: var(--primary-hover);
}
@media (prefers-color-scheme: light) {
  .list-group-item.clickable:hover {
    background-color: var(--light-hover) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .list-group-item.clickable:hover {
    background-color: var(--dark-hover) !important;
  }
}

.text-sm {
  font-size: 10pt;
}

.text-bubble {
  background-color: rgba(199, 199, 199, 0.5);
  border-radius: 10px;
  padding-left: 15px !important;
  padding-right: 15px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltips {
  color: var(--secondary) !important;
}
.alert {
  border-radius: 15px;
}

/* Project Status Icons */
#completed {
  color: var(--primary) !important;
  fill: var(--primary) !important;
}
#notstarted {
  color: red !important;
  fill: red !important;
}
#working {
  color: var(--secondary) !important;
  fill: var(--secondary) !important;
}

/* Navbar */
@media (prefers-color-scheme: light) {
  nav {
    box-shadow: 5px 5px 99px -30px rgba(128, 128, 128, 0.7);
    -webkit-box-shadow: 5px 5px 99px -30px rgba(128, 128, 128, 0.7);
    -moz-box-shadow: 5px 5px 99px -30px rgba(128, 128, 128, 0.7);
  }
  nav,
  .gsc-control-cse,
  #___gcse_1,
  .dropdown-menu {
    background-color: var(--light) !important;
    border-radius: var(--light) !important;
  }
  .dropdown-menu {
    border-color: var(--light) !important;
  }
  nav li.active a {
    color: rgb(0, 0, 0) !important;
  }
  nav a {
    color: rgba(0, 0, 0, 0.5) !important;
    transition: 100ms ease;
  }
  nav a:hover {
    color: rgba(0, 0, 0, 0.7) !important;
  }
  .navbar-toggler {
    background-color: #dddddd !important;
    color: black !important;
    fill: black !important;
  }

  .dropdown-item:hover {
    background-color: var(--light-hover);
  }

  .safari-warning-search {
    color: rgba(0, 0, 0, 0.5) !important;
  }
  .breadcrumb {
    background-color: var(--light-hover) !important;
  }
}

@media (prefers-color-scheme: dark) {
  nav {
    box-shadow: 0px 10px 20px 0px rgba(15, 15, 15, 0.2);
    -webkit-box-shadow: 0px 10px 20px 0px rgba(15, 15, 15, 0.2);
    -moz-box-shadow: 0px 10px 20px 0px rgba(15, 15, 15, 0.2);
  }

  nav,
  .gsc-control-cse,
  #___gcse_1,
  .dropdown-menu {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    overflow: hidden;
  }
  .dropdown-menu {
    border-color: var(--dark-hover) !important;
  }
  nav li.active a {
    color: rgb(255, 255, 255) !important;
  }
  nav a {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: 100ms ease;
  }
  nav a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .navbar-toggler {
    background-color: #2e2e2e !important;
    color: white !important;
    fill: white !important;
  }

  .dropdown-item:hover {
    background-color: var(--dark-hover);
  }

  .safari-warning-search {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .breadcrumb {
    background-color: var(--dark-hover) !important;
  }
}
.navbar-menu {
  height: 35px;
}
#menubar {
  display: flex;
  justify-content: center;
  align-items: center !important;
}
.dropdown-menu {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px !important;
}

.navbar-toggler {
  position: absolute;
  width: 45px;
  height: 45px;
  bottom: 30px;
  left: 15%;
}

.navbar:hover a.navbar-brand .navbar-brand-img {
  width: 210px;
  height: 80px;
}

a.navbar-brand .navbar-brand-img {
  transition: 500ms ease-in-out;
  width: 55px;
  height: 80px;
  overflow-x: hidden;
  background-image: url("../images/lynden/svg/lyndenBrand.svg");
  background-size: cover;
}
.nav-link {
  height: 35px;
}

@media only screen and (max-width: 575px) {
  a.navbar-brand .navbar-brand-img {
    width: 210px !important;
    height: 80px !important;
  }
}

/* Searchbar */
.search {
  width: 240px !important;
  height: 35px !important;
}
@media only screen and (max-width: 575px) {
  .search {
    width: 100% !important;
  }
}
.gsc-input-box {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  height: 35px !important;
  width: 100% !important;
  padding: 0px !important;
}
.gsc-input {
  padding: 0px !important;
}
.gsc-search-button,
.gsc-search-button-v2 {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  height: 35px !important;
  width: 35px !important;
  padding: 0px !important;
  margin: 0px !important;
}

.safari-warning-search {
  margin-top: auto;
  margin-bottom: auto;
}
/* For Search Bar Positioning */
.flex-fill {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Jumbotron */
@media (prefers-color-scheme: light) {
  .jumbotron {
    background-color: var(--light) !important;
    border-radius: 15px;

    box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -moz-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
  }
}

@media (prefers-color-scheme: dark) {
  .jumbotron {
    background-color: var(--dark) !important;
    border-radius: 15px;

    box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
    -moz-box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
  }
}

/* Card */
@media (prefers-color-scheme: light) {
  .card {
    background-color: var(--light) !important;

    box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -moz-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
  }
}

@media (prefers-color-scheme: dark) {
  .card {
    background-color: var(--dark) !important;

    box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
    -moz-box-shadow: 10px 10px 99px -20px rgba(15, 15, 15, 0.7);
  }
}

.card {
  border: 0px;
}
.card,
.card img {
  border-radius: 15px;
}
.card-deck.steps {
  display: grid !important;
  grid-gap: 10px;
  grid-template-columns: repeat(13, 370px);
  grid-template-rows: minmax(100px, 100%);

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}
.card-deck.steps .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}
.card-deck.steps::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.card-deck.steps::-webkit-scrollbar-track {
  background-color: rgba(160, 160, 160, 0.1);
  border-radius: 10px;
}
.card-deck.steps::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    45deg,
    var(--primary),
    var(--primary-hover)
  );
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 3px 13px 1px;
}
/* .carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.1s ease-in-out left;
  -moz-transition: 0.1s ease-in-out left;
  -o-transition: 0.1s ease-in-out left;
  transition: 0.1s ease-in-out left;
} */

/* Modal */
.modal div,
.modal h5 {
  color: black !important;
}

/* List Group */
@media (prefers-color-scheme: light) {
  .list-group {
    background-color: var(--light) !important;
    padding: 20px;
    border-radius: 15px;

    box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
    -moz-box-shadow: 10px 10px 99px -20px rgba(128, 128, 128, 0.7);
  }
  .list-group-item {
    background-color: white !important;
  }
}

@media (prefers-color-scheme: dark) {
  .list-group {
    background-color: var(--dark) !important;
    padding: 20px;
    border-radius: 15px;

    box-shadow: 10px 10px 99px -20px rgba(215, 215, 215, 0.2);
    -webkit-box-shadow: 10px 10px 99px -20px rgba(215, 215, 215, 0.2);
    -moz-box-shadow: 10px 10px 99px -20px rgba(215, 215, 215, 0.2);
  }
  .list-group-item {
    background-color: var(--dark) !important;
  }
}

/* Buttons */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.paginate_button.current {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.paginate_button {
  background-color: var(--light) !important;
}

/* Links */
a {
  color: var(--primary);
}
.link {
  color: var(--primary) !important;
}
a:hover {
  color: var(--primary-hover);
}
.link:hover {
  color: var(--primary-hover) !important;
}
p.clickable:hover {
  text-decoration: underline !important;
  cursor: pointer;
}

/* Badges */
.badge-primary {
  background-color: var(--primary) !important;
}
.badge-secondary {
  background-color: var(--secondary) !important;
}

/* Containers */
.fullsidebar {
  display: flex;
}
.fullsidebar div.body {
  flex: 3;
}
.fullsidebar div.sidebar {
  flex: 1;
}

/* Tables */

.table-hover tbody tr {
  color: var(--primary);
  cursor: pointer;
}
.table-hover tbody tr:hover {
  color: var(--primary-hover);
}
tbody td {
  color: var(--primary);
}
@media (prefers-color-scheme: light) {
  .table,
  .table * {
    border-color: var(--light-hover) !important;
  }
  td {
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  .table,
  .table * {
    border-color: var(--dark-hover) !important;
  }
  thead td {
    color: white;
  }
}

/* List Items */
.faq-step {
  overflow: hidden;
  transition: 150ms ease-in-out;
}