/*** COLORS ***/
@bg-color: #FFFFFF;
@icn-color: #000000;

@font-face {
  font-family: glimmer-of-light;
  src: url(glimmer-of-light.otf);
}

/*** DEMO ***/
html,body {
  height:100%;
  margin:0;
  font-family: 'Noto Sans',sans-serif;
  color:#333133;
  font-weight:400;
}

#result-container{
  margin-bottom:60px;
}

#footer{
  height:60px;
}

.image-float-left{
    float: left;    
}

.text-search h3{
  text-align:center; 
  font-size:1.4em; 
  margin-top:20px;
}

.text-close-modal{
  font-size:1.5em;
}

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

.bulb{
  margin-right:20px;
}

.modal{
  text-align:center;
}

.modal-content{
  text-align:justify;
}

.close-modal{
  margin: 0 auto;
  padding:10px;
}

.modal-dialog{
  min-width:40%;
}

.modal-title{
  text-align: center;
  font-weight: bold;
  width:100%;
  margin-top:20px;
}

#btn-close-modal{
  margin-top:30px;
  margin-bottom:20px;
  font-size:1.5em;
}

.modal-body{
  margin-top:20px;
  margin-bottom:20px;
  font-size:1.1em;
  padding-top:10px;
  padding-bottom: 20px;
  padding-left:20px;
  padding-right:20px;
}

.close-popup{
  width:100%;  
}

@media only screen and (min-width: 1080px) {
  .modal-body{
    padding-left:80px;
    padding-right:80px;
  }
  .close-popup{
    width:60%;  
  }
  .family-info{
    margin-left:50px;
  }
}

.image-separation-indice{
  width:100%;
}

.image-finale {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.image-chroniqueuse {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}



@media only screen and (min-width: 1080px) {
  .azir{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  .cryptex{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
  }
  .image-chroniqueuse {
    width: 50%;
  }
  
  // #image-avancee{
  //   display: block;
  //   margin-left: auto;
  //   margin-right: auto;
  //   width: 70%;
  // }
}

.name{
  text-align: center;
  border:none;
  padding:0;
  margin:0;
  font-size:2em;
}

.titre-personnages-emblematiques{
  padding:0;
  text-align: center;
  border:none;
  font-size:2em;
  color: #907349;
  font-family: 'glimmer-of-light';
}



.undername{
  margin:auto;
  width:50%;
  font-family: 'glimmer-of-light';
}

.info_personnage{
  font-family: 'glimmer-of-light';
  color: #907349;
  font-size:1.3em;
}

.valeur-info-personnage{
  font-size:1.1em;
}

.preferences{
  margin-top:20px;
  font-size:1.3em;
}

.like-title{
  font-family: 'glimmer-of-light';
  color: #50C878;
}

.dislike-title{
  font-family: 'glimmer-of-light';
  color: #880808;
}

.modal-header{
  border:none !important;
}

.like{
  text-align: center;
  border:solid 5px;
  border-radius: 25px;
  border-color:#50C878;
  margin-bottom:20px;
}

.infos-personnage{
  font-weight:400;
  margin-top:30px;
}

@media only screen and (min-width: 1080px) {
  .infos-personnage{
     line-height: 190%;
  }
  .like{
    margin-bottom: 0px;
  }
}

.dislike{
  text-align: center;
  border:solid 5px;
  border-radius: 25px;
  border-color:#880808;
}

// @media only screen and (min-width: 1080px) {
//   .dislike{
//     margin-left:30px;
//   }
// }

.bouton-popup{
  margin-bottom:30px;
}

hr.rounded {
  border-top: 8px solid #907349;
  border-radius: 5px;
  margin-top:40px;
  margin-bottom:40px;
}

.description-personnage{
  font-size:1.1em;
  text-align: justify;
}

#imagefull-container{
  text-align: justify;
  font-size:1.1em;
}

#texte-container{
  text-align: justify;
}

.question-modal{
  margin-top:20px;
  font-size:1.6em;
}

.indice-modal{
  margin-bottom: 20px;
  font-size:1.1em;
  text-align: justify;
}

.alert-heading{
  text-align: center;
}

.btn.btn-primary{
  background-color: #7856eb;
}
.next-enigma{
font-size:2em;
padding:20px;
}

.reward-enigma{
  font-size:2em;
  padding:20px;
}

.reward-enigma.btn.btn-primary{
  background-color : #28a745;
}

.title-block{
  font-weight:bold;
  color: #7451EB;
}

.header-logo {
    position:relative;
    top : 25%;
}

.search-bar {
  position:relative;
  top : 25%;
}

@media only screen and (min-width: 1080px) {
  .header-logo {
    top : 250px;
}
  .search-bar {
    top : 250px;
  }
}

