@import "https://fonts.googleapis.com/css?family=Raleway";
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
	

.w90 {
    width: 90%;
}

#abcObsA {
	width: 100%;
	height: 100%;
	opacity: .95;
	top: 0;
	left: 0;
	display: none;
	position: fixed;
	background-color: transparent;
	/* transform: scale(2.5); */
	transform: scale(0.63);
}

.trafficStyle-container {
	position: absolute;
	bottom: 120px;
	left: 0;
	transform: scale(0.5);
    transform-origin: 0 100%;
}
#marineTraffic {
    height: 60vh;
    width: 45vw;
    min-width: 350px;
    margin: 5px 5px 5px 0;
}

@media (min-width: 576px) {
	.container {
    	max-width: none !important;
	}
}


@media all and (min-width: 3600px) {
	#abcOffline {
		width: 100%;
		height: 100%;
		opacity: .95;
		top: 0;
		left: 0;
		background-color: #313131;
		overflow: auto;
		background-color:transparent;
	}
				
	#abcObs {
		width: 100%;
		height: 100%;
		opacity: .95;
		top: 0;
		left: 0;
		display: none;
		position: fixed;
		overflow: auto;
		background-color:transparent;transform:scale(2.0);left:43%;top:17%
	}
}
   
   
@media screen and (max-width: 3600px) {
	#abcOffline {
		width: 100%;
		height: 100%;
		opacity: .95;
		top: 0;
		left: 0;
		background-color: #313131;
		overflow: auto;
		background-color:transparent;
	}
	
	#abcObs {
		width: 100%;
		height: 100%;
		opacity: .95;
		top: 0;
		left: 0;
		display: none;
		position: fixed;
		overflow: auto;
		background-color:transparent;transform:scale(2.0);left:43%;top:17%
	}
}
		
	
		@media all and (max-width: 1440px) and (max-height:900px) 
		{	
				#abcOffline {
					width: 100%;
					height: 100%;
					opacity: .95;
					top: 0;
					left: 0;
					background-color: #313131;
					overflow: auto;
					background-color:transparent;
				}
				
				
				#abcObs {
					width: 100%;
					height: 100%;
					opacity: .95;
					top: 0;
					left: 0;
					display: none;
					position: fixed;
					overflow: auto;
					background-color:transparent;transform:scale(2.0);left:43%;top:17%
				}

				#abcObsA {
					transform: scale(0.50);
				}
		}
		
		
		@media only screen and (min-width: 360px) and (max-width: 767px)
		{		
				#abcOffline {
					width: 100%;
					height: 100%;
					opacity: .95;
					top: 0;
					left: 0;
					zoom: 0.8;
					background-color: #313131;
					overflow: auto;
					background-color:transparent;
				}
				
				
				#abcObs {
					width: 100%;
					height: 100%;
					opacity: .95;
					top: 0;
					left: 0;
					display: none;
					position: fixed;
					overflow: auto;
					background-color:transparent;transform:scale(1.2);left:43%;top:17%
				}
		}

	
		
		
		
		@media screen and (max-width:414px) and (max-height:732px) 
		{
	
				#abcOffline {
					width: 100%;
					height: 100%;
					opacity: .95;
					top: 0;
					left: 0;
					zoom: 0.8;
					background-color: #313131;
					overflow: auto;
					background-color:transparent;
				}
				
				
				#abcObs {
				width: 100%;
				height: 100%;
				opacity: .95;
				top: 0;
				left: 0;
				display: none;
				position: fixed;
				overflow: auto;
				background-color:transparent;transform:scale(1.2);left:43%;top:17%;

			}
		}


img#close {
    position: absolute;
    right: -14px;
    top: -14px;
    cursor: pointer
}

img#closeOffline {
    position: absolute;
    right: -14px;
    top: -14px;
    cursor: pointer
}


@media screen and (min-width: 100px) and (min-height: 100px) and (orientation: landscape)
{

div#popupOffline {
    left: 20%;
    top: 20%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}	
	
div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}

@media screen and (max-width: 900px) and (max-height:800px) and (orientation: landscape)
{
div#popupOffline {
    left: 20%;
    top: 5%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}

