/*MEDIA*/

@media screen and (min-width: 1921px) {
	.col {max-width: 100%;}
	}

@media screen and (min-width: 1681px) and (max-width: 1920px) {
	.col {max-width: 85%;}
	}

@media screen and (min-width: 1441px) and (max-width: 1680px) { 
	.col {max-width: 80%;}
	}

@media screen and (min-width: 1367px) and (max-width: 1440px) {
	.col {max-width: 78%;}
	}

@media screen and (min-width: 1281px)  and (max-width: 1366px) {
	.col {max-width: 76%;}
	}

@media all and (min-width: 1025px) and (max-width: 1280px) {
	.col {max-width: 75%;}
	}

@media all and (min-width: 961px) and (max-width: 1024px) {
	.col {max-width: 68%;}                                                                                                                                                                                                     
	}

@media all and (min-width: 800px) and (max-width: 960px) {
	.col {max-width: 100%;}

	#tpanel {
		width: 320px;
		}
	
	#meridien, #coordsys {
		font-size: 12px !important;
		margin-left: -30px !important;
		width: 100px !important;
		}
	}


/*BODY HEADER*/

body {
		font-family: Arial;
		}

header {
		font-family: Arial;
		height: 100px;
		}
		
		
/*NAVBAR */

.navbar {
	background-color: white;
	border-bottom: 1px solid rgba(0,0,0,.125);
	}

.navbar-nav {
	margin-top: -50px;
	}
		
.navbar-brand {
	color: #818278;
	}		

.navbar-brand:hover {
	color: #818278;
	}	
		
.nav-link {
	color: #818278;
	}	
		
.nav-link:hover {
	color: white;
	background: #818278;
	}	


/*MAP*/

.map {
	width: 100%;
	height: 875px;
	margin-bottom: 5px;
	}
	
.ol-control.ol-layerswitcher {
	top: 5px !important;
}

#mouse-position {
	font-size: 20px;
	height: 50px;
	margin-left: 60px;
	margin-top: 20px;
	color: #FFFFFF;
	/*text-shadow: 1px 1px 0 #4074b5, 1px -1px 0 #4074b5, -1px 1px 0 #4074b5, -1px -1px 0 #4074b5, 1px 0px 0 #4074b5, 0px 1px 0 #4074b5, -1px 0px 0 #4074b5, 0px -1px 0 #4074b5;*/
	text-shadow: 1px 1px 0 #696969, 1px -1px 0 #696969, -1px 1px 0 #696969, -1px -1px 0 #696969, 1px 0px 0 #696969, 0px 1px 0 #696969, -1px 0px 0 #696969, 0px -1px 0 #696969;
	}


/*MENU GAUCHE*/

.uk {
	color: #a4a4a4 !important;
	padding-left: 5px;
	font-size: 13px;
	padding-top: 2px;
	}

#accordion {  
	width: 300px;
	}

.card-header {
	padding: 10px !important;
	cursor: pointer;
	}
		
#tpanel {
	margin: 0px !important;
	padding: 0px !important;
	}

.volet2 {
	padding-top: 10px;
	padding-bottom: 10px;
	}

.volet3 {
	padding-top: 10px;
	padding-bottom: 20px;
	}	
	
.tv2 {
	margin-top: 10px;
	}

.peritext {
	font-size: 15px;
	}

.peritext2 {
	font-size: 12px;
	}	

.titreleft {
	font-size: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	margin-bottom: 5px;
	}	

.info {
	height: 150px;
	padding: 10px;
	}

.box {
	margin-top: 15px;
	}	


/*BOUTONS */

.leftbutton {
	margin-right: 20px;
	margin-bottom: 10px;
	}

.btn {
	border-radius:0 !important;
	box-shadow: 1px 1px 1px #a4a4a4;
	border: 1px solid rgba(0, 0, 0, 0.125);
	}

.btn:focus {
	box-shadow:  0 0 0 0 #e94e1b !important;
	border: 2px solid #e94e1b;
	}

.btn-ctmd {
	color: white !important;
	background-color: #e94e1b !important;
	}
	
.btn-ctmd:hover {
	color: white !important;
	background-color: #e94e1b !important;
	border: 1px solid white;
	box-shadow: 0px 0px 0px #a4a4a4;
	}
	
.btn-ctmd:focus {
	color: white;
	background-color: #e94e1b !important;
	}

#resetall {
	font-size: 14px !important;
	margin-left: 10px;
	}

.btn-outline-secondary:hover {
	background-color: white !important;
	text-decoration: none;
	border: 1px solid #e94e1b;
	color: #e94e1b;
	box-shadow: 0px 0px 0px #a4a4a4;
	}
	
.btn-file {
	position: relative;
	overflow: hidden;
	background-color: #4291ae !important;
	cursor: pointer !important;
	}
		
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: red;
	display: block;
	cursor: pointer !important;
	}


/*COORDS + MERIDIEN + POINTS */

