/*
color blue : #7289da
color black : #2c2b32
*/
.hidden{
  display: none;
}
body,html{
  margin:0;
  padding:0;
  font-family:poppins,sans-serif;
  overflow: visible;
  height: 100%;
  width:100%;
  position: fixed;
}
body>*{
  max-width: 100%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
/* SETTING UP THE CONNECTION COMPONENT */
#connection-component:not(.hidden){
    display: flex;
}
#connection-component{
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  height:200px;
  width:300px;
  overflow: hidden;
  position: relative;
}
#connection-component>.formulaire{
  width:100%;
  height:100%;
  margin-right: 30px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  padding:20px 10px;
  box-sizing: border-box;
}
#connection-component>.formulaire>input{
  border: #2c2b32 1px solid;
  background: #fff;
  border-radius: 5px;
  padding:4px 7px;
  color:#2c2b32;
  box-sizing: border-box;
}
#connection-component>.formulaire>input:focus-visible{
  outline:#7289da 1px solid;
}
#connection-component>.formulaire>input[type="button"]{
  font-weight: 600;
}
#connection-component>.formulaire>input[type="button"]:hover{
  background-color: #7289da22;
}
#connection-component>.formulaire>input:nth-child(3):not(:hover){
  -webkit-text-security: disc;
}
#connection-component>.formulaire>span{
  font-size: 20px;
  font-weight: 700;
  color:#2c2b32;
  text-decoration: underline #7289da from-font;
}
#connection-component>.action{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  padding:0 20px;
  width:200px;
  height:30px;
  position: absolute;
  transform-origin: top right;
  transform: rotate(90deg) translateX(100%);
  box-sizing: border-box;
  top:0;
  right:0;
  user-select: none;
}
#connection-component>.action>span{
  color:#2c2b32;
  position:relative;
}
#connection-component>.action>span.selected,#connection-component>.action>span:hover{
  color:#7289da;
}
#connection-component>.action>span.selected::before{
  width:130%;
  content:'';
  position:absolute;
  left:50%;
  bottom:-5px;
  transform: translateX(-50%);
  border-bottom: 1px solid #7289da;
}


/*SETTING UP OF THE CONNECTED COMPONENT’S CONTAINER*/
#connected-component:not(.hidden){
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  width:60%;
}
#connected-component>*{
  position: relative;
  max-height: 50vmin;
  overflow-y: auto;
}
/* SETTING UP THE CONNECTED COMPONENT OF MES ANIMES EXTENSION*/
#connected-component:not(.hidden)>#mes-animes-component{
  display: flex;
}
#connected-component>#mes-animes-component{
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  min-height:100px;
  width:300px;
  user-select: none;
  padding:2px;
}
#connected-component>#mes-animes-component>.animes-conteneur{
  overflow-y: auto;
  overflow-x: hidden;
  width:calc(100% - 20px);
  margin:0 10px 2px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  text-align: center;
  max-height: 250px;
  transform-origin: top;
  height:0;
}
#connected-component>#mes-animes-component>.animes-conteneur>a{
  text-transform: capitalize;
  color:#2c2b32;
  font-weight: 600;
  margin:2px;
  position:relative;
  text-decoration: none;
  transition: 100ms ease-in-out all;
  width:100%;
  box-sizing: border-box;
}
#connected-component>#mes-animes-component>.animes-conteneur>a:hover,
#connected-component>#mes-animes-component>.animes-conteneur>a.hover{
  background: #7289da33;
}
#connected-component>#mes-animes-component>.animes-conteneur>a[data-iscoupdecoeur]:hover,
#connected-component>#mes-animes-component>.animes-conteneur>a[data-iscoupdecoeur].hover{
  background: #ff00d144;
}
#connected-component>#mes-animes-component>.animes-conteneur>a:not([data-iscoupdecoeur])[data-isinredlist]:hover,
#connected-component>#mes-animes-component>.animes-conteneur>a:not([data-iscoupdecoeur])[data-isinredlist].hover{
  background: #74000055;
}
#connected-component>#mes-animes-component>.animes-conteneur.open{
  height:auto;
  position: relative;
}
#connected-component>#mes-animes-component>.opener{
  width:calc(100% - 10px);
  margin:2px 2px 0;
  box-sizing: border-box;
  box-shadow: 0 0 3px #2c2b32;
  color:#fff;
  padding:10px 10px 10px 70px;
  text-transform: uppercase;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  transition: all ease-in-out 200ms;
  opacity: 1;
  background: #2c2b32;
  cursor: pointer;
}
#connected-component>#mes-animes-component>.opener.actif,#connected-component>#mes-animes-component>.opener:hover{
  opacity: .9;
}
#connected-component>#mes-animes-component>.opener::before{
  content:'';
  position:absolute;
  border-top: solid 10px #fff;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
  transform-origin: center 5px;
  left:20px;
  top:50%;
  transform: translateY(-50%);
  transition: all ease-in-out 200ms;
  border-radius: 5px;
}
#connected-component>#mes-animes-component>.opener.actif::before{
  transform: translateY(-50%) rotate(-180deg);
}
#connected-component>#mes-animes-component>#derniers-boutons{
  width:calc(100% - 10px);
  margin:2px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
