body {
  transition: background-image 5s ease-in-out;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #9b4dca;
  color: white;
  padding: 0;
  padding-left: 10px;
  border-radius : 3px;
}

nav ul {
  background-color : #9b4dca;
  margin : 0;
  padding : 0;
  list-style-type : none;
}

nav ul.info li {
  float : right;
  width : auto;
}

nav ul.info li span, nav ul.info li a {
  display : inline-block;
  padding : 0;
  font-size : 75%;
  margin-left: 5px;
  margin-right : 10px;
  text-decoration: underline;
}

nav ul.info li span.clic {
  cursor : pointer;
}

nav ul li {
  float : left;
  margin : auto;
  padding : 0;
  background-color : #9b4dca;
  width : 120px;
  height : 40px;
  line-height : 40px;
  text-align : center;
}

nav ul li a {
  color : white;
  text-align : left;
  text-decoration : none;
}

nav ul li a:hover {
  color : white;
}

nav ul:not(.info) li:hover {
  background-color : #5f6c76;
}

nav ul li ul {
  display : none;
  z-index : 50;
  opacity : 0;
  position : absolute;
  
  width : 0px;
  
  /*
  transition-property: all;
  transition-duration: 1s;
  */
  
  transition: width 1s ease-in-out;
}

nav ul li ul hr {
  padding : 0;
  margin : 0;
}

nav ul li ul li {
  text-align : left;
  padding-left : 10px;
  width : 150px;
}

nav ul li ul li.new {
  position: relative;
}

nav ul li ul li.new::after {
  content: "NEW";
  position : absolute;
  right : -4px;
  top : -5px;
  width : 40px;
  height : 20px;
  line-height : 20px;

  margin-left : 5px;
  display: inline-block;

  background-color: #F5B027;
  color: black;
  font-size: 6px;
  font-weight: bold;
  text-align : center;
  padding: 1px;
  border-radius: 5px;

  animation: pulse 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

nav ul li:hover ul {
  display : block;
  opacity : 1;
  
  width : 170px;
  border-bottom-left-radius : 10px;
  border-bottom-right-radius : 10px;
  border : 3px solid #9b4dca;
  
  /*
  transition-property: all;
  transition-duration: 1s;
  */

  transition: width 1s ease-in-out;
}
     
nav li:hover ul li {
  float : none;
}
  
div.container {
  width : 1400px;
  margin : auto;
  margin-top : 20px;
}

/*table {
  margin : 0 auto;
}*/

table thead {
  display : block;
  margin : auto;
}

table tbody {
  display : block;
  max-height : 600px;
  margin : auto;
  overflow-y : scroll;
}

table thead tr th, table tbody tr td {
  font-size : 75%;
  vertical-align: top;
}

table thead tr th:has(button), table thead tr th:has(img), table tbody tr td:has(button), table tbody tr td:has(img) {
  vertical-align: middle;
}

table thead tr:nth-child(2) th {
  vertical-align : middle;
  padding : 0;
}

table thead tr th input.tete {
  display : block;
  margin : 0;
  margin : auto;
  width : 110px;
  height : 25px;
}

div.pied {
  width : 1080px;
  margin-left : calc(50% - 540px);
  position : absolute;
  bottom : 10px;
}

span.tag {
	display : inline-block;
	width : 100px;
	background-color : #D27F15;
	color : white;
	font-variant : small-caps;
	border-radius : 3px;
	padding : 3px;
	margin-top : 3px;
}

span.div_tag {
	display : inline-block;
	font-size: 50%;
	width : 100px;
	background-color : white;
	color : #D27F15;
	border : 1px solid #D27F15;
	font-variant : small-caps;
	border-radius : 3px;
	padding : 3px;
	margin-right : 3px;
	cursor : pointer;
}

span.div_tag.selection {
	background-color : #D27F15;
	color : white;
}

div.image {
	float : right;
	width : 450px;
	padding : 0;
	margin : 0;
	vertical-align: bottom;
}

div.image div {
	float : right;
}

div.image div img {
	width : 200px;
	margin : 10px;
	float : right;
}

button img {
  height : 20px;
  vertical-align : middle;
  margin-right : 10px;
}

.spinner {
  animation: spinner-b87k6z 1.2s infinite linear;
}

@keyframes spinner-b87k6z {
  to {
     transform: rotate(360deg);
  }
}

img.preview {
  height : 250px;
}

h4 img {
  float : right;
  width : 32px;
  vertical-align: middle;
  margin-left : 10px;
  cursor : pointer;
}

#toggle, #toggle_stop {
  display: none;
}

