:root {
    --col-header: #5E697E;               /* Base blue-grey */
    --col-header-text: #E7ECF5;          /* Very light cool grey-blue */
    --col-header-text-hover: #FFFFFF;    /* Pure white for contrast */

    --col-background: #F2F4F7;           /* Light neutral background */

    --col-field-background-ro: #ECECEC;     /* White fields */
    --col-field-background: #FFFFFF;     /* White fields */
    --col-field-border: #D5D9E0;         /* Soft cool border */

    --col-field2-background: #E7EAF0;    /* Muted cool grey */
    --col-field2-border: #E7EAF0;

    --col-text: #2E333D;                 /* Deep blue-grey text */

    --col-buttons: #4A5466;              /* Darker shade of the base colour */

    --col-label-background: #D9DEE7;     /* Gentle grey-blue */
    --col-label-text: #3E4756;           /* Medium contrast grey-blue */

    --col-sidebar-background: #FFFFFF;   /* Clean sidebar */
}



body {
	background-color: var(--col-background);
	color: var(--col-text);
	position: relative;
	min-height: 100vh;
}


@supports(padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}

.navbar {
	background-color: var(--col-header) !important;
	min-height: 60px;
	color: var(--col-header-text) !important;
	margin-bottom: 30px;
	z-index: 1000;
	padding: 0;
}


.navbar-brand, .nav-link {
	color: var(--col-header-text) !important;
	margin-right: 0;
}


.navbar-brand img {
	height: 50px;
}


.navbar-expand-lg .navbar-toggler {
	display: block;
	border: 0;
	padding: 0;
	color: var(--col-header-text);
	box-shadow: none !important;
}


.navbar-toggler-icon {
  background-image: none; /* Remove default icon */
  width: 1.3em;
  height: 1.1em;
  position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--col-header-text);
  transition: 0.3s;
}

.navbar-toggler-icon:hover::before,
.navbar-toggler-icon:hover::after,
.navbar-toggler-icon:hover div {
  background-color: var(--col-header-text-hover);
}

.navbar-toggler-icon::before {
  top: 0;
}

.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}

.navbar-toggler-icon::after {
  bottom: 0;
}


.navbar-centre-logo {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -30%) !important;
}


.navbar-centre-logo img {
	height: 100px;
	border: 10px solid var(--col-header);
	border-radius: 100px;
}


.tile-page .card-cont-div {
	padding: 10px;
	min-width: 150px;
}


.tile-page .card-cont-div .card {
	border: 1px solid var(--col-field-border);
	border-radius: 10px;
	box-shadow: 2px 2px 4px var(--col-label-background);
	padding: 10px;
	display: block;
	cursor: pointer;
}

.tile-page .card-cont-div .card:hover {
	border: 1px solid var(--col-header);
}


.card .card-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: left;
}


.card .card-img {
	flex: 0 0 auto;
	width: 90%;
	max-width: 150px;
	height: auto;
	margin: 5px;
	vertical-align: middle;
}


.card .card-label {
	display: inline-block;
	font-weight: 700;
	color: var(--col-text); 
	line-height: 21px;
	font-size: 20px;
	margin: 5px;
	vertical-align: middle;
	min-width: 130px;
	flex: 1 1 130px;
}


.temp-message {
	text-align: center;
	color: var(--col-text); 
	font-style: italic;
}


.hidden {
	display: none !important;
}


.upper-case {
	text-transform: uppercase !important;
}


.anchor {
	cursor: pointer !important;
}

  
.doc-delicon, .pic-delicon
{ 
	background: url('../media/icons/ICONS_DELETE.png') no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	display: inline-block;
	background-color: rgba(12,60,136,1);
	border-radius: 13px;
	cursor: pointer;
	vertical-align: bottom;
}


.terms-of-use h2, .privacy-policy h2
{
	font-size: 1.3em;
	margin-top: 30px;
	margin-bottom: 20px;
}