#connected-component>#mes-animes-component>#derniers-boutons>*{
  box-shadow: 0 0 3px #2c2b32;
  color:#fff;
  background: #2c2b32;
  opacity: 1;
  transition: all ease-in-out 200ms;
  text-decoration: none;
  outline: none;
  border: none;
  font-size: 15px;
  padding:3px 5px;
  cursor: pointer;
}
#connected-component>#mes-animes-component>#derniers-boutons>*:hover{
  opacity: .9;
}


#contextmenu:not(.show){
  display: none;
}
#contextmenu span{
  white-space: nowrap;
  font-weight: 600;
}
#contextmenu{
  position:fixed;
  background: #fff;
  transform: translateY(-100%);
  white-space: nowrap;
  box-shadow: 0 0 5px #2c2b32;
}
#contextmenu>*{
  position: relative;
  padding: 5px 10px;
  margin:1px;
  display: block;
  text-decoration: none;
  color : #2c2b32 ;
}
#contextmenu>*:hover:before{
  background: #7289da33;
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#contextmenu:not(.inredlist)>#redlist-handeler>span.add{
  display: none;
}
#contextmenu.inredlist>#redlist-handeler>span.remove{
  display: none;
}
#contextmenu:not(.incoupdecoeur)>#coupdecoeur-handeler>span.add{
  display: none;
}
#contextmenu.incoupdecoeur>#coupdecoeur-handeler>span.remove{
  display: none;
}


/* SETTING UP THE CONNECTED COMPONENT OF MANGA WED PROGRESSION EXTENSION*/
  /* action en coursw switcher */
#connected-component>#manga-web-progression-component,#connected-component>#manga-web-progression-component *{
    --colorblue:#7289da;
    --colorblack:#2c2b32;
    --globalwidth:300px;
  }
#connected-component>#manga-web-progression-component{
  width:var(--globalwidth);
  padding:20px 20px 10px;
}
#actionEnCours,#actionEnCours *{
  --height:25px;
}
#actionEnCours{
  height:var(--height);
  width:calc(var(--globalwidth)*.8);
  position: relative;
  left:50%;
  transform: translateX(-50%);
  padding:5px 20px;
  border-radius: 50px;
  background-color:var(--colorblue);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
