﻿
a.navbar-brand {
	white-space: normal;
	text-align: center;
	word-break: break-all;
}

:root {
	--site-colour: #013e80;
}

.site-colour {
	background-color: var(--site-colour) !important;
   
}



.text-muted {
	color: var(--site-colour) !important;
}

.card-header {
	color: var(--site-colour) !important;
}


/* CSS Method for adding Font Awesome Chevron Icons */
.card-header-toggle:after {
	/* symbol for "opening" panels */
	font-family: "Font Awesome 5 Free";
	content: "\f077";
	float: right;
	color: inherit;
	font-weight: 900;
}

.card-header.collapsed .card-header-toggle:after {
	/* symbol for "collapsed" panels */
	content: "\f078";
}

.e-reset-grid:before {
	content: "\e7a2";
}

.e-grid-show-col-widths:before {
	content: "\e78d";

}

.e-grid-paging-toggle:before {
	content: "\e77c";
}



.e-grid-auto-col-widths:before {
	content: "\e74a";
}

.e-grid-show-all-cols:before {
	content: "\e7de";
}


.e-trash:before {
	content: "\e820";
}

/*.btn-primary {
	background-color: var(--site-colour) !important;
}

.btn-outline-primary {
	color: var(--site-colour) !important;
	border-color: var(--site-colour) !important;
}*/

.cursor-pointer {
	cursor: pointer;
}


html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

a,
a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}


/*html {
	position: relative;
	min-height: 100%;
}*/

body {
	height: 100%;
	margin: 0;
	display: flex;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	white-space: nowrap;
	height: 60px;
	line-height: 58px;
}

/* Fixes dropdown menus placed on the right side */
/*.ml-auto .dropdown-menu {
	left: auto !important;
	right: 0px;
}
*/

/* Syncfusion Grid Bootstrap 4 styling
-------------------------------------------------- */

.e-grid .e-icon-ascending::before, .e-icon-descending::before {
	color: white !important;
}

.e-grid .e-icon-filter {
	color: white !important;
}


/* Syncfusion Grid Header Filter applied Icon */
.e-grid .e-icon-filter.e-filtered::before {
	content: "\e735" !important;
	color: white !important;
}

.e-grid .e-altrow {
	background-color: #fafafa !important;
}

.e-grid .e-gridcontent {
	cursor: pointer;
}

.e-grid .e-check {
	background-color: var(--site-colour) !important;
}

.e-grid .e-headertext {
	font-size: 14px;
	font-weight: 300;
}

.e-grid .e-headercell {
	background-color: var(--site-colour) !important;
	color: white !important;
}

.e-grid th.e-headercell[aria-sort='ascending'] .e-headertext,
.e-grid th.e-headercell[aria-sort='descending'] .e-headertext,
.e-grid th.e-headercell[aria-sort='ascending'] .e-sortfilterdiv,
.e-grid th.e-headercell[aria-sort='descending'] .e-sortfilterdiv {
	color: white !important;
	font-weight: bold;
	opacity: 1;
}

.e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check {
	font-size: 10px;
}

.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
	height: 20px;
	line-height: 20px;
	width: 20px;
}

.e-checkbox-wrapper.e-checkbox-disabled .e-frame, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame {
	border-color: #adb5bd !important;
	color: #6c757d !important;
}

.e-grid .e-check {
	background-color: #e9ecef !important;
	color: #6c757d !important
}

.e-toolbar .e-tbar-btn {
	background: #add8e6;
	border: 1px solid #5a70cc;
}


/*.e-toolbar .e-tbar-btn {
	border: 1px solid var(--site-colour) !important;
}*/

/* -------------------------------------------------- */

.sortable-chosen.sortable-ghost {
	opacity: 0;
}

.sortable-chosen {
	color: #fff;
	background-color: #f8f9fa;
}

.stepsListHandle, .routesTableHandle {
	color: lightslategray;
	cursor: move;
}

.text-blue {
	color: #195096;
}

.text-small {
	font-size: small;
}

.text-xsmall {
	font-size: x-small;
}

.bg-grey {
	background-color: #f8f9fa;
}

.stepsListActive {
	border-left: 4px solid #007bff !important;
	background-color: #f8f9fa;
}

#routesTable th, #choicesTable th {
	font-weight: normal !important;
}

.tokenfield .token {
	height: auto !important;
}

.text-lsg {
	color: lightslategray;
}

.step-list-nav .list-group-item {
	margin: 5px 0;
	font-weight: 600;
	font-size: small;
}

.alert-list-nav .list-group-item {
	font-weight: 500;
	font-size: small;
}

/*SIDEBAR*/


#sidebar-column {
	background-color: white;
}

#sidebar {
	color: #013e80;
	font-size: 16px;
}

	#sidebar ul li a {
		display: block;
		padding: 6px 12px;
	}

		#sidebar ul li a:hover {
			color: #2363a8;
			background: snow;
		}

	#sidebar ul li.active > a {
		border-left: 4px solid #fcfcfc;
		background-color: snow;
	}



	#sidebar ul li [aria-expanded="false"]:after {
		content: "\f105";
	}

	#sidebar ul li [aria-expanded="true"]:after {
		content: "\f107";
	}


	#sidebar ul li .dropdown-toggle:after {
		border: none;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		float: right !important;
	}


	#sidebar ul .submenu {
		font-size: 14px;
		padding: 0;
		margin: 0;
		margin-left: 25px;
	}

