/* grid Register spot*/

.container-register-spot {
    background-color: #005;
    display: grid;
    grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    gap: 0px 0px;
    margin: 0;
    padding: 0;
    border: thick double #006;
    border-width: 0.4em;
}

.container-register-spot:hover { 
    background-color: #004;
    border: thick double #009;
    border-width: 0.4em;
}

@media only screen and (max-width: 700px) {
    .container-register-spot {
        border-radius: 50%;
        grid-template-rows: 30px 60px 30px 150px 30px 150px 30px 60px 30px 450px 30px 150px 150px 150px 150px 30px 60px 30px 340px 217px 217px 30px 780px 30px 217px 217px 217px 30px 650px 30px 217px 217px 217px 30px 130px 217px 130px 30px 217px 217px 180px 30px 60px 30px 600px 30px 60px 30px 150px 150px 30px 200px 60px 60px 60px;  
        grid-template-areas: 
        ". . . . . . . . . . . . . . . . . . . ."
        ". title title title title title title title . . description-text description-text description-text description-text description-text description-text description-text description-text description-text ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". name name name name name name name name . createdAt createdAt createdAt createdAt createdAt createdAt createdAt createdAt createdAt ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". email email email email email email email email email email . newSpot newSpot newSpot newSpot newSpot newSpot newSpot ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation title-localisation . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". lng lng lng lng lng lng lng lng lng lat lat lat lat lat lat lat lat lat ."
        ". address address address address address address address address address address address address address address address address address address ."
        ". region region region region region region region region region codePostal codePostal codePostal codePostal codePostal codePostal codePostal codePostal codePostal ."
        ". town town town town town town town town town country country country country country country country country country ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . title-spot-info title-spot-info title-spot-info title-spot-info title-spot-info . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". category category category category category category category category category category category category category category category category category category ."
        ". note note note note note note note note note note note note note note note note note note ."
        ". level level level level level level level level level level level level level level level level level level ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". module module module module module module module module module module module module module module module module module module ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". material material material material material material material material material material material material material material material material material material ."
        ". ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ."
        ". etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation ."
        ". police police police police police police police police police police police police police police police police police police ."
        ". lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". money money money money money money money money money money money money money money money money money money ."
        ". parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking ."
        ". money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces ."
        ". camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping ."
        ". water water water water water water water water water toilet toilet toilet toilet toilet toilet toilet toilet toilet ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". video video video video video video video video video video video video video video video video video video ."
        ". website website website website website website website website website website website website website website website website website website ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". description description description description description description description description description description description description description description description description description description ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . submit submit submit submit submit . . . . . . . ."; 
    }
  }

@media only screen and (min-width: 700px) {
    .container-register-spot {
        border-radius: 50%;
        grid-template-rows: 30px 60px 30px 150px 30px 150px 30px 60px 30px 450px 30px 150px 150px 150px 30px 60px 30px 340px 217px 217px 30px 780px 30px 217px 217px 217px 30px 650px 30px 217px 217px 217px 30px 130px 217px 130px 30px 217px 217px 180px 30px 60px 30px 600px 30px 60px 30px 150px 150px 30px 200px 60px 60px 60px;  
        grid-template-areas: 
        ". . . . . . . . . . . . . . . . . . . ."
        ". title title title title title title title . . description-text description-text description-text description-text description-text description-text description-text description-text description-text ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". name name name name name name name name name name . createdAt createdAt createdAt createdAt createdAt createdAt createdAt ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". email email email email email email email email email email email email email . newSpot newSpot newSpot newSpot ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . title-localisation title-localisation title-localisation title-localisation title-localisation . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". lng lng lng lng lng lng lng lng lng lat lat lat lat lat lat lat lat lat ."
        ". address address address address address address address address address address address codePostal codePostal codePostal codePostal codePostal codePostal codePostal ."
        ". town town town town town town town region region region region region region country country country country country ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . title-spot-info title-spot-info title-spot-info title-spot-info title-spot-info . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". category category category category category category category category category category category category category category category category category category ."
        ". note note note note note note note note note note note note note note note note note note ."
        ". level level level level level level level level level level level level level level level level level level ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". module module module module module module module module module module module module module module module module module module ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". material material material material material material material material material material material material material material material material material material ."
        ". ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ground ."
        ". etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat etat ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation frequentation ."
        ". police police police police police police police police police police police police police police police police police police ."
        ". lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting lighting ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". money money money money money money money money money money money money money money money money money money ."
        ". parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking parking ."
        ". money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking money-parking ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces acces ."
        ". camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping camping ."
        ". water water water water water water water water water toilet toilet toilet toilet toilet toilet toilet toilet toilet ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media title-media . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". video video video video video video video video video video video video video video video video video video ."
        ". website website website website website website website website website website website website website website website website website website ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". description description description description description description description description description description description description description description description description description description ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . submit submit submit submit submit . . . . . . . ."; 
    }
} 