#actionEnCours>span{
  color:#fff;
  font-size:calc(var(--height)*.8);
  position: absolute;
  font-weight: 700;
  letter-spacing: 2px;
  opacity:.9;
}
#actionEnCours::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color: var(--colorblack);
  transition: all ease-in-out 100ms;
}
#actionEnCours[data-action-choisi="0"]::before{
  opacity: 1;
}
#actionEnCours[data-action-choisi="1"]::before{
  opacity: 0;
}
#actionEnCours::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  height: 90%;
  width:calc(var(--globalwidth)/3);
  border-radius: 50px;
  background: #ffffff;
  transition: all ease-in-out 100ms;
  opacity:.9;
}
#actionEnCours:hover::after{
  opacity: 1;
}
#actionEnCours[data-action-choisi="0"]::after{
  transform: translate(calc(calc(var(--globalwidth)/8) + .5px),-50%);
}
#actionEnCours[data-action-choisi="1"]::after{
  transform: translate(calc(calc(var(--globalwidth)/-2) + 12px),-50%);
}
#actionEnCours>span[data-action-id="0"]{
  left:15px;
}
#actionEnCours>span[data-action-id="1"]{
  right:15px;
}
#actionEnCours[data-action-choisi="0"]>span:not([data-action-id="0"]){
  display: none;
}
#actionEnCours[data-action-choisi="1"]>span:not([data-action-id="1"]){
  display: none;
}
/* action conteneur */
#actionEnCours[data-action-choisi="0"] + #action-conteneur>div:not([data-action="0"]){
  display: none;
}
#actionEnCours[data-action-choisi="1"] + #action-conteneur>div:not([data-action="1"]){
  display: none;
}
#action-conteneur>div{
  width:100%;
  margin-top:5px;
  max-height: 500px;
  min-height: 30px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-content: center;
  text-align: center;
  position: relative;
}
#action-conteneur>div>input[type="text"]{
  padding:2px 5px;
  font-size: 15px;
  outline: none;
  margin:2px;
  width:100%;
}
#action-conteneur>div>input[type="text"]::selection{
  background-color: var(--colorblack);
  color:#fff;
}
#action-conteneur>div>input[type="text"]::placeholder{
  user-select: none;
}
#action-conteneur>div>input[type="button"]{
  color:#fff;
  background: var(--colorblack);
  opacity: .9;
  width:100px;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  margin-top: 5px;
  transition: all ease-in-out 100ms;
  user-select: none;
  border-radius: 5px;
}
#action-conteneur>div>input[type="button"]:hover{
  background-color: var(--colorblue);
  opacity: 1;
}
.lien-vers-manga{
  color:var(--colorblack);
  width:80%;
  padding:5px 20px;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  margin:3px 0;
  user-select: none;
}
.lien-vers-manga::before{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:'';
  background-color: var(--colorblue);
  opacity: 0;
  border-radius: 5px;
  transition: all ease-in-out 100ms;
}
.lien-vers-manga:hover::before{
  opacity: .3;
}
.loadingdot.loaded{
  display: none;
}
.loadingdot, .loadingdot *{
  --size:20px;
  --weight:4px;
}
.loadingdot{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  height:var(--size)  ;
  width:var(--size)  ;
  border-radius: var(--size)  ;
  background-color:var(--colorblack);
  overflow: hidden;
}
.loadingdot::before{
  background-color: #fff;
  height:calc(var(--size) - var(--weight));
  width:calc(var(--size) - var(--weight));
  border-radius: calc(var(--size) - var(--weight));
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  content:'';
}
@keyframes loading{
  0%{
    transform: translate(-50%,-50%) rotate(0deg) scale(1);
  }
  10%{
    transform: translate(-50%,-50%) rotate(-720deg) scale(1);
  }
  50%{
    transform: translate(-50%,-50%) rotate(720deg) scaleY(7) scaleX(3);
  }
  100%{
    transform: translate(-50%,-50%) rotate(1440deg) scale(1);
  }
}
.loadingdot::after{
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  content:'';
  height:0;
  width:0;
  position: absolute;
  border-top: calc( var(--size) / 2 ) transparent solid;
  border-bottom: calc( var(--size) / 2 ) transparent solid;
  border-left: calc( var(--size) / 2 ) transparent solid;
  border-right: calc( var(--size) / 2 ) #fff solid;
  border-radius: var(--size);
  animation: loading 6s both infinite linear;
}
#deconnexion{
  color:var(--colorblack);
  position: absolute;
  top:0;
  left:0;
  font-size: 20px;
  font-weight: 600;
  height:20px;
  width:20px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all 100ms ease-in-out;
}
#deconnexion:hover{
  color:var(--colorblue);
}

/* SETTING THE CONNECTED COMPONENT OF THE LINK SUBMISSION UP*/
#link-submission-component,#link-submission-component *{
  --colorblue:#7289da;
  --colorblack:#2c2b32;
}
#link-submission-component{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  width: calc(25vmin + 25vmax);
  margin-top:20px;
}
#link-submission-component>input[type="text"]{
  padding:2px 5px;
  font-size: 15px;
  outline: none;
  margin:2px;
  width:90%;
}
#link-submission-component>span{
    color:var(--colorblack);
    font-size: calc(25px*.8);
    font-weight: 700;
    letter-spacing: 2px;
    opacity: .9;
    user-select: none;
}
#link-submission-component>input[type="text"]::selection{
  background-color: var(--colorblack);
  color:#fff;
}
#link-submission-component>input[type="text"]::placeholder{
  user-select: none;
}
#link-submission-component>input[type="button"]{
  color:#fff;
  background: var(--colorblack);
  opacity: .9;
  width:100px;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  margin-top: 5px;
  transition: all ease-in-out 100ms;
  user-select: none;
  border-radius: 5px;
}
#link-submission-component>input[type="button"]:hover{
  background-color: var(--colorblue);
  opacity: 1;
}