/* -------------------------------------------------- */

a[aria-expanded=true].expander .fa-chevron-right {
	display: none;
}

a[aria-expanded=false].expander .fa-chevron-down {
	display: none;
}

.protocol-tag {
	color: #495057;
	border: 1px solid #d9d9d9;
	background-color: #ededed;
	border-radius: 3px;
	white-space: nowrap;
	font-size: small;
	padding: 3px;
}

.font-weight-500 {
	font-weight: 500 !important;
}

.highlight {
	background-color: #FEFFAB;
	padding: 0.2em;
}

#data-table tbody tr {
	cursor: pointer
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.form-control.is-invalid {
	background-image: none;
}

.h-99 {
	height: 99% !important
}

.h-98 {
	height: 98% !important
}

.h-97 {
	height: 97% !important
}

.h-96 {
	height: 96% !important
}

.h-95 {
	height: 95% !important
}

.h-94 {
	height: 94% !important
}

.h-93 {
	height: 93% !important
}

.h-92 {
	height: 92% !important
}

.h-91 {
	height: 91% !important
}

.h-90 {
	height: 90% !important
}

.h-85 {
	height: 85% !important
}

.h-80 {
	height: 80% !important
}


/* -------------------------------------------------- */

.lpad0 {
	padding-left: 0
}

.rpad0 {
	padding-right: 0
}

.tpad0 {
	padding-top: 0
}

.bpad0 {
	padding-bottom: 0
}

.lpad1 {
	padding-left: 1em
}

.rpad1 {
	padding-right: 1em
}

.tpad1 {
	padding-top: 1em
}

.bpad1 {
	padding-bottom: 1em
}

/* -------------------------------------------------- */

.lpad0 {
	padding-left: 0
}

.rpad0 {
	padding-right: 0
}

.topPad0 {
	padding-top: 0
}

.topPad1 {
	padding-top: 1em
}

.botPad0 {
	padding-bottom: 0
}

.botPad1 {
	padding-bottom: 1em
}

.flagBorder {
	border: 1px solid;
	padding: 1px;
	box-shadow: 5px 10px 18px #888888;
}

/*Sidebar show/hide on smaller screens*/
.col-fixed {
	position: relative;
	min-height: 1px;


	float: left;
	min-width: 250px;
	max-width: 250px;
	transition: margin 0.25s ease-out;
}

.col-fluid {
	position: relative;
	left: 15rem;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	width: calc(100% - 15rem);
	transition: left 0.25s ease-out;
}

.col-fixed-toggled {
	position: relative;
	min-height: 1px;

	float: left;
	min-width: 250px;
	max-width: 250px;
	transition: margin 0.25s ease-out;
}

.col-fluid-toggled {
	position: relative;
	left: 15rem;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	width: calc(100% - 15rem);
	transition: left 0.25s ease-out;
}

@media (min-width: 768px) {
	#showMenu {
		display :none;
	}

	#navbar-text-collapsed {
		display:none;
	}
}

#img-collapsed {
	overflow: hidden;
	transition: transform .25s ease-in-out;
}

@media (max-width: 768px) {
	.col-fixed {
		margin-left: -20rem;
	}

	.col-fluid {
		left: 0;
		width: 100%;
	}

	.navbar-brand {
		display:none;
	}

	#navbar-text-collapsed {
		display: inline-block;
		color: white;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-size: 1.25rem;
	}

	#img-collapsed {
		transform: rotate(-90deg);
	}
}

.textarea-autosize {
	overflow: auto; 
	field-sizing: content; 
	white-space: nowrap; 
	width: 100%; 
	font-family: 'Courier New', monospace;
}
.rounded-card {
	-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.68);
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.68);
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.scrollable-element {
	scrollbar-width: thin;
}

#style-16::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
}

.scrollbar {
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.floating-footer-Admin {
	position: fixed;
	bottom: 0;
	left: 233px;
	right: 0;
	padding-left: 15px;
	padding-top: 10px;
	height: 60px;
	background: #FFFFFF;
	z-index: 999;
	box-shadow: 0 3px 15px rgba(0,0,0,0.16), 0 3px 15px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
	.floating-footer-Admin {
		left: 0;
		padding-left: 40px;
	}
}

.floating-footer-CAC {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-left: 3rem;
	padding-top: 10px;
	height: 60px;
	background: #FFFFFF;
	z-index: 999;
	box-shadow: 0 3px 15px rgba(0,0,0,0.16), 0 3px 15px rgba(0,0,0,0.25);
}

.floating-footer-NPR {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-left: 16rem;
	padding-top: 8px;
	height: 60px;
	background: #FFFFFF;
	z-index: 999;
	box-shadow: 0 3px 15px rgba(0,0,0,0.16), 0 3px 15px rgba(0,0,0,0.25);
}


.modal-header.danger {
	color: white;
	background-color: red;
	border-color: #337ab7;
}

.modal-header.site {
	color: white;
	background-color: var(--site-colour);
	border-color: #337ab7;
}

.toast {
	opacity: 1 !important;
}