@import url(https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Sacramento&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Handlee&display=swap);
/* Cacher le footer */
#footer-container {
  display: none;
}

/* cacher la zone permettant de se logger */
.user-login .settings__fields{
display:none;
}
/* Fond noir du body et empécher l'ascenceur vertical */
body{
background-color:black;
overflow-x: hidden;
}

header a, header a:hover, header a:visited {
  text-decoration: none;
  color: #000;
}

.loginBloc  {
  background-color: rgba(202,70,70,0);
}
.loginBloc span {
  color: rgb(0,0,0);
}

.loginButton  {
    background-color: rgb(181,181,181);
}

.wrapper{
 background: rgb(208,255,229);
background: -moz-linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
background: linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0ffe5",endColorstr="#71cce4",GradientType=1); 
}

.sidebar{
    flex: 0 0 5px;
opacity:0;
transition-duration: 500ms;
transition-property: flex opacity;
background: rgb(16,33,74);
background: -moz-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);


}

.sidebar:hover{
    flex: 0 0 512px;
opacity:1;
transition-duration: 500ms;
transition-property: flex opacity;
background: rgb(16,33,74);
background: -moz-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 70%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 70%, rgba(55,96,82,1) 100%);
background: linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 70%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);

}


.event {
  border-bottom: 0.1em solid #3A6E8C;
    padding: 0em 0em 0em 1em;
    }

.article__header:hover{
    
}

.article__description:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 16em;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(48%, rgba(255,255,255,0)), to(rgba(255, 255, 255, 0)));
  background-image: -o-linear-gradient(right, rgba(255,255,255,0) 48%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to left, rgba(255,255,255,0) 48%, rgba(255, 255, 255, 0) 100%);
}

.event:hover .article__description:after,
.event--focused .article__description:after {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(6em, rgba(221,221,221,0)), to(rgba(221, 221, 221, 0)));
  background-image: -o-linear-gradient(right, rgba(221,221,221,0) 6em, rgba(221, 221, 221, 0) 100%);
  background-image: linear-gradient(to left, rgba(221,221,221,0) 6em, rgba(221, 221, 221, 0) 100%);
}

.event:not(.event--focus):hover, .event--focused:not(.event--focus) {
 background: rgb(208,255,229);
background: -moz-linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
background: linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0ffe5",endColorstr="#71cce4",GradientType=1);     
}

.feed {
    background-color: #ffffff00;
}

.folder__item:hover, .folder__item:active,
.feed__item:hover,
.feed__item:active {
background: rgb(16,33,74);
background: -moz-linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
background: linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);

}

.settings {
position: relative;
padding: 13px 10px;
min-height: 34px;
background-color: rgba(0,0,0,0.28);
z-index: 1000;}

[class~="event--read"] .article__title a {
  color: #868686;
  font-style: italic;
    font-weight: normal ;
    text-align: center;
}

.logo .versionBloc {
  color: #000;
}

/* ------------------------------------------------ */

#header-container, #footer-container, #main aside {
  background: rgba(0,0,0,0);
box-shadow: 0 0px 0px #ffffff00;
}
.wrapper {
width: 100%;
padding: 5px 0px 0px 0px;
}
#header-container {
  border-bottom: 1px solid rgb(0,0,0);
}
nav a {
  display: block;
  margin-bottom: 10px;
  background: rgba(187,78,47,0)00;
  color: #000000;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  transition: background 0.5s ease-in-out ;
    transition-duration: 200ms;
    transition-property: font-size margin-bottom;
}
nav a:hover {
  display: block;
  margin-bottom: 0px;
  background: rgba(0,0,0,0)00;
  color: #000000;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 40px;
  transition: background 0.5s ease-in-out;
    transition-duration: 200ms;
    transition-property: font-size margin-bottom;
    
}
nav {
  float: right;
  width: 17%;
  margin-right: 0px;
}




#main aside{
  color: #000000;
  padding: 0px 1% 10px;
  margin-bottom: 10px;
    border-top: 1px solid rgba(255,255,255,0);
    box-shadow: 0 0px 0px rgba(170,170,170,0);
    text-align: right;
    margin-right: 20px;
}
#main aside .toggle {
    color:rgb(0,0,0);
    font-size: 16px;
    
}
#main aside .pointer {
    color:rgb(0,0,0);
    font-size: 16px;
}

#main aside .toggle:hover {
    color:rgb(0,0,0);
    font-weight: bold;
}
#main aside .pointer:hover {
    color:rgb(0,0,0);
    font-weight: bold;
}
#main.settings aside a {
  font-size: 16px;
}