div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}

@media screen and (max-width: 900px) and (max-height: 800px) and (orientation: portrait)
{

div#popupOffline {
    left: 20%;
    top: 20%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}

div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}

@media screen and (min-width: 800px) and (min-height: 800px) 
{
div#popupOffline {
    left: 20%;
    top: 20%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}

div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}


@media screen and (min-width: 0px) and (min-height: 0px) and (orientation: portrait)
{

div#popupOffline {
    left: 20%;
    top: 5%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}


div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}

@media screen and (min-width: 0px) and (min-height: 0px) and (max-height: 299px) and (orientation: landscape)
{

div#popupOffline {
    left: 20%;
    top: 5%;
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
	display: none;
}

div#popupContactObs2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}
}

div#popupContact2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}

div#popupContact3 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    font-family: var(--FormPoliceChamp);
}

form {
    min-width: 250px;
    padding: 10px 50px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: var(--FormPoliceChamp);
    background-color: #fff;
}

p {
    margin-top: 30px;
}

h2 {
    background-color: white;
    padding: 20px 35px;
    margin: -10px -50px;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

hr {
    margin: 10px -50px;
    border: 0;
    border-top: 1px solid #ccc;
    height: 5px;
	color:var(--FormCouleurCarac);
}

#name {
    background-image: url(../images/name.jpg);
    background-repeat: no-repeat;
    background-position: 5px 7px;
}

#email {
    background-image: url(../images/email.png);
    background-repeat: no-repeat;
    background-position: 5px 7px;
}

textarea {
    background-repeat: no-repeat;
    background-position: 5px 7px;
    width: 82%;
    height: 95px;
    padding: 10px;
    margin-top: 30px;
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: raleway;
    margin-bottom: 30px;
}

#submit {
    text-decoration: none;
    width: 100%;
    text-align: center;
    display: block;
    background-color: #FFBC00;
    color: #fff;
    border: 1px solid #FFCB00;
    padding: 10px 0;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
}

span {
    color: var(--FormCouleurCarac);
    font-weight: 700;
}

button {
    width: 10%;
    height: 45px;
    border-radius: 3px;
    background-color: #cd853f;
    color: #fff;
    font-family: var(--FormPoliceChamp);
    font-size: 18px;
    cursor: pointer;
}

@media screen and (max-width:780px) and (max-height:900px) { 

	.formMap {
		background-color: var(--FormCouleurFond);
		font-family: var(--FormPoliceChamp);
		border: var(--FormEpaisseurTour) solid transparent;
	}	

	#searchDiv table.formMap{
		align-content: center;
		width: 100%;
		height: 100%;
	}
	
	#abcOffline {
		width: 100% !important;
		height: 100% !important;
		opacity: 1 !important;
		top: 0 !important;
		left: 0 !important;
		background-color: #313131;
		overflow: auto !important;
		background-color:transparent !important;
	}

	#abcObs {
		width: 100% !important;
		height: 100% !important;
		opacity: 1 !important;
		top: 0 !important;
		left: 0 !important;
		display: none;
		position: fixed !important;
		overflow: auto !important;
		background-color:transparent !important;
		transform:scale(2.0) !important;
		left:30% !important;
		top:17% !important;
	}

	div#popupContactObs2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-left: 0px;
		font-family: var(--FormPoliceChamp);
		height: 50% !important;
		width: 55% !important;
	}

	.tabCreationObs {
		height: 100% !important;
    	zoom: 1.4;
		align-content: center;
	}

	.tdMapInitSearch {
		margin: 5;
		padding: 5px;
		font-size: 100%;
		font: inherit;
		vertical-align: middle;
	}
}

@media screen and (max-width: 767px) {
	#abcObsA {
		width: 200%;
		height: 200%;
		top: -50%;
		left: -50%;
	}
	div#popupContactObs2 {
		height: 100% !important;
		width: 100% !important;
	}

	#marineTraffic {
		max-height: 400px;
	}

	.trafficStyle-container {
		/* bottom: 13%; */
		transform-origin: 0 85%;
	}
}

#abcObsA{
    width: auto;
    left: 50%;
   }