label.togglable {
  display: inline-block;;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  margin-left: 0px;
}

label.togglable::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

#toggle:checked + label.togglable, #toggle_stop:checked + label.togglable {
  background-color: #9b4dca;
}

#toggle:checked + label.togglable::before, #toggle_stop:checked + label.togglable::before {
  transform: translateX(20px);
}

:root {
  --form-control-color: #9b4dca;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

form {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control:focus-within {
  color: var(--form-control-color);
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: CanvasText;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

#filtre {
  width : 100px;
}

button.button_badge {
    display : inline-block;
    width : 500px;
    height : 200px;
    margin : 0;
    margin-top : 20px;
    margin-right : auto;
    margin-left : auto;
}

dialog {
  width: 100%;
  height: 100%;
  border: none;
  outline:none !important;
  /*opacity : 90%;*/
}

dialog div.container div.row div.column input, dialog div.container div.row div.column select {
  width: 50%;
  margin-right : 10px;
}

dialog div.container div.row div.column span.combien {
  display: inline-block;
  width: 100px;
  border-radius : 2px;
  background-color: #D27F15;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 2px;
}

div.container div.row div.column form {
  display : initial;
}



/*div.container div.row div.column input + img {
  height : 32px;
  vertical-align: middle;
  cursor : pointer;
  transition: all 1s ease-in-out;
}

div.container div.row div.column input + img:hover {
  content:url("../image/zoomer-96.png");
  transition: all 1s ease-in-out;
}*/

dialog.petit_modele {
  width: 50%;
  height: 80%;
  border: none;
  opacity : 90%;
  /*background-color: lightgrey;*/
}

/*
dialog.petit_modele div.dropzone {
  width: 200px;
  height: 200px;
  border-radius : 50%;
  background-color: white;
  text-align : center;
  margin : auto;
  overflow : auto;
}

dialog.petit_modele div.dropzone span {
  display : inline-block;
  width : 140px;
  height : 80px;
  border-radius: 2px;
  background-color: gold;
  text-align : center;
  padding : 2px;
  margin-top : 60px;
  font-weight: bold;
}

dialog.petit_modele div.dropzone img {
  height : 200px;
}
*/

dialog.petit_modele #content {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background-color: #fff;
  margin : auto;
}

dialog.petit_modele h4 {
  font-weight: bold;
}

dialog.petit_modele #controls input {
  margin-top: 10px;
  height: 50px;
}

#lst_groupe:not(empty) {
  /*border : 1px solid chartreuse;*/
  border-bottom : 1px solid #e1e1e1;
  width : 100%;
  margin-top : 5px;
  padding-bottom : 5px;
}

#lst_groupe span {
  display : inline-block;
  border : 2px solid gold;
  background-color : gold;
  min-width : 100px;
  border-radius: 3px;
  text-align: center;
  font-weight: bold;
  margin : 2px;
  padding-left: 2px;
  padding-right: 2px;
  cursor : pointer;
  vertical-align: middle;
}

#lst_groupe span.interdit {
  border : 2px solid firebrick;
  background-color : firebrick;
  color : white;
  width : 200px;
  cursor : not-allowed;
}

#lst_groupe span.attente {
  border : 2px solid plum;
  background-color : plum;
  color : white;
  width : 300px;
  cursor : not-allowed;
}

#lst_groupe img {
  float : right;
  height : 30px;
  margin : 0;
  margin-left : 5px;
  vertical-align: middle;
  cursor : pointer;
}

#lst_groupe img.inactif {
  opacity : 0.5;
  cursor : not-allowed;
}

#lst_groupe span.selection {
  border : 2px solid goldenrod;
}

button.clignote, span.clignote { 
  animation: blinker 1s step-start infinite;
}

#lst_groupe a {
  font-size : 75%;
  margin-left : 20px;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* 
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  
  margin-right : 10px;
  margin-top : 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #606c76;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  right: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #9b4dca;
}

input:focus + .slider {
  box-shadow: 0 0 1px #9b4dca;
}

input:checked + .slider:before {
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
}


.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}
*/

span.lbl {
  display: inline-block;
  width: 100px;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

#div_role {
  display: inline-block;
  color : white;
  width : 70px;
  height: 24px;
  border-radius : 2px;
  margin-right : 10px;
  text-align: center;
  line-height : 24px;
  vertical-align: middle;
  cursor : initial;
  rotate: -30deg;
  text-decoration: none;
  font-size : 75%;
  font-weight: 400;
  transition: all 1s ease-out;
}