@media only screen and (min-width: 1200px) {
    .container-register-spot {
        border-radius: 50%;
        grid-template-rows: 30px 80px 30px 150px 60px 60px 60px 150px 150px 150px 60px 60px 60px 340px 217px 217px 60px 217px 217px 217px 60px 217px 217px 217px 60px 60px 60px 300px 300px 60px 200px 60px 60px 60px;  
        grid-template-areas: 
        ". . . . . . . . . . . . . . . . . . . ."
        ". title title title title title . . description-text description-text description-text description-text description-text description-text description-text . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". name name name name . email email email email email . createdAt createdAt createdAt createdAt . newSpot newSpot ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . title-localisation title-localisation title-localisation title-localisation title-localisation . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps . lng lng lng lng lat lat lat lat ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps . address address address address address codePostal codePostal codePostal ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps . town town town region region region country country ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . title-spot-info title-spot-info title-spot-info title-spot-info title-spot-info . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". category category category category category . module module module module module module module module module module module module ."
        ". note note note note note . module module module module module module module module module module module module ."
        ". level level level level level . module module module module module module module module module module module module ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". material material material material material material material material . constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur ."
        ". ground ground ground ground ground ground ground ground . constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur ."
        ". etat etat etat etat etat etat etat etat . constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur constructeur ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". frequentation frequentation frequentation frequentation frequentation frequentation . money money money money money money . acces acces acces acces ."
        ". police police police police police police . parking parking parking parking parking parking . camping camping camping camping ."
        ". lighting lighting lighting lighting lighting lighting . money-parking money-parking money-parking money-parking money-parking money-parking . water water toilet toilet ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . title-upload-images title-upload-images title-upload-images title-upload-images title-upload-images . . . . . title-media title-media title-media title-media . ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images . video video video video video video ."
        ". upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images upload-images . website website website website website website ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". description description description description description description description description description description description description description description description description description description ."
        ". . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . submit submit submit submit submit . . . . . . . ."; 
    }
}

