*
{
	  font-family: 'Roboto', sans-serif;
	  color: #ebebeb;
}

body
{
	background-image: url("img/bg.png");
  margin-bottom: 0;
}

head
{
	margin-top: 0;
}

a
{
	color:inherit;
	text-decoration: inherit; 
}

h1
{
  color:inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

h2
{

  color:inherit;
  font-size: 26px;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

.imglink
{
    font-size: 0;
}

.banner
{
background-image: url("img/banner.png");
display:block;
height:150px;	
width:60%;
margin-top:30px;
margin-left:auto;
margin-right:auto;
border-radius: 4px;
transition: 300ms ease-out;

}

.logo
{
position: absolute; 
top: 10px; 
left: 25%; 
pointer-events: none;
transition: 500ms ease-out;
z-index: 3; 
}

.random
{
position: absolute; 
top: 0px; 
right: 25%; 
transition: 500ms ease-out;
pointer-events: none /* z-index -1 passe sous la bannière */
z-index: 2; 
}

.nav-container-flex 
{
  display: flex;
  margin-top: 20px;
  background-color: #1a1a1a;
  margin-left:auto;
  margin-right:auto;
  width: 80%;
  flex-wrap: wrap;

  font-family: 'Roboto', sans-serif; 
  font-size: 30px;
  font-weight:300;
  text-align: center;

  border-radius: 4px;

}

.nav-button
{
  color: #ebebeb;
  padding: 10px;
  margin-left:3%;
  margin-right:3%;
  flex-grow: 8;

}

.nav-button-active
{
	color: #1a1a1a;
	background-color: #ff7d00; 
	padding: 10px;
	margin-left:3%;
	margin-right:3%;
	flex-grow: 8;

}

.nav-login
{
  	color: #00e3a0;
  	background-color: #222222;
  	padding: 10px;
  	flex-grow :1;
  	border-bottom-right-radius:4px;
  	border-top-right-radius:4px;

  	margin-left: auto; /* Colle à droite */
}

.nav-login-active
{
  	color: #222222;
  	background-color: #00e3a0;
  	padding: 10px;
  	flex-grow :1;
  	border-bottom-right-radius:4px;
  	border-top-right-radius:4px;

  	margin-left: auto; /* Colle à droite */
}

.nav-button:hover
{
  color: #ff7d00;
  transition: 125ms ease-out;
}

.nav-button-active:hover
{
	color: #ebebeb;
	transition: 125ms ease-out;
}

.nav-login:hover
{
	color: #ebebeb;
	transition: 125ms ease-out;
}

.nav-login-active:hover
{
	color: #ebebeb;
	transition: 125ms ease-out;
}


.user0
{
  color : #00e3a0;
}
.user1
{
  color : #ff002a;
}
.user2
{
  color : #ff7d00;
}

.threader /* ORANGE */
{
  font-family: 'Ubuntu', sans-serif;
  font-weight:400;
  width :70%;
  color: #1a1a1a;
  background-color: #ff7d00;
  margin-left:auto;
  margin-right:auto;
  font-size: 40px;
  text-align: center;
  margin-top:20px;
  padding-top: 5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: solid 6px #111;
  transition: 300ms ease-out;
}

.threader-adapt /* ORANGE */
{
  font-family: 'Ubuntu', sans-serif;
  font-weight:400;
  width :70%;
  color: #1a1a1a;
  background-color: #ff7d00;
  margin-left:auto;
  margin-right:auto;
  font-size: 40px;
  text-align: center;
  margin-top:20px;
  padding-top: 5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: solid 6px #111;
  transition: 300ms ease-out;
}



.body-container-flex /* RED */
{
  display: flex;
  background-color: #1a1a1a;
  margin-left:auto;
  margin-right:auto;
  width: 70%;
  flex-direction: column;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: 300ms ease-out;

 /* border-color:red;
  border-style: solid;
  border-width: 2px;*/
}

.body-thread-flex /* GREEN */
{
  display: flex;
  flex-direction: row;

  border-color: #111;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 6px;
  

 /* border-color:green;
  border-style: solid;
  border-width: 2px;
  */

  flex-wrap: nowrap; /* On wrap PAS en cas d'overflow*/



}

.body-sub-thread-flex /*BLUE*/
{
  display: flex;
  flex-direction: column;

  /*border-color:blue;
  border-style: solid;
  border-width: 2px;*/
  flex-basis: 50%;
  margin-left: 10px;

}

.body-sub-thread-mini-flex /* LIME */
{
  display: block;
  /*border-color:lime;
  border-style: solid;
  border-width: 2px;*/
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  flex-basis: 300px; /* Marche qu'en Row */

  background-color: #e1e1e1; 
  text-align: center;

}

.body-sub-thread-bump-flex /* PINK */
{
  display: flex;
  flex-direction: column;

  /*border-color:pink;
  border-style: solid;
  border-width: 2px;*/
  flex-grow: 2;
  flex-shrink: 5;
  padding-left: 5px;

  border-color: #222;
  border-style: dotted;
  border-width: 0;
  border-left-width: 2px;

}

.body-sub-col-flex /* PURPLE */
{
  display: flex;
 /* border-color:purple;
  border-style: solid;
  border-width: 2px;*/
  align-items: center;
  flex-grow: 8;
  padding-left: 3px;
  padding-right: 3px;


}

.miniature
{
  object-fit: fill;
  border:0;


}

.nombre-posts
{
  font-size: 24px;
  margin-bottom: 2px; 
}

.xposts
{
  margin-top:3px;
  margin-right: 1px;
}

.black
{
  font-size: 18px;
  font-weight: 600;
  font-variant: small-caps;
  color: #4d4d4d;
  transition: 200ms ease-out;
}

a.black:hover
{
  color:#7d7d7d;
}

.lien:hover
{
  color:#ff7d00;
  transition: 125ms ease-out;
}


.thread-container-flex /* Thread */
{
  display: flex;
  background-color: #1a1a1a;
  margin-left:auto;
  margin-right:auto;
  width: 70%;
  flex-direction: column;

  transition: 300ms ease-out;
  object-fit:scale-down;
  text-align: center;
  /*clear:all;*/
  margin-bottom: 20px;


  border-bottom: solid 6px #111;

 /* border-color:red;
  border-style: solid;
  border-width: 2px;*/
}

.user-card-flex /*ivory*/
{
  width: 300px;
  display: flex;
  position: absolute;
  margin-top:30px;
  background-color: #4e3975;
 /* border: solid 3px #111; border: solid 3px ivory; */
  flex-direction: column;
  float: left;
  right:78%;
  z-index: 2;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  padding: 6px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.22);

}

.user-card-avatar-flex /*yellow*/
{
  background-color: #3d2b5e;
/*border: solid 3px yellow;*/
}

.user-card-pseudo-flex /*red*/
{
 text-align: left;
/*border: solid 3px red;*/
font-size:23px;
font-weight: 600;
background-color: #3d2b5e;
padding-left: 10px;
padding-right: 10px;
line-height: 30px;
border-bottom: solid 3px #4e3975;

}

.user-card-sub-flex /*salmon*/
{
  flex-direction: row;
  /*border: dashed 3px pink;*/
  color:#1a1a1a;

  padding-left:15px;
  padding-right: 5px;
  flex-grow: 0;
  background-color: #3d2b5e;
  margin-left:auto;
}

.user-card-sub-anchor-flex /*salmon*/
{
  flex-direction: row;
  padding-left:5px;
  padding-right: 15px;
  flex-grow: 0;
  background-color: #3d2b5e;
  color:#ebebeb;
  font-weight:400;
  font-size:20px;
  font-variant: none;
}

.user-card-sub-anchor-flex:hover
{
color:white;
}


.user-card-spoiler-flex /*orange*/
{
    /*border: dotted 3px orange;*/
    color:#f13529;
    /*font-variant: small-caps;*/
    background-color: #6a1836;
    font-size:20px;
    flex-grow: 1;
    cursor: pointer;
    border: solid 1px #f13529;
    transition: 200ms;
}

.user-card-spoiler-flex:hover
{
color:#ebebeb;
}


.user-card-parent-flex /*blue*/
{
  display:flex;
  flex-direction: row;
  /*border: dashed 3px blue;*/
  flex-grow: 1;
}

.user-card-parent-date-flex /*lightblue*/
{
  display:flex;
  flex-direction: row;
  /*border: dashed 3px lightblue;*/
  flex-grow: 0;
  background-color: #3d2b5e;
}




.imgpost
{
    object-fit:scale-down;
    margin-bottom: -4px; /*Débug les 4px sous l'image */
    min-height: 500px;
}


.thread-post-image
{
  /*background-image: url("img/favicon.PNG");*/
  /*background-attachment: fixed;*/
  /*background-color: #111;*/
  /*border: dotted 5px purple;*/
  align-self: center;
}

.reply-container-flex /* TEAL */
{
  display:flex;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  /*background-color:#1a1a1a;*/
  /*border:dashed 4px yellow;*/
}

.reply-upload-flex /*TURQUOISE*/
{
background-color: #1a1a1a;
/*border:dashed 4px slategrey;*/
width: 50%;
text-align: center;
flex-direction: row;
display: flex;
padding: 10px;
}

.reply-instructions-flex /* ORANGE */
{
display: flex;
margin-left: auto;
background-color: #1a1a1a;
/*border:dashed 4px black;*/
padding:15px;
width: 50%;
flex-grow:0;
align-self: flex-start;
border-left: solid 3px #333;
}

.reply-form-flex
{
background-color: #1a1a1a;
/*border:dotted 4px black;*/
flex-grow: 5;
}

.reply-button-flex
{
background-color:#ed1c24;
color:#fff5bf;
align-self: flex-end;
height: 100%;
font-size: 30px;
border: solid 2px #b3151b;
}

.reply-button-flex:hover
{
cursor: pointer;
}

.reply-button-flex:active
{
background-color: #b3151b;
color: #f3af8c;
}

.reply-button-container
{
  flex-direction: column;
  background-color: green;
}

.spoiler-input
{
  resize:none;
  background-color: #111;
  border-radius: 5px;
  color:#333;
  transition: 300ms;
  width: 100px;
  height: 30px; 
  text-align: center;
  font-size: 1.7em;
  font-variant: small-caps;
  line-height: 23px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  overflow: hidden;
  border-color:#333;
  margin-top:10px;

}

.spoiler-input:focus
{
text-align: left;
width:70%;
height: 150px;
overflow: auto;
padding: 20px;
font-size:15px;

}

.spoiler-input:focus::-webkit-input-placeholder {
  opacity: 0;
}

.spoiler-input:not(:placeholder-shown) {
  background-color: #6a1836;
  color:#f13529;
  font-size:15px;
  font-variant: none;
  width:70%;
  height: 150px;
  padding: 20px;
  text-align: left;
}

.floating-nav /* Navigateur */
{
line-height: 0px;
position: fixed;
top:300px;
margin-left: 94%; 
}

.footer
{
  width :70%;
  background-color: #151515;
  margin-left:auto;
  margin-right:auto;
  font-size: 30px;
  text-align: center;
  margin-top:20px;
  padding-bottom: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: 300ms ease-out;
}

.global-container-flex /* Global */
{
  display: flex;
  background-color: #1a1a1a;
  margin-left:auto;
  margin-right:auto;
  width: 70%;
  flex-direction: column;

  transition: 300ms ease-out;

  margin-top: 20px;
  margin-bottom: 20px;

  padding: 20px;

}

.spoiler-content
{
width: 70%;
margin-top:-20px;
margin-left:auto;
margin-right: auto;
margin-bottom:20px;
background-color: #6a1836;
color: #f13529;
border : solid 1px #f13529;
padding: 10px;


}

@media only screen and (max-width: 1720px) /* Largeur PC de prolo */
{

.spoiler-content
{
  margin-left:315px;
}


.thread-container-flex
{

  margin-left: 315px;
  margin-right:auto;
 /*background-color: red;*/

}

.user-card-flex
{
  left:25px;
  right: 0;
}

.threader-adapt
{
  margin-left: 315px;

}
.reply-container-flex
{
  margin-left: 315px;
}


}

@media only screen and (max-width: 1400px) /* Largeur Bannière Mobile */
{

.spoiler-content
{
  margin-left:auto;
}

.user-card-flex /*ivory*/
{
  left:auto;
  clear:none;
  padding:0;
  flex-direction: row;
 /* float:none;*/
  right:auto;
  margin:0;
  background-color: #3d2b5e;
  position: relative;
  width:auto;
}
.user-card-sub-flex
{
margin-top: 4px;
}
.user-card-avatar-flex
{
  display:none;
}

.threader-adapt
{
  margin-left: auto;

}
.user-card-pseudo-flex 
{
  border:0;
}



.thread-container-flex
{

  margin-left: auto;
  margin-right:auto;
  /*background-color: cyan;*/
  height: auto;
  align-self: flex-start;
}
.threader-adapt
{
  margin-left: auto;
}
.imgpost
{
  width: 100%;
  height: 100%;
  align-self: auto;
  object-fit: scale-down;
  min-height: 100px;
}
.user-card-parent-date-flex
{
  flex-direction: row-reverse;
}
.reply-container-flex
{
  margin-left: auto;
}

.user-card-sub-anchor-flex /*salmon*/
{
    margin-top:4px;
}

}



@media only screen and (max-width: 1000px) /* Largeur Bannière Mobile */
{


  .spoiler-content
  {
  width: 100%;
  }

  .footer
  {
  width:100%;
  }

  .logo
  {
  left:2%;
  }

  .banner
  {
  width:100%;
  }

  .random
  {
  right:0px;  
  }

  .threader
  {
  width: 100%;
  border-bottom-width: 12px;
  }

  .body-container-flex /* RED */
  {
  width: 100%;
  }

  .body-thread-flex /* GREEN */
  {
      flex-direction: column;
        border-bottom-width: 12px;
  }
  .body-sub-thread-bump-flex  /* PINK */
  {

    flex-direction: row;
    border-left-width:0;
    border-top-width: 3px;
  }
  .body-sub-thread-mini-flex /* LIME */
  {
    flex-grow: 0;
    flex-basis: 0;
  }

  .body-sub-thread-flex /* BLUE */
  {
    margin-top:5px;
  }

  .thread-container-flex
{

  margin-left: auto;
  margin-right:auto;
  /*background-color: yellow;*/
  width: auto;
}
.threader-adapt
{
  width: auto;
}

.reply-container-flex /* TEAL */
{
  flex-direction: column-reverse;
  width: auto;
}

.reply-instructions-flex
{
  width: auto;
  margin:auto;
  border-left: none;
  border-bottom-width: 3px;
  border-bottom-color: #515151;
  border-bottom-style: solid;

}
.reply-upload-flex
{
width: auto;
}
.reply-button-flex
{
align-self: center;
}

.global-container-flex
{
  width:100%;
}





}



@media only screen and (max-width: 1450px)
{
  .floating-nav
  {
    visibility: hidden;
  }
}


/* Scrollbar -------------------------*/

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #111; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #333333; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff7d00; 
}
/* -------------------------------------*/