#change_role {
  width: 500px;
  height: 280px;
  border: none;
  opacity: 100%;
  vertical-align: middle;
  text-align: center;
}

#change_role span {
  display: inline-block;
  color : white;
  width : 300px;
  height: 64px;
  border-radius : 4px;
  margin : auto;
  margin-bottom : 24px;
  margin-right : 24px;
  text-align: center;
  line-height : 64px;
  vertical-align: middle;
  text-decoration: none;
  font-size : 200%;
  font-weight: 400;
  cursor : pointer;
}

#change_role span + img {
  opacity : 0;
  height : 64px;
  line-height : 64px;
  margin-bottom : 24px;
  vertical-align: middle;
}

#change_role span:hover + img {
  opacity : 1;
  animation: blinker 1s step-start infinite;
}

#change_role span.selection + img {
  opacity : 1;
}

#div_role.clic_role {
  cursor : pointer;
}

#div_role.clic_role:hover {
  rotate: 0deg;
  transition: all 1s ease-out;
}

#div_role[role="dirigeant"], #change_role span[role="dirigeant"] {
  background-color : #FF6600;
}

#div_role[role="entraineur"], #change_role span[role="entraineur"] {
  background-color : #33CC00;
}

#div_role[role="joueur"], #change_role span[role="joueur"] {
  background-color : #3366CC;
}

#div_role[role="invite"], #change_role span[role="invite"] {
  background-color : #e1e1e1;
}

table tbody tr.no td:nth-child(1) { 
  height : 200px;
  text-align: center;
  font-size: 300%;
  font-weight: bold;
  font-variant: small-caps;
  color: #9B4DCA;
  border : 3px solid #9B4DCA;
}

footer  {
  position : absolute;
  width : 80%;
  margin-left : 19%;
  bottom : 0px;
  /*border : 1px solid plum;*/
  text-align : right;
}

footer img {
  height : 40px;
}



.checkbox-wrapper-19 {
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  vertical-align: middle;
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 16px;
}

.checkbox-wrapper-19 span {
  display : inline-block;
  height: calc(var(--checkbox-height));
  vertical-align: top;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type=checkbox] {
  display: none;
}

.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * .1) solid #606c76;
  border-radius: 3px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #9B4DCA;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}

.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
  border-color: #9B4DCA;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}

a.lien {
  float : right;
  margin-right: 10px;
  margin-top: 6px;
  cursor : pointer;
}






.voir {
  display : inline-block;
  position:absolute;
  background:white; 
  border : 1px solid #9b4dca;
  height : 28px;
  width : 28px;
  transform:translate(0, 5px) rotate(45deg);
  border-radius : 75% 0;
  overflow:hidden;
  cursor : pointer;
}

.ball {
  width:16px; 
  height:16px; 
  background: white;
  border-radius: 50%; 
  border: 6px solid #9b4dca;
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

.shut {
  width:48px; 
  height:24px; 
  top:50%; 
  left:50%;
  position:absolute;
  transform:translate(-50%,-50%) rotate(-45deg);
  z-index:999;
}

.shut span {
  display:block;
  width:100%; 
  height:70%; 
  background:#9b4dca; 
  border-radius: 0 0 60% 60%;
  transition:0.4s all; 
}

.voir:hover >.shut span {
  height:20%;
}

div[role="liste"] {
  position: absolute;
  width : 300px;
  max-height : 200px;
  margin-top : -10px;
  border : 1px solid #9B4DCA;
  background-color: white;
  border-radius: 5px;
  overflow-y: auto;
  z-index:100;
} 

div[role="liste"] div {
  display: flex;
  flex-direction: column;
  margin: 4px;
  margin-right: 10px;
}

div[role="liste"] div:hover {
    background-color: #9B4DCA;
    color : white;
    border-radius: 5px;
}

div[role="liste"] div span {
  min-height : 15px;
  margin: 0;
  margin-left: 6px;
  margin-right: 6px;
  cursor: pointer;
  color : grey;
}

div[role="liste"] div:hover span {
  color : white;
}

div[role="liste"] div span:nth-child(1) {
  font-weight: bold;
  margin-top: 6px;
}

div[role="liste"] div span:nth-child(2) {
  font-size: 80%;
  margin-bottom: 6px;
}

@keyframes slideIn {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes slideOut {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}