/* MODAL Type LOGIN PC */
html {
  margin: 0;
  padding: 0;
}
body.animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-image: url("../wp-content/uploads/2024/03/MyswingcloudEPK2.jpg");
  background-color: #25797c;
  background-position: center;
  margin: 0;
  padding: 0;
  font-family: Open sans, sans-serif;
  animation: pseudo-modal 2s;
}

body.interface {
  width: 100vw;
  margin: 0 auto;
  font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
}

header {
  width: 100vw;
}

.header, .navbar, .formItem {
  width: 60%;
  margin: 0.3rem auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
}

/* Full-width input fields */

input[type=text], input[type=password], input[type=email], input {
  width:100%;
  padding: 1rem;
  margin: 1rem 0 0;
  font-size:1em;
  text-align:left;
  border: 1px solid #ccc;
  background-color: #e5e5e5;
  box-sizing: border-box;
}

input[type=radio] {
  width: 10%;
}

input[type=date] {
  width: 50%;
}

/* Set a style for all buttons */

button, .btnLogin, button.side {
  padding: 0.2rem 2rem;
  border-radius: 19px;
  font-size: 1.3em;
  font-weight: 700;
  text-align: center;
  color: white;
  background-color: #25797c;
  border: 1px solid #25797c;
  cursor: pointer;
}

.btnLogin {
  padding: 0.2rem 2rem 0.4rem;
}

.btnLogin:hover {
  background-color: #23445b;
}

button[type=submit] {
  width:100%;
  padding: 1rem;
  margin: 2rem 0;
  font-size: 1.5em;
}

button[type=submit]:hover {
  opacity: 0.8;
}

button.side {
  width:100%;
  margin:1rem auto 0;
  padding: 0.5rem 0;
  font-weight: 400;
  border-radius: 4rem;
}

button.side:hover {
  color: #25797c;
  background-color: #fff;
  border: 1px solid #25797c;
}

button.side:disabled {
  color: #25797c;
  background-color: #c5edac;
  border: 1px solid #25797c;
}

/* FORM ITEMS */

.formItem {
  width: 100%;
  margin: 1rem;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: flex-start;
}

.field {
  display: flex;
  width: 65%;
}

.field input {
  margin: 0;
}

a, div.menuUser a {
  color: #25797c;
  text-decoration: none;
  font-weight: 600;
/*  display: flex;
  align-items: center;*/
}

div.menuUser a {
  display: flex;
  align-items: center;
}

.navbar {
  width: 100%;
  padding:0 20%;
  text-transform: uppercase;
  font-weight: 500;
  color:#fff;
  justify-content: flex-start;
/*  gap: 1rem;*/
  background: rgb(35,68,91);
  background: -moz-linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  background: linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23445b",endColorstr="#23445b",GradientType=1); 
}

.navbar div {
  display: flex;
  padding: 1rem;
  align-items: center;
}

.navbar div a, .navbar div a:hover, .navbar div a:visited, #menuItems a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  top: 0.2rem;
}

.navbar div a:hover {
  color: #25797c;
}

#menuItems a {
position: unset;
}

div.logo {
  margin:auto 0;
}

div.logo a img {
  width:150px;
}

#menuItems {
  display: none;
  width: 10%;
  margin: 0;
  padding: 0 1rem;
  background-color: rgba(78, 75, 97, 0.9);
  list-style-type: none;
  position: absolute;
  left: 70%;
  border-radius: 1rem;
  border:1px solid #25797c;
}

#menuItems li {
  padding: 1rem;
  border-bottom: 1px dotted #fff;
}

#menuItems li:last-child {
  border:0;
}

.navbar div:hover, .navbar div:hover a, #menuItems li:hover, #menuItems li:hover a {
  color: #25797c;
  background-color: #c5edac;
  border-radius: 0.2rem;
}

#menuItems li:hover a:hover, .navbar div:hover a:hover {
  color: #25797c;
}

.menuUser {
  padding: 0.2rem 0.8rem;
  color:#25797c;
  background-color: transparent;
}

