:root {
  /* -- Variables -- */
  /* --Colours-- */
  --main-color: #fff; /* Sets the main colour to use throughout the system. */
  --alt-color-dark: #0072c6; /* Dark colour to complement the main colour. */
  --alt-color-light: #ecf0f1; /* Light colour to complement the main colour. */
  --alt-mode: #1565c0; /* Sets what alt mode to use primarily */
  --alt-mode-2: var(
    --alt-color-dark
  ); /* Sets what alt mode to use secondarily, this should be the opposite of the variable above. */

  --nav-text-color: #0072c6;
  --nav-text-color-hover: var(--main-color);

  --standard-link-color: #2980b9;

  --heading-bg-color: var(--alt-mode);
  --heading-text-color: white;
  --heading-border-width: 0px;
  --heading-border-color: transparent;

  --footer-bg: var(--alt-mode);
  --footer-text: var(--nav-text-color);
  --footer-links: var(--alt-mode);
  --transition-time: 0.25s; /* General animation length. */
}

#latestnews .newsitem .card-img-top {
  background: var(--alt-color-dark);
}

/* --Navigation Styles-- */
.wjps-nav {
  background-color: var(--main-color);
}
.navbar-brand img {
  max-height: 70px !important;
}

.nav-link {
  border-radius: 0.25rem;
  transition: background var(--transition-time);
}
.nav-link:not(.wjps-nav-button):not(.tab-link):not(.wjps-tabs) {
  color: var(--nav-text-color) !important;
}
.nav-link:hover:not(.wjps-nav-button):not(.tab-link):not(.wjps-tabs) {
  color: var(--nav-text-color-hover) !important;
  background-color: var(--alt-mode);
}
/* .dropdown-menu{
      background-color: var(--alt-mode);
    } */
.dropdown-item:hover {
  background-color: var(--alt-mode);
  color: var(--main-color);
}
.wjps-toggler {
  color: var(--nav-text-color) !important;
}
.wjps-toggler > i {
  font-size: 30px;
}

.btn-outline-light:not(:disabled):not(.disabled).active,
.btn-outline-light:not(:disabled):not(.disabled):active,
.show > .btn-outline-light.dropdown-toggle {
  background-color: var(--alt-mode);
  border-color: var(--alt-mode);
}

.btn-outline-light:hover {
  color: var(--main-color) !important;
  background-color: var(--alt-mode);
  border-color: var(--nav-text-color);
}

.btn-outline-light {
  border-color: var(--nav-text-color);
}

.btn-outline-light.nav-link {
  color: var(--nav-text-color) !important;
}

.btn-outline-light.nav-link:hover {
  color: var(--main-color) !important;
}

.social-link:hover {
  color: var(--alt-mode);
}

/* --End of Navigation Styles-- */

/* --General Styles-- */
a:link:not(.btn, .dropdown-item) {
  color: var(--standard-link-color);
}
a:visited:not(.btn, .dropdown-item) {
  color: var(--standard-link-color);
}
.wrap-title {
  background-color: var(--heading-bg-color);
  color: var(--heading-text-color);
  border-width: var(--heading-border-width);
  border-color: var(--heading-border-color);
}
@media only screen and (max-width: 768px) {
  .col-12 {
    display: unset;
  }
}

.btn-secondary {
  background: var(--alt-mode);
  border-color: var(--alt-mode);
}

.btn-secondary:hover {
  background: var(--alt-color-dark);
  border-color: var(--alt-color-dark);
}

.cardBox .card-header {
  background: #e1f5fe;
}
/* --End of General Styles-- */

/* --CKEditor Styles -- */
.plupload_add {
  padding: 6px !important;
  background: var(--standard-link-color) !important;
  cursor: pointer !important;
  color: var(--alt-color-light) !important;
}
.plupload_add:hover {
  background: var(--alt-color-dark) !important;
  color: var(--alt-color-light) !important;
}

/* --End of CKEditor Styles -- */

/* --Footer Styles-- */
html {
  background-color: var(--footer-bg);
}
footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 3px solid #90caf9;
}
footer a,
footer i {
  color: #e1f5fe !important;
}
.social-link {
  color: var(--footer-text) !important;
}

.social-link:hover {
  color: var(--alt-mode) !important;
}

footer p {
  color: #fff;
}

.navbar {
  padding: 1.2rem 1rem;
}

.footer-logo g {
  fill: #fff !important;
}
/* --End of Footer Styles-- */
.second-logo-nav {
  height: 120px;
  background: var(--main-color);
}