.syscoord {
	margin-bottom: 30px;
	}

#sexatype {
	padding: 0px !important;
	margin: 0px !important;
	width: 600px !important;
	}

#coordsys, #meridien {
	font-size: 14px;
	}

#decicoord, #gradcoord {
	margin-left: 25px;
	}

#deglat, #minlat, #seclat, #deglon, #minlon, #seclon {
	width: 50px;
	font-size: 13px;
	}

#merid, #equa {
	font-size: 13px;
	min-width: 64px;
	}

#gograd, #godec {
	font-size: 14px !important;
	margin-left:10px;
	}

#declat, #declon, #grlat, #grlon {
		width: 90px;
		font-size: 13px;
		}
		
#gosexa, #gobox, #gobox21 {
	margin-left: 0px;
	margin-top: 5px;
	font-size: 15px !important;
	}	

#idserie {
	margin-left: 10px;
	margin-top: 10px;
	font-size: 14px !important;
	}

/*GRID*/

.gride {
	margin-bottom: 10px;
	}

#gr {
	margin-top: 6px;
	}

.colg {
	max-width: 30% !important;
	margin-right: 0px;
	}
	
.ling {
	max-width: 30% !important;
	margin-left: -25px;
	}
			
.gcase {
	padding-left: 0px;
	margin-left: 0px;
	}

#tlig {
	padding-left: 1px;	
}

#colnumber{
	width: 50px;
	font-size: 14px !important;
	}

#linenumber {
	width: 50px;
	font-size: 14px !important;
	}

.inputgrid {
	margin: 10px;
	}


/*TABLE*/

#tabcontenu {
	max-height: 500px;
	overflow: auto;
	}
	
#tablebar {
	margin-bottom: 5px;
	}
	
.table thead th {
	border-bottom: 1px solid #dee2e6 !important;
	}


/*OL */

.ol-popup .closeBox {
	height: 35px !important;
	width: 35px !important;
	margin: 6px 5px 0 0 !important;
	}

.ol-tooltip {
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	color: white;
	padding: 4px 8px;
	opacity: 0.7;
	white-space: nowrap;
	font-size: 12px;
	}
	  
.ol-tooltip-measure {
	opacity: 1;
	font-weight: bold;
	}
	  
.ol-tooltip-static {
	background-color: #ffcc33;
	color: black;
	border: 1px solid white;
	}
	  
.ol-tooltip-measure:before, .ol-tooltip-static:before {
	border-top: 6px solid rgba(0, 0, 0, 0.5);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
	position: absolute;
	bottom: -6px;
	margin-left: -7px;
	left: 50%;
	}
	  
.ol-tooltip-static:before {
	border-top-color: #ffcc33;
	}
	

/* MODAL UNIMARC ET MARC 21 */

.mimage2 {
	width: 650px;
	margin: 15% auto;
	padding: 10px;
	}

.mod3 {
	max-height: 300px;
	overflow-y: auto;
	}

#boxcontenu, #box2contenu {
	margin-bottom: 10px;
	}

/*LOAD GEOJSON - IMAGE*/

.modal-header {
	padding-left : 0px;
	}

#infopro {
	font-size: 14px;
	}

#img-upload	{
	width: 100%;
	}

.mimage {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 25%;
	}

#paramimage {
	width: 85%;
	margin-left: 20px;
	font-size: 15px;
	}

#exportgeom {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 14px !important;
	}

#saveshp, #savekml {
	font-size: 14px !important;
	margin-right: 5px;
	}

#save {
	font-size: 14px !important;
	margin-right: 5px;
	margin-left: 10px;
	}
	

/*FOOTER */

footer {
	background-color: white;
	color: #818278;
	border-top: 1px solid rgba(0, 0, 0, 0.125);
	}

footer .imgfoot {
	width: 200px;
	margin: auto;
	}
	
footer .imgfootcnrs {
	width: 100px;
	margin: auto;
	}	
	

/*Chrome, Safari, Edge, Opera */
		
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
	}


/* Firefox */
		
input[type=number] {
	-moz-appearance:textfield;
	}


/*PAGE TUTORIEL*/

.tutotitre {
	font-size: 20px !important;
	margin-left: 170px;
	margin-top: 50px;
	color: #808080;
	}

.tutolink {
	margin-top: 30px;
	}


/*PAGE ENSAVOIRPLUS*/

.esprow {
	width: 800px;
	margin-left: 170px;
	}

.esptitre1 {
	color: #808080;
	font-size: 20px !important;
	}
	
.esptitre2 {
	color: #808080;
	font-size: 20px !important;
	padding-top: 20px;
	}	

.esp {
	color: #808080;;
	}

.espcol1 {
	padding-top: 50px;
	}

.espcol2 {
	padding-top: 105px;
	}

.espc {
	font-size: 14px !important;
	padding-bottom: 30px;
	padding-top: 5px;
	color: #606060;
	}