/*-------------- CA !M LOGO ----------------
Make Logo responsive to device screen sizes:
Same as img-responsive | just conditioned to
tablet and mobile devices: < 768px
*/

#caNav {
	border:0;
	height:56px;
}
#caNav .navbar-brand{
	padding: 0;
	height:100%;
	display:flex;
	flex-wrap: nowrap;
	flex-direction: row;
}

#caNav .navbar-brand img {
	/*display: inline-block;*/
	position: relative;
	max-height:100%;
}
#caNav #imgCaLogo1-mobile{
	display:none;
}
@media screen and (max-width:1020px){
	#caNav .navbar-brand.clsSmall #imgCaLogo1-mobile {
		display:block;
		border-radius:5px;
	}
	#caNav .navbar-brand.clsSmall #imgCaLogo1 {
		display:none;
	}
	#caNav .navbar-brand.clsSmall #imgCaLogo2 {
		display:none;
	}
	#caNav .navbar-brand.clsSmall #imgNavbarRight{
		left: -7px !important;
		height: 54px;
	}
}
@media screen and (max-width:768px){
	#caNav{
		height:auto !important;
	}
	#caNav .navbar-brand{
		height:auto;
	}
}



/*-------------- NAVIGATION --------------*/
#caNav span.icon-bar{
	background-color:white;
}
#caNav.navbar{
  	border-radius: 5px;
	background-color: #006699;
}
#caNav.navbar .dropdown-menu{
	background-color: #006699;
}
#caNav.navbar,
#caNav.navbar ul > li > a,
#caNav.navbar .dropdown-menu,
#caNav.navbar .dropdown-menu > li > a{
	color: white;
}
/* top level */
#caNav .navbar-nav > li > a{	/*#caNav .navbar-nav.navbar-right*/
/*margin-left: 16px;
	margin-right: 16px;*/
	border-bottom: 4px solid transparent;
	text-transform: uppercase;
}
#caNav .navbar-nav > li.open > a,
#caNav .navbar-nav > li > a:focus,
#caNav .navbar-nav > li > a:hover{
	color: #ff6600;
	border-bottom: 4px solid #ff6600;
	background-color: transparent;
}

#caNav .dropdown-menu > .active > a,
#caNav .dropdown-menu > .active > a:hover,
#caNav .dropdown-menu > .active > a:focus,
#caNav .dropdown-menu > li > a:hover,
#caNav .dropdown-menu > li > a:focus {
	color: black;
	background-color: #ff6600;
}

/* cursor fix for a tags without hrefs on the menu */
#caNav.navbar ul > li > .dropdown-toggle{
   user-select:none;
}

/*-------------- SEARCH-BAR --------------*/
.banner {
  background: #fff;
  font-family: Lato, sans-serif;
}
.navbar-nav-primary {
  text-transform: uppercase;
}


.navbar-form-search {
  position: absolute;
  display:flex;
  flex-direction:row-reverse;
  flex-wrap:nowrap;
  max-height:56px;
  right:220px;
}

.navbar-form-search .form-control {
  width: 250px;
}
.navbar-form-search .btn {
  border: 0;
  background: transparent;
  font-size: 18px;
}
.navbar-form-search, .navbar-form-search .btn:hover, .navbar-form-search .btn:focus {
  color:  #ff6600;
  outline: none;
  box-shadow: none;
}
.navbar-form-search .btn{
	color: white;
}
.navbar-form-search .search-form-container {
  text-align: right;
  flex-shrink:1;
  width:300px;
  flex-basis:300px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 9;
  background: #006699;
}
.navbar-form-search .search-form-container.zero-width {
  flex-basis: 0;
  width:0;
  /*order:1;*/
}
.navbar-form-search .search-form-container .search-input-group {
  /*width: 300px;*/
  display:flex;
  flex-wrap: nowrap;
}
#edtSearch{
	color: #ff6600;
	font-style: italic;
}
#edtSearch:focus {
  border-color: #ff6600 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

@media screen and (max-width: 767px){
	.navbar-form-search {
		position: relative;
		right:auto;
		flex-direction: row;
		margin-top:0px !important;
	}
	.navbar-form-search .search-form-container{
		flex-basis:100% !important;
	}
	.navbar-form-search .search-form-container .form-group,
	.navbar-form-search .search-form-container .form-group input{
		width:100%;
	}

	.navbar-form-search .search-form-container .search-input-group {
		flex-direction: row-reverse;
	}
	.navbar-form-search #btnHideSearch,
	.navbar-form-search #btnShowSearch{
		display:none;
	}
}

