:root{
	--customColor_I: 	#272643; /* Dark blue*/
	--customColor_II:	#FFFFFF; /* White*/
	--customColor_III:	#E3F6F5; /* Light siel */
	--customColor_IV:	#BAE8E8; /* Siel*/
	--customColor_V:	#2C698D; /* Light blue - RAF*/
	--customColor_VI:	#255774; /* Light blue - RAF hover*/
}
html body{
	width:100%;
	height: 100%;
    font-family: Arial, sans-serif;
}
td {
  vertical-align: middle;
}

main{
	color:				var(--customColor_I);
	background-color:	var(--customColor_II);
	min-height:630px;
	height:				75vh;
	width: 70vw;
	
}

/* REQUIRED for sticky headers */
.table {
    border-collapse: separate;   /* critical */
    border-spacing: 0;
}
.table thead th {
    position:			sticky;
	top:				0; /* critical */
	color:				var(--customColor_III);
    background-color:	var(--customColor_V); /* must not be transparent */
    z-index:			10;
}
.table thead tr:nth-child(1) th {
    top:		0;
    z-index:	20;
}
.table thead tr:nth-child(2) th {
    top:		32px;   /* adjust to match row height */
    z-index:	15;
}

.table-wrapper{
	background-color:	var(--customColor_II);
	max-height:			70vh;
	overflow:			auto;
}

.btn-style{
	color:				var(--customColor_III);
	background-color:	var(--customColor_V);
}
.btn-style:hover{
	color:				var(--customColor_III);
	background-color:	var(--customColor_VI);
}


.office-header{
	text-align:			center;
	color:				var(--customColor_II);
	background-color:	var(--customColor_V);
	min-height:			20vh;
}
.office-main{
	
	color:				var(--customColor_I);
	background-color:	var(--customColor_II);
	height:				75vh;
}
.office-footer{
	text-align:			center;
	color:				var(--customColor_II);
	background-color:	var(--customColor_V);
	height:				5vh;
}
.office-sign{
	color:				var(--customColor_II);
	background-color:	var(--customColor_V);
}
.office-sign-flags{
	padding:			5px; 
}
.office-sign-flags img{
	height:				80px; 
	width:				150px;
}
.office-logo img{
	height:				16vh; 
}

#map {
	height: 100%;
	min-height:500px;
}
#canvas{
  width: 1000px;
  height:40px;
  background-color: trancparent;
}
.page-height{
	min-height:700;
}

.navbar-nav li a{
	color:				var(--customColor_III);
}
.vert-middle{
	display:			flex; 
	align-items:		center;	/* verical inside */
		/* horizontal centering */
}
header{
	text-align:			center;
	color:				var(--customColor_II);
	background-color:	var(--customColor_I);
	height:				20vh;
}
.logo{
	height:				18vh;
	margin-top:			1vh;
}
.title{
	font-size: 			5vh;
	font-family: 		Arial;
	text-align:			center;
	color:				var(--customColor_II);
}
.subtitle{
	font-size: 			3vh;
	font-family: 		Arial;
	text-align:			center;
	color:				var(--customColor_II);
}

footer{
	color:				var(--customColor_II);
	background-color:	var(--customColor_I);
	height:				5vh;
}
.menu{
	background-color:	var(--customColor_V);
}

.copyright {
	padding: 			10px;
	font-size: 			10px;
	text-align:			center;
	color:				var(--customColor_III);
	background-color:	var(--customColor_V);
}
.text-center {
	text-align: center !important; 
}

.dbox {
	width: 100%;
	margin-bottom: 25px;
	padding: 0 20px; }
@media (min-width: 768px) {
.dbox {
	margin-bottom: 0;
	padding: 0; } }
.dbox p {
	margin-bottom: 0; }
.dbox p span {
	font-weight: 500;
	color: #000; }
.dbox p a {
	color: #2553b8; }
.dbox .icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--customColor_V);
	margin: 0 auto;
	margin-bottom: 20px; }
.dbox .icon span {
	font-size: 20px;
	color: var(--customColor_III); }
.dbox .text {
	width: 100%; }

.d-flex {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important; }
	
.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}