:root { /* -- Variables -- */
    /* --Colours-- */
    --main-color: #f4faf6; /* 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: #72c783; /* 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: #414743;
    --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: #f4faf6;
    --footer-text: var(--nav-text-color);
    --footer-links: var(--alt-mode);
    --transition-time: 0.25s; /* General animation length. */
  }
  
  /* --Navigation Styles-- */
    .wjps-nav{
      background-color: var(--main-color);
      border-bottom: 2px solid #e7ede9;
    }
    .navbar-brand img {
      max-height: 55px !important;
    }

    .nav-link{
      border-radius: .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: #63AD72;
    border-color: #63AD72;
  }

  .btn-secondary:hover {
    background: #4D8759;
    border-color: #4D8759;
  }
  /* --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: 2px solid #e7ede9;
    }
    #footer a {
      color: var(--footer-links);
  }
    .social-link{
      color: var(--footer-text)!important;
    }
    
    .social-link:hover{
      color: var(--alt-mode)!important;
    }


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