body {
  font-family: 'Roboto', sans-serif;
}

.head {
  padding:2rem 0 1rem 0;
  margin:0 auto;
  width:60%;
  min-width:680px;
}

.head .burger {
  margin:1rem;
  float:right;
  height:3rem;
  cursor:pointer;
  opacity:.7;
  transition:opacity .5s;
}

.head .burger:hover {
  transition:opacity .5s;
  opacity:1;
}

.head .title {
  font-size:4rem;
  text-align:center;
  padding:0 0 2rem 0;
  letter-spacing: 1rem;
  color:#88d;
}

.head .subtitle_container {
  width:60%;
  min-width:20rem;
  margin:0 auto;
}

.head .subtitle {
  font-size:1rem;
  text-align:left;
  padding:.4rem 1rem .4rem 1rem;
  letter-spacing: .1rem;
  color:#000;
  background:#eee;
  cursor:pointer;
  border-radius:1.5rem 1.5rem 0 0;
  border:1px solid #aaa;
  transition:background-color .5s;

}

.head .subtitle:hover {
  background:#ccc;
  transition:background-color .5s;
}

.search_input_container {
  position:relative;
  width:60%;
  min-width:20rem;
  margin:-1px auto 2rem auto;
}

.search_input {
  font-size:1.2rem;
  border:1px solid #aaa;
  border-radius:0 0 1.5rem 1.5rem;
  display:inline-block;
  height:3rem;
  width:100%;
  padding:1rem;
  box-sizing: border-box;         
  transition:background-color .5s;
}

.search_input:hover {
  background:#ddd;
  transition:background-color .5s;
}

.icon_wrap {
  position:absolute;
  right:1rem;
  top:1rem;
}

.selector-row {
  width:60%;
  min-width:20rem;
  margin:2rem auto;
  overflow:hidden;
  white-space: nowrap;
  position:relative;
}

.selector {
  width:max-content;
  display:inline-block;
  margin:1rem;
  padding:1rem;
  border-radius:2rem;
  height:1rem;
  background:#fff;
  cursor:pointer;
  transition:background-color .5s;
  border:1px solid #ddd;
}


.selector.selected {
  background:#aaa;
  transition:background-color .5s;
}

.selector:hover, .selector.selected:hover {
  background:#ddd;
  transition:background-color .5s;
}

.react-horizontal-scrolling-menu--wrapper {
  width:70%;
  min-width:600px;
  margin:0 auto;
}
.react-horizontal-scrolling-menu--scroll-container {
  overflow: hidden;
}

.arrow {
  opacity:1;
  transition:opacity .5s;
  height:5rem;
  line-height:5rem;
  font-size:2rem;
  cursor:pointer;
  color:#aaa;
  padding:0 1rem;
  transition:color .5s;

}
.arrow.disabled {
  opacity:0;
  transition:opacity .5s;
}
.arrow:hover {
  color:#888;
  transition:color .5s;
}

.results-list {
  margin:0 auto;
  width:60%;
  min-width:680px;
}

.results-list.inquery {
  opacity:.5;
}


h1.project_header {
  color:rgb(97, 154, 161);
}

.result-item {
  padding:1rem;
  margin:2rem 0 0 0;
  background:#eee;
}

.author {
  font-weight:bold;
}

.author a {
  color:#000;
  text-decoration:none;
}

a.urlcontent {
  text-decoration:none;
  display: flex;
  margin-top:1rem;
}

.leftbox {
  flex:0 0 auto;
  height:5rem;
  margin:0;
  padding:0;
}

.leftbox img {
  height:5rem;
}

.rightbox {
  flex:1 1 auto;
}

.urlbox {
  background:#e0e0e8;
  padding:1rem;
  text-decoration:none;
  color:#000;
}

.results-list .next-button-loading,
.results-list .next-button {
  display:block;
  text-align:center;
  margin:1rem;
  font-size:1rem;
  color:#666;
  cursor:pointer;
  transition:color,opacity 1s;
  opacity:1;
}

.results-list .next-button:hover {
  transition:color,opacity 1s;
  color:#444;
}

.results-list .next-button-loading {
  transition:color,opacity 1s;
  opacity:.3;
}

.result-item-others {
  cursor:pointer;
  margin:1rem 0 0 0;
  display:inline-block;
  color:#666;
  transition:color .5s;
}

.result-item-others:hover {
  color:#000;
  transition:color .5s;
}

.header, .footer {
  display:flex;
}

.footer {
  margin-top:.5rem;
}

.author {
  flex:1 1 auto;
}

.badge {
  display:inline-block;
  padding:.2rem .5rem;
  border-radius:.5rem;
  background:#88d;
  color:#fff;
  vertical-align: super;
  margin-right:.4rem;
}

.tools img {
  opacity:.7;
  transition:opacity .5s;
  cursor:pointer;
}

.tools img:hover {
  opacity:1;
  transition:opacity .5s;
}

.sub-results .result-item {
  margin-top:0;
  border-top:1px solid #ccc;
}

.resume {
  margin-top:1rem;

}

.resume .title {
  text-decoration:none;
  color:#88d;
  font-size:1.1rem;
  font-weight:bold;
}

