@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;500;700&display=swap');

/*****************************************************************************/
/*****************************************************************************/
/************** start legacy app.css *****************************************/
/* 
  This file should be the same in all themes, containing the Agylia styling 
  changes that are different from app.css in the base project, it is not and
  should not be subject to changed based on a tennant preference, this file
  or a similar version should be moved to `custom.css` in the base project.

  Most of the changed in this file can/will be made in markup as/when the
  oppertunity is available to do so with minimal impact on existing themes.
*/
html {
  background-color: #fff;
}

/* Remove reserved width for menu logo (fix in markup? i.e. not use this class) */
.app-aside, .navbar-header {
  width: inherit;
}

/* Ensure a background effect is NOT applied to the menus (fix in markup) */
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: inherit;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: inherit;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: inherit !important;
}


/* Ensure logo doesnt overflow (fix in markup) */
.signin-panel .brand.item img,
.forgot-panel .brand.item img,
.signup-panel .brand.item img,
.scope-panel .brand.item img,
.thanks-panel .brand.item img,
.recover-panel .brand.item img,
.verify-panel .brand.item img {
  width: 100%;
}
/* Ensure we ignore the text-white class in the markup (fix in markup) */
.signin-panel .text-white { color: inherit; }
.signin-panel a.text-white {color: #423a61;}
.signin-panel a.text-white:hover {color: #fbc147;}

/* Hide the first menu bar item i.e. Home (fix in markup) */
.navbar .nav:first-child{
  display: none;
}

/* Ensure menue does not containe additional avatar section (fix in markup) */
.navbar ul.navbar-right > li:last-child ul.dropdown-menu > li.bg-light {
  display:none;
}
/**************** end legacy app.css *****************************************/
/*****************************************************************************/
/*****************************************************************************/

/* This file is what we aim to dynamicaly build based on desired theme */
/* -- Primary action colour -- */
/* 
   dk      bg      lt
#5a4daa #7266ba #8C80D4 (default)
#008c95 #009ca6 #33b0b8 (civica)
*/

/*

    primary colour: #423a61
    primary button colour: #fbc147
    primary button highlight colour: #423a61
    primary link colour: #b1cbe2
    primary link highlight colour: #423a61

    */

body {
  font-family: 'Titillium Web', sans-serif;
}

/* colours */
.nav  > li > a {
  color: #222221;
}
.nav  > li > a:hover,
.nav  > li > a:focus {
  color: #d3742d;
}

a {
  color: #222221;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
a:focus {
  color: #d3742d; /* darken 8% */
  text-decoration: none;
}

.btn-primary {
  color: #fff !important;
  background-color: #d3742d;
  border-color: #d3742d;
}

.btn-primary:hover,
.btn-primary.hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.active.focus, 
.btn-primary.active:focus, 
.btn-primary.active:hover, 
.btn-primary:active.focus, 
.btn-primary:active:focus, 
.btn-primary:active:hover,
.open .dropdown-toggle.btn-primary {
  color: #fff !important;
  background-color: #222221;
  border-color: #222221; 
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled.hover,
.btn-primary[disabled].hover,
fieldset[disabled] .btn-primary.hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active,
.btn-primary.disabled:visited,
.btn-primary[disabled]:visited,
fieldset[disabled] .btn-primary:visited,
.btn-primary.disabled.visited,
.btn-primary[disabled].visited,
fieldset[disabled] .btn-primary.visited {
  background-color: #d3742d;
  border-color: #d3742d;
}

.bg-primary {
  background-color: #d3742d;
  color: #fff;
}

#site-footer a,
.bg-primary a {
  color: #ffffff;
}
.bg-primary a:hover {
  color: #fff;
}

.bg-white a {
  color: #222221;
}
.bg-white a:hover {
  color: #d3742d; /* darken 5% */
}

#site-footer a:hover,
a.bg-light:hover {
  color: #d3742d;
}

a.bg-primary:hover {
  background-color: #423a61; /* darken 5% */
}
a.text-primary:hover {
  color: #423a61; /* darken 5% */
}

.text-primary {
  color: #222221;
}

.bg-primary.dker,
.bg-primary .dker{
	background-color: #161320; /* plus 15% */
}

.bg-primary.lter,
.bg-primary .lter{
	background-color: #6c609f; /* minus 10% */
}

.stroke-primary {
	stroke: #d3742d;
}

.stroke-primary.dker,
.stroke-primary .dker {
	stroke: #161320;  /* plus 15% */
}

.stroke-primary.lter,
.stroke-primary .lter {
	stroke: #6c609f;  /* minus 10% */
}

.fill-primary {
	fill: #d3742d; 
}

.fill-primary.dker,
.fill-primary .dker {
	fill: #161320; /* plus 15% */
}

.fill-primary.lter,
.fill-primary .lter {
	fill: #6c609f; /* minus 10% */
}

.rounded {
  border-radius: 500px;
}

/* -- Dropdown menu link colour -- */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #d3742d; /* darken 5% */
}

#calendar-header-nav,
#catalogue-header-nav {
  display: none;
}

.bg-dark{
  background-color: #000000;
  color: #ffffff;
}

.app-public-access-signin,
.app-public-access-forgot,
.app-public-access-signup,
.app-public-access-recover,
.app-public-access-thanks,
.app-public-access-scope,
.app-public-access-verify {
  background-image: url(/content/assets/bg-1.png);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.signin-panel,
.signup-panel,
.forgot-panel,
.recover-panel,
.thanks-panel,
.scope-panel,
.verify-panel {
  background-color: #ffffff;
}