:root {
    /* -- Variables -- */
    /* --Colours-- */
    --main-color: #fff; /* Sets the main colour to use throughout the system. */
    --alt-color-dark: #7B1FA2; /* Dark colour to complement the main colour. */
    --alt-color-light: #ecf0f1; /* Light colour to complement the main colour. */
    --alt-mode: #8E24AA; /* 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: #FFEB3B;
    --nav-text-color-hover: var(--alt-color-dark);
  
    --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-color-dark);
    --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: #7B1FA2;
  }
  .navbar-brand img {
    max-height: 70px !important;
  }
  
  .nav-link {
    border-radius: 0.25rem;
    transition: background var(--transition-time);
    font-weight: 600;
  }
  .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(--nav-text-color);
  }
  /* .dropdown-menu{
        background-color: var(--alt-mode);
      } */
  .dropdown-item:hover {
    background-color: var(--nav-text-color);
    color: var(--alt-mode);
  }
  .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(--nav-text-color);
    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(--alt-mode) !important;
  }
  
  .social-link:hover {
    color: #FFEE58;
  }
  
  /* --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: var(--nav-text-color) !important;
  }


  footer a:hover {
        color: #FFF59D !important;
  }

  .social-link {
    color: var(--footer-text) !important;
  }
  
  .social-link:hover {
    color: #FFF59D !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);
  }