.image-texte-pc{
  display:none;
}

@media only screen and (min-width: 1080px) {
  .image-texte-mobile{
    display:none;
  }
  .image-texte-pc{
    display:block;
  }
}

a {
  color: black;
  text-decoration: none;
  text-underline: none;
}

#categories{
  text-align:center;
  word-wrap: break-word;
}


.badge-category{
  //background-image: linear-gradient(30deg, #7451EB 0%, #F089E5 100%);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
  border-radius: 25px;
  word-wrap: break-word;
  font-size:1.2rem;
}

.icon-category{
  font-size:1.5rem;
  color: #7451EB;
}

.icon-header{
  color: #7451EB;
}
.container {
  height:100%;
}

.error-response{
  font-size:1.5rem;
}

.image-container{
  margin: 0 auto;
  width:50%;
}

.container-next-enigma{
  margin: 0 auto;
  padding: 20px 0 0 0;
}

@media only screen and (min-width: 1080px) {
  .container-next-enigma{
    width:50%;  
  }
}

.navigation {
  border-top: 1px dotted black;
  border-bottom: 1px dotted black;
  font-size:1.5em;
  font-weight:400;
}

.description{
  text-align: justify;
  padding:10px;
  font-size:1.1em;
}

@media only screen and (min-width: 1080px) {
  .description{
    text-align: justify;
    padding:20px;
  }
}

.search-container {
  // font-size:1.5em;
  // font-weight:400;
}

.description-imagetexte{
  font-size:1.1em;
  margin-bottom: 60px;
}

p {
  margin-top:30px
}

.form-control:focus {
  box-shadow: none;
}

.form-control-underlined {
  border-width: 0;
  border-bottom-width: 1px;
  border-radius: 0;
  padding-left: 0;
}

body {
  min-height: 100vh;
}

.form-control::placeholder {
  font-size: 0.95rem;
  color: #aaa;
  font-style: italic;
}

.badge-back{
  background-color : #F8F8F8;
  //background-color:#272727;
}

.badgecategory{
  white-space: pre-wrap;
  //background-image:linear-gradient(30deg, #7451EB 0%, #F089E5 100%);
  //background-color: #14A76C;
  color:#202020;
}

/**** TREEVIEW*/

*,
*:before,
*:after {
  box-sizing: border-box;
  outline: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.category-header {
margin-bottom: 1rem;
}

.ball {
  font-size:1.5em;
  font-weight:400;
}

h1 {
  margin: 1em 0;
  text-align: center;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}

/*Treeview ***********************************************/
.treeview input[type=checkbox]{
  display:none
}

.treeview,
.treeview ul{
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#category_title{
  text-align:center;
}

.treeview li{
  padding-left: 27px;
  position: relative;
  font-size: 1rem;
  margin-top: 4px;
  display: flex;
  flex-direction: column
}
.treeview > li{
  padding-left: 0;
}

.treeview ul{
  max-height: 0;
  -webkit-transition: .8s ease;
  -moz-transition: .8s ease;
  -ms-transition: .8s ease;
  -o-transition: .8s ease;
}

.treeview li input:nth-of-type(1):checked ~ ul{
  max-height: 1000px;
}

.treeview li label{
  padding: 16px;
  padding-left: 78px;
  background-color: #f3f3f4;
  cursor: pointer;
  border-radius: 100px;
  height: 65px;
  font-size:1.5em;
  font-weight:400;
  display: flex;
  align-items: center;
}
.treeview li label i{
  font-size: 14px
}
.treeview li label > span{
  margin: 0 20px
}
.treeview li label input[type=text]{
  flex: 1;
  color: #676A6C;
  background: white;
  border: none;
  border-radius: 3px;
  transition: .2s ease;
  padding: 9px;
  margin-left: 10px;
  background: none
}
.treeview li label input[type=text]:focus,
.treeview li label input[type=text]:hover{
  background: white
}

.treeview li label:not(.child):before{
  transition: .3s ease;
  position: absolute;
  margin-left: -26px;
}
.treeview li label:not(.child):before{
  font: normal normal normal 18px/1 FontAwesome;
  content: "\f054";
  margin-right: 1em;
}

.treeview li input[type=checkbox]:checked + label:before{
  transform: rotate(90deg);
}
.treeview .ball{
  left: 16px;
  margin-left: -60px;
  padding-right: 30px;
}
.treeview .ball:before{
  color: #fff;
  position: relative;
  display: flex;
  border-radius: 50%;
  background-color: #23c6c8;
  align-items: center;
  height: 23px;
  width: 23px;
  font-size: 13px;
  justify-content: center;
  content: attr(data-id);
}
.treeview .action-list{
  margin-left: auto
}
.treeview .action-list i{
  margin-left: 15px
}