.title { 
    grid-area: title; 
    background-color: #004;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}

.title:hover {
    background-color: #007;
    border: thick double #009;
    border-width: 0.4em;
}

.description-text { 
    grid-area: description-text; 
    background-color: #004;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}

.description-text:hover {
    background-color: #007;
    border: thick double #009;
    border-width: 0.4em;
}

.name { 
    grid-area: name; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}

.name:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.name .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.name .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.name .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.email { 
    grid-area: email; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}

.email:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.email .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.email .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.email .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.createdAt { 
    grid-area: createdAt; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
    white-space: nowrap; 
    overflow: hidden; 
}

.createdAt:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.createdAt .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.createdAt .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.createdAt .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.note { 
    grid-area: note; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}

.note:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.note-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.title-localisation { 
    grid-area: title-localisation; 
    background-color: #007;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}

.title-localisation:hover {
    background-color: #006;
    border: thick double #009;
    border-width: 0.4em;
}

.map-gps { 
    grid-area: map-gps; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}

.map-gps:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.lat { 
    grid-area: lat; 
    background-color: #000055;
    padding: 16px;
    border-top-right-radius: 25px;
    border: 1px solid #000099;
}

.lat:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.lat .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.lat .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.lat .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.lng { 
    grid-area: lng; 
    background-color: #000055;
    padding: 16px;
    border-top-left-radius: 25px;
    border: 1px solid #000099;
}

.lng:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.lng .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.lng .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.lng .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.address { 
    grid-area: address;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}

.address:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.address .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.address .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.address .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.town { 
    grid-area: town; 
    background-color: #000055;
    padding: 16px;
    border-bottom-left-radius: 25px;
    border: 1px solid #000099;
}

.town:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.town .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.town .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.town .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.codePostal { 
    grid-area: codePostal; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    white-space: nowrap; 
    overflow: hidden; 
}

.codePostal:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.codePostal .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.codePostal .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.codePostal .form-control:focus {
background-color: #000088;
border-color: #0000ff;
color: #f90;
box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.region { 
grid-area: region; 
background-color: #000055;
padding: 16px;
border: 1px solid #000099;
}

.region:hover {
background-color: #000066;
border: 1px solid #0000aa;
}

.region .form-label {
color: #f90;
font-weight: bold;
margin-bottom: 8px;
}

.region .form-control {
background-color: #000077;
border: 1px solid #000099;
border-radius: 15px;
color: #f90;
padding: 12px;
}

.region .form-control:focus {
background-color: #000088;
border-color: #0000ff;
color: #f90;
box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.country { 
    grid-area: country; 
    background-color: #000055;
    padding: 16px;
    border-bottom-right-radius: 25px;
    border: 1px solid #000099;
}

.country:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.country .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.country .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.country .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.title-spot-info { 
    grid-area: title-spot-info; 
    background-color: #007;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}

.title-spot-info:hover {
    background-color: #006;
    border: thick double #009;
    border-width: 0.4em;
}

.category {
    grid-area: category;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.category:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.category-form {
    background-color: #008;
    padding: 16px;
    height: 272px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.level { 
    grid-area: level; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.level:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.level-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.etat { 
    grid-area: etat;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.etat:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.etat-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.material { 
    grid-area: material; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.material:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.material-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.ground { 
    grid-area: ground; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}

.ground:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.ground-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.frequentation { 
    grid-area: frequentation; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.frequentation:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.frequentation-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.lighting { 
    grid-area: lighting; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.lighting:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.lighting-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.money { 
    grid-area: money; 
    background-color: #000055;
    padding: 16px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: 1px solid #000099;
    text-align: center;
}

.money:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.money .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.money .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.money .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.module { 
    grid-area: module; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}

.module:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.module-form {
	background-color: #008;
    padding: 16px;
    height: 706px;
    border: none;
	border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.constructeur { 
    grid-area: constructeur; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}

.constructeur:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.constructeur-form {
    background-color: #008;
    padding: 16px;
    height: 582px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.police { 
    grid-area: police; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}

.police:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.police-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.acces { 
    grid-area: acces; 
    background-color: #000055;
    padding: 16px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border: 1px solid #000099;
}

.acces:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.acces-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.parking { 
    grid-area: parking; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}
.parking:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.parking-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.water { 
    grid-area: water; 
    background-color: #007;
    background-color: #000055;
    padding: 16px;
    border-bottom-left-radius: 25px;
    border: 1px solid #000099;
}

.water:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.toilet { 
    grid-area: toilet; 
    background-color: #007;
    background-color: #000055;
    padding: 16px;
    border-bottom-right-radius: 25px;
    border: 1px solid #000099;
}

.toilet:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.newSpot { 
    grid-area: newSpot; 
    background-color: #007;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
    overflow: hidden;
}

.newSpot:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.money-parking { 
    grid-area: money-parking; 
    background-color: #000055;
    padding: 16px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid #000099;
    text-align: center;
}

.money-parking:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.money-parking .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.money-parking .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.money-parking .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.camping { 
    grid-area: camping; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}

.camping:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.camping-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.title-upload-images { 
    grid-area: title-upload-images; 
    background-color: #007;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}
.title-upload-images:hover {
    background-color: #006;
    border: thick double #009;
    border-width: 0.4em;
}
.upload-images { 
    grid-area: upload-images; 
    background-color: #000055;
    padding: 16px;
    height: 600px;
    border-radius: 25px;
    border: 1px solid #000099;
    overflow: scroll;
    position: relative;
    text-align: center;
}
.upload-images:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.upload-images .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}
.upload-images .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.upload-images .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.image-preview-container {
    background-color: #000055;
    border-bottom: 2px solid #000099;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 100%;
    overflow-x: auto;
    z-index: 10;
    border-radius: 25px 25px 0 0;
    margin-bottom: 10px;
}

.image-preview {
    position: relative;
    width: 135px;
    height: 130px;
    border: 2px solid #000099;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000055;
    flex-shrink: 0;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview .delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 153, 0, 0.8);
    color: #009;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.image-preview .delete-btn:hover {
    background-color: rgba(0, 0, 153, 1);
    color: #f90;
}

.title-media { 
    grid-area: title-media;
    background-color: #007;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}

.title-media:hover {
    background-color: #006;
    border: thick double #009;
    border-width: 0.4em;
}

.video { 
    grid-area: video; 
    background-color: #000055;
    padding: 16px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: 1px solid #000099;
    text-align: center;
}

.video:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.video .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.video .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.video .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

/* Styles pour le preview vidéo */
.video-preview-container {
    margin-bottom: 16px;
}

.video-preview {
    position: relative;
    width: 100%;
    height: 268px;
    background-color: #000077;
    border: 2px solid #000099;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 8px;
}

.video-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.delete-video-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 153, 0, 0.8);
    color: #009;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s;
}

.delete-video-btn:hover {
    background-color: rgba(0, 0, 153, 1);
    color: #f90;
    transform: scale(1.1);
}

/* Responsive pour le preview vidéo */
@media only screen and (max-width: 700px) {
    .video-preview {
        height: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .video-preview {
        height: 150px;
    }
    
    .delete-video-btn {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }
}

.website { 
    grid-area: website; 
    background-color: #000055;
    padding: 16px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid #000099;
    text-align: center;
}

.website:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.website .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.website .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.website .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

/* Styles pour le preview website */
.website-preview-container {
    margin-bottom: 16px;
}

.website-preview {
    position: relative;
    width: 100%;
    height: 268px;
    background-color: #000077;
    border: 2px solid #000099;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 8px;
}

.website-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.delete-website-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 153, 0, 0.8);
    color: #009;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s;
}

.delete-website-btn:hover {
    background-color: rgba(0, 0, 153, 1);
    color: #f90;
    transform: scale(1.1);
}

/* Responsive pour le preview website */
@media only screen and (max-width: 700px) {
    .website-preview {
        height: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .website-preview {
        height: 150px;
    }
    
    .delete-website-btn {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }
}

.description { 
    grid-area: description; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
    text-align: center;
}

.description:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}

.description .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
}

.description .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    height: 125px;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}

.description .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    height: 220px;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}

.submit { grid-area: submit; }

.submit-form {
    background-color: #f90;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 25px;
    text-align: center;
    color: #009;
    border: thick double #fc6;
    border-width: 0.2em;
    border-radius: 50px;
    transition: 0.2s;
    overflow: hidden;
}

.submit-form:hover {
    background-color: #00c;
    color: #f90;
    border: thick double #006;
    border-width: 0.3em;
    cursor: pointer;
}

/* suprimes les class bootstrap pour les menus checkbox */

input.form-check-input:checked[type="radio"] {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 auto;
    display: block;
}

input.form-check-input:checked[type="checkbox"] {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 auto;
    display: block;
}