#carteCSS {position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0;}
.map {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0;}
#abonne #mapContent {width: 100%; min-height: 100vh; position: relative;}

#sectionCarteHome #carteCSS {position: relative; top: inherit; left: inherit; bottom: inherit; right: inherit; z-index: 0; width: 100%; height: 100%;}
#sectionCarteHome #mapContent {width: 100%; min-height: 1300px; position: relative;}




/*POPIN*/
.loader {display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background: rgba(0,0,0,.5); text-align: center;}
.loader i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: #025781;}
.mapDetails .loader {height: 130px; position: relative; background: white;}
.mapDetails .loader i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: #025781;}

.mapContent .gr20 { position: absolute; z-index: 999; background: white; border-radius: 20px; padding: 0.7rem 1rem; font-family: "Quicksand", Sans-serif; font-weight: 700; color: #025781}
.mapContent .checkType {position: absolute; z-index: 999; top: 7rem; right: 2rem; width: 41px; background: rgba(2, 87, 129, 0.3); border-radius: 20px; font-family: "Quicksand", Sans-serif; font-weight: 400; color: #025781;}
	.mapContent .checkType button {-webkit-appearance: none; appearance: none; padding: 5px; margin: 0; background: transparent; border: 0;vertical-align: top;}
	.mapContent .checkType button.meteo {border-radius: 20px 20px 0 0}
	.mapContent .checkType button.vent {border-radius: 0 0 20px 20px}
	.mapContent .checkType a {display: inline-block; padding: .7rem 1rem; margin: 0; background: transparent; border: 0; color: white;vertical-align: top; border-radius: 15px;}
	.mapContent .checkType a:hover {background: #025781}
	.mapContent .checkType button.active {background: #025781}
	.mapContent .checkType button img {width: 100%; display: block}
.mapContent .popin {display: none; position: absolute; z-index: 999; top: 4rem; right: 2rem; width: 300px; background: white; border-radius: 20px; padding: 2rem; font-family: "Quicksand", Sans-serif; font-weight: 400; color: #025781}
	.mapContent .popin .popin-entete {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
		.mapContent .popin .popin-entete .col-left, .mapContent .popin .popin-entete .col-right {width: 50%;}
		.mapContent .popin .popin-entete .col-right {text-align: right;}
		.mapContent .popin .popin-entete span {display: block;}
		.mapContent .popin .popin-entete span.city {color: #BF7111; font-size: 1.5rem; font-weight: 500; margin-bottom: .5rem; line-height: 1;}
		.mapContent .popin .popin-entete span.temp {font-size: 2.4rem; font-weight: 700; line-height: 1;}
		.mapContent .popin .popin-entete .indice {font-size: 1rem; display: inline-block; font-weight: 700; line-height: 1;}
		.mapContent .popin .popin-entete span.details {color: #BF7111; font-weight: 700; line-height: 1; margin-top: 5px;}
	.mapContent .popin .popin-content {border-top: 1px solid #025781; margin-top: 1rem; padding-top: 1rem;}
		.mapContent .popin .popin-content .line {display: flex; flex-wrap: nowrap; align-items: center; justify-content: stretch; color: #025781; padding: .3rem 0; font-size: 1rem; font-weight: 500; line-height: 1}
			.mapContent .popin .popin-content .line .day {width: 68%}
			.mapContent .popin .popin-content .line .temp {margin-right: 7px; width: 13%}
			.mapContent .popin .popin-content .line .picto {width: 15%}
		.mapContent .popin > a {display: block; font-family: "Quicksand", Sans-serif; font-size: 20px; font-weight: 600; color: white !important; background-color: #D9AB82; border-radius: 15px; padding: 10px 20px; margin: 20px auto 20px; width: 100%; text-align: center;}
		.mapContent .popin #nameFav {display: block; font-family: "Quicksand", Sans-serif; border: 1px solid #025781; border-radius: 15px 15px 0 0; padding: 10px 20px; margin: 0 auto 0; width: 100%; text-align: center;}
		.mapContent .popin .saveFav {display: block; font-family: "Quicksand", Sans-serif; font-size: 20px; font-weight: 600; color: white !important; background-color: #025781; border: 0; border-radius: 0 0 15px 15px; padding: 10px 20px; margin: 0 auto 0; width: 100%; text-align: center;}
		.mapContent .popin .info {font-size: 14px; line-height: 1.4; margin: 10px 0 0 0;}
		.mapContent .popin .deleteFav {display: block; font-family: "Quicksand", Sans-serif; font-size: 20px; font-weight: 600; color: white !important; background-color: #b83e11; border: 0; border-radius: 0 0 15px 15px; padding: 10px 20px; margin: 0 auto 0; width: 100%; text-align: center;}
		.mapContent .popin > a.closed {display: inline-block; background: white; color: #D9AB82 !important; position: absolute; top: 0;right: 10px; width: auto; padding: 5px; margin: 0;}

.mapDetails {position: relative; background: white;}
.mapDetails .mapDetails-content {max-width: 1400px; margin: auto;}

.ol-zoom {top: 1rem !important; left: inherit !important; bottom: inherit !important; right: 2rem !important; background: transparent !important; padding: 0 !important;}
.ol-control button {height: 1.3em !important; width: 1.3em !important; font-size: 2rem !important; background-color: rgba(2, 87, 129, 0.3) !important}
.ol-control button:hover {background-color: #025781 !important}
.ol-zoom .ol-zoom-in {border-radius: 15px 15px 0 0 !important;}
.ol-zoom .ol-zoom-out {border-radius: 0 0 15px 15px !important;}

.tableHead {text-align: center; font-weight: bold;}
.scrollable td img {width: 30px; display: block; margin: auto}
.scrollable {margin-bottom: 1em; max-height: 100%; overflow: auto;}
.scrollable table {border-spacing: 0; margin: 2rem 0; min-width: 100%; width: max-content;}
.scrollable caption {font-size: smaller; padding-bottom: 0.5em; position: absolute; text-align: left; width: 25em; z-index: 3;}
.scrollable th, .scrollable td {border-bottom: 1px solid gray; max-width: 100px; padding: 0.5em 0.5em; vertical-align: middle; text-align: center; line-height: 1.2;}
.scrollable td span {font-size: 12px;}
.scrollable th { background: rgb(255, 205, 205); position: sticky; text-align: left; top: 0; }
.scrollable th:first-of-type, .scrollable td:first-of-type { left: 0; position: sticky; }
.scrollable th:first-of-type { z-index: 2; }
.scrollable td:first-of-type {text-align: left; background: rgb(2, 87, 129); z-index: 10; max-width: 150px; color: white; font-weight: bold;}
.scrollable .cloud {position: relative;}
.scrollable .cloud span { position: absolute; z-index: 1; bottom: 5px; display: block; width: 100%; font-weight: bold;}
.scrollable .cloud i {font-size: 2rem;}

.aboTable {text-align: left; background-color: #ccc; padding: 60px !important; font-size: 18px; color: rgb(2, 87, 129);}
.aboTable > div {max-width: 540px;}
.aboTable > div > div {display: flex; justify-content: space-between;}
.aboTable .btn {display: inline-block; font-family: "Quicksand", Sans-serif; font-size: 20px; font-weight: 600; color: white !important; background-color: #BF7111; border-radius: 15px; padding: 10px 20px; margin: 20px auto 20px; text-align: center;}
.aboTable .btn.inverse {background-color: transparent; border: 1px solid #BF7111; color: #BF7111 !important;}
.aboTable a.video {display: block; text-align: center; color: #BF7111}

.cloud0 i {color: rgba(104,104,104,0);}
.cloud1 i {color: rgba(104,104,104,.1);}
.cloud2 i {color: rgba(104,104,104,.2);}
.cloud3 i {color: rgba(104,104,104,.3);}
.cloud4 i {color: rgba(104,104,104,.4);}
.cloud5 i {color: rgba(104,104,104,.5);}
.cloud6 i {color: rgba(104,104,104,.6);}
.cloud7 i {color: rgba(104,104,104,.7);}
.cloud8 i {color: rgba(104,104,104,.8);}
.cloud9 i {color: rgba(104,104,104,.9);}
.cloud10 i {color: rgba(104,104,104,1);}
.cloud0 span,
.cloud1 span,
.cloud2 span,
.cloud3 span,
.cloud4 span,
.cloud5 span {color: black;}
.cloud6 span,
.cloud7 span,
.cloud8 span,
.cloud9 span,
.cloud10 span {color: white;}
.border-right {border-right: 3px solid black !important;}
.temp0 {background: #0031af;}
.temp1 {background: #00c5e7;}
.temp2 {background: #febe3f;}
.temp3 {background: #e55d08;}
.temp4 {background: #fe0000;}
.pluie1 {background: #b0dbfc;}
.pluie2 {background: #528cfe;}
.pluie3 {background: #6620fc; color: white;}
.pluie4 {background: #4400d8; color: white;}
.pluie5 {background: #2e018f; color: white;} 
.vent0 {background: #fcd66b;}
.vent1 {background: #febb00;}
.vent2 {background: #ff7f00;}
.vent3 {background: #fe0000;}
.vent4 {background: #000; color: white;}


#success {padding: 10px; background: green; color: white; text-align: center; font-weight: 600; border-radius: 15px; display: none;}
#alerteForm h3 {margin-bottom: 10px; margin-top: 50px;}
#alerteForm .checkall {margin-bottom: 30px;}
#alerteForm div {margin-bottom: 5px;}
#alerteForm label {margin-left: 5px; font-weight: 800;}
#alerteForm label span {font-weight: 400;}
#alerteForm .ligneAlerte input {width: 15px;}
#alerteForm .ligneAlerte label {width: calc(100% - 40px);}
#alerteForm #submit_alerte {margin: 20px 0 0 0; border: 0;}
#alerteForm #submit_alerte.disa {background: grey;}

.ol-popup {position: absolute;background-color: white;box-shadow: 0 1px 4px rgba(0,0,0,0.2);padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 160px;}
.ol-popup:after, .ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;}
.ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px;}
.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;}
.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}
.ol-popup-closer:after {content: "✖";}




@media only screen and (max-height: 940px) {
	.mapContent .popin {top: 2rem; padding: 1rem 2rem; right: 6rem;}
	.mapContent .popin .popin-entete .col-right img {height: 80px;}
	.mapContent .popin > a {margin: 0 auto 20px;}
}

@media only screen and (max-width: 1280px) {
	.mapContent .popin {top: 2rem; right: 6rem; padding: 1rem 2rem;}
	.mapContent .popin .popin-entete .col-right img {height: 80px;}
	.mapContent .popin > a {margin: 0 auto 20px;}
}

@media only screen and (max-width: 810px) {
	.mapContent .popin {display: none; top: 8rem; right: 8rem;}
	.mapDetails {padding: 1rem;}
}

@media only screen and (max-width: 767px) {
	#sectionCarteHome #mapContent {min-height: 800px;}
	.map {position: relative; top: inherit; left: inherit; bottom: inherit; right: inherit; z-index: 0; width: 100%; height: 800px;}
	#carteCSS {position: relative; top: inherit; left: inherit; bottom: inherit; right: inherit; z-index: 0;}
	.mapContent .checkType {right: 1rem;}
	
	.ol-zoom {bottom: 4.5rem !important; right: 1rem !important; background: transparent !important; padding: 0 !important;}
}

@media only screen and (max-width: 600px) {
	#sectionCarteHome #mapContent, #abonne #mapContent {min-height: 700px; height: 100vh;}
	.map {min-height: 700px; height: 100vh; }
	.aboTable {padding: 20px !important}
	.aboTable > div > div {display: block;}
	.aboTable a.video {text-align: left;}
	.page-id-539 #logoK {position: absolute; top: 10px;}
	.mapContent .popin {top: 1rem; left: 1rem; right: 1rem; width: auto;}
	.mapContent .popin .popin-entete span.city {font-size: 1.3rem;}
	.mapContent .popin .popin-entete span.temp {font-size: 2rem;}
	.mapContent .popin .popin-content .line .picto {width: 13%;}
	.mapContent .popin .popin-content .line .picto img {display: inline-block; max-width: 35px;}
}