#main aside{
  color: #000000;
  box-shadow: inset 0 0 20px 0 #0b0b0b;
  border-top: 0px solid rgba(241,102,41,0);
  border-left: 0px solid rgba(241,102,41,0);
    text-align: right;
    margin-right: 10px;
    
    
}
#menuBar aside h3 {
  margin: 0px;
   
}
#main #menuBar aside {
  padding: 0px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

textarea {
  width: 99%;
  height: 100%;
  font-size: 16px;
  font-family: Monospace;
}

#main article section.eventSelected, .settings article section {
  box-shadow: inset 0 0 10px 0 #0b0b0b;
  border-top: 0px solid rgba(241,102,41,0);
  border-left: 10px solid rgba(241,102,41,0);
    
}

.settings .feedListItem {
  clear: right;
  border-bottom: 1px solid #3A6E8C;
}

.settings .feedVerbose {
  min-width: 1em;
  float: left;
    

}

.settings .feedsList {
  margin: 0;
  padding: 0;
  list-style: none;

}

#main article section a.underlink, #main article a.underlink, .underlink {
  font-size: 16px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left:12px;
    background-image: url(https://cdn-icons-png.flaticon.com/512/56/56992.png);
    background-size: 10px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    text-indent: -999px;
    
}	

/* Modifie la case à cocher afin de l'aligner verticalement */ 

.feedAction, .feedButtons {
  display: inline-flex;
  vertical-align: middle;
}

/* Modification du menu de présentation des flux (suite) */
#main button, .loginButton, .button, .readUnreadButton {
  background-color: rgba(13,102,124,0.27);
  border: 0px;
  color: #000;
  text-decoration: none;
  padding: 0.4em 0.8em;
    margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  min-width: 35px;
  text-align: center;
  vertical-align: middle;
    border-radius: 4px;
}

#main button:hover, .loginButton:hover, .button:hover, .readUnreadButton:hover {
  background-color: rgb(13,102,124);
  border: 0px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  padding: 0.4em 0.8em;
    margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  min-width: 35px;
  text-align: center;
  vertical-align: middle;
    border-radius: 4px;
}

#main article section a, #main article a {
  color: #0d667c;
    font-size: 16px;
    font-weight: bold;
}


/* Virer la barre "dashed" dans la gestion des flux */

#main article section {
  border-bottom: 3px solid rgba(255,255,255,0);
padding-left: 20px;
  overflow: hidden;
}
@font-face {

  font-display: swap;
}
h2{
    font-size: 48px;

font-family: Tangerine, cursive;
font: 'Tangerine';
}

h3{
    font-size: 24px;

font-family: Handlee, cursive;
font: 'Handlee';
}

p {
    font-size:16px;
}

form {
    font-size:16px;
}

span {
    font-size:16px;
}

h1 span {
    font-size: 16px;
}
.logo{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCAYAAAB0WahSAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSItDu2g4pChOlkQFXGUKhbBQmkrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE1cVJ0UVK/F9SaBHjwXE/3t173L0DhGaVqWbPBKBqlpFOxMVcflUMvCKAMEIYgiAxU09mFrPwHF/38PH1LsazvM/9OUJKwWSATySeY7phEW8Qz2xaOud94ggrSwrxOfG4QRckfuS67PIb55LDAs+MGNn0PHGEWCx1sdzFrGyoxNPEUUXVKF/Iuaxw3uKsVuusfU/+wmBBW8lwneYIElhCEimIkFFHBVVYiNGqkWIiTftxD/+w40+RSyZXBYwcC6hBheT4wf/gd7dmcWrSTQrGgd4X2/4YBQK7QKth29/Htt06AfzPwJXW8deawOwn6Y2OFj0CBraBi+uOJu8BlzvA4JMuGZIj+WkKxSLwfkbflAfCt0D/mttbex+nD0CWulq+AQ4OgbESZa97vLuvu7d/z7T7+wE3D3KPfAL3ugAAAAZiS0dEAHgAeAB3pGLNBgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+cHEw0bBn+UWAcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACiUlEQVRYw+2YQWsTQRSAvzdNqlaiFbqKSiCCGyWai4cSiYoHBQWl6kUhFDzqSSqCHvwFotCblx70ol4E9eBBaT3oRVEU0SBCiuitUaxKpTbtrodMYAlJs7vZSUTy4LEL+5j59s3Me28e/GditzuAiggk9q+A0AOpk3S7A/RF+ENfe0vTA+mB+JQkcFwptaLbP/MYcIFjXfOIZVkCFDXIdLc8MQqUNIQL/AFuAzs6BTACXAAcD4RXXwDngY2mQXYC35tA1PSeUqrf9B7ZBAy2sEk5jrNg2iMTLbzhAovAsFGKQqEwopRaFiSdTpcSiYQYBRGRNcCrFh4516mTkwN+N4F4pGE7JluBuzp+uDqmjCmlVnYKIGPb9kXgHTDnAZkDyrZtT2YymYKIrDWxL9YD24FnywSyep1JJpMTSql+EVkXFcsD4JNPgHotAifbmXwLsAs4A8yHhKhpWUQGgX0iYoXxQhH41iZETaf082iYgmc6IoiaXonFYn1Bg9bZiCFcoBzoMiYilmVZswZAXOBGkGXZbQjCBV42qm+97YTNwEHgPZA1GBC3OY4zBOwHyvF4fLJSqSx5DR56qJ8Y9EgFeKrfl4DDXohruVxu0eDkTTWfz38B9lbLNKVWA9f1xx/ALYOTLwA3PflpT6Mja+tkddogyC8RWaVzV9JPgWwKZKpRqaCaxJESMGPo1Lx2HGfeX2lfJT4VIOX71beB21w6J1yKEGI2VK9NRIZ0XfrZh2c+tPj+U2fxO2EuWKJv+ieAy6lUqlGzrgKMA4eAj40GyWazb4ADwFVdXjadLEj+Gdfl4rCOjveB57Xj77ruKNV2eFbbHVFK5X1vzgDLtUE/B1rYDXjtexJG/gIiwNt3ock+5AAAAABJRU5ErkJggg==) 12px center no-repeat;
  font-size: 2.4em;
  height: 50px;
  margin: 0;
  padding-left: 58px;
  padding-top: 5px;
}