/*------------ PAGE BANNERS -----------*/
.ca-banner{
	margin:0 auto;
}

/*-------------- THUMBNAILS ----------------
Home screen - Services Grid ( 9 blocks )
*/
div.thumbnail img{
	height: 200px;
	width: 200px;
	user-select:none;
}
div.thumbnail.srvGrd:hover{
	animation-name: pulse;
	animation-duration: 1s;
	border-color: #006699;
	cursor: pointer;
}
.caption h3, .caption p, #getInTouch{
	text-align: center;
	user-select:none;
}
/*Equal heights for thumbnails*/
.col-container {
	display: table;
	width: 100%;
	height: 420px;	/*bodge to fix equal height*/
}
.col {
	display: flex;
	padding: 16px;
}
.col p {
	margin-bottom: 0;
}
/*Show one per row - Mobile only*/
@media only screen and (max-width: 600px) {
	.col {
		display: block;
		width: 100%;
	}
}

/*-------------- MODALS/dlg --------------*/
.modal-header {
	background-color: #aed3e2;
}
.modal-title {
	font-weight: bold;
}
/* these styles vertically centre dialogs in browser */
body.modal-open .modal.in {
	display: flex !important;
	align-items: center;
}
@media only screen and (max-width: 768px) {
	body.modal-open .modal.in {
		align-items: flex-start;
	}
}

/**/

/* stop resize grip on textarea controls within modal-dialogs */
.modal-dialog textarea {
    resize: none;
}
/**/

/* set good width for buttons */
.modal-footer button, .modal-footer input[type="button"] {
  min-width: 100px;
}

.modal-header button::after {
	content: '\2716' !important;
}

/* set cursor to moveable when over header */
.modal-dialog.moveable .modal-header{
	cursor: default;
	/*cursor: move;*/
}

/*-------------- OPTION BOX ----------------
Home screen - Blue & Orng box with animations
*/
#userOptBox{
	border-radius: 10px;
	text-align: center;
	background-color: #006699; /*#3eb489;|Mint Green - #004466|Darker CA blue*/
	margin:0 15px;
}
#userOptBox > div.blueBox{
	width: 100%;
	background-color: #006699; /*#3eb489;|Mint Green - #004466|Darker CA blue*/
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/*Animation on hover*/
#makePaymentOpt:hover, #logQueryOpt:hover, #ClientWebOpt:hover{
	/*animation-name: pulse;*/
	/*animation-duration: 1s;*/
	/*animation-iteration-count: infinite;*/
	overflow-x: hidden;
}
#userOptBox a{
	text-decoration: none;
}
#userOptBox h3 {
	font-weight: bold;
	color: #ff6600;
}
#userOptBox span{
	margin-top: 25px;
}
#userOptBox  div.orngBox{
	background-color: #ff6600;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#userOptBox  div.orngBox  p{
	color: black;
	margin-top: 10px;
	font-size:medium;
	text-align:center;
}
@keyframes bump {		/* Firefox 16+, IE 10+ */
  0% {top: 0;}
  5% {top: 6px;}
  10% {top:0;}
  100% {top:0;}
}
@-o-keyframes bump {	/* Opera 12-15  */
  0% {top: 0;}
  5% {top: 6px;}
  10% {top:0;}
  100% {top:0;}
}
@-webkit-keyframes bump {	/* Safari 4+, Chrome  */
  0% {top: 0;}
  5% {top: 6px;}
  10% {top:0;}
  100% {top:0;}
}
@-moz-keyframes bump {	/* Firefox 5-16  */
  0% {top: 0;}
  5% {top: 6px;}
  10% {top:0;}
  100% {top:0;}
}
#makePaymentOpt > a > span {
	-webkit-animation: bump 5s linear 2.0s infinite normal;
	-moz-animation: bump 5s linear 2.0s infinite normal;
	-o-animation: bump 5s linear 2.0s infinite normal;
	animation: bump 5s linear 2.0s infinite normal;
}
#logQueryOpt > a > span {
	-webkit-animation: bump 5s linear 2.5s infinite normal;
	-moz-animation: bump 5s linear 2.5s infinite normal;
	-o-animation: bump 5s linear 2.5s infinite normal;
	animation: bump 5s linear 2.5s infinite normal;
}
#ClientWebOpt > a > span {
	-webkit-animation: bump 5s linear 3.0s infinite normal;
	-moz-animation: bump 5s linear 3.0s infinite normal;
	-o-animation: bump 5s linear 3.0s infinite normal;
	animation: bump 5s linear 3.0s infinite normal;
}
#makePaymentOpt > a, #logQueryOpt > a, #ClientWebOpt > a{
	color: #343434;	/*VERY DARK GREY*/
}
#makePaymentOpt a,
#logQueryOpt a,
#ClientWebOpt a {
	display: inline-block;
}
/*-------------- BODY FLEXBOX ------------*/
html,body{
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}
html{ min-height: 100% }
body {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	height:100px;
	min-height: 100vh;
}