/* TOOLTIPS */

.date
{
text-transform: lowercase;
font-variant: small-caps;
display: inline-block;
color:#ebebeb;
margin-top:3px;
margin-left:2px;
cursor: help;
}


.date .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #222;
  color: #aaa;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  margin-top:7px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.date .tooltiptext::after {
  content: "";
  position: absolute;
  border: solid transparent;
  bottom :100%;
  left: 60%;
  pointer-events: none;
  border-color: transparent transparent #222 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.date:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}




/* styles de base si JS est activé */
.js .input-file-container {
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 225px;
}
.js .input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #111;
  color: #757575;
  font-size: 25px;
  line-height: 15px;
  font-weight: 600;
  transition: all 300ms;
  cursor: pointer;
  border-radius: 5px;
  border : solid 1px #333;
}

.js .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  padding: 14px 0;
  opacity: 0;
  cursor: pointer;


}
 
/* quelques styles d'interactions */
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  background: #ed1c24;
  color: #fff5bf;
  border : solid 1px #b3151b;
}
 
/* styles du retour visuel */
.file-return {
  margin: 0;
  color:#ed1c24;
}
.file-return:not(:empty) {
  margin: 5px 0;
}
.js .file-return {
  /*
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
  */
}
/* on complète l'information d'un contenu textuel
   uniquement lorsque le paragraphe n'est pas vide */
.js .file-return:not(:empty):before {
  content: "";
  font-style: normal;
  font-weight: normal;
}

::selection {
  background: #ff7d00; /* WebKit/Blink Browsers */
}