input[type="checkbox"]{
    accent-color: #34495e;
}

select {
    
font-size: 16px;
background-color: rgba(255,255,255,0.48);
position: relative;
    
}

input[type="text"]{
    background-color: rgba(255,255,255,0.53);    
}
.feedVerbose {
    accent-color: #34495e;
}

.addBloc {
  margin-left: 0px;
    margin-right: 24px;

}

button, input {
  line-height: normal;
  accent-color: #34495e;
}

#main article section {
  margin-right: 24px;
}

.addBloc p {
    margin: 0px;
}



.settings .feedTitle {
  display: inline-block;
  width: 68%;
  word-wrap: break-word;
}
.settings .feedAction {
  width: 16%;
}

.settings .feedButtons {
  width: 15%;
}
.settings .feedFolder {
  width: 100%;
}


body {
font-family: Comic Neue, cursive;
font: 'Comic Neue';
font-size:16px;
}

/* Bord droit pour les flux sur la page de config des flux : */
.clear {
  clear: both;
  margin-right: 20px;
}

/* Sur la page p rincipale,on augmente la taille des logos dans les articles en la laissant normale dans la sidebar */

.wrapper .article__header img {
  max-width: 32px;
  height: 32px;
  width: 32px;
    vertical-align: middle;
}

[class~="event--read"] .article__title a {
  color: rgba(0,0,0,0.56)      ;
  font-style: italic;
    font-weight:normal;
    
}


/* Change la taille des events si on passe dessus */
.article__header {
  position: relative;
  padding: 0.5em 0;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
}
.wrapper .article__header img {
max-width: 16px;
height: 16px;
width: 16px;
vertical-align: middle;
}

.article__header:hover {
  position: relative;
  padding: 0.5em 0;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 16px;
}
.wrapper .article__header:hover img {
max-width: 32px;
height: 32px;
width: 32px;
vertical-align: middle;
}
.article__header .article__feed-title {
  width: 10%;
}
.article__header:hover .article__feed-title {
  width: auto;
    min-width: 10%;
}

/* change la taille des éléments dessus par hover */
.sidebar-item-label, .folder__item a {
    font-size: 14px;
}
.sidebar-item-label:hover, .folder__item a {
    font-size: 18px;
    font-weight: bold;
}

/* Change la couleur et le style des liens visités dans la liste d'article */

[class~=event--read] .article__title a {
  color: #2c84a0;
    font-style: italic;
    font-weight: bold;
}


/* Surligne en blanc le feed dans le panneau de config des feed */

.settings .feedListItem:hover {
  clear: right;
  border-bottom: 1px solid #3A6E8C;
    background-color: rgba(255,255,255,0.46);
}

/* Modif de la taille des dossiers dans les zones de sélection */
.settings .feedFolder {
  width: 100%;
  font-size: 12px;
}