.login-form {
  height:auto;
  max-height:50rem;
  transition:max-height .5s;
  overflow:hidden;
  display:flex;
  width:100%;
  margin-bottom:3rem;
}


.login-form-bandeau {
  margin-bottom:0;
  max-height:0;
  transition:max-height .5s;
}

.login-form .login-form-box {
  flex:0 0 100%;
  text-align:center;
  position:relative;
  left:-10%;
  transition: left .5s;
  padding:0 10%;
  margin:0;
}

.login-form .login-form-box.left1 {
  left:-130%;
  transition: left .5s;
}

.login-form .login-form-box.left2 {
  left:-250%;
  transition: left .5s;
}

.login-form .login-form-box p {
  margin:0 auto;
}


.login-form .login-form-box .error {
  color:#f44;
  font-weight: bold;
  font-size:1.3rem;
  margin-top:1rem;
}

.login-form .login-form-box .message {
  font-weight: bold;
  font-size:1.3rem;
  margin-top:1rem;
}

.login-form .login-form-box .inputs {
  text-align:center;
  padding:0;
}

.login-form .login-form-box .inputs input {
  padding:.5rem;
  border:0;
  border-radius: 1rem;
  margin:.1rem 0;
  display: inline-block;
  border:1px solid #aaa;
}

.login-form .login-form-box .inputs label {
  display:block;
  margin:1rem auto 0 auto;
}

.login-form .login-form-box button {
  margin:1.5rem 1rem 2rem 1rem;
  border-radius:.3rem;
  padding:1rem;
  border:0;
  background:#88d;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition: background-color .2s ease-out, color .2s ease-out;
}

.login-form .login-form-box button:hover {
  background: rgb(115, 115, 215);
}


.login-form .login-form-box .fork {
  margin:1.1rem;
  cursor:pointer;
  border-radius:.3rem;
  max-width:fit-content;
  margin:0 auto;
  padding:.5rem;
  transition:background-color .3s;
}

.login-form .login-form-box .fork:hover {
  background:#ddd;
  transition:background-color .3s;
}

.login-form .login-form-box a {
  padding:.5rem;
  border-radius: .3rem;
  background: #fff;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  cursor:pointer;
}

.login-form .login-form-box a::before {
  content:'▸';
  padding-right:.5rem;
}

.login-form .login-form-box a.unfold::before {
  content:'▼';
}

.login-form .hcontainer {
  display:flex;
}

.login-form .hbox {
  flex:0 0 auto;
}

.login-form .hfill {
  flex:1 1 10px;
}

.login-form .wikimedia_box {
  flex:0 1 auto;
  margin:2rem 0 0 2rem;
  border:1px solid #aaa;
  max-width:20rem;
  border-radius:.5rem;
  padding:2rem 1rem;
  transition:background-color 1s;
  cursor:pointer;
}

.login-form .wikimedia_box:hover {
  background:#ddd;
  transition:background-color 1s;
}

.login-form .wikimedia_title {
  font-weight:bold;
}

.login-form .wikimedia_button {
  width:6rem;
  cursor:pointer;
  padding:1rem;
}

table.details_wikiwix {
  width:50%;
  min-width:18rem;
  margin:2rem auto;
}

table.details_wikiwix tr th {
  font-weight:bold;
}

table.details_wikiwix tr :nth-child(1) {
  text-align:right;
  padding:0 .5rem;
}

table.details_wikiwix tr :nth-child(2) {
  text-align:left;
  padding:0 .5rem;
}

.user_box {
  width:max-content;
  margin:0 auto 2rem auto;
}

.logout_box {
  display:inline-block;
  padding:.5rem 1rem;
  border:1px solid #aaa;
  border-radius:1rem;
  width:max-content;
  margin:0 1rem;
  transition:background-color 1s;
  cursor:pointer;
}

.logout_box img {
  display:inline-block;
  vertical-align: text-bottom;
}

.logout_box:hover {
  background:#ddd;
  transition:background-color 1s;
}

.totalfolded {
  max-height:0;
  transition:max-height 1s;
  overflow:hidden;
}

.averageunfolded {
  max-height:30rem;
  transition:max-height 1s;
  overflow:hidden;

}

.folded {
  max-height:5rem;
  transition:max-height 2s;
}

.unfolded {
  max-height:200rem;
  transition:max-height 2s;
}

.readmore {
  color:#88d;
  text-decoration:none;
  cursor:pointer;
  font-weight:bold;
  transition:background-color .5s;
}

.readmore:hover {
  background:#ddd;
  transition:background-color .5s;
}

@media screen and (max-width: 680px) {

  .login-form .login-form-box p {
      width:100%;
  }

  .head {
    width:100%;
    min-width:auto;
  }

  .results-list {
    width:100%;
    min-width:auto;
  }

  .react-horizontal-scrolling-menu--wrapper {
    width:100%;
    min-width:auto;
  }

  .head .title {
    font-size:3rem;
    text-align:center;
    padding:0 0 3rem 0;
    letter-spacing: .4rem;
    color:#88d;
  }
  
  .head .burger {
    margin:.5rem 1rem;
  }
}