[id*='region_']{
cursor:pointer;
}
.mapAndInfos{margin-top:-133px;
background:linear-gradient(to bottom, #2f3947 0 6px, #daae4f 6px 16px, #ffffff 16px 115px);
}
.map{margin-left:20px; width:360px; height:260px}
.infos{font-family:Calibri; font-size:3.02267vh; margin-left:2.52vh; width:50%}
#infosRegion{font-weight: bold; font-size: 1em; text-transform: uppercase}
.btn{
    background-color: #fff;
    place-items: center;
    padding: 0.5em 1em;
    border-radius: 20em;
    border: 1px solid gray;
    user-select: none;
    cursor: pointer;
    font-family:Calibri; font-size: 20px;
    transition: all 100ms linear;
    color: #0ebac5;
    position: relative;
    box-shadow: inset 0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.btn:active {
    box-shadow: inset 0 0 0 3px #043b3f6b; background-color:#f6f6f6;
}
.btn::before {
    content: "X"; color:red; font-family:Gabriella; font-size:24px; font-weight:bold;
    width: 50; height: 50; position: absolute;
    border-radius: inherit; z-index: 1;
    top: 9px; left: 7px;
    transition: all 300ms ease-in-out;
    opacity: 0; transform: scaleX(1.5) scaleY(1.5);
}
.btn:hover{background-color:#f6f6f6}
.btn:hover::before{opacity:1;transform:scaleX(1) scaleY(1);}
.register {
  	width: 480px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 50px auto;
}
.register #squad{margin-top:-50px;width:250px;margin-left:200px;position:absolute;font-family:Calibri;font-size:18px;text-align:right}
.register h1 {
  	text-align: center; color: #5b6574; font-size: 24px;
  	padding: 20px 50px 20px 0px;
  	border-bottom: 1px solid #dee0e4;
}
.register form {
  	display: flex; flex-wrap: wrap; justify-content: center;
  	padding-top: 20px;
}
.register form label {
  	display: flex; justify-content: center; align-items: center;
  	width: 50px; height: 50px;
  	background-color: #3274d6; color: #ffffff;
}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 390px; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="number"]{
  	width: 250px; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="date"]{
  	width: 200px; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="captcha"]{
  	width: 140px; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
 	  border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.register form input[type="submit"]:hover {
	background-color: #2868c7;
  transition: background-color 0.2s;
}
.nav {
  width: 100%; height: 60px;
  background-color: #2f3947;
  display: flex;
  align-items: center;
}
.nav > .nav-header {
  flex:0.95; padding-left: 1rem;
}
.nav > .nav-header > .nav-title {
  font-size:22px;color:#fff;margin-left:10px;
}
.nav > .nav-list {display:flex;gap:1rem}
.nav > .nav-list > li {list-style-type:none}
.nav > .nav-list > li a {text-decoration:none;color:#efefef;cursor:pointer}
.nav > .nav-list > li{:hover{background-color:#2868c7;cursor:pointer;color:lightgreen;transition:background-color 0.2s}}
.nav > .nav-list > li button{width:120px;height:50px;background-color:#2f3947;font-family:Calibri;font-size:20px;color:white;padding:10px;border:1px solid black;border-radius:10px}
.nav > #nav-check {
    display: none;
}
img[data-src]{filter:blur(5px);transition:filter 0.1s ease,opacity 0.1s ease;opacity:0.7}
img[data-src].loaded{filter:blur(0);opacity:1}
@media (max-width: 768px) {
  .nav {
    padding-right: 1rem;
  }
  .nav > .nav-btn {
    display: inline-block; position: absolute; right: 0; top: 0; padding-top: 0.2rem;
  }
  .nav > .nav-btn > label {cursor:pointer;
    display: inline-block; width: 60px; height: 60px; padding: 15px;
  }
  .nav > .nav-btn > label > span {
    display: block; width: 25px; height: 10px; border-top: 2px solid #eee;
  }
  .nav > .nav-list {
    position: absolute; display: flex; flex-direction: row; align-items: flex-start;
    gap: 0.4rem; padding-left:20px; width: 100%; background-color: #2f3947;
    height: 0; transition: all 0.1s ease-in;
    top: 35px; left: 0; overflow: hidden; z-index:1;
  }
  .nav > .nav-list > li {width: 100%; margin-top: .8rem}
  .nav > #nav-check:checked ~ .nav-list {height: 80px}
}
@media (max-width: 480px) {
.register {
  	width: 100%;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 50px auto;
}
.register #squad{margin-top:-50px;width:52%;margin-left:43%;position:absolute;font-family:Calibri;font-size:18px;text-align:right}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 81.25%; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="number"]{
  	width: 52%; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="date"]{
  	width: 41.66%; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="captcha"]{
  	width: 29.16%; height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
}