/*-------------- MAIN CONTAINER -----------*/

#divMain {
	padding: 0 15px;
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: auto;
}

/*-------------- BCK TO TOP --------------*/
#bckToTop {
  display: none;
  height:50px;
  width:50px;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #005581;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 25px;
	opacity: .5;
}
#bckToTop:hover{
	opacity: 1;
}

/*-----------SERVICES QUICK LINKS----------*/
#divQuickLinks{
	background-color: #006699;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	display: none;
}
#divQuickLinks a{
	text-decoration: none;
	font-size: 14px;
	margin: 5px 10px;
	display: block;
	color: white;
}
#divQuickLinks a:not(:hover){
	border-bottom: 3px solid transparent;
}
#divQuickLinks a:hover{
	border-bottom: 3px solid #ff6600;
}

/*---------------- FOOTER ----------------*/
#Footer{
	margin-top:15px;
	user-select:none;
	padding: 0 15px;
	background-color: #e7e7e7;
}
#Footer hr{
	border-color: black;
	padding: 1px;
}
#Footer .column hr {
	border-color: #a8a8a8;
	margin: 0.25em 0 1em 0;
}
#Footer h4 {
	color: #005581;
	font-weight: bold;
	display: inline-block;
}
#Footer p{
	color: black;
}
#Footer li, #Footer li a{
	color: black;
	/*list-style-type:none;*/ /*Remove bullet points*/
}
#Footer #Accr{
	font-weight:bold;
	color: #005581;
	text-align:center;
}
#Footer .final {
	margin-top: 0.1em;
	color: white;
	background-color: #3C3C3C;
	font-size: medium;
	text-align: center;
	padding: 1em;
}
/*Accreditations*/
#accrImgs img{
	margin-left: 15px;
	margin-top: 5px;
}
#accrImgs img:not(:first-child){
	margin-left:15px;
}

/*--------------- HEADINGS ---------------*/
.Subtitle{
	color: #005581;	/*CA BLUE | #005581*/
	font-weight: bold;
	font-size: 2em;
	border-bottom: 1px solid #eaeaea;
}
.Intro{
	color: #ff6600;
	font-weight:bold;
}
.subheading {
	font-weight: bold;
	color: black;	/*Sea green | #066F6F*/
	font-size: 16px;
	/*text-decoration: underline;*/
}
.orngSubheading{
	font-weight: bold;
	color: #ff6600;	/*Sea green | #066F6F - old CA orange = ff8c00*/
	font-size: 16px;
}

/*--------------- COLOUR'S ---------------*/
.ca-pri-txt{
	color: #006699;	/*New CA blue*/
}
.ca-pri-bckg{
	background-color: #006699;	/*New CA - very dark blue*/
}
.ca-sec-txt{
	color: #ff6600;	/*New CA orng*/
}
.ca-sec-bckg{
	background-color: #ff6600; /*New CA orng*/
}
/**/
ca-pri-2-txt{
	color: #000033;
}
ca-pri-2-bckg{
	background-color: #00033;
}
/**/
.ident-txt{
	color: #CC00CC;
}
.ident-bckg{
	background-color: #CC00CC;
}

/*----------------- MISC -------------------
Most to least frequently used
*/
.btnCA{
	background-color: #006699;	/*OLD = 004466*/
	border-color: #006699;
	color: white;
}
.btnCA:hover{
	color: #ff6600;
}

.btn-wide{
	width: 10em;
}
.btn-wider{
	width: 75%;
}
.breaker{
	margin-top: 15px;
}
.full-width{
	width: 100%;
}

textarea {
	resize: none;
}