.menuUser:hover{
  background-color: #c5edac;
}

img.portrait {
  width: 60px;
  border:4px solid #25797c;
  border-radius: 5rem;
}

.menuUser:hover {
  background-color: #c5edac;
  color:#25797c;
  border-radius:0.4rem;
}

.menuUser:hover impg.portrait, img.portrait:hover {
  border-color:#25797c;
}

.menuUser:hover a, .menuUser:hover a:hover {
  color:#25797c;
}

content {
  width: 60%;
  margin: 5rem auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
}

.sidebar {
  display:block;
  width: 14%;
  margin: 0.3rem 0;
  padding: 0 3%;
}

.content {
  width:80%;
}

h3.title {
  font-size: 1.5rem;
  font-weight: 400;
  margin:1rem 0 2rem;
  padding:0.5rem 0;
}

h3.title::first-letter {
  text-transform: uppercase;
}

div.section {
  background: rgb(35,68,91);
  background: -moz-linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  background: linear-gradient(90deg, rgba(35,68,91,1) 0%, rgba(37,121,124,1) 50%, rgba(35,68,91,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23445b",endColorstr="#23445b",GradientType=1); 
}

.modal-content {
  width: 50%;
  background-color: #fff;
  padding: 2rem;
  border-radius: 2rem;
}

form {
  display: block;
  width:100%;
  padding:0;
  margin:0 auto;
}

.form_footer, .container {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: baseline;
  align-content: center;
  margin: 0;
}

.container {
  padding:0.3rem;
  justify-content: flex-end;
}

label {
  width: 30%;
  display: flex;
  align-content: stretch;
  justify-content: right;
  align-items: center;
}

.menuLogin {
  font-weight: 700;
}

.menuLogin:hover {
  padding-right:2.3rem;
}

.modal-header {
  margin-top: -1rem;
  padding: 0;
  background-color: transparent;
  border:0;
  font-size: 1.5em;
  font-weight: 700;
  text-align: right;
  z-index: 9999;
}

.modal-header a, .modal-header a:visited, .modal-header a:active {
  color: #25797c;
  text-decoration: none;
}

.modal-header a:hover {
  color: #d62828;
  text-decoration: none;
}

a.button {
  display: block;
  width: 100%;
  padding: 1rem 0;
  margin: 2rem auto 0;
  font-size: 1.3rem;
  background-color: #25797c;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 1rem;
}

a.vertical {
  margin: 0.8rem auto;
  padding: 0.5rem 0;
  border-radius: 2rem;
}

a.button:hover {
  background-color: #23445b;
}

a:disabled {
  background-color: red;
}

.form_footer {
  margin: 0 auto;
  padding: 2% 0;
  width: 88%;
  color: #25797c;
  border-top: 1px solid #25797c;
  }
  
body.erreurs h2 {
  color:white;
  background-color:#d62828;
  padding: 1%;
  margin:0 auto;
  text-align: center;
} 

h2.message {
  /* background-image: background: rgb(37,121,124); */
  background: linear-gradient(90deg, rgba(37,121,124,1) 0%, rgba(35,68,91,1) 50%, rgba(37,121,124,1) 100%);
  color: white;
  padding: 0.7rem;
  margin: 1rem auto 2rem;
  text-align: center;
}

.points, .points-gap {
  width: 100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:stretch;
  align-content:flex-start;
}

.points-gap {
  gap:30px;
}

.flex-stretch {
  display:flex;
  align-items:stretch;
}

body.erreurs div {
  padding:1%;
}

div.erreur {
  color: #d62828;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

.form_footer div {
  text-align: center;
}

.form_footer a {
  color:#305658;
  font-weight: 600;
  text-decoration: none;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Add Animation */
@keyframes pseudo-modal {
  0% {height: 0vh;}
  100% {height: 100vh;}
}

@media screen and (max-width: 600px) {
  input[type=text], input[type=password] {
    width:60%;
    padding: 12px 20px;
    margin: 4% 0 0 2%;
  }
  label {
    width:38%;
  }
  button[type=submit] {
    margin: 4% 0;
  }
}