/*
body{
  font-family: Verdana, Arial, sans-serif;
}
*/


/*-------------- MEDIA QRYS --------------*/
/* -------- Tablet --------*/
@media (max-width: 768px) {
  .btn {
    font-size:16px;
    padding:4px 6px;
  }
}
@media (max-width: 768px) {
	#userOptBox span.fa-stack{
		font-size: 2em;
	}
}
@media (max-width: 768px) {
	#userOptBox h3{
		font-size: 1.25em;
	}
}
@media (max-width: 768px) {
	#userOptBox > div.orngBox > p{
		font-size: smaller;
	}
}
@media (max-width: 768px) {
  div.thubmnail > h3 {
    font-size: 1em;
  }
}
/* -------- Mobile --------*/
@media (max-width: 414px) {
	#userOptBox span.fa-stack{
		font-size: 2em;
	}
}
@media (max-width: 414px) {
	#userOptBox h3{
		font-size: 1.25em;
	}
}
@media (max-width: 414px) {
	#userOptBox span.fa-stack{
		font-size: 2em;
	}
}
@media (max-width: 414px) {
	#userOptBox > div.orngBox > p{
		font-size: smaller;
	}
}
/* ------ custom file prefixed with browse button and optional trailing clear button ----------*/
.custom_file input[type="file"] {
	position: absolute;
  opacity: 0;		/* purposely not display: none so custom validity works */
}
.custom_file input[type="text"][readonly] {	/* override bootstrap */
	background-color: white;
}
/* ******************** html5 validation/max-length-indicators ********************* */
/* little red dot indicating invalid */
.form-control.invalid,	/* manual class add/remove to indicate invalid */
.form-control:invalid,
.form-vertical label.upload > input[type="file"]:invalid + span,
.form-horizontal label.upload > input[type="file"]:invalid + span,
.custom_file input[type="file"]:invalid + input[type="text"][readonly],
select.form-control:invalid+.chosen-container>a,
select.form-control:invalid+.select2{
	/* small red dot */
	background-image: linear-gradient(0deg, red, red) !important;	/* invalid is more important than maxlength indicator */
	background-size: 0.35em 0.35em !important;
	background-position: top 3px left 3px !important;
	background-repeat: no-repeat;
}

/* display maxlength as line inside input (these should be the same as the sMaxLenSelector in the .js) */
input[type="text"][maxlength]:valid:focus,
input[type="tel"][maxlength]:valid:focus,
input[type="email"][maxlength]:valid:focus,
input[type="url"][maxlength]:valid:focus,
input[type="password"][maxlength]:valid:focus,
textarea[maxlength]:valid:focus{
	background-image: linear-gradient(0deg, cornflowerblue, cornflowerblue);
	background-size: 0 2px;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* debug ; missing type or maxlength attribute */
/*
input.form-control:not([type]),
input[type="text"]:not([readonly]):not([maxlength]):not(.chosen-search-input),
input[type="search"]:not([readonly]):not([maxlength]):not(.select2-search__field),
input[type="tel"]:not([readonly]):not([maxlength]),
input[type="email"]:not([readonly]):not([maxlength]),
input[type="url"]:not([readonly]):not([maxlength]),
input[type="password"]:not([readonly]):not([maxlength]),
input[type="number"]:not([readonly]):not([min]),
input[type="number"]:not([readonly]):not([max]),
textarea:not([readonly]):not([maxlength]){
  background-color: red;
}
*/

/* hide step buttons when step="0" */
input.no-step,
input[step="0"] {
	-moz-appearance: textfield;
}
input.no-step::-webkit-inner-spin-button,
input[step="0"]::-webkit-inner-spin-button,
input.no-step::-webkit-outer-spin-button,
input[step="0"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.caInternalOnly{
	outline: 2px dashed #6a3bbe7a;
}
.caInternalOnly.form-control{
	outline: 0;
	border: 2px dashed #6a3bbe7a;
}
.caInternalOnly.well{
	background-color:white;
	border:0;
}
.btn.caInternalOnly{
	background-color:#6a3bbe;
	border-color:#6a3bbe;
}
a.caInternalOnly:hover,
a.caInternalOnly:active,
a.caInternalOnly:focus,
a.caInternalOnly:visited{
	outline: 2px dashed #6a3bbe7a;
	outline-offset:0px;
}
option.caInternalOnly{
	background-color:#9d79e1;
}